/* Brain, parte comum v1: a identidade visual da plataforma Eletribus (Design System v2 do eletribus.css: navy #11111F +
   teal #2CD5C4, Space Grotesk nos titulos, IBM Plex Sans no texto e IBM Plex Mono nos numeros) e o chrome de toda tela:
   a barra lateral navy com a marca, as telas e a pessoa, e a barra de cima branca com o titulo e a operadora.
   Cores de estado e de tracao sempre com forma e rotulo, nunca so a cor. Claro como na plataforma; o escuro so por
   escolha da pessoa (o botao da lateral poe data-theme="dark"), nunca pelo tema do aparelho.
   Todo var() critico do chrome leva o hex de reserva (a licao da "sidebar branca" da plataforma, v0.48.1). As fontes
   vem do Google Fonts como na plataforma; sem elas, a pilha do sistema. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  color-scheme: light;
  /* fontes (DS) */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* escalas (DS) */
  --ink-950: #0A0A13; --ink-900: #0E0E1A; --ink-800: #11111F; --ink-700: #191A2C; --ink-600: #232540; --ink-500: #313455;
  --teal-100: #D6FAF4; --teal-200: #A6F1E7; --teal-400: #43DBC9; --teal-500: #2CD5C4; --teal-600: #17B4A4;
  --teal-700: #0E8C80; --teal-800: #0A6960;
  --gray-0: #FFFFFF; --gray-50: #F6F7F9; --gray-100: #EDEFF3; --gray-200: #DEE2E9; --gray-300: #C6CCD7;
  --gray-400: #9AA2B1; --gray-500: #6E7789; --gray-600: #4E5668; --gray-700: #383F4E;
  /* superficies e texto (DS); o muted fica um tom acima do DS para passar 4,5:1 tambem no fundo da pagina */
  --bg-app: #F6F7F9; --surface-card: #FFFFFF; --surface-sunken: #EDEFF3; --surface-inset: #F6F7F9;
  --border-subtle: #DEE2E9; --border-strong: #C6CCD7;
  --borda-campo: #858D9C;                 /* contorno de campo com 3:1 (WCAG 1.4.11), mais firme que o do DS */
  --text-strong: #11111F; --text-body: #383F4E; --text-muted: #656D7E; --text-accent: #0B7A6E;
  --surface-dark: #11111F; --surface-dark-2: #191A2C; --surface-dark-3: #232540;
  --border-on-dark: rgba(255, 255, 255, .10); --text-on-dark: #FFFFFF; --text-on-dark-muted: #A6ADBD; --accent-on-dark: #43DBC9;
  /* forma, elevacao e movimento (DS) */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(17, 17, 31, .08), 0 1px 2px rgba(17, 17, 31, .04);
  --shadow-md: 0 4px 12px rgba(17, 17, 31, .08), 0 2px 4px rgba(17, 17, 31, .05);
  --shadow-lg: 0 12px 28px rgba(17, 17, 31, .12), 0 4px 8px rgba(17, 17, 31, .06);
  --shadow-focus: 0 0 0 3px rgba(44, 213, 196, .35);
  --shadow-teal: 0 6px 20px rgba(23, 180, 164, .28);
  --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: 120ms; --dur-base: 200ms;
  --lateral: 248px; --lateral-recolhida: 64px; --topo-h: 56px;

  /* os nomes que as telas do Brain ja usam, agora com os valores do DS */
  --navy: #11111F;
  --teal: #2CD5C4;
  --teal-tinta: #0B7A6E;
  --pagina: #F6F7F9;
  --cartao: #FFFFFF;
  --tinta: #11111F;
  --tinta-2: #4E5668;
  --tinta-3: #656D7E;
  --grade: #EDEFF3;
  --borda: #DEE2E9;
  --ok: #1d7a4d;
  --ok-fundo: #e3f4ea;
  --ruim: #b3261e;
  --ruim-fundo: #fbe7e5;
  --atencao: #8a5a00;
  --atencao-fundo: #fff3d6;
  --tr-eletrico: #1baf7a;
  --tr-trolebus: #2a78d6;
  --tr-diesel: #eb6834;
  --fonte: var(--font-text);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0E0E1A; --surface-card: #191A2C; --surface-sunken: #11111F; --surface-inset: #11111F;
  --border-subtle: #2C2E4A; --border-strong: #454969; --borda-campo: #7A83A0;
  --text-strong: #EDEFF3; --text-body: #C6CCD7; --text-muted: #9AA2B1; --text-accent: #43DBC9;
  --surface-dark: #0A0A13; --surface-dark-2: #11111F; --surface-dark-3: #232540;
  --pagina: #0E0E1A; --cartao: #191A2C; --tinta: #EDEFF3; --tinta-2: #C6CCD7; --tinta-3: #9AA2B1;
  --grade: #232540; --borda: #2C2E4A; --teal-tinta: #43DBC9;
  --ok: #6fd39b; --ok-fundo: #133325; --ruim: #ff8a80; --ruim-fundo: #3a1714; --atencao: #f2c46d; --atencao-fundo: #3a2c0c;
  --tr-eletrico: #199e70; --tr-trolebus: #3987e5; --tr-diesel: #d95926;
}

/* ---------------------------------------------------------------- o chrome (<brain-barra>): lateral + barra de cima
   As regras da barra usam classe e repetem o que importa (flex, altura, largura): a folha da tela (o COI poe 44 px e
   flex:1 em todo botao) vem depois e nao desmonta a barra. */
brain-barra {
  display: block; position: sticky; top: 0; z-index: 1200;
  font: 14px/1.4 var(--font-text, system-ui, sans-serif); -webkit-font-smoothing: antialiased;
}
brain-barra [hidden] { display: none !important; }
/* o espaco da lateral: pelo :has ja no primeiro desenho (a tela nao pula); a classe que a barra poe vale para o
   navegador sem :has (regra separada: um seletor desconhecido derruba a lista inteira) */
body:has(> brain-barra) { padding-left: var(--lateral, 248px); }
body.bb-com-lateral { padding-left: var(--lateral, 248px); transition: padding-left var(--dur-base, 200ms) var(--ease-out, ease); }
body.bb-recolhida:has(> brain-barra) { padding-left: var(--lateral-recolhida, 64px); }
body.bb-com-lateral.bb-recolhida { padding-left: var(--lateral-recolhida, 64px); }

brain-barra .bb-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--lateral, 248px); z-index: 1300;
  display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
  background: var(--surface-dark, #11111F); color: var(--text-on-dark, #FFFFFF);
  border-right: 1px solid var(--border-on-dark, rgba(255, 255, 255, .10));
  transition: width var(--dur-base, 200ms) var(--ease-out, ease), transform .24s ease;
}
brain-barra .bb-marca {
  display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border-on-dark, rgba(255, 255, 255, .10)); color: inherit; text-decoration: none;
  font-weight: 700; font-size: 18px;
}
brain-barra .bb-logo {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 5px;
  border-radius: 9px; background: var(--ink-700, #191A2C);
}
brain-barra .bb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
brain-barra .bb-marca-texto { display: flex; flex-direction: column; overflow: hidden; line-height: 1.15; }
brain-barra .bb-marca-nome {
  font: 700 15px/1.15 var(--font-display, sans-serif); letter-spacing: .06em; color: #FFFFFF; white-space: nowrap;
}
brain-barra .bb-marca-sub {
  font: 500 9px/1.4 var(--font-mono, monospace); letter-spacing: .28em; color: var(--accent-on-dark, #43DBC9);
  white-space: nowrap;
}
brain-barra .bb-navegacao { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 12px; }
brain-barra .bb-grupo {
  margin: 0; padding: 10px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-on-dark-muted, #A6ADBD); white-space: nowrap;
}
brain-barra .bb-telas { display: flex; flex-direction: column; gap: 2px; }
brain-barra .bb-item, brain-barra .bb-recolher, brain-barra .bb-tema, brain-barra .bb-sair {
  display: flex; align-items: center; gap: 11px; flex: none; width: 100%; min-height: 38px; margin: 0; padding: 9px 11px;
  border: 0; border-radius: var(--r-sm, 6px); background: transparent; color: var(--text-on-dark-muted, #A6ADBD);
  font: 500 13.5px/1.2 var(--font-text, sans-serif); text-align: left; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) var(--ease-out, ease), color var(--dur-fast, 120ms) var(--ease-out, ease);
}
brain-barra .bb-item:hover, brain-barra .bb-recolher:hover, brain-barra .bb-tema:hover, brain-barra .bb-sair:hover {
  background: rgba(255, 255, 255, .08); color: #FFFFFF;
}
brain-barra .bb-item[aria-current="page"] { background: var(--ink-600, #232540); color: #FFFFFF; font-weight: 600; }
brain-barra .bb-item[aria-current="page"] .bb-ic { color: var(--accent-on-dark, #43DBC9); }
brain-barra .bb-ic { display: flex; flex: none; color: inherit; }
brain-barra .bb-ic svg { display: block; }
brain-barra .bb-txt { overflow: hidden; text-overflow: ellipsis; }
brain-barra .bb-pe { padding: 12px; border-top: 1px solid var(--border-on-dark, rgba(255, 255, 255, .10)); }
brain-barra .bb-recolher, brain-barra .bb-tema, brain-barra .bb-sair { font-size: 13px; }
brain-barra .bb-usuario { display: flex; align-items: center; gap: 10px; padding: 10px 11px 6px; overflow: hidden; }
brain-barra .bb-avatar {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-600, #17B4A4); color: var(--ink-800, #11111F); font: 700 12px var(--font-text, sans-serif);
}
brain-barra .bb-pessoa {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FFFFFF; font-size: 12.5px; font-weight: 600;
}
brain-barra .bb-lateral a:focus-visible, brain-barra .bb-lateral button:focus-visible {
  outline: 2px solid var(--accent-on-dark, #43DBC9); outline-offset: 2px; box-shadow: none;
}

brain-barra .bb-topo {
  display: flex; align-items: center; gap: 14px; height: var(--topo-h, 56px); padding: 0 24px;
  background: var(--surface-card, #FFFFFF); border-bottom: 1px solid var(--border-subtle, #DEE2E9);
}
brain-barra .bb-menu {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
  min-height: 0; margin: 0; padding: 4px; border: 0; border-radius: var(--r-sm, 6px); background: transparent;
  color: var(--text-body, #383F4E); font: 19px/1 var(--font-text, sans-serif); cursor: pointer;
}
brain-barra .bb-menu:hover { background: var(--surface-sunken, #EDEFF3); }
brain-barra .bb-titulo {
  font: 600 16px/1.2 var(--font-display, sans-serif); letter-spacing: -.01em; color: var(--text-strong, #11111F);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
brain-barra .bb-lugar { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
brain-barra .bb-seletor {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted, #656D7E);
  font-size: 12.5px; font-weight: 500;
}
brain-barra .bb-operadora {
  height: 34px; min-height: 0; max-width: 200px; margin: 0; padding: 0 8px; flex: none;
  border: 1.5px solid var(--borda-campo, #858D9C); border-radius: var(--r-sm, 6px);
  background: var(--surface-card, #FFFFFF); color: var(--text-strong, #11111F);
  font: 500 13px var(--font-text, sans-serif); cursor: pointer;
}
brain-barra .bb-topo button:focus-visible, brain-barra .bb-operadora:focus-visible {
  outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(44, 213, 196, .35));
}
brain-barra .bb-aviso {
  margin: 0; padding: 8px 24px; background: var(--atencao-fundo, #fff3d6); color: var(--atencao, #8a5a00);
  border-bottom: 1px solid var(--border-subtle, #DEE2E9); font-size: 13px;
}
brain-barra .bb-veu { display: none; }

/* recolhida (computador): so os icones */
body.bb-recolhida brain-barra .bb-lateral { width: var(--lateral-recolhida, 64px); }
body.bb-recolhida brain-barra .bb-marca { justify-content: center; padding: 18px 0 16px; }
body.bb-recolhida brain-barra .bb-marca-texto,
body.bb-recolhida brain-barra .bb-grupo,
body.bb-recolhida brain-barra .bb-txt,
body.bb-recolhida brain-barra .bb-pessoa { display: none; }
body.bb-recolhida brain-barra .bb-item,
body.bb-recolhida brain-barra .bb-recolher,
body.bb-recolhida brain-barra .bb-tema,
body.bb-recolhida brain-barra .bb-sair,
body.bb-recolhida brain-barra .bb-usuario { justify-content: center; padding-left: 0; padding-right: 0; }
body.bb-recolhida brain-barra .bb-recolher .bb-ic { transform: rotate(180deg); }

/* celular e tela estreita: a lateral sai de lado e abre pelo menu */
@media (max-width: 900px) {
  body:has(> brain-barra), body.bb-recolhida:has(> brain-barra) { padding-left: 0; }
  body.bb-com-lateral, body.bb-com-lateral.bb-recolhida { padding-left: 0; }
  brain-barra .bb-lateral, body.bb-recolhida brain-barra .bb-lateral {
    width: var(--lateral, 248px); transform: translateX(-100%);
  }
  brain-barra.bb-aberta .bb-lateral { transform: translateX(0); box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, .3)); }
  brain-barra.bb-aberta .bb-veu { display: block; position: fixed; inset: 0; z-index: 1250; background: rgba(10, 10, 19, .55); }
  brain-barra .bb-recolher { display: none; }
  body.bb-recolhida brain-barra .bb-marca { justify-content: flex-start; padding: 18px 18px 16px; }
  body.bb-recolhida brain-barra .bb-marca-texto { display: flex; }
  body.bb-recolhida brain-barra .bb-grupo, body.bb-recolhida brain-barra .bb-txt,
  body.bb-recolhida brain-barra .bb-pessoa { display: block; }
  body.bb-recolhida brain-barra .bb-item, body.bb-recolhida brain-barra .bb-tema, body.bb-recolhida brain-barra .bb-sair,
  body.bb-recolhida brain-barra .bb-usuario { justify-content: flex-start; padding-left: 11px; padding-right: 11px; }
  brain-barra .bb-topo { padding: 0 12px; gap: 10px; }
  brain-barra .bb-aviso { padding: 8px 12px; }
}
@media (max-width: 480px) {
  brain-barra .bb-seletor { font-size: 0; gap: 0; }                /* so o seletor: o rotulo fica no aria-label */
  brain-barra .bb-operadora { max-width: 150px; }
}
@media print {
  brain-barra { display: none !important; }
  body:has(> brain-barra) { padding-left: 0 !important; }
  body.bb-com-lateral { padding-left: 0 !important; }
}

/* ---------------------------------------------------------------- tracao (tracao.js: selo) */
.tracao { display: inline-flex; align-items: center; gap: 6px; }
.tracao .eletrico { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--tr-eletrico, #1baf7a); }
.tracao.tr-premissa, .tracao.tr-ambigua, .tracao.tr-indisponivel {
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: help;
}

/* ---------------------------------------------------------------- paginas do portal (entrar, inicio, erros) */
body.brain {
  margin: 0; min-height: 100vh; background: var(--bg-app, #F6F7F9); color: var(--text-strong, #11111F);
  font: 15px/1.55 var(--font-text, system-ui, sans-serif); -webkit-font-smoothing: antialiased;
}
.brain *, .brain *::before, .brain *::after { box-sizing: border-box; }
.brain main { max-width: 1040px; margin: 0 auto; padding: 32px 32px 48px; }
.brain h1 {
  margin: 0 0 6px; font: 600 28px/1.15 var(--font-display, sans-serif); letter-spacing: -.02em;
  color: var(--text-strong, #11111F);
}
.brain h2 { margin: 22px 0 10px; font: 600 16px/1.2 var(--font-display, sans-serif); }
.brain .sobretitulo {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-accent, #0B7A6E);
}
.brain .sub { margin: 0 0 20px; max-width: 60ch; color: var(--text-muted, #656D7E); font-size: 15px; }
.brain .cartao {
  background: var(--surface-card, #FFFFFF); border: 1px solid var(--border-subtle, #DEE2E9); border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(17, 17, 31, .08)); padding: 28px; margin-bottom: 14px;
}
.brain label { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted, #656D7E); }
.brain input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: 400 15px var(--font-text, sans-serif);
  text-transform: none; letter-spacing: 0; color: var(--text-strong, #11111F); background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--borda-campo, #858D9C); border-radius: var(--r-md, 10px);
}
.brain input:focus { outline: none; border-color: var(--teal-600, #17B4A4); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(44, 213, 196, .35)); }
.brain button.principal {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 22px; padding: 0 16px;
  font: 600 15px var(--font-text, sans-serif); letter-spacing: .01em; cursor: pointer;
  background: var(--teal-500, #2CD5C4); color: var(--ink-800, #11111F); border: 0; border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-teal, 0 6px 20px rgba(23, 180, 164, .28));
  transition: filter var(--dur-fast, 120ms) var(--ease-out, ease), transform var(--dur-fast, 120ms) var(--ease-out, ease);
}
.brain button.principal:hover { filter: brightness(1.05); }
.brain button.principal:active { transform: scale(.98); }
.brain button:disabled { opacity: .55; cursor: default; }
.brain main a { color: var(--text-accent, #0B7A6E); font-weight: 600; }          /* so no conteudo: a lateral tem as suas */
.brain main a:focus-visible, .brain main button:focus-visible {
  outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(44, 213, 196, .35)); border-radius: var(--r-sm, 6px);
}
.brain .retorno { min-height: 1.2em; margin: 10px 0 0; }
.brain .retorno.ruim { color: var(--ruim, #b3261e); }
.brain .motivo { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--tinta-2, #4E5668); }

/* inicio: um cartao por tela, com a sigla do modulo */
.brain .telas { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.brain .telas a {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px 22px;
  overflow: hidden; border-radius: var(--r-lg, 14px); text-decoration: none; color: inherit; font-weight: 400;
  background: var(--surface-card, #FFFFFF); border: 1px solid var(--border-subtle, #DEE2E9);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(17, 17, 31, .08));
  transition: box-shadow var(--dur-fast, 120ms) var(--ease-out, ease), border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.brain .telas a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--teal-500, #2CD5C4); }
.brain .telas a:hover { border-color: var(--teal-200, #A6F1E7); box-shadow: var(--shadow-md, 0 4px 12px rgba(17, 17, 31, .08)); }
.brain .telas .sigla { font: 500 12px var(--font-mono, monospace); letter-spacing: .1em; color: var(--text-accent, #0B7A6E); }
.brain .telas strong { display: block; font: 600 18px/1.2 var(--font-display, sans-serif); color: var(--text-strong, #11111F); }
.brain .telas span { color: var(--text-muted, #656D7E); font-size: 13.5px; }
.brain .telas .ir { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-accent, #0B7A6E); }

/* entrar e erros: o painel navy da marca ao lado do cartao (empilham no celular) */
body.brain.porta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.porta .vitrine {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px;
  color: var(--text-on-dark, #FFFFFF);
  background: radial-gradient(720px 360px at 85% -10%, rgba(44, 213, 196, .22), transparent 62%),
    linear-gradient(150deg, var(--ink-950, #0A0A13), var(--ink-800, #11111F) 55%, var(--ink-600, #232540));
}
.porta .vitrine .marca { display: flex; align-items: center; gap: 12px; }
.porta .vitrine .logo { width: 44px; height: 44px; display: grid; place-items: center; padding: 6px; border-radius: 11px;
  background: var(--ink-700, #191A2C); }
.porta .vitrine .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.porta .vitrine .nome { display: block; font: 700 18px/1.1 var(--font-display, sans-serif); letter-spacing: .06em; }
.porta .vitrine .linha-sub { display: block; font: 500 10px/1.6 var(--font-mono, monospace); letter-spacing: .28em;
  color: var(--accent-on-dark, #43DBC9); }
.porta .vitrine .chamada { max-width: 30ch; margin: 0; font: 600 34px/1.15 var(--font-display, sans-serif); letter-spacing: -.02em; }
.porta .vitrine .chamada em { font-style: normal; color: var(--teal-500, #2CD5C4); }
.porta .vitrine .rodape-marca { margin: 0; font-size: 12.5px; color: var(--text-on-dark-muted, #A6ADBD); }
.porta main { width: 100%; max-width: 460px; margin: auto; padding: 40px 24px; }
.porta .cartao { padding: 32px; }
.porta .sub { margin-bottom: 4px; }
@media (max-width: 860px) {
  body.brain.porta { grid-template-columns: 1fr; align-content: start; }
  .porta .vitrine { padding: 22px 20px; gap: 14px; }
  .porta .vitrine .chamada { font-size: 22px; }
  .porta .vitrine .rodape-marca { display: none; }
  .porta main { margin: 0 auto; padding: 20px 16px 32px; }
  .porta .cartao { padding: 22px; }
}
@media (max-width: 560px) {
  .brain main { padding: 20px 16px 32px; }
  .brain h1 { font-size: 24px; }
}