/* [next]/internal/font/google/readex_pro_2996f5f4.module.css [app-client] (css) */
@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/52acd2ded95ac6cd-s.1ybfybs3k8tn2.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF?, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/4ce61fe437b63f55-s.238a-out_b_td.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/ecc51711236713ee-s.0r85y2mk2089i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/890431f0a0104557-s.p.3pc31ksexexjr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/52acd2ded95ac6cd-s.1ybfybs3k8tn2.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF?, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/4ce61fe437b63f55-s.238a-out_b_td.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ecc51711236713ee-s.0r85y2mk2089i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/890431f0a0104557-s.p.3pc31ksexexjr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/52acd2ded95ac6cd-s.1ybfybs3k8tn2.woff2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-891, U+897-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF?, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/4ce61fe437b63f55-s.238a-out_b_td.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/ecc51711236713ee-s.0r85y2mk2089i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Readex Pro;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/890431f0a0104557-s.p.3pc31ksexexjr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Readex Pro Fallback;
  src: local(Arial);
  ascent-override: 92.3%;
  descent-override: 23.07%;
  line-gap-override: 0.0%;
  size-adjust: 108.34%;
}

.readex_pro_2996f5f4-module__usk8DG__className {
  font-family: Readex Pro, Readex Pro Fallback;
  font-style: normal;
}

.readex_pro_2996f5f4-module__usk8DG__variable {
  --font-readex-pro: "Readex Pro", "Readex Pro Fallback";
}

/* [next]/internal/font/google/inter_4703c717.module.css [app-client] (css) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0-dom-5bn10r2.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.3lvt2whj97whp.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.2uwcyprjm3xu3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0-dom-5bn10r2.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.3lvt2whj97whp.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.2uwcyprjm3xu3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

.inter_4703c717-module__7VOvpG__className {
  font-family: Inter, Inter Fallback;
  font-style: normal;
}

.inter_4703c717-module__7VOvpG__variable {
  --font-inter: "Inter", "Inter Fallback";
}

/* [next]/internal/font/google/roboto_mono_53d2ed8.module.css [app-client] (css) */
@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/14b51e6f05e7993b-s.1m7tfjhi3_ijy.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/bf20a4c9c54dabb0-s.2f4aid8vwfefn.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/1aacd976339e773a-s.44luoswa8z2ur.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/a1c52d8bde3dabc1-s.3qfc8hao1a50y.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/6eae311961c4b519-s.3416w0cqefxxc.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/090af37c9cfa0a49-s.p.2a-hmu8dzwrio.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Roboto Mono Fallback;
  src: local(Arial);
  ascent-override: 77.84%;
  descent-override: 20.13%;
  line-gap-override: 0.0%;
  size-adjust: 134.61%;
}

.roboto_mono_53d2ed8-module__4EmayG__className {
  font-family: Roboto Mono, Roboto Mono Fallback;
  font-style: normal;
  font-weight: 400;
}

.roboto_mono_53d2ed8-module__4EmayG__variable {
  --font-roboto-mono: "Roboto Mono", "Roboto Mono Fallback";
}

/* [project]/examples/fieldops/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --spacing: .25rem;
    --container-md: 28rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--m3-font-body);
    --default-mono-font-family: var(--m3-font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components {
  .m3-state {
    isolation: isolate;
    position: relative;
  }

  .m3-state:before {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background-color: #0000;
    transition: background-color .1s;
    position: absolute;
    inset: 0;
  }

  .m3-state > * {
    z-index: 1;
    position: relative;
  }

  .m3-state:where(button, a, label, summary, [role="button"], [role="option"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="radio"], [role="switch"], [tabindex]:not([tabindex="-1"])):not(:disabled):not([aria-disabled="true"]) {
    cursor: pointer;
  }

  .m3-state:disabled, .m3-state[aria-disabled="true"] {
    cursor: not-allowed;
  }

  .m3-state:hover:not(:disabled):not([aria-disabled="true"]):before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state:hover:not(:disabled):not([aria-disabled="true"]):before {
      background-color: color-mix(in srgb, var(--m3-state-on) 8%, transparent);
    }
  }

  .m3-state:focus-visible:not(:disabled):not([aria-disabled="true"]):before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state:focus-visible:not(:disabled):not([aria-disabled="true"]):before {
      background-color: color-mix(in srgb, var(--m3-state-on) 10%, transparent);
    }
  }

  .m3-state:active:not(:disabled):not([aria-disabled="true"]):before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state:active:not(:disabled):not([aria-disabled="true"]):before {
      background-color: color-mix(in srgb, var(--m3-state-on) 8%, transparent);
    }
  }

  .m3-state[data-dragged="true"]:before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state[data-dragged="true"]:before {
      background-color: color-mix(in srgb, var(--m3-state-on) 16%, transparent);
    }
  }

  .m3-state[data-selected="true"]:before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state[data-selected="true"]:before {
      background-color: color-mix(in srgb, var(--m3-state-on) 8%, transparent);
    }
  }

  .m3-state[data-selected="true"]:hover:not(:disabled):before {
    background-color: var(--m3-state-on);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-state[data-selected="true"]:hover:not(:disabled):before {
      background-color: color-mix(in srgb, var(--m3-state-on) 16%, transparent);
    }
  }

  tr.m3-state:before {
    content: none;
  }

  tr.m3-state > * {
    position: static;
  }

  tr.m3-state:hover:not([aria-disabled="true"]) {
    background-image: linear-gradient(0deg, var(--m3-state-on) 0 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    tr.m3-state:hover:not([aria-disabled="true"]) {
      background-image: linear-gradient(0deg, color-mix(in srgb, var(--m3-state-on) 8%, transparent) 0 100%);
    }
  }

  tr.m3-state:focus-within:not([aria-disabled="true"]) {
    background-image: linear-gradient(0deg, var(--m3-state-on) 0 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    tr.m3-state:focus-within:not([aria-disabled="true"]) {
      background-image: linear-gradient(0deg, color-mix(in srgb, var(--m3-state-on) 10%, transparent) 0 100%);
    }
  }

  tr.m3-state:active:not([aria-disabled="true"]) {
    background-image: linear-gradient(0deg, var(--m3-state-on) 0 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    tr.m3-state:active:not([aria-disabled="true"]) {
      background-image: linear-gradient(0deg, color-mix(in srgb, var(--m3-state-on) 8%, transparent) 0 100%);
    }
  }

  .m3-target:after {
    content: "";
    width: 100%;
    min-width: 48px;
    height: 100%;
    min-height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .m3-target-40:after {
    min-width: 40px;
    min-height: 40px;
  }

  .m3-disabled-content:disabled, .m3-disabled-content[aria-disabled="true"] {
    opacity: .38;
    cursor: not-allowed;
  }

  .m3-disabled-container:disabled, .m3-disabled-container[aria-disabled="true"] {
    cursor: not-allowed;
    background-color: var(--m3-on-surface-variant-subtler) !important;
    box-shadow: none !important;
    color: var(--m3-on-surface) !important;
    border-color: #0000 !important;
  }

  .m3-disabled-container:disabled > *, .m3-disabled-container[aria-disabled="true"] > * {
    opacity: .38;
  }

  @keyframes m3-indeterminate {
    0% {
      transform: translateX(-100%) scaleX(.4);
    }

    50% {
      transform: translateX(20%) scaleX(.6);
    }

    100% {
      transform: translateX(100%) scaleX(.4);
    }
  }

  @keyframes m3-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .m3-indeterminate-bar {
    animation: 1.6s cubic-bezier(.65, .815, .735, .395) infinite m3-indeterminate;
  }

  .m3-spin {
    animation: 1.2s linear infinite m3-spin;
  }

  @media (prefers-reduced-motion: reduce) {
    .m3-state:before {
      transition: none;
    }

    .m3-indeterminate-bar, .m3-spin {
      animation-duration: 3s;
    }
  }

  .m3-gutter {
    margin-bottom: .25lh;
  }

  @keyframes m3-skeleton {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  .m3-skeleton {
    background-image: linear-gradient(90deg, transparent 0%, var(--m3-on-surface) 50%, transparent 100%);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .m3-skeleton {
      background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--m3-on-surface) 6%, transparent) 50%, transparent 100%);
    }
  }

  .m3-skeleton {
    background-size: 200% 100%;
    animation: 1.8s ease-in-out infinite m3-skeleton;
  }

  @media (prefers-reduced-motion: reduce) {
    .m3-skeleton {
      animation: none;
    }
  }

  [data-inspect="targets"] .m3-target:after {
    outline: 1px dashed var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-inspect="targets"] .m3-target:after {
      outline: 1px dashed color-mix(in srgb, var(--m3-tertiary) 90%, transparent);
    }
  }

  [data-inspect="targets"] .m3-target:after {
    background-color: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-inspect="targets"] .m3-target:after {
      background-color: color-mix(in srgb, var(--m3-tertiary) 14%, transparent);
    }
  }

  [data-inspect="targets"] .m3-state:before {
    outline: 1px solid var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-inspect="targets"] .m3-state:before {
      outline: 1px solid color-mix(in srgb, var(--m3-primary) 45%, transparent);
    }
  }

  [data-inspect="targets"] tr.m3-state {
    outline: 1px solid var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    [data-inspect="targets"] tr.m3-state {
      outline: 1px solid color-mix(in srgb, var(--m3-primary) 45%, transparent);
    }
  }

  [data-inspect="targets"] tr.m3-state {
    outline-offset: -1px;
  }
}

@layer utilities {
  .\@container\/page {
    container: page / inline-size;
  }

  .\@container {
    container-type: inline-size;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .inset-y-0 {
    inset-block: 0;
  }

  .-top-2 {
    top: calc(var(--spacing) * -2);
  }

  .top-0 {
    top: 0;
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-24 {
    top: calc(var(--spacing) * 24);
  }

  .top-\[calc\(100\%-1rem\)\] {
    top: calc(100% - 1rem);
  }

  .top-full {
    top: 100%;
  }

  .right-0 {
    right: 0;
  }

  .bottom-0 {
    bottom: 0;
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-full {
    bottom: 100%;
  }

  .left-0 {
    left: 0;
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .z-10 {
    z-index: 10;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-7 {
    grid-column: span 7 / span 7;
  }

  .col-span-8 {
    grid-column: span 8 / span 8;
  }

  .col-span-9 {
    grid-column: span 9 / span 9;
  }

  .col-span-10 {
    grid-column: span 10 / span 10;
  }

  .col-span-11 {
    grid-column: span 11 / span 11;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 320px) {
    .container {
      max-width: 320px;
    }
  }

  @media (min-width: 600px) {
    .container {
      max-width: 600px;
    }
  }

  @media (min-width: 840px) {
    .container {
      max-width: 840px;
    }

    .container {
      max-width: 840px;
    }
  }

  @media (min-width: 1280px) {
    .container {
      max-width: 1280px;
    }

    .container {
      max-width: 1280px;
    }

    .container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1660px) {
    .container {
      max-width: 1660px;
    }

    .container {
      max-width: 1660px;
    }
  }

  @media (min-width: 2020px) {
    .container {
      max-width: 2020px;
    }
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .-ml-px {
    margin-left: -1px;
  }

  .ml-1 {
    margin-left: var(--spacing);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-\[22px\] {
    margin-left: 22px;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .inline-grid {
    display: inline-grid;
  }

  .table {
    display: table;
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-24 {
    width: calc(var(--spacing) * 24);
    height: calc(var(--spacing) * 24);
  }

  .size-40 {
    width: calc(var(--spacing) * 40);
    height: calc(var(--spacing) * 40);
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-0 {
    height: 0;
  }

  .h-1 {
    height: var(--spacing);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-13 {
    height: calc(var(--spacing) * 13);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-18 {
    height: calc(var(--spacing) * 18);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-38 {
    height: calc(var(--spacing) * 38);
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-auto {
    height: auto;
  }

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-full {
    max-height: 100%;
  }

  .min-h-0 {
    min-height: 0;
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-13 {
    min-height: calc(var(--spacing) * 13);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-15 {
    min-height: calc(var(--spacing) * 15);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-17 {
    min-height: calc(var(--spacing) * 17);
  }

  .min-h-18 {
    min-height: calc(var(--spacing) * 18);
  }

  .min-h-19 {
    min-height: calc(var(--spacing) * 19);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-21 {
    min-height: calc(var(--spacing) * 21);
  }

  .min-h-22 {
    min-height: calc(var(--spacing) * 22);
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-dvh {
    min-height: 100dvh;
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-90 {
    width: calc(var(--spacing) * 90);
  }

  .w-\[14\%\] {
    width: 14%;
  }

  .w-\[28\%\] {
    width: 28%;
  }

  .w-\[52px\] {
    width: 52px;
  }

  .w-\[312px\] {
    width: 312px;
  }

  .w-\[calc\(100\%-1rem\)\] {
    width: calc(100% - 1rem);
  }

  .w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem);
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[640px\] {
    max-width: 640px;
  }

  .max-w-\[720px\] {
    max-width: 720px;
  }

  .max-w-\[936px\] {
    max-width: 936px;
  }

  .max-w-\[1128px\] {
    max-width: 1128px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-12 {
    min-width: calc(var(--spacing) * 12);
  }

  .min-w-40 {
    min-width: calc(var(--spacing) * 40);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/3 {
    --tw-translate-x: calc(1 / 3 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/3 {
    --tw-translate-y: calc(calc(1 / 3 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-\[calc\(100\%\+1rem\)\] {
    --tw-translate-y: calc(calc(100% + 1rem) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-y {
    resize: vertical;
  }

  .list-none {
    list-style-type: none;
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-16 {
    gap: calc(var(--spacing) * 16);
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-y-0 {
    row-gap: 0;
  }

  .gap-y-1 {
    row-gap: var(--spacing);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  .gap-y-5 {
    row-gap: calc(var(--spacing) * 5);
  }

  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }

  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }

  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }

  .gap-y-12 {
    row-gap: calc(var(--spacing) * 12);
  }

  .gap-y-16 {
    row-gap: calc(var(--spacing) * 16);
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-container {
    border-radius: var(--m3-shape-container-radius);
  }

  .rounded-full {
    border-radius: var(--m3-radius-full);
  }

  .rounded-large {
    border-radius: var(--m3-radius-large);
  }

  .rounded-medium {
    border-radius: var(--m3-radius-medium);
  }

  .rounded-none {
    border-radius: var(--m3-radius-none);
  }

  .rounded-small {
    border-radius: var(--m3-radius-small);
  }

  .rounded-xlarge {
    border-radius: var(--m3-radius-xlarge);
  }

  .rounded-xsmall {
    border-radius: var(--m3-radius-xsmall);
  }

  .rounded-t-full {
    border-top-left-radius: var(--m3-radius-full);
    border-top-right-radius: var(--m3-radius-full);
  }

  .rounded-t-medium {
    border-top-left-radius: var(--m3-radius-medium);
    border-top-right-radius: var(--m3-radius-medium);
  }

  .rounded-t-xlarge {
    border-top-left-radius: var(--m3-radius-xlarge);
    border-top-right-radius: var(--m3-radius-xlarge);
  }

  .rounded-t-xsmall {
    border-top-left-radius: var(--m3-radius-xsmall);
    border-top-right-radius: var(--m3-radius-xsmall);
  }

  .rounded-l-full {
    border-top-left-radius: var(--m3-radius-full);
    border-bottom-left-radius: var(--m3-radius-full);
  }

  .rounded-l-large {
    border-top-left-radius: var(--m3-radius-large);
    border-bottom-left-radius: var(--m3-radius-large);
  }

  .rounded-r-full {
    border-top-right-radius: var(--m3-radius-full);
    border-bottom-right-radius: var(--m3-radius-full);
  }

  .rounded-r-large {
    border-top-right-radius: var(--m3-radius-large);
    border-bottom-right-radius: var(--m3-radius-large);
  }

  .rounded-b-medium {
    border-bottom-right-radius: var(--m3-radius-medium);
    border-bottom-left-radius: var(--m3-radius-medium);
  }

  .rounded-b-none {
    border-bottom-right-radius: var(--m3-radius-none);
    border-bottom-left-radius: var(--m3-radius-none);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-error {
    border-color: var(--m3-error);
  }

  .border-on-surface-variant {
    border-color: var(--m3-on-surface-variant);
  }

  .border-outline {
    border-color: var(--m3-outline);
  }

  .border-outline-variant {
    border-color: var(--m3-outline-variant);
  }

  .border-primary {
    border-color: var(--m3-primary);
  }

  .border-secondary {
    border-color: var(--m3-secondary);
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-error {
    background-color: var(--m3-error);
  }

  .bg-inverse-surface {
    background-color: var(--m3-inverse-surface);
  }

  .bg-on-primary {
    background-color: var(--m3-on-primary);
  }

  .bg-on-surface-variant {
    background-color: var(--m3-on-surface-variant);
  }

  .bg-outline {
    background-color: var(--m3-outline);
  }

  .bg-outline-variant {
    background-color: var(--m3-outline-variant);
  }

  .bg-primary {
    background-color: var(--m3-primary);
  }

  .bg-primary-container {
    background-color: var(--m3-primary-container);
  }

  .bg-primary-subtle {
    background-color: var(--m3-primary-subtle);
  }

  .bg-scrim\/40 {
    background-color: var(--m3-scrim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-scrim\/40 {
      background-color: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
    }
  }

  .bg-secondary-container {
    background-color: var(--m3-secondary-container);
  }

  .bg-surface {
    background-color: var(--m3-surface);
  }

  .bg-surface-container {
    background-color: var(--m3-surface-container);
  }

  .bg-surface-container-high {
    background-color: var(--m3-surface-container-high);
  }

  .bg-surface-container-highest {
    background-color: var(--m3-surface-container-highest);
  }

  .bg-surface-container-low {
    background-color: var(--m3-surface-container-low);
  }

  .bg-surface-container-lowest {
    background-color: var(--m3-surface-container-lowest);
  }

  .bg-tertiary-container {
    background-color: var(--m3-tertiary-container);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-on-primary-container {
    fill: var(--m3-on-primary-container);
  }

  .fill-on-secondary-container {
    fill: var(--m3-on-secondary-container);
  }

  .fill-on-tertiary-container {
    fill: var(--m3-on-tertiary-container);
  }

  .fill-primary {
    fill: var(--m3-primary);
  }

  .fill-primary-container {
    fill: var(--m3-primary-container);
  }

  .fill-secondary {
    fill: var(--m3-secondary);
  }

  .fill-secondary-container {
    fill: var(--m3-secondary-container);
  }

  .fill-tertiary {
    fill: var(--m3-tertiary);
  }

  .fill-tertiary-container {
    fill: var(--m3-tertiary-container);
  }

  .stroke-primary {
    stroke: var(--m3-primary);
  }

  .stroke-primary-container {
    stroke: var(--m3-primary-container);
  }

  .stroke-secondary {
    stroke: var(--m3-secondary);
  }

  .stroke-tertiary {
    stroke: var(--m3-tertiary);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: 0;
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-16 {
    padding: calc(var(--spacing) * 16);
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .pt-0 {
    padding-top: 0;
  }

  .pt-1 {
    padding-top: var(--spacing);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-\[22px\] {
    padding-left: 22px;
  }

  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .font-display {
    font-family: var(--m3-font-display);
  }

  .font-mono {
    font-family: var(--m3-font-mono);
  }

  .font-sans {
    font-family: var(--m3-font-body);
  }

  .text-body-large {
    font-size: var(--m3-type-body-large-size);
    line-height: var(--tw-leading, var(--m3-type-body-large-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-body-large-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-body-large-weight));
  }

  .text-body-medium {
    font-size: var(--m3-type-body-medium-size);
    line-height: var(--tw-leading, var(--m3-type-body-medium-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-body-medium-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-body-medium-weight));
  }

  .text-body-small {
    font-size: var(--m3-type-body-small-size);
    line-height: var(--tw-leading, var(--m3-type-body-small-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-body-small-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-body-small-weight));
  }

  .text-display-large {
    font-size: var(--m3-type-display-large-size);
    line-height: var(--tw-leading, var(--m3-type-display-large-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-display-large-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-display-large-weight));
  }

  .text-display-medium {
    font-size: var(--m3-type-display-medium-size);
    line-height: var(--tw-leading, var(--m3-type-display-medium-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-display-medium-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-display-medium-weight));
  }

  .text-display-small {
    font-size: var(--m3-type-display-small-size);
    line-height: var(--tw-leading, var(--m3-type-display-small-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-display-small-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-display-small-weight));
  }

  .text-headline-large {
    font-size: var(--m3-type-headline-large-size);
    line-height: var(--tw-leading, var(--m3-type-headline-large-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-headline-large-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-headline-large-weight));
  }

  .text-headline-medium {
    font-size: var(--m3-type-headline-medium-size);
    line-height: var(--tw-leading, var(--m3-type-headline-medium-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-headline-medium-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-headline-medium-weight));
  }

  .text-headline-small {
    font-size: var(--m3-type-headline-small-size);
    line-height: var(--tw-leading, var(--m3-type-headline-small-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-headline-small-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-headline-small-weight));
  }

  .text-label-large {
    font-size: var(--m3-type-label-large-size);
    line-height: var(--tw-leading, var(--m3-type-label-large-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-label-large-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-label-large-weight));
  }

  .text-label-medium {
    font-size: var(--m3-type-label-medium-size);
    line-height: var(--tw-leading, var(--m3-type-label-medium-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-label-medium-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-label-medium-weight));
  }

  .text-label-small {
    font-size: var(--m3-type-label-small-size);
    line-height: var(--tw-leading, var(--m3-type-label-small-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-label-small-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-label-small-weight));
  }

  .text-title-large {
    font-size: var(--m3-type-title-large-size);
    line-height: var(--tw-leading, var(--m3-type-title-large-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-title-large-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-title-large-weight));
  }

  .text-title-medium {
    font-size: var(--m3-type-title-medium-size);
    line-height: var(--tw-leading, var(--m3-type-title-medium-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-title-medium-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-title-medium-weight));
  }

  .text-title-small {
    font-size: var(--m3-type-title-small-size);
    line-height: var(--tw-leading, var(--m3-type-title-small-line));
    letter-spacing: var(--tw-tracking, var(--m3-type-title-small-tracking));
    font-weight: var(--tw-font-weight, var(--m3-type-title-small-weight));
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .wrap-anywhere {
    overflow-wrap: anywhere;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-error {
    color: var(--m3-error);
  }

  .text-inherit {
    color: inherit;
  }

  .text-inverse-primary {
    color: var(--m3-inverse-primary);
  }

  .text-on-error {
    color: var(--m3-on-error);
  }

  .text-on-inverse-surface {
    color: var(--m3-on-inverse-surface);
  }

  .text-on-primary {
    color: var(--m3-on-primary);
  }

  .text-on-primary-container {
    color: var(--m3-on-primary-container);
  }

  .text-on-scrim {
    color: var(--m3-on-scrim);
  }

  .text-on-secondary-container {
    color: var(--m3-on-secondary-container);
  }

  .text-on-surface {
    color: var(--m3-on-surface);
  }

  .text-on-surface-variant {
    color: var(--m3-on-surface-variant);
  }

  .text-on-tertiary-container {
    color: var(--m3-on-tertiary-container);
  }

  .text-primary {
    color: var(--m3-primary);
  }

  .text-secondary {
    color: var(--m3-secondary);
  }

  .text-surface-container-highest {
    color: var(--m3-surface-container-highest);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-38 {
    opacity: .38;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-\[0\.16\] {
    opacity: .16;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-e1 {
    --tw-shadow: var(--m3-elevation-1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-e2 {
    --tw-shadow: var(--m3-elevation-2);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-e3 {
    --tw-shadow: var(--m3-elevation-3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-e4 {
    --tw-shadow: var(--m3-elevation-4);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-e5 {
    --tw-shadow: var(--m3-elevation-5);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-outline-variant {
    --tw-ring-color: var(--m3-outline-variant);
  }

  .ring-primary {
    --tw-ring-color: var(--m3-primary);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .\!transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[--m3-state-on\:\\u2026\] {
    --m3-state-on: u2026;
  }

  .\[--m3-state-on\:var\(--m3-error\)\] {
    --m3-state-on: var(--m3-error);
  }

  .\[--m3-state-on\:var\(--m3-inverse-primary\)\] {
    --m3-state-on: var(--m3-inverse-primary);
  }

  .\[--m3-state-on\:var\(--m3-on-inverse-surface\)\] {
    --m3-state-on: var(--m3-on-inverse-surface);
  }

  .\[--m3-state-on\:var\(--m3-on-primary\)\] {
    --m3-state-on: var(--m3-on-primary);
  }

  .\[--m3-state-on\:var\(--m3-on-primary-container\)\] {
    --m3-state-on: var(--m3-on-primary-container);
  }

  .\[--m3-state-on\:var\(--m3-on-secondary-container\)\] {
    --m3-state-on: var(--m3-on-secondary-container);
  }

  .\[--m3-state-on\:var\(--m3-on-surface\)\] {
    --m3-state-on: var(--m3-on-surface);
  }

  .\[--m3-state-on\:var\(--m3-on-surface-variant\)\] {
    --m3-state-on: var(--m3-on-surface-variant);
  }

  .\[--m3-state-on\:var\(--m3-on-tertiary-container\)\] {
    --m3-state-on: var(--m3-on-tertiary-container);
  }

  .\[--m3-state-on\:var\(--m3-primary\)\] {
    --m3-state-on: var(--m3-primary);
  }

  .\[--m3-state-on\:…\] {
    --m3-state-on: …;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .peer-focus\:text-primary:is(:where(.peer):focus ~ *) {
    color: var(--m3-primary);
  }

  .placeholder\:text-on-surface-variant::placeholder {
    color: var(--m3-on-surface-variant);
  }

  .focus-within\:outline-2:focus-within {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-within\:-outline-offset-2:focus-within {
    outline-offset: calc(2px * -1);
  }

  .focus-within\:outline-offset-2:focus-within {
    outline-offset: 2px;
  }

  .focus-within\:outline-primary:focus-within {
    outline-color: var(--m3-primary);
  }

  @media (hover: hover) {
    .hover\:bg-on-surface-variant-subtlest:hover {
      background-color: var(--m3-on-surface-variant-subtlest);
    }

    .hover\:bg-on-surface\/8:hover {
      background-color: var(--m3-on-surface);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-on-surface\/8:hover {
        background-color: color-mix(in oklab, var(--m3-on-surface) 8%, transparent);
      }
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  .focus\:translate-y-0:focus {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .focus\:shadow-e3:focus {
    --tw-shadow: var(--m3-elevation-3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:-outline-offset-2:focus-visible {
    outline-offset: calc(2px * -1);
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-primary:focus-visible {
    outline-color: var(--m3-primary);
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-38:disabled {
    opacity: .38;
  }

  .has-\[\:focus\]\:border-\[3px\]:has(:focus) {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .has-\[\:focus\]\:border-b-\[3px\]:has(:focus) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 3px;
  }

  .has-\[\:focus\]\:border-primary:has(:focus) {
    border-color: var(--m3-primary);
  }

  @container (min-width: 600px) {
    .\@min-\[600px\]\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .\@min-\[600px\]\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .\@min-\[600px\]\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\@min-\[600px\]\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .\@min-\[600px\]\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .\@min-\[600px\]\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .\@min-\[600px\]\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .\@min-\[600px\]\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .\@min-\[600px\]\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .\@min-\[600px\]\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .\@min-\[600px\]\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .\@min-\[600px\]\:col-span-12 {
      grid-column: span 12 / span 12;
    }

    .\@min-\[600px\]\:flex {
      display: flex;
    }

    .\@min-\[600px\]\:grid-cols-8 {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .\@min-\[600px\]\:flex-col {
      flex-direction: column;
    }

    .\@min-\[600px\]\:flex-row {
      flex-direction: row;
    }
  }

  @container (min-width: 840px) {
    .\@min-\[840px\]\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .\@min-\[840px\]\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .\@min-\[840px\]\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\@min-\[840px\]\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .\@min-\[840px\]\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .\@min-\[840px\]\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .\@min-\[840px\]\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .\@min-\[840px\]\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .\@min-\[840px\]\:col-span-9 {
      grid-column: span 9 / span 9;
    }

    .\@min-\[840px\]\:col-span-10 {
      grid-column: span 10 / span 10;
    }

    .\@min-\[840px\]\:col-span-11 {
      grid-column: span 11 / span 11;
    }

    .\@min-\[840px\]\:col-span-12 {
      grid-column: span 12 / span 12;
    }

    .\@min-\[840px\]\:col-start-1 {
      grid-column-start: 1;
    }

    .\@min-\[840px\]\:col-start-2 {
      grid-column-start: 2;
    }

    .\@min-\[840px\]\:col-start-3 {
      grid-column-start: 3;
    }

    .\@min-\[840px\]\:col-start-4 {
      grid-column-start: 4;
    }

    .\@min-\[840px\]\:col-start-5 {
      grid-column-start: 5;
    }

    .\@min-\[840px\]\:col-start-6 {
      grid-column-start: 6;
    }

    .\@min-\[840px\]\:col-start-7 {
      grid-column-start: 7;
    }

    .\@min-\[840px\]\:col-start-8 {
      grid-column-start: 8;
    }

    .\@min-\[840px\]\:col-start-9 {
      grid-column-start: 9;
    }

    .\@min-\[840px\]\:col-start-10 {
      grid-column-start: 10;
    }

    .\@min-\[840px\]\:col-start-11 {
      grid-column-start: 11;
    }

    .\@min-\[840px\]\:col-start-12 {
      grid-column-start: 12;
    }

    .\@min-\[840px\]\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .\@min-\[840px\]\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }
  }

  @container page (min-width: 840px) {
    .\@min-\[840px\]\/page\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @container (min-width: 840px) {
    .\@min-\[840px\]\:p-10 {
      padding: calc(var(--spacing) * 10);
    }
  }

  .rtl\:-scale-x-100:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .\[\&_\.m3-skeleton\]\:bg-surface-container-low .m3-skeleton {
    background-color: var(--m3-surface-container-low);
  }

  .\[\&_th_button\>span\]\:transition-\[opacity\,transform\] th button > span {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .\[\&_th\.text-right_button\]\:flex-row-reverse th.text-right button {
    flex-direction: row-reverse;
  }

  .\[\&_th\:not\(\[aria-sort\]\)_button\:focus-visible\>span\]\:opacity-50 th:not([aria-sort]) button:focus-visible > span, .\[\&_th\:not\(\[aria-sort\]\)_button\:hover\>span\]\:opacity-50 th:not([aria-sort]) button:hover > span {
    opacity: .5;
  }

  .\[\&_th\:not\(\[aria-sort\]\)_button\>span\]\:opacity-0 th:not([aria-sort]) button > span {
    opacity: 0;
  }

  .\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration {
    appearance: none;
  }

  .\[\&\>\[data-gt-fill\]\]\:grow > [data-gt-fill] {
    flex-grow: 1;
  }

  .\[\&\>a\]\:max-w-full > a {
    max-width: 100%;
  }

  .\[\&\>a\>span\]\:min-w-0 > a > span {
    min-width: 0;
  }

  .\[\&\>a\>span\]\:truncate > a > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>button\]\:max-w-full > button {
    max-width: 100%;
  }

  .\[\&\>button\>span\]\:min-w-0 > button > span {
    min-width: 0;
  }

  .\[\&\>button\>span\]\:truncate > button > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&\>svg\]\:size-full > svg {
    width: 100%;
    height: 100%;
  }
}

:root {
  --m3-palette-primary-0: #000;
  --m3-palette-primary-4: #000e23;
  --m3-palette-primary-5: #001128;
  --m3-palette-primary-6: #00132d;
  --m3-palette-primary-10: #001c3b;
  --m3-palette-primary-12: #002042;
  --m3-palette-primary-17: #002a54;
  --m3-palette-primary-20: #003060;
  --m3-palette-primary-22: #003567;
  --m3-palette-primary-24: #00396f;
  --m3-palette-primary-25: #003b73;
  --m3-palette-primary-28: #00427f;
  --m3-palette-primary-30: #004787;
  --m3-palette-primary-35: #0a5399;
  --m3-palette-primary-40: #215fa6;
  --m3-palette-primary-50: #4178c1;
  --m3-palette-primary-55: #4f85cf;
  --m3-palette-primary-60: #5d92dd;
  --m3-palette-primary-70: #79adf9;
  --m3-palette-primary-80: #a6c8ff;
  --m3-palette-primary-85: #bed6ff;
  --m3-palette-primary-87: #c7dbff;
  --m3-palette-primary-90: #d5e3ff;
  --m3-palette-primary-92: #dee8ff;
  --m3-palette-primary-94: #e7eeff;
  --m3-palette-primary-95: #ebf1ff;
  --m3-palette-primary-96: #f0f3ff;
  --m3-palette-primary-98: #f9f9ff;
  --m3-palette-primary-99: #fdfbff;
  --m3-palette-primary-100: #fff;
  --m3-palette-secondary-0: #000;
  --m3-palette-secondary-4: #050e1d;
  --m3-palette-secondary-5: #071120;
  --m3-palette-secondary-6: #091423;
  --m3-palette-secondary-10: #121c2b;
  --m3-palette-secondary-12: #16202f;
  --m3-palette-secondary-17: #202a3a;
  --m3-palette-secondary-20: #273141;
  --m3-palette-secondary-22: #2b3546;
  --m3-palette-secondary-24: #303a4a;
  --m3-palette-secondary-25: #323c4c;
  --m3-palette-secondary-28: #394354;
  --m3-palette-secondary-30: #3d4758;
  --m3-palette-secondary-35: #495364;
  --m3-palette-secondary-40: #555f71;
  --m3-palette-secondary-50: #6d778a;
  --m3-palette-secondary-55: #7a8497;
  --m3-palette-secondary-60: #8791a5;
  --m3-palette-secondary-70: #a1acc0;
  --m3-palette-secondary-80: #bdc7dc;
  --m3-palette-secondary-85: #cbd5ea;
  --m3-palette-secondary-87: #d0daf0;
  --m3-palette-secondary-90: #d9e3f8;
  --m3-palette-secondary-92: #dee8fe;
  --m3-palette-secondary-94: #e7eeff;
  --m3-palette-secondary-95: #ebf1ff;
  --m3-palette-secondary-96: #f0f3ff;
  --m3-palette-secondary-98: #f9f9ff;
  --m3-palette-secondary-99: #fdfbff;
  --m3-palette-secondary-100: #fff;
  --m3-palette-tertiary-0: #000;
  --m3-palette-tertiary-4: #190621;
  --m3-palette-tertiary-5: #1c0824;
  --m3-palette-tertiary-6: #1e0b27;
  --m3-palette-tertiary-10: #27132f;
  --m3-palette-tertiary-12: #2c1834;
  --m3-palette-tertiary-17: #37223f;
  --m3-palette-tertiary-20: #3e2846;
  --m3-palette-tertiary-22: #422d4a;
  --m3-palette-tertiary-24: #47314f;
  --m3-palette-tertiary-25: #493351;
  --m3-palette-tertiary-28: #503a58;
  --m3-palette-tertiary-30: #553f5d;
  --m3-palette-tertiary-35: #614a69;
  --m3-palette-tertiary-40: #6e5676;
  --m3-palette-tertiary-50: #886e90;
  --m3-palette-tertiary-55: #957b9d;
  --m3-palette-tertiary-60: #a388aa;
  --m3-palette-tertiary-70: #bea2c6;
  --m3-palette-tertiary-80: #dbbde2;
  --m3-palette-tertiary-85: #e9caf0;
  --m3-palette-tertiary-87: #efd0f6;
  --m3-palette-tertiary-90: #f8d8ff;
  --m3-palette-tertiary-92: #fae0ff;
  --m3-palette-tertiary-94: #fde7ff;
  --m3-palette-tertiary-95: #feebff;
  --m3-palette-tertiary-96: #ffefff;
  --m3-palette-tertiary-98: #fff7fb;
  --m3-palette-tertiary-99: #fffbff;
  --m3-palette-tertiary-100: #fff;
  --m3-palette-error-0: #000;
  --m3-palette-error-4: #280001;
  --m3-palette-error-5: #2d0001;
  --m3-palette-error-6: #310001;
  --m3-palette-error-10: #410002;
  --m3-palette-error-12: #490002;
  --m3-palette-error-17: #5c0004;
  --m3-palette-error-20: #660607;
  --m3-palette-error-22: #6d0b0b;
  --m3-palette-error-24: #73110f;
  --m3-palette-error-25: #771411;
  --m3-palette-error-28: #801b17;
  --m3-palette-error-30: #87201b;
  --m3-palette-error-35: #972c25;
  --m3-palette-error-40: #a73830;
  --m3-palette-error-50: #c85045;
  --m3-palette-error-55: #d95c51;
  --m3-palette-error-60: #e9685c;
  --m3-palette-error-70: #ff897d;
  --m3-palette-error-80: #ffb4ab;
  --m3-palette-error-85: #ffc7c0;
  --m3-palette-error-87: #ffcfc9;
  --m3-palette-error-90: #ffdad6;
  --m3-palette-error-92: #ffe2de;
  --m3-palette-error-94: #ffe9e6;
  --m3-palette-error-95: #ffedea;
  --m3-palette-error-96: #fff0ee;
  --m3-palette-error-98: #fff8f7;
  --m3-palette-error-99: #fffbff;
  --m3-palette-error-100: #fff;
  --m3-palette-neutral-0: #000;
  --m3-palette-neutral-4: #0d0e11;
  --m3-palette-neutral-5: #101114;
  --m3-palette-neutral-6: #121316;
  --m3-palette-neutral-10: #1a1c1e;
  --m3-palette-neutral-12: #1e2023;
  --m3-palette-neutral-17: #292a2d;
  --m3-palette-neutral-20: #2f3033;
  --m3-palette-neutral-22: #343538;
  --m3-palette-neutral-24: #38393c;
  --m3-palette-neutral-25: #3a3b3e;
  --m3-palette-neutral-28: #414245;
  --m3-palette-neutral-30: #46474a;
  --m3-palette-neutral-35: #515256;
  --m3-palette-neutral-40: #5e5e62;
  --m3-palette-neutral-50: #76777a;
  --m3-palette-neutral-55: #838387;
  --m3-palette-neutral-60: #909094;
  --m3-palette-neutral-70: #ababae;
  --m3-palette-neutral-80: #c7c6ca;
  --m3-palette-neutral-85: #d5d4d8;
  --m3-palette-neutral-87: #dad9dd;
  --m3-palette-neutral-90: #e3e2e6;
  --m3-palette-neutral-92: #e9e7eb;
  --m3-palette-neutral-94: #eeedf1;
  --m3-palette-neutral-95: #f1f0f4;
  --m3-palette-neutral-96: #f4f3f7;
  --m3-palette-neutral-98: #faf9fd;
  --m3-palette-neutral-99: #fdfbff;
  --m3-palette-neutral-100: #fff;
  --m3-palette-neutral-variant-0: #000;
  --m3-palette-neutral-variant-4: #0b0e15;
  --m3-palette-neutral-variant-5: #0d1117;
  --m3-palette-neutral-variant-6: #10141a;
  --m3-palette-neutral-variant-10: #181c22;
  --m3-palette-neutral-variant-12: #1c2026;
  --m3-palette-neutral-variant-17: #262a31;
  --m3-palette-neutral-variant-20: #2d3038;
  --m3-palette-neutral-variant-22: #31353c;
  --m3-palette-neutral-variant-24: #363941;
  --m3-palette-neutral-variant-25: #383b43;
  --m3-palette-neutral-variant-28: #3f424a;
  --m3-palette-neutral-variant-30: #43474e;
  --m3-palette-neutral-variant-35: #4f525a;
  --m3-palette-neutral-variant-40: #5b5e66;
  --m3-palette-neutral-variant-50: #74777f;
  --m3-palette-neutral-variant-55: #80848c;
  --m3-palette-neutral-variant-60: #8d9199;
  --m3-palette-neutral-variant-70: #a8abb4;
  --m3-palette-neutral-variant-80: #c4c6cf;
  --m3-palette-neutral-variant-85: #d2d4dd;
  --m3-palette-neutral-variant-87: #d7dae3;
  --m3-palette-neutral-variant-90: #e0e2ec;
  --m3-palette-neutral-variant-92: #e5e8f1;
  --m3-palette-neutral-variant-94: #ebedf7;
  --m3-palette-neutral-variant-95: #eef0fa;
  --m3-palette-neutral-variant-96: #f1f3fd;
  --m3-palette-neutral-variant-98: #f9f9ff;
  --m3-palette-neutral-variant-99: #fdfbff;
  --m3-palette-neutral-variant-100: #fff;
  --m3-palette-logo-orange-0: #000;
  --m3-palette-logo-orange-4: #240300;
  --m3-palette-logo-orange-5: #290400;
  --m3-palette-logo-orange-6: #2e0400;
  --m3-palette-logo-orange-10: #3c0700;
  --m3-palette-logo-orange-12: #430900;
  --m3-palette-logo-orange-17: #560e00;
  --m3-palette-logo-orange-20: #611200;
  --m3-palette-logo-orange-22: #691400;
  --m3-palette-logo-orange-24: #6f1903;
  --m3-palette-logo-orange-25: #731b04;
  --m3-palette-logo-orange-28: #7c220a;
  --m3-palette-logo-orange-30: #83260f;
  --m3-palette-logo-orange-35: #933219;
  --m3-palette-logo-orange-40: #a33d24;
  --m3-palette-logo-orange-50: #c35539;
  --m3-palette-logo-orange-55: #d36145;
  --m3-palette-logo-orange-60: #e46e50;
  --m3-palette-logo-orange-70: #ff8b6d;
  --m3-palette-logo-orange-80: #ffb4a2;
  --m3-palette-logo-orange-85: #ffc8ba;
  --m3-palette-logo-orange-87: #ffcfc4;
  --m3-palette-logo-orange-90: #ffdad2;
  --m3-palette-logo-orange-92: #ffe2db;
  --m3-palette-logo-orange-94: #ffe9e4;
  --m3-palette-logo-orange-95: #ffede9;
  --m3-palette-logo-orange-96: #fff1ed;
  --m3-palette-logo-orange-98: #fff8f6;
  --m3-palette-logo-orange-99: #fffbff;
  --m3-palette-logo-orange-100: #fff;
  --m3-palette-logo-yellow-0: #000;
  --m3-palette-logo-yellow-4: #140d00;
  --m3-palette-logo-yellow-5: #181000;
  --m3-palette-logo-yellow-6: #1b1200;
  --m3-palette-logo-yellow-10: #251a00;
  --m3-palette-logo-yellow-12: #2a1e00;
  --m3-palette-logo-yellow-17: #362800;
  --m3-palette-logo-yellow-20: #3e2e00;
  --m3-palette-logo-yellow-22: #443200;
  --m3-palette-logo-yellow-24: #493600;
  --m3-palette-logo-yellow-25: #4c3900;
  --m3-palette-logo-yellow-28: #543f00;
  --m3-palette-logo-yellow-30: #5a4400;
  --m3-palette-logo-yellow-35: #684f00;
  --m3-palette-logo-yellow-40: #775a00;
  --m3-palette-logo-yellow-50: #957200;
  --m3-palette-logo-yellow-55: #a47e05;
  --m3-palette-logo-yellow-60: #b28b19;
  --m3-palette-logo-yellow-70: #d0a634;
  --m3-palette-logo-yellow-80: #edc14e;
  --m3-palette-logo-yellow-85: #fccf5a;
  --m3-palette-logo-yellow-87: #ffd56e;
  --m3-palette-logo-yellow-90: #ffdf97;
  --m3-palette-logo-yellow-92: #ffe6af;
  --m3-palette-logo-yellow-94: #ffecc6;
  --m3-palette-logo-yellow-95: #ffefd1;
  --m3-palette-logo-yellow-96: #fff2dc;
  --m3-palette-logo-yellow-98: #fff8f1;
  --m3-palette-logo-yellow-99: #fffbff;
  --m3-palette-logo-yellow-100: #fff;
  --m3-single-pane-medium-max: 936px;
  --m3-single-pane-large-max: 1128px;
  --m3-base-step: 4px;
  --m3-base-block: 64px;
  --m3-base-s1: 8px;
  --m3-base-s2: 16px;
  --m3-base-s1-step: 12px;
  --m3-base-s3: 24px;
  --m3-base-s4: 32px;
  --m3-base-s5: 40px;
  --m3-base-s6: 48px;
  --m3-base-s7: 56px;
  --m3-base-s8: 64px;
  --m3-base-s9: 72px;
  --m3-base-s10: 80px;
  --m3-base-s11: 88px;
  --m3-base-s12: 96px;
  --m3-breakpoint-xsmall-min: 320px;
  --m3-breakpoint-xsmall-max: 599px;
  --m3-breakpoint-small-min: 600px;
  --m3-breakpoint-small-max: 839px;
  --m3-breakpoint-medium-min: 840px;
  --m3-breakpoint-medium-max: 1279px;
  --m3-breakpoint-large-min: 1280px;
  --m3-breakpoint-large-max: 1659px;
  --m3-radius-xsmall: 4px;
  --m3-radius-small: 8px;
  --m3-radius-medium: 12px;
  --m3-radius-large: 16px;
  --m3-radius-xlarge: 28px;
  --m3-radius-none: 0px;
  --m3-radius-full: 96px;
  --m3-base-s3-step: 28px;
  --m3-small-dialog-panel-default-width: 360px;
  --m3-base-s2-step: 20px;
  --m3-base-s6-step: 52px;
  --m3-dialog-max: 640px;
  --m3-base-s5-step: 44px;
  --m3-base-s4-step: 36px;
  --m3-text-box-max: 720px;
  --m3-small-dialog-panel-max-width: 408px;
  --m3-small-dialog-panel-min-width: 256px;
  --m3-base-s7-step: 60px;
  --m3-base-s8-step: 68px;
  --m3-tooltip-rich-width: 312px;
  --m3-tooltip-plain-width: 200px;
  --m3-table-column-default: 128px;
  --m3-table-cell-min-width: 48px;
  --m3-single-pane-large-max-2x: 2256px;
  --m3-dialog-min: 256px;
  --m3-breakpoint-1-panel-docked-small-min: 840px;
  --m3-breakpoint-1-panel-docked-small-max: 1279px;
  --m3-breakpoint-1-panel-docked-medium-min: 1280px;
  --m3-breakpoint-1-panel-docked-medium-max: 1659px;
  --m3-breakpoint-1-panel-docked-large-min: 1660px;
  --m3-breakpoint-1-panel-docked-large-max: 2019px;
  --m3-breakpoint-2-panels-docked-small-min: 1280px;
  --m3-breakpoint-2-panels-docked-small-max: 1659px;
  --m3-breakpoint-2-panels-docked-medium-min: 1660px;
  --m3-breakpoint-2-panels-docked-medium-max: 2019px;
  --m3-breakpoint-2-panels-docked-large-min: 2020px;
  --m3-breakpoint-2-panels-docked-large-max: 2699px;
  --m3-panel-8-blocks: 512px;
  --m3-panel-14-blocks: 896px;
  --m3-shape-container-radius: 16px;
  --m3-shape-toolbar-radius: 8px;
  --m3-type-display-large-size: 52px;
  --m3-type-display-large-line: 64px;
  --m3-type-display-large-tracking: -.333px;
  --m3-type-display-large-weight: 500;
  --m3-type-display-medium-size: 41px;
  --m3-type-display-medium-line: 52px;
  --m3-type-display-medium-tracking: -.25px;
  --m3-type-display-medium-weight: 400;
  --m3-type-display-small-size: 36px;
  --m3-type-display-small-line: 48px;
  --m3-type-display-small-tracking: -.25px;
  --m3-type-display-small-weight: 300;
  --m3-type-headline-large-size: 32px;
  --m3-type-headline-large-line: 40px;
  --m3-type-headline-large-tracking: -.25px;
  --m3-type-headline-large-weight: 300;
  --m3-type-headline-medium-size: 28px;
  --m3-type-headline-medium-line: 36px;
  --m3-type-headline-medium-tracking: -.25px;
  --m3-type-headline-medium-weight: 400;
  --m3-type-headline-small-size: 25px;
  --m3-type-headline-small-line: 32px;
  --m3-type-headline-small-tracking: -.25px;
  --m3-type-headline-small-weight: 300;
  --m3-type-title-large-size: 22px;
  --m3-type-title-large-line: 28px;
  --m3-type-title-large-tracking: -.25px;
  --m3-type-title-large-weight: 500;
  --m3-type-title-medium-size: 18px;
  --m3-type-title-medium-line: 24px;
  --m3-type-title-medium-tracking: 0px;
  --m3-type-title-medium-weight: 400;
  --m3-type-title-small-size: 14px;
  --m3-type-title-small-line: 20px;
  --m3-type-title-small-tracking: 0px;
  --m3-type-title-small-weight: 400;
  --m3-type-body-large-size: 16px;
  --m3-type-body-large-line: 24px;
  --m3-type-body-large-tracking: .1px;
  --m3-type-body-large-weight: 400;
  --m3-type-body-medium-size: 14px;
  --m3-type-body-medium-line: 20px;
  --m3-type-body-medium-tracking: .2px;
  --m3-type-body-medium-weight: 400;
  --m3-type-body-small-size: 12px;
  --m3-type-body-small-line: 16px;
  --m3-type-body-small-tracking: .25px;
  --m3-type-body-small-weight: 400;
  --m3-type-label-large-size: 14px;
  --m3-type-label-large-line: 20px;
  --m3-type-label-large-tracking: .15px;
  --m3-type-label-large-weight: 500;
  --m3-type-label-medium-size: 12px;
  --m3-type-label-medium-line: 16px;
  --m3-type-label-medium-tracking: .35px;
  --m3-type-label-medium-weight: 500;
  --m3-type-label-small-size: 11px;
  --m3-type-label-small-line: 16px;
  --m3-type-label-small-tracking: .35px;
  --m3-type-label-small-weight: 500;
  --m3-font-display: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  --m3-font-body: Inter, "Segoe UI", system-ui, sans-serif;
  --m3-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
  --m3-elevation-0: none;
  --m3-elevation-1: 0 1px 3px #00000026, 0 1px 2px #0000004d;
  --m3-elevation-2: 0 2px 6px #00000026, 0 1px 2px #0000004d;
  --m3-elevation-3: 0 4px 8px #00000026, 0 1px 3px #0000004d;
  --m3-elevation-4: 0 6px 10px #00000026, 0 1px 3px #0000004d;
  --m3-elevation-5: 0 8px 12px #00000026, 0 1px 4px #0000004d;
}

@supports (color: lab(0% 0 0)) {
  :root {
    --m3-palette-primary-0: lab(0% 0 0);
    --m3-palette-primary-4: lab(3.76646% .311993 -15.3119);
    --m3-palette-primary-5: lab(4.78854% .322938 -17.5405);
    --m3-palette-primary-6: lab(5.65035% .916466 -19.9318);
    --m3-palette-primary-10: lab(9.77791% .504717 -23.492);
    --m3-palette-primary-12: lab(11.7241% .564948 -25.2947);
    --m3-palette-primary-17: lab(16.4906% .90228 -29.9505);
    --m3-palette-primary-20: lab(19.3391% 1.56656 -33.3344);
    --m3-palette-primary-22: lab(21.4827% .958368 -34.4574);
    --m3-palette-primary-24: lab(23.3229% 1.37675 -36.6218);
    --m3-palette-primary-25: lab(24.2429% 1.58657 -37.7035);
    --m3-palette-primary-28: lab(27.2784% 1.57225 -40.3748);
    --m3-palette-primary-30: lab(29.3815% 1.36074 -41.966);
    --m3-palette-primary-35: lab(34.393% 1.04293 -44.8545);
    --m3-palette-primary-40: lab(39.3338% .462338 -44.7115);
    --m3-palette-primary-50: lab(49.3449% -.358135 -44.4332);
    --m3-palette-primary-55: lab(54.3872% -.790715 -44.382);
    --m3-palette-primary-60: lab(59.3627% -1.05199 -44.332);
    --m3-palette-primary-70: lab(69.4417% -1.73029 -43.7837);
    --m3-palette-primary-80: lab(79.5864% -1.97446 -31.1082);
    --m3-palette-primary-85: lab(84.856% -1.64679 -22.9468);
    --m3-palette-primary-87: lab(86.7812% -1.26395 -19.9966);
    --m3-palette-primary-90: lab(89.8257% -.653446 -15.3218);
    --m3-palette-primary-92: lab(91.7532% -.121892 -12.3925);
    --m3-palette-primary-94: lab(93.9452% -.0212491 -9.0658);
    --m3-palette-primary-95: lab(94.9926% -.119686 -7.49743);
    --m3-palette-primary-96: lab(95.8778% .606805 -6.16794);
    --m3-palette-primary-98: lab(98.0519% .792116 -2.8693);
    --m3-palette-primary-99: lab(98.8527% 1.21886 -1.68526);
    --m3-palette-primary-100: lab(100% 0 0);
    --m3-palette-secondary-0: lab(0% 0 0);
    --m3-palette-secondary-4: lab(3.8201% .127338 -10.5405);
    --m3-palette-secondary-5: lab(4.84856% -.0938475 -11.3121);
    --m3-palette-secondary-6: lab(6.0001% -.462845 -11.8354);
    --m3-palette-secondary-10: lab(9.90544% -.594199 -11.7052);
    --m3-palette-secondary-12: lab(11.865% -.720859 -11.5245);
    --m3-palette-secondary-17: lab(16.688% -.673562 -11.8051);
    --m3-palette-secondary-20: lab(19.9357% -.787169 -11.5577);
    --m3-palette-secondary-22: lab(21.7995% -.595257 -12.0729);
    --m3-palette-secondary-24: lab(24.0181% -.892311 -11.3102);
    --m3-palette-secondary-25: lab(24.9135% -.910237 -11.2464);
    --m3-palette-secondary-28: lab(28.0335% -.743955 -11.6628);
    --m3-palette-secondary-30: lab(29.777% -.773594 -11.5679);
    --m3-palette-secondary-35: lab(34.9131% -.844568 -11.3122);
    --m3-palette-secondary-40: lab(39.9615% -.697285 -11.6201);
    --m3-palette-secondary-50: lab(49.7016% -.589222 -11.7581);
    --m3-palette-secondary-55: lab(54.8111% -.623316 -11.5572);
    --m3-palette-secondary-60: lab(59.8588% -.474066 -11.8837);
    --m3-palette-secondary-70: lab(69.9706% -.864595 -11.6488);
    --m3-palette-secondary-80: lab(79.952% -.392884 -11.7252);
    --m3-palette-secondary-85: lab(84.9896% -.408202 -11.5865);
    --m3-palette-secondary-87: lab(86.7868% -.258595 -12.0435);
    --m3-palette-secondary-90: lab(89.9457% -.418961 -11.4467);
    --m3-palette-secondary-92: lab(91.7314% -.271916 -11.9039);
    --m3-palette-secondary-94: lab(93.9452% -.0212491 -9.0658);
    --m3-palette-secondary-95: lab(94.9926% -.119686 -7.49743);
    --m3-palette-secondary-96: lab(95.8778% .606805 -6.16794);
    --m3-palette-secondary-98: lab(98.0519% .792116 -2.8693);
    --m3-palette-secondary-99: lab(98.8527% 1.21886 -1.68526);
    --m3-palette-secondary-100: lab(100% 0 0);
    --m3-palette-tertiary-0: lab(0% 0 0);
    --m3-palette-tertiary-4: lab(3.96368% 11.6314 -13.2397);
    --m3-palette-tertiary-5: lab(4.87451% 13.4121 -14.1462);
    --m3-palette-tertiary-6: lab(5.88474% 14.1604 -14.8474);
    --m3-palette-tertiary-10: lab(9.72916% 15.1023 -14.6834);
    --m3-palette-tertiary-12: lab(12.109% 14.8539 -14.5121);
    --m3-palette-tertiary-17: lab(16.9788% 14.9934 -14.5698);
    --m3-palette-tertiary-20: lab(19.9044% 15.3096 -14.7546);
    --m3-palette-tertiary-22: lab(21.9705% 14.5283 -14.2229);
    --m3-palette-tertiary-24: lab(23.9227% 14.9698 -14.5051);
    --m3-palette-tertiary-25: lab(24.8109% 14.8808 -14.4367);
    --m3-palette-tertiary-28: lab(27.8685% 14.6425 -14.2545);
    --m3-palette-tertiary-30: lab(30.0273% 14.4675 -14.1177);
    --m3-palette-tertiary-35: lab(34.8584% 14.7076 -14.2466);
    --m3-palette-tertiary-40: lab(39.9804% 14.9227 -14.3539);
    --m3-palette-tertiary-50: lab(49.9173% 15.4101 -14.6235);
    --m3-palette-tertiary-55: lab(55.0046% 15.1305 -14.3986);
    --m3-palette-tertiary-60: lab(60.1014% 15.2488 -14.037);
    --m3-palette-tertiary-70: lab(70.019% 15.4526 -14.5439);
    --m3-palette-tertiary-80: lab(80.1002% 15.887 -14.4097);
    --m3-palette-tertiary-85: lab(84.8664% 16.1809 -14.6036);
    --m3-palette-tertiary-87: lab(87.0057% 16.0984 -14.5373);
    --m3-palette-tertiary-90: lab(89.9356% 16.4495 -14.7724);
    --m3-palette-tertiary-92: lab(92.0242% 13.1984 -11.6631);
    --m3-palette-tertiary-94: lab(93.9682% 10.8332 -8.79636);
    --m3-palette-tertiary-95: lab(95.0277% 9.21148 -7.22588);
    --m3-palette-tertiary-96: lab(96.0723% 7.64307 -5.69372);
    --m3-palette-tertiary-98: lab(97.9394% 3.27885 -.926268);
    --m3-palette-tertiary-99: lab(99.0171% 1.88643 -1.41932);
    --m3-palette-tertiary-100: lab(100% 0 0);
    --m3-palette-error-0: lab(0% 0 0);
    --m3-palette-error-4: lab(4.2834% 18.9934 6.41615);
    --m3-palette-error-5: lab(5.29167% 22.421 8.02459);
    --m3-palette-error-6: lab(6.18802% 24.687 9.45743);
    --m3-palette-error-10: lab(10.405% 30.375 15.7283);
    --m3-palette-error-12: lab(12.5215% 32.8271 19.0226);
    --m3-palette-error-17: lab(17.4085% 38.4553 25.5758);
    --m3-palette-error-20: lab(20.4348% 39.8929 28.5414);
    --m3-palette-error-22: lab(22.5251% 40.9762 29.6902);
    --m3-palette-error-24: lab(24.4643% 41.4401 30.207);
    --m3-palette-error-25: lab(25.6815% 41.9288 30.5964);
    --m3-palette-error-28: lab(28.487% 42.8292 30.4849);
    --m3-palette-error-30: lab(30.6252% 43.5598 30.7538);
    --m3-palette-error-35: lab(35.6046% 44.8428 31.1062);
    --m3-palette-error-40: lab(40.5969% 45.9687 31.0758);
    --m3-palette-error-50: lab(50.6436% 48.2351 32.2161);
    --m3-palette-error-55: lab(55.6953% 49.5162 32.1939);
    --m3-palette-error-60: lab(60.522% 50.3743 32.5556);
    --m3-palette-error-70: lab(70.4791% 44.8604 27.6626);
    --m3-palette-error-80: lab(80.4245% 27.2571 16.1177);
    --m3-palette-error-85: lab(85.198% 19.8317 11.5888);
    --m3-palette-error-87: lab(87.2494% 16.8004 9.73464);
    --m3-palette-error-90: lab(90.1365% 12.8167 7.00166);
    --m3-palette-error-92: lab(92.2166% 9.83042 5.81002);
    --m3-palette-error-94: lab(94.0866% 7.38698 4.32709);
    --m3-palette-error-95: lab(95.1433% 5.91782 3.7606);
    --m3-palette-error-96: lab(95.9554% 4.97866 2.87957);
    --m3-palette-error-98: lab(98.1005% 2.27743 1.34859);
    --m3-palette-error-99: lab(99.0171% 1.88643 -1.41932);
    --m3-palette-error-100: lab(100% 0 0);
    --m3-palette-neutral-0: lab(0% 0 0);
    --m3-palette-neutral-4: lab(3.95909% .086695 -1.63735);
    --m3-palette-neutral-5: lab(5.05674% .0964627 -1.8879);
    --m3-palette-neutral-6: lab(5.87542% .102364 -2.04721);
    --m3-palette-neutral-10: lab(10.1206% -.572287 -1.71891);
    --m3-palette-neutral-12: lab(12.1334% -.36218 -2.36179);
    --m3-palette-neutral-17: lab(17.0502% .0935793 -2.11167);
    --m3-palette-neutral-20: lab(19.8465% .0896156 -2.07559);
    --m3-palette-neutral-22: lab(22.144% .0861436 -2.03903);
    --m3-palette-neutral-24: lab(23.9537% .0852943 -2.03967);
    --m3-palette-neutral-25: lab(24.8591% .0827462 -2.00244);
    --m3-palette-neutral-28: lab(27.957% .0797957 -1.96576);
    --m3-palette-neutral-30: lab(30.1494% .0791252 -1.9663);
    --m3-palette-neutral-35: lab(34.8921% .241756 -2.48417);
    --m3-palette-neutral-40: lab(40.0074% .635847 -2.28455);
    --m3-palette-neutral-50: lab(50.0235% .0661016 -1.78099);
    --m3-palette-neutral-55: lab(54.8583% .60308 -2.17793);
    --m3-palette-neutral-60: lab(59.882% .592619 -2.14214);
    --m3-palette-neutral-70: lab(70.0462% .430137 -1.56281);
    --m3-palette-neutral-80: lab(80.0465% .906467 -1.87359);
    --m3-palette-neutral-85: lab(85.082% .890225 -1.84026);
    --m3-palette-neutral-87: lab(86.8568% .890136 -1.84033);
    --m3-palette-neutral-90: lab(90.0468% .890195 -1.84028);
    --m3-palette-neutral-92: lab(91.8927% 1.2188 -1.68532);
    --m3-palette-neutral-94: lab(93.9107% .873685 -1.80705);
    --m3-palette-neutral-95: lab(94.9547% .873655 -1.80708);
    --m3-palette-neutral-96: lab(96.0103% .873923 -1.80696);
    --m3-palette-neutral-98: lab(98.0867% .873774 -1.80702);
    --m3-palette-neutral-99: lab(98.8527% 1.21886 -1.68526);
    --m3-palette-neutral-100: lab(100% 0 0);
    --m3-palette-neutral-variant-0: lab(0% 0 0);
    --m3-palette-neutral-variant-4: lab(3.92345% .126816 -4.22157);
    --m3-palette-neutral-variant-5: lab(4.90922% -.401199 -4.21373);
    --m3-palette-neutral-variant-6: lab(6.14088% -.484124 -4.72107);
    --m3-palette-neutral-variant-10: lab(10.0519% -.613831 -4.81224);
    --m3-palette-neutral-variant-12: lab(12.0378% -.621758 -4.71175);
    --m3-palette-neutral-variant-17: lab(16.8837% -.422671 -5.20703);
    --m3-palette-neutral-variant-20: lab(19.8124% .201866 -5.59503);
    --m3-palette-neutral-variant-22: lab(21.9801% -.439882 -5.03797);
    --m3-palette-neutral-variant-24: lab(23.9117% .172228 -5.42129);
    --m3-palette-neutral-variant-25: lab(24.8167% .169873 -5.42321);
    --m3-palette-neutral-variant-28: lab(27.9165% .153154 -5.31842);
    --m3-palette-neutral-variant-30: lab(29.9773% -.450701 -4.79569);
    --m3-palette-neutral-variant-35: lab(34.8227% .127181 -5.14362);
    --m3-palette-neutral-variant-40: lab(39.8485% .11228 -5.00074);
    --m3-palette-neutral-variant-50: lab(49.9792% .0917017 -4.82285);
    --m3-palette-neutral-variant-55: lab(55.0046% -.290155 -4.84419);
    --m3-palette-neutral-variant-60: lab(60.0286% -.291407 -4.77262);
    --m3-palette-neutral-variant-70: lab(69.9474% .217229 -5.01882);
    --m3-palette-neutral-variant-80: lab(79.9261% .555873 -4.76918);
    --m3-palette-neutral-variant-85: lab(84.9505% .545144 -4.69587);
    --m3-palette-neutral-variant-87: lab(87.0153% .196368 -4.79983);
    --m3-palette-neutral-variant-90: lab(89.9506% .677079 -5.13468);
    --m3-palette-neutral-variant-92: lab(91.9576% .192702 -4.76358);
    --m3-palette-neutral-variant-94: lab(93.8142% .670493 -5.0984);
    --m3-palette-neutral-variant-95: lab(94.859% .664741 -5.06146);
    --m3-palette-neutral-variant-96: lab(95.903% .664264 -5.06175);
    --m3-palette-neutral-variant-98: lab(98.0519% .792116 -2.8693);
    --m3-palette-neutral-variant-99: lab(98.8527% 1.21886 -1.68526);
    --m3-palette-neutral-variant-100: lab(100% 0 0);
    --m3-palette-logo-orange-0: lab(0% 0 0);
    --m3-palette-logo-orange-4: lab(4.13482% 14.6632 6.50126);
    --m3-palette-logo-orange-5: lab(5.24367% 17.9725 8.23532);
    --m3-palette-logo-orange-6: lab(6.27925% 21.0582 9.88323);
    --m3-palette-logo-orange-10: lab(10.2365% 25.4618 16.078);
    --m3-palette-logo-orange-12: lab(12.2486% 27.2545 19.1515);
    --m3-palette-logo-orange-17: lab(17.3943% 32.37 26.7369);
    --m3-palette-logo-orange-20: lab(20.4082% 34.8682 30.9344);
    --m3-palette-logo-orange-22: lab(22.4553% 36.9628 33.7169);
    --m3-palette-logo-orange-24: lab(24.4451% 37.3516 34.9526);
    --m3-palette-logo-orange-25: lab(25.5859% 38.0459 35.9556);
    --m3-palette-logo-orange-28: lab(28.5113% 38.6506 36.8395);
    --m3-palette-logo-orange-30: lab(30.5691% 39.6526 36.8515);
    --m3-palette-logo-orange-35: lab(35.6705% 40.636 37.5588);
    --m3-palette-logo-orange-40: lab(40.5754% 42.019 37.6101);
    --m3-palette-logo-orange-50: lab(50.5677% 43.6819 38.5813);
    --m3-palette-logo-orange-55: lab(55.5091% 44.5403 38.3697);
    --m3-palette-logo-orange-60: lab(60.7187% 45.2388 39.1582);
    --m3-palette-logo-orange-70: lab(70.648% 42.984 36.5477);
    --m3-palette-logo-orange-80: lab(80.2637% 26.4861 20.7144);
    --m3-palette-logo-orange-85: lab(85.3156% 18.7164 14.9055);
    --m3-palette-logo-orange-87: lab(87.161% 16.2819 12.2297);
    --m3-palette-logo-orange-90: lab(90.0511% 12.369 8.97442);
    --m3-palette-logo-orange-92: lab(92.1563% 9.47064 7.27092);
    --m3-palette-logo-orange-94: lab(94.0389% 7.1452 5.3003);
    --m3-palette-logo-orange-95: lab(95.1188% 5.81881 4.2619);
    --m3-palette-logo-orange-96: lab(96.1747% 4.3731 3.71172);
    --m3-palette-logo-orange-98: lab(98.0881% 2.16457 1.83938);
    --m3-palette-logo-orange-99: lab(99.0171% 1.88643 -1.41932);
    --m3-palette-logo-orange-100: lab(100% 0 0);
    --m3-palette-logo-yellow-0: lab(0% 0 0);
    --m3-palette-logo-yellow-4: lab(4.01474% 1.28314 6.00027);
    --m3-palette-logo-yellow-5: lab(5.19116% 1.76364 7.75898);
    --m3-palette-logo-yellow-6: lab(6.124% 2.32521 9.15649);
    --m3-palette-logo-yellow-10: lab(10.204% 3.08883 15.2182);
    --m3-palette-logo-yellow-12: lab(12.2646% 3.27517 18.1592);
    --m3-palette-logo-yellow-17: lab(17.1871% 3.45597 24.7796);
    --m3-palette-logo-yellow-20: lab(20.1693% 4.00355 28.519);
    --m3-palette-logo-yellow-22: lab(22.2111% 4.70686 30.9118);
    --m3-palette-logo-yellow-24: lab(24.0856% 4.87487 33.0075);
    --m3-palette-logo-yellow-25: lab(25.38% 4.6086 34.3535);
    --m3-palette-logo-yellow-28: lab(28.2116% 5.11843 37.1823);
    --m3-palette-logo-yellow-30: lab(30.4513% 5.19691 39.1905);
    --m3-palette-logo-yellow-35: lab(35.371% 5.78083 43.3911);
    --m3-palette-logo-yellow-40: lab(40.2975% 6.82125 47.5647);
    --m3-palette-logo-yellow-50: lab(50.3914% 7.73048 56.0683);
    --m3-palette-logo-yellow-55: lab(55.299% 8.2351 59.3559);
    --m3-palette-logo-yellow-60: lab(60.3165% 7.95689 59.7647);
    --m3-palette-logo-yellow-70: lab(70.5779% 7.87082 61.2664);
    --m3-palette-logo-yellow-80: lab(80.4778% 7.55435 61.7625);
    --m3-palette-logo-yellow-85: lab(85.5108% 7.38496 62.4635);
    --m3-palette-logo-yellow-87: lab(87.4371% 6.64446 55.7783);
    --m3-palette-logo-yellow-90: lab(90.3322% 4.43834 39.5501);
    --m3-palette-logo-yellow-92: lab(92.3855% 3.05974 30.1715);
    --m3-palette-logo-yellow-94: lab(94.2293% 2.38147 20.9493);
    --m3-palette-logo-yellow-95: lab(95.154% 2.10541 16.6344);
    --m3-palette-logo-yellow-96: lab(96.097% 1.88795 12.2973);
    --m3-palette-logo-yellow-98: lab(97.9811% 1.52633 4.22916);
    --m3-palette-logo-yellow-99: lab(99.0171% 1.88643 -1.41932);
    --m3-palette-logo-yellow-100: lab(100% 0 0);
  }
}

:root, [data-theme="light"] {
  --m3-primary: var(--m3-palette-primary-40);
  --m3-on-primary: var(--m3-palette-primary-100);
  --m3-primary-container: var(--m3-palette-primary-90);
  --m3-on-primary-container: var(--m3-palette-primary-10);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-40);
  --m3-on-secondary: var(--m3-palette-secondary-100);
  --m3-secondary-container: var(--m3-palette-secondary-90);
  --m3-on-secondary-container: var(--m3-palette-secondary-10);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-40);
  --m3-on-tertiary: var(--m3-palette-tertiary-100);
  --m3-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-40);
  --m3-on-error: var(--m3-palette-error-100);
  --m3-error-container: var(--m3-palette-error-90);
  --m3-on-error-container: var(--m3-palette-error-10);
  --m3-outline: var(--m3-palette-neutral-variant-50);
  --m3-on-surface: var(--m3-palette-neutral-10);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-30);
  --m3-inverse-surface: var(--m3-palette-neutral-20);
  --m3-on-inverse-surface: var(--m3-palette-neutral-95);
  --m3-inverse-primary: var(--m3-palette-primary-80);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-80);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-90);
  --m3-surface-container-high: var(--m3-palette-neutral-92);
  --m3-surface-container: var(--m3-palette-neutral-94);
  --m3-surface-container-low: var(--m3-palette-neutral-96);
  --m3-surface-container-lowest: var(--m3-palette-neutral-100);
  --m3-surface-bright: var(--m3-palette-neutral-98);
  --m3-surface-dim: var(--m3-palette-neutral-87);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-98);
  --m3-opacity-handle: 40;
  --m3-opacity-shortcut: 70;
  --m3-logo-bug-a: var(--m3-palette-primary-28);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-85);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-55);
  --m3-logo-assembli: var(--m3-palette-primary-28);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 24;
  --m3-blur-medium: 40;
  --m3-blur-high: 56;
  --m3-on-primary-container-variant: var(--m3-palette-primary-30);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-30);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-30);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

:root, [data-theme="light"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  :root, [data-theme="light"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary: var(--m3-palette-primary-80);
  --m3-on-primary: var(--m3-palette-primary-20);
  --m3-primary-container: var(--m3-palette-primary-30);
  --m3-on-primary-container: var(--m3-palette-primary-90);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-80);
  --m3-on-secondary: var(--m3-palette-secondary-20);
  --m3-secondary-container: var(--m3-palette-secondary-30);
  --m3-on-secondary-container: var(--m3-palette-secondary-90);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-80);
  --m3-on-tertiary: var(--m3-palette-tertiary-20);
  --m3-tertiary-container: var(--m3-palette-tertiary-30);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-80);
  --m3-on-error: var(--m3-palette-error-20);
  --m3-error-container: var(--m3-palette-error-30);
  --m3-on-error-container: var(--m3-palette-error-90);
  --m3-outline: var(--m3-palette-neutral-variant-60);
  --m3-on-surface: var(--m3-palette-neutral-90);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
  --m3-inverse-surface: var(--m3-palette-neutral-90);
  --m3-on-inverse-surface: var(--m3-palette-neutral-20);
  --m3-inverse-primary: var(--m3-palette-primary-40);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-30);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-22);
  --m3-surface-container-high: var(--m3-palette-neutral-17);
  --m3-surface-container: var(--m3-palette-neutral-12);
  --m3-surface-container-low: var(--m3-palette-neutral-10);
  --m3-surface-container-lowest: var(--m3-palette-neutral-4);
  --m3-surface-bright: var(--m3-palette-neutral-24);
  --m3-surface-dim: var(--m3-palette-neutral-6);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-6);
  --m3-opacity-handle: 40;
  --m3-opacity-shortcut: 70;
  --m3-logo-bug-a: var(--m3-palette-primary-70);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
  --m3-logo-assembli: var(--m3-palette-primary-70);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-80);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="dark"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary: var(--m3-palette-primary-40);
  --m3-on-primary: var(--m3-palette-primary-100);
  --m3-primary-container: var(--m3-palette-primary-90);
  --m3-on-primary-container: var(--m3-palette-primary-10);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-40);
  --m3-on-secondary: var(--m3-palette-secondary-100);
  --m3-secondary-container: var(--m3-palette-secondary-90);
  --m3-on-secondary-container: var(--m3-palette-secondary-10);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-40);
  --m3-on-tertiary: var(--m3-palette-tertiary-100);
  --m3-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-40);
  --m3-on-error: var(--m3-palette-error-100);
  --m3-error-container: var(--m3-palette-error-90);
  --m3-on-error-container: var(--m3-palette-error-10);
  --m3-outline: var(--m3-palette-neutral-variant-50);
  --m3-on-surface: var(--m3-palette-neutral-10);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-30);
  --m3-inverse-surface: var(--m3-palette-neutral-20);
  --m3-on-inverse-surface: var(--m3-palette-neutral-95);
  --m3-inverse-primary: var(--m3-palette-primary-80);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-80);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-90);
  --m3-surface-container-high: var(--m3-palette-neutral-92);
  --m3-surface-container: var(--m3-palette-neutral-94);
  --m3-surface-container-low: var(--m3-palette-neutral-96);
  --m3-surface-container-lowest: var(--m3-palette-neutral-100);
  --m3-surface-bright: var(--m3-palette-neutral-98);
  --m3-surface-dim: var(--m3-palette-neutral-87);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-98);
  --m3-opacity-handle: 50;
  --m3-opacity-shortcut: 90;
  --m3-logo-bug-a: var(--m3-palette-primary-28);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-85);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-55);
  --m3-logo-assembli: var(--m3-palette-primary-28);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-30);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-30);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-30);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="hc-light"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary: var(--m3-palette-primary-80);
  --m3-on-primary: var(--m3-palette-primary-20);
  --m3-primary-container: var(--m3-palette-primary-30);
  --m3-on-primary-container: var(--m3-palette-primary-90);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-80);
  --m3-on-secondary: var(--m3-palette-secondary-20);
  --m3-secondary-container: var(--m3-palette-secondary-30);
  --m3-on-secondary-container: var(--m3-palette-secondary-90);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-80);
  --m3-on-tertiary: var(--m3-palette-tertiary-20);
  --m3-tertiary-container: var(--m3-palette-tertiary-30);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-80);
  --m3-on-error: var(--m3-palette-error-20);
  --m3-error-container: var(--m3-palette-error-30);
  --m3-on-error-container: var(--m3-palette-error-90);
  --m3-outline: var(--m3-palette-neutral-variant-60);
  --m3-on-surface: var(--m3-palette-neutral-90);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
  --m3-inverse-surface: var(--m3-palette-neutral-90);
  --m3-on-inverse-surface: var(--m3-palette-neutral-20);
  --m3-inverse-primary: var(--m3-palette-primary-40);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-30);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-22);
  --m3-surface-container-high: var(--m3-palette-neutral-17);
  --m3-surface-container: var(--m3-palette-neutral-12);
  --m3-surface-container-low: var(--m3-palette-neutral-10);
  --m3-surface-container-lowest: var(--m3-palette-neutral-4);
  --m3-surface-bright: var(--m3-palette-neutral-24);
  --m3-surface-dim: var(--m3-palette-neutral-6);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-6);
  --m3-opacity-handle: 50;
  --m3-opacity-shortcut: 90;
  --m3-logo-bug-a: var(--m3-palette-primary-70);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
  --m3-logo-assembli: var(--m3-palette-primary-70);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-80);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --m3-primary: var(--m3-palette-primary-80);
    --m3-on-primary: var(--m3-palette-primary-20);
    --m3-primary-container: var(--m3-palette-primary-30);
    --m3-on-primary-container: var(--m3-palette-primary-90);
    --m3-primary-fixed: var(--m3-palette-primary-90);
    --m3-on-primary-fixed: var(--m3-palette-primary-10);
    --m3-primary-fixed-dim: var(--m3-palette-primary-80);
    --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
    --m3-secondary: var(--m3-palette-secondary-80);
    --m3-on-secondary: var(--m3-palette-secondary-20);
    --m3-secondary-container: var(--m3-palette-secondary-30);
    --m3-on-secondary-container: var(--m3-palette-secondary-90);
    --m3-secondary-fixed: var(--m3-palette-secondary-90);
    --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
    --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
    --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
    --m3-tertiary: var(--m3-palette-tertiary-80);
    --m3-on-tertiary: var(--m3-palette-tertiary-20);
    --m3-tertiary-container: var(--m3-palette-tertiary-30);
    --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
    --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
    --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
    --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
    --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
    --m3-error: var(--m3-palette-error-80);
    --m3-on-error: var(--m3-palette-error-20);
    --m3-error-container: var(--m3-palette-error-30);
    --m3-on-error-container: var(--m3-palette-error-90);
    --m3-outline: var(--m3-palette-neutral-variant-60);
    --m3-on-surface: var(--m3-palette-neutral-90);
    --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
    --m3-inverse-surface: var(--m3-palette-neutral-90);
    --m3-on-inverse-surface: var(--m3-palette-neutral-20);
    --m3-inverse-primary: var(--m3-palette-primary-40);
    --m3-shadow: var(--m3-palette-neutral-0);
    --m3-outline-variant: var(--m3-palette-neutral-variant-30);
    --m3-scrim: var(--m3-palette-neutral-variant-20);
    --m3-surface-container-highest: var(--m3-palette-neutral-22);
    --m3-surface-container-high: var(--m3-palette-neutral-17);
    --m3-surface-container: var(--m3-palette-neutral-12);
    --m3-surface-container-low: var(--m3-palette-neutral-10);
    --m3-surface-container-lowest: var(--m3-palette-neutral-4);
    --m3-surface-bright: var(--m3-palette-neutral-24);
    --m3-surface-dim: var(--m3-palette-neutral-6);
    --m3-opacity-disable: 38;
    --m3-surface: var(--m3-palette-neutral-6);
    --m3-opacity-handle: 40;
    --m3-opacity-shortcut: 70;
    --m3-logo-bug-a: var(--m3-palette-primary-70);
    --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
    --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
    --m3-logo-assembli: var(--m3-palette-primary-70);
    --m3-opacity-progress-in: 85;
    --m3-opacity-progress-out: 40;
    --m3-on-scrim: var(--m3-palette-neutral-variant-100);
    --m3-opacity-subtlest: 8;
    --m3-opacity-subtler: 10;
    --m3-opacity-subtle: 16;
    --m3-opacity-mid: 50;
    --m3-blur-low: 0;
    --m3-blur-medium: 0;
    --m3-blur-high: 0;
    --m3-on-primary-container-variant: var(--m3-palette-primary-80);
    --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
    --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
    --m3-primary-subtlest: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-subtler: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-subtle: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-subtlest: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-subtler: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-subtle: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-container-subtlest: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-container-subtler: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-container-subtle: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-container-subtler: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-container-subtle: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-subtler: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-subtle: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-subtlest: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-subtlest: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-container-subtlest: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-subtler: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-subtle: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-subtle: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-subtler: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-container-subtle: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-container-subtler: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-subtlest: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-subtler: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-subtle: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-subtler: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-subtle: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-container-subtler: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-container-subtle: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-subtlest: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-subtlest: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-container-subtlest: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-container-subtlest: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-subtler: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-subtle: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-subtler: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-subtle: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-container-subtler: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-error-container-subtle: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-container-subtler: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-error-container-subtle: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-subtlest: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-shadow-subtlest: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-variant-subtlest: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-scrim-applied: var(--m3-scrim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-subtlest: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-bright-subtlest: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-dim-subtlest: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-subtlest: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-subtler: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-subtle: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-subtler: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-subtle: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-surface-subtler: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-surface-subtle: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-primary-subtler: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-inverse-primary-subtle: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-shadow-subtler: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-shadow-subtle: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-variant-subtler: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-variant-subtle: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-high-subtler: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-high-subtle: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-subtler: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-subtle: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-low-subtler: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-low-subtle: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-bright-subtler: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-bright-subtle: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-dim-subtler: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-dim-subtle: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-subtlest: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-subtler: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-subtle: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-low-half: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-half: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-high-half: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-container-highest-half: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-half: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-bright-half: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-surface-dim-half: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-half: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) {
    --m3-outline-variant-half: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) {
      --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
    }
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary: var(--m3-palette-primary-40);
  --m3-on-primary: var(--m3-palette-primary-100);
  --m3-primary-container: var(--m3-palette-primary-90);
  --m3-on-primary-container: var(--m3-palette-primary-10);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-40);
  --m3-on-secondary: var(--m3-palette-secondary-100);
  --m3-secondary-container: var(--m3-palette-secondary-90);
  --m3-on-secondary-container: var(--m3-palette-secondary-10);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-40);
  --m3-on-tertiary: var(--m3-palette-tertiary-100);
  --m3-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-40);
  --m3-on-error: var(--m3-palette-error-100);
  --m3-error-container: var(--m3-palette-error-90);
  --m3-on-error-container: var(--m3-palette-error-10);
  --m3-outline: var(--m3-palette-neutral-variant-50);
  --m3-on-surface: var(--m3-palette-neutral-10);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-30);
  --m3-inverse-surface: var(--m3-palette-neutral-20);
  --m3-on-inverse-surface: var(--m3-palette-neutral-95);
  --m3-inverse-primary: var(--m3-palette-primary-80);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-80);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-90);
  --m3-surface-container-high: var(--m3-palette-neutral-92);
  --m3-surface-container: var(--m3-palette-neutral-94);
  --m3-surface-container-low: var(--m3-palette-neutral-96);
  --m3-surface-container-lowest: var(--m3-palette-neutral-100);
  --m3-surface-bright: var(--m3-palette-neutral-98);
  --m3-surface-dim: var(--m3-palette-neutral-87);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-98);
  --m3-opacity-handle: 40;
  --m3-opacity-shortcut: 70;
  --m3-logo-bug-a: var(--m3-palette-primary-28);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-85);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-55);
  --m3-logo-assembli: var(--m3-palette-primary-28);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 24;
  --m3-blur-medium: 40;
  --m3-blur-high: 56;
  --m3-on-primary-container-variant: var(--m3-palette-primary-30);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-30);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-30);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

.m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  .m3-brand, .m3-brand[data-theme="light"], [data-theme="light"] .m3-brand:not([data-theme]) {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary: var(--m3-palette-primary-80);
    --m3-on-primary: var(--m3-palette-primary-20);
    --m3-primary-container: var(--m3-palette-primary-30);
    --m3-on-primary-container: var(--m3-palette-primary-90);
    --m3-primary-fixed: var(--m3-palette-primary-90);
    --m3-on-primary-fixed: var(--m3-palette-primary-10);
    --m3-primary-fixed-dim: var(--m3-palette-primary-80);
    --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
    --m3-secondary: var(--m3-palette-secondary-80);
    --m3-on-secondary: var(--m3-palette-secondary-20);
    --m3-secondary-container: var(--m3-palette-secondary-30);
    --m3-on-secondary-container: var(--m3-palette-secondary-90);
    --m3-secondary-fixed: var(--m3-palette-secondary-90);
    --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
    --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
    --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
    --m3-tertiary: var(--m3-palette-tertiary-80);
    --m3-on-tertiary: var(--m3-palette-tertiary-20);
    --m3-tertiary-container: var(--m3-palette-tertiary-30);
    --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
    --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
    --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
    --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
    --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
    --m3-error: var(--m3-palette-error-80);
    --m3-on-error: var(--m3-palette-error-20);
    --m3-error-container: var(--m3-palette-error-30);
    --m3-on-error-container: var(--m3-palette-error-90);
    --m3-outline: var(--m3-palette-neutral-variant-60);
    --m3-on-surface: var(--m3-palette-neutral-90);
    --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
    --m3-inverse-surface: var(--m3-palette-neutral-90);
    --m3-on-inverse-surface: var(--m3-palette-neutral-20);
    --m3-inverse-primary: var(--m3-palette-primary-40);
    --m3-shadow: var(--m3-palette-neutral-0);
    --m3-outline-variant: var(--m3-palette-neutral-variant-30);
    --m3-scrim: var(--m3-palette-neutral-variant-20);
    --m3-surface-container-highest: var(--m3-palette-neutral-22);
    --m3-surface-container-high: var(--m3-palette-neutral-17);
    --m3-surface-container: var(--m3-palette-neutral-12);
    --m3-surface-container-low: var(--m3-palette-neutral-10);
    --m3-surface-container-lowest: var(--m3-palette-neutral-4);
    --m3-surface-bright: var(--m3-palette-neutral-24);
    --m3-surface-dim: var(--m3-palette-neutral-6);
    --m3-opacity-disable: 38;
    --m3-surface: var(--m3-palette-neutral-6);
    --m3-opacity-handle: 40;
    --m3-opacity-shortcut: 70;
    --m3-logo-bug-a: var(--m3-palette-primary-70);
    --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
    --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
    --m3-logo-assembli: var(--m3-palette-primary-70);
    --m3-opacity-progress-in: 85;
    --m3-opacity-progress-out: 40;
    --m3-on-scrim: var(--m3-palette-neutral-variant-100);
    --m3-opacity-subtlest: 8;
    --m3-opacity-subtler: 10;
    --m3-opacity-subtle: 16;
    --m3-opacity-mid: 50;
    --m3-blur-low: 0;
    --m3-blur-medium: 0;
    --m3-blur-high: 0;
    --m3-on-primary-container-variant: var(--m3-palette-primary-80);
    --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
    --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
    --m3-primary-subtlest: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-subtler: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-subtle: var(--m3-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-subtlest: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-subtler: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-subtle: var(--m3-on-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-container-subtlest: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-container-subtler: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-container-subtle: var(--m3-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtler: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-container-subtle: var(--m3-on-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtler: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-subtle: var(--m3-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-subtlest: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtlest: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtlest: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-subtler: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-subtle: var(--m3-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtle: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-subtler: var(--m3-on-secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtle: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-container-subtler: var(--m3-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-subtlest: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-subtler: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-subtle: var(--m3-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtler: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-subtle: var(--m3-on-tertiary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtler: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-container-subtle: var(--m3-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-subtlest: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-subtlest: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-container-subtlest: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtlest: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-subtler: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-subtle: var(--m3-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-subtler: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-subtle: var(--m3-on-error);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-container-subtler: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-error-container-subtle: var(--m3-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtler: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-error-container-subtle: var(--m3-on-error-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-subtlest: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-shadow-subtlest: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtlest: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-scrim-applied: var(--m3-scrim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-subtlest: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtlest: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtlest: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-subtlest: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-subtler: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-subtle: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-subtler: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-subtle: var(--m3-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtler: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-surface-subtle: var(--m3-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtler: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-inverse-primary-subtle: var(--m3-inverse-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-shadow-subtler: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-shadow-subtle: var(--m3-shadow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtler: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-variant-subtle: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtler: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-high-subtle: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-subtler: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-subtle: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtler: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-low-subtle: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtler: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-bright-subtle: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtler: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-dim-subtle: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-subtlest: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-subtler: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-subtle: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-low-half: var(--m3-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-half: var(--m3-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-high-half: var(--m3-surface-container-high);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-container-highest-half: var(--m3-surface-container-highest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-half: var(--m3-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-bright-half: var(--m3-surface-bright);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-surface-dim-half: var(--m3-surface-dim);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-half: var(--m3-outline);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
    }
  }

  :root:not([data-theme]) .m3-brand:not([data-theme]) {
    --m3-outline-variant-half: var(--m3-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root:not([data-theme]) .m3-brand:not([data-theme]) {
      --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
    }
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary: var(--m3-palette-primary-80);
  --m3-on-primary: var(--m3-palette-primary-20);
  --m3-primary-container: var(--m3-palette-primary-30);
  --m3-on-primary-container: var(--m3-palette-primary-90);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-80);
  --m3-on-secondary: var(--m3-palette-secondary-20);
  --m3-secondary-container: var(--m3-palette-secondary-30);
  --m3-on-secondary-container: var(--m3-palette-secondary-90);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-80);
  --m3-on-tertiary: var(--m3-palette-tertiary-20);
  --m3-tertiary-container: var(--m3-palette-tertiary-30);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-80);
  --m3-on-error: var(--m3-palette-error-20);
  --m3-error-container: var(--m3-palette-error-30);
  --m3-on-error-container: var(--m3-palette-error-90);
  --m3-outline: var(--m3-palette-neutral-variant-60);
  --m3-on-surface: var(--m3-palette-neutral-90);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
  --m3-inverse-surface: var(--m3-palette-neutral-90);
  --m3-on-inverse-surface: var(--m3-palette-neutral-20);
  --m3-inverse-primary: var(--m3-palette-primary-40);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-30);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-22);
  --m3-surface-container-high: var(--m3-palette-neutral-17);
  --m3-surface-container: var(--m3-palette-neutral-12);
  --m3-surface-container-low: var(--m3-palette-neutral-10);
  --m3-surface-container-lowest: var(--m3-palette-neutral-4);
  --m3-surface-bright: var(--m3-palette-neutral-24);
  --m3-surface-dim: var(--m3-palette-neutral-6);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-6);
  --m3-opacity-handle: 40;
  --m3-opacity-shortcut: 70;
  --m3-logo-bug-a: var(--m3-palette-primary-70);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
  --m3-logo-assembli: var(--m3-palette-primary-70);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-80);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="dark"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary: var(--m3-palette-primary-40);
  --m3-on-primary: var(--m3-palette-primary-100);
  --m3-primary-container: var(--m3-palette-primary-90);
  --m3-on-primary-container: var(--m3-palette-primary-10);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-40);
  --m3-on-secondary: var(--m3-palette-secondary-100);
  --m3-secondary-container: var(--m3-palette-secondary-90);
  --m3-on-secondary-container: var(--m3-palette-secondary-10);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-40);
  --m3-on-tertiary: var(--m3-palette-tertiary-100);
  --m3-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-40);
  --m3-on-error: var(--m3-palette-error-100);
  --m3-error-container: var(--m3-palette-error-90);
  --m3-on-error-container: var(--m3-palette-error-10);
  --m3-outline: var(--m3-palette-neutral-variant-50);
  --m3-on-surface: var(--m3-palette-neutral-10);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-30);
  --m3-inverse-surface: var(--m3-palette-neutral-20);
  --m3-on-inverse-surface: var(--m3-palette-neutral-95);
  --m3-inverse-primary: var(--m3-palette-primary-80);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-80);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-90);
  --m3-surface-container-high: var(--m3-palette-neutral-92);
  --m3-surface-container: var(--m3-palette-neutral-94);
  --m3-surface-container-low: var(--m3-palette-neutral-96);
  --m3-surface-container-lowest: var(--m3-palette-neutral-100);
  --m3-surface-bright: var(--m3-palette-neutral-98);
  --m3-surface-dim: var(--m3-palette-neutral-87);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-98);
  --m3-opacity-handle: 50;
  --m3-opacity-shortcut: 90;
  --m3-logo-bug-a: var(--m3-palette-primary-28);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-85);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-55);
  --m3-logo-assembli: var(--m3-palette-primary-28);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-30);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-30);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-30);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-light"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-light"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary: var(--m3-palette-primary-80);
  --m3-on-primary: var(--m3-palette-primary-20);
  --m3-primary-container: var(--m3-palette-primary-30);
  --m3-on-primary-container: var(--m3-palette-primary-90);
  --m3-primary-fixed: var(--m3-palette-primary-90);
  --m3-on-primary-fixed: var(--m3-palette-primary-10);
  --m3-primary-fixed-dim: var(--m3-palette-primary-80);
  --m3-on-primary-fixed-variant: var(--m3-palette-primary-30);
  --m3-secondary: var(--m3-palette-secondary-80);
  --m3-on-secondary: var(--m3-palette-secondary-20);
  --m3-secondary-container: var(--m3-palette-secondary-30);
  --m3-on-secondary-container: var(--m3-palette-secondary-90);
  --m3-secondary-fixed: var(--m3-palette-secondary-90);
  --m3-on-secondary-fixed: var(--m3-palette-secondary-10);
  --m3-secondary-fixed-dim: var(--m3-palette-secondary-80);
  --m3-on-secondary-fixed-variant: var(--m3-palette-secondary-30);
  --m3-tertiary: var(--m3-palette-tertiary-80);
  --m3-on-tertiary: var(--m3-palette-tertiary-20);
  --m3-tertiary-container: var(--m3-palette-tertiary-30);
  --m3-on-tertiary-container: var(--m3-palette-tertiary-90);
  --m3-tertiary-fixed: var(--m3-palette-tertiary-90);
  --m3-on-tertiary-fixed: var(--m3-palette-tertiary-10);
  --m3-tertiary-fixed-dim: var(--m3-palette-tertiary-80);
  --m3-on-tertiary-fixed-variant: var(--m3-palette-tertiary-30);
  --m3-error: var(--m3-palette-error-80);
  --m3-on-error: var(--m3-palette-error-20);
  --m3-error-container: var(--m3-palette-error-30);
  --m3-on-error-container: var(--m3-palette-error-90);
  --m3-outline: var(--m3-palette-neutral-variant-60);
  --m3-on-surface: var(--m3-palette-neutral-90);
  --m3-on-surface-variant: var(--m3-palette-neutral-variant-80);
  --m3-inverse-surface: var(--m3-palette-neutral-90);
  --m3-on-inverse-surface: var(--m3-palette-neutral-20);
  --m3-inverse-primary: var(--m3-palette-primary-40);
  --m3-shadow: var(--m3-palette-neutral-0);
  --m3-outline-variant: var(--m3-palette-neutral-variant-30);
  --m3-scrim: var(--m3-palette-neutral-variant-20);
  --m3-surface-container-highest: var(--m3-palette-neutral-22);
  --m3-surface-container-high: var(--m3-palette-neutral-17);
  --m3-surface-container: var(--m3-palette-neutral-12);
  --m3-surface-container-low: var(--m3-palette-neutral-10);
  --m3-surface-container-lowest: var(--m3-palette-neutral-4);
  --m3-surface-bright: var(--m3-palette-neutral-24);
  --m3-surface-dim: var(--m3-palette-neutral-6);
  --m3-opacity-disable: 38;
  --m3-surface: var(--m3-palette-neutral-6);
  --m3-opacity-handle: 50;
  --m3-opacity-shortcut: 90;
  --m3-logo-bug-a: var(--m3-palette-primary-70);
  --m3-logo-bug-dot: var(--m3-palette-logo-yellow-87);
  --m3-logo-bug-i: var(--m3-palette-logo-orange-70);
  --m3-logo-assembli: var(--m3-palette-primary-70);
  --m3-opacity-progress-in: 85;
  --m3-opacity-progress-out: 40;
  --m3-on-scrim: var(--m3-palette-neutral-variant-100);
  --m3-opacity-subtlest: 8;
  --m3-opacity-subtler: 10;
  --m3-opacity-subtle: 16;
  --m3-opacity-mid: 50;
  --m3-blur-low: 0;
  --m3-blur-medium: 0;
  --m3-blur-high: 0;
  --m3-on-primary-container-variant: var(--m3-palette-primary-80);
  --m3-on-secondary-container-variant: var(--m3-palette-secondary-80);
  --m3-on-tertiary-container-variant: var(--m3-palette-tertiary-80);
  --m3-primary-subtlest: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-subtlest: color-mix(in oklab, var(--m3-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-subtler: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-subtler: color-mix(in oklab, var(--m3-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-subtle: var(--m3-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-subtle: color-mix(in oklab, var(--m3-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-subtlest: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-subtlest: color-mix(in oklab, var(--m3-on-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-subtler: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-subtler: color-mix(in oklab, var(--m3-on-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-subtle: var(--m3-on-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-subtle: color-mix(in oklab, var(--m3-on-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-container-subtlest: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-container-subtlest: color-mix(in oklab, var(--m3-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-container-subtler: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-container-subtler: color-mix(in oklab, var(--m3-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-container-subtle: var(--m3-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-container-subtle: color-mix(in oklab, var(--m3-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtlest: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-container-subtlest: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-container-subtlest: color-mix(in oklab, var(--m3-on-primary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-subtlest: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-subtlest: color-mix(in oklab, var(--m3-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtlest: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtlest: color-mix(in oklab, var(--m3-on-primary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtlest: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-primary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-container-subtler: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-container-subtler: color-mix(in oklab, var(--m3-on-primary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-container-subtle: var(--m3-on-primary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-container-subtle: color-mix(in oklab, var(--m3-on-primary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-subtler: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-subtler: color-mix(in oklab, var(--m3-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-subtle: var(--m3-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-subtle: color-mix(in oklab, var(--m3-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtler: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtler: color-mix(in oklab, var(--m3-on-primary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-subtle: var(--m3-on-primary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-subtle: color-mix(in oklab, var(--m3-on-primary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtler: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtler: color-mix(in oklab, var(--m3-primary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-primary-fixed-dim-subtle: var(--m3-primary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-primary-fixed-dim-subtle: color-mix(in oklab, var(--m3-primary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtler: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-primary-fixed-variant-subtle: var(--m3-on-primary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-primary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-primary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-subtlest: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-subtlest: color-mix(in oklab, var(--m3-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-subtlest: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-subtlest: color-mix(in oklab, var(--m3-on-secondary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-container-subtlest: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-container-subtlest: color-mix(in oklab, var(--m3-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtlest: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-container-subtlest: color-mix(in oklab, var(--m3-on-secondary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtlest: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtlest: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtlest: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-secondary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtlest: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-subtler: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-subtler: color-mix(in oklab, var(--m3-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-subtle: var(--m3-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-subtle: color-mix(in oklab, var(--m3-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-subtle: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-subtle: color-mix(in oklab, var(--m3-on-secondary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-subtler: var(--m3-on-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-subtler: color-mix(in oklab, var(--m3-on-secondary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-container-subtle: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-container-subtle: color-mix(in oklab, var(--m3-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-container-subtler: var(--m3-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-container-subtler: color-mix(in oklab, var(--m3-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtle: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-container-subtle: color-mix(in oklab, var(--m3-on-secondary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-container-subtler: var(--m3-on-secondary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-container-subtler: color-mix(in oklab, var(--m3-on-secondary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtle: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-subtle: color-mix(in oklab, var(--m3-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-subtler: var(--m3-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-subtler: color-mix(in oklab, var(--m3-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtle: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-subtler: var(--m3-on-secondary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtle: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtle: color-mix(in oklab, var(--m3-secondary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-secondary-fixed-dim-subtler: var(--m3-secondary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-secondary-fixed-dim-subtler: color-mix(in oklab, var(--m3-secondary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtle: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-secondary-fixed-variant-subtler: var(--m3-on-secondary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-secondary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-secondary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-subtlest: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-subtlest: color-mix(in oklab, var(--m3-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-subtlest: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-subtlest: color-mix(in oklab, var(--m3-on-tertiary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-container-subtlest: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-container-subtlest: color-mix(in oklab, var(--m3-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtlest: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtlest: color-mix(in oklab, var(--m3-on-tertiary-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtlest: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtlest: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtlest: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtlest: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtlest: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtlest: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-subtler: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-subtler: color-mix(in oklab, var(--m3-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-subtle: var(--m3-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-subtle: color-mix(in oklab, var(--m3-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-subtler: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-subtler: color-mix(in oklab, var(--m3-on-tertiary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-subtle: var(--m3-on-tertiary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-subtle: color-mix(in oklab, var(--m3-on-tertiary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-container-subtler: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-container-subtler: color-mix(in oklab, var(--m3-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-container-subtle: var(--m3-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-container-subtle: color-mix(in oklab, var(--m3-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtler: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtler: color-mix(in oklab, var(--m3-on-tertiary-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-container-subtle: var(--m3-on-tertiary-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-container-subtle: color-mix(in oklab, var(--m3-on-tertiary-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtler: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-subtle: var(--m3-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtler: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-subtle: var(--m3-on-tertiary-fixed);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtler: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtler: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-tertiary-fixed-dim-subtle: var(--m3-tertiary-fixed-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-tertiary-fixed-dim-subtle: color-mix(in oklab, var(--m3-tertiary-fixed-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtler: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtler: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-tertiary-fixed-variant-subtle: var(--m3-on-tertiary-fixed-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-tertiary-fixed-variant-subtle: color-mix(in oklab, var(--m3-on-tertiary-fixed-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-subtlest: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-subtlest: color-mix(in oklab, var(--m3-error) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-subtlest: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-subtlest: color-mix(in oklab, var(--m3-on-error) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-container-subtlest: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-container-subtlest: color-mix(in oklab, var(--m3-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-container-subtlest: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-container-subtlest: color-mix(in oklab, var(--m3-on-error-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-subtler: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-subtler: color-mix(in oklab, var(--m3-error) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-subtle: var(--m3-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-subtle: color-mix(in oklab, var(--m3-error) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-subtler: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-subtler: color-mix(in oklab, var(--m3-on-error) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-subtle: var(--m3-on-error);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-subtle: color-mix(in oklab, var(--m3-on-error) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-container-subtler: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-container-subtler: color-mix(in oklab, var(--m3-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-error-container-subtle: var(--m3-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-error-container-subtle: color-mix(in oklab, var(--m3-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-container-subtler: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-container-subtler: color-mix(in oklab, var(--m3-on-error-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-error-container-subtle: var(--m3-on-error-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-error-container-subtle: color-mix(in oklab, var(--m3-on-error-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-subtlest: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-subtlest: color-mix(in oklab, var(--m3-outline) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-shadow-subtlest: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-shadow-subtlest: color-mix(in oklab, var(--m3-shadow) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-variant-subtlest: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-variant-subtlest: color-mix(in oklab, var(--m3-outline-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-scrim-applied: var(--m3-scrim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-scrim-applied: color-mix(in oklab, var(--m3-scrim) 40%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtlest: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-highest-subtlest: color-mix(in oklab, var(--m3-surface-container-highest) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-high-subtlest: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-high-subtlest: color-mix(in oklab, var(--m3-surface-container-high) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-subtlest: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-subtlest: color-mix(in oklab, var(--m3-surface-container) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-low-subtlest: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-low-subtlest: color-mix(in oklab, var(--m3-surface-container-low) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtlest: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtlest: color-mix(in oklab, var(--m3-surface-container-lowest) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-bright-subtlest: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-bright-subtlest: color-mix(in oklab, var(--m3-surface-bright) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-dim-subtlest: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-dim-subtlest: color-mix(in oklab, var(--m3-surface-dim) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-subtlest: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-subtlest: color-mix(in oklab, var(--m3-on-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtlest: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-variant-subtlest: color-mix(in oklab, var(--m3-on-surface-variant) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-surface-subtlest: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-surface-subtlest: color-mix(in oklab, var(--m3-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtlest: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtlest: color-mix(in oklab, var(--m3-on-inverse-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-primary-subtlest: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-primary-subtlest: color-mix(in oklab, var(--m3-inverse-primary) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-subtler: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-subtler: color-mix(in oklab, var(--m3-outline) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-subtle: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-subtle: color-mix(in oklab, var(--m3-outline) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-subtler: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-subtler: color-mix(in oklab, var(--m3-on-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-subtle: var(--m3-on-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-subtle: color-mix(in oklab, var(--m3-on-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtler: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-variant-subtler: color-mix(in oklab, var(--m3-on-surface-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-surface-variant-subtle: var(--m3-on-surface-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-surface-variant-subtle: color-mix(in oklab, var(--m3-on-surface-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-surface-subtler: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-surface-subtler: color-mix(in oklab, var(--m3-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-surface-subtle: var(--m3-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-surface-subtle: color-mix(in oklab, var(--m3-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtler: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtler: color-mix(in oklab, var(--m3-on-inverse-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-on-inverse-surface-subtle: var(--m3-on-inverse-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-on-inverse-surface-subtle: color-mix(in oklab, var(--m3-on-inverse-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-primary-subtler: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-primary-subtler: color-mix(in oklab, var(--m3-inverse-primary) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-inverse-primary-subtle: var(--m3-inverse-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-inverse-primary-subtle: color-mix(in oklab, var(--m3-inverse-primary) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-shadow-subtler: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-shadow-subtler: color-mix(in oklab, var(--m3-shadow) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-shadow-subtle: var(--m3-shadow);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-shadow-subtle: color-mix(in oklab, var(--m3-shadow) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-variant-subtler: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-variant-subtler: color-mix(in oklab, var(--m3-outline-variant) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-variant-subtle: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-variant-subtle: color-mix(in oklab, var(--m3-outline-variant) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtler: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-highest-subtler: color-mix(in oklab, var(--m3-surface-container-highest) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-highest-subtle: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-highest-subtle: color-mix(in oklab, var(--m3-surface-container-highest) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-high-subtler: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-high-subtler: color-mix(in oklab, var(--m3-surface-container-high) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-high-subtle: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-high-subtle: color-mix(in oklab, var(--m3-surface-container-high) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-subtler: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-subtler: color-mix(in oklab, var(--m3-surface-container) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-subtle: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-subtle: color-mix(in oklab, var(--m3-surface-container) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-low-subtler: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-low-subtler: color-mix(in oklab, var(--m3-surface-container-low) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-low-subtle: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-low-subtle: color-mix(in oklab, var(--m3-surface-container-low) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtler: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtler: color-mix(in oklab, var(--m3-surface-container-lowest) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-lowest-subtle: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-lowest-subtle: color-mix(in oklab, var(--m3-surface-container-lowest) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-bright-subtler: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-bright-subtler: color-mix(in oklab, var(--m3-surface-bright) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-bright-subtle: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-bright-subtle: color-mix(in oklab, var(--m3-surface-bright) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-dim-subtler: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-dim-subtler: color-mix(in oklab, var(--m3-surface-dim) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-dim-subtle: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-dim-subtle: color-mix(in oklab, var(--m3-surface-dim) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-subtlest: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-subtlest: color-mix(in oklab, var(--m3-surface) 7.8%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-subtler: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-subtler: color-mix(in oklab, var(--m3-surface) 10.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-subtle: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-subtle: color-mix(in oklab, var(--m3-surface) 16.1%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-lowest-half: var(--m3-surface-container-lowest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-lowest-half: color-mix(in oklab, var(--m3-surface-container-lowest) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-low-half: var(--m3-surface-container-low);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-low-half: color-mix(in oklab, var(--m3-surface-container-low) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-half: var(--m3-surface-container);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-half: color-mix(in oklab, var(--m3-surface-container) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-high-half: var(--m3-surface-container-high);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-high-half: color-mix(in oklab, var(--m3-surface-container-high) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-container-highest-half: var(--m3-surface-container-highest);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-container-highest-half: color-mix(in oklab, var(--m3-surface-container-highest) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-half: var(--m3-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-half: color-mix(in oklab, var(--m3-surface) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-bright-half: var(--m3-surface-bright);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-bright-half: color-mix(in oklab, var(--m3-surface-bright) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-surface-dim-half: var(--m3-surface-dim);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-surface-dim-half: color-mix(in oklab, var(--m3-surface-dim) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-half: var(--m3-outline);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-half: color-mix(in oklab, var(--m3-outline) 50.2%, transparent);
  }
}

[data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
  --m3-outline-variant-half: var(--m3-outline-variant);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="hc-dark"] .m3-brand:not([data-theme]), .m3-brand[data-theme="hc-dark"] {
    --m3-outline-variant-half: color-mix(in oklab, var(--m3-outline-variant) 50.2%, transparent);
  }
}

[data-gt-tone="on-surface-variant"] {
  color: var(--m3-on-surface-variant);
}

[data-gt-tone="primary"] {
  color: var(--m3-primary);
}

[data-gt-tone="secondary"] {
  color: var(--m3-secondary);
}

[data-gt-tone="tertiary"] {
  color: var(--m3-tertiary);
}

[data-gt-tone="error"] {
  color: var(--m3-error);
}

[data-gt-tone="on-primary-container"] {
  color: var(--m3-on-primary-container);
}

[data-selected] :is(.text-on-surface-variant, [data-gt-tone]):not([class*="bg-"]) {
  color: var(--m3-on-secondary-container);
}

:root {
  --m3-motion-easing-emphasized: linear(0, .0074 3.03%, .017 4.55%, .0315 6.12%, .0517 7.7%, .0725 8.96%, .0978 10.19%, .1281 11.39%, .1637 12.54%, .1941 13.36%, .2399 14.38%, .2784 15.09%, .3207 15.73%, .3511 16.13%, .4808 17.52%, .5373 18.24%, .573 18.78%, .6072 19.39%, .6556 20.48%, .6859 21.34%, .7148 22.33%, .7422 23.46%, .7682 24.74%, .7926 26.2%, .8157 27.85%, .8476 30.71%, .8852 35.33%, .9173 40.99%, .9439 47.81%, .9653 55.92%, .9815 65.46%, .9903 73.61%, .9976 85.92%, 1);
  --m3-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --m3-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --m3-motion-easing-standard-accelerate: cubic-bezier(.3, 0, 1, 1);
  --m3-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --m3-motion-easing-emphasized-accelerate: cubic-bezier(.3, 0, .8, .15);
  --m3-motion-duration-short1: 50ms;
  --m3-motion-duration-short2: .1s;
  --m3-motion-duration-short3: .15s;
  --m3-motion-duration-short4: .2s;
  --m3-motion-duration-medium1: .25s;
  --m3-motion-duration-medium2: .3s;
  --m3-motion-duration-medium3: .35s;
  --m3-motion-duration-medium4: .4s;
  --m3-motion-duration-long1: .45s;
  --m3-motion-duration-long2: .5s;
  --m3-motion-duration-long3: .55s;
  --m3-motion-duration-long4: .6s;
  --m3-motion-duration-extra-long1: .7s;
  --m3-motion-duration-extra-long2: .8s;
  --m3-motion-duration-extra-long3: .9s;
  --m3-motion-duration-extra-long4: 1s;
  --m3-motion-spring-standard-spatial-fast: linear(0, .0025 0.83%, .0203 2.5%, .0519 4.17%, .0934 5.83%, .168 8.33%, .3906 15%, .4964 18.33%, .5917 21.67%, .6746 25%, .7448 28.33%, .803 31.67%, .8503 35%, .8881 38.33%, .9241 42.5%, .9543 47.5%, .974 52.5%, .9879 58.33%, .9963 65%, 1.0002 72.5%, 1);
  --m3-motion-spring-standard-spatial-fast-duration: .23s;
  --m3-motion-spring-standard-spatial-default: linear(0, .0024 0.83%, .0197 2.5%, .0504 4.17%, .0909 5.83%, .1382 7.5%, .1901 9.17%, .3826 15%, .4874 18.33%, .5822 21.67%, .6652 25%, .7359 28.33%, .7948 31.67%, .843 35%, .8901 39.17%, .9251 43.33%, .9546 48.33%, .9739 53.33%, .9877 59.17%, .9961 65.83%, 1.0001 73.33%, 1);
  --m3-motion-spring-standard-spatial-default-duration: .32s;
  --m3-motion-spring-standard-spatial-slow: linear(0, .0024 0.83%, .0198 2.5%, .0506 4.17%, .0912 5.83%, .1387 7.5%, .1908 9.17%, .3838 15%, .4887 18.33%, .5836 21.67%, .6666 25%, .7372 28.33%, .796 31.67%, .8441 35%, .8827 38.33%, .9197 42.5%, .951 47.5%, .9717 52.5%, .9865 58.33%, .9955 65%, .9999 72.5%, 1);
  --m3-motion-spring-standard-spatial-slow-duration: .49s;
  --m3-motion-spring-standard-effects-fast: linear(0, .0032 0.83%, .0121 1.67%, .0258 2.5%, .0435 3.33%, .0881 5%, .1697 7.5%, .3492 12.5%, .4626 15.83%, .5635 19.17%, .6501 22.5%, .7224 25.83%, .7817 29.17%, .8295 32.5%, .8677 35.83%, .9043 40%, .9357 45%, .96 50.83%, .9754 56.67%, .9869 64.17%, .9936 72.5%, 1);
  --m3-motion-spring-standard-effects-fast-duration: .16s;
  --m3-motion-spring-standard-effects-default: linear(0, .003 0.83%, .0115 1.67%, .0246 2.5%, .0415 3.33%, .0842 5%, .1628 7.5%, .3661 13.33%, .4488 15.83%, .549 19.17%, .6356 22.5%, .7086 25.83%, .7689 29.17%, .8181 32.5%, .8662 36.67%, .9024 40.83%, .9337 45.83%, .9582 51.67%, .9739 57.5%, .9849 64.17%, .9924 72.5%, 1);
  --m3-motion-spring-standard-effects-default-duration: .24s;
  --m3-motion-spring-standard-effects-slow: linear(0, .0029 0.83%, .0109 1.67%, .0233 2.5%, .0394 3.33%, .0803 5%, .1558 7.5%, .3534 13.33%, .4606 16.67%, .5567 20%, .64 23.33%, .7104 26.67%, .7689 30%, .8169 33.33%, .8641 37.5%, .8999 41.67%, .9313 46.67%, .9561 52.5%, .9722 58.33%, .9836 65%, .9916 73.33%, 1);
  --m3-motion-spring-standard-effects-slow-duration: .33s;
  --m3-motion-spring-expressive-spatial-fast: linear(0, .0037 0.83%, .0142 1.67%, .0307 2.5%, .0527 3.33%, .0792 4.17%, .1098 5%, .1805 6.67%, .2604 8.33%, .5182 13.33%, .641 15.83%, .7516 18.33%, .8469 20.83%, .9255 23.33%, .9873 25.83%, 1.0332 28.33%, 1.0647 30.83%, 1.0788 32.5%, 1.0881 34.17%, 1.0932 35.83%, 1.0945 38.33%, 1.0899 40.83%, 1.0813 43.33%, 1.0341 53.33%, 1.0174 57.5%, 1.005 61.67%, .9969 65.83%, .991 75.83%, 1);
  --m3-motion-spring-expressive-spatial-fast-duration: .37s;
  --m3-motion-spring-expressive-spatial-default: linear(0, .0025 0.83%, .0095 1.67%, .0205 2.5%, .0527 4.17%, .0956 5.83%, .1462 7.5%, .2021 9.17%, .4117 15%, .5264 18.33%, .6298 21.67%, .7193 25%, .7769 27.5%, .8412 30.83%, .8923 34.17%, .9316 37.5%, .9609 40.83%, .9862 45%, 1.004 50%, 1.0125 55%, 1.0147 64.17%, 1);
  --m3-motion-spring-expressive-spatial-default-duration: .44s;
  --m3-motion-spring-expressive-spatial-slow: linear(0, .0025 0.83%, .0096 1.67%, .0207 2.5%, .0533 4.17%, .0966 5.83%, .1476 7.5%, .2039 9.17%, .4148 15%, .5298 18.33%, .6334 21.67%, .7229 25%, .7803 27.5%, .8443 30.83%, .8949 34.17%, .9338 37.5%, .9627 40.83%, .9875 45%, 1.0026 49.17%, 1.0119 54.17%, 1.0148 63.33%, 1);
  --m3-motion-spring-expressive-spatial-slow-duration: .61s;
  --m3-motion-spatial-fast: var(--m3-motion-spring-standard-spatial-fast);
  --m3-motion-spatial-fast-duration: var(--m3-motion-spring-standard-spatial-fast-duration);
  --m3-motion-spatial-default: var(--m3-motion-spring-standard-spatial-default);
  --m3-motion-spatial-default-duration: var(--m3-motion-spring-standard-spatial-default-duration);
  --m3-motion-spatial-slow: var(--m3-motion-spring-standard-spatial-slow);
  --m3-motion-spatial-slow-duration: var(--m3-motion-spring-standard-spatial-slow-duration);
  --m3-motion-effects-fast: var(--m3-motion-spring-standard-effects-fast);
  --m3-motion-effects-fast-duration: var(--m3-motion-spring-standard-effects-fast-duration);
  --m3-motion-effects-default: var(--m3-motion-spring-standard-effects-default);
  --m3-motion-effects-default-duration: var(--m3-motion-spring-standard-effects-default-duration);
  --m3-motion-effects-slow: var(--m3-motion-spring-standard-effects-slow);
  --m3-motion-effects-slow-duration: var(--m3-motion-spring-standard-effects-slow-duration);
  --m3-motion-distance: calc(var(--spacing, .25rem) * 6);
  --m3-motion-stagger: var(--m3-motion-duration-short1);
  --m3-motion-axis: calc(var(--spacing, .25rem) * 7.5);
  --m3-motion-axis-x: var(--m3-motion-axis);
}

[dir="rtl"] {
  --m3-motion-axis-x: calc(var(--m3-motion-axis) * -1);
}

[data-motion="expressive"] {
  --m3-motion-spatial-fast: var(--m3-motion-spring-expressive-spatial-fast);
  --m3-motion-spatial-fast-duration: var(--m3-motion-spring-expressive-spatial-fast-duration);
  --m3-motion-spatial-default: var(--m3-motion-spring-expressive-spatial-default);
  --m3-motion-spatial-default-duration: var(--m3-motion-spring-expressive-spatial-default-duration);
  --m3-motion-spatial-slow: var(--m3-motion-spring-expressive-spatial-slow);
  --m3-motion-spatial-slow-duration: var(--m3-motion-spring-expressive-spatial-slow-duration);
}

@keyframes gt-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes gt-rise-in {
  from {
    translate: 0 var(--m3-motion-distance);
  }
}

@keyframes gt-scale-in {
  from {
    scale: .92;
  }
}

@keyframes gt-pop-in {
  from {
    scale: .6;
  }
}

@keyframes gt-slide-in {
  from {
    translate: calc(var(--m3-motion-distance) * -1) 0;
  }
}

.gt-enter-fade {
  animation: gt-fade-in var(--m3-motion-effects-default-duration) var(--m3-motion-effects-default) backwards;
}

.gt-enter-rise {
  animation: gt-rise-in var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) backwards, gt-fade-in var(--m3-motion-effects-default-duration) var(--m3-motion-effects-default) backwards;
}

.gt-enter-scale {
  animation: gt-scale-in var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) backwards, gt-fade-in var(--m3-motion-effects-default-duration) var(--m3-motion-effects-default) backwards;
}

.gt-enter-pop {
  animation: gt-pop-in var(--m3-motion-spatial-fast-duration) var(--m3-motion-spatial-fast) backwards, gt-fade-in var(--m3-motion-effects-default-duration) var(--m3-motion-effects-default) backwards;
}

.gt-enter-slide {
  animation: gt-slide-in var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) backwards, gt-fade-in var(--m3-motion-effects-default-duration) var(--m3-motion-effects-default) backwards;
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(2) {
  animation-delay: calc(var(--m3-motion-stagger) * 1);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(3) {
  animation-delay: calc(var(--m3-motion-stagger) * 2);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(4) {
  animation-delay: calc(var(--m3-motion-stagger) * 3);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(5) {
  animation-delay: calc(var(--m3-motion-stagger) * 4);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(6) {
  animation-delay: calc(var(--m3-motion-stagger) * 5);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(7) {
  animation-delay: calc(var(--m3-motion-stagger) * 6);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(8) {
  animation-delay: calc(var(--m3-motion-stagger) * 7);
}

:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(9), :is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(n+10) {
  animation-delay: calc(var(--m3-motion-stagger) * 8);
}

@supports (animation-timeline: view()) {
  .gt-enter-in-view:is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide) {
    animation-delay: 0s;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}

html[data-gt-transition] [data-gt-page] main {
  view-transition-name: gt-page;
}

html[data-gt-transition] [data-gt-page] main + section {
  view-transition-name: gt-pane;
}

html[data-gt-transition]::view-transition {
  pointer-events: none;
}

html[data-gt-transition]::view-transition-old(root) {
  display: none;
}

html[data-gt-transition]::view-transition-new(root) {
  animation: none;
}

html[data-gt-transition]::view-transition-group(gt-page) {
  animation: none;
  overflow: clip;
}

html[data-gt-transition]::view-transition-group(gt-pane) {
  animation: none;
  overflow: clip;
}

html[data-gt-transition]::view-transition-old(gt-page) {
  object-fit: none;
  object-position: top left;
  block-size: 100%;
}

html[data-gt-transition]::view-transition-old(gt-pane) {
  object-fit: none;
  object-position: top left;
  block-size: 100%;
}

html[data-gt-transition]::view-transition-new(gt-page) {
  object-fit: none;
  object-position: top left;
  block-size: 100%;
}

html[data-gt-transition]::view-transition-new(gt-pane) {
  object-fit: none;
  object-position: top left;
  block-size: 100%;
}

html[dir="rtl"][data-gt-transition]::view-transition-old(gt-page) {
  object-position: top right;
}

html[dir="rtl"][data-gt-transition]::view-transition-old(gt-pane) {
  object-position: top right;
}

html[dir="rtl"][data-gt-transition]::view-transition-new(gt-page) {
  object-position: top right;
}

html[dir="rtl"][data-gt-transition]::view-transition-new(gt-pane) {
  object-position: top right;
}

html[data-gt-transition]::view-transition-group(gt-frame) {
  background: var(--gt-frame-bg, transparent);
  border-radius: var(--gt-frame-radius, 0px);
  animation: none;
}

html[data-gt-transition]::view-transition-old(gt-frame) {
  display: none;
}

html[data-gt-transition]::view-transition-new(gt-frame) {
  animation: none;
}

html[data-gt-transition][data-gt-shell-changed="root"]::view-transition-old(root) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
  display: block;
}

html[data-gt-transition][data-gt-shell-changed="frame"]::view-transition-old(gt-frame) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
  display: block;
}

html[data-gt-transition][data-gt-shell-changed="root"]::view-transition-new(root) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition][data-gt-shell-changed="frame"]::view-transition-new(gt-frame) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition][data-gt-shell-changed]::view-transition-group(gt-page) {
  overflow: visible;
}

html[data-gt-transition][data-gt-shell-changed]::view-transition-group(gt-pane) {
  overflow: visible;
}

html[data-gt-transition][data-gt-shell-changed]::view-transition-old(gt-page) {
  translate: var(--gt-old-page-dx, 0px) var(--gt-old-page-dy, 0px);
  inline-size: var(--gt-old-page-w, 100%);
  block-size: var(--gt-old-page-h, 100%);
}

html[data-gt-transition][data-gt-shell-changed]::view-transition-old(gt-pane) {
  translate: var(--gt-old-pane-dx, 0px) var(--gt-old-pane-dy, 0px);
  inline-size: var(--gt-old-pane-w, 100%);
  block-size: var(--gt-old-pane-h, 100%);
}

@keyframes gt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes gt-x-from-end {
  from {
    translate: var(--m3-motion-axis-x) 0;
  }
}

@keyframes gt-x-from-start {
  from {
    translate: calc(var(--m3-motion-axis-x) * -1) 0;
  }
}

@keyframes gt-x-to-start {
  to {
    translate: calc(var(--m3-motion-axis-x) * -1) 0;
  }
}

@keyframes gt-x-to-end {
  to {
    translate: var(--m3-motion-axis-x) 0;
  }
}

@keyframes gt-y-from-below {
  from {
    translate: 0 var(--m3-motion-axis);
  }
}

@keyframes gt-y-from-above {
  from {
    translate: 0 calc(var(--m3-motion-axis) * -1);
  }
}

@keyframes gt-y-to-above {
  to {
    translate: 0 calc(var(--m3-motion-axis) * -1);
  }
}

@keyframes gt-y-to-below {
  to {
    translate: 0 var(--m3-motion-axis);
  }
}

@keyframes gt-z-from-small {
  from {
    scale: .8;
  }
}

@keyframes gt-z-from-large {
  from {
    scale: 1.1;
  }
}

@keyframes gt-z-to-large {
  to {
    scale: 1.1;
  }
}

@keyframes gt-z-to-small {
  to {
    scale: .8;
  }
}

html[data-gt-transition]::view-transition-group(gt-shared) {
  z-index: 2;
  animation-duration: var(--m3-motion-spatial-slow-duration);
  animation-timing-function: var(--m3-motion-spatial-slow);
}

html[data-gt-transition]::view-transition-old(gt-shared) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition]::view-transition-new(gt-shared) {
  animation: gt-fade-in var(--m3-motion-duration-medium2) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition]::view-transition-old(gt-shared) {
  object-fit: cover;
  object-position: top left;
  height: 100%;
}

html[data-gt-transition]::view-transition-new(gt-shared) {
  object-fit: cover;
  object-position: top left;
  height: 100%;
}

html[data-gt-transition="gt-slide-forward"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-start var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-forward"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-start var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-forward"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-x-from-end var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-forward"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-x-from-end var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-forward"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-start var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-back"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-end var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-back"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-end var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-back"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-x-from-start var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-back"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-x-from-start var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-slide-back"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-x-to-end var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-forward"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-above var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-forward"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-above var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-forward"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-y-from-below var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-forward"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-y-from-below var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-forward"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-above var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-back"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-below var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-back"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-below var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-back"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-y-from-above var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-back"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-y-from-above var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-rise-back"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-y-to-below var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-forward"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-large var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-forward"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-large var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-forward"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-z-from-small var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-forward"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-z-from-small var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-forward"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-large var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-back"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-small var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-back"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-small var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-back"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-z-from-large var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-back"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-z-from-large var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-zoom-back"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both, gt-z-to-small var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) both;
}

html[data-gt-transition="gt-fade-through"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-fade-through"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-fade-through"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-scale-in var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition="gt-fade-through"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both, gt-scale-in var(--m3-motion-spatial-default-duration) var(--m3-motion-spatial-default) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition="gt-fade-through"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-fade"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-fade"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-fade"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition="gt-fade"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition="gt-fade"]::view-transition-old(gt-shared):only-child {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-morph"]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-morph"]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short3) var(--m3-motion-easing-emphasized-accelerate) both;
}

html[data-gt-transition="gt-morph"]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

html[data-gt-transition="gt-morph"]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-medium1) var(--m3-motion-easing-emphasized-decelerate) var(--m3-motion-duration-short3) both;
}

:root {
  --gt-snackbar-dwell: 6s;
}

@keyframes gt-away {
  99%, to {
    opacity: 0;
    visibility: hidden;
  }
}

.gt-snackbar-away {
  animation: gt-away var(--m3-motion-duration-medium2) var(--m3-motion-easing-standard-accelerate) var(--gt-snackbar-dwell) forwards;
}

.gt-motion-graphic .gt-mg-still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gt-motion-graphic .gt-mg-live {
    display: none;
  }

  .gt-motion-graphic .gt-mg-still {
    display: block;
  }

  .m3-skeleton {
    animation: none;
  }

  :is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(n) {
    animation: gt-fade-in var(--m3-motion-duration-short2) linear backwards;
    animation-delay: 0s;
  }

  html[data-gt-transition]::view-transition-group(gt-page) {
    animation-duration: 0s;
  }

  html[data-gt-transition]::view-transition-group(gt-pane) {
    animation-duration: 0s;
  }

  html[data-gt-transition]::view-transition-group(gt-shared) {
    animation-duration: 0s;
  }

  html[data-gt-transition]::view-transition-old(gt-page) {
    animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
  }

  html[data-gt-transition]::view-transition-old(gt-pane) {
    animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
  }

  html[data-gt-transition]::view-transition-old(gt-shared) {
    animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
  }

  html[data-gt-transition]::view-transition-new(gt-page) {
    animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
  }

  html[data-gt-transition]::view-transition-new(gt-pane) {
    animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
  }

  html[data-gt-transition]::view-transition-new(gt-shared) {
    animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
  }
}

[data-reduced-motion] .gt-motion-graphic .gt-mg-live {
  display: none;
}

[data-reduced-motion] .gt-motion-graphic .gt-mg-still {
  display: block;
}

[data-reduced-motion] .m3-skeleton {
  animation: none;
}

[data-reduced-motion] :is(.gt-enter-fade, .gt-enter-rise, .gt-enter-scale, .gt-enter-pop, .gt-enter-slide):nth-child(n) {
  animation: gt-fade-in var(--m3-motion-duration-short2) linear backwards;
  animation-delay: 0s;
}

html[data-reduced-motion][data-gt-transition]::view-transition-group(gt-page) {
  animation-duration: 0s;
}

html[data-reduced-motion][data-gt-transition]::view-transition-group(gt-pane) {
  animation-duration: 0s;
}

html[data-reduced-motion][data-gt-transition]::view-transition-group(gt-shared) {
  animation-duration: 0s;
}

html[data-reduced-motion][data-gt-transition]::view-transition-old(gt-page) {
  animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
}

html[data-reduced-motion][data-gt-transition]::view-transition-old(gt-pane) {
  animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
}

html[data-reduced-motion][data-gt-transition]::view-transition-old(gt-shared) {
  animation: gt-fade-out var(--m3-motion-duration-short2) linear both !important;
}

html[data-reduced-motion][data-gt-transition]::view-transition-new(gt-page) {
  animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
}

html[data-reduced-motion][data-gt-transition]::view-transition-new(gt-pane) {
  animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
}

html[data-reduced-motion][data-gt-transition]::view-transition-new(gt-shared) {
  animation: gt-fade-in var(--m3-motion-duration-short2) linear both !important;
}

:root {
  --m3-font-display: var(--font-readex-pro), "Segoe UI", system-ui, sans-serif;
  --m3-font-body: var(--font-inter), "Segoe UI", system-ui, sans-serif;
  --m3-font-mono: var(--font-roboto-mono), ui-monospace, SFMono-Regular, monospace;
}

html, body {
  height: 100%;
}

body {
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-family: var(--m3-font-body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--m3-primary) !important;
  outline-offset: 2px !important;
}

[class*="has-[:focus]:border-primary"] :is(input, textarea):focus-visible {
  outline: none !important;
}

.border-error:has(:is(input, textarea):focus-visible) {
  border-width: 3px;
}

.border-b.border-error:has(:is(input, textarea):focus-visible) {
  border-width: 0 0 3px;
}

.border-error :is(input, textarea):focus-visible, :is(h1, h2, h3, h4, h5, h6, main)[tabindex="-1"]:focus-visible {
  outline: none !important;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__1rgtimgcm6_vx._.css.map*/