/* Choco 14.2.0  479c138 */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Ubuntu+Mono&display=swap');

*, *:after, *:before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  min-height: 0;
  min-width: 0;
}

li, summary {
  list-style: none;
}

:is(li, summary)::-webkit-details-marker {
  display:none;
}

fieldset,
dialog {
  border: none;
}

abbr {
  text-decoration: none;
}

fieldset > legend {
  visibility: hidden;
  pointer-events: none;
  font-size: 0;
}

h1, h2, h3, h4, h5, h6, input, select, button, textarea, table {
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

input, select, button, textarea {
  border: none;
  background: none;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

label,
summary,
button {
  cursor: pointer;
  line-height: 1;
}

[hidden] {
  display: none!important;
  visibility: hidden!important;
}

input[type="search"]::-webkit-clear-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

svg {
  display: block;
}

.Microlayout-flex-h {
  display: inline-flex;
  align-items: center;
  gap: var(--style-gap-xl);
}

.Microlayout-flex-v {
  display: flex;
  align-items: flex-start;
  gap: var(--style-gap-xl);
  flex-direction: column;
}

.Microlayout-align-v {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

/**
 * FIXME: !important usage is a stop-gap fix.
 * Need to figure out a solution that works for any element, even those using
 * compound selectors.
 */

@media screen and (min-width: 961px) {
  .Mq-hide-tablet {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (min-width: 1025px) {
  .Mq-hide-small {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (min-width: 1281px) {
  .Mq-hide-desktop {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (min-width: 1441px){
  .Mq-hide-ultrawide {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (max-width: 960px) {
  .Mq-show-tablet {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (max-width: 1024px) {
  .Mq-show-small {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (max-width: 1280px) {
  .Mq-show-desktop {
    display: none!important;
    visibility: hidden!important;
  }
}

@media screen and (max-width: 1440px) {
  .Mq-show-ultrawide {
    display: none!important;
    visibility: hidden!important;
  }
}

cm-auto-nightmode {
  position: relative
}

cm-inline-svg {
  flex: none;
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.Switch-label {
  display: inline-flex;
  line-height: 1;
  align-items: center;
  gap: var(--style-gap-s);
  max-width: max-content;
}

.Switch-icon-partial,
.Switch-icon-on {
  color: var(--color-border-attn-default);
}

.Switch-icon-off {
  color: var(--color-border-default);
}

.Switch-icons {
  display: inline-block;
  line-height: 1;
  border-radius: var(--style-corner-default);
}

.Switch-label:hover input:not([disabled], :disabled) + .Switch-icons > *,
input:not([disabled], :disabled) + .Switch-icons > *:hover,
input:checked:not([disabled], :disabled) + .Switch-icons > *,
body:not([data-pointer]) :is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input:not([disabled], :disabled):focus + .Switch-icons > * {
  color: var(--color-border-attn-default);
}

.Switch-label:active input:not([disabled], :disabled) + .Switch-icons > *,
input:not([disabled], :disabled) + .Switch-icons > *:active {
  color: var(--color-border-pressed-alternate);
}

body:not([data-pointer]) :is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input:not([disabled], :disabled):focus + .Switch-icons {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input[disabled] + .Switch-icons > * {
  color: var(--color-border-muted);
  cursor: not-allowed;
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input[disabled] + .Switch-icons .Color-icon-svg {
  opacity: var(--style-disabled-icon-opacity);
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input[type="checkbox"]:not(:indeterminate) + .Switch-icons > .Switch-icon-partial {
  display: none;
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input:is([type="checkbox"]:indeterminate, :not(:checked)) + .Switch-icons > .Switch-icon-on {
  display: none;
}

:is(cm-switch-checkbox, cm-switch-toggle, cm-switch-radio, .Switch-label) input:is([type="checkbox"]:indeterminate, :checked) + .Switch-icons > .Switch-icon-off {
  display: none;
}

.Switch-group {
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-n);
}

cm-switch-toggle-between-labels {
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
}

cm-switch-toggle-between-labels .active {
  color: var(--color-border-attn-default) !important;
  font-weight: var(--text-weight-bold);
}

cm-switch-toggle-between-labels p {
  color: var(--color-border-default);
}

cm-modal {
  transition: opacity var(--style-animation-speed-normal);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-high);
  position: relative;
}

cm-modal[open] {
  opacity: 1;
  pointer-events: all;
}

.Modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--style-gap-xl) var(--style-gap-xl) calc(2 * var(--style-gap-xl));
}

.Modal-click-trap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-modal-backdrop);
  opacity: 0.9;
  cursor: pointer;
}

:root {
  /*--- Primary ---*/
  --color-primary-white: #FFFFFF; 
  --color-primary-purple-1: #ECEEF6;
  --color-primary-purple-2: #D2D6E8;
  --color-primary-purple-3: #BAC0DD;
  --color-primary-purple-4: #757CA1;
  --color-primary-purple-5: #495070;
  --color-primary-purple-6: #292D3E;
  --color-primary-purple-7: #1E2130;
  --color-primary-purple-8: #161823;

  /*--- Secondary Red ---*/
  --color-secondary-red-1: #FDD8DA;
  --color-secondary-red-2: #F9A9AE;
  --color-secondary-red-3: #F47B81;
  --color-secondary-red-4: #F04C55;
  --color-secondary-red-5: #DE333C;
  --color-secondary-red-6: #CB1922;
  --color-secondary-red-7: #B90009;
  --color-secondary-red-8: #970008;

  /*--- Secondary Green ---*/
  --color-secondary-green-1: #DEFAB5;
  --color-secondary-green-2: #C3EB89;
  --color-secondary-green-3: #A8DC5C;
  --color-secondary-green-4: #8DCD30;
  --color-secondary-green-5: #63B22D;
  --color-secondary-green-6: #389729;
  --color-secondary-green-7: #0E7C26;
  --color-secondary-green-8: #026618;

  /*--- Secondary Blue ---*/
  --color-secondary-blue-1: #D3F2FF;
  --color-secondary-blue-2: #9CE0FB;
  --color-secondary-blue-3: #66CDF8;
  --color-secondary-blue-4: #2FBBF4;
  --color-secondary-blue-5: #25A3DA;
  --color-secondary-blue-6: #1A8BBF;
  --color-secondary-blue-7: #1072A5;
  --color-secondary-blue-8: #055A8A;

  /*--- Secondary Yellow ---*/
  --color-secondary-yellow-1: #FFEBB4;
  --color-secondary-yellow-2: #FFDA73;
  --color-secondary-yellow-3: #FFC931;
  --color-secondary-yellow-4: #FCAF27;
  --color-secondary-yellow-5: #F9951D;
  --color-secondary-yellow-6: #F77C14;
  --color-secondary-yellow-7: #F4620A;
  --color-secondary-yellow-8: #F14800;

  /*--- Tertiary Citron ---*/
  --color-tertiary-citron-1: #FCFFA7;
  --color-tertiary-citron-2: #EFF28A;
  --color-tertiary-citron-3: #E1E56C;
  --color-tertiary-citron-4: #D4D84F;
  --color-tertiary-citron-5: #C6CB31;
  --color-tertiary-citron-6: #ADB22B;
  --color-tertiary-citron-7: #949825;
  --color-tertiary-citron-8: #868A18;

  /*--- Tertiary Lavander ---*/
  --color-tertiary-lavander-1: #FADAFF;
  --color-tertiary-lavander-2: #ECC0F4;
  --color-tertiary-lavander-3: #DFA5E8;
  --color-tertiary-lavander-4: #D18BDD;
  --color-tertiary-lavander-5: #C370D1;
  --color-tertiary-lavander-6: #AC63B8;
  --color-tertiary-lavander-7: #94559F;
  --color-tertiary-lavander-8: #8A4197;

  /*--- Tertiary Teal ---*/
  --color-tertiary-teal-1: #ABFBFF;
  --color-tertiary-teal-2: #80E9EF;
  --color-tertiary-teal-3: #56D7DF;
  --color-tertiary-teal-4: #2BC5CE;
  --color-tertiary-teal-5: #00B3BE;
  --color-tertiary-teal-6: #009CA5;
  --color-tertiary-teal-7: #00848C;
  --color-tertiary-teal-8: #00747B;

  /*--- Tertiary Brown ---*/
  --color-tertiary-brown-1: #FFE6DC;
  --color-tertiary-brown-2: #EACBBF;
  --color-tertiary-brown-3: #D6B0A2;
  --color-tertiary-brown-4: #C19584;
  --color-tertiary-brown-5: #AC7A67;
  --color-tertiary-brown-6: #936857;
  --color-tertiary-brown-7: #795547;
  --color-tertiary-brown-8: #6B483A;

  /*--- Tertiary Pink ---*/
  --color-tertiary-pink-1: #FFC3EB;
  --color-tertiary-pink-2: #FBAAE0;
  --color-tertiary-pink-3: #F790D5;
  --color-tertiary-pink-4: #F277C9;
  --color-tertiary-pink-5: #EE5DBE;
  --color-tertiary-pink-6: #D64FAA;
  --color-tertiary-pink-7: #BD4195;
  --color-tertiary-pink-8: #AE3386;

  /*--- Qualitative Group 1 ---*/
  --color-charts-qualitative-group-1-red-5: #DE333C;
  --color-charts-qualitative-group-1-green-5: #63B22D;
  --color-charts-qualitative-group-1-blue-5: #25A3DA;
  --color-charts-qualitative-group-1-yellow-3: #FFC931;
  --color-charts-qualitative-group-1-citron-5: #C6CB31;
  --color-charts-qualitative-group-1-lavander-5: #C370D1;
  --color-charts-qualitative-group-1-teal-5: #00B3BE;
  --color-charts-qualitative-group-1-brown-5: #AC7A67;
  --color-charts-qualitative-group-1-pink-5: #EE5DBE;

  /*--- Qualitative Group 2 ---*/
  --color-charts-qualitative-group-2-red-7: #B90009;
  --color-charts-qualitative-group-2-green-3: #A8DC5C;
  --color-charts-qualitative-group-2-blue-7: #1072A5;
  --color-charts-qualitative-group-2-orange-1: #F9951D;
  --color-charts-qualitative-group-2-citron-7: #949825;
  --color-charts-qualitative-group-2-lavander-3: #DFA5E8;
  --color-charts-qualitative-group-2-teal-7: #00848C;
  --color-charts-qualitative-group-2-brown-3: #D6B0A2;
  --color-charts-qualitative-group-2-pink-7: #BD4195;

  /*--- Qualitative Group 3 ---*/
  --color-charts-qualitative-group-3-red-3: #F47B81;
  --color-charts-qualitative-group-3-green-7: #0E7C26;
  --color-charts-qualitative-group-3-blue-3: #66CDF8;
  --color-charts-qualitative-group-3-orange-3: #F4620A;
  --color-charts-qualitative-group-3-citron-3: #E1E56C;
  --color-charts-qualitative-group-3-lavander-7: #94559F;
  --color-charts-qualitative-group-3-teal-3: #56D7DF;
  --color-charts-qualitative-group-3-brown-7: #795547;
  --color-charts-qualitative-group-3-pink-3: #F790D5;

  /*--- Semantic ---*/
  --color-charts-semantic-green-7: #0E7C26;
  --color-charts-semantic-green-6: #389729;
  --color-charts-semantic-green-5: #63B22D;
  --color-charts-semantic-citron-2: #ADB22B;
  --color-charts-semantic-yellow-3: #FFC931;
  --color-charts-semantic-orange-3: #F77C14;
  --color-charts-semantic-orange-4: #F4620A;
  --color-charts-semantic-red-5: #DE333C;
  --color-charts-semantic-red-7: #B90009;

  --color-primary-white: #ffffff;
  --color-primary-lighter-purple: var(--color-primary-purple-1);
  --color-primary-light-purple: var(--color-primary-purple-2);
  --color-primary-new-purple: var(--color-primary-purple-3);
  --color-primary-purple: var(--color-primary-purple-4);
  --color-primary-medium-purple: var(--color-primary-purple-5);
  --color-primary-dark-purple: var(--color-primary-purple-6);
  --color-primary-darker-purple: var(--color-primary-purple-7);
  --color-primary-darkest-purple: var(--color-primary-purple-8);
  --color-secondary-yellow: var(--color-secondary-yellow-2);
  --color-secondary-dark-yellow: var(--color-secondary-yellow-3);
  --color-secondary-darker-yellow: var(--color-secondary-yellow-4);
  --color-secondary-light-red: var(--color-secondary-red-1);
  --color-secondary-red: var(--color-secondary-red-3);
  --color-secondary-dark-red: var(--color-secondary-red-4);
  --color-secondary-darker-red: var(--color-secondary-red-5);
  --color-secondary-blue: var(--color-secondary-blue-1);
  --color-secondary-dark-blue: var(--color-secondary-blue-2);
  --color-secondary-darker-blue: var(--color-secondary-blue-3);
  --color-secondary-green: var(--color-secondary-green-2);
  --color-secondary-dark-green: var(--color-secondary-green-3);
  --color-secondary-darker-green: var(--color-secondary-green-4);
  --color-secondary-green-yellow: var(--color-tertiary-citron-5);
  --color-secondary-yellow-red-experimental: var(--color-secondary-yellow-5);

  --color-charts-chart-red: var(--color-secondary-red-5);
  --color-charts-chart-green: var(--color-secondary-green-5);
  --color-charts-chart-yellow: var(--color-secondary-yellow-2);
  --color-charts-chart-blue: var(--color-secondary-blue-6);
  --color-charts-chart-orange: var(--color-secondary-yellow-6);
  --color-charts-chart-purple: var(--color-tertiary-lavander-8);
  --color-charts-chart-cyan: var(--color-tertiary-teal-4);
  --color-charts-chart-magenta: var(--color-tertiary-pink-5);
  --color-charts-chart-lime: var(--color-tertiary-citron-3);
  --color-charts-chart-pink: var(--color-tertiary-pink-3);
  --color-charts-chart-teal: var(--color-tertiary-teal-6);
  --color-charts-chart-lavander: var(--color-tertiary-lavander-5);
  --color-charts-chart-brown: var(--color-tertiary-brown-7);
  --color-charts-chart-beige: var(--color-secondary-yellow-1);
  --color-charts-chart-maroon: var(--color-tertiary-pink-8);
  --color-charts-chart-mint: var(--color-tertiary-citron-3);
  --color-charts-chart-olive: var(--color-tertiary-citron-8);
  --color-charts-chart-apricot: var(--color-tertiary-brown-2);
  --color-charts-chart-navy: var(--color-secondary-blue-8);
  --color-charts-chart-grey: var(--color-primary-purple-4);

  --color-text: var(--color-primary-purple-6);
  --color-bg: var(--color-primary-purple-1);
  --color-text-mantissa: var(--color-primary-purple-3);
  --color-line: var(--color-primary-purple-6);
  --color-separator-line-light: var(--color-primary-purple-2);
  --color-separator-line-lighter: var(--color-primary-purple-1);
  --color-link: var(--color-secondary-blue-7);
  --color-focus-outline: var(--color-secondary-blue-7);
  --color-positive-label: var(--color-secondary-green-5);
  --color-negative-label: var(--color-secondary-red-5);

  /** METRIC SCALING */
  --eff-base-size: 14;
  --rem-px: calc(1rem / var(--eff-base-size)); /* 1px expressed in rems */
  --em-px: calc(1em / var(--eff-base-size)); /* 1px expressed in em when 1em == 1rem, scales with parent's font size */

  --style-gap-xs: calc(2 * var(--rem-px));
  --style-gap-s: calc(4 * var(--rem-px));
  --style-gap-n: calc(8 * var(--rem-px));
  --style-gap-l: calc(12 * var(--rem-px));
  --style-gap-xl: calc(16 * var(--rem-px));
  --style-gap-xxl: calc(24 * var(--rem-px));
  --style-gap-xxxl: calc(32 * var(--rem-px));
  --style-gap-huge: calc(64 * var(--rem-px));

  --style-input-padding-n: var(--style-gap-s) var(--style-gap-n);
  --style-input-padding-l: var(--style-gap-l) var(--style-gap-xl);
  --style-input-h-n: calc(32 * var(--rem-px));
  --style-input-h-l: calc(48 * var(--rem-px));
  --style-corner-default: calc(3 * var(--em-px));
  --style-separator-line: 1px solid var(--color-line);
  --style-separator-line-light: 1px solid var(--color-separator-line-light);
  --style-line-lighter: 1px solid var(--color-separator-line-lighter);

  --text-size-s: calc(12 * var(--rem-px));
  --text-size-n: 1rem;
  --text-size-l: calc(18 * var(--rem-px));
  --text-size-xl: calc(24 * var(--rem-px));
  --text-size-xxl: calc(36 * var(--rem-px));
  --text-size-xxxl: calc(48 * var(--rem-px));

  --text-weight-normal: 400;
  --text-weight-bold: 700;
  --text-list-padding: calc(36 * var(--rem-px));  /* ~36px */

  --text-size-input-n: var(--text-size-n);
  --text-size-input-l: var(--text-size-l);

  --style-border-width: 1px;
  --style-border-pressed-wdith: 2px;
  --style-border-type: solid;

  --animation-base-duration: 128ms;
  --style-animation-speed-fast: var(--animation-base-duration);
  --style-animation-speed-normal: calc(2 * var(--animation-base-duration));
  --style-animation-speed-slow: calc(4 * var(--animation-base-duration));

  --style-animation-easing-bazier: cubic-bezier(0.5, -2, 0.5, 3);

  --style-disabled-icon-opacity: 0.3;

  /* Widget styles: default */
  --color-border-default: var(--color-primary-new-purple);
  --color-face-default: transparent;
  --color-label-default: var(--color-primary-dark-purple);
  --color-label-disabled: var(--color-primary-light-purple);
  --color-border-attn-default: var(--color-primary-dark-purple);
  --color-border-pressed-default: var(--color-border-default);
  --color-border-pressed-alternate: var(--color-primary-purple);
  --color-face-attn-default: var(--color-face-default);
  --color-label-attn-default: var(--color-label-default);
  --color-face-pressed-default: var(--color-primary-light-purple);
  --color-label-pressed-default: var(--color-label-default);
  --color-button-subtle-pressed: var(--color-primary-purple);

  /* Widget styles: inverse */
  --color-border-inverse: var(--color-primary-dark-purple);
  --color-face-inverse: var(--color-primary-dark-purple);
  --color-label-inverse: var(--color-primary-white);
  --color-border-attn-inverse: var(--color-primary-darkest-purple);
  --color-face-attn-inverse: var(--color-primary-darkest-purple);
  --color-label-attn-inverse: var(--color-label-inverse);
  --color-border-pressed-inverse: var(--color-border-pressed-default);
  --color-face-pressed-inverse: var(--color-face-pressed-default);
  --color-label-pressed-inverse: var(--color-label-pressed-default);

  /* Widget styles: muted */
  --color-border-muted: var(--color-primary-light-purple);
  --color-face-muted: transparent;
  --color-face-muted-opaque: var(--color-primary-light-purple);
  --color-label-muted: var(--color-primary-light-purple);

  /* Widget styles: special (not affected by dark mode) */
  --color-label-always-white: #ffffff;
  --color-label-always-dark-purple: #292d3e;

  /* Widget styles: info (not affected by dark mode) */
  --color-face-info: #89ddff;
  --color-face-attn-info: #89ddff;
  --color-face-pressed-info: #63d2ff;
  --color-border-info: #63d2ff;
  --color-border-attn-info: #2fbbf4;
  --color-border-pressed-info: #2fbbf4;

  /* Widget styles: success (not affected by dark mode) */
  --color-face-success: #c3e88d;
  --color-face-attn-success: #c3e88d;
  --color-face-pressed-success: #a7dc5a;
  --color-border-success: #a7dc5a;
  --color-border-attn-success: #8dcd30;
  --color-border-pressed-success: #8dcd30;

  /* Widget style: done (not affected by dark mode) */
  --color-face-done: #a7dc5a;

  /* Widget styles: warning (not affected by dark mode) */
  --color-face-warning: #ffd96f;
  --color-face-attn-warning: #ffd96f;
  --color-face-pressed-warning: #ffc931;
  --color-border-warning: #ffc931;
  --color-border-attn-warning: #f1b815;
  --color-border-pressed-warning: #f1b815;

  /* Widget styles: error (not affected by dark mode) */
  --color-face-error: #f07178;
  --color-face-attn-error: #f07178;
  --color-face-pressed-error: #f04c55;
  --color-border-error: #f04c55;
  --color-border-attn-error: #e42f39;
  --color-border-pressed-error: #e42f39;

  /** Panel */
  --color-panel-face: var(--color-primary-white);
  --style-panel-border: 1px solid var(--color-line);
  --style-panel-bottom-border: 2px;
  --style-panel-padding: var(--style-gap-xl);

  /** Scrollbar */
  --color-scrollbar-thumb: var(--color-primary-medium-purple);
  --color-scrollbar-track: var(--color-primary-dark-purple);
  --color-scrollbar-inline-track: var(--color-primary-light-purple);
  --style-scrollbar-w: 2px;
  --style-scrollbar-padding-s: var(--style-gap-s);
  --style-scrollbar-padding-n: var(--style-gap-n);
  --style-scrollbar-padding-l: var(--style-gap-xl);
  --style-scrollbar-track-w-s: calc(var(--style-scrollbar-padding-s) + var(--style-scrollbar-w));
  --style-scrollbar-track-w-n: calc(var(--style-scrollbar-padding-n) + var(--style-scrollbar-w));
  --style-scrollbar-track-w-l: calc(var(--style-scrollbar-padding-l) + var(--style-scrollbar-w));

  /** Input */
  --color-input-field: var(--color-primary-lighter-purple);
  --color-input-field-attn: var(--color-primary-light-purple);
  --color-input-field-error: var(--color-secondary-light-red);
  --color-input-field-disabled: var(--color-primary-lighter-purple);
  --color-input-border: var(--color-primary-new-purple);
  --color-input-border-attn: var(--color-primary-dark-purple);
  --color-input-border-error: var(--color-secondary-red);
  --color-input-border-disabled: var(--color-primary-light-purple);

  /** Accordion, dropdown, nav-list, etc. */
  --color-selectable-hover-face: var(--color-primary-purple-1);
  --color-selectable-hover-label: var(--color-text);

  /** Loader */
  --color-loader-background: var(--color-primary-light-purple);
  --color-loader-line: var(--color-primary-darker-purple);
  --color-loader-red-3: #F47B81;
  --color-loader-red-4: #F04C55;

  --color-loader-green-3: #A8DC5C;
  --color-loader-green-4: #8DCD30;

  --color-loader-blue-3: #66CDF8;
  --color-loader-blue-4: #0BA0DA;

  --color-loader-yellow-2: #FFDA73;
  --color-loader-yellow-3: #FFC931;
  --color-loader-yellow-4: #FCAF27;

  --style-loader-frame: 2rem;
  --style-loader-line: 1px;

  --gradient-loader-blue-red: repeating-linear-gradient(0deg, var(--color-loader-blue-4), var(--color-loader-blue-4) 0.5rem, var(--color-loader-red-4) 0.5rem, var(--color-loader-red-4) 1rem);
  --gradient-loader-blue: repeating-linear-gradient(0deg, var(--color-loader-blue-4) 0%, var(--color-loader-blue-4) 100%);
  --gradient-loader-red: repeating-linear-gradient(0deg, var(--color-loader-red-4) 0%, var(--color-loader-red-4) 100%);
  --gradient-loader-yellow-green: repeating-linear-gradient(0deg, var(--color-loader-yellow-2), var(--color-loader-yellow-2) 0.5rem, var(--color-loader-green-4) 0.5rem, var(--color-loader-green-4) 1rem);

  /** Table */
  --color-table-border: var(--color-primary-lighter-purple);
  --color-table-header-border: var(--color-primary-new-purple);
  --color-table-header-background: var(--color-primary-light-purple);
  --color-table-header-background-hover: var(--color-primary-new-purple);
  --color-table-header-icon-normal: var(--color-primary-new-purple);
  --color-table-header-icon-emphasis: var(--color-primary-purple);
  --color-table-header-icon-active: var(--color-primary-dark-purple);
  --color-table-cell-background: var(--color-primary-white);
  --color-table-row-hover: var(--color-primary-lighter-purple);
  --text-table-main: var(--text-size-n);
  --style-table-padding: var(--style-gap-n);
  --style-table-header-height: calc(40 * var(--rem-px));
  --style-table-cell-height: calc(48 * var(--em-px));
  --text-monospace-font: "Ubuntu Mono", monospace;
  --text-table-numeric-cell-font: var(--text-monospace-font);

  /** Sidebar */
  --color-sidebar-separator: var(--color-primary-medium-purple);
  --color-sidebar-bg: var(--color-primary-dark-purple);
  --color-sidebar-content-bg: var(--color-primary-darkest-purple);
  --color-sidebar-text: var(--color-primary-white);
  --color-sidebar-hover-btn-bg: var(--color-primary-darker-purple);
  --color-sidebar-active-btn-bg: var(--color-primary-darkest-purple);
  --color-sidebar-active-btn-text: var(--color-primary-purple);
  --color-sidebar-open-shadow: none;
  --style-sidebar-padding: var(--style-gap-n);
  --style-sidebar-width: calc(var(--style-sidebar-padding) * 2 + calc(32 * var(--rem-px)) + 1px);
  --style-sidebar-content-padding: var(--style-gap-xxl);

  /** App layout - header */
  --color-app-header-bg: var(--color-bg);
  --style-app-header-h: calc(var(--style-sidebar-width) + var(--style-border-width));

  /** Popup **/
  --style-popup-gap: var(--style-gap-n);
  --style-popup-gap-s: var(--style-gap-s);

  /** Info popup */
  --color-info-popup-icon: var(--color-primary-new-purple);
  --color-info-popup-bg: var(--color-primary-darkest-purple);
  --color-info-popup-text: var(--color-primary-white);
  --color-info-popup-icon-active: var(--color-primary-dark-purple);

  /** Icons */
  --color-border-active-default: var(--color-primary-purple);

  /** Range slider */
  --color-range-slider-track: var(--color-primary-light-purple);
  --color-range-slider-border: var(--color-primary-new-purple);
  --color-range-slider-slider-face: var(--color-primary-white);
  --color-range-slider-slider-border: var(--color-primary-new-purple);
  --color-range-slider-slider-face-disabled: var(--color-primary-lighter-purple);
  --color-range-slider-slider-border-disabled: var(--color-primary-light-purple);
  --color-range-slider-handle-face: var(--color-secondary-blue);
  --color-range-slider-handle-border: var(--color-secondary-darker-blue);
  --color-range-slider-handle-notch: var(--color-range-slider-handle-border);
  --color-range-slider-handle-face-disabled: var(--color-primary-lighter-purple);
  --color-range-slider-handle-border-disabled: var(--color-primary-light-purple);
  --color-range-slider-handle-notch-disabled: var(--color-primary-light-purple);
  --style-range-slider-height: calc(32 * var(--rem-px));
  --style-range-slider-handle-width: calc(0.375 * var(--style-range-slider-height));
  --style-range-slider-notch-height: calc(0.25 * var(--style-range-slider-height));
  --style-range-slider-notch-width: calc(0.5 * var(--style-range-slider-notch-height));

  /** Dialog */
  --color-dialog-titlebar-background: var(--color-primary-darkest-purple);

  /** Modal */
  --color-modal-backdrop: var(--color-primary-light-purple);

  /** Editable */
  --color-editable-label-default: var(--color-primary-new-purple);
  --color-editable-label-pressed: var(--color-primary-purple);

  /** Copy */
  --color-copy: var(--color-primary-new-purple);
  --color-copy-hover: var(--color-primary-dark-purple);
  --color-copy-active: var(--color-primary-purple);

  /** Paginator */
  --color-paginator-current-bg: var(--color-primary-dark-purple);
  --color-paginator-current-text: var(--color-primary-white);

  /* Code editor */
  --color-code-editor-gutter-bg: var(--color-primary-light-purple);
  --color-code-editor-autocomplete-bg: var(--color-primary-white);

  /** Skeleton */
  --color-skeleton-bg: var(--color-primary-lighter-purple);

  /* Code */
  --color-code-outline: #F4620A;

  /** Z-indexes */
  --z-above: 1;
  --z-middle: 2;
  --z-high: 3;
  --z-top: 4;
}

@media screen and (max-width: 960px) {
  :root {
    --eff-base-size: 16;
    --text-size-xl: calc(20 * var(--rem-px));
    --text-size-xxl: calc(24 * var(--rem-px));
    --text-size-xxxl: calc(28 * var(--rem-px));
  }
}

.Theme-night-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.Theme-night,
.Sidebar-extras {
  --color-text: var(--color-primary-white);
  --color-text-mantissa: var(--color-primary-purple);
  --color-bg: var(--color-primary-darker-purple);
  --color-line: var(--color-primary-white);
  --color-separator-line-lighter: var(--color-primary-medium-purple);
  --color-separator-line-light: var(--color-primary-medium-purple);

  --style-separator-line: 1px solid var(--color-line);
  --style-separator-line-light: 1px solid var(--color-separator-line-light);
  --style-line-lighter: 1px solid var(--color-separator-line-lighter);

  /** Accordion, dropdown, nav-list, etc. */
  --color-selectable-hover-face: var(--color-primary-purple-7);
  --color-selectable-hover-label: var(--color-text);

  /* Widget styles: default */
  --color-border-default: var(--color-primary-purple);
  --color-face-default: transparent;
  --color-label-default: var(--color-primary-white);
  --color-label-disabled: var(--color-primary-medium-purple);
  --color-border-attn-default: var(--color-primary-white);
  --color-face-attn-default: var(--color-face-default);
  --color-label-attn-default: var(--color-label-default);
  --color-border-pressed-default: var(--color-primary-darkest-purple);
  --color-border-pressed-alternate: var(--color-primary-new-purple);
  --color-face-pressed-default: var(--color-primary-darker-purple);
  --color-label-pressed-default: var(--color-label-default);
  --color-button-subtle-pressed: var(--color-primary-darkest-purple);

  /* Widget styles: inverse */
  --color-border-inverse: var(--color-primary-white);
  --color-face-inverse: var(--color-primary-white);
  --color-label-inverse: var(--color-primary-darker-purple);
  --color-border-attn-inverse: var(--color-primary-white);
  --color-face-attn-inverse: var(--color-primary-lighter-purple);
  --color-label-attn-inverse: var(--color-label-inverse);
  --color-border-pressed-inverse: var(--color-primary-darkest-purple);
  --color-face-pressed-inverse: var(--color-face-pressed-default);
  --color-label-pressed-inverse: var(--color-label-pressed-default);

  /* Widget styles: muted */
  --color-border-muted: var(--color-primary-medium-purple);
  --color-face-muted: transparent;
  --color-face-muted-opaque: var(--color-primary-medium-purple);
  --color-label-muted: var(--color-primary-medium-purple);

  /** Panel */
  --color-panel-face: var(--color-primary-dark-purple);
  --style-panel-border: 1px solid var(--color-line);

  /** Input */
  --color-input-field: var(--color-primary-dark-purple);
  --color-input-field-attn: var(--color-primary-darker-purple);
  --color-input-field-error: var(--color-input-field);
  --color-input-field-disabled: var(--color-primary-dark-purple);
  --color-input-border: var(--color-primary-purple);
  --color-input-border-attn: var(--color-primary-white);
  --color-input-border-disabled: var(--color-primary-medium-purple);

  /** Loader */
  --color-loader-background: var(--color-primary-medium-purple);
  --color-loader-line: var(--color-primary-light-purple);

  /** Table */
  --color-table-border: var(--color-primary-medium-purple);
  --color-table-header-border: var(--color-primary-purple);
  --color-table-header-background: var(--color-primary-medium-purple);
  --color-table-header-background-hover: var(--color-primary-purple);
  --color-table-header-icon-normal: var(--color-primary-purple);
  --color-table-header-icon-emphasis: var(--color-primary-medium-purple);
  --color-table-header-icon-active: var(--color-primary-white);
  --color-table-cell-background: var(--color-primary-dark-purple);
  --color-table-row-hover: var(--color-primary-darker-purple);

  /** Range slider */
  --color-range-slider-track: var(--color-primary-darker-purple);
  --color-range-slider-border: var(--color-primary-darkest-purple);
  --color-range-slider-slider-face: var(--color-primary-purple);
  --color-range-slider-slider-border: var(--color-primary-medium-purple);
  --color-range-slider-slider-face-disabled: var(--color-primary-medium-purple);
  --color-range-slider-slider-border-disabled: var(--color-primary-darkest-purple);
  --color-range-slider-handle-face: var(--color-secondary-blue);
  --color-range-slider-handle-border: var(--color-secondary-darker-blue);
  --color-range-slider-handle-notch: var(--color-range-slider-handle-border);
  --color-range-slider-handle-face-disabled: var(--color-range-slider-slider-face-disabled);
  --color-range-slider-handle-border-disabled: var(--color-range-slider-slider-border-disabled);
  --color-range-slider-handle-notch-disabled: var(--color-range-slider-slider-border-disabled);

  /** App header */
  --color-app-header-bg: var(--color-bg);

  /** Dialog */
  --color-dialog-titlebar-background: var(--color-primary-white);

  /** Modal */
  --color-modal-backdrop: var(--color-primary-darkest-purple);

  /** Info popup */
  --color-info-popup-icon: var(--color-primary-purple);
  --color-info-popup-bg: var(--color-primary-white);
  --color-info-popup-text: var(--color-primary-dark-purple);
  --color-info-popup-icon-active: var(--color-primary-white);

  /** Sidebar */
  --color-sidebar-open-shadow: rgba(22, 24, 35, 0.5);

  /** Copy */
  --color-copy: var(--color-primary-purple);
  --color-copy-hover: var(--color-primary-white);
  --color-copy-active: var(--color-primary-darkest-purple);

  /** Paginator */
  --color-paginator-current-bg: var(--color-primary-white);
  --color-paginator-current-text: var(--color-primary-dark-purple);

  /** Scrollbar */
  --color-scrollbar-thumb: var(--color-primary-white);
  --color-scrollbar-track: var(--color-primary-medium-purple);
  --color-scrollbar-inline-track: var(--color-primary-medium-purple);

  /* Code editor */
  --color-code-editor-gutter-bg: var(--color-primary-dark-purple);
  --color-code-editor-autocomplete-bg: var(--color-primary-dark-purple);

  /** Skeleton */
  --color-skeleton-bg: var(--color-primary-medium-purple);

  /* Code */
  --color-code-outline: #FFD96F;
}

.Theme-night-toggle:not(:checked) ~ * .Theme-night-toggle-button cm-icon:last-of-type {
  display: none;
}

.Theme-night-toggle:checked ~ * .Theme-night-toggle-button cm-icon:first-of-type {
  display: none;
}

.Theme-content {
  min-height: calc(100vh - var(--style-app-header-h));
  color: var(--color-text);
  background-color: var(--color-bg);
  transition:
    color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
}


html {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: calc(100% * var(--eff-base-size) / 16); /* by *default*, set font size to 14px in all browsers */
}

body {
  font-family: Lato, sans-serif;
  background-color: var(--color-bg);
}

body:not([data-pointer]) :is(
  *:focus,
  input:is([type=radio], [type=checkbox]):focus + label
) {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

/* For assistive technology (AT) users only */
.AT-only {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body:not([data-pointer]) label:focus {
  border-radius: var(--style-corner-default);
}

[disabled] > * {
  pointer-events: none;
}

.Accordion summary {
  background-color: var(--color-face-default);
  width: 100%;
  height: max-content;
  transition:
  color var(--style-animation-speed-normal),
  background-color var(--style-animation-speed-normal);
}

.Accordion > summary > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0 var(--style-gap-n);
  padding: var(--style-gap-n);
  width: 100%;
  height: 100%;
  border: 0;
  color: var(--color-default);
}

.Accordion[open] summary cm-icon[name=chevron-down] {
  transform: rotate(180deg);
}

.Accordion[open] > .Accordion-content {
  padding: var(--style-gap-n);
  visibility: visible;
}

.Accordion-content-collapsed {
  overflow: hidden;
  height: 0;
}

.Accordion {
  border-width: 1px 0;
  border-style: solid;
  border-color: transparent;
}

.Accordion.seperator {
  border-color: var(--color-primary-purple-1);
}

.Accordion.hover summary,
.Accordion:hover summary {
  background: var(--color-selectable-hover-face);
}

.Accordion.seperator.hover,
.Accordion.seperator.press,
.Accordion.seperator:hover,
.Accordion.seperator:active {
  border-color: var(--color-primary-purple-3);
}

.Accordion.press summary,
.Accordion:active summary {
  background: var(--color-primary-purple-3);
}

.Accordion.active {
  border-color: var(--color-primary-purple-6);
}

.Accordion.disabled > summary > *,
.Accordion:disabled > summary > * {
  color: var(--color-primary-purple-3);
}

.Theme-night .Accordion > summary > * {
  color: var(--color-primary-white);
}

.Theme-night .Accordion.seperator {
  border-color: var(--color-primary-purple-5);
}

.Theme-night .Accordion.hover summary,
.Theme-night .Accordion:hover summary {
  background: var(--color-primary-purple-7);
}

.Theme-night .Accordion.seperator.hover,
.Theme-night .Accordion.seperator:hover {
  border-color: var(--color-primary-purple-4);
}

.Theme-night .Accordion.press summary,
.Theme-night .Accordion:active summary {
  background: var(--color-primary-purple-8);
}

.Theme-night .Accordion.active {
  border-color: var(--color-primary-white);
}

.Theme-night .Accordion.disabled > summary > *,
.Theme-night .Accordion:disabled > summary > * {
  color: var(--color-primary-purple-5);
}

.AppLayout-header {
  --app-layout-header-padding-v: var(--style-gap-n);
  --app-layout-header-padding: var(--style-gap-xl);
  position: fixed;
  top: 0;
  left: 0;
  right: var(--style-sidebar-width);
  height: var(--style-app-header-h);
  padding: var(--app-layout-header-padding-v) var(--app-layout-header-padding);
  display: flex;
  align-items: center;
  gap: var(--style-gap-xl);
  background-color: var(--color-app-header-bg);
  transition: color var(--style-animation-speed-normal), background-color var(--style-animation-speed-normal);
  z-index: var(--z-high);
}

.AppLayout-header::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--app-layout-header-padding);
  right: var(--app-layout-header-padding);
  height: var(--style-border-width);
  background: var(--color-line);
  border-radius: var(--style-border-width);
  transition: background-color var(--style-animation-speed-normal);
}

.AppLayout-header > * {
  flex: none
}

a.AppLayout-logo {
  color: inherit;
}

.AppLayout-logo {
  height: calc(18 * var(--rem-px));
}

.AppLayout-main {
  margin-top: var(--style-app-header-h);
  margin-right: var(--style-sidebar-width);
  padding: var(--style-gap-xl);
  min-height: calc(100vh - var(--style-app-header-h));
}

.AppLayout-main-fullscreen {
  max-height: calc(100vh - var(--style-app-header-h));
  overflow: hidden;
}

.AppLayout-main,
.AppLayout-col {
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-xl);
}

@media screen and (min-width: 600px) {
  .AppLayout-row,
  .AppLayout-row-stretch,
  .AppLayout-row-stretch-full {
    display: flex;
    gap: var(--style-gap-xl);
  }

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

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

  .AppLayout-row-stretch-full {
    align-items: stretch;
    height: 100%;
    flex-grow: 1;
  }
}

.AppLayout-side {
  max-width: max-content;
  flex-grow: 0;
  flex-shrink: 0;
}

.AppLayout-header .Line-v-dark,
.AppLayout-header .Line-v-light {
  height: calc(100% - 2px);
}

.Button,
.Button-clear,
.Button-clear-inverse,
.Button-primary,
.Button-info,
.Button-success,
.Button-warning,
.Button-error,
.Sidebar-button,
.Sidebar-toggle-button,
.Button-active,
.Button-inactive {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--style-corner-default);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  height: var(--style-input-h-n);
  font-size: var(--text-size-input-n);
  text-decoration: none;
}

.Button,
.Button-primary,
.Button-info,
.Button-success,
.Button-warning,
.Button-error,
.Sidebar-button,
.Sidebar-toggle-button,
.Button-active,
.Button-inactive {
  padding: var(--style-gap-n);
}

.Button-clear,
.Button-clear-inverse {
  padding: var(--style-gap-s);
}

.Button-icon:not(.Button-l) {
  width: var(--style-input-h-n);
}
.Button-Icon.Button-l {
  width: var(--style-input-h-l);
}

.Button,
.Button-primary,
.Button-info,
.Button-success,
.Button-warning,
.Button-inactive,
.Button-error,
.Button-active,
.Button-inactive {
  gap: var(--style-gap-n);
  background-color: var(--color-face-default);
  color: var(--color-label-default);
  border: var(--style-border-width) var(--style-border-type) var(--color-border-default);
  box-shadow: inset 0 var(--style-border-pressed-wdith) transparent;

  transition:
    border-color var(--style-animation-speed-normal),
    color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal),
    border-width var(--style-animation-speed-normal);
}

.Button-l {
  font-size: var(--text-size-input-l);
  padding: var(--style-gap-l) var(--style-gap-xl);
  height: var(--style-input-h-l);
}

.Button-primary {
  background-color: var(--color-face-inverse);
  color: var(--color-label-inverse);
  border-color: var(--color-border-inverse);
}

.Button:hover,
body:not([data-pointer]) .Button:focus,
.Button-active,
input:is([type=radio], [type=checkbox]):focus + .Button {
  background-color: var(--color-face-attn-default);
  color: var(--color-label-attn-default);
  border-color: var(--color-border-attn-default);
}

.Button-primary:hover,
.Button-primary:focus,
input:is([type=radio], [type=checkbox]):focus > .Button-primary {
  background-color: var(--color-face-attn-inverse);
  color: var(--color-label-attn-inverse);
  border-color: var(--color-border-attn-inverse);
}

.Button-info,
.Button-success,
.Button-warning {
  color: var(--color-label-always-dark-purple);
}

.Button-error {
  color: var(--color-label-always-white);
}

.Button-info {
  background-color: var(--color-face-info);
  border-color: var(--color-border-info);
}

.Button-info:hover,
.Button-info:focus,
input:checked + .Button-info {
  background-color: var(--color-face-attn-info);
  border-color: var(--color-border-attn-info);
}

.Button-success {
  background-color: var(--color-face-success);
  border-color: var(--color-border-success);
}

.Button-success:hover,
.Button-success:focus,
body:not([data-pointer]) input:focus + .Button-success {
  background-color: var(--color-face-attn-success);
  border-color: var(--color-border-attn-success);
}

.Button-warning {
  background-color: var(--color-face-warning);
  border-color: var(--color-border-warning);
}

.Button-warning:hover,
.Button-warning:focus {
  background-color: var(--color-face-attn-warning);
  border-color: var(--color-border-attn-warning);
}

.Button-error {
  background-color: var(--color-face-error);
  border-color: var(--color-border-error);
}

.Button-error:hover,
.Button-error:focus {
  background-color: var(--color-face-attn-error);
  border-color: var(--color-border-attn-error);
}

:is(
  .Button,
  .Button-primary,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error
)[disabled],
[disabled] :is(
  .Button,
  .Button-primary,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error
),
input:is([type=radio], [type=checkbox])[disabled] > :is(
  .Button,
  .Button-primary,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error
) {
  background-color: var(--color-face-muted);
  color: var(--color-label-muted);
  border-color: var(--color-border-muted);
  cursor: not-allowed;
}

:is(
  :is(
    .Button,
    .Button-primary,
    .Button-info,
    .Button-success,
    .Button-warning,
    .Button-error,
    .Button-clear,
    .Button-clear-inverse,
  )[disabled],
  [disabled] :is(
    .Button,
    .Button-primary,
    .Button-info,
    .Button-success,
    .Button-warning,
    .Button-error,
    .Button-clear,
    .Button-clear-inverse,
  ),
  input:is([type=radio], [type=checkbox])[disabled] > :is(
    .Button,
    .Button-primary,
    .Button-info,
    .Button-success,
    .Button-warning,
    .Button-error,
    .Button-clear,
    .Button-clear-inverse,
    .Sidebar-button,
    .Sidebar-toggle-button
  )
) :is(.Color-icon-svg, .Coin-svg) {
  opacity: var(--style-disabled-icon-opacity);
}

:is(
  .Button,
  .Button-primary,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error
) > :is(cm-icon, cm-color-icon):first-child {
  margin-left: calc(-1 * var(--style-gap-s));
}

:is(
  .Button,
  .Button-primary,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error
) > :is(cm-icon, cm-color-icon):last-child {
  margin-right: calc(-1 * var(--style-gap-s));
}

.Button-l > :is(cm-icon.Icon-l, cm-color-icon.Icon-l):first-child {
  margin-left: calc(-1 * var(--style-gap-xl));
}
.Button-l > :is(cm-icon.Icon-l, cm-color-icon.Icon-l):last-child {
  margin-right: calc(-1 * var(--style-gap-xl));
}

.Button-clear,
.Sidebar-button,
.Sidebar-toggle-button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-label-default);
  border-radius: var(--style-corner-default);
  flex-shrink: 0;
  text-decoration: none;
}

.Button-clear-inverse {
  color: var(--color-label-inverse);
  flex-shrink: 0;
}

:is(.Button-clear, .Button-clear-inverse)[disabled],
[disabled] :is(.Button-clear, .Button-clear-inverse) {
  color: var(--color-label-muted);
}

.Button-inactive {
  color: var(--color-label-muted);
  background-color: var(--color-face-muted);
  border-color: var(--color-border-muted);
}

.Button-inactive:hover :is(.Color-icon-svg, .Coin-svg) {
  opacity: 1;
}

.Button-active,
[open] > .Button,
input:checked + .Button {
  position: relative;
  top: calc(-1 * var(--style-border-width));
  box-shadow: inset 0 calc(-1 * var(--style-border-width)) 0 var(--color-border-attn-default);
  border-color: var(--color-border-attn-default);
}

.Button-subtle {
  background: none;
  border: none;
  color: var(--color-border-default);
}

.Button-subtle:hover {
  color: var(--color-label-default);
}

.Button:not(:disabled):active,
.Button-primary:not(:disabled):active {
  background-color: var(--color-face-pressed-default);
  color: var(--color-label-pressed-default);
  border-color: var(--color-border-pressed-default);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-border-pressed-default);
}

.Button-info:not(:disabled):active {
  background-color: var(--color-face-pressed-info);
  border-color: var(--color-border-pressed-info);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-border-pressed-info);
}

.Button-success:not(:disabled):active {
  background-color: var(--color-face-pressed-success);
  border-color: var(--color-border-pressed-success);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-border-pressed-success);
}

.Button-warning:not(:disabled):active {
  background-color: var(--color-face-pressed-warning);
  border-color: var(--color-border-pressed-warning);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-border-pressed-warning);
}

.Button-error:not(:disabled):active {
  background-color: var(--color-face-pressed-error);
  border-color: var(--color-border-pressed-error);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-border-pressed-error);
}

.Button-subtle:active {
  color: var(--color-button-subtle-pressed);
}

.Code,
.Code-l {
  display: inline-flex;
  align-items: center;
  gap: var(--style-gap-s);
  border: 1px solid var(--color-code-outline);
  color: var(--color-code-outline);
  border-radius: var(--style-corner-default);
  flex-shrink: 0;
  max-width: max-content;
  height: 2em;
  padding: 0 0.5em;
  font-family: 'Ubuntu', monospace;
  font-size: var(--text-size-s);
}

.Code-l {
  font-size: var(--text-size-n);
}

cm-code-editor {
  height: 100%;
  width: 100%;
  display: block;
  position: relative;
  border-radius: var(--style-corner-default);
  border: var(--style-panel-border);
  overflow: hidden;
  transition: border-color var(--style-animation-speed-normal);
  background-color: transparent;
}

cm-code-editor .Code-editor {
  position: absolute;
  inset: 0;
}

cm-code-editor[data-themed] * {
  transition: background-color var(--style-animation-speed-normal)
}

cm-coin {
  display: inline-block;
  width: max-content;
  height: max-content;
  flex-shrink: 0;
  vertical-align: middle;
}

.Coin-svg {
  width: calc(32 * var(--rem-px));
  height: calc(32 * var(--rem-px));
}

.Coin-s > .Coin-svg {
  width: calc(24 * var(--rem-px));
  height: calc(24 * var(--rem-px));
}

.Coin-l > .Coin-svg {
  width: calc(48 * var(--rem-px));
  height: calc(48 * var(--rem-px));
}

.Coin-xl > .Coin-svg {
  width: calc(64 * var(--rem-px));
  height: calc(64 * var(--rem-px));
}

.Coin-sprite-hider {
  overflow: hidden;
  width: 0;
  height: 0;
  position: fixed;
  left: 100vw;
}

cm-color-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.Color-icon-svg {
  fill: none;
  transition:
    stroke var(--style-animation-speed-normal),
    transform var(--style-animation-speed-normal);
  width: calc(24 * var(--rem-px));
  height: calc(24 * var(--rem-px));
}

.Icon-s > .Color-icon-svg {
  width: calc(16 * var(--rem-px));
  height: calc(16 * var(--rem-px));
}

.Icon-l {
  height: calc(48 * var(--rem-px));
  width: calc(48 * var(--rem-px));
  padding: calc(4 * var(--rem-px));
}
.Icon-l > .Color-icon-svg {
  width: calc(40 * var(--rem-px));
  height: calc(40 * var(--rem-px));
}

.Icon-sprite-hider {
  overflow: hidden;
  width: 0;
  height: 0;
  position: fixed;
  top: -1px;
  left: -1px;
}

.Icon-flip180 > .Color-icon-svg {
  transform: rotateX(180deg);
}

.Dialog {
  border-radius: var(--style-corner-default);
  display: flex;
  flex-direction: column;
  width: max-content;
  z-index: var(--z-above);
}

.Dialog-titlebar {
  background-color: var(--color-dialog-titlebar-background);
  color: var(--color-label-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: var(--text-weight-bold);
  padding: 0 var(--style-gap-xl);
  height: var(--style-input-h-n);
  flex-shrink: 0;
  border-top-left-radius: var(--style-corner-default);
  border-top-right-radius: var(--style-corner-default);
  transition: color var(--style-animation-speed-normal), background-color var(--style-animation-speed-normal);
}

.Dialog-titlebar + .Panel {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.Dialog-button-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--style-gap-n);
  margin-top: var(--style-gap-n);
  padding: var(--style-gap-xl) 0 0;
  border-top: 1px solid var(--color-border-inverse);
  flex-shrink: 0;
}

cm-dropdown {
  display: inline-block;
  position: relative;
  pointer-events: all;
  width: 100%;
}

cm-dropdown > details summary span {
  width: 100%;
}

cm-dropdown fieldset legend {
  width: 0;
}

cm-dropdown > dropdown[disabled] {
  cursor: not-allowed;
}

cm-dropdown > dropdown[disabled] > * {
  pointer-events: none;
}

.Dropdown > fieldset {
  --dropdown-top: auto;
  --dropdown-left: auto;
  --dropdown-right: auto;
  --dropdown-bottom: auto;
  --dropdown-min-width: calc(80 * var(--rem-px));
  position: fixed;
  top: var(--dropdown-top);
  left: var(--dropdown-left);
  right: var(--dropdown-right);
  bottom: var(--dropdown-bottom);
  border: var(--style-panel-border);
  border-bottom-width: var(--style-panel-bottom-border);
  padding: var(--style-gap-n);
  border-radius: var(--style-corner-default);
  background: var(--color-panel-face);
  width: max-content;
  z-index: var(--z-middle);
  max-height: 40vh;
  min-width: var(--dropdown-min-width);
  overflow-y: auto;
  transition:
    color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);

  scrollbar-width: thin; /* not all browsers (any?) support px width */
  scrollbar-width: var(--style-scrollbar-w);
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.Dropdown > fieldset label {
  cursor: pointer;
  transition: none !important;
}

/**

  ------------------------------------|
    |           |         |           |
  C | <-- P --> | <- A -> | <-- P --> |
    |           |         |           |
    |           | <------- B -------> |
  ------------------------------------|

  C = content
  P = padding
  A = scrollbar track width
  B = scrollbar width

 */

.Dropdown > fieldset::-webkit-scrollbar {
  background: transparent;
  width: calc(var(--style-gap-n) + var(--style-scrollbar-w));
}

.Dropdown > fieldset::-webkit-scrollbar-track {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-inline-track);
}

.Dropdown > fieldset::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-thumb);
}

.Dropdown > fieldset::-webkit-scrollbar-track,
.Dropdown > fieldset::-webkit-scrollbar-thumb {
  border: var(--style-gap-n) solid transparent;
  border-left-width: calc(var(--style-scrollbar-w) / 2);
  border-right-width: calc(var(--style-gap-n) - var(--style-scrollbar-w) / 2);
}

.Dropdown > summary {
  width: 100%;
  justify-content: space-between;
}

.Dropdown > summary cm-icon:last-child {
  transition: transform var(--style-animation-speed-slow);
}

.Dropdown[open] summary > cm-icon:last-child,
.Dropdown[open] summary > * > cm-icon:last-child {
  transform: rotate(180deg);
}

.Dropdown > fieldset input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.Dropdown > fieldset input:checked + label:hover {
  color: var(--color-label-inverse);
}

.Dropdown .Button *:first-child {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.Dropdown .Button *:first-child > cm-icon {
  margin-left: -4px;
}

cm-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.Icon-svg {
  stroke-linecap: round;
  fill: none;
  transition:
    stroke var(--style-animation-speed-fast),
    transform var(--style-animation-speed-fast);

  stroke-width: calc(1.5 * var(--rem-px));
  width: calc(24 * var(--rem-px));
  height: calc(24 * var(--rem-px));
}

.Icon-s > .Icon-svg {
  stroke-width: calc(2 * var(--rem-px));
  width: calc(16 * var(--rem-px));
  height: calc(16 * var(--rem-px));
}

.Icon-l {
  height: calc(48 * var(--rem-px));
  width: calc(48 * var(--rem-px));
  padding: calc(4 * var(--rem-px));
}
.Icon-l > .Icon-svg {
  width: calc(40 * var(--rem-px));
  height: calc(40 * var(--rem-px));
}

.Icon-sprite-hider {
  overflow: hidden;
  width: 0;
  height: 0;
  position: fixed;
  top: -1px;
  left: -1px;
}

.Icon-flip180 > .Icon-svg {
  transform: rotateX(180deg);
}

.Icon-spin > .Icon-svg {
  transform-origin: center;
  animation: Icon-spin var(--style-animation-easing-bazier) infinite 2s;
}

@keyframes Icon-spin {
  from {  transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

cm-info-popup {
  display: inline-block;
  position: relative;
  max-width: max-content;
  max-height: max-content;
  flex-shrink: 0;
  text-transform: none;
  text-align: left;
  font-size: var(--eff-base-size);
  font-weight: var(--text-weight-normal);
}

cm-info-popup > details > summary {
  color: var(--color-info-popup-icon);
  transition: color var(--style-animation-speed-normal);
}

cm-info-popup > details > summary > cm-icon[name="info"]:hover {
  color: var(--color-info-popup-icon-active);
}

.Info-content {
  position: absolute;
  z-index: 999;
  background-color: var(--color-info-popup-bg);
  color: var(--color-info-popup-text);
  padding: var(--style-gap-n);
  border-radius: var(--style-corner-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(280 * var(--rem-px));
  width: max-content;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: normal;
}
.Info-content-top-left {
  top: calc(50% - var(--style-gap-l));
  left: calc(100% + var(--style-gap-n));
}
.Info-content-top-center {
  top: calc(100% + var(--style-gap-n));
  left: 50%;
  transform: translateX(-50%);
}
.Info-content-top-right {
  top: calc(50% - var(--style-gap-l));
  right: calc(100% + var(--style-gap-n));
}
.Info-content-center-left {
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + var(--style-gap-n));
}
.Info-content-center-right {
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + var(--style-gap-n));
}
.Info-content-bottom-left {
  bottom: calc(50% - var(--style-gap-l));
  left: calc(100% + var(--style-gap-n));
}
.Info-content-bottom-center {
  bottom: calc(100% + var(--style-gap-n));
  left: 50%;
  transform: translateX(-50%);
}
.Info-content-bottom-right {
  bottom: calc(50% - var(--style-gap-l));
  right: calc(100% + var(--style-gap-n));
}
.Info-content::before {
  --info-top: 0;
  --info-left: 50%;
  --info-right: auto;
  --info-bottom: auto;
  --info-translate-x: -50%;
  --info-translate-y: -50%;
  position: absolute;
  content: '';
  height: var(--style-gap-n);
  width: var(--style-gap-n);
  background-color: var(--color-info-popup-bg);
  transform: translate(var(--info-translate-x), var(--info-translate-y)) rotate(45deg);
  left: var(--info-left);
  top: var(--info-top);
  right: var(--info-right);
  bottom: var(--info-bottom);
}

.Info-content-center-left::before,
.Info-content-center-right::before {
  --info-top: 50%;
}
.Info-content-top-left::before,
.Info-content-top-right::before {
  --info-top: var(--style-gap-l);
}
.Info-content-top-left::before {
  --info-left: 0;
}
.Info-content-top-right::before {
  --info-left: auto;
  --info-right: 0;
  --info-translate-x: 50%;
}
.Info-content-center-left::before,
.Info-content-center-right::before {
  --info-top: 50%;
}
.Info-content-center-left::before {
  --info-left: 0;
}
.Info-content-center-right::before {
  --info-left: auto;
  --info-right: 0;
  --info-translate-x: 50%;
}
.Info-content-bottom-center::before {
  --info-top: auto;
  --info-left: 50%;
  --info-bottom: 0;
  --info-translate-y: 50%;
}
.Info-content-bottom-left::before,
.Info-content-bottom-right::before {
  --info-top: auto;
  --info-bottom: var(--style-gap-s);
}
.Info-content-bottom-left::before {
  --info-left: 0;
}
.Info-content-bottom-right::before {
  --info-left: auto;
  --info-right: 0;
  --info-translate-x: 50%;
}

.Input,
.Input-l,
cm-editable[active] input,
body:not([data-pointer]) .Editable input:focus {
  background: var(--color-input-field);
  border: var(--style-border-width) solid var(--color-input-border);
  color: var(--color-label-default);
  border-radius: var(--style-corner-default);
  font-family: inherit;
  font-size: var(--text-size-input-n);
  font-weight: normal;
  width: 100%;
  transition:
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal),
    color var(--style-animation-speed-normal);
}

.Input,
cm-editable[active] input,
body:not([data-pointer]) .Editable input:focus {
  padding: var(--style-input-padding-n);
  height: var(--style-input-h-n);
}

.Input-l {
  font-size: var(--text-size-input-l);
  padding: var(--style-gap-l) var(--style-gap-xl);
  height: var(--style-input-h-l);
}

:is(
  .Input,
  .Input-l,
  cm-editable[active] input,
  body:not([data-pointer]) .Editable input:focus
)::placeholder {
  color: var(--color-input-border);
  transition: color var(--style-animation-speed-normal);
}

:is(.Input, .Input-l, cm-editable[active] input, body:not([data-pointer]) .Editable input:focus):disabled {
  background-color: var(--color-input-field-disabled);
  border-color: var(--color-input-border-disabled);
  color: var(--color-input-border-disabled)
}
:is(.Input, .Input-l):disabled::placeholder,
:is(.Input, .Input-l):disabled:is(:hover, :focus)::placeholder {
  color: var(--color-input-border-disabled);
}

:is(.Input, .Input-l, cm-editable[active] input, body:not([data-pointer]) .Editable input:focus):not(:disabled):hover {
  border-color: var(--color-input-border-attn);
}

:is(.Input, .Input-l, cm-editable[active] input, .Editable input):not(:disabled):focus {
  box-shadow: inset 0 2px 0 var(--color-input-border);
  background: var(--color-input-field-attn);
}

:is(.Input, .Input-l, cm-editable[active] input, .Editable input):is(:hover, :focus)::placeholder {
  color: var(--color-input-border);
}

.Input-with-icon {
  width: 100%;
  display: inline-block;
  position: relative;
  height: max-content;
}

.Input-with-icon > .Input + * {
  position: absolute;
  right: calc(var(--style-gap-s) + var(--style-border-width));
  top: calc(var(--style-gap-s) + var(--style-border-width));
}

.Input-with-icon > .Input-l + * {
  position: absolute;
  right: calc(var(--style-gap-l) + var(--style-border-width));
  top: calc(var(--style-gap-l) + var(--style-border-width));
}

.Input-with-icon > .Input {
  padding-right: calc(var(--style-border-width) + var(--style-gap-n) + calc(24 * var(--rem-px)));
}

.Input-error {
  border-color: var(--color-input-border-error);
  background: var(--color-input-field-error);
  color: var(--color-input-border-error);
}

.Input-error::placeholder {
  color: var(--color-input-border-error);
}

.Input-label {
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-n);
}

.Line-h-light,
.Line-h-dark,
.Line-v-light,
.Line-v-dark {
  border-radius: 1px;
  border: none;
  flex-shrink: 0;
  transition: background-color var(--style-animation-speed-normal);
}

.Line-h-light,
.Line-h-dark {
  display: block;
  width: 100%;
  height: 1px;
}

.Line-v-light,
.Line-v-dark {
  display: inline-block;
  height: 100%;
  min-height: 1.2em;
  width: 1px;
  vertical-align: middle;
}

.Line-h-light,
.Line-v-light {
  background: var(--color-separator-line-light);
}

.Line-h-dark,
.Line-v-dark {
  background: var(--color-line);
}

.Link {
  text-decoration: underline;
  font-family: 'Ubuntu Mono', monospace;
}

.Link:hover,
.Link:focus {
  text-decoration: none;
}

.Link,
.Link:visited,
.Link:active {
  color: var(--color-link);
}

.List-item,
.Dropdown > fieldset label,
.Dropdown > ul li {
  display: flex;
  align-items: center;
  padding: var(--style-gap-n);
  border-top: var(--style-line-lighter);
  min-width: 100%;
  height: calc(32 * var(--rem-px));
  transition:
    color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
  gap: var(--style-gap-n);
}

.Dropdown > ul li {
  transition: none;
}

.List-button {
  background: transparent;
  justify-content: space-between;
  border-left: none;
  border-bottom: none;
  border-right: none;
  cursor: pointer;
}

.List-item:last-of-type,
.Dropdown > fieldset label:last-of-type,
.Dropdown > ul li:last-of-type {
  border-bottom: var(--style-line-lighter);
}

.List-button:hover,
.Dropdown > fieldset label:hover,
.Dropdown > ul li:not([checked]):hover,
.Dropdown > fieldset body:not([data-pointer]) input:focus + label {
  background: var(--color-selectable-hover-face);
  color: var(--color-selectable-hover-label);
}

.List-selected,
.Dropdown > ul li[checked],
.Dropdown > fieldset input:checked + :is(label, label:hover, label:focus) {
  background: var(--color-face-inverse);
  color: var(--color-label-inverse);
  justify-content: space-between;
}

.List-button:disabled,
.List-separated:disabled {
  background-color: var(--color-face-muted);
  color: var(--color-label-muted);
  cursor: not-allowed;
}
.List-separated,
.List-separated:last-of-type {
  border-bottom: none;
  border-top: none;
  justify-content: space-between;
}
.List-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}
.List-separated:not(:disabled):hover {
  background: var(--color-selectable-hover-face);
}
.List-separated:not(:disabled, .List-selected):active,
.List-button:not(:disabled, .List-active):active {
  background: var(--color-face-pressed-default);
}
.List-active,
.List-active:last-of-type,
.List-active:hover,
.List-active:active {
  font-weight: var(  --text-weight-bold);
  border-top: 1px solid var(--color-border-attn-default);
  border-bottom: 1px solid var(--color-border-attn-default);
  background: none;
}

.Loader-quote,
.Loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.Loader-small {
  position: relative;
  width: 16rem;
  height: max-content;
}

.Loader-large {
  position: relative;
  width: clamp(16rem, 100%, 32rem);
  height: max-content;
  aspect-ratio: 16 /10;
}

.Loader:hover .Loader-bg,
.Loader:hover .Loader-bg::after {
  animation-play-state: paused;
}

.Loader-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(
    0 0, 
    0 100%, 
    var(--style-loader-frame) 100%, 
    var(--style-loader-frame) var(--style-loader-frame), 
    calc(100% - var(--style-loader-frame)) var(--style-loader-frame), 
    calc(100% - var(--style-loader-frame)) calc(100% - var(--style-loader-frame)), 
    var(--style-loader-frame) calc(100% - var(--style-loader-frame)), 
    var(--style-loader-frame) 100%, 
    100% 100%, 
    100% 0%
  );
}

.Loader-pro .Loader-bg {
  background-color: var(--color-loader-background);
  clip-path: polygon(
    0 0, 
    0 100%, 
    var(--style-loader-line) 100%, 
    var(--style-loader-line) var(--style-loader-line), 
    calc(100% - var(--style-loader-line)) var(--style-loader-line), 
    calc(100% - var(--style-loader-line)) calc(100% - var(--style-loader-line)), 
    var(--style-loader-line) calc(100% - var(--style-loader-line)), 
    var(--style-loader-line) 100%, 
    100% 100%, 
    100% 0%
  );
  overflow: hidden;
}

.Loader-pro .Loader-bg::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--color-loader-line);
  transform-origin: top left;
  animation: pro-animation 8s ease-in-out infinite;
}

.Loader-pro.Loader-small::after {
  width: 2rem;
  height: 2rem;
}

.Loader-community .Loader-bg {
  animation: community-animation 32s linear infinite;
}

.Loader-quote {
  padding: calc(var(--style-loader-frame) * 2);
  width: 100%;
  height: 100%;
  color: var(--color-text);
  font-family: 'Ubuntu', monospace;
  box-sizing: border-box;
  z-index: 2;
}

.Loader-quote p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 0;
}            

.Loader-quote p::before,
.Loader-quote p::after {
  display: block;
  content: '.';
  opacity: 1;
}

.Loader-quote p::before {
  animation: loading1 1s step-end infinite;
  order: 2;
}

.Loader-quote p::after {
  animation: loading2 1s step-end infinite;
  order: 3;
}

.Loader-quote p:last-of-type {
  width: 100%;
  text-align: right;
  margin: 0;
}

@media (max-width: 960px) {
  :root {
    --thick: 2rem;
  }
}    

@media screen and (max-width: 960px) {
  .Loader-pro.Loader-large::after {
    width: 2rem;
    height: 2rem;
  }
}

@keyframes community-animation {
  0% {
    background-image: var(--gradient-loader-blue-red);
    background-position: bottom 8rem center;
  }
  25% {
    background-image: var(--gradient-loader-blue-red);
    background-position: bottom 0 center;
  }
  25.1% {
    background-image: var(--gradient-loader-red);
  }
  50% {
    background-image: var(--gradient-loader-red);
  }
  50.1% {
    background-image: var(--gradient-loader-yellow-green);
    background-position: bottom 0 center;
  }
  75% {
    background-image: var(--gradient-loader-yellow-green);
    background-position: bottom 8rem center;
  }
  75.1% {
    background-image: var(--gradient-loader-blue);
  }
  100% {
    background-image: var(--gradient-loader-blue);
  }
}

@keyframes pro-animation {
  0% {
    transform: translate(calc(-100% + var(--style-loader-line)),calc(-100% + var(--style-loader-line)));
  }
  25% {
    transform: translate(calc(100% - var(--style-loader-line)),calc(-100% + var(--style-loader-line)));
  }
  50% {
    transform: translate(calc(100% - var(--style-loader-line)),calc(100% - var(--style-loader-line)));
  }
  75% {
    transform: translate(calc(-100% + var(--style-loader-line)),calc(100% - var(--style-loader-line)));
  }
  100% {
    transform: translate(calc(-100% + var(--style-loader-line)),calc(-100% + var(--style-loader-line)));
  }
}

@keyframes loading1 {
  0% {opacity: 0;}
  25% {opacity: 1;}
}

@keyframes loading2 {
  0% {opacity: 0;}
  50% {opacity: 1;}
}

/** Level 1 items */
/* Default to use parent 'li' styles */
cm-accordion .NavList-item > * {
  height: 100%;
  padding: 0;
}

.NavList cm-accordion summary,
.NavList cm-accordion[open] summary {
  background-color: inherit;
  color: inherit;
  height: calc(48 * var(--rem-px));
}

.NavList {
  --style-list-level2-padding: 0.8rem;
}

body:not([data-pointer]) .NavList-item:focus-within {
  border-radius: var(--style-corner-default);
}

.NavList a {
  text-decoration: none;
}

.NavList cm-accordion summary {
  line-height: normal;
  padding: var(--style-gap-n);
}

.NavList cm-accordion summary span {
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-l);
}

.NavList > li ul > li > :is(a, button) {
  padding-right: var(--style-list-level2-padding);
}

.NavList .NavList-selected {
  background: var(--color-face-inverse);
  color: var(--color-label-inverse);
}

.NavList-item :is(a, button) {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-l);
}

.NavList-item :is(a, button),
.NavList li ul li :is(a, button) {
  display: flex;
  cursor: pointer;
  align-items: center;
  padding: var(--style-gap-n);
  gap: var(--style-gap-n);
  color: inherit;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

.NavList-item,
.NavList li ul li {
  transition:
    color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
}

.NavList-item:is(:hover, :focus),
.NavList li ul li:not(.NavList-selected):is(:hover, :focus) {
  background-color: var(--color-selectable-hover-face);
  color: var(--color-selectable-hover-label);
}

.NavList-item :is(cm-icon, cm-icon-color, cm-icon-coin) {
  display: inline-flex;
}

.NavList-item {
  height: calc(48 * var(--rem-px));
}

.NavList li ul li {
  min-height: calc(32 * var(--rem-px));
}
nav .Line-h-light {
  margin: var(--style-gap-xl) 0;
}

cm-paginator {
  display: flex;
  gap: var(--style-gap-n);
  align-items: center;
}

.Paginator-first,
.Paginator-last,
.Paginator-next,
.Paginator-prev,
.Paginator-page,
.Paginator-page-m,
.Paginator-more-next,
.Paginator-more-prev {
  min-width: 4.5ch;
}

.Paginator-more-next,
.Paginator-more-prev {
  display: inline-flex;
  justify-content: center;
}

.Paginator-current {
  border: none;
  background-color: var(--color-paginator-current-bg) !important;
  color: var(--color-paginator-current-text) !important;
}

@media screen and (max-width: 680px) {
  .Paginator-first,
  .Paginator-last,
  .Paginator-more-prev,
  .Paginator-more-next,
  .Paginator-next,
  .Paginator-prev,
  .Paginator-page {
    display: none;
    visibility: hidden;
  }
}

@media screen and (min-width: 681px) {
  .Paginator-start,
  .Paginator-end,
  .Paginator-page-m {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: 750px) {
  .PaginatorLabel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
  }
}

.Panel {
  border: var(--style-panel-border);
  border-bottom-width: var(--style-panel-bottom-border);
  padding: var(--style-gap-xl);
  border-radius: var(--style-corner-default);
  background: var(--color-panel-face);
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-xl);
  width: 100%;
  transition:
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
  min-width: 30ch;
}

cm-popup {
  display: inline-block;
  position: relative;
  max-width: max-content;
  max-height: max-content;
  flex-shrink: 0;
}

cm-popup[disabled] {
  cursor: not-allowed;
}

cm-popup[disabled] > * {
  pointer-events: none;
}

.Popup-dialog {
  --popup-dialog-top: auto;
  --popup-dialog-left: auto;
  --popup-dialog-right: auto;
  --popup-dialog-bottom: auto;
  position: fixed;
  top: var(--popup-dialog-top);
  left: var(--popup-dialog-left);
  right: var(--popup-dialog-right);
  bottom: var(--popup-dialog-bottom);
  z-index: var(--z-high);
  overflow: hidden;
}

.Popup-pre-orientation {
  opacity: 0;
}

.Popup-closed {
  opacity: 0;
}

cm-range-slider,
.cm-range-slider {
  --slider-left: 0;
  --slider-right: 0;

  display: inline-block;
  width: 100%;
  padding: 0 calc(var(--style-range-slider-handle-width) / 2 + var(--style-gap-xs));
  background-color: var(--color-range-slider-track);
  border: 1px solid var(--color-range-slider-border);
  box-shadow: inset 0 1px var(--color-range-slider-border);
  border-radius: var(--style-corner-default);
}

cm-range-slider[disabled],
.cm-range-slider[disabled] {
  cursor: not-allowed;
}

cm-range-slider[disabled] > .RangeSlider,
.cm-range-slider[disabled] > .RangeSlider {
  pointer-events: none;
}

.RangeSlider {
  position: relative;
  width: 100%;
  touch-action: none;
  height: var(--style-range-slider-height);
}

.RangeSlider-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slider-left);
  right: var(--slider-right);
  padding: var(--style-gap-s) 0;
  cursor: move;
}

.RangeSlider-slider::before {
  content: '';
  display: block;
  height: 100%;
  border-radius: var(--style-corner-default);
  background-color: var(--color-range-slider-slider-face);
  border: 1px solid var(--color-range-slider-slider-border);
  box-shadow: 0 0.07rem 0 var(--color-range-slider-slider-border);
}

.RangeSlider-handle-l,
.RangeSlider-handle-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--style-range-slider-handle-width);
  cursor: ew-resize;
  padding: var(--style-gap-n) 0;
}

:is(.RangeSlider-handle-l, .RangeSlider-handle-r)::before {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  display: block;
  background: var(--color-range-slider-handle-face);
  border: 1px solid var(--color-range-slider-handle-border);
  box-shadow: 0 0.07rem var(--color-range-slider-handle-border);
  border-radius: calc(var(--style-corner-default) * 0.66);
  width: var(--style-range-slider-handle-width);
  height: 100%;
}

:is(.RangeSlider-handle-l, .RangeSlider-handle-r)::after {
  content: '';
  height: var(--style-range-slider-notch-height);
  position: absolute;
  width: var(--style-range-slider-notch-width);
  border-left:1px solid var(--color-range-slider-handle-notch);
  border-right:1px solid var(--color-range-slider-handle-notch);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.RangeSlider-handle-l {
  left: 0;
  transform: translateX(-50%);
}

.RangeSlider-handle-r {
  right: 0;
  transform: translateX(50%);
}

cm-range-slider[disabled] .RangeSlider-slider::before,
.cm-range-slider[disabled] .RangeSlider-slider::before {
  background-color: var(--color-range-slider-slider-face-disabled);
  border-color: var(--color-range-slider-slider-border-disabled);
  box-shadow: inset 0 1px 0 var(--color-range-slider-slider-border-disabled);
}

cm-range-slider[disabled] :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::before,
.cm-range-slider[disabled] :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::before {
  background-color: var(--color-range-slider-handle-face-disabled);
  border-color: var(--color-range-slider-handle-border-disabled);
  box-shadow: 0 1px 0 var(--color-range-slider-handle-border-disabled);
}

cm-range-slider[disabled] :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::after,
.cm-range-slider[disabled] :is(.RangeSlider-handle-l, .RangeSlider-handle-r)::after {
  border-color: var(--color-range-slider-handle-border-disabled);
}

.Scrollbox-v-n,
.Scrollbox-v-l,
.Scrollbox-h-n,
.Scrollbox-h-l {
  scrollbar-width: thin; /* not all browsers (any?) support px width */
  scrollbar-width: var(--style-scrollbar-w);
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

:is(
  .Scrollbox-v-n,
  .Scrollbox-v-l,
  .Scrollbox-h-n,
  .Scrollbox-h-l
) > * {
  flex-shrink: 0;
}

.Scrollbox-v-n,
.Scrollbox-v-l {
  overflow-y: auto;
  overflow-x: hidden;
}

.Scrollbox-h-n,
.Scrollbox-h-l {
  overflow-x: auto;
  overflow-y: hidden;
}

.Scrollbox-body {
  overflow: auto;
}

.Scrollbox-v-n::-webkit-scrollbar,
.Scrollbox-h-n::-webkit-scrollbar,
.Scrollbox-v-l::-webkit-scrollbar,
.Scrollbox-h-l::-webkit-scrollbar {
  background: transparent;
}

.Scrollbox-v-n::-webkit-scrollbar-track,
.Scrollbox-h-n::-webkit-scrollbar-track,
.Scrollbox-v-l::-webkit-scrollbar-track,
.Scrollbox-h-l::-webkit-scrollbar-track {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-inline-track);
}

.Scrollbox-v-n::-webkit-scrollbar-thumb,
.Scrollbox-h-n::-webkit-scrollbar-thumb,
.Scrollbox-v-l::-webkit-scrollbar-thumb,
.Scrollbox-h-l::-webkit-scrollbar-thumb,
.Scrollbox-body::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-thumb);
}

.Scrollbox-v-n::-webkit-scrollbar,
.Scrollbox-h-n::-webkit-scrollbar,
.Scrollbox-body::-webkit-scrollbar {
  width: var(--style-scrollbar-track-w-n);
  height: var(--style-scrollbar-track-w-n);
}

.Scrollbox-v-l::-webkit-scrollbar,
.Scrollbox-h-l::-webkit-scrollbar {
  width: var(--style-scrollbar-track-w-l);
  height: var(--style-scrollbar-track-w-l);
}

/* Vertical scrollboxes */

.Scrollbox-v-n::-webkit-scrollbar-track,
.Scrollbox-v-n::-webkit-scrollbar-thumb {
  border-left: var(--style-scrollbar-padding-n) solid transparent;
}

.Scrollbox-v-l::-webkit-scrollbar-track,
.Scrollbox-v-l::-webkit-scrollbar-thumb {
  border-left: var(--style-scrollbar-padding-l) solid transparent;
}

/* Horizontal scrollboxes */

.Scrollbox-h-n::-webkit-scrollbar-track,
.Scrollbox-h-n::-webkit-scrollbar-thumb {
  border-top: var(--style-scrollbar-padding-n) solid transparent;
}

.Scrollbox-h-l::-webkit-scrollbar-track,
.Scrollbox-h-l::-webkit-scrollbar-thumb {
  border-top: var(--style-scrollbar-padding-l) solid transparent;
}

.Scrollbox-body::-webkit-scrollbar-track {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-track);
}

.Scrollbox-body::-webkit-scrollbar-track,
.Scrollbox-body::-webkit-scrollbar-thumb {
  border: 4px solid var(--color-scrollbar-track);
}

cm-sidebar {
  --color-sidebar-active-toggle-bg: var(--color-primary-darkest-purple);
  --style-popup-gap: var(--style-gap-xl);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  width: var(--style-sidebar-width);
}

.Sidebar-extras {
  --max-width: calc(480 * var(--rem-px));
  background-color: var(--color-sidebar-bg);
  color: var(--color-text);
  border-left: 1px solid var(--color-sidebar-separator);
  padding: var(--style-sidebar-content-padding);

  display: flex;
  flex-direction: column;
  gap: var(--style-gap-n);
  transition: 
    transform var(--style-animation-speed-slow),
    max-width var(--style-animation-speed-slow);
  width: 100vw;
  max-width: min(calc(100vw - var(--style-sidebar-width)), calc(var(--max-width) - var(--style-sidebar-width)));

  position: absolute;
  top: 0;
  left: auto;
  bottom: 0;
}

.Sidebar-extras[data-expanded] {
  --max-width: max(50vw, 650 * var(--rem-px));
}

cm-sidebar[section]:not([section=""]) .Sidebar-extras {
  transform: translateX(-100%);
}

.Sidebar-toolbar {
  background-color: var(--color-sidebar-bg);
  width: var(--style-sidebar-width);
  padding: var(--style-sidebar-padding);
  border-left: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--style-sidebar-padding);

  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: none;
  transition: border-left-color var(--style-animation-speed-slow);
  z-index: 1;
}

cm-sidebar[section]:not([section=""]) .Sidebar-toolbar {
  border-left-color: var(--color-sidebar-separator)
}

.Sidebar-toolbar-line {
  transition: background-color var(--style-animation-speed-normal);
  width: 100%;
  flex: 0 0 1px;
  background-color: var(--color-primary-white); 
}

.Sidebar-toolbar-line ~ .Sidebar-toolbar-line {
  /* the subsequent-sibling combinator here is a clever way of selecting
      everything _after_ the first instance */
  background-color: var(--color-primary-purple); 
}

.Sidebar-toggle-button,
.Sidebar-button {
  color: var(--color-primary-white);
  transition: background-color var(--style-animation-speed-normal);
  width: var(--style-input-h-n);
  padding: var(--style-gap-s);
}

details:not([open]) > .Sidebar-button-info {
  color: var(--color-border-info);
}

details:not([open]) > .Sidebar-button-success {
  color: var(--color-border-success);
}

details:not([open]) > .Sidebar-button-warning {
  color: var(--color-border-warning);
}

details:not([open]) > .Sidebar-button-error {
  color: var(--color-border-error);
}

.Sidebar-toggle-active,
.Sidebar-toolbar details[open] > .Sidebar-button {
  background-color: var(--color-sidebar-active-toggle-bg);
}

.Sidebar-toggle-button:not(:disabled):hover,
.Sidebar-button:hover:not(:disabled) {
  background-color: var(--color-sidebar-hover-btn-bg);
}

.Sidebar-toggle-button:active,
.Sidebar-button:active {
  background-color: var(--color-sidebar-active-toggle-bg);
  color: var(--color-sidebar-active-btn-text);
}

cm-popup[open] > .Sidebar-button {
  background-color: var(--color-sidebar-active-btn-bg);
  border-radius: var(--style-corner-default);
}

.Sidebar-spacer {
  display: block;
  height: 100%;
  flex-grow: 1;
  border: none;
}

:is(
  .Sidebar-button,
  .Sidebar-toggle-button
)[disabled],
[disabled] :is(
  .Sidebar-button,
  .Sidebar-toggle-button
)
 {
  color: var(--color-primary-medium-purple);
  cursor: not-allowed;
}

cm-skeleton {
  background-color: var(--color-skeleton-bg);
}

.Skeleton-text-l {
  height: calc(32 * var(--rem-px));
}

.Skeleton-text-m {
  height: calc(24 * var(--rem-px));
}

.Skeleton-text-s {
  height: calc(16 * var(--rem-px));
}

:is(.Skeleton-icon-l, .Skeleton-icon-m, .Skeleton-icon-s) {
  border-radius: 50%;
}

.Skeleton-icon-l {
  height: calc(32 * var(--rem-px));
  width: calc(32 * var(--rem-px));
}

.Skeleton-icon-m {
  height: calc(24 * var(--rem-px));
  width: calc(24 * var(--rem-px));
}

.Skeleton-icon-s {
  height: calc(16 * var(--rem-px));
  width: calc(16 * var(--rem-px));
}

@keyframes skeletonAnimation {
  from {
    opacity: 1;
  }
  to {
    opacity: .5;
  }
}

.CM-Spotlight {
  display: contents;
}

.Spotlight {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  gap: var(--style-gap-huge);
}

.Spotlight cm-inline-svg {
  min-width: calc(256 * var(--rem-px));
}

.Spotlight-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--style-gap-xxxl);
  max-width: calc(300 * var(--rem-px));
}

.Spotlight-line-h-dark {
  border-radius: 1px;
  border: none;
  flex-shrink: 0;
  transition: background-color var(--style-animation-speed-normal);

  display: block;
  height: 1px;
  width: calc(80 * var(--rem-px));

  background: var(--color-line);
}

.Spotlight-columnar {
  flex-direction: column;
}

.Spotlight-columnar .Spotlight-content-wrapper {
  align-items: center;
}

@media screen and (max-width: 640px) {
  .Spotlight {
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--style-gap-xxxl);
  }

  .Spotlight-content-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--style-gap-xl);
  }

  .Spotlight cm-inline-svg {
    min-width: calc(128 * var(--rem-px));
  }
}

cm-table {
  --table-width: calc(100vw - 4 * var(--style-panel-padding) - var(--style-sidebar-width));
  --table-first-col-width: 0;
  display: block;
  width: 100%;
  overflow-x: auto;
}

cm-table table {
  font-size: var(--text-table-main);
  border-collapse: collapse;
  min-width: 100%;
}

cm-table thead {
  --table-pos-adjust: 0;
  position: relative;
  z-index: var(--z-above);
  transform: translateY(var(--table-pos-adjust));
}

cm-table tr > * {
  padding: var(--style-table-padding);
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  min-width: var(--table-width);
  color: var(--color-text);
  transition: color var(--style-animation-speed-normal);
}

cm-table tr > :first-child {
  text-align: left;
}

@media screen and (min-width: 412px) {
  cm-table tr > * {
    min-width: calc(var(--table-width) / 2);
  }
}

@media screen and (min-width: 712px) {
  cm-table tr > * {
    min-width: auto;
  }
}

cm-table thead th,
.Table-title {
  height: var(--style-table-header-height);
}

cm-table tbody > tr > * {
  border-bottom: 1px solid var(--color-table-border);
  height: var(--style-table-cell-height);
  background-color: var(--color-table-cell-background);
  transition:
    box-shadow var(--style-animation-speed-normal),
    color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
}

cm-table table tbody tr:hover th,
cm-table table tbody tr:hover td {
  background-color: var(--color-table-row-hover);
}

cm-table[numeric] tbody > tr > * {
  font-family: var(--text-table-numeric-cell-font);
}

cm-table thead th,
.Table-title {
  background-color: var(--color-table-header-background);
  transition:
    color var(--style-animation-speed-normal),
    box-shadow var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
}

cm-table.Scrollbox-h-n {
  scroll-snap-type: x mandatory;
}

cm-table.Scrollbox-h-n tbody :is(th, td) {
  scroll-snap-align: start;
}

@media screen and (min-width: 412px) {
  cm-table[sticky-col] th:first-child {
    position: sticky;
    left: -1px; /* if we place it at 0, elements below show on the left edge for some reason */
  }

  cm-table[sticky-col] thead th:first-child {
    /* HACK: using box-shadow instead of a border because the border will be scrolled with the cell instead of staying sticky */
    box-shadow: inset -1px 0 0 var(--color-table-header-border);
  }

  cm-table[sticky-col] tbody :is(td, th):first-child {
    /* HACK: using box-shadow instead of a border because the border will be scrolled with the cell instead of staying sticky */
    box-shadow: inset -1px 0 0 var(--color-table-border);
  }

  cm-table[sticky-col].Scrollbox-h-n {
    scroll-padding-left: var(--table-first-col-width);
  }
}

.Table-header-sortable,
.Table-header-sortable th {
  cursor: pointer;
}

.Table-header-sortable:hover,
.Table-header-sortable th:hover {
  background-color: var(--color-table-header-background-hover);
}

th.Table-header-sortable cm-icon[name="chevron-down"],
thead.Table-header-sortable th cm-icon[name="chevron-down"] {
  transition: transform var(--style-animation-speed-slow);
  color: var(--color-table-header-icon-normal);
}

th.Table-header-sortable:hover cm-icon[name="chevron-down"],
thead.Table-header-sortable th:hover cm-icon[name="chevron-down"] {
  color: var(--color-table-header-icon-emphasis);
}

th.Table-header-sortable-selected cm-icon[name="chevron-down"],
th.Table-header-sortable-selected:hover cm-icon[name="chevron-down"],
.Table-header-sortable th:hover cm-icon[name="chevron-down"].Table-header-sortable-selected,
.Table-header-sortable cm-icon[name="chevron-down"].Table-header-sortable-selected {
  color: var(--color-table-header-icon-active);
}

th.Table-header-sortable-up cm-icon[name="chevron-down"],
th.Table-header-sortable-asc cm-icon[name="chevron-down"],
th.Table-header-sortable cm-icon[name="chevron-down"].Table-header-sortable-up,
th.Table-header-sortable cm-icon[name="chevron-down"].Table-header-sortable-asc,
thead.Table-header-sortable th cm-icon[name="chevron-down"].Table-header-sortable-up, 
thead.Table-header-sortable th cm-icon[name="chevron-down"].Table-header-sortable-asc {
  transform: rotate(180deg);
}

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

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

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

.Table-title {
  display: flex;
  align-items: center;
  padding: 0 var(--style-gap-l);
}

cm-table td > * {
  vertical-align: middle;
}

cm-table td > .Text-mantissa {
  vertical-align: top;
}
thead.Table-header-sortable th:hover cm-info-popup summary cm-icon:not(:hover),
th.Table-header-sortable:hover cm-info-popup summary cm-icon:not(:hover) {
  color: var(--color-table-header-icon-emphasis);
}

.Tabs {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.Tabs.vertical {
  flex-direction: column;
}

.Tabs > input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.Tabs > label {
  background: transparent;
  border: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--color-line);
  padding: var(--style-gap-xl) calc(var(--style-gap-xl) + 1px); /* comp for border missing */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--style-gap-n);
  flex-grow: 1;
  height: calc(48 * var(--rem-px));
  font-size: var(--text-size-l);
  color: var(--color-label-muted);
  cursor: pointer;
}

.Tabs.vertical > label {
  border: none;
  border-right: 1px solid var(--color-line);
  margin: calc(1 * var(--rem-px));
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: start;
  margin-right: var(--style-gap-n);
}

.Tabs.vertical > label cm-icon {
  padding: calc(5 * var(--rem-px));
}

.Tabs > input:not([disabled]) + label:active {
  background-color: var(--color-input-field-attn);
  box-shadow: inset 0px 2px 0px var(--color-border-default);
  border-top-right-radius: var(--style-corner-default);
  border-top-left-radius: var(--style-corner-default);
  color: var(--color-label-default);
}

.Tabs-s > label {
  height: calc(40 * var(--rem-px));
  font-size: var(--text-size-n);
}

body:not([data-pointer]) .Tabs input:focus + label,
.Tabs label:hover {
  color: var(--color-label-default);
}

.Tabs:not(.vertical) > input:checked + label {
  border-top-right-radius: var(--style-corner-default);
  border-top-left-radius: var(--style-corner-default);
  border: 1px solid var(--color-line);
  border-bottom: none;
  color: var(--color-label-default);
  cursor: default;
}

.Tabs.vertical > input:checked + label {
  border-top-left-radius: var(--style-corner-default);
  border-bottom-left-radius: var(--style-corner-default);
  border: 1px solid var(--color-line);
  border-right: none;
  color: var(--color-label-default);
  cursor: default;
  padding: 0;
}

.Tabs > label,
.Tabs > input:checked + label {
  justify-content: flex-start;
  padding: 0 var(--style-gap-xl);
}

.Tabs > input:disabled + label:hover {
  cursor: not-allowed;
  color: var(--color-label-disabled);
  background-color: transparent;
}

@media screen and (max-width: 640px) {
  .Tabs label span {
    display: none;
  }

  .Tabs > label,
  .Tabs > input:checked + label {
    justify-content: center;
  }

  .Tabs.vertical > label,
  .Tabs.vertical > input:checked + label {
    justify-content: start;
  }
}

.Tag-primary,
.Tag-done,
.Tag-success,
.Tag-warning,
.Tag-error,
.Tag-info,
.Tag-muted,
.Tag-primary-l,
.Tag-done-l,
.Tag-success-l,
.Tag-warning-l,
.Tag-error-l,
.Tag-info-l,
.Tag-muted-l {
  display: inline-flex;
  align-items: center;
  gap: var(--style-gap-s);
  border-radius: var(--style-corner-default);
  flex-shrink: 0;
  max-width: max-content;
  height: 2em;
  padding: 0 0.5em;
}

.Tag-primary,
.Tag-done,
.Tag-success,
.Tag-warning,
.Tag-error,
.Tag-info,
.Tag-muted {
  font-size: var(--text-size-s);
}

:is(
  .Tag-primary,
  .Tag-done,
  .Tag-success,
  .Tag-warning,
  .Tag-error,
  .Tag-info,
  .Tag-muted,
  .Tag-primary-l,
  .Tag-done-l,
  .Tag-success-l,
  .Tag-warning-l,
  .Tag-error-l,
  .Tag-info-l,
  .Tag-muted-l
) > :is(
  cm-icon:last-child,
  :last-child > cm-icon:last-child,
  cm-color-icon:last-child,
  :last-child > cm-color-icon:last-child
) {
  margin-right: -0.25em;
}

:is(
  .Tag-primary,
  .Tag-done,
  .Tag-success,
  .Tag-warning,
  .Tag-error,
  .Tag-info,
  .Tag-muted,
  .Tag-primary-l,
  .Tag-done-l,
  .Tag-success-l,
  .Tag-warning-l,
  .Tag-error-l,
  .Tag-info-l,
  .Tag-muted-l
) > :is(
  cm-icon:first-child,
  :first-child > cm-icon:first-child,
  cm-color-icon:first-child,
  :first-child > cm-color-icon:first-child
) {
  margin-left: -0.25em;
}

.Tag-primary, .Tag-primary-l {
  background-color: var(--color-face-inverse);
  color: var(--color-label-inverse);
}

.Tag-done, .Tag-done-l,
.Tag-success, .Tag-success-l,
.Tag-warning, .Tag-warning-l,
.Tag-info, .Tag-info-l,
.Tag-muted, .Tag-muted-l {
  color: var(--color-label-always-dark-purple);
}

.Tag-done, .Tag-done-l {
  background-color: var(--color-face-done);
}

.Tag-success, .Tag-success-l {
  background-color: var(--color-face-success);
}

.Tag-warning, .Tag-warning-l {
  background-color: var(--color-face-warning);
}

.Tag-error, .Tag-error-l {
  background-color: var(--color-face-error);
  color: var(--color-label-always-white);
}

.Tag-info, .Tag-info-l {
  background-color: var(--color-face-info);
}

.Tag-muted, .Tag-muted-l {
  background-color: var(--color-face-muted-opaque);
}

.Text-content h1,
.Text-heading-1 {
  font-size: var(--text-size-xxxl);
  font-weight: var(--text-weight-bold);
}

.Text-page-title,
.Text-content h2,
.Text-heading-2 {
  font-size: var(--text-size-xxl);
  font-weight: var(--text-weight-bold);
}

.Text-content h3,
.Text-heading-3 {
  font-size: var(--text-size-xl);
  font-weight: var(--text-weight-bold);
}

.Text-content h4,
.Text-page-subtitle,
.Text-heading-4 {
  font-size: var(--text-size-l);
  text-transform: uppercase;
}

.Text-content h5,
.Text-heading-5 {
  font-size: var(--text-size-n);
  font-weight: var(--text-weight-bold);
}

.Text-content h6,
.Text-heading-6,
cm-table thead th,
.Table-title,
.Input-label > :not(input, select, textarea, .Input-with-icon) {
  font-size: var(--text-size-s);
  font-weight: var(--text-weight-bold);
  text-transform: uppercase;
}

.Text-bold {
  font-weight: var(--text-weight-bold);
}

.Text-large {
  font-size: var(--text-size-l);
}

.Text-regular {
  font-size: var(--text-size-n);
}

.Text-small {
  font-size: var(--text-size-s);
}

.Text-link {
  color: var(--color-link);
  text-decoration: underline;
  font-family: 'Ubuntu Mono', monospace;
  border: none;
  background: none;
  width: max-content;
}

.Text-content > :is(
  p,
  pre,
  h1,
  h2,
  h3,
  h4,
  h5,
  ul,
  ol
) {
  margin-bottom: var(--text-size-xl);
}

p,
.Text-content :is(
  p,
  pre,
  h1,
  h2,
  h3,
  h4,
  h5
) {
  line-height: 1.5;
}

.Text-content > :last-child {
  margin-bottom: 0;
}

.Text-content pre {
  border: var(--style-separator-line-light);
  border-radius: var(--style-corner-default);
  padding: var(--style-gap-n);
}

.Text-code,
.Text-content code,
.monospace {
  font-family: 'Ubuntu Mono', monospace;
}

.Text-content ul > li,
.Text-list > li,
.Text-list-item {
  padding-left: var(--text-list-padding);
  position: relative;
  margin-bottom: var(--style-gap-s);
}

.Text-content ul > li:before,
.Text-list > li:before,
.Text-list-item:before {
  content: '';
  display: block;
  position: absolute;
  width: var(--text-size-n);
  height: calc(var(--style-border-width) * 2);
  border-radius: var(--style-border-width);
  background-color: var(--color-text);
  left: var(--style-gap-s);
  top: calc(var(--text-size-n) * 0.6);
}

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

.Text-positive {
  color: var(--color-positive-label);
}

.Text-negative {
  color: var(--color-negative-label);
}

.Text-mantissa {
  color: var(--color-text-mantissa);
}

cm-text-dropdown {
  display: inline-block;
  position: relative;
  pointer-events: all;
  width: 100%;
}

cm-text-dropdown > fieldset details summary span {
  width: 100%;
}

cm-text-dropdown > fieldset legend {
  width: 0;
}

cm-text-dropdown > fieldset[disabled] {
  cursor: not-allowed;
}

cm-text-dropdown > fieldset[disabled] > * {
  pointer-events: none;
}

cm-text-dropdown summary cm-icon {
  position: absolute;
  top: 4px;/* (32 - 24) / 2 */
  right: 4px;
}

cm-text-dropdown > fieldset > details > ul {
  margin-top: var(--style-gap-s) !important;
  position: absolute;
  transition: none !important;
  width: 100% !important;
}

.Dropdown > ul {
  border: var(--style-panel-border);
  border-bottom-width: var(--style-panel-bottom-border);
  padding: var(--style-gap-n);
  border-radius: var(--style-corner-default);
  background: var(--color-panel-face);
  width: max-content;
  z-index: var(--z-high);
  max-height: 40vh;
  min-width: var(--dropdown-min-width);
  overflow-y: auto;
  scrollbar-width: thin; /* not all browsers (any?) support px width */
  scrollbar-width: var(--style-scrollbar-w);
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

.Dropdown > ul li {
  cursor: pointer;
}

/**

  ------------------------------------|
    |           |         |           |
  C | <-- P --> | <- A -> | <-- P --> |
    |           |         |           |
    |           | <------- B -------> |
  ------------------------------------|

  C = content
  P = padding
  A = scrollbar track width
  B = scrollbar width

 */

.Dropdown > ul::-webkit-scrollbar {
  background: transparent;
  width: calc(var(--style-gap-n) + var(--style-scrollbar-w));
}

.Dropdown > ul::-webkit-scrollbar-track {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-inline-track);
}

.Dropdown > ul::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--color-scrollbar-thumb);
}

.Dropdown > ul::-webkit-scrollbar-track,
.Dropdown > ul::-webkit-scrollbar-thumb {
  border: var(--style-gap-n) solid transparent;
  border-left-width: calc(var(--style-scrollbar-w) / 2);
  border-right-width: calc(var(--style-gap-n) - var(--style-scrollbar-w) / 2);
}

cm-toast-list {
  position: fixed;
  bottom: var(--style-gap-xxxl);
  margin: 0 auto;
  left: var(--style-gap-xl);
  right: var(--style-gap-xl);
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-n);
  z-index: 999;
}

@media screen and (min-width: 960px) {
  cm-toast-list {
    left: auto;
    margin: 0;
    right: var(--style-gap-xl);
    align-items: flex-end;
  }
}

cm-toast {
  display: block;
  max-height: 0;
  transition:
    max-height var(--style-animation-speed-slow),
    opacity var(--style-animation-speed-slow);
  overflow: hidden;
}

.Toast-info,
.Toast-error,
.Toast-warning,
.Toast-success {
  display: flex;
  flex: none;
  gap: var(--style-gap-xl);
  align-items: center;
  padding: var(--style-gap-n);
  border-style: solid;
  border-width: var(--style-border-width);
  border-radius: var(--style-corner-default);
}

@media screen and (min-width: 960px) {
  cm-toast > :first-child {
    transform: translateX(100%);
    transition: transform var(--style-animation-speed-slow);
  }
}

.Toast-shown {
  max-height: 4rem;
}

.Toast-shown > :first-child {
  transform: none;
}

.Toast-clear {
  opacity: 0;
  max-height: 0;
}

:is(
  .Toast-info,
  .Toast-success,
  .Toast-warning,
  .Toast-error
) > cm-icon:first-child {
  margin-left: 4px;
}

.Toast-separator {
  display: block;
  height: 32px;
  width: 1px;
  border-radius: 0.5px;
  border: none;
  flex-shrink: 0;
  flex-grow: 0;
}

.Toast-info,
.Toast-success,
.Toast-warning {
  color: var(--color-label-always-dark-purple);
}

.Toast-info {
  background-color: var(--color-face-info);
  border-color: var(--color-border-info);
  box-shadow: inset 0 calc(-1 * var(--style-border-width)) 0 var(--color-border-info);
}

.Toast-info > .Toast-separator {
  background-color: var(--color-border-info);
}

.Toast-success {
  background-color: var(--color-face-success);
  border-color: var(--color-border-success);
  box-shadow: inset 0 calc(-1 * var(--style-border-width)) 0 var(--color-border-success);
}

.Toast-success > .Toast-separator {
  background-color: var(--color-border-success);
}

.Toast-warning {
  background-color: var(--color-face-warning);
  border-color: var(--color-border-warning);
  box-shadow: inset 0 calc(-1 * var(--style-border-width)) 0 var(--color-border-warning);
}

.Toast-warning > .Toast-separator {
  background-color: var(--color-border-warning);
}

.Toast-error {
  background-color: var(--color-face-error);
  border-color: var(--color-border-error);
  box-shadow: inset 0 calc(-1 * var(--style-border-width)) 0 var(--color-border-error);
  color: var(--color-label-always-white);
}

.Toast-error > .Toast-separator {
  background-color: var(--color-border-error);
}

.Toast-title {
  font-weight: var(--text-weight-bold);
  flex-shrink: 0;
}

.Toast-content {
  width: 100%;
  flex-grow: 1;
}

[role="tooltip"] {
  --tooltip-top: auto;
  --tooltip-left: auto;
  --tooltip-right: auto;
  --tooltip-bottom: auto;
  --tooltip-arrow-offset-h: 50%;
  --tooltip-arrow-offset-v: 50%;
  --tooltip-arrow-width: calc(8 * var(--rem-px));
  position: fixed;
  top: var(--tooltip-top);
  left: var(--tooltip-left);
  right: var(--tooltip-right);
  bottom: var(--tooltip-bottom);
  background: var(--color-info-popup-bg);
  color: var(--color-info-popup-text);
  padding: var(--style-gap-n);
  border-radius: var(--style-corner-default);
  z-index: 999;
}

.Tooltip-hidden {
  visibility: hidden;
  pointer-events: none;
}

[role="tooltip"]::before {
  content: '';
  display: block;
  position: absolute;
  width: var(--tooltip-arrow-width);
  border: calc(var(--tooltip-arrow-width) / 2) solid transparent;
}

.Tooltip-arrow-down::before {
  border-top-color: var(--color-info-popup-bg);
  top: 100%;
}

.Tooltip-arrow-up::before {
  border-bottom-color: var(--color-info-popup-bg);
  bottom: 100%;
}

.Tooltip-arrow-left::before {
  border-right-color: var(--color-info-popup-bg);
  right: 100%;
}

.Tooltip-arrow-right::before {
  border-left-color: var(--color-info-popup-bg);
  left: 100%;
}

:is(.Tooltip-arrow-down, .Tooltip-arrow-up)::before {
  left: clamp(var(--tooltip-arrow-width), var(--tooltip-arrow-offset-h), calc(100% - var(--tooltip-arrow-width)));
  transform: translateX(-50%);
}

:is(.Tooltip-arrow-left, .Tooltip-arrow-right)::before {
  top: clamp(var(--tooltip-arrow-width), var(--tooltip-arrow-offset-v), calc(100% - var(--tooltip-arrow-width)));
  transform: translateY(-50%);
}

.ButtonGroup {
  display: inline-block;
}

.ButtonGroup {
  display: inline-flex;
}

.ButtonGroup > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ButtonGroup:not(:disabled) > :is(.Button:hover, body:not([data-pointer]) input:focus + .Button) {
  z-index: var(--z-above);
}

.ButtonGroup > .Button:not(:first-of-type) {
  margin-left: -1px; /* collapse borders */
}

.ButtonGroup > .Button:not(:first-of-type):not(:last-of-type) {
  border-radius: 0;
}

.ButtonGroup > .Button:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ButtonGroup > .Button:first-of-type {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

cm-copy {
  display: inline-block;
  vertical-align: middle;
}

.Copy-icon {
  color: var(--color-copy);
}

.Copy-icon:hover {
  color: var(--color-copy-hover);
}

.Copy-icon:active {
  color: var(--color-copy-active);
}

.Copy-l svg {
  width: calc(24 * var(--rem-px)) !important;
  height: calc(24 * var(--rem-px)) !important;
}

.Copy-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(24 * var(--rem-px));
  height: calc(24 * var(--rem-px));
}

.Copy-l .Copy-button {
  width: calc(36 * var(--rem-px));
  height: calc(36 * var(--rem-px));
}

cm-editable {
  flex-shrink: 0;
  display: inline-block;
  line-height: 1;
  width: 100%;
}

.Editable,
.Editable label,
.Editable label ~ * {
  display: inline-flex;
  align-items: center;
}

body:not([data-pointer]) .Editable input:focus + *,
cm-editable[active] input + *,
cm-editable:not([active]) .Editable label ~ * {
  display: none;
}

.Editable {
  gap: var(--style-gap-n);
  height: var(--style-input-h-n);
  width: 100%;
}

.Editable label {
  flex: auto;
  width: 100%;
}

.Editable input {
  --text-width: 0;
  display: inline;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--style-corner-default);
  background: transparent;
  font-weight: bold;
  font-size: inherit;
  font-style: inherit;
}

cm-editable:not([active]) input {
  width: var(--text-width);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Editable label > input + *,
.Editable input::placeholder {
  color: var(--color-editable-label-default);
}

.Editable label:hover > input + * {
  color: var(--color-text);
}

.Editable label:active > input + * {
  color: var(--color-editable-label-pressed);
}

cm-calendar-icon[disabled] {
  pointer-events: none;
}

.Calendar {
  --calendar-date-btn-width: 4ch;
  --calendar-width: calc(7 * var(--calendar-date-btn-width) + 6 * var(--style-gap-n));
  --color-calendar-button-label: var(--color-label-default);
  --color-calendar-today-face: var(--color-face-info);
  --color-calendar-today-attn-face: var(--color-face-attn-info);
  --color-calendar-today-label: var(--color-label-always-dark-purple);
  --color-calendar-selected-today-label: var(--color-secondary-blue);
  --color-calendar-extra-label: var(--color-label-muted);
  --color-calendar-limit-face: var(--color-primary-purple);
  --color-calendar-limit-label: var(--color-primary-lighter-purple);
  --color-calendar-range-face: var(--color-primary-new-purple);
  --color-calendar-range-label: var(--color-label-always-dark-purple);
  --calendar-date-attn-face: var(--color-primary-lighter-purple);
  --calendar-date-attn-label: var(--color-primary-dark-purple);
  --color-calendar-extra-range-label: var(--color-primary-medium-purple);
  max-width: max-content;
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-n);
  position: relative;
  overflow: hidden;
  padding: 3px;
}

.Calendar header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--style-gap-n);
}

.Calendar button[data-mode] {
  flex-grow: 1;
  flex-basis: 0;
}

.Calendar-months, .Calendar-years {
  padding: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--style-gap-n);
}

.Calendar-dates table {
  border-collapse: collapse;
}

.Calendar-dates :is(td, th) {
  height: var(--calendar-date-btn-width);
}

.Calendar-sunday {
  color: var(--color-secondary-dark-red);
}

.Calendar-saturday {
  color: var(--color-secondary-dark-blue);
}

.Calendar-date, .Calendar-month, .Calendar-year {
  border-radius: var(--style-corner-default);
  border: 1px solid transparent;
  background: transparent;
}

.Calendar-date {
  font-family: var(--text-monospace-font);
  width: var(--calendar-date-btn-width);
  height: var(--calendar-date-btn-width);
  color: var(--color-calendar-button-label);
  transition: color var(--style-animation-speed-normal), background-color var(--style-animation-speed-normal);
}

.Calendar-header {
  color: var(--color-text);
  transition: color var(--style-animation-speed-normal);
}

:is(.Calendar-date, .Calendar-month, .Calendar-year):is(:hover, :focus) {
  background-color: var(--calendar-date-attn-face);
  color: var(--calendar-date-attn-label);
}

.Calendar-month, .Calendar-year {
  color: var(--color-label-default);
  transition: background-color var(--style-animation-speed-normal);
  width: calc((100% - 2 * var(--style-gap-n)) / 3);
}

.Calendar-month {
  padding: 1.3em 0;
}

.Calendar-year {
  padding: 0.5em 0;
}

/** Date button styles */

.Calendar-extra,
.Calendar-date:disabled,
.Calendar-date:disabled:is(:hover, :focus) {
  color: var(--color-calendar-extra-label);
}

.Calendar-date:disabled,
.Calendar-date:disabled:is(:hover, :focus) {
  background-color: transparent;
}

.Calendar-range {
  background-color: var(--color-calendar-range-face);
  color: var(--color-calendar-range-label);
  border-radius: 0;
}

.Calendar-range-to-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.Calendar-range-to-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.Calendar-range-to-left.Calendar-range-to-right {
  border-radius: var(--style-corner-default);
}

.Calendar-range.Calendar-extra {
  color: var(--color-calendar-extra-range-label);
}

.Calendar-today {
  background-color: var(--color-calendar-today-face);
  color: var(--color-calendar-today-label);
}

.Calendar-today:hover {
  background-color: var(--color-calendar-today-attn-face);
}

.Calendar-limit,
.Calendar-limit:disabled,
.Calendar-limit:is(:focus, :hover) {
  background-color: var(--color-calendar-limit-face);
  color: var(--color-calendar-limit-label);
}

.Calendar-selected,
.Calendar-selected:is(:hover, :focus) {
  background-color: var(--color-face-inverse);
  color: var(--color-label-inverse);
}

.Calendar-today:is(.Calendar-selected, .Calendar-limit) {
  color: var(--color-calendar-selected-today-label);
}


/** Calendar mode switching */

.Calendar-dates {
  transition: all var(--style-animation-speed-normal) var(--style-animation-speed-normal);
}

.Calendar[data-mode] .Calendar-dates {
  opacity: 0;
  transition-delay: unset;
  animation: delay-hide var(--style-animation-speed-normal) forwards;
  pointer-events: none;
}

.Calendar-months, .Calendar-years {
  position: absolute;
  top: 3rem;
  right: 0;
  left: 0;
  transition: opacity var(--style-animation-speed-normal);
  animation: delay-hide calc(var(--style-animation-speed-normal) * 2) forwards;
  opacity: 0;
  pointer-events: none;
}

.Calendar[data-mode='month'] .Calendar-months,
.Calendar[data-mode='year'] .Calendar-years {
  opacity: 1;
  animation: none;
  transition-delay: var(--style-animation-speed-normal);
  pointer-events: unset;
}

@keyframes delay-hide {
  to { visibility: hidden; }
}

.Dialog-cm-key-auth {
  max-width: 352px;
}
.Dialog-cm-key-auth > div > a {
  text-align: center;
}
.Dialog-cm-key-auth > div > form > button {
  width: 100%;
  margin-top: var(--style-gap-l);
}
@media screen and (max-width: 640px) {
  .Dialog-cm-key-auth {
    max-width: min(352px, 80vw);
  }
}
.Dialog-cm-key-auth label.Input-with-icon.Input-error input {
  border-color: var(--color-secondary-red);
  background-color: var(--color-secondary-light-red);
  color: var(--color-secondary-red);
}
.Dialog-cm-key-auth label.Input-with-icon.Input-error cm-icon {
  color: var(--color-secondary-red);
}