.scoped a,.scoped abbr,.scoped area,.scoped article,.scoped aside,.scoped audio,.scoped b,.scoped bdo,.scoped blockquote,.scoped body,.scoped button,.scoped canvas,.scoped caption,.scoped cite,.scoped code,.scoped col,.scoped colgroup,.scoped datalist,.scoped dd,.scoped del,.scoped details,.scoped dialog,.scoped dfn,.scoped div,.scoped dl,.scoped dt,.scoped em,.scoped embed,.scoped fieldset,.scoped figure,.scoped form,.scoped h1,.scoped h2,.scoped h3,.scoped h4,.scoped h5,.scoped h6,.scoped head,.scoped header,.scoped hgroup,.scoped hr,.scoped html,.scoped i,.scoped iframe,.scoped img,.scoped input,.scoped ins,.scoped keygen,.scoped kbd,.scoped label,.scoped legend,.scoped li,.scoped map,.scoped mark,.scoped menu,.scoped meter,.scoped nav,.scoped noscript,.scoped object,.scoped ol,.scoped optgroup,.scoped option,.scoped output,.scoped p,.scoped param,.scoped pre,.scoped progress,.scoped q,.scoped rp,.scoped rt,.scoped ruby,.scoped samp,.scoped section,.scoped select,.scoped small,.scoped span,.scoped strong,.scoped sub,.scoped sup,.scoped table,.scoped tbody,.scoped td,.scoped textarea,.scoped tfoot,.scoped th,.scoped thead,.scoped time,.scoped tr,.scoped ul,.scoped var,.scoped video{background:transparent;border:0;font:inherit;font-size:100%;margin:0;padding:0;text-align:inherit;text-decoration:none;vertical-align:baseline;z-index:auto}.scoped article,.scoped aside,.scoped details,.scoped figcaption,.scoped figure,.scoped footer,.scoped header,.scoped hgroup,.scoped menu,.scoped nav,.scoped section{display:block}.scoped body{line-height:1}.scoped ol,.scoped ul{list-style:none}.scoped blockquote,.scoped q{quotes:none}.scoped blockquote::before,.scoped blockquote::after,.scoped q::before,.scoped q::after{content:"";content:none}.scoped table{border-collapse:collapse;border-spacing:0}.scoped abbr,.scoped abbr[title]{text-decoration:none}@font-face{font-display:fallback;font-family:"roboto";src:url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-regular.woff2") format("woff2"),url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-regular.woff") format("woff");font-style:normal;font-weight:400}@font-face{font-display:optional;font-family:"roboto";src:url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-italic.woff2") format("woff2"),url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-italic.woff") format("woff");font-style:italic;font-weight:400}@font-face{font-display:fallback;font-family:"roboto";src:url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-medium.woff2") format("woff2"),url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-medium.woff") format("woff");font-style:normal;font-weight:500}@font-face{font-display:optional;font-family:"roboto";src:url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-medium-italic.woff2") format("woff2"),url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-medium-italic.woff") format("woff");font-style:italic;font-weight:500}@font-face{font-display:fallback;font-family:"roboto";src:url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-bold.woff2") format("woff2"),url("https://static.snyk.io/prod/static-assets/style/build/fonts/roboto-bold.woff") format("woff");font-style:normal;font-weight:700}.scoped .highlight{background-color:#99e4ff}.scoped .dimmed{color:var(--pcl-color-ui-dimmed)}.scoped .critical-severity{color:var(--pcl-color-severity-critical-base)}.scoped .high-severity{color:var(--pcl-color-severity-high-base)}.scoped .medium-severity{color:var(--pcl-color-severity-medium-base)}.scoped .low-severity{color:var(--pcl-color-severity-low-base)}.scoped *{-webkit-box-sizing:border-box;box-sizing:border-box}.scoped svg:not(:root){display:inline-block;fill:currentColor;overflow:hidden;vertical-align:middle}.scoped .margin--xxxl{margin:85.3333333333px}.scoped .margin-top--xxxl{margin-top:85.3333333333px}.scoped .margin-right--xxxl{margin-right:85.3333333333px}.scoped .margin-bottom--xxxl{margin-bottom:85.3333333333px}.scoped .margin-left--xxxl{margin-left:85.3333333333px}@media only screen and (min-width: 40em){.scoped .margin--xxxl{margin:128px}.scoped .margin-top--xxxl{margin-top:128px}.scoped .margin-right--xxxl{margin-right:128px}.scoped .margin-bottom--xxxl{margin-bottom:128px}.scoped .margin-left--xxxl{margin-left:128px}}.scoped .margin--xxl{margin:42.6666666667px}.scoped .margin-top--xxl{margin-top:42.6666666667px}.scoped .margin-right--xxl{margin-right:42.6666666667px}.scoped .margin-bottom--xxl{margin-bottom:42.6666666667px}.scoped .margin-left--xxl{margin-left:42.6666666667px}@media only screen and (min-width: 40em){.scoped .margin--xxl{margin:64px}.scoped .margin-top--xxl{margin-top:64px}.scoped .margin-right--xxl{margin-right:64px}.scoped .margin-bottom--xxl{margin-bottom:64px}.scoped .margin-left--xxl{margin-left:64px}}.scoped .margin--xl{margin:32px}.scoped .margin-top--xl{margin-top:32px}.scoped .margin-right--xl{margin-right:32px}.scoped .margin-bottom--xl{margin-bottom:32px}.scoped .margin-left--xl{margin-left:32px}@media only screen and (min-width: 40em){.scoped .margin--xl{margin:48px}.scoped .margin-top--xl{margin-top:48px}.scoped .margin-right--xl{margin-right:48px}.scoped .margin-bottom--xl{margin-bottom:48px}.scoped .margin-left--xl{margin-left:48px}}.scoped .margin--l{margin:21.3333333333px}.scoped .margin-top--l{margin-top:21.3333333333px}.scoped .margin-right--l{margin-right:21.3333333333px}.scoped .margin-bottom--l{margin-bottom:21.3333333333px}.scoped .margin-left--l{margin-left:21.3333333333px}@media only screen and (min-width: 40em){.scoped .margin--l{margin:32px}.scoped .margin-top--l{margin-top:32px}.scoped .margin-right--l{margin-right:32px}.scoped .margin-bottom--l{margin-bottom:32px}.scoped .margin-left--l{margin-left:32px}}.scoped .margin--m{margin:16px}.scoped .margin-top--m{margin-top:16px}.scoped .margin-right--m{margin-right:16px}.scoped .margin-bottom--m{margin-bottom:16px}.scoped .margin-left--m{margin-left:16px}@media only screen and (min-width: 40em){.scoped .margin--m{margin:24px}.scoped .margin-top--m{margin-top:24px}.scoped .margin-right--m{margin-right:24px}.scoped .margin-bottom--m{margin-bottom:24px}.scoped .margin-left--m{margin-left:24px}}.scoped .margin--default{margin:10.6666666667px}.scoped .margin-top--default{margin-top:10.6666666667px}.scoped .margin-right--default{margin-right:10.6666666667px}.scoped .margin-bottom--default{margin-bottom:10.6666666667px}.scoped .margin-left--default{margin-left:10.6666666667px}@media only screen and (min-width: 40em){.scoped .margin--default{margin:16px}.scoped .margin-top--default{margin-top:16px}.scoped .margin-right--default{margin-right:16px}.scoped .margin-bottom--default{margin-bottom:16px}.scoped .margin-left--default{margin-left:16px}}.scoped .margin--s{margin:8px}.scoped .margin-top--s{margin-top:8px}.scoped .margin-right--s{margin-right:8px}.scoped .margin-bottom--s{margin-bottom:8px}.scoped .margin-left--s{margin-left:8px}@media only screen and (min-width: 40em){.scoped .margin--s{margin:12px}.scoped .margin-top--s{margin-top:12px}.scoped .margin-right--s{margin-right:12px}.scoped .margin-bottom--s{margin-bottom:12px}.scoped .margin-left--s{margin-left:12px}}.scoped .margin--xs{margin:5.3333333333px}.scoped .margin-top--xs{margin-top:5.3333333333px}.scoped .margin-right--xs{margin-right:5.3333333333px}.scoped .margin-bottom--xs{margin-bottom:5.3333333333px}.scoped .margin-left--xs{margin-left:5.3333333333px}@media only screen and (min-width: 40em){.scoped .margin--xs{margin:8px}.scoped .margin-top--xs{margin-top:8px}.scoped .margin-right--xs{margin-right:8px}.scoped .margin-bottom--xs{margin-bottom:8px}.scoped .margin-left--xs{margin-left:8px}}.scoped .margin--xxs{margin:2.6666666667px}.scoped .margin-top--xxs{margin-top:2.6666666667px}.scoped .margin-right--xxs{margin-right:2.6666666667px}.scoped .margin-bottom--xxs{margin-bottom:2.6666666667px}.scoped .margin-left--xxs{margin-left:2.6666666667px}@media only screen and (min-width: 40em){.scoped .margin--xxs{margin:4px}.scoped .margin-top--xxs{margin-top:4px}.scoped .margin-right--xxs{margin-right:4px}.scoped .margin-bottom--xxs{margin-bottom:4px}.scoped .margin-left--xxs{margin-left:4px}}.scoped .margin--xxxs{margin:1.3333333333px}.scoped .margin-top--xxxs{margin-top:1.3333333333px}.scoped .margin-right--xxxs{margin-right:1.3333333333px}.scoped .margin-bottom--xxxs{margin-bottom:1.3333333333px}.scoped .margin-left--xxxs{margin-left:1.3333333333px}@media only screen and (min-width: 40em){.scoped .margin--xxxs{margin:2px}.scoped .margin-top--xxxs{margin-top:2px}.scoped .margin-right--xxxs{margin-right:2px}.scoped .margin-bottom--xxxs{margin-bottom:2px}.scoped .margin-left--xxxs{margin-left:2px}}.scoped,.scoped html,.scoped body,.scoped input,.scoped textarea,.scoped button{font-family:roboto,"Gill Sans","Calibri",sans-serif;font-style:normal;font-weight:400;color:inherit;line-height:1.4;-webkit-font-feature-settings:"pnum";font-feature-settings:"pnum"}.scoped html,.scoped input,.scoped textarea{color:var(--pcl-color-ui-body)}.scoped h1{font-family:roboto,"Gill Sans","Calibri",sans-serif;font-style:normal;font-weight:400}.scoped h2{font-family:roboto,"Gill Sans","Calibri",sans-serif;font-style:normal;font-weight:400;font-size:1.5rem}.scoped h3{font-family:roboto,"Gill Sans","Calibri",sans-serif;font-style:normal;font-weight:500;font-size:1.25rem;line-height:1.8}.scoped h4,.scoped h5,.scoped h6{font-family:roboto,"Gill Sans","Calibri",sans-serif;font-style:normal;font-weight:500;font-size:1rem}.scoped h1,.scoped h2,.scoped h3,.scoped h4,.scoped h5,.scoped h6{color:var(--pcl-color-ui-heading)}.scoped a{color:var(--pcl-color-ui-link);cursor:pointer;text-decoration:none}.scoped a:hover{color:var(--pcl-color-ui-link);text-decoration:underline}.scoped p{margin:12px 0}.scoped p:first-child{margin-top:0}.scoped p:last-child{margin-bottom:0}.scoped strong{font-weight:500}.scoped em{font-style:italic}.scoped hr{background-color:var(--pcl-color-neutral-30);border:none;display:block;height:1px}.scoped ol{margin:0;padding:0 0 0 1em;list-style:decimal;-webkit-font-feature-settings:"pnum";font-feature-settings:"pnum"}.scoped ol li{margin:8px 0}.scoped ul{margin:0;padding:0 0 0 1em;list-style:disc;-webkit-font-feature-settings:"pnum";font-feature-settings:"pnum"}.scoped ul li{margin:8px 0}.scoped .footnote{font-style:italic;color:var(--pcl-color-ui-dimmed);font-size:.875rem}.scoped img{max-width:100%}.scoped code{background-color:color-mix(in srgb, var(--pcl-color-ui-body), transparent 90%);border-radius:4px;font-family:"Consolas","Monaco","Andale Mono","Ubuntu Mono",monospace;-webkit-font-feature-settings:"pnum";font-feature-settings:"pnum";font-variant:proportional-nums;font-size:90%;padding:2px 4px;white-space:pre}.scoped p code{white-space:pre-wrap}.scoped .table{margin-bottom:12px;width:auto}.scoped .table tr{border:none}.scoped .table th,.scoped .table td{font-size:1rem;letter-spacing:0;line-height:1.65;text-transform:none;color:var(--pcl-color-ui-body);padding:0;vertical-align:top}.scoped .table th{font-weight:500}.scoped .table--basic th{text-align:left;padding-right:12px}.scoped .table--basic td{padding-right:12px}.scoped .table--small th,.scoped .table--small td{font-size:.875rem}.scoped .shake-horizontal{-webkit-animation:shake-horizontal .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;animation:shake-horizontal .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both}@-webkit-keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}@keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}.scoped .shake-horizontal-subtle{-webkit-animation:shake-horizontal-subtle .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;animation:shake-horizontal-subtle .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both}@-webkit-keyframes shake-horizontal-subtle{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-4px);transform:translateX(-4px)}20%,40%,60%{-webkit-transform:translateX(4px);transform:translateX(4px)}80%{-webkit-transform:translateX(2px);transform:translateX(2px)}90%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}}@keyframes shake-horizontal-subtle{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-4px);transform:translateX(-4px)}20%,40%,60%{-webkit-transform:translateX(4px);transform:translateX(4px)}80%{-webkit-transform:translateX(2px);transform:translateX(2px)}90%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}}.scoped .shake-vertical{-webkit-animation:shake-vertical .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;animation:shake-vertical .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both}@-webkit-keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}20%,40%,60%{-webkit-transform:translateY(8px);transform:translateY(8px)}80%{-webkit-transform:translateY(6.4px);transform:translateY(6.4px)}90%{-webkit-transform:translateY(-6.4px);transform:translateY(-6.4px)}}@keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}20%,40%,60%{-webkit-transform:translateY(8px);transform:translateY(8px)}80%{-webkit-transform:translateY(6.4px);transform:translateY(6.4px)}90%{-webkit-transform:translateY(-6.4px);transform:translateY(-6.4px)}}.scoped .shake-vertical-subtle{-webkit-animation:shake-vertical-subtle .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;animation:shake-vertical-subtle .8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both}@-webkit-keyframes shake-vertical-subtle{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}20%,40%,60%{-webkit-transform:translateY(2px);transform:translateY(2px)}80%{-webkit-transform:translateY(1.6px);transform:translateY(1.6px)}90%{-webkit-transform:translateY(-1.6px);transform:translateY(-1.6px)}}@keyframes shake-vertical-subtle{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}20%,40%,60%{-webkit-transform:translateY(2px);transform:translateY(2px)}80%{-webkit-transform:translateY(1.6px);transform:translateY(1.6px)}90%{-webkit-transform:translateY(-1.6px);transform:translateY(-1.6px)}}.scoped [data-vue=site-header],.scoped .vue--site-header{min-height:64px;background:-webkit-gradient(linear, left top, right top, from(var(--pcl-color-purple-40)), color-stop(50%, var(--pcl-color-purple-60)));background:linear-gradient(to right, var(--pcl-color-purple-40) 0%, var(--pcl-color-purple-60) 50%)}.scoped [data-hide-chrome] .vue--site-header{display:none}
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  --pcl-breakpoint-app-large: 1140px;
  --pcl-breakpoint-app-medium: 720px;
  --pcl-breakpoint-app-small: 640px;
  --pcl-breakpoint-app-xlarge: 1280px;
  --pcl-breakpoint-app-xsmall: 420px;
  --pcl-breakpoint-app-xxlarge: 1440px;
  --pcl-breakpoint-app-xxxlarge: 1680px;
  --pcl-color-accent-bg: #f5eeff;
  --pcl-color-accent-border: #ceb2f2;
  --pcl-color-accent-icon: #9043c6;
  --pcl-color-accent-text: #471694;
  --pcl-color-blue-05: #f4f8ff;
  --pcl-color-blue-10: #eaf1ff;
  --pcl-color-blue-20: #b5ccfa;
  --pcl-color-blue-30: #7fa7f5;
  --pcl-color-blue-40: #145deb;
  --pcl-color-blue-50: #0f47c6;
  --pcl-color-blue-60: #07238b;
  --pcl-color-blue-70: #000052;
  --pcl-color-brand-bubblegum: #ff78e1;
  --pcl-color-brand-daffodil: #ffe792;
  --pcl-color-brand-dark-purple: #441c99;
  --pcl-color-brand-dark-teal: #168982;
  --pcl-color-brand-deep-sea: #0a26b8;
  --pcl-color-brand-electric-blue: #145deb;
  --pcl-color-brand-hot-pink: #e555ac;
  --pcl-color-brand-midnight: #21214c;
  --pcl-color-brand-purple: #9043c6;
  --pcl-color-brand-salmon: #e55578;
  --pcl-color-brand-sky: #14c4eb;
  --pcl-color-brand-smoke: #8383a8;
  --pcl-color-brand-snow: #f6f7fb;
  --pcl-color-brand-steel: #555463;
  --pcl-color-brand-summer: #f9c748;
  --pcl-color-brand-teal: #43b59a;
  --pcl-color-brand-tiger: #f99048;
  --pcl-color-brand-vibe: #4bd6b5;
  --pcl-color-brand-white: #fff;
  --pcl-color-green-05: #f5fdfb;
  --pcl-color-green-10: #ecfcf8;
  --pcl-color-green-20: #b4e4d9;
  --pcl-color-green-30: #7bcdb9;
  --pcl-color-green-40: #43b59a;
  --pcl-color-green-50: #2d9283;
  --pcl-color-green-60: #16706b;
  --pcl-color-green-70: #004d54;
  --pcl-color-orange-05: #fff9f6;
  --pcl-color-orange-10: #fff4ed;
  --pcl-color-orange-20: #fdd3b6;
  --pcl-color-orange-30: #fbb17f;
  --pcl-color-orange-40: #f99048;
  --pcl-color-orange-50: #e27122;
  --pcl-color-orange-60: #b6540b;
  --pcl-color-orange-70: #954002;
  --pcl-color-purple-05: #f5eeff;
  --pcl-color-purple-10: #ecddff;
  --pcl-color-purple-20: #ceb2f2;
  --pcl-color-purple-30: #b187e5;
  --pcl-color-purple-40: #9043c6;
  --pcl-color-purple-50: #722dc8;
  --pcl-color-purple-60: #471694;
  --pcl-color-purple-70: #200063;
  --pcl-color-red-05: #fff7f9;
  --pcl-color-red-10: #ffeef2;
  --pcl-color-red-20: #fac0cb;
  --pcl-color-red-30: #f48fa2;
  --pcl-color-red-40: #d8082d;
  --pcl-color-red-50: #b90020;
  --pcl-color-red-60: #8f0018;
  --pcl-color-red-70: #740000;
  --pcl-easing-ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-easing-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --pcl-easing-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-easing-linear: cubic-bezier(0, 0, 1, 1);
  --pcl-elevation-far: 0px 8px 12px 1px #00000026;
  --pcl-elevation-mid: 0px 4px 8px 0px #00000026;
  --pcl-elevation-near: 0px 2px 4px 0px #0000001a;
  --pcl-font-family-code: "Code New Roman";
  --pcl-font-family-default: "SF Pro";
  --pcl-font-size-l: 16px;
  /* Default */
  --pcl-font-size-m: 14px;
  --pcl-font-size-s: 13px;
  --pcl-font-size-xl: 18px;
  --pcl-font-size-xs: 12px;
  --pcl-font-size-xxl: 20px;
  --pcl-font-size-xxs: 11px;
  --pcl-font-size-xxxl: 24px;
  /* Regular Italic — pair with fontStyle: italic */
  --pcl-font-weight-placeholder: 400;
  --pcl-font-weight-regular: 400;
  --pcl-font-weight-strong: 600;
  --pcl-gradient-bubblegum-to-dark-purple: #ff78e1 0%, #722dc8 100%;
  --pcl-gradient-bubblegum-to-purple: #ff78e1 0%, #b187e5 100%;
  --pcl-gradient-bubblegum-to-salmon: #ff78e1 0%, #e55578 100%;
  --pcl-gradient-daffodil-to-salmon: #ffe792 0%, #e55578 100%;
  --pcl-gradient-daffodil-to-teal: #ffe792 0%, #43b59a 100%;
  --pcl-gradient-daffodil-to-tiger: #ffe792 0%, #f99048 100%;
  --pcl-gradient-hot-pink-to-dark-purple: #e555ac 0%, #722dc8 100%;
  --pcl-gradient-purple-to-dark-purple: #b187e5 0%, #722dc8 100%;
  --pcl-gradient-purple-to-deep-sea: #b187e5 0%, #0a26b8 100%;
  --pcl-gradient-purple-to-electric-blue: #b187e5 0%, #145deb 100%;
  --pcl-gradient-sky-to-deep-sea: #14c4eb 0%, #0a26b8 100%;
  --pcl-gradient-tiger-to-hot-pink: #f99048 0%, #e555ac 100%;
  --pcl-gradient-vibe-to-dark-purple: #4bd6b5 0%, #722dc8 100%;
  --pcl-gradient-vibe-to-dark-teal: #4bd6b5 0%, #168982 100%;
  --pcl-gradient-vibe-to-electric-blue: #4bd6b5 0%, #145deb 100%;
  --pcl-icon-size-l: 24px;
  /* Default */
  --pcl-icon-size-m: 20px;
  --pcl-icon-size-s: 16px;
  --pcl-input-size-l: 40px;
  /* Default */
  --pcl-input-size-m: 32px;
  --pcl-input-size-s: 24px;
  /* Default */
  --pcl-letter-spacing-m: 0px;
  --pcl-line-height-l: 24px;
  /* Default */
  --pcl-line-height-m: 20px;
  --pcl-line-height-s: 16px;
  --pcl-line-height-xs: 12px;
  --pcl-radius-l: 12px;
  --pcl-radius-large: 8px;
  /* Default */
  --pcl-radius-m: 6px;
  --pcl-radius-max: 128px;
  --pcl-radius-medium: 4px;
  --pcl-radius-none: 0px;
  /* Pill shape */
  --pcl-radius-round: 256px;
  --pcl-radius-s: 3px;
  --pcl-radius-small: 2px;
  --pcl-radius-xlarge: 12px;
  --pcl-size-2: 2px;
  --pcl-size-4: 4px;
  --pcl-size-6: 6px;
  --pcl-size-8: 8px;
  --pcl-size-12: 12px;
  --pcl-size-14: 14px;
  --pcl-size-16: 16px;
  --pcl-size-20: 20px;
  --pcl-size-24: 24px;
  --pcl-size-28: 28px;
  --pcl-size-32: 32px;
  --pcl-size-48: 48px;
  --pcl-size-64: 64px;
  --pcl-size-large-font-size: 18px;
  --pcl-size-large-height: 48px;
  --pcl-size-large-padding: 24px;
  --pcl-size-large-radius: 8px;
  --pcl-size-large-width: 48px;
  --pcl-size-medium-font-size: 16px;
  --pcl-size-medium-height: 32px;
  --pcl-size-medium-padding: 16px;
  --pcl-size-medium-radius: 4px;
  --pcl-size-medium-width: 32px;
  --pcl-size-small-font-size: 14px;
  --pcl-size-small-height: 28px;
  --pcl-size-small-padding: 12px;
  --pcl-size-small-radius: 2px;
  --pcl-size-small-width: 28px;
  --pcl-size-xlarge-font-size: 24px;
  --pcl-size-xlarge-height: 64px;
  --pcl-size-xlarge-padding: 24px;
  --pcl-size-xlarge-radius: 12px;
  --pcl-size-xlarge-width: 64px;
  --pcl-size-xsmall-font-size: 12px;
  --pcl-size-xsmall-height: 20px;
  --pcl-size-xsmall-padding: 8px;
  --pcl-size-xsmall-radius: 2px;
  --pcl-size-xsmall-width: 20px;
  --pcl-space-adjust-l: 3px;
  --pcl-space-adjust-m: 2px;
  --pcl-space-adjust-s: 1px;
  --pcl-space-l: 24px;
  --pcl-space-layout-huge: 240px;
  --pcl-space-layout-large: 120px;
  --pcl-space-layout-medium: 80px;
  --pcl-space-layout-small: 40px;
  --pcl-space-layout-xlarge: 160px;
  --pcl-space-layout-xsmall: 24px;
  --pcl-space-m: 16px;
  --pcl-space-none: 0px;
  --pcl-space-s: 12px;
  --pcl-space-xl: 32px;
  --pcl-space-xs: 8px;
  --pcl-space-xxl: 40px;
  --pcl-space-xxs: 4px;
  --pcl-timing-deliberate: 500ms;
  --pcl-timing-instant: 50ms;
  --pcl-timing-moderate: 200ms;
  --pcl-timing-quick: 100ms;
  --pcl-timing-slow: 1000ms;
  --pcl-transition-blend-deliberate: 500ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-blend-instant: 50ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-blend-moderate: 200ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-blend-quick: 100ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-blend-slow: 1000ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-enter-deliberate: 500ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-enter-instant: 50ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-enter-moderate: 200ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-enter-quick: 100ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-enter-slow: 1000ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-exit-deliberate: 500ms 0ms cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-exit-instant: 50ms 0ms cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-exit-moderate: 200ms 0ms cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-exit-quick: 100ms 0ms cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-exit-slow: 1000ms 0ms cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-mechanical-switch-instant: 50ms 0ms cubic-bezier(0, 1.15, 0, 1);
  --pcl-transition-mechanical-switch-moderate: 200ms 0ms cubic-bezier(0, 1.15, 0, 1);
  --pcl-transition-mechanical-switch-quick: 100ms 0ms cubic-bezier(0, 1.15, 0, 1);
  --pcl-transition-notification-enter: 100ms 0ms cubic-bezier(0.33, 1, 0.68, 1);
  --pcl-transition-notification-exit: 100ms 3s cubic-bezier(0.32, 0, 0.67, 0);
  --pcl-transition-rhythmic-deliberate: 500ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-rhythmic-instant: 50ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-rhythmic-moderate: 200ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-rhythmic-quick: 100ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-transition-rhythmic-slow: 1000ms 0ms cubic-bezier(0, 0, 1, 1);
  --pcl-typography-brand-body: var(--pcl-typography-brand-body-font-weight) var(--pcl-typography-brand-body-font-size)/var(--pcl-typography-brand-body-line-height) var(--pcl-typography-brand-body-font-family);
  --pcl-typography-brand-body-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-brand-body-font-size: 16px;
  --pcl-typography-brand-body-font-weight: 700;
  --pcl-typography-brand-body-lead: var(--pcl-typography-brand-body-lead-font-weight) var(--pcl-typography-brand-body-lead-font-size)/var(--pcl-typography-brand-body-lead-line-height) var(--pcl-typography-brand-body-lead-font-family);
  --pcl-typography-brand-body-lead-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-body-lead-font-size: 18px;
  --pcl-typography-brand-body-lead-font-weight: 400;
  --pcl-typography-brand-body-lead-letter-spacing: 0.01em;
  --pcl-typography-brand-body-lead-line-height: 1.5555555555555556;
  --pcl-typography-brand-body-letter-spacing: 0px;
  --pcl-typography-brand-body-line-height: 1.5;
  --pcl-typography-brand-code: var(--pcl-typography-brand-code-font-weight) var(--pcl-typography-brand-code-font-size)/var(--pcl-typography-brand-code-line-height) var(--pcl-typography-brand-code-font-family);
  --pcl-typography-brand-code-font-family: "Roboto Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", monospace;
  --pcl-typography-brand-code-font-size: 16px;
  --pcl-typography-brand-code-font-weight: 400;
  --pcl-typography-brand-code-letter-spacing: 0px;
  --pcl-typography-brand-code-line-height: 1.75;
  --pcl-typography-brand-heading1: var(--pcl-typography-brand-heading1-font-weight) var(--pcl-typography-brand-heading1-font-size)/var(--pcl-typography-brand-heading1-line-height) var(--pcl-typography-brand-heading1-font-family);
  --pcl-typography-brand-heading1-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-heading1-font-size: 48px;
  --pcl-typography-brand-heading1-font-weight: 700;
  --pcl-typography-brand-heading1-letter-spacing: 0px;
  --pcl-typography-brand-heading1-line-height: 1.3333333333333333;
  --pcl-typography-brand-heading2: var(--pcl-typography-brand-heading2-font-weight) var(--pcl-typography-brand-heading2-font-size)/var(--pcl-typography-brand-heading2-line-height) var(--pcl-typography-brand-heading2-font-family);
  --pcl-typography-brand-heading2-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-heading2-font-size: 40px;
  --pcl-typography-brand-heading2-font-weight: 700;
  --pcl-typography-brand-heading2-letter-spacing: 0px;
  --pcl-typography-brand-heading2-line-height: 1.2;
  --pcl-typography-brand-heading3: var(--pcl-typography-brand-heading3-font-weight) var(--pcl-typography-brand-heading3-font-size)/var(--pcl-typography-brand-heading3-line-height) var(--pcl-typography-brand-heading3-font-family);
  --pcl-typography-brand-heading3-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-heading3-font-size: 32px;
  --pcl-typography-brand-heading3-font-weight: 700;
  --pcl-typography-brand-heading3-letter-spacing: 0px;
  --pcl-typography-brand-heading3-line-height: 1.25;
  --pcl-typography-brand-mini-header: var(--pcl-typography-brand-mini-header-font-weight) var(--pcl-typography-brand-mini-header-font-size)/var(--pcl-typography-brand-mini-header-line-height) var(--pcl-typography-brand-mini-header-font-family);
  --pcl-typography-brand-mini-header-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-mini-header-font-size: 16px;
  --pcl-typography-brand-mini-header-font-weight: 600;
  --pcl-typography-brand-mini-header-letter-spacing: 0.12em;
  --pcl-typography-brand-mini-header-line-height: 1.5;
  --pcl-typography-brand-mini-header-text-transform: uppercase;
  --pcl-typography-brand-subhead: var(--pcl-typography-brand-subhead-font-weight) var(--pcl-typography-brand-subhead-font-size)/var(--pcl-typography-brand-subhead-line-height) var(--pcl-typography-brand-subhead-font-family);
  --pcl-typography-brand-subhead-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-subhead-font-size: 24px;
  --pcl-typography-brand-subhead-font-weight: 600;
  --pcl-typography-brand-subhead-letter-spacing: 0px;
  --pcl-typography-brand-subhead-line-height: 1.5;
  --pcl-typography-brand-subhead-small: var(--pcl-typography-brand-subhead-small-font-weight) var(--pcl-typography-brand-subhead-small-font-size)/var(--pcl-typography-brand-subhead-small-line-height) var(--pcl-typography-brand-subhead-small-font-family);
  --pcl-typography-brand-subhead-small-font-family: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-brand-subhead-small-font-size: 18px;
  --pcl-typography-brand-subhead-small-font-weight: 600;
  --pcl-typography-brand-subhead-small-letter-spacing: 0px;
  --pcl-typography-brand-subhead-small-line-height: 1.5555555555555556;
  --pcl-typography-family-poppins: "Poppins", "Futura", "Century Gothic", system-ui, ui-sans-serif, -apple-system, sans-serif;
  --pcl-typography-family-roboto: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-family-roboto-mono: "Roboto Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", monospace;
  --pcl-typography-product-badge: var(--pcl-typography-product-badge-font-weight) var(--pcl-typography-product-badge-font-size)/var(--pcl-typography-product-badge-line-height) var(--pcl-typography-product-badge-font-family);
  --pcl-typography-product-badge-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-badge-font-size: 12px;
  --pcl-typography-product-badge-font-weight: 600;
  --pcl-typography-product-badge-letter-spacing: 0px;
  --pcl-typography-product-badge-line-height: 1.1666666666666667;
  --pcl-typography-product-badge-small: var(--pcl-typography-product-badge-small-font-weight) var(--pcl-typography-product-badge-small-font-size)/var(--pcl-typography-product-badge-small-line-height) var(--pcl-typography-product-badge-small-font-family);
  --pcl-typography-product-badge-small-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-badge-small-font-size: 10px;
  --pcl-typography-product-badge-small-font-weight: 500;
  --pcl-typography-product-badge-small-letter-spacing: 0px;
  --pcl-typography-product-badge-small-line-height: 1.1;
  --pcl-typography-product-body: var(--pcl-typography-product-body-font-weight) var(--pcl-typography-product-body-font-size)/var(--pcl-typography-product-body-line-height) var(--pcl-typography-product-body-font-family);
  --pcl-typography-product-body-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-font-size: 16px;
  --pcl-typography-product-body-font-weight: 400;
  --pcl-typography-product-body-lead: var(--pcl-typography-product-body-lead-font-weight) var(--pcl-typography-product-body-lead-font-size)/var(--pcl-typography-product-body-lead-line-height) var(--pcl-typography-product-body-lead-font-family);
  --pcl-typography-product-body-lead-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-lead-font-size: 18px;
  --pcl-typography-product-body-lead-font-weight: 400;
  --pcl-typography-product-body-lead-letter-spacing: 0px;
  --pcl-typography-product-body-lead-line-height: 1.3333333333333333;
  --pcl-typography-product-body-lead-strong: var(--pcl-typography-product-body-lead-strong-font-weight) var(--pcl-typography-product-body-lead-strong-font-size)/var(--pcl-typography-product-body-lead-strong-line-height) var(--pcl-typography-product-body-lead-strong-font-family);
  --pcl-typography-product-body-lead-strong-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-lead-strong-font-size: 18px;
  --pcl-typography-product-body-lead-strong-font-weight: 500;
  --pcl-typography-product-body-lead-strong-letter-spacing: 0px;
  --pcl-typography-product-body-lead-strong-line-height: 1.3333333333333333;
  --pcl-typography-product-body-letter-spacing: 0px;
  --pcl-typography-product-body-line-height: 1.375;
  --pcl-typography-product-body-small: var(--pcl-typography-product-body-small-font-weight) var(--pcl-typography-product-body-small-font-size)/var(--pcl-typography-product-body-small-line-height) var(--pcl-typography-product-body-small-font-family);
  --pcl-typography-product-body-small-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-small-font-size: 14px;
  --pcl-typography-product-body-small-font-weight: 400;
  --pcl-typography-product-body-small-letter-spacing: 0px;
  --pcl-typography-product-body-small-line-height: 1.2857142857142858;
  --pcl-typography-product-body-small-strong: var(--pcl-typography-product-body-small-strong-font-weight) var(--pcl-typography-product-body-small-strong-font-size)/var(--pcl-typography-product-body-small-strong-line-height) var(--pcl-typography-product-body-small-strong-font-family);
  --pcl-typography-product-body-small-strong-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-small-strong-font-size: 14px;
  --pcl-typography-product-body-small-strong-font-weight: 500;
  --pcl-typography-product-body-small-strong-letter-spacing: 0px;
  --pcl-typography-product-body-small-strong-line-height: 1.2857142857142858;
  --pcl-typography-product-body-strong: var(--pcl-typography-product-body-strong-font-weight) var(--pcl-typography-product-body-strong-font-size)/var(--pcl-typography-product-body-strong-line-height) var(--pcl-typography-product-body-strong-font-family);
  --pcl-typography-product-body-strong-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-body-strong-font-size: 16px;
  --pcl-typography-product-body-strong-font-weight: 500;
  --pcl-typography-product-body-strong-letter-spacing: 0px;
  --pcl-typography-product-body-strong-line-height: 1.375;
  --pcl-typography-product-caption: var(--pcl-typography-product-caption-font-weight) var(--pcl-typography-product-caption-font-size)/var(--pcl-typography-product-caption-line-height) var(--pcl-typography-product-caption-font-family);
  --pcl-typography-product-caption-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-caption-font-size: 12px;
  --pcl-typography-product-caption-font-weight: 400;
  --pcl-typography-product-caption-letter-spacing: 0px;
  --pcl-typography-product-caption-line-height: 1.3333333333333333;
  --pcl-typography-product-caption-strong: var(--pcl-typography-product-caption-strong-font-weight) var(--pcl-typography-product-caption-strong-font-size)/var(--pcl-typography-product-caption-strong-line-height) var(--pcl-typography-product-caption-strong-font-family);
  --pcl-typography-product-caption-strong-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-caption-strong-font-size: 12px;
  --pcl-typography-product-caption-strong-font-weight: 500;
  --pcl-typography-product-caption-strong-letter-spacing: 0px;
  --pcl-typography-product-caption-strong-line-height: 1.3333333333333333;
  --pcl-typography-product-code: var(--pcl-typography-product-code-font-weight) var(--pcl-typography-product-code-font-size)/var(--pcl-typography-product-code-line-height) var(--pcl-typography-product-code-font-family);
  --pcl-typography-product-code-font-family: "Roboto Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", monospace;
  --pcl-typography-product-code-font-size: 14px;
  --pcl-typography-product-code-font-weight: 400;
  --pcl-typography-product-code-lead: var(--pcl-typography-product-code-lead-font-weight) var(--pcl-typography-product-code-lead-font-size)/var(--pcl-typography-product-code-lead-line-height) var(--pcl-typography-product-code-lead-font-family);
  --pcl-typography-product-code-lead-font-family: "Roboto Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", monospace;
  --pcl-typography-product-code-lead-font-size: 16px;
  --pcl-typography-product-code-lead-font-weight: 400;
  --pcl-typography-product-code-lead-letter-spacing: 0px;
  --pcl-typography-product-code-lead-line-height: 1.3125;
  --pcl-typography-product-code-letter-spacing: 0px;
  --pcl-typography-product-code-line-height: 1.5714285714285714;
  --pcl-typography-product-code-small: var(--pcl-typography-product-code-small-font-weight) var(--pcl-typography-product-code-small-font-size)/var(--pcl-typography-product-code-small-line-height) var(--pcl-typography-product-code-small-font-family);
  --pcl-typography-product-code-small-font-family: "Roboto Mono", ui-monospace, "SF Mono", "Monaco", "Cascadia Mono", "Cascadia Code", "Consolas", monospace;
  --pcl-typography-product-code-small-font-size: 12px;
  --pcl-typography-product-code-small-font-weight: 400;
  --pcl-typography-product-code-small-letter-spacing: 0px;
  --pcl-typography-product-code-small-line-height: 1.5;
  --pcl-typography-product-default: var(--pcl-typography-product-default-font-weight) var(--pcl-typography-product-default-font-size)/var(--pcl-typography-product-default-line-height) var(--pcl-typography-product-default-font-family);
  --pcl-typography-product-default-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-default-font-size: 16px;
  --pcl-typography-product-default-font-weight: 400;
  --pcl-typography-product-default-letter-spacing: 0px;
  --pcl-typography-product-default-line-height: 1;
  --pcl-typography-product-default-small: var(--pcl-typography-product-default-small-font-weight) var(--pcl-typography-product-default-small-font-size)/var(--pcl-typography-product-default-small-line-height) var(--pcl-typography-product-default-small-font-family);
  --pcl-typography-product-default-small-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-default-small-font-size: 14px;
  --pcl-typography-product-default-small-font-weight: 400;
  --pcl-typography-product-default-small-letter-spacing: 0px;
  --pcl-typography-product-default-small-line-height: 1;
  --pcl-typography-product-heading1: var(--pcl-typography-product-heading1-font-weight) var(--pcl-typography-product-heading1-font-size)/var(--pcl-typography-product-heading1-line-height) var(--pcl-typography-product-heading1-font-family);
  --pcl-typography-product-heading1-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading1-font-size: 32px;
  --pcl-typography-product-heading1-font-weight: 600;
  --pcl-typography-product-heading1-letter-spacing: 0px;
  --pcl-typography-product-heading1-line-height: 1.1875;
  --pcl-typography-product-heading2: var(--pcl-typography-product-heading2-font-weight) var(--pcl-typography-product-heading2-font-size)/var(--pcl-typography-product-heading2-line-height) var(--pcl-typography-product-heading2-font-family);
  --pcl-typography-product-heading2-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading2-font-size: 28px;
  --pcl-typography-product-heading2-font-weight: 400;
  --pcl-typography-product-heading2-letter-spacing: 0px;
  --pcl-typography-product-heading2-line-height: 1.2857142857142858;
  --pcl-typography-product-heading3: var(--pcl-typography-product-heading3-font-weight) var(--pcl-typography-product-heading3-font-size)/var(--pcl-typography-product-heading3-line-height) var(--pcl-typography-product-heading3-font-family);
  --pcl-typography-product-heading3-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading3-font-size: 24px;
  --pcl-typography-product-heading3-font-weight: 400;
  --pcl-typography-product-heading3-letter-spacing: 0px;
  --pcl-typography-product-heading3-line-height: 1.3333333333333333;
  --pcl-typography-product-heading4: var(--pcl-typography-product-heading4-font-weight) var(--pcl-typography-product-heading4-font-size)/var(--pcl-typography-product-heading4-line-height) var(--pcl-typography-product-heading4-font-family);
  --pcl-typography-product-heading4-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading4-font-size: 20px;
  --pcl-typography-product-heading4-font-weight: 400;
  --pcl-typography-product-heading4-letter-spacing: 0px;
  --pcl-typography-product-heading4-line-height: 1.3;
  --pcl-typography-product-heading5: var(--pcl-typography-product-heading5-font-weight) var(--pcl-typography-product-heading5-font-size)/var(--pcl-typography-product-heading5-line-height) var(--pcl-typography-product-heading5-font-family);
  --pcl-typography-product-heading5-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading5-font-size: 16px;
  --pcl-typography-product-heading5-font-weight: 500;
  --pcl-typography-product-heading5-letter-spacing: 0px;
  --pcl-typography-product-heading5-line-height: 1.375;
  --pcl-typography-product-heading6: var(--pcl-typography-product-heading6-font-weight) var(--pcl-typography-product-heading6-font-size)/var(--pcl-typography-product-heading6-line-height) var(--pcl-typography-product-heading6-font-family);
  --pcl-typography-product-heading6-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading6-font-size: 14px;
  --pcl-typography-product-heading6-font-weight: 600;
  --pcl-typography-product-heading6-letter-spacing: 0.12em;
  --pcl-typography-product-heading6-line-height: 1.1428571428571428;
  --pcl-typography-product-heading6-text-transform: uppercase;
  --pcl-typography-product-heading7: var(--pcl-typography-product-heading7-font-weight) var(--pcl-typography-product-heading7-font-size)/var(--pcl-typography-product-heading7-line-height) var(--pcl-typography-product-heading7-font-family);
  --pcl-typography-product-heading7-font-family: "Roboto", system-ui, ui-sans-serif, -apple-system, "Helvetica", "Arial", sans-serif;
  --pcl-typography-product-heading7-font-size: 12px;
  --pcl-typography-product-heading7-font-weight: 600;
  --pcl-typography-product-heading7-letter-spacing: 0.12em;
  --pcl-typography-product-heading7-line-height: 1.1666666666666667;
  --pcl-typography-product-heading7-text-transform: uppercase;
}

:root,
[data-color-mode="light"] {
  color-scheme: light;
  --pcl-ai-gradient-stop-1: #145deb;
  --pcl-ai-gradient-stop-2: #9043c6;
  --pcl-color-compat-border-muted: #8383a8;
  --pcl-color-compat-border-strong: #c3c2cb;
  --pcl-color-compat-border-subtle: #e4e3e8;
  --pcl-color-compat-button-accent-border: #7fa7f5;
  --pcl-color-compat-button-danger-hover: #b90020;
  --pcl-color-compat-button-selected-disabled-border: #b5ccfa;
  --pcl-color-compat-button-selected-disabled-text: #7fa7f5;
  --pcl-color-compat-chip-bg: #e4e3e8;
  --pcl-color-compat-danger-main-red-40: #d8082d;
  --pcl-color-compat-danger-main-red-50: #b90020;
  --pcl-color-compat-focus-bg: #eaf1ff;
  --pcl-color-compat-focused-border: #d3d3d9;
  --pcl-color-compat-focused-text: #727184;
  --pcl-color-compat-illustration-accent: #441c99;
  --pcl-color-compat-illustration-accent-alt: #b187e5;
  --pcl-color-compat-illustration-accent-error: #b90020;
  --pcl-color-compat-illustration-accent-error-alt: #f48fa2;
  --pcl-color-compat-illustration-gradient-end: #441c99;
  --pcl-color-compat-illustration-gradient-end-alt: #722dc8;
  --pcl-color-compat-illustration-gradient-mid: #e555ac;
  --pcl-color-compat-illustration-gradient-start: #f9c748;
  --pcl-color-compat-illustration-logo-fg: #fff;
  --pcl-color-compat-illustration-logo-fur-light: #fbb17f;
  --pcl-color-compat-illustration-logo-ink: #21214c;
  --pcl-color-compat-illustration-logo-plate: #e4e3e8;
  --pcl-color-compat-illustration-logo-shield-mid: #555463;
  --pcl-color-compat-info-bg-blue-05: #f4f8ff;
  --pcl-color-compat-info-border-blue-20: #b5ccfa;
  --pcl-color-compat-info-border-blue-30: #7fa7f5;
  --pcl-color-compat-info-main-blue-50: #0f47c6;
  --pcl-color-compat-nav-active-bg: #eaf1ff;
  --pcl-color-compat-resize-handle-grip: #fff;
  --pcl-color-compat-series-1-blue-30: #7fa7f5;
  --pcl-color-compat-series-1-blue-40: #145deb;
  --pcl-color-compat-series-1-brand-deep-sea: #0a26b8;
  --pcl-color-compat-series-1-brand-electric-blue: #145deb;
  --pcl-color-compat-series-1-brand-sky: #14c4eb;
  --pcl-color-compat-series-1-brand-vibe: #4bd6b5;
  --pcl-color-compat-series-2-brand-purple: #9043c6;
  --pcl-color-compat-series-2-purple-40: #9043c6;
  --pcl-color-compat-series-3-brand-bubblegum: #ff78e1;
  --pcl-color-compat-series-3-brand-hot-pink: #e555ac;
  --pcl-color-compat-series-4-red-40: #d8082d;
  --pcl-color-compat-series-5-brand-tiger: #f99048;
  --pcl-color-compat-series-5-orange-50: #e27122;
  --pcl-color-compat-series-6-brand-daffodil: #ffe792;
  --pcl-color-compat-series-7-brand-dark-teal: #168982;
  --pcl-color-compat-series-7-brand-teal: #43b59a;
  --pcl-color-compat-series-7-green-40: #43b59a;
  --pcl-color-compat-series-7-green-50: #2d9283;
  --pcl-color-compat-skeleton-base: #f2f1f4;
  --pcl-color-compat-skeleton-shimmer: #e4e3e8;
  --pcl-color-compat-status-error-icon: #b90020;
  --pcl-color-compat-success-main-green-40: #43b59a;
  --pcl-color-compat-success-main-green-50: #2d9283;
  --pcl-color-compat-surface-base: #fff;
  --pcl-color-compat-surface-inverse: #21214c;
  --pcl-color-compat-surface-raised: #f6f7fb;
  --pcl-color-compat-surface-skipped: #c3c2cb;
  --pcl-color-compat-surface-subtle: #f2f1f4;
  --pcl-color-compat-surface-white: #fff;
  --pcl-color-compat-text-muted: #a2a1af;
  --pcl-color-compat-toggle-track-bg: #e4e3e8;
  --pcl-color-compat-track-bg: #8383a8;
  --pcl-color-compat-ui-border-light-neutral-15: #ebeaee;
  --pcl-color-compat-ui-border-neutral-40: #c3c2cb;
  --pcl-color-compat-ui-dimmed-neutral-60: #a2a1af;
  --pcl-color-compat-ui-dimmed-neutral-70: #727184;
  --pcl-color-compat-ui-hover-neutral-20: #e4e3e8;
  --pcl-color-compat-warning-main-orange-50: #e27122;
  --pcl-color-critical-bg: #ffdad8;
  --pcl-color-critical-main: #ab1a1a;
  --pcl-color-danger-accent: #f48fa2;
  --pcl-color-danger-base: #d8082d;
  --pcl-color-danger-bg: #ffeef2;
  --pcl-color-danger-bg-alt: #fac0cb;
  --pcl-color-danger-border: #d8082d;
  --pcl-color-danger-main: #8f0018;
  --pcl-color-danger-text: #8f0018;
  --pcl-color-disabled-bg: #f2f1f4;
  --pcl-color-disabled-border: #c3c2cb;
  --pcl-color-disabled-read-only: #727184;
  --pcl-color-disabled-text: #b3b2bd;
  --pcl-color-high-bg: #ffdbcc;
  --pcl-color-high-main: #9b3d15;
  --pcl-color-info-base: #145deb;
  --pcl-color-info-bg: #eaf1ff;
  --pcl-color-info-bg-alt: #b5ccfa;
  --pcl-color-info-border: #145deb;
  --pcl-color-info-main: #145deb;
  --pcl-color-info-text: #0f47c6;
  --pcl-color-info-text-strong: #07238b;
  --pcl-color-input-bg: #fff;
  --pcl-color-input-border: #b3b2bd;
  --pcl-color-input-placeholder: #b3b2bd;
  --pcl-color-input-text: #555463;
  --pcl-color-low-bg: #eee;
  --pcl-color-low-main: #585675;
  --pcl-color-medium-bg: #ffe8cd;
  --pcl-color-medium-main: #925c1e;
  --pcl-color-neutral-00: #fff;
  --pcl-color-neutral-05: #f9f8fa;
  --pcl-color-neutral-10: #f2f1f4;
  --pcl-color-neutral-15: #ebeaee;
  --pcl-color-neutral-20: #e4e3e8;
  --pcl-color-neutral-30: #d3d3d9;
  --pcl-color-neutral-40: #c3c2cb;
  --pcl-color-neutral-50: #b3b2bd;
  --pcl-color-neutral-60: #a2a1af;
  --pcl-color-neutral-70: #727184;
  --pcl-color-neutral-80: #555463;
  --pcl-color-neutral-90: #1c1c21;
  --pcl-color-series-1-bg: #e9f5ff;
  --pcl-color-series-1-main: #0075b1;
  --pcl-color-series-2-main: #8d77ff;
  --pcl-color-series-3-bg: #feeefb;
  --pcl-color-series-3-main: #fa00e9;
  --pcl-color-series-4-main: #e20045;
  --pcl-color-series-5-main: #905000;
  --pcl-color-series-6-main: #958f00;
  --pcl-color-series-7-main: #006f36;
  --pcl-color-severity-critical-base: #ab1a1a;
  --pcl-color-severity-critical-bg: #ffdad8;
  --pcl-color-severity-critical-border: #ab1a1a;
  --pcl-color-severity-critical-text: #9e261e;
  --pcl-color-severity-high-base: #ce5019;
  --pcl-color-severity-high-bg: #ffdbcc;
  --pcl-color-severity-high-border: #ce5019;
  --pcl-color-severity-high-text: #9b3d15;
  --pcl-color-severity-low-base: #88879e;
  --pcl-color-severity-low-bg: #eee;
  --pcl-color-severity-low-border: #88879e;
  --pcl-color-severity-low-text: #585675;
  --pcl-color-severity-medium-base: #d68000;
  --pcl-color-severity-medium-bg: #ffe8cd;
  --pcl-color-severity-medium-border: #d68000;
  --pcl-color-severity-medium-text: #925c1e;
  --pcl-color-severity-none-base: #bebebe;
  --pcl-color-severity-none-bg: #e7e7e7;
  --pcl-color-severity-none-border: #bebebe;
  --pcl-color-severity-none-text: #828282;
  --pcl-color-state-disabled-bg: #f2f1f4;
  --pcl-color-state-disabled-border: #c3c2cb;
  --pcl-color-state-disabled-text: #b3b2bd;
  --pcl-color-state-readonly-text: #727184;
  --pcl-color-state-selected-bg: #f4f8ff;
  --pcl-color-state-selected-bg-alt: #b5ccfa;
  --pcl-color-state-selected-border: #145deb;
  --pcl-color-state-selected-text: #145deb;
  --pcl-color-success-base: #2d9283;
  --pcl-color-success-bg: #ecfcf8;
  --pcl-color-success-bg-alt: #b4e4d9;
  --pcl-color-success-border: #2d9283;
  --pcl-color-success-main: #16706b;
  --pcl-color-success-text: #16706b;
  --pcl-color-success-text-strong: #004d54;
  --pcl-color-ui-bg: #fff;
  --pcl-color-ui-body: #555463;
  --pcl-color-ui-border: #d3d3d9;
  --pcl-color-ui-border-light: #f2f1f4;
  --pcl-color-ui-canvas: #f9f8fa;
  --pcl-color-ui-dimmed: #717083;
  --pcl-color-ui-focus: #145deb;
  --pcl-color-ui-heading: #1c1c21;
  --pcl-color-ui-hover: #ebeaee;
  --pcl-color-ui-icon: #717083;
  --pcl-color-ui-link: #145deb;
  --pcl-color-ui-link-hover: #0f47c6;
  --pcl-color-ui-link-visited: #727184;
  --pcl-color-ui-nav-item-hover: #9c5cff;
  --pcl-color-ui-raised: #f2f1f4;
  --pcl-color-ui-selection: #ffe792;
  --pcl-color-ui-table-header-bg: #fcfcfd;
  --pcl-color-ui-track: #f2f1f4;
  --pcl-color-warn-base: #e27122;
  --pcl-color-warn-bg: #fff4ed;
  --pcl-color-warn-bg-alt: #fdd3b6;
  --pcl-color-warn-border: #e27122;
  --pcl-color-warn-icon: #f99048;
  --pcl-color-warn-text: #b6540b;
  --pcl-color-warn-text-strong: #954002;
  --pcl-color-warning-bg: #fff4ed;
  --pcl-color-warning-border: #fdd3b6;
  --pcl-color-warning-main: #b6540b;
  --pcl-critical-bg: #f6f0ff;
  /* decorative */
  --pcl-critical-border: #dec3ff;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-critical-main: #6a00a9;
  /* 4.5:1 on {intent}.main */
  --pcl-critical-on-main: #fff;
  --pcl-danger-bg: #fbe8e9;
  --pcl-danger-border: #f6d2d3;
  --pcl-danger-main: #d41c25;
  /* keeps on-main >=4.5:1 */
  --pcl-danger-main-hover: #c70022;
  /* 4.5:1 on {intent}.main */
  --pcl-danger-on-main: #fff;
  --pcl-disabled-bg: #f2f1f4;
  --pcl-disabled-border: #b3b2bd;
  --pcl-disabled-icon: #b3b2bd;
  /* 4.5:1 on disabled.bg (meaningful, not exempt) */
  --pcl-disabled-read-only: #717083;
  --pcl-disabled-text: #b3b2bd;
  --pcl-high-bg: #ffefee;
  /* decorative */
  --pcl-high-border: #ffbeb8;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-high-main: #b1001b;
  /* 4.5:1 on {intent}.main */
  --pcl-high-on-main: #fff;
  --pcl-info-bg: #e7effd;
  --pcl-info-border: #d0dffb;
  --pcl-info-main: #145fed;
  /* 4.5:1 on {intent}.main */
  --pcl-info-on-main: #fff;
  --pcl-input-bg: #fff;
  --pcl-input-border: #b3b2bd;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-input-on-primary: #fff;
  --pcl-input-placeholder: #b3b2bd;
  /* 3:1 on ui.raised; dark is hue-260 blue-grey */
  --pcl-input-primary: #1c1c21;
  --pcl-input-primary-button-bg: #1c1c21;
  --pcl-input-primary-button-icon: #fff;
  --pcl-input-primary-button-text: #fff;
  /* hover need not hold 3:1 */
  --pcl-input-primary-hover: #1e2228;
  --pcl-input-text: #1c1c21;
  --pcl-inverted-bg: #21214c;
  --pcl-inverted-dimmed: #d3d3d9;
  --pcl-inverted-icon: #d3d3d9;
  --pcl-inverted-text: #e4e4e7;
  --pcl-low-bg: #f8f2ec;
  /* decorative */
  --pcl-low-border: #e0ceb9;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-low-main: #7c6c59;
  /* 4.5:1 on {intent}.main */
  --pcl-low-on-main: #fff;
  --pcl-medium-bg: #fff1e3;
  /* decorative */
  --pcl-medium-border: #f9c691;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-medium-main: #945900;
  /* 4.5:1 on {intent}.main */
  --pcl-medium-on-main: #fff;
  /* #1C1C21 at 10% opacity */
  --pcl-overlay-bg: #1c1c211a;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-0-400: #6d6d71;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-401-500: #7f5a64;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-501-600: #924858;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-601-700: #a4364c;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-701-800: #b7243f;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-801-900: #c91233;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-901-1000: #dc0027;
  --pcl-series-1-bg: #e9f5ff;
  /* 3:1 on ui.canvas */
  --pcl-series-1-main: #0075b1;
  /* 4.5:1 on series.1.main */
  --pcl-series-1-on-main: #fff;
  --pcl-series-2-bg: #f2f2ff;
  /* 3:1 on ui.canvas */
  --pcl-series-2-main: #8d77ff;
  /* 4.5:1 on series.2.main */
  --pcl-series-2-on-main: #1c1c21;
  --pcl-series-3-bg: #feeefb;
  /* 3:1 on ui.canvas */
  --pcl-series-3-main: #fa00e9;
  /* 4.5:1 on series.3.main */
  --pcl-series-3-on-main: #1c1c21;
  --pcl-series-4-bg: #ffefef;
  /* 3:1 on ui.canvas */
  --pcl-series-4-main: #e20045;
  /* 4.5:1 on series.4.main */
  --pcl-series-4-on-main: #fff;
  --pcl-series-5-bg: #fff1e5;
  /* 3:1 on ui.canvas */
  --pcl-series-5-main: #905000;
  /* 4.5:1 on series.5.main */
  --pcl-series-5-on-main: #fff;
  --pcl-series-6-bg: #f5f5e2;
  /* 3:1 on ui.canvas */
  --pcl-series-6-main: #958f00;
  /* 4.5:1 on series.6.main */
  --pcl-series-6-on-main: #1c1c21;
  --pcl-series-7-bg: #e8f9eb;
  /* 3:1 on ui.canvas */
  --pcl-series-7-main: #006f36;
  /* 4.5:1 on series.7.main */
  --pcl-series-7-on-main: #fff;
  --pcl-series-8-bg: #e1f9f9;
  /* 3:1 on ui.canvas */
  --pcl-series-8-main: #009c9e;
  /* 4.5:1 on series.8.main */
  --pcl-series-8-on-main: #1c1c21;
  --pcl-severity-badge-text: #fff;
  --pcl-severity-badge-text-light: #1c1c21;
  --pcl-severity-critical: #7b296c;
  --pcl-severity-high: #ce3a19;
  --pcl-severity-low: #eee4ca;
  --pcl-severity-medium: #efcc99;
  --pcl-success-bg: #e9f2f1;
  --pcl-success-border: #d2e5e4;
  --pcl-success-main: #207f76;
  /* 4.5:1 on {intent}.main */
  --pcl-success-on-main: #fff;
  --pcl-tooltip-bg: #1c1c21;
  --pcl-tooltip-icon: #d3d3d9;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-tooltip-on-bg: #fff;
  --pcl-tooltip-text: #e4e4e7;
  --pcl-ui-bg: #fff;
  --pcl-ui-body: #333337;
  --pcl-ui-border: #d3d3d9;
  --pcl-ui-border-light: #f2f1f4;
  --pcl-ui-canvas: #f9f8fa;
  --pcl-ui-dimmed: #717083;
  --pcl-ui-focus: #145deb;
  --pcl-ui-heading: #1c1c21;
  --pcl-ui-hover: #eeedef;
  --pcl-ui-hover-dark: #4f4e5c;
  --pcl-ui-icon: #717083;
  --pcl-ui-link: #1c1c21;
  /* Inherits surrounding text colour (CSS 'inherit'); relies on underline alone. NB: 'inherit' is a CSS keyword, not a colour/reference. */
  --pcl-ui-link-subtle: #000;
  --pcl-ui-link-visited: #717083;
  --pcl-ui-raised: #f1f0f3;
  --pcl-ui-selected: #1c1c21;
  --pcl-ui-text: #1c1c21;
  --pcl-warning-bg: #fef3e5;
  --pcl-warning-border: #fde7cc;
  --pcl-warning-main: #a95d00;
  --pcl-warning-on-main: #fff;
}

[data-color-mode="new-light-mode"] {
  color-scheme: light;
  --pcl-ai-gradient-stop-1: #145deb;
  --pcl-ai-gradient-stop-2: #9043c6;
  --pcl-color-compat-border-muted: #8383a8;
  --pcl-color-compat-border-strong: #c3c2cb;
  --pcl-color-compat-border-subtle: #e4e3e8;
  --pcl-color-compat-button-accent-border: #7fa7f5;
  --pcl-color-compat-button-danger-hover: #b90020;
  --pcl-color-compat-button-selected-disabled-border: #b5ccfa;
  --pcl-color-compat-button-selected-disabled-text: #7fa7f5;
  --pcl-color-compat-chip-bg: #e4e3e8;
  --pcl-color-compat-danger-main-red-40: #dc0027;
  --pcl-color-compat-danger-main-red-50: #dc0027;
  --pcl-color-compat-focus-bg: #eaf1ff;
  --pcl-color-compat-focused-border: #d3d3d9;
  --pcl-color-compat-focused-text: #727184;
  --pcl-color-compat-illustration-accent: #441c99;
  --pcl-color-compat-illustration-accent-alt: #b187e5;
  --pcl-color-compat-illustration-accent-error: #b90020;
  --pcl-color-compat-illustration-accent-error-alt: #f48fa2;
  --pcl-color-compat-illustration-gradient-end: #441c99;
  --pcl-color-compat-illustration-gradient-end-alt: #722dc8;
  --pcl-color-compat-illustration-gradient-mid: #e555ac;
  --pcl-color-compat-illustration-gradient-start: #f9c748;
  --pcl-color-compat-illustration-logo-fg: #fff;
  --pcl-color-compat-illustration-logo-fur-light: #fbb17f;
  --pcl-color-compat-illustration-logo-ink: #21214c;
  --pcl-color-compat-illustration-logo-plate: #e4e3e8;
  --pcl-color-compat-illustration-logo-shield-mid: #555463;
  --pcl-color-compat-info-bg-blue-05: #edf5fc;
  --pcl-color-compat-info-border-blue-20: #d5e8f5;
  --pcl-color-compat-info-border-blue-30: #d5e8f5;
  --pcl-color-compat-info-main-blue-50: #0075b1;
  --pcl-color-compat-nav-active-bg: #eaf1ff;
  --pcl-color-compat-resize-handle-grip: #fff;
  --pcl-color-compat-series-1-blue-30: #0075b1;
  --pcl-color-compat-series-1-blue-40: #0075b1;
  --pcl-color-compat-series-1-brand-deep-sea: #0075b1;
  --pcl-color-compat-series-1-brand-electric-blue: #0075b1;
  --pcl-color-compat-series-1-brand-sky: #e9f5ff;
  --pcl-color-compat-series-1-brand-vibe: #0075b1;
  --pcl-color-compat-series-2-brand-purple: #8d77ff;
  --pcl-color-compat-series-2-purple-40: #8d77ff;
  --pcl-color-compat-series-3-brand-bubblegum: #feeefb;
  --pcl-color-compat-series-3-brand-hot-pink: #fa00e9;
  --pcl-color-compat-series-4-red-40: #e20045;
  --pcl-color-compat-series-5-brand-tiger: #905000;
  --pcl-color-compat-series-5-orange-50: #905000;
  --pcl-color-compat-series-6-brand-daffodil: #958f00;
  --pcl-color-compat-series-7-brand-dark-teal: #006f36;
  --pcl-color-compat-series-7-brand-teal: #006f36;
  --pcl-color-compat-series-7-green-40: #006f36;
  --pcl-color-compat-series-7-green-50: #006f36;
  --pcl-color-compat-skeleton-base: #f2f1f4;
  --pcl-color-compat-skeleton-shimmer: #e4e3e8;
  --pcl-color-compat-status-error-icon: #b90020;
  --pcl-color-compat-success-main-green-40: #007f00;
  --pcl-color-compat-success-main-green-50: #007f00;
  --pcl-color-compat-surface-base: #fff;
  --pcl-color-compat-surface-inverse: #21214c;
  --pcl-color-compat-surface-raised: #f6f7fb;
  --pcl-color-compat-surface-skipped: #c3c2cb;
  --pcl-color-compat-surface-subtle: #f2f1f4;
  --pcl-color-compat-surface-white: #fff;
  --pcl-color-compat-text-muted: #a2a1af;
  --pcl-color-compat-toggle-track-bg: #e4e3e8;
  --pcl-color-compat-track-bg: #8383a8;
  --pcl-color-compat-ui-border-light-neutral-15: #f2f1f4;
  --pcl-color-compat-ui-border-neutral-40: #d3d3d9;
  --pcl-color-compat-ui-dimmed-neutral-60: #6d6d71;
  --pcl-color-compat-ui-dimmed-neutral-70: #6d6d71;
  --pcl-color-compat-ui-hover-neutral-20: #e7e6ea;
  --pcl-color-compat-warning-main-orange-50: #ad5200;
  --pcl-color-critical-bg: #f6f0ff;
  --pcl-color-critical-main: #6a00a9;
  --pcl-color-danger-accent: #f48fa2;
  --pcl-color-danger-base: #d8082d;
  --pcl-color-danger-bg: #feeef0;
  --pcl-color-danger-bg-alt: #fac0cb;
  --pcl-color-danger-border: #fedde1;
  --pcl-color-danger-main: #dc0027;
  --pcl-color-danger-text: #8f0018;
  --pcl-color-disabled-bg: #faf9fb;
  --pcl-color-disabled-border: #dedddf;
  --pcl-color-disabled-read-only: #6d6d71;
  --pcl-color-disabled-text: #dedddf;
  --pcl-color-high-bg: #ffefee;
  --pcl-color-high-main: #b1001b;
  --pcl-color-info-base: #145deb;
  --pcl-color-info-bg: #edf5fc;
  --pcl-color-info-bg-alt: #b5ccfa;
  --pcl-color-info-border: #d5e8f5;
  --pcl-color-info-main: #0075b1;
  --pcl-color-info-text: #0f47c6;
  --pcl-color-info-text-strong: #07238b;
  --pcl-color-input-bg: #fff;
  --pcl-color-input-border: #8e9196;
  --pcl-color-input-placeholder: #6d6d71;
  --pcl-color-input-text: #1c1c21;
  --pcl-color-low-bg: #f8f2ec;
  --pcl-color-low-main: #7c6c59;
  --pcl-color-medium-bg: #fff1e3;
  --pcl-color-medium-main: #945900;
  --pcl-color-neutral-00: #fff;
  --pcl-color-neutral-05: #f9f8fa;
  --pcl-color-neutral-10: #f2f1f4;
  --pcl-color-neutral-15: #ebeaee;
  --pcl-color-neutral-20: #e4e3e8;
  --pcl-color-neutral-30: #d3d3d9;
  --pcl-color-neutral-40: #c3c2cb;
  --pcl-color-neutral-50: #b3b2bd;
  --pcl-color-neutral-60: #a2a1af;
  --pcl-color-neutral-70: #727184;
  --pcl-color-neutral-80: #555463;
  --pcl-color-neutral-90: #1c1c21;
  --pcl-color-series-1-bg: #e9f5ff;
  --pcl-color-series-1-main: #0075b1;
  --pcl-color-series-2-main: #8d77ff;
  --pcl-color-series-3-bg: #feeefb;
  --pcl-color-series-3-main: #fa00e9;
  --pcl-color-series-4-main: #e20045;
  --pcl-color-series-5-main: #905000;
  --pcl-color-series-6-main: #958f00;
  --pcl-color-series-7-main: #006f36;
  --pcl-color-severity-critical-base: #ab1a1a;
  --pcl-color-severity-critical-bg: #ffdad8;
  --pcl-color-severity-critical-border: #ab1a1a;
  --pcl-color-severity-critical-text: #9e261e;
  --pcl-color-severity-high-base: #ce5019;
  --pcl-color-severity-high-bg: #ffdbcc;
  --pcl-color-severity-high-border: #ce5019;
  --pcl-color-severity-high-text: #9b3d15;
  --pcl-color-severity-low-base: #88879e;
  --pcl-color-severity-low-bg: #eee;
  --pcl-color-severity-low-border: #88879e;
  --pcl-color-severity-low-text: #585675;
  --pcl-color-severity-medium-base: #d68000;
  --pcl-color-severity-medium-bg: #ffe8cd;
  --pcl-color-severity-medium-border: #d68000;
  --pcl-color-severity-medium-text: #925c1e;
  --pcl-color-severity-none-base: #bebebe;
  --pcl-color-severity-none-bg: #e7e7e7;
  --pcl-color-severity-none-border: #bebebe;
  --pcl-color-severity-none-text: #828282;
  --pcl-color-state-disabled-bg: #f2f1f4;
  --pcl-color-state-disabled-border: #c3c2cb;
  --pcl-color-state-disabled-text: #b3b2bd;
  --pcl-color-state-readonly-text: #727184;
  --pcl-color-state-selected-bg: #f4f8ff;
  --pcl-color-state-selected-bg-alt: #b5ccfa;
  --pcl-color-state-selected-border: #145deb;
  --pcl-color-state-selected-text: #145deb;
  --pcl-color-success-base: #2d9283;
  --pcl-color-success-bg: #eaf5ef;
  --pcl-color-success-bg-alt: #b4e4d9;
  --pcl-color-success-border: #d7f0e2;
  --pcl-color-success-main: #007f00;
  --pcl-color-success-text: #16706b;
  --pcl-color-success-text-strong: #004d54;
  --pcl-color-ui-bg: #fff;
  --pcl-color-ui-body: #333337;
  --pcl-color-ui-border: #d3d3d9;
  --pcl-color-ui-border-light: #f2f1f4;
  --pcl-color-ui-canvas: #faf9fb;
  --pcl-color-ui-dimmed: #6d6d71;
  --pcl-color-ui-focus: #0075b1;
  --pcl-color-ui-heading: #1c1c21;
  --pcl-color-ui-hover: #e7e6ea;
  --pcl-color-ui-icon: #6d6d71;
  --pcl-color-ui-link: #1c1c21;
  --pcl-color-ui-link-hover: #0f47c6;
  --pcl-color-ui-link-visited: #6d6d71;
  --pcl-color-ui-nav-item-hover: #9c5cff;
  --pcl-color-ui-raised: #f1f0f3;
  --pcl-color-ui-selection: #ffe792;
  --pcl-color-ui-table-header-bg: #fcfcfd;
  --pcl-color-ui-track: #f2f1f4;
  --pcl-color-warn-base: #e27122;
  --pcl-color-warn-bg: #fff4ed;
  --pcl-color-warn-bg-alt: #fdd3b6;
  --pcl-color-warn-border: #e27122;
  --pcl-color-warn-icon: #f99048;
  --pcl-color-warn-text: #b6540b;
  --pcl-color-warn-text-strong: #954002;
  --pcl-color-warning-bg: #faf3ea;
  --pcl-color-warning-border: #fae9cf;
  --pcl-color-warning-main: #ad5200;
  --pcl-critical-bg: #f6f0ff;
  /* decorative */
  --pcl-critical-border: #dec3ff;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-critical-main: #6a00a9;
  /* 4.5:1 on {intent}.main */
  --pcl-critical-on-main: #fff;
  --pcl-danger-bg: #feeef0;
  --pcl-danger-border: #fedde1;
  --pcl-danger-main: #dc0027;
  /* keeps on-main >=4.5:1 */
  --pcl-danger-main-hover: #c70022;
  /* 4.5:1 on {intent}.main */
  --pcl-danger-on-main: #fff;
  --pcl-disabled-bg: #faf9fb;
  --pcl-disabled-border: #dedddf;
  --pcl-disabled-icon: #dedddf;
  /* 4.5:1 on disabled.bg (meaningful, not exempt) */
  --pcl-disabled-read-only: #6d6d71;
  --pcl-disabled-text: #dedddf;
  --pcl-high-bg: #ffefee;
  /* decorative */
  --pcl-high-border: #ffbeb8;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-high-main: #b1001b;
  /* 4.5:1 on {intent}.main */
  --pcl-high-on-main: #fff;
  --pcl-info-bg: #edf5fc;
  --pcl-info-border: #d5e8f5;
  --pcl-info-main: #0075b1;
  /* 4.5:1 on {intent}.main */
  --pcl-info-on-main: #fff;
  --pcl-input-bg: #fff;
  --pcl-input-border: #8e9196;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-input-on-primary: #fff;
  --pcl-input-placeholder: #6d6d71;
  /* 3:1 on ui.raised; dark is hue-260 blue-grey */
  --pcl-input-primary: #1c1c21;
  --pcl-input-primary-button-bg: #1c1c21;
  --pcl-input-primary-button-icon: #fff;
  --pcl-input-primary-button-text: #fff;
  /* hover need not hold 3:1 */
  --pcl-input-primary-hover: #1e2228;
  --pcl-input-text: #1c1c21;
  --pcl-inverted-bg: #21214c;
  --pcl-inverted-dimmed: #d3d3d9;
  --pcl-inverted-icon: #d3d3d9;
  --pcl-inverted-text: #e4e4e7;
  --pcl-low-bg: #f8f2ec;
  /* decorative */
  --pcl-low-border: #e0ceb9;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-low-main: #7c6c59;
  /* 4.5:1 on {intent}.main */
  --pcl-low-on-main: #fff;
  --pcl-medium-bg: #fff1e3;
  /* decorative */
  --pcl-medium-border: #f9c691;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-medium-main: #945900;
  /* 4.5:1 on {intent}.main */
  --pcl-medium-on-main: #fff;
  /* #1C1C21 at 10% opacity */
  --pcl-overlay-bg: #1c1c211a;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-0-400: #6d6d71;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-401-500: #7f5a64;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-501-600: #924858;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-601-700: #a4364c;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-701-800: #b7243f;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-801-900: #c91233;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-901-1000: #dc0027;
  --pcl-series-1-bg: #e9f5ff;
  /* 3:1 on ui.canvas */
  --pcl-series-1-main: #0075b1;
  /* 4.5:1 on series.1.main */
  --pcl-series-1-on-main: #fff;
  --pcl-series-2-bg: #f2f2ff;
  /* 3:1 on ui.canvas */
  --pcl-series-2-main: #8d77ff;
  /* 4.5:1 on series.2.main */
  --pcl-series-2-on-main: #1c1c21;
  --pcl-series-3-bg: #feeefb;
  /* 3:1 on ui.canvas */
  --pcl-series-3-main: #fa00e9;
  /* 4.5:1 on series.3.main */
  --pcl-series-3-on-main: #1c1c21;
  --pcl-series-4-bg: #ffefef;
  /* 3:1 on ui.canvas */
  --pcl-series-4-main: #e20045;
  /* 4.5:1 on series.4.main */
  --pcl-series-4-on-main: #fff;
  --pcl-series-5-bg: #fff1e5;
  /* 3:1 on ui.canvas */
  --pcl-series-5-main: #905000;
  /* 4.5:1 on series.5.main */
  --pcl-series-5-on-main: #fff;
  --pcl-series-6-bg: #f5f5e2;
  /* 3:1 on ui.canvas */
  --pcl-series-6-main: #958f00;
  /* 4.5:1 on series.6.main */
  --pcl-series-6-on-main: #1c1c21;
  --pcl-series-7-bg: #e8f9eb;
  /* 3:1 on ui.canvas */
  --pcl-series-7-main: #006f36;
  /* 4.5:1 on series.7.main */
  --pcl-series-7-on-main: #fff;
  --pcl-series-8-bg: #e1f9f9;
  /* 3:1 on ui.canvas */
  --pcl-series-8-main: #009c9e;
  /* 4.5:1 on series.8.main */
  --pcl-series-8-on-main: #1c1c21;
  --pcl-severity-badge-text: #fff;
  --pcl-severity-badge-text-light: #1c1c21;
  --pcl-severity-critical: #7b296c;
  --pcl-severity-high: #ce3a19;
  --pcl-severity-low: #eee4ca;
  --pcl-severity-medium: #efcc99;
  --pcl-success-bg: #eaf5ef;
  --pcl-success-border: #d7f0e2;
  --pcl-success-main: #007f00;
  /* 4.5:1 on {intent}.main */
  --pcl-success-on-main: #fff;
  --pcl-tooltip-bg: #1c1c21;
  --pcl-tooltip-icon: #d3d3d9;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-tooltip-on-bg: #fff;
  --pcl-tooltip-text: #e4e4e7;
  --pcl-ui-bg: #fff;
  --pcl-ui-body: #333337;
  --pcl-ui-border: #d3d3d9;
  --pcl-ui-border-light: #f2f1f4;
  --pcl-ui-canvas: #faf9fb;
  --pcl-ui-dimmed: #6d6d71;
  --pcl-ui-focus: #0075b1;
  --pcl-ui-heading: #1c1c21;
  --pcl-ui-hover: #e7e6ea;
  --pcl-ui-hover-dark: #4f4e5c;
  --pcl-ui-icon: #6d6d71;
  --pcl-ui-link: #1c1c21;
  /* Inherits surrounding text colour (CSS 'inherit'); relies on underline alone. NB: 'inherit' is a CSS keyword, not a colour/reference. */
  --pcl-ui-link-subtle: #000;
  --pcl-ui-link-visited: #6d6d71;
  --pcl-ui-raised: #f1f0f3;
  --pcl-ui-selected: #1c1c21;
  --pcl-ui-text: #1c1c21;
  --pcl-warning-bg: #faf3ea;
  --pcl-warning-border: #fae9cf;
  --pcl-warning-main: #ad5200;
  --pcl-warning-on-main: #fff;
}

[data-color-mode="dark"] {
  color-scheme: dark;
  --pcl-ai-gradient-stop-1: #4bd6b5;
  --pcl-ai-gradient-stop-2: #145deb;
  --pcl-color-compat-border-muted: #8383a8;
  --pcl-color-compat-border-strong: #a2a1af;
  --pcl-color-compat-border-subtle: #555463;
  --pcl-color-compat-button-accent-border: #7fa7f5;
  --pcl-color-compat-button-danger-hover: #b90020;
  --pcl-color-compat-button-selected-disabled-border: #b5ccfa;
  --pcl-color-compat-button-selected-disabled-text: #7fa7f5;
  --pcl-color-compat-chip-bg: #555463;
  --pcl-color-compat-danger-main-red-40: #ff4958;
  --pcl-color-compat-danger-main-red-50: #ff4958;
  --pcl-color-compat-focus-bg: #eaf1ff;
  --pcl-color-compat-focused-border: #727184;
  --pcl-color-compat-focused-text: #d3d3d9;
  --pcl-color-compat-illustration-accent: #441c99;
  --pcl-color-compat-illustration-accent-alt: #b187e5;
  --pcl-color-compat-illustration-accent-error: #b90020;
  --pcl-color-compat-illustration-accent-error-alt: #f48fa2;
  --pcl-color-compat-illustration-gradient-end: #441c99;
  --pcl-color-compat-illustration-gradient-end-alt: #722dc8;
  --pcl-color-compat-illustration-gradient-mid: #e555ac;
  --pcl-color-compat-illustration-gradient-start: #f9c748;
  --pcl-color-compat-illustration-logo-fg: #fff;
  --pcl-color-compat-illustration-logo-fur-light: #fbb17f;
  --pcl-color-compat-illustration-logo-ink: #21214c;
  --pcl-color-compat-illustration-logo-plate: #555463;
  --pcl-color-compat-illustration-logo-shield-mid: #555463;
  --pcl-color-compat-info-bg-blue-05: #061f31;
  --pcl-color-compat-info-border-blue-20: #052d46;
  --pcl-color-compat-info-border-blue-30: #052d46;
  --pcl-color-compat-info-main-blue-50: #00abff;
  --pcl-color-compat-nav-active-bg: #eaf1ff;
  --pcl-color-compat-resize-handle-grip: #0c0c0e;
  --pcl-color-compat-series-1-blue-30: #00abff;
  --pcl-color-compat-series-1-blue-40: #00abff;
  --pcl-color-compat-series-1-brand-deep-sea: #00abff;
  --pcl-color-compat-series-1-brand-electric-blue: #00abff;
  --pcl-color-compat-series-1-brand-sky: #000812;
  --pcl-color-compat-series-1-brand-vibe: #00abff;
  --pcl-color-compat-series-2-brand-purple: #6f2cff;
  --pcl-color-compat-series-2-purple-40: #6f2cff;
  --pcl-color-compat-series-3-brand-bubblegum: #0f030d;
  --pcl-color-compat-series-3-brand-hot-pink: #b300a7;
  --pcl-color-compat-series-4-red-40: #c7003c;
  --pcl-color-compat-series-5-brand-tiger: #b86900;
  --pcl-color-compat-series-5-orange-50: #b86900;
  --pcl-color-compat-series-6-brand-daffodil: #a29c00;
  --pcl-color-compat-series-7-brand-dark-teal: #00b05a;
  --pcl-color-compat-series-7-brand-teal: #00b05a;
  --pcl-color-compat-series-7-green-40: #00b05a;
  --pcl-color-compat-series-7-green-50: #00b05a;
  --pcl-color-compat-skeleton-base: #1c1c21;
  --pcl-color-compat-skeleton-shimmer: #555463;
  --pcl-color-compat-status-error-icon: #b90020;
  --pcl-color-compat-success-main-green-40: #00b24b;
  --pcl-color-compat-success-main-green-50: #00b24b;
  --pcl-color-compat-surface-base: #0c0c0e;
  --pcl-color-compat-surface-inverse: #21214c;
  --pcl-color-compat-surface-raised: #f6f7fb;
  --pcl-color-compat-surface-skipped: #a2a1af;
  --pcl-color-compat-surface-subtle: #1c1c21;
  --pcl-color-compat-surface-white: #fff;
  --pcl-color-compat-text-muted: #c3c2cb;
  --pcl-color-compat-toggle-track-bg: #555463;
  --pcl-color-compat-track-bg: #8383a8;
  --pcl-color-compat-ui-border-light-neutral-15: #1e2227;
  --pcl-color-compat-ui-border-neutral-40: #2e3137;
  --pcl-color-compat-ui-dimmed-neutral-60: #8e8e94;
  --pcl-color-compat-ui-dimmed-neutral-70: #8e8e94;
  --pcl-color-compat-ui-hover-neutral-20: #1e2228;
  --pcl-color-compat-warning-main-orange-50: #f89d00;
  --pcl-color-critical-bg: #0c0217;
  --pcl-color-critical-main: #c082ff;
  --pcl-color-danger-accent: #f48fa2;
  --pcl-color-danger-base: #ff4958;
  --pcl-color-danger-bg: #210c10;
  --pcl-color-danger-bg-alt: #371217;
  --pcl-color-danger-border: #371217;
  --pcl-color-danger-main: #ff4958;
  --pcl-color-danger-text: #ff4958;
  --pcl-color-disabled-bg: #0f1218;
  --pcl-color-disabled-border: #282b31;
  --pcl-color-disabled-read-only: #8e8e94;
  --pcl-color-disabled-text: #282b31;
  --pcl-color-high-bg: #170001;
  --pcl-color-high-main: #ff635f;
  --pcl-color-info-base: #00abff;
  --pcl-color-info-bg: #061f31;
  --pcl-color-info-bg-alt: #052d46;
  --pcl-color-info-border: #052d46;
  --pcl-color-info-main: #00abff;
  --pcl-color-info-text: #00abff;
  --pcl-color-info-text-strong: #07238b;
  --pcl-color-input-bg: #010204;
  --pcl-color-input-border: #5c6167;
  --pcl-color-input-placeholder: #8e8e94;
  --pcl-color-input-text: #e4e4e7;
  --pcl-color-low-bg: #0a0704;
  --pcl-color-low-main: #bea68d;
  --pcl-color-medium-bg: #0f0500;
  --pcl-color-medium-main: #e58d00;
  --pcl-color-neutral-00: #0c0c0e;
  --pcl-color-neutral-05: #161618;
  --pcl-color-neutral-10: #1c1c21;
  --pcl-color-neutral-15: #393842;
  --pcl-color-neutral-20: #555463;
  --pcl-color-neutral-30: #727184;
  --pcl-color-neutral-40: #a2a1af;
  --pcl-color-neutral-50: #b3b2bd;
  --pcl-color-neutral-60: #c3c2cb;
  --pcl-color-neutral-70: #d3d3d9;
  --pcl-color-neutral-80: #e4e3e8;
  --pcl-color-neutral-90: #f2f1f4;
  --pcl-color-series-1-bg: #000812;
  --pcl-color-series-1-main: #00abff;
  --pcl-color-series-2-main: #6f2cff;
  --pcl-color-series-3-bg: #0f030d;
  --pcl-color-series-3-main: #b300a7;
  --pcl-color-series-4-main: #c7003c;
  --pcl-color-series-5-main: #b86900;
  --pcl-color-series-6-main: #a29c00;
  --pcl-color-series-7-main: #00b05a;
  --pcl-color-severity-critical-base: #c082ff;
  --pcl-color-severity-critical-bg: #0c0217;
  --pcl-color-severity-critical-border: #1a0b29;
  --pcl-color-severity-critical-text: #c082ff;
  --pcl-color-severity-high-base: #ff635f;
  --pcl-color-severity-high-bg: #170001;
  --pcl-color-severity-high-border: #290606;
  --pcl-color-severity-high-text: #ff635f;
  --pcl-color-severity-low-base: #bea68d;
  --pcl-color-severity-low-bg: #0a0704;
  --pcl-color-severity-low-border: #19120b;
  --pcl-color-severity-low-text: #bea68d;
  --pcl-color-severity-medium-base: #e58d00;
  --pcl-color-severity-medium-bg: #0f0500;
  --pcl-color-severity-medium-border: #200f00;
  --pcl-color-severity-medium-text: #e58d00;
  --pcl-color-severity-none-base: #bebebe;
  --pcl-color-severity-none-bg: #e7e7e7;
  --pcl-color-severity-none-border: #bebebe;
  --pcl-color-severity-none-text: #828282;
  --pcl-color-state-disabled-bg: #1c1c21;
  --pcl-color-state-disabled-border: #a2a1af;
  --pcl-color-state-disabled-text: #b3b2bd;
  --pcl-color-state-readonly-text: #d3d3d9;
  --pcl-color-state-selected-bg: #07238b;
  --pcl-color-state-selected-bg-alt: #000052;
  --pcl-color-state-selected-border: #0f47c6;
  --pcl-color-state-selected-text: #b5ccfa;
  --pcl-color-success-base: #00b24b;
  --pcl-color-success-bg: #06201b;
  --pcl-color-success-bg-alt: #052f20;
  --pcl-color-success-border: #052f20;
  --pcl-color-success-main: #00b24b;
  --pcl-color-success-text: #00b24b;
  --pcl-color-success-text-strong: #004d54;
  --pcl-color-ui-bg: #010204;
  --pcl-color-ui-body: #e4e3e8;
  --pcl-color-ui-border: #2e3137;
  --pcl-color-ui-border-light: #1e2227;
  --pcl-color-ui-canvas: #0f1218;
  --pcl-color-ui-dimmed: #8e8e94;
  --pcl-color-ui-focus: #00abff;
  --pcl-color-ui-heading: #f2f1f4;
  --pcl-color-ui-hover: #1e2228;
  --pcl-color-ui-icon: #8e8e94;
  --pcl-color-ui-link: #145deb;
  --pcl-color-ui-link-hover: #0f47c6;
  --pcl-color-ui-link-visited: #d3d3d9;
  --pcl-color-ui-nav-item-hover: #9c5cff;
  --pcl-color-ui-raised: #15181e;
  --pcl-color-ui-selection: #ffe792;
  --pcl-color-ui-table-header-bg: #131316;
  --pcl-color-ui-track: #1c1c21;
  --pcl-color-warn-base: #f89d00;
  --pcl-color-warn-bg: #241d1a;
  --pcl-color-warn-bg-alt: #392a17;
  --pcl-color-warn-border: #392a17;
  --pcl-color-warn-icon: #f99048;
  --pcl-color-warn-text: #f89d00;
  --pcl-color-warn-text-strong: #954002;
  --pcl-color-warning-bg: #241d1a;
  --pcl-color-warning-border: #392a17;
  --pcl-color-warning-main: #f89d00;
  --pcl-critical-bg: #0c0217;
  /* decorative */
  --pcl-critical-border: #1a0b29;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-critical-main: #c082ff;
  /* 4.5:1 on {intent}.main */
  --pcl-critical-on-main: #010204;
  --pcl-danger-bg: #210c10;
  --pcl-danger-border: #371217;
  --pcl-danger-main: #ff4958;
  /* keeps on-main >=4.5:1 */
  --pcl-danger-main-hover: #ff6a6f;
  /* 4.5:1 on {intent}.main */
  --pcl-danger-on-main: #010204;
  --pcl-disabled-bg: #0f1218;
  --pcl-disabled-border: #282b31;
  --pcl-disabled-icon: #282b31;
  /* 4.5:1 on disabled.bg (meaningful, not exempt) */
  --pcl-disabled-read-only: #8e8e94;
  --pcl-disabled-text: #282b31;
  --pcl-high-bg: #170001;
  /* decorative */
  --pcl-high-border: #290606;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-high-main: #ff635f;
  /* 4.5:1 on {intent}.main */
  --pcl-high-on-main: #010204;
  --pcl-info-bg: #061f31;
  --pcl-info-border: #052d46;
  --pcl-info-main: #00abff;
  /* 4.5:1 on {intent}.main */
  --pcl-info-on-main: #010204;
  --pcl-input-bg: #010204;
  --pcl-input-border: #5c6167;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-input-on-primary: #e7e7e8;
  --pcl-input-placeholder: #8e8e94;
  /* 3:1 on ui.raised; dark is hue-260 blue-grey */
  --pcl-input-primary: #5e6571;
  --pcl-input-primary-button-bg: #3e3e47;
  --pcl-input-primary-button-icon: #ddddde;
  --pcl-input-primary-button-text: #e7e7e8;
  /* hover need not hold 3:1 */
  --pcl-input-primary-hover: #525864;
  --pcl-input-text: #e4e4e7;
  --pcl-inverted-bg: #21214c;
  --pcl-inverted-dimmed: #4f4e5c;
  --pcl-inverted-icon: #4f4e5c;
  --pcl-inverted-text: #1c1c21;
  --pcl-low-bg: #0a0704;
  /* decorative */
  --pcl-low-border: #19120b;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-low-main: #bea68d;
  /* 4.5:1 on {intent}.main */
  --pcl-low-on-main: #010204;
  --pcl-medium-bg: #0f0500;
  /* decorative */
  --pcl-medium-border: #200f00;
  /* 4.5:1 on {intent}.bg AND ui.canvas */
  --pcl-medium-main: #e58d00;
  /* 4.5:1 on {intent}.main */
  --pcl-medium-on-main: #010204;
  /* #1C1C21 at 10% opacity */
  --pcl-overlay-bg: #e4e4e71a;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-0-400: #8e8e94;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-401-500: #a0828a;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-501-600: #b37780;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-601-700: #c66b76;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-701-800: #d9606c;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-801-900: #ec5462;
  /* 4.5:1 on ui.canvas and ui.raised */
  --pcl-risk-901-1000: #ff4958;
  --pcl-series-1-bg: #000812;
  /* 3:1 on ui.canvas */
  --pcl-series-1-main: #00abff;
  /* 4.5:1 on series.1.main */
  --pcl-series-1-on-main: #010204;
  --pcl-series-2-bg: #070514;
  /* 3:1 on ui.canvas */
  --pcl-series-2-main: #6f2cff;
  /* 4.5:1 on series.2.main */
  --pcl-series-2-on-main: #e4e4e7;
  --pcl-series-3-bg: #0f030d;
  /* 3:1 on ui.canvas */
  --pcl-series-3-main: #b300a7;
  /* 4.5:1 on series.3.main */
  --pcl-series-3-on-main: #e4e4e7;
  --pcl-series-4-bg: #130304;
  /* 3:1 on ui.canvas */
  --pcl-series-4-main: #c7003c;
  /* 4.5:1 on series.4.main */
  --pcl-series-4-on-main: #e4e4e7;
  --pcl-series-5-bg: #0f0500;
  /* 3:1 on ui.canvas */
  --pcl-series-5-main: #b86900;
  /* 4.5:1 on series.5.main */
  --pcl-series-5-on-main: #010204;
  --pcl-series-6-bg: #080800;
  /* 3:1 on ui.canvas */
  --pcl-series-6-main: #a29c00;
  /* 4.5:1 on series.6.main */
  --pcl-series-6-on-main: #010204;
  --pcl-series-7-bg: #000b03;
  /* 3:1 on ui.canvas */
  --pcl-series-7-main: #00b05a;
  /* 4.5:1 on series.7.main */
  --pcl-series-7-on-main: #010204;
  --pcl-series-8-bg: #000a0a;
  /* 3:1 on ui.canvas */
  --pcl-series-8-main: #008b8d;
  /* 4.5:1 on series.8.main */
  --pcl-series-8-on-main: #010204;
  --pcl-severity-badge-text: #e6e6e7;
  --pcl-severity-badge-text-light: #1c1c21;
  --pcl-severity-critical: #bb3ca5;
  --pcl-severity-high: #d64221;
  --pcl-severity-low: #8d8369;
  --pcl-severity-medium: #a17e4b;
  --pcl-success-bg: #06201b;
  --pcl-success-border: #052f20;
  --pcl-success-main: #00b24b;
  /* 4.5:1 on {intent}.main */
  --pcl-success-on-main: #010204;
  --pcl-tooltip-bg: #5e6571;
  --pcl-tooltip-icon: #d3d3d9;
  /* 4.5:1 on input.primary + input.primary-hover */
  --pcl-tooltip-on-bg: #e7e7e8;
  --pcl-tooltip-text: #e4e4e7;
  --pcl-ui-bg: #010204;
  --pcl-ui-body: #cccfd3;
  --pcl-ui-border: #2e3137;
  --pcl-ui-border-light: #1e2227;
  --pcl-ui-canvas: #0f1218;
  --pcl-ui-dimmed: #8e8e94;
  --pcl-ui-focus: #00abff;
  --pcl-ui-heading: #e4e4e7;
  --pcl-ui-hover: #1e2228;
  --pcl-ui-hover-dark: #949395;
  --pcl-ui-icon: #8e8e94;
  --pcl-ui-link: #e4e4e7;
  /* Inherits surrounding text colour (CSS 'inherit'); relies on underline alone. NB: 'inherit' is a CSS keyword, not a colour/reference. */
  --pcl-ui-link-subtle: #000;
  --pcl-ui-link-visited: #8e8e94;
  --pcl-ui-raised: #15181e;
  --pcl-ui-selected: #e4e4e7;
  --pcl-ui-text: #e4e4e7;
  --pcl-warning-bg: #241d1a;
  --pcl-warning-border: #392a17;
  --pcl-warning-main: #f89d00;
  --pcl-warning-on-main: #010204;
}