/* Las clases de las dos paginas de leaderboard: /darwinia-world/ y /darwinia/.
 *
 * Se llamaba `leaderboard-world-page.css` cuando solo la usaba una. Renombrado al llevar
 * el diseno a /darwinia/: un fichero llamado `world` sirviendo a dos paginas es una
 * mentira que nadie vuelve a tocar.
 *
 * Escrito a mano. Los valores vienen del export de Claude Design, que traia todo el
 * estilo en atributos `style` elemento a elemento: aqui estan como clases, para que la
 * fila la pueda generar JavaScript sin repetir la hoja de estilos en cada una de las
 * 9.907 filas.
 *
 * Los tokens (`--lb-*`, `--font-*`), las tipografias y las animaciones vienen de
 * leaderboard-design.css, que SI se genera desde el export.
 */

/* ── Estructura ──────────────────────────────────────────────────────────── */

/* `hidden` tiene que ganar siempre.
 *
 * El `[hidden]` del navegador es `display:none`, pero cualquier regla con `display` lo
 * pisa por especificidad. Sin esto, `.dw-cards { display: grid }` hacia que las tarjetas
 * se siguieran viendo, con guiones, debajo del panel de «elige una comunidad». Visto en
 * el navegador. */
[hidden] {
  display: none !important;
}

.dw-page {
  min-height: 100vh;
  background: var(--lb-page);
  color: var(--lb-t1);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* La barra de arriba es siempre oscura, tambien en el tema claro: el logo es blanco y
 * lima, y sobre fondo claro no se veia. El diseno la tenia asi, en un `<nav>` con
 * `background:#0B0E1A` fijo. */
.dw-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0B0E1A;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.dw-topbar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.dw-topbar__logo { display: flex; text-decoration: none; }
.dw-topbar__logo img { height: 22px; width: auto; display: block; }
.dw-topbar__spacer { flex: 1; }

.dw-theme {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--lb-line-2);
  border-radius: 999px;
}
.dw-theme__btn {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* Los tokens ya se dan la vuelta con el tema: `--lb-tg-dark-*` es el estado del boton
 * "Dark" y `--lb-tg-light-*` el del boton "Light". Sobre la barra oscura los dos quedan
 * legibles en los dos temas, que es como lo dejo el diseno. */
.dw-theme__btn[data-theme-set="dark"] {
  background: var(--lb-tg-dark-bg);
  color: var(--lb-tg-dark-fg);
}
.dw-theme__btn[data-theme-set="light"] {
  background: var(--lb-tg-light-bg);
  color: var(--lb-tg-light-fg);
}

/* ── La cabecera con la foto ─────────────────────────────────────────────── */

.dw-hero {
  position: relative;
  background: #0B0E1A;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* La foto.
 *
 * En el export iba como PNG en base64 dentro del HTML: 3.571.343 bytes, que en base64
 * son 4.761.792 de los 6.434.463 que pesaba el fichero. Aqui es un WebP de 1440 px de
 * ancho, 114.708 bytes, con JPEG de reserva para el navegador que no entienda WebP.
 * El `image-set` deja que el navegador elija; la declaracion de arriba es la que
 * entienden los que no soportan `image-set`. */
.dw-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url("/static/media/dw-hero-1440.jpg");
  background-image: image-set(
    url("/static/media/dw-hero-1440.webp") type("image/webp"),
    url("/static/media/dw-hero-1440.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 28%;
  opacity: .14;
  filter: saturate(.45) contrast(1.1);
}

.dw-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px 32px 22px;
}
/* El lima fijo y no `var(--lb-accent)`: la cabecera es oscura en los dos temas, y en el
 * claro esa variable es un verde oliva oscuro que sobre este fondo no se lee. El diseno
 * tambien lo tenia fijo aqui. */
.dw-hero__kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D8F937;
}
.dw-hero__title {
  margin: 8px 0 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #FFFFFF;
  text-wrap: pretty;
}
.dw-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #D8F937;  /* fijo, va sobre la cabecera oscura */
}
.dw-hero__fade {
  position: relative;
  z-index: 2;
  height: 96px;
}
.dw-hero__fade svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }

/* ── El cuerpo ───────────────────────────────────────────────────────────── */

.dw-main { max-width: 1440px; margin: 0 auto; padding: 22px 32px 64px; }

.dw-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.dw-filters__spacer { flex: 1; }
.dw-filters__count { font-size: 12px; color: var(--lb-t3); white-space: nowrap; }

.dw-filter { display: flex; flex-direction: column; gap: 5px; }
.dw-filter > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lb-t3);
}
.dw-filter select {
  background: var(--lb-surface);
  color: var(--lb-t1);
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.dw-filter select:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 1px; }

.dw-cards {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
}
.dw-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: 16px;
  padding: 14px 16px 13px;
  animation: lbUp 400ms cubic-bezier(.2, .7, .3, 1) both;
}
.dw-card--accent {
  background: #D8F937;  /* fijo: la tarjeta es lima en los dos temas, con texto oscuro */
  color: #14182B;
  border: none;
  padding: 18px 20px 16px;
  box-shadow: 0 16px 44px rgba(216, 249, 55, .14);
}
.dw-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lb-t3);
}
.dw-card--accent .dw-card__label { color: inherit; font-weight: 700; opacity: .72; }
.dw-card__value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--lb-t1);
}
.dw-card--accent .dw-card__value { color: inherit; }
.dw-card__value--big { font-size: 32px; letter-spacing: -.03em; line-height: 1.05; }
.dw-card__foot {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--lb-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--lb-t3);
}
.dw-card--accent .dw-card__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(20, 24, 43, .22);
  color: inherit;
  font-weight: 600;
}

/* ── La tabla ────────────────────────────────────────────────────────────── */

.dw-tablewrap {
  margin-top: 32px;
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: 20px;
  overflow: hidden;
}
.dw-tablescroll { overflow-x: auto; }
/* 1.478 y no los 1.438 que traia el diseno: las 15 columnas suman 1.434 px y el padding
 * lateral de la rejilla son 22+22. Con 1.438 la ultima columna, la de F · H · L, se
 * quedaba cortada por el `overflow:hidden` del contenedor. Visto en el navegador. */
.dw-tablemin { min-width: 1478px; }

.dw-grid {
  display: grid;
  grid-template-columns:
    48px 92px 88px 84px 92px 104px 96px minmax(190px, 1fr)
    80px 80px 92px 118px 126px 48px 96px;
  padding: 0 22px;
  align-items: center;
}

.dw-thead {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--lb-surface);
  border-bottom: 1px solid var(--lb-line);
}
.dw-th {
  padding: 14px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lb-t3);
}
.dw-th--first { padding-left: 0; }
.dw-th--last { padding-right: 0; text-align: right; }
.dw-th--num { text-align: right; }
.dw-th--sort { cursor: pointer; user-select: none; }
.dw-th--sort:hover { color: var(--lb-t2); }
.dw-th--sorted { color: var(--lb-accent); }
.dw-th--sorted::after { content: " \25BE"; }
.dw-th--sorted[data-dir="asc"]::after { content: " \25B4"; }

/* La fila.
 *
 * El resaltado es esta regla y nada mas. En el export iba en el estado del componente
 * de React: la fila llevaba los dos manejadores de puntero enganchados a `r.enter` y
 * `r.leave`, y un atributo `style-hover` que la herramienta resolvia por JavaScript.
 * Cada fila son 41 nodos y hay 9.907, asi que un movimiento del raton repintaba del
 * orden de 406.000 nodos. El color es el que declaraba el diseno, en sus dos temas. */
.dw-row {
  border-bottom: 1px solid var(--lb-line);
  cursor: pointer;
  transition: background 120ms cubic-bezier(.2, .7, .3, 1);
}
.dw-row:hover { background: var(--lb-hover); }
.dw-row:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: -2px; }
.dw-row:last-child { border-bottom: none; }

.dw-td { padding: 15px 6px; font-size: 13px; color: var(--lb-t2); }
.dw-td--pos {
  padding-left: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--lb-t3);
}
.dw-td--num {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lb-t1);
}
.dw-td--mono { font-family: var(--font-mono); font-weight: 400; color: var(--lb-t2); }
.dw-td--dim { color: var(--lb-t2); }
.dw-td--country { display: flex; align-items: center; gap: 8px; }
.dw-td--country .fi { width: 18px; height: 13px; border-radius: 2px; flex: none; }
.dw-td--country span { font-size: 12px; color: var(--lb-t3); }
.dw-td--level { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.dw-td--last { padding-right: 0; }
.dw-td--dots {
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

/* La pastilla con el nombre del darwin.
 *
 * La paleta `--dxcl-c-darwin-NN` esta declarada mas abajo: es la de Darwinex, la misma
 * que usa /darwinia/, y hay que traerla porque esta pagina no carga la hoja antigua.
 * Sin ella la pastilla se quedaba sin fondo, que es lo que se veia en el navegador. */
.dw-darwin {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: .06em;
}

.dw-level { font-weight: 700; letter-spacing: .06em; }
.dw-level--gold { color: var(--lb-accent); }
.dw-level--silver { color: var(--lb-t2); }

.dw-pos { color: var(--lb-pos); }
.dw-neg { color: var(--lb-neg); }

/* La barra de retorno acumulado */
.dw-td--bar { padding: 11px 6px; display: flex; align-items: center; gap: 10px; }
.dw-bar {
  position: relative;
  flex: 1;
  min-width: 36px;
  height: 8px;
  border-radius: 999px;
  background: var(--lb-bar);
  overflow: hidden;
}
.dw-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--lb-bar-fill);
  border-radius: 999px;
}
.dw-bar__val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 74px;
}

/* Los tres indicadores F · H · L */
/* Los tres indicadores. La cabecera de la columna dice "F · H · L", asi que la posicion
 * ya dice cual es cada uno y el punto no lleva letra dentro, como en el diseno. El
 * `title` da el nombre completo al pasar el raton. */
.dw-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  background: transparent;
  border: 1.5px solid var(--lb-dot-off);
}
.dw-dot--on {
  background: var(--lb-dot-on);
  border-color: var(--lb-dot-on);
}

.dw-empty { padding: 48px 22px; text-align: center; color: var(--lb-t3); }

/* ── Solo de /darwinia/: la pagina de una comunidad ──────────────────────── */

/* La rejilla de esta pagina son diez columnas, no las quince de /darwinia-world/.
 * Suman 1.098 px y con el padding lateral de 44 hacen 1.142, que es el ancho minimo. */
.dw-grid--comunidad {
  grid-template-columns:
    56px 84px minmax(150px, 1fr) 88px 122px 130px 104px 104px 122px 96px;
}
.dw-tablemin--comunidad { min-width: 1142px; }

/* Las pestañas de nivel. Eran dos botones con las clases del diseno viejo. */
.dw-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--lb-line-2);
  border-radius: 999px;
  align-self: flex-end;
}
.dw-tab {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: transparent;
  color: var(--lb-t2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.dw-tab:hover { color: var(--lb-t1); }
.dw-tab:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 1px; }
/* El lima FIJO y no `var(--lb-accent)`: en tema claro el acento es un verde oliva
 * (#6F8A0F) y con texto oscuro da 4,45:1, por debajo del 4,5 de la WCAG. Con el lima fijo
 * son 14,66:1 en los dos temas, igual que la tarjeta de acento. Medido en el navegador.
 * Es el mismo error que ya cometi con la tarjeta y con el titular de la cabecera: mezclar
 * un color de texto fijo con un fondo que cambia con el tema. */
.dw-tab--activa { background: #D8F937; color: #14182B; }

/* El buscador de darwin */
.dw-filter--busca input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  background: var(--lb-surface);
  color: var(--lb-t1);
  font-family: inherit;
  font-size: 13px;
  min-width: 12ch;
}
.dw-filter--busca input:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 1px; }

/* El logo de la comunidad, cuando la comunidad tiene uno.
 *
 * Va con `hidden` por omision y solo se le pone `src` si el JSON trae logo. La version
 * anterior tenia dos `<img>` fijos apuntando a `example_logo_large.png` y
 * `example_logo_small.png`, que no existen: 403 en produccion, en las 95 comunidades de
 * 96 que no tienen logo. No se veia porque iban con `visibility:hidden`, que descarga la
 * imagen igual. */
.dw-hero__logo {
  position: absolute;
  right: 32px;
  top: 26px;
  max-height: 64px;
  max-width: 220px;
  border-radius: 10px;
}

/* El estado del darwin: `active` o `inactive` */
.dw-td--estado { padding-right: 0; text-align: right; }
.dw-estado {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--lb-line-2);
  color: var(--lb-t3);
}
.dw-estado--active { color: var(--lb-pos); border-color: currentColor; }
.dw-estado--inactive { color: var(--lb-t3); }

/* El podio. El diseno viejo pintaba las tres primeras filas con oro, plata y bronce de
 * fondo; aqui es una barra de color a la izquierda, que se lee igual y no pelea con el
 * `:hover` ni con el contraste del texto de la fila. */
.dw-row--podio { position: relative; }
.dw-row--podio::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.dw-row--podio-1::before { background: #E8C349; }
.dw-row--podio-2::before { background: #B9C0CE; }
.dw-row--podio-3::before { background: #C98B5B; }

/* Sin comunidad elegida.
 *
 * Esto es lo que se enseña en el sitio de la tabla, y es el arreglo de verdad del fallo
 * que dejaba la tabla vacia: los tres `|| ""` quitan la excepcion, pero una tabla con
 * cabeceras y cero filas se sigue confundiendo con un fallo de datos. */
.dw-elegir {
  margin-top: 32px;
  padding: 48px 32px;
  background: var(--lb-surface);
  border: 1px solid var(--lb-line);
  border-radius: 20px;
  text-align: center;
  animation: lbUp 400ms cubic-bezier(.2, .7, .3, 1) both;
}
.dw-elegir__titulo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lb-t1);
}
.dw-elegir__texto {
  margin: 10px auto 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lb-t2);
}
.dw-elegir__texto strong { color: var(--lb-t1); }
.dw-elegir__nota {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lb-t3);
}

/* ── Los controles de paginacion ─────────────────────────────────────────── */

.dw-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--lb-line);
  background: var(--lb-surface-2);
  font-size: 13px;
  color: var(--lb-t2);
  flex-wrap: wrap;
}
.dw-pager__btn {
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--lb-line-2);
  border-radius: 8px;
  background: var(--lb-surface);
  color: var(--lb-t1);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.dw-pager__btn:hover:not(:disabled) { border-color: var(--lb-accent); color: var(--lb-accent); }
.dw-pager__btn:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 1px; }
.dw-pager__btn:disabled { opacity: .38; cursor: default; }

.dw-pager__estado { display: inline-flex; align-items: center; gap: 6px; }
.dw-pager__campo {
  width: 5.5ch;
  height: 32px;
  padding: 0 4px;
  border: 1px solid var(--lb-line-2);
  border-radius: 8px;
  background: var(--lb-surface);
  color: var(--lb-t1);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
}
.dw-pager__campo:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 1px; }
.dw-pager__total { color: var(--lb-t3); white-space: nowrap; }

/* El rango de posiciones de la pagina: «501–750 of 9,907». Es lo que dice donde estas
 * cuando la posicion de la primera fila no es 1. */
.dw-pager__rango {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lb-t3);
  white-space: nowrap;
}

/* ── El pie ──────────────────────────────────────────────────────────────── */

.dw-footer { border-top: 1px solid rgba(255, 255, 255, .07); }
.dw-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 32px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--lb-t3);
}
.dw-footer__inner a { color: var(--lb-t2); text-decoration: none; }
.dw-footer__spacer { flex: 1; }

/* ── Pantallas estrechas ─────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .dw-topbar, .dw-hero__inner, .dw-main, .dw-footer__inner { padding-left: 16px; padding-right: 16px; }
  .dw-cards { grid-template-columns: 1fr; }
  .dw-main { padding-bottom: 40px; }
}

/* Quien pida menos movimiento no ve la animacion de la linea ni la de las tarjetas. */
@media (prefers-reduced-motion: reduce) {
  .dw-card, .dw-hero__fade polyline { animation: none !important; }
  .dw-row { transition: none; }
}

/* ── La paleta de darwin de Darwinex, la misma que usa /darwinia/ ─────────── */

:root {
  --dxcl-c-darwin-00: #d8d8d8;
  
--dxcl-c-darwin-01: #84a1a7;
  
--dxcl-c-darwin-02: #6fb0b6;
  
--dxcl-c-darwin-03: #e35527;
  
--dxcl-c-darwin-04: #c48ed1;
  
--dxcl-c-darwin-05: #f9bf3b;
  
--dxcl-c-darwin-06: #ff6464;
  
--dxcl-c-darwin-07: #f62459;
  
--dxcl-c-darwin-08: #d2527f;
  
--dxcl-c-darwin-09: #2ac7ca;
  
--dxcl-c-darwin-10: #2ecc71;
  
--dxcl-c-darwin-11: #26a65b;
  
--dxcl-c-darwin-12: #f4b350;
  
--dxcl-c-darwin-13: #2ac7ca;
  
--dxcl-c-darwin-14: #03c9a9;
  
--dxcl-c-darwin-15: #e08283;
  
--dxcl-c-darwin-16: #f2a007;
  
--dxcl-c-darwin-17: #e67e22;
  
--dxcl-c-darwin-18: #aea8d3;
  
--dxcl-c-darwin-19: #00bd87;
  
--dxcl-c-darwin-20: #81a7aa;
  
--dxcl-c-darwin-21: #4ecdc4;
  
--dxcl-c-darwin-22: #d24d57;
  
--dxcl-c-darwin-23: #ff4141;
  
--dxcl-c-darwin-24: #9a12b3;
}

/* El color del TEXTO de cada pastilla, elegido por contraste contra su fondo con la
 * formula de luminancia relativa de la WCAG: se queda el que da mas contraste de los dos
 * de la marca. Sin esto, las pastillas de fondo oscuro de la paleta (la 24 es un morado
 * `#9a12b3`) salian con texto oscuro y no se leian. Visto en el navegador.
 * Generado, no escrito a mano: ver el bloque de arriba con los fondos. */
:root {
  --dxcl-c-darwin-fg-00: #14182B;
  --dxcl-c-darwin-fg-01: #14182B;
  --dxcl-c-darwin-fg-02: #14182B;
  --dxcl-c-darwin-fg-03: #14182B;
  --dxcl-c-darwin-fg-04: #14182B;
  --dxcl-c-darwin-fg-05: #14182B;
  --dxcl-c-darwin-fg-06: #14182B;
  --dxcl-c-darwin-fg-07: #14182B;
  --dxcl-c-darwin-fg-08: #14182B;
  --dxcl-c-darwin-fg-09: #14182B;
  --dxcl-c-darwin-fg-10: #14182B;
  --dxcl-c-darwin-fg-11: #14182B;
  --dxcl-c-darwin-fg-12: #14182B;
  --dxcl-c-darwin-fg-13: #14182B;
  --dxcl-c-darwin-fg-14: #14182B;
  --dxcl-c-darwin-fg-15: #14182B;
  --dxcl-c-darwin-fg-16: #14182B;
  --dxcl-c-darwin-fg-17: #14182B;
  --dxcl-c-darwin-fg-18: #14182B;
  --dxcl-c-darwin-fg-19: #14182B;
  --dxcl-c-darwin-fg-20: #14182B;
  --dxcl-c-darwin-fg-21: #14182B;
  --dxcl-c-darwin-fg-22: #FFFFFF;
  --dxcl-c-darwin-fg-23: #14182B;
  --dxcl-c-darwin-fg-24: #FFFFFF;
}