/* Choco Taco v1.0.0 */

                   /*.........                   
               ###.-+ #.-##-##+##.##              
             #.  ..#......#++####+#..#            
          ##  .... .####-####       .+##          
        ##  ...##+##---##    ####-+###- .##       
      .#  -#####--#.##   ##.............#  ##     
     #. ..#+#-#....#  .#.. ................. ##   
    #  -. #---#####  #.........................#  
   # #....#-----#  #+...........................# 
  #  . +#--#+++#  #.............................# 
 #  .##---#+#+#  #............................. .+
 # ..#---#+++#  #..............................-.#
#  .#+--#-#+#  #.................................#
#  .##--#.+#  #.........................  ....+#. 
#  ..+--### ##  ................... ...-+####.    
 #   ###   #............ .  ....-+++###+          
  #.    ##............-+++#######                 
     ##-.........-##*/                                                          

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&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(--spacing16);
}

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

.Microlayout-align-v {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing8);
}

/**
 * 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(--spacing4);
  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-icons .Switch-icon-on svg,
.Switch-icons .Switch-icon-off svg {
  width: var(--spacing24) !important;
  height: var(--spacing24) !important;
}

.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>* {
  opacity: 0.5;
}

: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(--spacing8);
}

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

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(--gray-080);
}

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(--spacing16) var(--spacing16) calc(2 * var(--spacing16));
}

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

/* --- Mapped Talos Tokens --- */

:root {
  /* --- Text Tokens --- */
  /* Using globals.css variables - closest matches for slate colors */
  --color-text: var(--gray-100);
  --color-text-weak: var(--gray-080);
  --color-text-weaker: var(--gray-070);
  --color-text-weakest: var(--gray-060);
  --color-text-strong: var(--primary);
  --color-text-stronger: var(--primary-lighten);
  --color-text-info: var(--blue);
  --color-text-info-strong: var(--blue);
  --color-text-info-stronger: var(--blue);
  --color-text-error: var(--red);
  --color-text-error-strong: var(--red);
  --color-text-error-stronger: var(--red);
  --color-text-inverse: var(--white);
  --color-text-inverse-weak: var(--white-a80);
  --color-text-inverse-weaker: var(--white-a60);
  /* Using globals.css variable */
  --color-text-inverse-weakest: var(--white-a40);
  --color-text-primary: var(--primary-lighten);
  --color-text-primary-hover: var(--primary);
  --color-text-primary-disabled: var(--gray-070);
  --color-text-destructive: var(--red);
  --color-text-destructive-hover: var(--red-lighten);
  --color-text-disabled: var(--gray-070);
  --color-text-success: var(--green);
  --color-text-success-strong: var(--green);
  --color-text-success-stronger: var(--green);
  --color-text-warning: var(--yellow);
  --color-text-warning-strong: var(--yellow);
  --color-text-warning-stronger: var(--yellow);
  --color-text-warning-strongest: var(--yellow);

  /* --- Border Tokens --- */
  /* Using globals.css variables - closest matches for slate colors */
  --color-border-weak: var(--gray-010);
  /* TODO: Review - was slate-85, using gray-010 as closest */
  --color-border: var(--gray-005);
  /* TODO: Review - was slate-75, using gray-005 as closest */
  --color-border-strong: var(--gray-060);
  /* TODO: Review - was slate-60, using gray-060 as closest */
  --color-border-stronger: var(--gray-040);
  /* TODO: Review - was slate-40, using gray-040 as closest */
  --color-border-strongest: var(--gray-080);
  /* TODO: Review - was slate-20, using gray-080 as closest */
  --color-border-hover: var(--gray-090);
  /* TODO: Review - was slate-15, using gray-090 as closest */
  --color-border-focus: var(--primary-lighten);
  --color-border-warning-weak: var(--yellow-a20);
  --color-border-warning: var(--yellow);
  --color-border-success-weak: var(--green-a20);
  --color-border-success: var(--green);
  --color-border-error-weak: var(--red-a20);
  --color-border-error: var(--red);
  --color-border-info-weak: var(--blue-a20);
  --color-border-info: var(--blue);
  --color-border-primary: var(--primary-lighten);
  --color-border-primary-hover: var(--primary);
  --color-border-primary-disabled: var(--gray-070);

  /* --- Background Tokens (1) --- */
  --color-bg-overlay-light: var(--white-a60);
  /* Using globals.css variable */
  --color-bg-overlay-light-strong: var(--white-a80);
  --color-bg-inverse-main: var(--white-a20);
  --color-bg-inverse-weak: var(--gray-070);
  /* TODO: Review - was slate-30, using gray-070 as closest */
  --color-bg-inverse: var(--gray-100);
  /* TODO: Review - was slate-10, using gray-100 as closest */
  --color-bg-inverse-strong: var(--white-a04);
  --color-bg-inverse-stronger: var(--white-a10);
  --color-bg-inverse-strongest: var(--white-a16);
  --color-bg-transparent: var(--white-a04);
  --color-bg-transparent-strong: var(--white-a20);

  /* --- Background Tokens (2) --- */
  --color-bg-info-weaker: var(--blue-a16);
  --color-bg-info: var(--blue);
  --color-bg-brand: var(--primary);
  --color-bg-primary: var(--primary);
  --color-bg-primary-hover: var(--primary-lighten);
  --color-bg-primary-disabled: var(--gray-070);
  --color-bg-secondary: var(--blue-a08);
  --color-bg-secondary-hover: var(--blue-a16);
  --color-bg-secondary-disabled: var(--gray-070);
  --color-bg-destructive: var(--red);
  --color-bg-destructive-hover: var(--red-lighten);
  --color-bg-disabled: var(--gray-070);
  --color-bg-primary-inverse: var(--white);
  --color-bg-primary-inverse-hover: var(--blue-a16);
  --color-bg-overlay-weak: var(--black-a20);
  --color-bg-overlay: var(--black-a40);
  --color-bg-overlay-strong: var(--black-a60);
  --color-bg-overlay-light-weak: var(--white-a40);

  /* --- Background Tokens (3) --- */
  --color-bg-main: var(--white);
  --color-bg: var(--gray-000);
  --color-bg-strong: var(--gray-010);
  /* TODO: Review - was slate-90, using gray-010 as closest */
  --color-bg-stronger: var(--gray-005);
  /* TODO: Review - was slate-75, using gray-005 as closest */
  --color-bg-strongest: var(--gray-020);
  /* TODO: Review - was slate-70, using gray-020 as closest */
  --color-bg-hover: var(--black-a04);
  --color-bg-warning-weakest: var(--yellow-a16);
  --color-bg-warning-weaker: var(--yellow-a20);
  --color-bg-warning-weak: var(--yellow-a32);
  --color-bg-warning: var(--yellow);
  --color-bg-success-weakest: var(--green-a16);
  --color-bg-success-weaker: var(--green-a20);
  --color-bg-success: var(--green);
  --color-bg-error-weakest: var(--red-a16);
  --color-bg-error-weaker: var(--red-a20);
  --color-bg-error: var(--red);
  --color-bg-info-weakest: var(--blue-a16);

  /* --- Elevation Shadow Tokens --- */
  --elevation-app-shadow-low-x-position: 0;
  --elevation-app-shadow-low-y-position: 0;
  --elevation-app-shadow-low-blur: 4px;
  --elevation-app-shadow-low-spread: 0;
  --elevation-app-shadow-low-color: rgba(2, 14, 34, 0.06);
}


/* --- Application Tokens and Extended Colors --- */
:root {
  /*--- Legacy Primary Purple Tokens (mapped to globals.css gray) ---*/
  --color-primary-white: var(--white);
  --color-primary-purple-1: var(--gray-100);
  --color-primary-purple-2: var(--gray-090);
  --color-primary-purple-3: var(--gray-080);
  --color-primary-purple-4: var(--gray-070);
  --color-primary-purple-5: var(--gray-060);
  --color-primary-purple-6: var(--gray-000);
  --color-primary-purple-7: var(--gray-030);
  --color-primary-purple-8: var(--gray-020);
  --color-primary-purple-9: var(--gray-010);
  --color-primary-purple-10: var(--gray-000);

  /*--- Legacy Primary Purple Semantic Tokens (mapped to globals.css gray) ---*/
  --color-primary-lighter-purple: var(--gray-100);
  --color-primary-light-purple: var(--gray-090);
  --color-primary-new-purple: var(--gray-080);
  --color-primary-purple: var(--gray-070);
  --color-primary-medium-purple: var(--gray-060);
  --color-primary-dark-purple: var(--gray-000);
  --color-primary-darker-purple: var(--gray-030);
  --color-primary-darkest-purple: var(--gray-020);

  /*--- Secondary Red (mapped to globals.css red) ---*/
  --color-secondary-red-1: var(--red-a16);
  --color-secondary-red-2: var(--red-a20);
  --color-secondary-red-3: var(--red-a32);
  --color-secondary-red-4: var(--red-a40);
  --color-secondary-red-5: var(--red);
  --color-secondary-red-6: var(--red);
  --color-secondary-red-7: var(--red);
  --color-secondary-red-8: var(--red);

  /*--- Secondary Green (mapped to globals.css green) ---*/
  --color-secondary-green-1: var(--green-a16);
  --color-secondary-green-2: var(--green-a20);
  --color-secondary-green-3: var(--green-a32);
  --color-secondary-green-4: var(--green);
  --color-secondary-green-5: var(--green);
  --color-secondary-green-6: var(--green);
  --color-secondary-green-7: var(--green);
  --color-secondary-green-8: var(--green);

  /*--- Secondary Blue (mapped to globals.css blue) ---*/
  --color-secondary-blue-1: var(--blue-a16);
  --color-secondary-blue-2: var(--blue-a20);
  --color-secondary-blue-3: var(--blue-a32);
  --color-secondary-blue-4: var(--blue-a40);
  --color-secondary-blue-5: var(--blue-lighten);
  --color-secondary-blue-6: var(--blue-lighten);
  --color-secondary-blue-7: var(--blue);
  --color-secondary-blue-8: var(--blue);

  /*--- Secondary Yellow (mapped to globals.css yellow) ---*/
  --color-secondary-yellow-1: var(--yellow-a16);
  --color-secondary-yellow-2: var(--yellow-a20);
  --color-secondary-yellow-3: var(--yellow-a32);
  --color-secondary-yellow-4: var(--yellow-a40);
  --color-secondary-yellow-5: var(--yellow-lighten);
  --color-secondary-yellow-6: var(--yellow);
  --color-secondary-yellow-7: var(--yellow);
  --color-secondary-yellow-8: var(--yellow);

  /*--- 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;

  /*--- Secondary Color Semantic Tokens ---*/
  --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);

  /*--- Chart Colors ---*/
  --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(--gray-070);

  /*--- Application Semantic Tokens (using globals.css variables) ---*/
  --color-text: var(--gray-000);
  --color-bg: var(--gray-100);
  --color-line: var(--gray-000);
  --color-separator-line-light: var(--gray-090);
  --color-separator-line-lighter: var(--gray-100);
  --color-link: var(--blue-lighten);
  --color-focus-outline: var(--primary);
  --color-positive-label: var(--green);
  --color-negative-label: var(--red);

  /** METRIC SCALING */
  --eff-base-size: 16;

  /** Spacing System (16px base) */
  --spacing2: 0.125rem;
  /* 2px */
  --spacing4: 0.25rem;
  /* 4px */
  --spacing6: 0.375rem;
  /* 6px */
  --spacing8: 0.5rem;
  /* 8px */
  --spacing10: 0.625rem;
  /* 10px */
  --spacing12: 0.75rem;
  /* 12px */
  --spacing16: 1rem;
  /* 16px */
  --spacing24: 1.5rem;
  /* 24px */
  --spacing32: 2rem;
  /* 32px */
  --spacing48: 3rem;
  /* 48px */
  --spacing64: 4rem;
  /* 64px */

  /** Legacy Gap Variables (backward compatibility - mapped to spacing) */
  --style-gap-xs: var(--spacing2);
  --style-gap-s: var(--spacing4);
  --style-gap-n: var(--spacing8);
  --style-gap-l: var(--spacing12);
  --style-gap-xl: var(--spacing16);
  --style-gap-xxl: var(--spacing24);
  --style-gap-xxxl: var(--spacing32);
  --style-gap-huge: var(--spacing64);

  --style-input-padding-n: var(--spacing4) var(--spacing8);
  --style-input-padding-l: var(--spacing12) var(--spacing16);
  --style-input-h-n: 2rem;
  /* 32px */
  --style-input-h-l: 3rem;
  /* 48px */
  --style-corner-default: 0.1875rem;
  /* 3px */
  
  /** Figma Input Tokens */
  --ui-radius-form: 0.1875rem; /* 3px */
  --token-border-input: var(--gray-100-a12);
  --token-bg-input: var(--gray-100-a04);
  --token-border-input-hover: var(--gray-100-a20);
  --token-border-input-active: var(--gray-100-a40);
  --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: 0.75rem;
  /* 12px (12/16) */
  --text-size-n: 0.75rem;
  /* 12px (12/16) */
  --text-size-l: 1rem;
  /* 16px (16/16) */
  --text-size-xl: 1.125rem;
  /* 18px (18/16) */
  --text-size-xxl: 1.5rem;
  /* 24px (24/16) */
  --text-size-xxxl: 2.25rem;
  /* 36px (36/16) */

  --text-weight-normal: 400;
  --text-weight-bold: 700;
  --text-list-padding: 2.25rem;
  /* 36px (36/16) */

  --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(--gray-100);
  --style-panel-border: 1px solid var(--color-line);
  --style-panel-bottom-border: 2px;
  --style-panel-padding: var(--spacing16);

  /** Light mode overrides */
  --color-bg: rgb(221, 221, 228);
  /* #DDDDE4 - light gray body background */
  --color-panel-face: var(--color-primary-white);
  --color-landing-panel-face: var(--color-primary-white);
  --color-text: var(--gray-100);
  --color-label-default: var(--gray-100);

  /** Card tokens - override globals.css to use correct color (rgba(229, 229, 230, 0.04)) */
  --card: var(--gray-100-a04);

  /** Button colors for light mode */
  --color-button-default-bg: var(--gray-main);
  --color-button-hover-bg: var(--gray-main);
  --button-default: var(--gray-main);
  --button-default-border: var(--gray-100-a16);
  --button-default-border-hover: var(--gray-100-a20);
  --button-default-border-active: var(--gray-100-a24);

  /** Info popup for light mode */
  --color-info-popup-bg: var(--color-primary-white);
  --color-text-mantissa: var(--gray-090);

  /** Chart colors for light mode */
  --chart-watermark-opacity: 1;
  --chart-axis-color: var(--gray-030);
  --chart-axis-text: var(--gray-080);

  /** Table header for light mode */
  --color-table-header-background-hover: var(--color-primary-new-purple);

  /** Info popup icon for light mode */
  --color-info-popup-icon-hover: var(--color-primary-dark-purple);
  --color-info-popup-icon-active: var(--color-primary-purple);

  /** Warning color for light mode - lighter yellow for better visibility */
  --color-border-warning: var(--yellow-lighten);

  /** Breadcrumb colors for light mode */
  --bg-color-breadcrumb-current: var(--color-primary-white);
  --border-color-breadcrumb-current: var(--color-primary-dark-purple);
  --hover-border-color-breadcrumb: var(--color-primary-dark-purple);
  --active-border-color-breadcrumb: var(--color-border-pressed-default);

  /** Input */
  --color-input-field: var(--gray-100-a04);
  --color-input-field-attn: var(--gray-100-a04);
  --color-input-field-error: var(--color-secondary-light-red);
  --color-input-field-disabled: var(--white-a10);
  --color-input-field-read-only: transparent;
  --color-input-border: var(--gray-100-a12);
  --color-input-border-hover: var(--gray-100-a20);
  --color-input-border-active: var(--gray-100-a40);
  --token-border-input-active: var(--gray-100-a40);
  --color-input-border-attn: var(--white-a20);
  --color-input-border-error: var(--color-secondary-red);
  --color-input-border-disabled: transparent;
  --color-input-border-read-only: var(--white-a04);
  /* TODO: Review - was white-a05, using white-a04 as closest */

  /** Accordion, dropdown, nav-list, etc. */
  --color-selectable-hover-face: var(--gray-100);
  --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(--spacing4);
  --style-table-header-height: 2rem;
  --style-table-cell-height: 2rem;
  --text-table-numeric-cell-font: inherit;

  /** Sidebar - Light mode */
  --color-sidebar-separator: var(--gray-090);
  --color-sidebar-bg: var(--color-primary-white);
  --color-sidebar-content-bg: var(--color-primary-white);
  --color-sidebar-text: var(--color-text);
  --color-sidebar-content-text: var(--color-text);
  --color-sidebar-hover-btn-bg: var(--gray-100-a08);
  --color-sidebar-active-btn-bg: var(--gray-100-a12);
  --color-sidebar-active-btn-text: var(--gray-000);
  --color-sidebar-active-toggle-bg: var(--gray-100-a12);
  --color-sidebar-open-shadow: none;
  --style-sidebar-padding: var(--spacing8);
  --style-sidebar-width: calc(var(--style-sidebar-padding) * 2 + 2rem + 1px);
  --style-sidebar-content-padding: var(--spacing24);

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

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

  /** Info popup */
  --color-info-popup-icon: var(--color-primary-new-purple);
  --color-info-popup-bg: var(--gray-040);
  --color-info-popup-text: var(--color-primary-white);

  /** 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: 2rem;
  /* 32px */
  --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(--gray-050);

  /** Button Primary Colors */
  --color-button-primary-default: var(--primary);
  --color-button-primary-hover: var(--primary-lighten);
  --color-button-primary-active: var(--primary);

  /** 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(--gray-100);

  /* 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: var(--yellow);

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

@media screen and (max-width: 960px) {
  :root {
    --text-size-xl: 1rem;
    /* 16px (16/16) */
    --text-size-xxl: 1.125rem;
    /* 18px (18/16) */
    --text-size-xxxl: 1.5rem;
    /* 24px (24/16) */
  }
}

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

.Theme-night {
  --gray-100-a06: rgba(229, 229, 230, 0.06);
  --gray-100-a04: rgba(229, 229, 230, 0.04);
  --card: var(--gray-100-a04);
  --button-default: var(--gray-100-a06);
  --button-default-hover: var(--gray-100-a10);
  --button-default-active: var(--gray-100-a16);
  --button-default-border: rgba(255, 255, 255, 0);
  /* transparent */
  --button-default-border-hover: rgba(255, 255, 255, 0);
  --button-default-border-active: rgba(255, 255, 255, 0);

  --color-text: var(--color-primary-white);
  --color-text-mantissa: var(--gray-090);
  --color-bg: var(--gray-000);
  --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);

  /** Chart colors for dark mode */
  --chart-watermark-opacity: 0.1;
  --chart-axis-color: var(--gray-040);
  --chart-axis-text: var(--gray-090);

  /** Table header for dark mode */
  --color-table-header-background-hover: var(--color-primary-purple);

  /** Info popup icon for dark mode */
  --color-info-popup-icon-hover: var(--color-primary-white);
  --color-info-popup-icon-active: var(--color-primary-darkest-purple);

  /** Breadcrumb colors for dark mode */
  --bg-color-breadcrumb-current: var(--color-primary-darkest-purple);
  --border-color-breadcrumb-current: var(--color-primary-white);
  --hover-border-color-breadcrumb: var(--color-primary-white);

  /** Accordion, dropdown, nav-list, etc. */
  --color-selectable-hover-face: var(--gray-030);
  --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(--gray-main);
  --color-landing-panel-face: var(--color-panel-face);
  --style-panel-border: 1px solid var(--color-line);

  /** Input */
  --color-input-field: var(--gray-100-a04);
  --color-input-field-attn: var(--gray-100-a04);
  --color-input-field-error: var(--color-input-field);
  --color-input-field-disabled: var(--white-a10);
  --color-input-field-read-only: transparent;
  --color-input-border: var(--white-a12);
  --color-input-border-hover: var(--white-a24);
  --color-input-border-active: var(--white-a56);
  --token-bg-input: var(--gray-100-a04);
  --token-border-input: var(--white-a12);
  --token-border-input-hover: var(--white-a24);
  --token-border-input-active: var(--white-a56);
  --color-input-border-attn: var(--white-a20);
  --color-input-border-disabled: var(--white-a04);
  --color-input-border-read-only: var(--white-a10);

  /** 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);

  /** Dialog */
  --color-dialog-titlebar-background: var(--gray-050);

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

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

  /** Sidebar - Dark mode */
  --color-sidebar-separator: var(--gray-060);
  --color-sidebar-bg: var(--gray-main);
  --color-sidebar-content-bg: var(--gray-main);
  --color-sidebar-text: var(--color-primary-white);
  --color-sidebar-content-text: var(--color-primary-white);
  --color-sidebar-hover-btn-bg: var(--gray-030);
  --color-sidebar-active-btn-bg: var(--gray-010);
  --color-sidebar-active-btn-text: var(--color-primary-purple);
  --color-sidebar-open-shadow: rgba(22, 24, 35, 0.5);

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

  /** 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);

  /* 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: var(--yellow-a40);
}

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

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

.Theme-content {
  display: grid;
  grid-template-columns: var(--style-sidebar-width) 1fr;
  grid-template-rows: var(--style-app-header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--color-bg);
  transition:
    color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
  gap: 0 var(--spacing2);
}


html {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  /* 16px - base font size for rem calculations */
  color-scheme: light;
}

.Theme-night,
html.Theme-night {
  color-scheme: dark;
  /* Override chart colors for dark mode */
  --color-secondary-green-5: var(--green-lighten);
  --color-secondary-red-5: var(--red-lighten);
}

body {
  font-family: Roboto, sans-serif;
  background-color: var(--color-bg);
  font-size: 0.75rem;
  /* 12px default */
}

html:has(#transaction-details-page, #block-details-page, #address-details-page) body {
  font-size: 0.75rem;
  /* 12px for details pages */
}

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(--spacing8);
  padding: var(--spacing8);
  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(--spacing8);
  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-separator-line-lighter);
}

.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-border-strong);
}

.Accordion.press summary,
.Accordion:active summary {
  background: var(--color-face-pressed-default);
}

.Accordion.active {
  border-color: var(--color-border-attn-default);
}

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

.Accordion .NavList-item {
  height: 2rem;
}

.Accordion .NavList-item * span {
  text-transform: none !important;
}

.Accordion .NavList-item > span > span > span {
  padding: 0 !important;
  color: var(--gray-080) !important;
  font-weight: var(--text-weight-normal) !important;
}

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

.Theme-night .Accordion.seperator {
  border-color: var(--gray-060);
}

.Theme-night .Accordion.hover summary,
.Theme-night .Accordion:hover summary {
  background: var(--gray-030);
}

.Theme-night .Accordion.seperator.hover,
.Theme-night .Accordion.seperator:hover {
  border-color: var(--gray-070);
}

.Theme-night .Accordion.press summary,
.Theme-night .Accordion:active summary {
  background: var(--gray-020);
}

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

.Theme-night .Accordion.disabled>summary>*,
.Theme-night .Accordion:disabled>summary>* {
  color: var(--gray-060);
}

.AppLayout-header {
  --app-layout-header-padding-v: var(--spacing8);
  --app-layout-header-padding: var(--spacing16);
  grid-area: header;
  padding: var(--app-layout-header-padding-v) var(--app-layout-header-padding);
  display: flex;
  align-items: center;
  gap: var(--spacing4);
  background-color: var(--color-app-header-bg);
  border-bottom: 2px solid var(--gray-000);
  color: var(--color-text);
  transition: color var(--style-animation-speed-normal), background-color var(--style-animation-speed-normal);
  position: sticky;
  top: 0;
  z-index: var(--z-high);
}

.AppLayout-header>* {
  flex: none
}

.AppLayout-header-spacer {
  flex-grow: 1;
}

.AppLayout-header-title {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.AppLayout-header-title:hover {
  opacity: 0.8;
}

a.AppLayout-logo {
  color: inherit;
}

.AppLayout-logo {
  height: 1.125rem;
  /* 18px */
}

#app {
  grid-area: main;
  min-height: 0;
  overflow-y: auto;
}

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

.AppLayout-main,
.AppLayout-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

@media screen and (min-width: 600px) {

  .AppLayout-row,
  .AppLayout-row-stretch,
  .AppLayout-row-stretch-full {
    display: flex;
    gap: var(--spacing16);
  }

  .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 {
  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-inactive {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--style-corner-default);
  cursor: not-allowed;
  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(--spacing8);
}

.Button-clear,
.Button-clear-inverse {
  padding: var(--spacing4);
}

.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(--spacing8);
  background-color: var(--gray-030);
  color: var(--gray-100);
  border: none;
  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(--spacing12) var(--spacing16);
  height: var(--style-input-h-l);
}

.Button-primary {
  background-color: var(--color-button-primary-default);
  color: var(--color-primary-white);
  border-color: var(--color-button-primary-default);
}

.Button:not(.Button-inactive):not([disabled]):hover,
body:not([data-pointer]) .Button:not(.Button-inactive):not([disabled]):focus,
.Button-active:not(.Button-inactive):not([disabled]),
input:is([type=radio], [type=checkbox]):focus+.Button:not(.Button-inactive):not([disabled]) {
  background-color: var(--gray-040);
  color: var(--gray-100);
  border: none;
}

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

.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-info,
  .Button-success,
  .Button-warning,
  .Button-error)[disabled],
[disabled] :is(.Button,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error),
input:is([type=radio], [type=checkbox])[disabled]> :is(.Button,
  .Button-info,
  .Button-success,
  .Button-warning,
  .Button-error) {
  opacity: 0.5;
  cursor: not-allowed;
}

.Button-primary[disabled],
[disabled] .Button-primary,
input:is([type=radio], [type=checkbox])[disabled]>.Button-primary {
  background-color: var(--color-button-primary-default);
  color: var(--color-primary-white);
  border-color: var(--color-button-primary-default);
  opacity: 0.5;
  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(--spacing4));
}

: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(--spacing4));
}

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

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

:is(.Button, .Button-primary, .Button-info, .Button-success, .Button-warning, .Button-error, .Button-inactive):not(.Button-l)> :is(cm-icon, cm-color-icon),
:is(.Button, .Button-primary, .Button-info, .Button-success, .Button-warning, .Button-error, .Button-inactive):not(.Button-l)> :is(cm-icon, cm-color-icon) * {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor;
  color: currentColor;
}

:is(.Button, .Button-primary, .Button-info, .Button-success, .Button-warning, .Button-error, .Button-inactive):not(.Button-l)> :is(cm-icon, cm-color-icon) svg,
:is(.Button, .Button-primary, .Button-info, .Button-success, .Button-warning, .Button-error, .Button-inactive):not(.Button-l)> :is(cm-icon, cm-color-icon) svg * {
  width: 16px !important;
  height: 16px !important;
}

.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 {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.Button-active,
[open]>.Button,
input:checked+.Button {
  position: relative;
  top: 0;
  box-shadow: none;
  border: none;
}

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

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

.Button:not(.Button-inactive):not([disabled]):not(:disabled):active {
  background-color: var(--gray-040);
  color: var(--gray-100);
  border: none;
  box-shadow: none;
}

/* Light mode button overrides */
html:not(.Theme-night) .Button,
.Theme-night-toggle:not(:checked)~* .Button {
  background-color: var(--button-default);
  color: var(--gray-100);
  border: 1px solid var(--button-default-border);
}

html:not(.Theme-night) .Button:not(.Button-inactive):not([disabled]):hover,
html:not(.Theme-night) body:not([data-pointer]) .Button:not(.Button-inactive):not([disabled]):focus,
html:not(.Theme-night) .Button-active:not(.Button-inactive):not([disabled]),
html:not(.Theme-night) input:is([type=radio], [type=checkbox]):focus+.Button:not(.Button-inactive):not([disabled]),
.Theme-night-toggle:not(:checked)~* .Button:not(.Button-inactive):not([disabled]):hover,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Button:not(.Button-inactive):not([disabled]):focus,
.Theme-night-toggle:not(:checked)~* .Button-active:not(.Button-inactive):not([disabled]),
.Theme-night-toggle:not(:checked)~* input:is([type=radio], [type=checkbox]):focus+.Button:not(.Button-inactive):not([disabled]) {
  background-color: var(--button-default);
  border: 1px solid var(--button-default-border-hover);
  color: var(--gray-100);
}

html:not(.Theme-night) .Button:not(.Button-inactive):not([disabled]):not(:disabled):active,
.Theme-night-toggle:not(:checked)~* .Button:not(.Button-inactive):not([disabled]):not(:disabled):active {
  background-color: var(--button-default);
  border: 1px solid var(--button-default-border-active);
  color: var(--gray-100);
}

/* Light mode tooltip colors */
html:not(.Theme-night) .Info-content,
.Theme-night-toggle:not(:checked)~* .Info-content {
  background-color: var(--color-primary-white);
  color: var(--gray-100);
  border-color: var(--card-border);
}

/* Light mode icon colors */
html:not(.Theme-night) cm-icon,
html:not(.Theme-night) cm-icon svg,
.Theme-night-toggle:not(:checked)~* cm-icon,
.Theme-night-toggle:not(:checked)~* cm-icon svg {
  fill: var(--gray-100);
  color: var(--gray-100);
}

/* Primary button icons should stay white in both light and dark mode */
html:not(.Theme-night) .Button-primary cm-icon,
html:not(.Theme-night) .Button-primary cm-icon svg,
.Theme-night-toggle:not(:checked)~* .Button-primary cm-icon,
.Theme-night-toggle:not(:checked)~* .Button-primary cm-icon svg {
  fill: var(--color-primary-white);
  color: var(--color-primary-white);
}

.Crumbs {
  display: flex;
  align-items: center;
  gap: var(--spacing2);
}

@media screen and (max-width: 960px) {
  .Crumbs {
    display: none;
    visibility: hidden;
  }
}

.Crumbs>* {
  border: none;
  text-decoration: none;
  color: var(--gray-080);
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
  padding: 0;
  background: none;
  transition: none;
}

.Crumbs>a {
  color: var(--gray-080);
}

.Crumbs>a:not(:last-child):hover {
  color: var(--gray-100);
}

.Crumbs>a:not(:last-child):hover cm-icon,
.Crumbs>a:not(:last-child):hover .Icon {
  fill: var(--gray-100);
  color: var(--gray-100);
}

.Crumbs>a:last-child {
  color: var(--gray-100);
}

.Crumbs>a:not(:last-child) cm-icon,
.Crumbs>a:not(:last-child) .Icon {
  fill: var(--gray-080);
  color: var(--gray-080);
}

/* Breadcrumb icons should match text color (gray-080) in light mode */
html:not(.Theme-night) .Crumbs>a:not(:last-child) cm-icon,
html:not(.Theme-night) .Crumbs>a:not(:last-child) cm-icon svg,
.Theme-night-toggle:not(:checked)~* .Crumbs>a:not(:last-child) cm-icon,
.Theme-night-toggle:not(:checked)~* .Crumbs>a:not(:last-child) cm-icon svg {
  fill: var(--gray-080);
  color: var(--gray-080);
}

.Crumbs>a:last-child cm-icon,
.Crumbs>a:last-child .Icon {
  fill: var(--gray-100);
  color: var(--gray-100);
}

.Crumbs>span:last-child {
  color: var(--gray-100);
}

.Crumbs>span:last-child cm-icon,
.Crumbs>span:last-child .Icon {
  fill: var(--gray-100);
  color: var(--gray-100);
}

.Crumbs-chevron {
  width: 16px;
  height: 16px;
  color: var(--gray-080);
  fill: var(--gray-080);
  flex-shrink: 0;
}

/* Explicitly ensure chevrons are visible by default */
.Crumbs-chevron {
  display: inline-flex;
}

/* Hide chevrons that come after the last child (but not before) */
.Crumbs>*:last-child~.Crumbs-chevron {
  display: none;
}

/* Force visibility of chevron that comes immediately before the last span (current breadcrumb) */
.Crumbs > .Crumbs-chevron:not(.Crumbs-chevron-first),
.Crumbs > .Crumbs-chevron-before-last {
  display: inline-flex !important;
}

/* Ensure cm-icon inside chevron is visible */
.Crumbs-chevron cm-icon {
  display: inline-flex;
}

.Crumbs>a:nth-last-child(2)+.Crumbs-chevron {
  color: var(--gray-100);
  fill: var(--gray-100);
}

.Crumbs>*:first-child {
  border-radius: 0;
}

.Crumbs>*:last-child {
  background-color: transparent;
  border: none;
}

.Crumbs>*:hover {
  z-index: 1;
  border-color: transparent;
}

.Crumbs>*:active {
  border: none;
}

html:not(.Theme-night) .Icon-s,
html:not(.Theme-night) .Icon-s svg,
.Theme-night-toggle:not(:checked)~* .Icon-s,
.Theme-night-toggle:not(:checked)~* .Icon-s svg {
  fill: var(--gray-100);
  color: var(--gray-100);
}

/* Light mode table header icons */
html:not(.Theme-night) cm-table thead th cm-icon,
html:not(.Theme-night) cm-table thead th cm-icon svg,
.Theme-night-toggle:not(:checked)~* cm-table thead th cm-icon,
.Theme-night-toggle:not(:checked)~* cm-table thead th cm-icon svg {
  fill: var(--gray-100);
  color: var(--gray-100);
}


.Button-primary:not(:disabled):active {
  background-color: var(--color-button-primary-default);
  color: var(--color-primary-white);
  border-color: var(--color-button-primary-default);
  box-shadow: inset 0 var(--style-border-pressed-wdith) var(--color-button-primary-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);
}

.Button-block {
  height: var(--spacing24);
  /* 24px */
  width: var(--spacing24);
  /* 24px */
}

.InlineEntity {
  display: flex;
  align-items: center;
  gap: var(--style-gap-s);
}

td.InlineEntity {
  display: table-cell;
  vertical-align: middle;
}

td.InlineEntity > * {
  display: inline-block;
  vertical-align: middle;
}

.Code,
.Code-l {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
  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: inherit;
  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: 1.5rem;
  height: 1.5rem;
}

.Coin-s>.Coin-svg {
  width: 1.125rem;
  height: 1.125rem;
}

.Coin-l>.Coin-svg {
  width: 2rem;
  height: 2rem;
}

.Coin-xl>.Coin-svg {
  width: 2rem;
  height: 2rem;
}

.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: 1.5rem;
  /* 24px */
  height: 1.5rem;
  /* 24px */
}

.Icon-s>.Color-icon-svg {
  width: 1rem;
  /* 16px */
  height: 1rem;
  /* 16px */
}

.Icon-l {
  height: 2rem;
  width: 2rem;
}

.Icon-l>.Color-icon-svg {
  width: 2rem;
  height: 2rem;
}

.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(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: var(--text-weight-bold);
  padding: 0 var(--spacing8) 0 var(--spacing12);
  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: solid 1px var(--gray-050);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.Dialog-button-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing8);
  margin-top: var(--spacing8);
  padding: var(--spacing16) 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: 5rem;
  /* 80px */
  position: fixed;
  top: var(--dropdown-top);
  left: var(--dropdown-left);
  right: var(--dropdown-right);
  bottom: var(--dropdown-bottom);
  border: none;
  padding: 0;
  border-radius: var(--style-corner-default);
  background: var(--gray-030);
  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);
}

.Dropdown:not(:has(.AssetsDropdown-summary))>fieldset {
  right: auto !important;
  --dropdown-left: auto !important;
}

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


.Dropdown>summary {
  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 {
  background-color: var(--gray-030);
  border: none;
  color: var(--color-primary-white);
}

.Dropdown .Button:hover {
  background-color: var(--gray-040);
  border: none;
  color: var(--color-primary-white);
}

.Dropdown .Button:focus {
  background-color: var(--gray-040);
  border: 1px solid var(--gray-060);
  color: var(--color-primary-white);
}

.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: 0.09375rem;
  /* 1.5px */
  width: 0.875rem;
  /* 14px */
  height: 0.875rem;
  /* 14px */
}

.Icon-s>.Icon-svg {
  stroke-width: var(--spacing2);
  width: 1rem;
  height: 1rem;
}

.Icon-l {
  height: 2rem;
  width: 2rem;
}

.Icon-l>.Icon-svg {
  width: 2rem;
  height: 2rem;
}

.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(--text-size-s);
  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(--gray-100);
}

.Info-content {
  position: absolute;
  z-index: 999;
  background-color: var(--color-info-popup-bg);
  color: var(--gray-080);
  border: 1px solid var(--gray-060);
  padding: var(--spacing8);
  border-radius: var(--style-corner-default);
  box-shadow: 0 1px 5px var(--black-a10), 0 1px 15px var(--black-a04);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 17.5rem;
  /* 280px */
  width: max-content;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: normal;
}

.Info-content-top-left {
  top: calc(50% - var(--spacing12));
  left: calc(100% + var(--spacing8));
}

.Info-content-top-center {
  top: calc(100% + var(--spacing8));
  left: 50%;
  transform: translateX(-50%);
}

.Info-content-top-right {
  top: calc(50% - var(--spacing12));
  right: calc(100% + var(--spacing8));
}

.Info-content-center-left {
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + var(--spacing8));
}

.Info-content-center-right {
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + var(--spacing8));
}

.Info-content-bottom-left {
  bottom: calc(50% - var(--spacing12));
  left: calc(100% + var(--spacing8));
}

.Info-content-bottom-center {
  bottom: calc(100% + var(--spacing8));
  left: 50%;
  transform: translateX(-50%);
}

.Info-content-bottom-right {
  bottom: calc(50% - var(--spacing12));
  right: calc(100% + var(--spacing8));
}



.Input,
.Input-l,
cm-editable[active] input,
body:not([data-pointer]) .Editable input:focus {
  background: var(--token-bg-input, var(--color-input-field));
  border: 1px solid var(--token-border-input, var(--color-input-border));
  color: var(--gray-100);
  border-radius: var(--ui-radius-form, 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);
}

html:not(.Theme-night) cm-editable[active] input,
html:not(.Theme-night) body:not([data-pointer]) .Editable input:focus,
.Theme-night-toggle:not(:checked)~* cm-editable[active] input,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Editable input:focus {
  color: var(--gray-000);
}

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

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

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

.Dropdown .Input,
.Dropdown .Input-l {
  background: var(--gray-010);
  border: none;
  color: var(--color-primary-white);
}

.Dropdown .Input::placeholder,
.Dropdown .Input-l::placeholder {
  color: var(--gray-080);
}

:is(.Input, .Input-l, cm-editable[active] input, body:not([data-pointer]) .Editable input:focus):disabled {
  opacity: 0.5;
}

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

:is(.Input, .Input-l, cm-editable[active] input, body:not([data-pointer]) .Editable input:focus):not(:disabled):hover:not(:focus) {
  border-radius: var(--ui-radius-form, var(--style-corner-default));
  border: 1px solid var(--token-border-input-hover, var(--color-input-border-hover));
  background: var(--token-bg-input, var(--color-input-field));
}

:is(.Input, .Input-l, cm-editable[active] input, .Editable input):not(:disabled):focus,
:is(.Input, .Input-l, cm-editable[active] input, .Editable input):not(:disabled):active {
  border-radius: var(--ui-radius-form, var(--style-corner-default));
  border: 1px solid var(--token-border-input-active, var(--color-input-border-active));
  background: var(--token-bg-input, var(--color-input-field-attn));
  box-shadow: none;
}

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

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

nav .Input-with-icon {
  margin-bottom: var(--spacing8);
}

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

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

.Input-with-icon>.Input {
  padding-right: calc(var(--style-border-width) + var(--spacing8) + 1.5rem);
}

.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(--spacing8);
}

.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: none;
}

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

.List-item {
  display: flex;
  align-items: center;
  padding: var(--spacing8);
  border-top: var(--style-line-lighter);
  min-width: 100%;
  height: 2rem;
  /* 32px */
  transition:
    color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
  gap: var(--spacing8);
}

.Dropdown>fieldset label,
.Dropdown>ul li {
  display: flex;
  align-items: center;
  padding: var(--spacing8);
  border: none;
  min-width: 100%;
  height: 2rem;
  /* 32px */
  transition:
    color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
  gap: var(--spacing8);
}

.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 {
  border-bottom: var(--style-line-lighter);
}

.Dropdown>fieldset label:last-of-type,
.Dropdown>ul li:last-of-type {
  border-bottom: none;
}

.List-button:hover {
  background: var(--color-selectable-hover-face);
  color: var(--color-selectable-hover-label);
}

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

.List-selected {
  background: var(--color-face-inverse);
  color: var(--color-label-inverse);
  justify-content: space-between;
}

.Dropdown>ul li[checked],
.Dropdown>fieldset input:checked+ :is(label, label:hover, label:focus) {
  background: var(--gray-060);
  color: var(--color-primary-white);
  justify-content: flex-start;
}

html:not(.Theme-night) .Dropdown>fieldset input:checked+ :is(label, label:hover, label:focus),
.Theme-night-toggle:not(:checked)~* .Dropdown>fieldset input:checked+ :is(label, label:hover, label:focus) {
  color: var(--gray-100);
}

.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: inherit;
  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: 3rem;
  /* 48px */
}

.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(--spacing8);
}

.NavList cm-accordion summary span {
  display: flex;
  align-items: center;
  gap: var(--spacing8);
  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: transparent;
  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(--spacing8);
  gap: var(--spacing8);
  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: max-content;
}

.NavList li ul li {
  min-height: 2rem;
  /* 32px */
}

nav .Line-h-light {
  margin: var(--spacing16) 0;
}

cm-paginator {
  display: flex;
  gap: var(--spacing8);
  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;
}

/* Pagination buttons should be same height as regular buttons (24px), but width can scale for larger numbers */
.Button.Paginator-first,
.Button.Paginator-last,
.Button.Paginator-next,
.Button.Paginator-prev,
.Button.Paginator-page,
.Button.Paginator-page-m,
.Button.Paginator-start,
.Button.Paginator-end,
.Button.Paginator-current {
  height: var(--spacing24);
  /* 24px */
  min-width: var(--spacing24);
  /* 24px minimum, can grow for larger numbers */
  padding: 0 var(--spacing4);
  /* Add horizontal padding for better spacing */
  font-size: var(--text-size-s);
  /* Smaller font size */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Ensure icons in pagination buttons are properly sized */
.Button.Paginator-start cm-icon,
.Button.Paginator-end cm-icon,
.Button.Paginator-next cm-icon,
.Button.Paginator-prev cm-icon {
  width: 1rem;
  /* 16px */
  height: 1rem;
  /* 16px */
}

.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 !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media screen and (min-width: 681px) {

  .Paginator-page-m,
  .Paginator-start,
  .Paginator-end {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

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

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

.Panel-table,
.Panel:has(cm-table) {
  gap: 0;
  flex: 1 1 auto;
}

.Panel:has(cm-table) .Panel-header {
  padding: var(--spacing12);
  background-color: var(--color-panel-face);
  margin-bottom: 0;
}

.Panel:has(cm-table) .Panel-header::after {
  display: none;
}

.Panel:has(cm-table) .Filters-row {
  padding: var(--spacing12);
  background-color: var(--color-panel-face);
  border-bottom: 1px solid var(--color-bg);
}

.Panel:has(cm-table) .PaginatorLabel {
  padding: var(--spacing16);
  background-color: var(--color-panel-face);
}

.Panel-header {
  min-height: max-content;
  position: relative;
  padding: var(--spacing12);
  border-bottom: 1px solid var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--style-gap-n);
}

.Panel-header-title {
  text-transform: uppercase;
}

.Panel-header-group {
  display: flex;
  align-items: center;
  gap: var(--style-gap-n);
}

.Panel-header-spacer {
  flex-grow: 1;
}

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

.LearnMore-button summary.Button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
  cursor: pointer;
  padding: var(--spacing4) var(--spacing8);
  height: auto;
  font-size: var(--text-size-s);
}

.LearnMore-button summary.Button cm-icon {
  flex-shrink: 0;
}

@media screen and (max-width: 640px) {
  .Panel-header {
    flex-direction: row;
    align-items: space-between;
    gap: var(--style-gap-n);
  }
}

#landing-page {
  height: calc(100vh - var(--style-app-header-h));
  --animation-blur-start: rgba(34, 202, 173, 0.01);
  --animation-blur-end: rgba(34, 202, 173, 0.12);
  --animation-white-start: rgba(16, 18, 26, 0.9);
  --animation-white-end: rgba(16, 18, 26, 0);
  --animation-wrapper-start: rgba(0, 0, 0, 0.1);
  --animation-wrapper-end: rgba(0, 0, 0, 0);
  align-items: center;
  justify-content: center;
  gap: var(--style-gap-xxxl);
  overflow: hidden;
}

html.Theme-night #landing-page,
.Theme-night-toggle:checked ~ .Theme-content #landing-page {
  --animation-white-start: #ffffff;
  --animation-white-end: rgba(255, 255, 255, 0);
  --animation-wrapper-start: rgba(255, 255, 255, 0.1);
  --animation-wrapper-end: rgba(255, 255, 255, 0);
}

#landing-page .Panel {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: var(--color-landing-panel-face, var(--color-panel-face));
  flex: 1;
  min-height: 100%;
}

#landing-page .Panel .Wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10%;
  width: 80%;
}

#landing-page .Panel .Content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing16);
  width: 100%;
}

#landing-page .Panel .Content-left p {
  font-size: 16px;
  color: var(--gray-090);
}

#landing-page .Panel .Content-left .Button-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--style-gap-l);
}

.Landing-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing12);
  font-size: 4.5rem;
}

.Landing-logo-mark {
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
  color: inherit;
}

.Landing-logo b {
  font-weight: var(--text-weight-normal);
  margin-right: var(--spacing4);
}

.Landing-logo > span:not(.Trademark) {
  font-weight: 300;
}

.Landing-logo .Trademark {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 1;
  position: relative;
  top: 0.1em;
}

.Animation-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing8);
  font-size: 0.875rem;
}

.Animation-picker select {
  padding: 0.4rem 0.6rem;
  border-radius: var(--style-corner-default);
  border: 1px solid var(--gray-060);
  background: transparent;
  color: inherit;
}

@media screen and (max-width: 960px) {
  #landing-page .Panel .Wrapper {
    grid-template-columns: 1fr;
    width: 100%;
    gap: var(--spacing24);
  }

  #landing-page .Panel .Content-left {
    align-items: flex-start;
    text-align: left;
  }

  #landing-page .Panel .Content-left .Button-wrapper {
    justify-content: center;
  }

  #landing-page .Animation {
    order: 2;
  }
}

@media screen and (max-width: 640px) {
  #landing-page .Panel .Wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 var(--spacing16);
    gap: var(--spacing16);
  }

  #landing-page .Panel .Content-left .Button-wrapper {
    flex-direction: column;
    width: 100%;
  }

  #landing-page .Panel .Content-left .Button-wrapper > * {
    width: 100%;
  }

  #landing-page .Landing-logo {
    font-size: 2.5rem;
  }

  #landing-page .Landing-logo-mark {
    width: 140px;
  }

  #landing-page .Panel .Content-left p {
    font-size: 16px;
  }
}

.Animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.Animation.security-master,
.Animation.datonomy,
.Animation.prices,
.Animation.market-data-feed,
.Animation.coverage,
.Animation.indexes,
.Animation.atlas {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.Animation.security-master .Animation-shape-large {
  position: absolute;
  width: 60%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -10px 10px 0 rgba(153, 94, 212, 0.4) inset,
    0 2px 6px 2px rgba(255, 255, 255, 0.05) inset,
    10px 10px 23px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(10.5px);
  left: 20%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.Animation.security-master .Animation-shape-green {
  position: absolute;
  width: 35%;
  height: 70%;
  border-radius: 0;
  background: #22caad;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  right: 0;
  top: 15%;
  transform: translateY(-50%);
}

.Animation.security-master .Animation-shape-white {
  position: absolute;
  width: 35%;
  height: 70%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--animation-white-start) 0%, var(--animation-white-end) 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  left: 0;
  top: 15%;
  transform: translateY(-50%);
}

.Animation.datonomy .Animation-shape-large {
  position: absolute;
  width: 87.5%;
  height: 100%;
  border-radius: 0;
  border-top-right-radius: 100% 100%;
  border-bottom-right-radius: 100% 100%;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -10px 10px 0 rgba(153, 94, 212, 0.4) inset,
    0 2px 6px 2px rgba(255, 255, 255, 0.05) inset,
    10px 10px 23px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(10.5px);
  right: 0;
  top: 0;
  transform: translateY(-50%);
}

.Animation.datonomy .Animation-shape-green {
  position: absolute;
  width: 75%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: #22caad;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  left: 0;
  top: 12.5%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}

.Animation.datonomy .Animation-shape-white {
  position: absolute;
  width: 37.5%;
  height: 37.5%;
  border-radius: 0;
  background: linear-gradient(315deg, var(--animation-white-end) 0.12%, var(--animation-white-start) 100.08%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  left: 0;
  top: 7.5%;
}

.Animation.prices .Animation-shape-large {
  position: absolute;
  width: 75%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -10px 10px 0 rgba(153, 94, 212, 0.4) inset,
    0 2px 6px 2px rgba(255, 255, 255, 0.05) inset,
    10px 10px 23px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(10.5px);
  left: 12.5%;
  top: 12.5%;
  z-index: 2;
}

.Animation.prices .Animation-shape-green {
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: #22caad;
  right: 0;
  top: 0;
}

.Animation.prices .Animation-shape-white {
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, var(--animation-white-start) 0%, var(--animation-white-end) 102.34%);
  left: 0;
  bottom: 0;
  z-index: 1;
}

.Animation.market-data-feed {
  --market-blur-x: 45%;
}

.Animation.market-data-feed .Animation-shape-large {
  position: absolute;
  width: 62.5%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -10px 10px 0 rgba(153, 94, 212, 0.4) inset,
    0 2px 6px 2px rgba(255, 255, 255, 0.05) inset,
    10px 10px 23px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(10.5px);
  left: 7.5%;
}

.Animation.market-data-feed .Animation-shape-green {
  position: absolute;
  width: 50%;
  height: 75%;
  border-radius: 0;
  background: #22caad;
  right: 0;
  top: 12.5%;
}

.Animation.market-data-feed .Animation-shape-white {
  position: absolute;
  width: 25%;
  height: 50%;
  border-radius: 0;
  background: linear-gradient(180deg, var(--animation-white-start) 0%, var(--animation-white-end) 102.34%);
  left: 0;
  top: 25%;
}

.Animation.coverage .Animation-shape-large {
  position: absolute;
  width: 80%;
  aspect-ratio: 1 / 1;
  height: auto;
  top: 0;
  right: 0;
  border-radius: 0;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -7.5px 7.5px 0 rgba(153, 94, 212, 0.4) inset,
    0 1.5px 4.5px 1.5px rgba(255, 255, 255, 0.05) inset,
    7.5px 7.5px 17.25px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(7.875px);
  z-index: 2;
}

.Animation.coverage .Animation-shape-green {
  position: absolute;
  width: 40%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: #22caad;
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
}

.Animation.coverage .Animation-shape-white {
  position: absolute;
  width: 20%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 0;
  background: linear-gradient(45deg, var(--animation-white-start) 3.5%, var(--animation-white-end) 100%);
  left: 10%;
  bottom: 10%;
  z-index: 1;
}

.Animation.indexes {
  --indexes-size: 100%;
  --indexes-half: 50%;
}

.Animation.indexes .Animation-shape-large {
  position: absolute;
  inset: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow: 0 -7.5px 7.5px 0 rgba(153, 94, 212, 0.4) inset,
    0 1.5px 4.5px 0 rgba(255, 255, 255, 0.05) inset,
    7.5px 7.5px 17.25px 0 rgba(153, 94, 212, 0.18) inset;
  backdrop-filter: blur(7.875px);
}

.Animation.indexes .Animation-shape-white {
  position: absolute;
  width: var(--indexes-half);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: linear-gradient(180deg, var(--animation-white-start) 0%, var(--animation-white-end) 102.34%);
  top: 0;
  left: 0;
}

.Animation.indexes .Animation-shape-green {
  position: absolute;
  width: var(--indexes-half);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: #22caad;
  clip-path: polygon(0 100%, 0 0, 100% 0);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.Animation-shape-large,
.Animation-shape-white,
.Animation-shape-green {
  animation-name: animation-float;
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

.Animation.atlas .Animation-shape-large {
  animation-duration: 18s;
  animation-delay: -6s;
}

.Animation-shape-white {
  animation-duration: 16s;
  animation-delay: -12s;
}

.Animation-shape-green {
  animation-duration: 12s;
  animation-delay: -3s;
}

.Animation.atlas .Animation-shape-large {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(340deg, var(--animation-blur-start) -44.29%, var(--animation-blur-end) 86.52%);
  box-shadow:
    0 -10px 10px 0 rgba(153, 94, 212, 0.4) inset,
    0 2px 6px 2px rgba(255, 255, 255, 0.05) inset,
    10px 10px 23px 0 rgba(153, 94, 212, 0.18) inset;
  -webkit-backdrop-filter: blur(10.5px);
  backdrop-filter: blur(10.5px);
}

.Animation.atlas .Animation-shape-white,
.Animation.atlas .Animation-shape-green {
  position: absolute;
  width: 50%;
  height: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.Animation.atlas .Animation-shape-white {
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, var(--animation-white-start) 0%, var(--animation-white-end) 102.34%);
}

.Animation.atlas .Animation-shape-green {
  top: 0;
  right: 0;
  background: #22caad;
}

@keyframes animation-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(0.5rem, -1rem, 0) scale(1.03);
  }

  66% {
    transform: translate3d(-0.75rem, -0.75rem, 0) scale(0.97);
  }

  100% {
    transform: translate3d(-0.25rem, -0.5rem, 0) scale(1.01);
  }
}

.Dialog .Panel,
.Popup-dialog .Panel {
  background: var(--gray-040);
  border-radius: 0;
}

html.Theme-night .Dialog .Panel,
html.Theme-night .Popup-dialog .Panel,
.Theme-night-toggle:checked~* .Dialog .Panel,
.Theme-night-toggle:checked~* .Popup-dialog .Panel {
  background: var(--gray-040);
}

html:not(.Theme-night) .Dialog .Panel,
html:not(.Theme-night) .Popup-dialog .Panel,
.Theme-night-toggle:not(:checked)~* .Dialog .Panel,
.Theme-night-toggle:not(:checked)~* .Popup-dialog .Panel {
  background: var(--white);
}

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(--spacing2));
  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(--spacing4) 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(--spacing8) 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);
}

: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;
}


cm-sidebar {
  --color-sidebar-active-toggle-bg: var(--color-primary-darkest-purple);
  --style-popup-gap: var(--spacing16);
  grid-area: sidebar;
  align-self: start;
  z-index: 99;
  width: var(--style-sidebar-width);
  height: 100vh;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

html:not(.Theme-night) cm-sidebar,
.Theme-night-toggle:not(:checked)~* cm-sidebar {
  --color-sidebar-active-toggle-bg: var(--gray-100-a12);
}

.Sidebar-extras {
  --max-width: 30rem;
  /* 480px */
  background-color: var(--color-sidebar-content-bg);
  color: var(--color-sidebar-content-text);
  padding: var(--spacing8);
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
  transition:
    transform var(--style-animation-speed-slow),
    max-width var(--style-animation-speed-slow),
    box-shadow 200ms ease;
  width: 100vw;
  max-width: min(calc(100vw - var(--style-sidebar-width)), calc(var(--max-width) - var(--style-sidebar-width)));
  box-shadow: none;

  position: fixed;
  top: 0;
  left: var(--style-sidebar-width);
  bottom: 0;
  border-right: 2px solid var(--color-bg);
}


@media screen and (min-width: 961px) {
  .Sidebar-extras {
    width: max-content;
  }
}

/* Sidebar extras - match dropdown option styles */
.Sidebar-extras .Accordion summary {
  background-color: transparent;
  border: none;
  padding: 0;
}

.Sidebar-extras .Accordion>summary>* {
  background-color: transparent;
  border: none;
  color: var(--color-primary-white);
  padding: var(--spacing8);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-n);
}

.Sidebar-extras .Accordion:hover summary,
.Sidebar-extras .Accordion.hover summary {
  background-color: var(--gray-050);
}

.Sidebar-extras .Accordion:hover>summary>*,
.Sidebar-extras .Accordion.hover>summary>* {
  background-color: var(--gray-050);
}

.Sidebar-extras .Accordion.active summary,
.Sidebar-extras .Accordion[open] summary {
  background-color: transparent !important;
}

.Sidebar-extras .Accordion.active>summary>*,
.Sidebar-extras .Accordion[open]>summary>* {
  background-color: transparent !important;
}

.Sidebar-extras .NavList-item,
.Sidebar-extras .NavList li ul li {
  border: none;
  padding: 0;
}

.Sidebar-extras .NavList-item :is(a, button),
.Sidebar-extras .NavList li ul li :is(a, button) {
  color: var(--gray-080);
  padding: var(--spacing8) 0;
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-s);
  border-radius: 3px;
}

.Sidebar-extras .NavList-item :is(a, button):is(:hover, :focus),
.Sidebar-extras .NavList li ul li:not(.NavList-selected) :is(a, button):is(:hover, :focus) {
  background-color: var(--gray-100-a12);
  color: var(--white);
}

.Sidebar-extras .NavList-selected :is(a, button),
.Sidebar-extras .NavList-item.NavList-selected :is(a, button),
.Sidebar-extras .NavList li ul li.NavList-selected :is(a, button) {
  background-color: var(--gray-060);
  color: var(--white);
}

/* Category headers (accordion summaries) should be bold and uppercase */
.Sidebar-extras .NavList cm-accordion summary span {
  font-weight: var(--text-weight-bold) !important;
  font-size: var(--text-size-n) !important;
  text-transform: uppercase;
}

/* Category titles in sidebar extras */
.Sidebar-extras .SelectList-module-categoryTitle-d0efb7031bc1 {
  font-size: var(--text-size-s);
  text-transform: uppercase;
  color: var(--gray-090);
  padding: var(--spacing16) var(--spacing4) var(--spacing4) var(--spacing4);
  border: none;
}

.Sidebar-extras .SelectList-module-categoryTitle-d0efb7031bc1:first-of-type {
  padding: var(--spacing4);
}

/* Override existing NavList font styles for sidebar extras */
.Sidebar-extras .NavList-item :is(a, button) {
  font-weight: var(--text-weight-normal) !important;
  font-size: var(--text-size-n) !important;
}

/* NavList item icons in sidebar extras */
.Sidebar-extras .NavList-item :is(cm-icon, cm-icon-color, cm-icon-coin),
.Sidebar-extras .NavList-item :is(cm-icon, cm-icon-color, cm-icon-coin) *,
.Sidebar-extras .NavList-item :is(cm-icon, cm-icon-color, cm-icon-coin) svg,
.Sidebar-extras .NavList-item :is(cm-icon, cm-icon-color, cm-icon-coin) svg * {
  width: 16px !important;
  height: 16px !important;
}

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

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

.Sidebar-toolbar {
  background-color: var(--color-sidebar-bg);
  width: var(--style-sidebar-width);
  padding: var(--style-sidebar-padding);
  border-right: 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-right-color: var(--color-bg);
  border-right-width: 1px;
}

.Sidebar-toolbar-line {
  display: none;
}

.Sidebar-toolbar-spacer {
  flex: 1;
}

.Sidebar-toggle-button,
.Sidebar-button {
  color: var(--color-sidebar-text);
  transition: background-color var(--style-animation-speed-normal);
  width: var(--style-input-h-n);
  padding: var(--spacing4);
}

.Sidebar-toggle-button cm-icon,
.Sidebar-button cm-icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] {
  width: 20px;
  height: 20px;
  position: relative;
}

.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] svg.Icon-svg,
.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] svg[viewBox="0 0 24 24"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] svg.Icon-svg use {
  display: none !important;
}

.Sidebar-toggle-button cm-icon svg,
.Sidebar-button cm-icon svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] svg.Talos-logo {
  width: 20px !important;
  height: 20px !important;
  pointer-events: none;
  display: block !important;
  visibility: visible !important;
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* Hide Talos logo when chevron is shown (sidebar is open) */
.Sidebar-toggle-button.Sidebar-toggle-active cm-icon[name="cm-sidebar-logo"] svg.Talos-logo,
.Sidebar-toggle-button cm-icon[name="chevron-left"] ~ svg.Talos-logo,
.Sidebar-toggle-button cm-icon[name="chevron-left"] svg.Talos-logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.Sidebar-toggle-button cm-icon[name="cm-sidebar-logo"] svg.Talos-logo path {
  fill: currentColor !important;
}

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-warning cm-icon,
details:not([open])>.Sidebar-button-warning cm-icon svg,
details:not([open])>.Sidebar-button-warning cm-icon svg * {
  color: var(--color-border-warning);
}

/* Light mode specific lighter yellow for better visibility */
html:not(.Theme-night) details:not([open])>.Sidebar-button-warning,
.Theme-night-toggle:not(:checked)~* details:not([open])>.Sidebar-button-warning {
  color: var(--yellow-lighten);
}

html:not(.Theme-night) details:not([open])>.Sidebar-button-warning cm-icon,
html:not(.Theme-night) details:not([open])>.Sidebar-button-warning cm-icon svg,
html:not(.Theme-night) details:not([open])>.Sidebar-button-warning cm-icon svg *,
.Theme-night-toggle:not(:checked)~* details:not([open])>.Sidebar-button-warning cm-icon,
.Theme-night-toggle:not(:checked)~* details:not([open])>.Sidebar-button-warning cm-icon svg,
.Theme-night-toggle:not(:checked)~* details:not([open])>.Sidebar-button-warning cm-icon svg * {
  color: var(--yellow-lighten);
}

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-toolbar cm-popup .Popup-dialog:not(.Dialog-cm-key-auth) {
  left: calc(var(--style-sidebar-width) + var(--spacing8)) !important;
  right: auto !important;
}

.Sidebar-toolbar cm-popup .Popup-dialog .Panel {
  padding: var(--spacing12);
  gap: var(--spacing8);
}

.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: 2rem;
  /* 32px */
}

.Skeleton-text-m {
  height: 1.5rem;
  /* 24px */
}

.Skeleton-text-s {
  height: 1rem;
  /* 16px */
}

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

.Skeleton-icon-l {
  height: 2rem;
  /* 32px */
  width: 2rem;
  /* 32px */
}

.Skeleton-icon-m {
  height: 1.5rem;
  /* 24px */
  width: 1.5rem;
  /* 24px */
}

.Skeleton-icon-s {
  height: 1rem;
  /* 16px */
  width: 1rem;
  /* 16px */
}

@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(--spacing64);
}

.Spotlight cm-inline-svg {
  min-width: 16rem;
  /* 256px */
}

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

.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: 5rem;
  /* 80px */

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

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

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

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

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

  .Spotlight cm-inline-svg {
    min-width: 8rem;
    /* 128px */
  }

  #landing-page .SearchForm {
    max-width: 100% !important;
  }
}

cm-table {
  --table-width: calc(100vw - 4 * var(--spacing16) - 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%;
  table-layout: auto;
}

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: calc(var(--table-width) / 2);
  color: var(--color-text);
  background-color: transparent;
  transition: color var(--style-animation-speed-normal);
}

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

@media screen and (min-width: 768px) {
  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-bg);
  background-color: var(--color-panel-face);
  color: var(--gray-100);
  padding: var(--spacing8) var(--spacing12);
  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);
}

html:not(.Theme-night) cm-table tbody>tr>*,
.Theme-night-toggle:not(:checked)~* cm-table tbody>tr>* {
  color: var(--gray-100);
}

/* Ensure links in table cells use the link color */
cm-table tbody>tr>* .Link,
cm-table tbody>tr>* a.Link {
  color: var(--color-link);
}

html:not(.Theme-night) cm-table tbody>tr>* .Link,
html:not(.Theme-night) cm-table tbody>tr>* a.Link,
.Theme-night-toggle:not(:checked)~* cm-table tbody>tr>* .Link,
.Theme-night-toggle:not(:checked)~* cm-table tbody>tr>* a.Link {
  color: var(--color-link);
}

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

/* Light mode table row hover */
html:not(.Theme-night) cm-table table tbody tr:hover th,
html:not(.Theme-night) cm-table table tbody tr:hover td,
.Theme-night-toggle:not(:checked)~* cm-table table tbody tr:hover th,
.Theme-night-toggle:not(:checked)~* cm-table table tbody tr:hover td {
  background-color: var(--gray-010);
}

/* Light mode table cell text colors */
html:not(.Theme-night) cm-table td,
html:not(.Theme-night) cm-table th,
.Theme-night-toggle:not(:checked)~* cm-table td,
.Theme-night-toggle:not(:checked)~* cm-table th {
  color: var(--gray-100);
}

/* Light mode Text-code text colors */
html:not(.Theme-night) .Text-code,
.Theme-night-toggle:not(:checked)~* .Text-code {
  color: var(--gray-100);
}

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

cm-table thead th,
.Table-title {
  background-color: var(--color-panel-face);
  color: var(--gray-090);
  border-bottom: 1px solid var(--color-bg);
  padding: var(--spacing8) var(--spacing12);
  margin-top: var(--style-table-padding);
  margin-bottom: var(--style-table-padding);
  position: relative;
  transition: color var(--style-animation-speed-normal);
}

html:not(.Theme-night) cm-table thead th,
html:not(.Theme-night) .Table-title,
.Theme-night-toggle:not(:checked)~* cm-table thead th,
.Theme-night-toggle:not(:checked)~* .Table-title {
  color: var(--gray-080);
}

cm-table thead th:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--style-table-padding) + var(--spacing4));
  right: 0;
  bottom: calc(var(--style-table-padding) + var(--spacing4));
  width: 1px;
  background-color: var(--gray-040);
  transition: background-color var(--style-animation-speed-normal);
}

cm-table thead th:not(:first-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--style-table-padding) + var(--spacing4));
  left: 0;
  bottom: calc(var(--style-table-padding) + var(--spacing4));
  width: 1px;
  background-color: var(--gray-040);
  transition: background-color var(--style-animation-speed-normal);
}

/* Hover: before/after, text and chevron turn to gray-100 */
/* Only apply hover styles if the column is NOT sorted */
cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)) {
  color: var(--gray-100);
}

html:not(.Theme-night) cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)),
.Theme-night-toggle:not(:checked)~* cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)) {
  color: var(--gray-100);
}

cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc))::before,
cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc))::after {
  background-color: var(--gray-080);
}

cm-table thead th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)) cm-icon[name="chevron-down"],
thead.Table-header-sortable th:hover:not(:has(cm-icon[name="chevron-down"].Table-header-sortable-up)):not(:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)) cm-icon[name="chevron-down"] {
  color: var(--gray-100);
}

/* Sorted: same styling as hover - before/after, text & chevron */
/* Target the th that contains the sorted icon - use more specific selectors */
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up),
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc) {
  color: var(--gray-100) !important;
}

html:not(.Theme-night) cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up),
html:not(.Theme-night) cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc),
.Theme-night-toggle:not(:checked)~* cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up),
.Theme-night-toggle:not(:checked)~* cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc) {
  color: var(--gray-100) !important;
}

cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up)::before,
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up)::after,
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)::before,
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc)::after {
  background-color: var(--gray-080) !important;
}

cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-up) cm-icon[name="chevron-down"],
cm-table thead.Table-header-sortable th:has(cm-icon[name="chevron-down"].Table-header-sortable-asc) cm-icon[name="chevron-down"] {
  color: var(--gray-100) !important;
  fill: var(--gray-100) !important;
}

cm-table thead th cm-icon,
cm-table thead th cm-icon * {
  width: 16px !important;
  height: 16px !important;
}

cm-table thead th cm-icon svg,
cm-table thead th cm-icon svg * {
  width: 16px !important;
  height: 16px !important;
}

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;
}


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

.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(--spacing12);
}

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(--gray-100);
}

/* Tabs */
.Tabs {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: max-content;
  margin: 0 var(--spacing12);
  height: 2.5rem;
}

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

.Tabs > label {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  gap: var(--spacing8);
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  margin-right: var(--spacing12);
  font-size: var(--text-size-n);
  color: var(--gray-090);
  cursor: pointer;
  text-transform: none;
}

.Tabs > label {
  border-bottom: 2px solid transparent;
}

.Tabs > label * {
  color: var(--gray-090);
}

.Tabs > label:hover {
  border-bottom: 2px solid var(--gray-000-a20);
}

.Tabs label:hover * {
  color: var(--gray-100);
}

.Tabs > input:checked + label {
  border-bottom: 2px solid var(--gray-100);
}

.Tabs > input:checked + label * {
  color: var(--gray-100);
}

.Tabs > input:disabled + label {
  opacity: 0.5;
}

.Panel cm-tabs {
  border-bottom: 1px solid var(--color-bg);
}

/* .Tabs-s>label {
  height: 2.5rem;
  font-size: var(--text-size-input-n);
} */

/* body:not([data-pointer]) .Tabs input:focus+label,
.Tabs label:hover {
  color: var(--gray-100);
  border-bottom: 2px solid var(--gray-100);
} */

@media screen and (max-width: 640px) {

  .Tabs > input:not(:checked) + label span {
    display: none;
  }

  .Tabs > label {
    min-width: 2.5rem;
  }
}

/* Vertical Tabs */
/*
.Tabs.vertical {
  flex-direction: column;
}

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

.Tabs.vertical>label cm-icon {
  padding: 0.3125rem;
}

.Tabs:not(.vertical)>input:checked+label {
  border-bottom: 1px solid var(--color-line);
  color: var(--color);
  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;
}
*/

.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(--spacing4);
  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);
  color: var(--gray-100);
}

.Text-page-title,
.Text-content h2,
.Text-heading-2 {
  font-size: 1.25rem;
  /* 20px */
  line-height: 1.2;
  /* 24px / 20px */
  font-weight: 500;
  color: var(--gray-100);
}

.Text-page-title cm-coin svg,
.Text-content h2 cm-coin svg,
.Text-heading-2 cm-coin svg {
  fill: var(--gray-100);
  color: var(--gray-100);
}

/* Make text after mantissa match mantissa color in all elements */
/* Set any element containing mantissa to mantissa color so asset symbol (e.g., "BTC") inherits it */
*:has(.Text-mantissa),
*:has(> .Text-mantissa),
*:has(span .Text-mantissa) {
  color: var(--color-text-mantissa);
}

/* Preserve the original color for the characteristic part (number before mantissa) */
.Text-heading-2:has(.Text-mantissa) .Text-amount-characteristic {
  color: var(--gray-100);
}

.Text-code:has(.Text-mantissa) .Text-amount-characteristic {
  color: var(--color-text);
}

td:has(.Text-mantissa) .Text-amount-characteristic,
div:has(.Text-mantissa) .Text-amount-characteristic,
span:has(.Text-mantissa) .Text-amount-characteristic {
  color: var(--color-text);
}

/* Ensure asset symbol and unit text (like "Bytes" and "UTC") use mantissa color */
.Text-asset-symbol,
.Text-code .Text-asset-symbol,
#block-size .Text-asset-symbol,
#block-virtual-size .Text-asset-symbol,
#new-coin-issuance .Text-asset-symbol,
#consensus-size .Text-asset-symbol,
#physical-size .Text-asset-symbol,
#reported-time .Text-asset-symbol,
#normalized-time .Text-asset-symbol,
#creation-time .Text-asset-symbol,
#first-received .Text-asset-symbol,
#first-sent .Text-asset-symbol,
#last-received .Text-asset-symbol,
#last-sent .Text-asset-symbol {
  color: var(--color-text-mantissa);
  margin-left: 0.25em;
  /* Add spacing since parent .Text-code uses display: flex which collapses whitespace */
}

.Text-content h3,
.Text-heading-3 {
  font-size: 0.875rem;
  line-height: 1;
  color: var(--gray-100);
}

html:not(.Theme-night) .Text-content h3,
html:not(.Theme-night) .Text-heading-3,
.Theme-night-toggle:not(:checked)~* .Text-content h3,
.Theme-night-toggle:not(:checked)~* .Text-heading-3 {
  color: var(--gray-100);
}

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

html:not(.Theme-night) .Text-content h4,
html:not(.Theme-night) .Text-heading-4,
.Theme-night-toggle:not(:checked)~* .Text-content h4,
.Theme-night-toggle:not(:checked)~* .Text-heading-4 {
  color: var(--gray-100);
}

.Theme-night .Text-content h4,
.Theme-night .Text-heading-4,
.Theme-night-toggle:checked~* .Text-content h4,
.Theme-night-toggle:checked~* .Text-heading-4 {
  color: var(--gray-100);
}

.Text-content h5,
.Text-heading-5 {
  font-size: var(--text-size-s);
  font-weight: var(--text-weight-normal);
  text-transform: uppercase;
  color: var(--gray-100);
}

html:not(.Theme-night) .Text-heading-5,
.Theme-night-toggle:not(:checked)~* .Text-heading-5 {
  color: var(--gray-100);
}

.Text-content h6,
.Text-heading-6,
cm-table thead th,
.Table-title,
.Input-label> :not(input, select, textarea, .Input-with-icon) {
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 400;
  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);
}

.Trademark,
.TM {
  line-height: 0;
}

.Text-link {
  color: var(--color-link);
  font-family: inherit;
  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(--spacing8);
}

.Text-code {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media screen and (max-width: 640px) {
  .Text-code {
    flex-wrap: wrap;
  }
}

.Text-code,
.Text-content code,
.monospace {
  font-family: inherit;
}

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

.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(--spacing4);
  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);
  font-weight: 500;
  transition: color var(--style-animation-speed-normal);
}

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(--spacing4) !important;
  position: absolute;
  transition: none !important;
  width: 100% !important;
}

.Dropdown>ul {
  border: none;
  padding: 0;
  border-radius: var(--style-corner-default);
  background: var(--gray-030);
  width: max-content;
  z-index: var(--z-high);
  max-height: 40vh;
  min-width: var(--dropdown-min-width);
  overflow-y: auto;
}

.Dropdown>ul li {
  cursor: pointer;
}


cm-toast-list {
  position: fixed;
  bottom: var(--spacing32);
  margin: 0 auto;
  left: var(--spacing16);
  right: var(--spacing16);
  display: flex;
  flex-direction: column;
  gap: var(--spacing8);
  z-index: 10001;
}

@media screen and (min-width: 960px) {
  cm-toast-list {
    left: auto;
    margin: 0;
    right: var(--spacing16);
    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-close-button {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: var(--spacing8);
  border-radius: var(--ui-radius-button, 3px);
  border: 1px solid var(--token-border-button-priority, rgba(255, 255, 255, 0.00)) !important;
  background: var(--bg-button-priority, rgba(229, 229, 230, 0.24)) !important;
}

.Toast-close-button:hover {
  border-radius: var(--ui-radius-button, 3px);
  border: 1px solid var(--border-button-priority-hover, rgba(255, 255, 255, 0.00)) !important;
  background: var(--bg-button-priority-hover, rgba(229, 229, 230, 0.24)) !important ;
}

/* Light mode toast close button */
html:not(.Theme-night) .Toast-close-button,
.Theme-night-toggle:not(:checked)~* .Toast-close-button {
  border-radius: var(--ui-radius-button, 3px);
  border: 1px solid var(--border-button-priority, rgba(30, 30, 41, 0.24)) !important;
  background: var(--bg-button-priority, rgba(30, 30, 41, 0.08)) !important;
}

html:not(.Theme-night) .Toast-close-button:hover,
.Theme-night-toggle:not(:checked)~* .Toast-close-button:hover {
  border-radius: var(--ui-radius-button, 3px);
  border: 1px solid var(--border-button-priority, rgba(30, 30, 41, 0.24)) !important;
  background: var(--bg-button-priority, rgba(30, 30, 41, 0.08)) !important;
}

.Toast-info cm-icon {
  color: var(--blue-lighten)
}

.Toast-error cm-icon {
  color: var(--red-lighten)
}

.Toast-warning cm-icon {
  color: var(--yellow-lighten)
}

.Toast-success cm-icon {
  color: var(--green-lighten)
}

.Toast-info,
.Toast-error,
.Toast-warning,
.Toast-success {
  display: flex;
  flex: none;
  gap: var(--spacing6);
  align-items: center;
  padding: var(--spacing8);
  border: none;
  border-radius:  0 var(--style-corner-default) var(--style-corner-default) 0;
  background-color: var(--gray-main);
}

@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;
}

.Toast-info,
.Toast-success,
.Toast-warning,
.Toast-error {
  color: var(--gray-100);
}

.Toast-info {
  border-left: 3px solid var(--blue-lighten);
  background-image: linear-gradient(var( --alert-highlight), var( --alert-highlight));
}

.Toast-success {
  border-left: 3px solid var(--green-lighten);
  background-image: linear-gradient(var(--alert-positive), var(--alert-positive));
}

.Toast-warning {
  border-left: 3px solid var(--yellow-lighten);
  background-image: linear-gradient(var(--alert-warning), var(--alert-warning));
}

.Toast-error {
  border-left: 3px solid var(--red-lighten);
  background-image: linear-gradient(var(--alert-critical), var(--alert-critical));
}

.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: 0.5rem;
  /* 8px */
  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(--spacing8);
  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;
  background: transparent;
}

/* Copy button base styles - all copy buttons should be 16x16px with 10x10px icon */
/* Use same background and hover styles as Button Button-block */
#address-copy,
.Copy-button,
.Copy-l {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  /* 16px */
  height: 1rem;
  /* 16px */
  padding: 2px;
  border-radius: var(--style-corner-default);
  background-color: var(--gray-030);
  border: 1px solid var(--button-default-border);
  color: var(--gray-090);
  transition: background-color var(--style-animation-speed-normal),
    border-color var(--style-animation-speed-normal);
}

/* Light mode - same as Button */
html:not(.Theme-night) .Copy-button,
html:not(.Theme-night) .Copy-l,
html:not(.Theme-night) #address-copy,
.Theme-night-toggle:not(:checked)~* .Copy-button,
.Theme-night-toggle:not(:checked)~* .Copy-l,
.Theme-night-toggle:not(:checked)~* #address-copy {
  background-color: var(--color-button-default-bg);
}

/* Ensure cm-copy doesn't add extra background or sizing */
cm-copy .Copy-button {
  width: 100%;
  height: 100%;
}

.Copy-button:hover,
.Copy-l:hover,
#address-copy:hover,
body:not([data-pointer]) .Copy-button:focus,
body:not([data-pointer]) .Copy-l:focus {
  background-color: var(--gray-040);
  border-color: var(--button-default-border-hover);
  color: var(--gray-100);
}

/* Light mode hover - same as Button */
html:not(.Theme-night) .Copy-button:hover,
html:not(.Theme-night) .Copy-l:hover,
html:not(.Theme-night) #address-copy:hover,
html:not(.Theme-night) body:not([data-pointer]) .Copy-button:focus,
html:not(.Theme-night) body:not([data-pointer]) .Copy-l:focus,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover,
.Theme-night-toggle:not(:checked)~* #address-copy:hover,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Copy-button:focus,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Copy-l:focus {
  background-color: var(--color-button-hover-bg);
  color: var(--gray-100);
}

.Copy-button:active,
.Copy-l:active,
#address-copy:active {
  background-color: var(--gray-040);
  border-color: var(--button-default-border-active);
  color: var(--gray-100);
}

/* Light mode active - same as Button */
html:not(.Theme-night) .Copy-button:active,
html:not(.Theme-night) .Copy-l:active,
html:not(.Theme-night) #address-copy:active,
.Theme-night-toggle:not(:checked)~* .Copy-button:active,
.Theme-night-toggle:not(:checked)~* .Copy-l:active,
.Theme-night-toggle:not(:checked)~* #address-copy:active {
  background-color: var(--color-button-hover-bg);
  color: var(--gray-100);
}

/* Icon inside copy buttons - 10x10px */
/* Override Icon-s default size (16px) to 10px for copy buttons */
.Copy-button .Icon-s>.Icon-svg,
.Copy-l .Icon-s>.Icon-svg,
#address-copy .Icon-s>.Icon-svg,
.Copy-button svg,
.Copy-button cm-icon svg,
.Copy-l svg,
.Copy-l cm-icon svg,
#address-copy svg,
#address-copy cm-icon svg {
  width: 0.625rem !important;
  /* 10px */
  height: 0.625rem !important;
  /* 10px */
  fill: currentColor !important;
  color: var(--gray-090) !important;
}

.Copy-button cm-icon,
.Copy-l cm-icon,
#address-copy cm-icon,
.Copy-button .Icon-s,
.Copy-l .Icon-s,
.Copy-button cm-icon *,
.Copy-l cm-icon *,
#address-copy cm-icon * {
  width: 0.625rem !important;
  /* 10px */
  height: 0.625rem !important;
  /* 10px */
  fill: var(--gray-090) !important;
  color: var(--gray-090) !important;
}

/* Copy button icon colors on hover */
.Copy-button:hover cm-icon,
.Copy-l:hover cm-icon,
#address-copy:hover cm-icon,
.Copy-button:hover .Icon-s,
.Copy-l:hover .Icon-s,
.Copy-button:hover cm-icon *,
.Copy-l:hover cm-icon *,
#address-copy:hover cm-icon *,
.Copy-button:hover svg,
.Copy-button:hover cm-icon svg,
.Copy-l:hover svg,
.Copy-l:hover cm-icon svg,
#address-copy:hover svg,
#address-copy:hover cm-icon svg,
body:not([data-pointer]) .Copy-button:focus cm-icon,
body:not([data-pointer]) .Copy-l:focus cm-icon {
  fill: var(--gray-100) !important;
  color: var(--gray-100) !important;
}

/* Light mode copy button icon colors on hover */
html:not(.Theme-night) .Copy-button:hover cm-icon,
html:not(.Theme-night) .Copy-l:hover cm-icon,
html:not(.Theme-night) #address-copy:hover cm-icon,
html:not(.Theme-night) .Copy-button:hover .Icon-s,
html:not(.Theme-night) .Copy-l:hover .Icon-s,
html:not(.Theme-night) .Copy-button:hover cm-icon *,
html:not(.Theme-night) .Copy-l:hover cm-icon *,
html:not(.Theme-night) #address-copy:hover cm-icon *,
html:not(.Theme-night) .Copy-button:hover svg,
html:not(.Theme-night) .Copy-button:hover cm-icon svg,
html:not(.Theme-night) .Copy-l:hover svg,
html:not(.Theme-night) .Copy-l:hover cm-icon svg,
html:not(.Theme-night) #address-copy:hover svg,
html:not(.Theme-night) #address-copy:hover cm-icon svg,
html:not(.Theme-night) body:not([data-pointer]) .Copy-button:focus cm-icon,
html:not(.Theme-night) body:not([data-pointer]) .Copy-l:focus cm-icon,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover cm-icon,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover cm-icon,
.Theme-night-toggle:not(:checked)~* #address-copy:hover cm-icon,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover .Icon-s,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover .Icon-s,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover cm-icon *,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover cm-icon *,
.Theme-night-toggle:not(:checked)~* #address-copy:hover cm-icon *,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover svg,
.Theme-night-toggle:not(:checked)~* .Copy-button:hover cm-icon svg,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover svg,
.Theme-night-toggle:not(:checked)~* .Copy-l:hover cm-icon svg,
.Theme-night-toggle:not(:checked)~* #address-copy:hover svg,
.Theme-night-toggle:not(:checked)~* #address-copy:hover cm-icon svg,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Copy-button:focus cm-icon,
.Theme-night-toggle:not(:checked)~* body:not([data-pointer]) .Copy-l:focus cm-icon {
  fill: var(--gray-100) !important;
  color: var(--gray-100) !important;
}

/* Copy button icon colors on active */
.Copy-button:active cm-icon,
.Copy-l:active cm-icon,
#address-copy:active cm-icon,
.Copy-button:active .Icon-s,
.Copy-l:active .Icon-s,
.Copy-button:active cm-icon *,
.Copy-l:active cm-icon *,
#address-copy:active cm-icon *,
.Copy-button:active svg,
.Copy-button:active cm-icon svg,
.Copy-l:active svg,
.Copy-l:active cm-icon svg,
#address-copy:active svg,
#address-copy:active cm-icon svg {
  fill: var(--gray-100) !important;
  color: var(--gray-100) !important;
}

/* Light mode copy button icon colors on active */
html:not(.Theme-night) .Copy-button:active cm-icon,
html:not(.Theme-night) .Copy-l:active cm-icon,
html:not(.Theme-night) #address-copy:active cm-icon,
html:not(.Theme-night) .Copy-button:active .Icon-s,
html:not(.Theme-night) .Copy-l:active .Icon-s,
html:not(.Theme-night) .Copy-button:active cm-icon *,
html:not(.Theme-night) .Copy-l:active cm-icon *,
html:not(.Theme-night) #address-copy:active cm-icon *,
html:not(.Theme-night) .Copy-button:active svg,
html:not(.Theme-night) .Copy-button:active cm-icon svg,
html:not(.Theme-night) .Copy-l:active svg,
html:not(.Theme-night) .Copy-l:active cm-icon svg,
html:not(.Theme-night) #address-copy:active svg,
html:not(.Theme-night) #address-copy:active cm-icon svg,
.Theme-night-toggle:not(:checked)~* .Copy-button:active cm-icon,
.Theme-night-toggle:not(:checked)~* .Copy-l:active cm-icon,
.Theme-night-toggle:not(:checked)~* #address-copy:active cm-icon,
.Theme-night-toggle:not(:checked)~* .Copy-button:active .Icon-s,
.Theme-night-toggle:not(:checked)~* .Copy-l:active .Icon-s,
.Theme-night-toggle:not(:checked)~* .Copy-button:active cm-icon *,
.Theme-night-toggle:not(:checked)~* .Copy-l:active cm-icon *,
.Theme-night-toggle:not(:checked)~* #address-copy:active cm-icon *,
.Theme-night-toggle:not(:checked)~* .Copy-button:active svg,
.Theme-night-toggle:not(:checked)~* .Copy-button:active cm-icon svg,
.Theme-night-toggle:not(:checked)~* .Copy-l:active svg,
.Theme-night-toggle:not(:checked)~* .Copy-l:active cm-icon svg,
.Theme-night-toggle:not(:checked)~* #address-copy:active svg,
.Theme-night-toggle:not(:checked)~* #address-copy:active cm-icon svg {
  fill: var(--gray-100) !important;
  color: var(--gray-100) !important;
}

/* Override for address-copy to match standard size */
#address-copy .Copy-button {
  width: 1rem !important;
  height: 1rem !important;
}

/* Copy icon color (for standalone icons) */
.Copy-icon {
  color: var(--gray-090);
}

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(--spacing8);
  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+* {
  color: var(--color-editable-label-default);
}

.Editable input::placeholder {
  color: var(--gray-070);
}

.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(--spacing8));
  --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(--spacing8);
  position: relative;
  overflow: hidden;
  padding: 3px;
}

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

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

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

.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: inherit;
  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(--spacing8)) / 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;
  }
}

/* API Key Dialog - Modal Style */
.Dialog-cm-key-auth,
.Dialog-cm-share {
  max-width: 352px;
  z-index: 10000 !important;
  transform: translate(-50%, -50%) !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
}

html:not(.Theme-night) .Dialog-cm-key-auth,
html:not(.Theme-night) .Dialog-cm-share,
.Theme-night-toggle:not(:checked)~* .Dialog-cm-key-auth,
.Theme-night-toggle:not(:checked)~* .Dialog-cm-share {
  box-shadow: 0 1px 15px var(--black-a24);
}

/* Panel styling for API key dialog and share dialog (needed since dialog is moved to body) */
.Dialog-cm-key-auth .Panel,
.Dialog-cm-share .Panel {
  padding: var(--spacing12);
  gap: var(--spacing8);
}

/* Dialog titlebar with close button */
.Dialog-cm-key-auth .Dialog-titlebar,
.Dialog-cm-share .Dialog-titlebar {
  justify-content: space-between;
  position: relative;
}

html:not(.Theme-night) .Dialog-titlebar,
html:not(.Theme-night) .Dialog-cm-key-auth .Dialog-titlebar,
html:not(.Theme-night) .Dialog-cm-share .Dialog-titlebar,
.Theme-night-toggle:not(:checked)~* .Dialog-titlebar,
.Theme-night-toggle:not(:checked)~* .Dialog-cm-key-auth .Dialog-titlebar,
.Theme-night-toggle:not(:checked)~* .Dialog-cm-share .Dialog-titlebar {
  background-color: var(--gray-020);
}

.Dialog-cm-key-auth .Dialog-titlebar > span,
.Dialog-cm-share .Dialog-titlebar > span {
  flex: 1;
}

/* Close button uses Button class - just ensure icon size */
.Dialog-cm-key-auth .Dialog-close,
.Dialog-cm-share .Dialog-close {
  flex-shrink: 0;
  width: var(--spacing24);
  height: var(--spacing24);
  padding: var(--spacing4);
  background-color: transparent !important;
}

.Dialog-cm-key-auth .Dialog-close cm-icon {
  width: 16px;
  height: 16px;
}

.Dialog-cm-key-auth>div>a {
  text-align: center;
}

.Dialog-cm-key-auth>div>form>button {
  width: 100%;
  margin-top: var(--spacing12);
}

@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);
}

@media screen and (max-width: 640px) {
  /* Enable scroll snapping for tables on mobile */
  cm-table,
  .Panel:has(cm-table) {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  cm-table thead th,
  cm-table tbody td {
    scroll-snap-align: start;
  }
}

/* #region Sidebar navigation (shared) */
cm-popup[hidden]+.Sidebar-toolbar-line {
  display: none;
}

.Sidebar-toolbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--style-input-h-n);
  height: var(--style-input-h-n);
  color: var(--color-sidebar-text);
}

.Sidebar-toolbar-logo svg.Talos-logo {
  width: 20px !important;
  height: 20px !important;
  pointer-events: none;
  display: block !important;
  color: inherit;
}

.Sidebar-toolbar-logo svg.Talos-logo path {
  fill: currentColor !important;
}

/* Theme toggle button icon visibility - ensure icons are visible */
.Theme-night-toggle-button cm-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--color-sidebar-text);
}

/* In dark mode, show sun icon, hide moon */
html.Theme-night .Theme-night-toggle-button cm-icon:first-of-type,
.Theme-night-toggle:checked~* .Theme-night-toggle-button cm-icon:first-of-type {
  display: none !important;
}

html.Theme-night .Theme-night-toggle-button cm-icon:last-of-type,
.Theme-night-toggle:checked~* .Theme-night-toggle-button cm-icon:last-of-type {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* In light mode, show moon icon, hide sun */
html:not(.Theme-night) .Theme-night-toggle-button cm-icon:last-of-type,
.Theme-night-toggle:not(:checked)~* .Theme-night-toggle-button cm-icon:last-of-type {
  display: none !important;
}

html:not(.Theme-night) .Theme-night-toggle-button cm-icon:first-of-type,
.Theme-night-toggle:not(:checked)~* .Theme-night-toggle-button cm-icon:first-of-type {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure only the active sidebar extras panel is visible */
.Sidebar-extras > *[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide all extras by default, show only the one matching the section */
.Sidebar-extras > cm-nav#cm-nav,
.Sidebar-extras > nav#nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show cm-nav when section is cm-nav */
cm-sidebar[section="cm-nav"] .Sidebar-extras > cm-nav#cm-nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide nav when cm-nav is active */
cm-sidebar[section="cm-nav"] .Sidebar-extras > nav#nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show nav when section is nav */
cm-sidebar[section="nav"] .Sidebar-extras > nav#nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide cm-nav when nav is active */
cm-sidebar[section="nav"] .Sidebar-extras > cm-nav#cm-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Navigation list styling */
.Sidebar-extras .NavList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.Sidebar-extras .NavList cm-accordion summary {
  padding: 0;
}

.Sidebar-extras .NavList cm-accordion summary > button {
  display: flex;
  align-items: center;
  gap: var(--spacing8);
  padding: var(--spacing8);
  width: 100%;
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-n);
  color: var(--gray-090);
  background: transparent;
  border: none;
  text-transform: uppercase;
}

.Sidebar-extras .NavList > li {
  border: none;
  padding: 0;
}

/* Category titles */
.Sidebar-extras .NavList > li.categoryTitle {
  font-size: var(--text-size-s);
  text-transform: uppercase;
  color: var(--gray-090);
  padding: var(--spacing4);
  border: none;
  margin-top: 0;
}

.Sidebar-extras .NavList > li.categoryTitle:first-of-type {
  margin-top: var(--spacing8) !important;
}

/* Support category titles rendered as NavList-item without links */
.Sidebar-extras .NavList-item:not(:has(a)) {
  border: none;
  padding: 0;
}

.Sidebar-extras .NavList-item:not(:has(a)) span {
  font-weight: var(--text-weight-bold);
  font-size: var(--text-size-n);
  text-transform: uppercase;
  color: var(--gray-090);
  padding: var(--spacing4);
}

.Sidebar-extras .NavList > .NavList-item:not(:has(a)):first-child span {
  padding: var(--spacing4);
}

.Sidebar-extras .NavList > li:not(.categoryTitle) > :is(a, button) {
  display: flex;
  align-items: center;
  gap: var(--spacing8);
  padding: var(--spacing8);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-n);
  color: var(--gray-080);
  border-radius: 3px;
  text-decoration: none;
  width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Sidebar-extras .NavList li ul li > :is(a, button) {
  display: flex;
  align-items: center;
  gap: var(--spacing8);
  padding: var(--spacing8);
  font-weight: var(--text-weight-normal);
  font-size: var(--text-size-n);
  color: var(--gray-080);
  border-radius: 3px;
  text-decoration: none;
  width: 100%;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Sidebar-extras .NavList > li:not(.categoryTitle) > :is(a, button):is(:hover, :focus) {
  background-color: var(--gray-100-a12);
  color: var(--white);
}

.Sidebar-extras .NavList > li.NavList-selected > :is(a, button) {
  background-color: var(--gray-060);
  color: var(--white);
}

.Sidebar-extras .NavList > li > :is(a, button) :is(cm-icon, cm-icon-color, cm-icon-coin),
.Sidebar-extras .NavList > li > :is(a, button) :is(cm-icon, cm-icon-color, cm-icon-coin) *,
.Sidebar-extras .NavList > li > :is(a, button) :is(cm-icon, cm-icon-color, cm-icon-coin) svg,
.Sidebar-extras .NavList > li > :is(a, button) :is(cm-icon, cm-icon-color, cm-icon-coin) svg * {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex;
  flex: 0 0 auto;
}
/* #endregion *//* #region choco extensions */

#balance-over-time-chart .ygrid.crisp {
  stroke: var(--chart-axis-color) !important;
  transition: stroke var(--style-animation-speed-normal);
}

#balance-over-time-chart .imagelayer image {
  opacity: var(--chart-watermark-opacity);
  transition: opacity var(--style-animation-speed-normal);
}

#balance-over-time-chart .main-svg:first-of-type {
  transition: background-color var(--style-animation-speed-normal);
  background: var(--color-panel-face) !important;
}

#balance-over-time-chart .ytick text,
#balance-over-time-chart .y2tick text,
#balance-over-time-chart .xtick text {
  fill: var(--chart-axis-text) !important; 
}

/* Plotly modebar (toolbar) styling - make controls inline and right-aligned */
#balance-over-time-chart .modebar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--spacing4) !important;
  padding: var(--spacing4) !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

#balance-over-time-chart .modebar-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--spacing2) !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

#balance-over-time-chart .modebar-btn,
#balance-over-time-chart .modebar-btn[style],
#balance-over-time-chart .modebar-btn[style*="background"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#balance-over-time-chart .modebar-btn:hover,
#balance-over-time-chart .modebar-btn:focus,
#balance-over-time-chart .modebar-btn:active,
#balance-over-time-chart .modebar-btn.active,
#balance-over-time-chart .modebar-btn:hover[style],
#balance-over-time-chart .modebar-btn:focus[style],
#balance-over-time-chart .modebar-btn:active[style] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html:not(.Theme-night) #balance-over-time-chart .modebar-btn,
html:not(.Theme-night) #balance-over-time-chart .modebar-btn:hover,
html:not(.Theme-night) #balance-over-time-chart .modebar-btn:focus,
html:not(.Theme-night) #balance-over-time-chart .modebar-btn:active,
html:not(.Theme-night) #balance-over-time-chart .modebar-btn[style],
.Theme-night-toggle:not(:checked)~* #balance-over-time-chart .modebar-btn,
.Theme-night-toggle:not(:checked)~* #balance-over-time-chart .modebar-btn:hover,
.Theme-night-toggle:not(:checked)~* #balance-over-time-chart .modebar-btn:focus,
.Theme-night-toggle:not(:checked)~* #balance-over-time-chart .modebar-btn:active,
.Theme-night-toggle:not(:checked)~* #balance-over-time-chart .modebar-btn[style],
html.Theme-night #balance-over-time-chart .modebar-btn,
html.Theme-night #balance-over-time-chart .modebar-btn:hover,
html.Theme-night #balance-over-time-chart .modebar-btn:focus,
html.Theme-night #balance-over-time-chart .modebar-btn:active,
html.Theme-night #balance-over-time-chart .modebar-btn[style],
.Theme-night-toggle:checked~* #balance-over-time-chart .modebar-btn,
.Theme-night-toggle:checked~* #balance-over-time-chart .modebar-btn:hover,
.Theme-night-toggle:checked~* #balance-over-time-chart .modebar-btn:focus,
.Theme-night-toggle:checked~* #balance-over-time-chart .modebar-btn:active,
.Theme-night-toggle:checked~* #balance-over-time-chart .modebar-btn[style] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#balance-over-time-chart .modebar-btn svg {
  width: 0.875rem !important; /* 14px */
  height: 0.875rem !important; /* 14px */
}

@media screen and (max-width: 640px) {
  .js-plotly-plot {
    margin-bottom: var(--spacing16);
  }
}

.Text-ref-rate-positive {
  color: var(--color-charts-chart-green);
}

.Text-ref-rate-negative {
  color: var(--color-charts-chart-red);
}


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

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

/* #endregion */

/* #region miscellaneous */
/* Button-block and InlineEntity moved to choco-taco-v1.css */
/* #endregion */

/* #region SearchForm */
.SearchForm {
  display: flex;
  justify-content: center;
  gap: var(--style-gap-xl);
  padding: 0;
}

#landing-page .SearchForm {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.SearchForm .Button-l cm-icon,
.SearchForm .Button-l cm-icon svg {
  width: 1.125rem; /* 18px */
  height: 1.125rem; /* 18px */
}

.AssetsDropdown-summary {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  list-style: none;
  cursor: default;
  /* Button styling */
  background-color: var(--button-default, var(--gray-030));
  border: 1px solid var(--button-default-border, transparent);
  border-radius: var(--style-corner-default);
  outline: none;
  box-sizing: border-box;
  /* Height matches Input-l and Button-l - with box-sizing: border-box, border is included */
  /* Since children are 48px and wrapper has 1px border, wrapper needs to be 48px total */
  height: var(--style-input-h-l);
  transition: 
    border-color var(--style-animation-speed-normal),
    background-color var(--style-animation-speed-normal);
}

/* Adjust child elements to fit within wrapper accounting for border */
/* Wrapper is 48px total with 1px border (46px content), children need to fit */
.AssetsDropdown-icon,
.AssetsDropdown-input,
.AssetsDropdown-chevron {
  box-sizing: border-box;
  /* Reduce height by 2px to account for wrapper's 1px border on top and bottom */
  height: calc(var(--style-input-h-l) - 2px);
}

.AssetsDropdown-summary:hover:not(:has(.AssetsDropdown-input:focus)) {
  background-color: var(--gray-040);
  border-color: var(--button-default-border-hover, var(--gray-100-a20));
}

.AssetsDropdown-summary:focus:not(:has(.AssetsDropdown-input:focus)),
.AssetsDropdown-summary:focus-within:not(:has(.AssetsDropdown-input:focus)) {
  background-color: var(--button-default-hover, var(--gray-040));
  border: 1px solid var(--button-default-border-hover, var(--gray-100-a20));
  outline: none;
}

/* When input is focused, use input focus border color for the wrapper - this overrides hover */
.AssetsDropdown-summary:has(.AssetsDropdown-input:focus) {
  border-color: var(--token-border-input-active, var(--color-input-border-active)) !important;
  background-color: var(--button-default-hover, var(--gray-040));
}

.AssetsDropdown-summary::-webkit-details-marker {
  display: none;
}

.AssetsDropdown-summary::marker {
  display: none;
}

.Dropdown:has(.AssetsDropdown-summary)>fieldset {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.Dropdown:has(.AssetsDropdown-summary)[open]>fieldset {
  top: calc(var(--dropdown-top) - var(--style-popup-gap-s)) !important;
}

.AssetsDropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--style-gap-n);
  background-color: transparent;
  border: none;
  border-top-left-radius: var(--style-corner-default);
  border-bottom-left-radius: var(--style-corner-default);
  flex-shrink: 0;
  height: var(--style-input-h-l);
}

.AssetsDropdown-icon cm-coin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.AssetsDropdown-input,
.AssetsDropdown-input.Input-l {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  border: none !important;
  border-radius: 0;
  background-color: transparent !important;
  color: var(--gray-090) !important;
  padding: var(--style-gap-l) var(--style-gap-xl) var(--style-gap-l) 0;
  height: var(--style-input-h-l);
  font-size: var(--text-size-input-l);
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--style-animation-speed-normal) !important;
}

.AssetsDropdown-input::placeholder {
  color: var(--gray-070) !important;
}

.AssetsDropdown-input:hover {
  background-color: transparent !important;
  border: none !important;
  color: var(--gray-100) !important;
}

.AssetsDropdown-input:focus {
  background-color: transparent !important;
  border: none !important;
  outline: none;
  box-shadow: none;
  color: var(--gray-100) !important;
}

.AssetsDropdown-chevron {
  background-color: transparent !important;
  border: none !important;
  border-top-right-radius: var(--style-corner-default);
  border-bottom-right-radius: var(--style-corner-default);
  padding: 0 var(--style-gap-n);
  flex-shrink: 0;
  color: var(--gray-090) !important;
  height: var(--style-input-h-l);
  min-width: var(--style-input-h-l);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--style-animation-speed-normal);
}

.AssetsDropdown-chevron cm-icon {
  transition: none !important;
  color: inherit !important;
  fill: currentColor !important;
}

.Dropdown .AssetsDropdown-summary cm-icon:last-child {
  transition: none !important;
}

.Dropdown[open] .AssetsDropdown-summary>cm-icon:last-child,
.Dropdown[open] .AssetsDropdown-summary>*>cm-icon:last-child,
.Dropdown[open] .AssetsDropdown-chevron cm-icon {
  transform: none !important;
}

.AssetsDropdown-chevron:hover {
  background-color: transparent !important;
  color: var(--gray-100) !important;
}

.AssetsDropdown-chevron:focus {
  background-color: transparent !important;
  border: none !important;
  outline: none;
  color: var(--gray-100) !important;
}

/* Remove focus-within overrides since we're using unified styling */
.AssetsDropdown-summary:focus-within .AssetsDropdown-icon {
  background-color: transparent;
}

.AssetsDropdown-summary:focus-within .AssetsDropdown-input {
  background-color: transparent !important;
  border: none !important;
}

.AssetsDropdown-summary:focus-within .AssetsDropdown-chevron {
  background-color: transparent;
  border: none;
}

/* Light mode overrides to match button styling */
html:not(.Theme-night) .AssetsDropdown-summary,
.Theme-night-toggle:not(:checked)~* .AssetsDropdown-summary {
  background-color: var(--button-default);
  border: 1px solid var(--button-default-border);
}

html:not(.Theme-night) .AssetsDropdown-summary:hover:not(:has(.AssetsDropdown-input:focus)),
.Theme-night-toggle:not(:checked)~* .AssetsDropdown-summary:hover:not(:has(.AssetsDropdown-input:focus)) {
  background-color: var(--color-button-hover-bg);
  border-color: var(--button-default-border-hover);
}

html:not(.Theme-night) .AssetsDropdown-summary:focus,
html:not(.Theme-night) .AssetsDropdown-summary:focus-within,
.Theme-night-toggle:not(:checked)~* .AssetsDropdown-summary:focus,
.Theme-night-toggle:not(:checked)~* .AssetsDropdown-summary:focus-within {
  background-color: var(--color-button-hover-bg);
  border-color: var(--button-default-border-hover);
}

/* When input is focused in light mode, use input focus border color */
html:not(.Theme-night) .AssetsDropdown-summary:has(.AssetsDropdown-input:focus),
.Theme-night-toggle:not(:checked)~* .AssetsDropdown-summary:has(.AssetsDropdown-input:focus) {
  border-color: var(--token-border-input-active, var(--color-input-border-active));
}

.SearchForm .Dropdown .Dropdown-list label {
  /* list items are fixed height at 32px right now, but list items with icons need to be larger */
  height: auto;
}

.SearchForm .Dropdown .Dropdown-list label>span {
  /* for some reason, the width computation (probably for --dropdown-min-width variable)
      is causing the middle span to flex, so temporarily adding a margin right here */
  margin-right: var(--style-gap-n); 
}

.SearchForm>input[name="input"] {
  flex: 1 1 auto;
}

.SearchForm .SearchForm-button-group {
  flex: 1 0 auto;
  display: flex;
  gap: var(--style-gap-n);
}

.SearchForm .SearchForm-button-group > button {
  flex: 1 1 50%;
}

@media screen and (max-width: 640px) {
  .SearchForm {
    flex-direction: column;
  }

  .SearchForm cm-assets-dropdown {
    width: 100%;
  }

  .SearchForm>input[name="input"] {
    width: 100%;
  }

  .SearchForm .SearchForm-button-group {
    width: 100%;
    flex-direction: column;
  }

  .SearchForm .SearchForm-button-group button {
    width: 100%;
  }
}

/* #endregion */

/* #region Panel-header */
/* Panel-header and related classes moved to choco-taco-v1.css */

.DetailsLayout-sidebar .Panel-header {
  padding: var(--spacing8) var(--spacing12);
  min-height: 2.5rem;
  max-height: 2.5rem;
}

.DetailsLayout-sidebar .DetailsStats {
  background: transparent;
  border: none;
}

/* #endregion */

/* #region Filters-row & Paginator-row & LoadMore-row */
.Filters-row,
.Paginator-row,
.LoadMore-row {
  display: flex;
  align-items: center;
  gap: var(--style-gap-xl);
}

.Filters-row span {
  color: var(--talos-080);
}

.Filters-row-spacer,
.Paginator-row-spacer,
.LoadMore-row-spacer {
  flex-grow: 1;
}

.Filters-row cm-dropdown {
  width: fit-content;
}

.PaginatorLabel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.PaginatorLabel label {
  display: flex;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-n);
}

.PaginatorLabel input {
  padding: var(--style-input-padding-n);
  width: var(--style-input-h-l);
  text-align: center;
}

@media screen and (max-width: 640px) {

  .Filters-row,
  .LoadMore-row {
    flex-direction: column;
    gap: var(--style-gap-n);
  }

  .Filters-row cm-dropdown {
    width: 100%;
  }

  .Filters-row-spacer,
  .Paginator-row-showing-text {
    display: none;
    visibility: hidden;
  }

  .Filter-input,
  .Filters-row .Button,
  .LoadMore-row .Button {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }
}

/* #endregion */

/* #region AssetPrice */
.AssetPrice,
.AssetDelta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--style-gap-s);
  font-size: var(--text-size-n);
  line-height: 1;
}

.AssetPrice cm-coin {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.AssetPrice cm-coin svg,
.AssetPrice cm-coin .Coin-svg {
  width: 1.25rem;
  height: 1.25rem;
}

.AssetPrice>* {
  font-size: var(--text-size-n);
  line-height: 1;
}

.AssetDelta>* {
  font-size: var(--text-size-n);
  line-height: 1;
}

.AssetDelta-icon {
  width: var(--spacing16);
  height: var(--spacing16);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* #endregion */

/* #region DetailsLayout  */
.DetailsLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27.5rem;
  grid-template-areas: 'first second';
  gap: var(--spacing2);
  height: 100%;
}

.DetailsLayout-main {
  grid-area: first;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing2);
  min-height: calc(100vh - var(--style-app-header-h) - var(--spacing2));
}

.DetailsLayout-sidebar {
  grid-area: second;
}

@media screen and (min-width: 1280px) {
  .DetailsLayout-sidebar>.Panel {
    position: sticky;
    top: 0;
    height: 100%;
  }
}

@media screen and (max-width: 1280px) {
  .DetailsLayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'first' 'second';
    grid-template-rows: auto auto;
  }
}

/* #endregion */

/* #region DetailsSummary */
.DetailsSummary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing2);
}

.DetailsSummary h4 {
  color: var(--gray-100);
}

.DetailsSummary-header {
  display: flex;
  gap: 0;
}

.DetailsSummary-stats {
  display: flex;
  gap: var(--spacing12);
  padding: var(--spacing12);
}

.DetailsSummary-a,
.DetailsSummary-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-100-a06);
  border-bottom: 1px solid var(--color-bg);
  padding: var(--spacing16);
  height: 100%;
  min-height: max-content;
  gap: var(--spacing4);
}

.DetailsSummary-a .Text-heading-5,
.DetailsSummary-b .Text-heading-5,
.DetailsSummary-a h5,
.DetailsSummary-b h5 {
  color: var(--gray-090);
}

.DetailsSummary-c,
.DetailsSummary-d {
  flex: 1;
  padding: var(--spacing12);
}

.DetailsSummary-c .Text-heading-4,
.DetailsSummary-d .Text-heading-4,
.DetailsSummary-c h4,
.DetailsSummary-d h4 {
  font-size: var(--spacing12);
  line-height: var(--spacing16);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gray-080) !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-bg);
  padding-bottom: var(--spacing12);
}

.DetailsSummary-tooltip {
  display: flex;
  gap: var(--style-gap-s);
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .DetailsSummary-header,
  .DetailsSummary-stats {
    flex-direction: column;
  }

  .DetailsStats {
    min-height: max-content;
  }
}

/* #endregion */

/* #region DetailsStats */
.DetailsStats {
  border-radius: var(--style-corner-default);
  padding: var(--spacing12);
  background-color: var(--card);
  border: 1px solid var(--card-border);
  height: max-content;
}

.DetailsStats .Text-heading-4 {
  font-weight: 400;
  color: var(--gray-080) !important;
}

/* Light mode: transparent background */
html:not(.Theme-night) .DetailsStats,
.Theme-night-toggle:not(:checked)~* .DetailsStats {
  background-color: transparent;
}

.DetailsStats>h4 {
  margin-bottom: var(--style-gap-xl);
  color: var(--gray-100);
}

.DetailsStats-stat {
  display: flex;
  flex-direction: row;
  gap: var(--style-gap-n);
  align-items: center;
  padding-bottom: var(--spacing6);
  color: var(--color-text);
  justify-content: space-between;
}

.DetailsStats-stat:last-of-type {
  margin-bottom: 0;
}

.DetailsStats-stat > div {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: var(--spacing4); 
}

.DetailsStats-stat > div:first-of-type {
  color: var(--gray-090);
}

.DetailsStats-stat > div:last-of-type {
  justify-content: flex-end;
}

/* Style label text with tooltip - dashed underline 1 step darker than text */
.DetailsStats-stat-label {
  display: inline;
}

.DetailsStats-stat-label-text {
  color: var(--gray-090);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--gray-080);
  text-underline-offset: 0.3em;
  cursor: help;
}

.DetailsStats-stat-label summary {
  list-style: none;
}

.DetailsStats-stat-label summary::-webkit-details-marker {
  display: none;
}

.DetailsStats-stat-label summary::marker {
  display: none;
}

/* Hide any icons in the label tooltip */
.DetailsStats-stat-label summary cm-icon {
  display: none;
}

/* Transfer value tooltip in DetailsSummary - keep uppercase and color */
.DetailsSummary-tooltip .DetailsStats-stat-label-text.Text-heading-5 {
  text-transform: uppercase;
  color: var(--gray-090);
}

/* Table header tooltip styling - same as DetailsStats */
cm-table thead th .Table-header-tooltip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
  position: relative;
  text-transform: uppercase;
  width: auto;
  max-width: none;
  max-height: none;
  min-height: 0;
  height: auto;
  vertical-align: middle;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

cm-table thead th .Table-header-tooltip-text {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--gray-080);
  text-underline-offset: 0.3em;
  cursor: help;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  width: auto;
  font-size: 0.6875rem; /* 11px - match table header font size */
}

cm-table thead th .Table-header-tooltip summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
  width: auto;
}

cm-table thead th .Table-header-tooltip summary::-webkit-details-marker {
  display: none;
}

cm-table thead th .Table-header-tooltip summary::marker {
  display: none;
}

/* Hide any icons in table header tooltips */
cm-table thead th .Table-header-tooltip summary cm-icon {
  display: none;
}

/* Override cm-info-popup default styles for table headers */
cm-table thead th cm-info-popup.Table-header-tooltip {
  text-transform: uppercase;
  width: auto;
  max-width: none;
  max-height: none;
  min-height: 0;
  height: auto;
  display: inline;
  vertical-align: middle;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* Ensure tooltip content is positioned and doesn't affect layout */
/* JavaScript will set position: fixed for table header tooltips to escape table constraints */
cm-table thead th .Table-header-tooltip .Info-content {
  position: absolute;
  z-index: 999;
  text-transform: none;
  /* Tooltip text should not be uppercase */
}

/* Ensure details element doesn't affect layout */
cm-table thead th .Table-header-tooltip details {
  display: inline;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
}

/* Ensure details[open] doesn't affect layout */
cm-table thead th .Table-header-tooltip details[open] {
  display: inline;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
}

/* Ensure summary doesn't affect layout */
cm-table thead th .Table-header-tooltip summary {
  display: inline;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Ensure table headers allow tooltips to overflow */
cm-table thead th {
  overflow: visible !important;
  position: relative; /* Ensure ::before and ::after pseudo-elements work correctly */
  white-space: nowrap; /* Keep label + chevron on one line */
  vertical-align: middle;
}

cm-table thead th:has(cm-icon[name="chevron-down"]:not([hidden])) {
  padding-right: calc(var(--spacing12) + var(--spacing16));
}

/* Keep tooltip label and chevron aligned horizontally */
cm-table thead th .Table-header-tooltip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
}

cm-table thead th .Table-header-tooltip summary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing4);
}

cm-table thead th cm-icon[name="chevron-down"] {
  position: absolute;
  right: var(--spacing8);
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  line-height: 0;
  flex-shrink: 0;
}

/* When sorted, rotate but keep same position */
cm-table thead th cm-icon[name="chevron-down"].Table-header-sortable-up,
cm-table thead th cm-icon[name="chevron-down"].Table-header-sortable-asc {
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
}

cm-table thead {
  overflow: visible !important;
}

cm-table {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Ensure Panel allows tooltips to overflow vertically, but allows horizontal scrolling for tables */
.Panel:has(cm-table) {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Table header tooltips should appear below, but ensure they don't go left of sidebar */
cm-table thead th .Table-header-tooltip .Info-content-top-center {
  /* Override the default 50% centering to account for sidebar */
  left: max(var(--style-sidebar-width), min(calc(100vw - 50%), 50%)) !important;
  /* Ensure tooltip doesn't extend left of sidebar by adjusting transform origin if needed */
  transform: translateX(calc(max(0px, calc(var(--style-sidebar-width) - 50%)) * -1)) translateX(-50%);
}

/* Fix vertical alignment - th already has vertical-align: middle, but ensure tooltip text aligns */
cm-table thead th .Table-header-tooltip {
  vertical-align: middle;
  line-height: normal;
}

cm-table thead th .Table-header-tooltip summary {
  vertical-align: middle;
  line-height: normal;
}

@media screen and (max-width: 640px) { 
  .DetailsStats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--style-gap-n);
    min-height: max-content;
  }

  .DetailsStats > .Text-heading-4 {
    width: 100%;
    margin-bottom: var(--spacing4);
  }

  .DetailsStats-stat {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
}

/* #endregion */

/* #region NoResults */
.NoResults {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--style-gap-s);
  padding: 4rem 0;
  /* 64px */
  margin: auto;
}

.NoResults .Spotlight-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.NoResults .Spotlight-content-wrapper {
  align-items: center;
  text-align: center;
  gap: var(--style-gap-s);
}

.NoResults .Spotlight-content-wrapper p {
  color: var(--gray-080);
}

/* Center NoResults when inside a table */
table .NoResults,
tbody .NoResults,
td .NoResults {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* Make NoResults take full width when inside a table cell that spans all columns */
#results td[colspan] .NoResults {
  width: 100%;
  max-width: 100%;
}

/* #endregion */

/* #region Unavailable Chart */
.UnavailableChart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 28.25rem;
  /* 452px */
}

.UnavailableChart>.Spotlight-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--style-gap-s);
}

.UnavailableChart .Spotlight-content-wrapper {
  align-items: center;
  text-align: center;
  gap: var(--style-gap-s);
  max-width: inherit;
}

.UnavailableChart .Spotlight-content-wrapper p {
  color: var(--gray-080);
}

.UnavailableChart h2 {
  font-size: var(--text-size-xl);
  line-height: 100%;
}

/* #endregion */

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

.BalanceUpdates {
  position: relative;
}

.PartialData {
  --skeleton-row: 53px;
  height: calc(3 * var(--skeleton-row));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing16);
  position: absolute;
  z-index: var(--z-above);
  width: 100%;
  bottom: 0;
}

.PartialData .Text-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing8);
}

.Skeleton-icon-s,
.Skeleton-text-s {
  display: inline-block;
}

th cm-info-popup {
  display: inline-block;
  padding: 0 var(--spacing4);
}

.Error-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: var(--color-panel-face);
}

.Error-wrapper .Spotlight-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--style-gap-s);
}

.Error-wrapper .Spotlight-content-wrapper {
  align-items: center;
  text-align: center;
  gap: var(--style-gap-s);
}

.Error-wrapper .Spotlight-content-wrapper p {
  color: var(--gray-080);
}

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

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

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

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

.Dropdown>fieldset {
  max-width: calc(100vw - (var(--style-sidebar-width) + var(--style-gap-xl) + var(--style-gap-xl)));
}

@media screen and (max-width: 480px) {
  .Dropdown>fieldset {
    bottom: auto;
  }
}

.Dropdown-list label {
  cursor: pointer;
}

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

.Dropdown-text-filter {
  display: inline-block !important;
  height: var(--style-input-h-l) !important;
  padding: unset !important;
  border-top: unset !important;
  min-width: unset !important;
  border-bottom: unset !important;
  transition: unset !important;
  cursor: unset !important;
  margin-bottom: var(--style-gap-n) !important;
}

.Dropdown-text-filter input {
  position: unset !important;
  opacity: unset !important;
  height: auto !important;
  width: 100% !important;
}

cm-assets-dropdown .No-result-error>.Text-content,
cm-assets-dropdown .No-result-error>.Text-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--style-gap-s);
  padding: var(--style-gap-xxxl)
}

cm-assets-dropdown .No-result-error>.Text-content>h4,
cm-assets-dropdown .No-result-error>.Text-content-centered>h4 {
  margin: 0;
  font-weight: var(--text-weight-bold);
}

cm-assets-dropdown .No-result-error>.Text-content p,
cm-assets-dropdown .No-result-error>.Text-content-centered p {
  color: var(--gray-080);
}


/* Search results page layout */
#search-results-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing2);
  min-height: 0;
  height: 100%;
}

#search-results-page > .Panel:first-child {
  padding: var(--spacing12);
}

#search-results-page > .Panel:last-child {
  display: grid;
  grid-template-rows: repeat(4, max-content);
  min-height: 0;
  overflow: hidden;
  height: 100%;
  align-self: stretch;
}

#search-results-page > .Panel:last-child > cm-table {
  overflow: auto;
  min-height: 0;
}

/* Ensure table structure is correct for search results */
#search-results-page cm-table table {
  display: table;
  width: 100%;
  table-layout: auto;
}

#search-results-page cm-table tbody {
  display: table-row-group;
}

#search-results-page cm-table tr {
  display: table-row;
}

#search-results-page cm-table td,
#search-results-page cm-table th {
  display: table-cell;
}

/* Right-align all columns except the first one */
#search-results-page cm-table th:not(:first-child),
#search-results-page cm-table td:not(:first-child) {
  text-align: right;
}

/* Ensure InlineEntity components in right-aligned columns align to the right */
#search-results-page cm-table td:not(:first-child) .InlineEntity {
  justify-content: flex-end;
}

/* Crumbs component moved to choco-taco-v1.css */

.BalanceUpdates {
  display: flex;
  align-items: flex-start;
  gap: var(--style-gap-xl);
  background-color: var(--color-panel-face);
  padding-bottom: var(--spacing16);
}

.BalanceUpdates>div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--style-gap-xl);
}

.BalanceUpdates>cm-icon {
  margin-top: var(--style-gap-s);
}

.BalanceUpdates tr td>*:first-child {
  flex-grow: 1;
}

#transaction-details-page .BalanceUpdates tr td {
  display: table-cell;
}

#transaction-details-page .BalanceUpdates tr.sub-account>* {
  height: auto !important;
}

#transaction-details-page cm-table {
  overflow-x: initial;
}

#transaction-details-page .BalanceUpdates tr.sub-account td {
  padding-top: var(--style-gap-n);
  vertical-align: middle;
}

#transaction-details-page .BalanceUpdates tr.sub-account .Table-row-sub-account-col {
  font-size: var(--text-size-s) !important;
  color: var(--gray-080) !important;
  display: flex;
  align-items: center;
}

#transaction-details-page .BalanceUpdates tr.sub-account .Table-row-sub-account-col * {
  color: var(--gray-080) !important;
}

#transaction-details-page .BalanceUpdates tr.sub-account td:last-of-type .Table-row-sub-account-col {
  justify-content: flex-end;
}

@media screen and (max-width: 640px) {
  /* Enable scroll snapping for tables on mobile */
  cm-table,
  .Panel:has(cm-table) {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  cm-table thead th,
  cm-table tbody td {
    scroll-snap-align: start;
  }

  #transaction-details-page .BalanceUpdates {
    flex-direction: column;
  }

  #transaction-details-page .BalanceUpdates>div {
    align-self: stretch;
    flex: initial;
  }

  #transaction-details-page .BalanceUpdates>cm-icon {
    display: none;
    visibility: hidden;
  }

  #transaction-details-page .BalanceUpdates tr td {
    display: table-cell;
    height: auto;
  }
}

#address-details-page .BalanceUpdates tr.sub-account>* {
  height: auto !important;
}

#address-details-page .BalanceUpdates tr.sub-account td {
  padding-top: var(--style-gap-n);
  vertical-align: middle;
}

#address-details-page .BalanceUpdates tr.sub-account .Table-row-sub-account-col {
  font-size: var(--text-size-s) !important;
  color: var(--gray-080) !important;
  display: flex;
  align-items: center;
}

#address-details-page .BalanceUpdates tr.sub-account .Table-row-sub-account-col * {
  color: var(--gray-080) !important;
}

#address-details-page .BalanceUpdates tr.sub-account td:not(:first-of-type) .Table-row-sub-account-col {
  justify-content: flex-end;
}

#address-details-page .BalanceUpdates .Indent,
#transaction-details-page .BalanceUpdates .Indent {
  text-indent: var(--spacing24);
}

#address-details-page .BalanceUpdates .Indent>cm-icon,
#transaction-details-page .BalanceUpdates .Indent>cm-icon {
  color: var(--color-info-popup-icon);
}

/* Hide tooltips on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
  /* Hide tooltip popup content but keep the text visible */
  .Info-content,
  [role="tooltip"] {
    display: none !important;
  }
  
  /* Prevent tooltip details from opening on mobile */
  cm-info-popup details[open] .Info-content {
    display: none !important;
  }
  
  /* Hide Learn More button */
  .LearnMore-button {
    display: none !important;
  }
  
  /* Remove dashed underline from tooltip text on mobile - keep text visible */
  .DetailsStats-stat-label-text,
  .Table-header-tooltip-text {
    text-decoration: none !important;
    cursor: default !important;
  }
  
  /* Make sure the summary/text inside tooltips is still visible */
  cm-info-popup details summary {
    display: inline !important;
  }
  
  /* Hide info icons in tooltips on mobile */
  cm-info-popup details summary cm-icon {
    display: none !important;
  }
}

/* Landing page animation styles moved to /public/animations/animation.css */