:root {
  --fundo: #f6f4ef;
  --painel: #ffffff;
  --texto: #1d1f24;
  --suave: #5b6070;
  --linha: #d9d4c7;
  --destaque: #c2410c;
  --destaque-fraco: #fde9dc;
  --link: #1d4ed8;
  --codigo: #efeae0;
  --sombra: rgba(0, 0, 0, .35);
  --topo-h: 56px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #14161b;
  --painel: #1d2028;
  --texto: #e7e9ee;
  --suave: #9aa1b2;
  --linha: #2e3340;
  --destaque: #fb923c;
  --destaque-fraco: #3a2a1f;
  --link: #93c5fd;
  --codigo: #262a34;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #14161b;
    --painel: #1d2028;
    --texto: #e7e9ee;
    --suave: #9aa1b2;
    --linha: #2e3340;
    --destaque: #fb923c;
    --destaque-fraco: #3a2a1f;
    --link: #93c5fd;
    --codigo: #262a34;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }

/* ---- topo ---- */
.topo {
  position: sticky; top: 0; z-index: 20;
  height: var(--topo-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--painel);
  border-bottom: 1px solid var(--linha);
}
.marca { font-weight: 700; color: var(--texto); text-decoration: none; white-space: nowrap; }
.busca-wrap { flex: 1; max-width: 520px; margin-left: auto; }
#busca {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font: inherit;
}
#busca:focus { outline: 2px solid var(--destaque); outline-offset: 0; }
.icone {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--texto);
  font-size: 18px; cursor: pointer;
}
#abrir-menu { display: none; }

/* ---- layout ---- */
.corpo { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: calc(100vh - var(--topo-h)); }
.menu {
  position: sticky; top: var(--topo-h);
  align-self: start;
  height: calc(100vh - var(--topo-h));
  overflow-y: auto;
  padding: 12px 10px 40px;
  border-right: 1px solid var(--linha);
  background: var(--painel);
  font-size: 14.5px;
}
.menu .grupo { margin: 14px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.menu a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--texto); text-decoration: none;
}
.menu a:hover { background: var(--destaque-fraco); }
.menu a[aria-current="page"] { background: var(--destaque-fraco); color: var(--destaque); font-weight: 600; }

.principal {
  min-width: 0;
  padding: 28px clamp(16px, 4vw, 48px) 64px;
  max-width: 920px;
  width: 100%;
  outline: none;
}
.principal h1 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 0 0 4px; }
.principal h2 { font-size: 30px; line-height: 1.2; margin: 0 0 14px; }
.principal h3 { font-size: 20px; margin: 30px 0 8px; padding-top: 6px; scroll-margin-top: calc(var(--topo-h) + 12px); }
.principal h4, .principal h5 { font-size: 16px; margin: 20px 0 6px; }
.principal p { margin: 0 0 14px; }
.principal ul, .principal ol { padding-left: 24px; margin: 0 0 16px; }
.principal li { margin: 3px 0; }
.principal a { color: var(--link); }
.principal code { background: var(--codigo); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.principal pre {
  overflow-x: auto; max-width: 100%;
  margin: 14px 0 18px; padding: 12px 14px;
  background: var(--codigo); border-radius: 8px;
  font-size: 13.5px; line-height: 1.5;
}
.principal pre code { background: none; padding: 0; }
.principal blockquote {
  margin: 14px 0; padding: 10px 14px;
  border-left: 4px solid var(--destaque);
  background: var(--destaque-fraco);
  border-radius: 0 8px 8px 0;
}
.principal blockquote p:last-child { margin-bottom: 0; }
.principal hr { border: 0; border-top: 1px solid var(--linha); margin: 24px 0; }
mark { background: #fde047; color: #111; border-radius: 3px; padding: 0 2px; }

.tabela { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--linha); border-radius: 8px; }
.tabela table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabela th, .tabela td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela th { background: var(--codigo); font-weight: 600; }
.tabela tr:last-child td { border-bottom: 0; }

/* índice da seção (### do capítulo) */
.indice-cap {
  margin: 0 0 24px; padding: 12px 16px;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--painel);
}
.indice-cap strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: 6px; }
.indice-cap ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.indice-cap a { color: var(--link); }

.navegacao {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linha);
}
.navegacao a {
  flex: 1; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px;
  color: var(--texto); text-decoration: none; background: var(--painel);
}
.navegacao a:hover { border-color: var(--destaque); }
.navegacao span { display: block; font-size: 12px; color: var(--suave); }
.navegacao a:last-child { text-align: right; }

/* resultados da busca */
.resultado { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.resultado a { font-weight: 600; color: var(--link); text-decoration: none; }
.resultado small { display: block; color: var(--suave); }
.resumo { color: var(--suave); margin: 0 0 12px; }

.sombra { position: fixed; inset: 0; background: var(--sombra); z-index: 10; }

/* ---- celular ---- */
@media (max-width: 860px) {
  #abrir-menu { display: inline-block; }
  .corpo { grid-template-columns: minmax(0, 1fr); }
  .menu {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 15;
    width: min(86vw, 320px); height: 100vh;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: 4px 0 18px var(--sombra);
  }
  .menu.aberto { transform: none; }
  .principal { padding: 20px 16px 56px; }
  .principal h2 { font-size: 24px; }
  .indice-cap ol { columns: 1; }
  .marca { display: none; }
}
@media (max-width: 480px) {
  .topo { gap: 8px; padding: 0 10px; }
}

@media print {
  .topo, .menu, .navegacao, .indice-cap, .sombra { display: none !important; }
  .corpo { display: block; }
  .principal { max-width: none; padding: 0; }
  body { background: #fff; color: #000; }
}

/* ---- emojis e utilitários ---- */
.emo { font-style: normal; display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.estilo-wrap { position: relative; }
#estilo {
  height: 40px; padding: 0 8px; max-width: 170px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 14px;
  cursor: pointer;
}
#estilo:focus { outline: 2px solid var(--destaque); outline-offset: 0; }
.principal h3 { display: flex; align-items: baseline; gap: 8px; }
.principal h3 .emo { font-size: 1.1em; }
.principal blockquote .emo { margin-right: 4px; }
.menu .grupo .emo { margin-right: 2px; }
.menu a .emo { width: 1.5em; text-align: center; margin-right: 2px; }
.indice-cap li .emo { margin-right: 2px; }
.resultado a .emo { margin-right: 4px; }
@media (max-width: 860px) {
  .busca-wrap { min-width: 0; }
  #estilo { max-width: 124px; padding: 0 4px; font-size: 13px; }
}

/* ---- estilo Pokédex: vermelho, LED azul e tela de LCD ---- */
:root[data-estilo="pokedex"] {
  --fundo: #8e1414;
  --painel: #fff4df;
  --texto: #221414;
  --suave: #6d4b3a;
  --linha: #d6b178;
  --destaque: #d62828;
  --destaque-fraco: #ffd9cf;
  --link: #0d47a1;
  --codigo: #f1e1bd;
  color-scheme: light;
}
:root[data-estilo="pokedex"] body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.08) 0 2px, transparent 3px) 0 0 / 22px 22px,
    linear-gradient(160deg, #b71c1c, #7f0f0f);
}
:root[data-estilo="pokedex"] .topo {
  background: linear-gradient(#e53935, #b71c1c);
  border-bottom: 6px solid #5c0a0a;
  color: #fff;
}
:root[data-estilo="pokedex"] .topo::before {
  content: ""; order: -1; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e3f2fd, #42a5f5 45%, #0d47a1 80%);
  box-shadow: 0 0 0 3px #fff, 0 0 14px #64b5f6;
}
:root[data-estilo="pokedex"] .marca { color: #fff; text-shadow: 1px 1px 0 #5c0a0a; }
:root[data-estilo="pokedex"] .busca-wrap input,
:root[data-estilo="pokedex"] #busca { background: #fff4df; color: #221414; border: 2px solid #5c0a0a; }
:root[data-estilo="pokedex"] .icone,
:root[data-estilo="pokedex"] #estilo { background: #fff4df; color: #221414; border: 2px solid #5c0a0a; }
:root[data-estilo="pokedex"] .menu {
  background: linear-gradient(#a31515, #7a0d0d);
  border-right: 6px solid #5c0a0a;
  color: #fff4df;
}
:root[data-estilo="pokedex"] .menu .grupo { color: #ffd9a0; }
:root[data-estilo="pokedex"] .menu a { color: #fff4df; }
:root[data-estilo="pokedex"] .menu a:hover { background: rgba(255,255,255,.12); }
:root[data-estilo="pokedex"] .menu a[aria-current="page"] {
  background: #fff4df; color: #b71c1c; box-shadow: inset 4px 0 0 #42a5f5;
}
:root[data-estilo="pokedex"] .principal {
  background: var(--painel);
  box-shadow: inset 0 0 0 2px #d6b178;
}
:root[data-estilo="pokedex"] .principal h2 { color: #b71c1c; font-family: "Courier New", Consolas, monospace; letter-spacing: -.01em; }
:root[data-estilo="pokedex"] .principal h1 { color: #6d4b3a; }
:root[data-estilo="pokedex"] .indice-cap {
  background: #dff3d4; border: 2px solid #5e8f3f; color: #1b3d12;
  box-shadow: inset 0 0 0 3px #c9e7b9;
}
:root[data-estilo="pokedex"] .indice-cap strong { color: #3e6b26; }
:root[data-estilo="pokedex"] .indice-cap a { color: #0d47a1; }
:root[data-estilo="pokedex"] .principal blockquote { background: #ffe9b8; border-left-color: #d62828; }
:root[data-estilo="pokedex"] .tabela th { background: #f1d9a6; }
:root[data-estilo="pokedex"] .navegacao a { background: #fff4df; border: 2px solid #d6b178; }
:root[data-estilo="pokedex"] .navegacao a:hover { border-color: #d62828; }
:root[data-estilo="pokedex"] mark { background: #ffe066; }

/* ---- estilo Lab Mewtwo: laboratório roxo, grade e brilho ciano ---- */
:root[data-estilo="mewtwo"] {
  --fundo: #0b0716;
  --painel: #140d26;
  --texto: #ece7ff;
  --suave: #a99ccc;
  --linha: #3a2b5c;
  --destaque: #67e8f9;
  --destaque-fraco: #1d1538;
  --link: #67e8f9;
  --codigo: #1d1538;
  color-scheme: dark;
}
:root[data-estilo="mewtwo"] body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(rgba(124,58,237,.07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(124,58,237,.07) 1px, transparent 1px) 0 0 / 40px 40px,
    #0b0716;
  background-attachment: fixed;
}
:root[data-estilo="mewtwo"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
:root[data-estilo="mewtwo"] .topo {
  background: rgba(20,13,38,.92);
  border-bottom: 1px solid #7c3aed;
  box-shadow: 0 0 18px rgba(124,58,237,.45);
  backdrop-filter: blur(6px);
}
:root[data-estilo="mewtwo"] .marca { color: #67e8f9; text-shadow: 0 0 10px rgba(103,232,249,.7); }
:root[data-estilo="mewtwo"] #busca,
:root[data-estilo="mewtwo"] .icone,
:root[data-estilo="mewtwo"] #estilo { background: #0b0716; border-color: #7c3aed; color: #ece7ff; }
:root[data-estilo="mewtwo"] .menu {
  background: rgba(20,13,38,.94);
  border-right: 1px solid #7c3aed;
  box-shadow: 0 0 22px rgba(124,58,237,.25);
}
:root[data-estilo="mewtwo"] .menu .grupo { color: #c4b5fd; letter-spacing: .14em; }
:root[data-estilo="mewtwo"] .menu a:hover { background: #241a40; }
:root[data-estilo="mewtwo"] .menu a[aria-current="page"] {
  background: #241a40; color: #67e8f9; box-shadow: inset 3px 0 0 #67e8f9, 0 0 12px rgba(103,232,249,.25);
}
:root[data-estilo="mewtwo"] .principal h1 { color: #a78bfa; letter-spacing: .18em; }
:root[data-estilo="mewtwo"] .principal h2 { color: #f5f3ff; text-shadow: 0 0 14px rgba(167,139,250,.55); }
:root[data-estilo="mewtwo"] .principal h3 { color: #c4b5fd; text-shadow: 0 0 10px rgba(167,139,250,.35); }
:root[data-estilo="mewtwo"] .principal blockquote {
  background: rgba(124,58,237,.14); border-left-color: #a78bfa;
  box-shadow: 0 0 14px rgba(124,58,237,.18);
}
:root[data-estilo="mewtwo"] .indice-cap {
  background: rgba(20,13,38,.85); border: 1px solid #7c3aed;
  box-shadow: 0 0 18px rgba(124,58,237,.35);
}
:root[data-estilo="mewtwo"] .indice-cap strong { color: #a78bfa; }
:root[data-estilo="mewtwo"] .tabela { border-color: #3a2b5c; }
:root[data-estilo="mewtwo"] .tabela th { background: #2a1d4d; color: #67e8f9; }
:root[data-estilo="mewtwo"] .navegacao a { background: rgba(20,13,38,.85); border-color: #3a2b5c; }
:root[data-estilo="mewtwo"] .navegacao a:hover { border-color: #67e8f9; box-shadow: 0 0 14px rgba(103,232,249,.25); }
:root[data-estilo="mewtwo"] .resultado a { color: #67e8f9; }
:root[data-estilo="mewtwo"] mark { background: #67e8f9; color: #0b0716; }
:root[data-estilo="mewtwo"] .sombra { background: rgba(7,4,18,.7); }