:root {
  --bg: #1e2430;
  --outside: #171c26;
  --tile: #262d3a;
  --tile-hover: #2e3647;
  --text: #e8e6e1;
  --muted: #8a93a3;
  --sage: #9db4a0;
  --sand: #d9c9a8;
  /* Duas famílias: Space Mono Bold nas manchetes e no nome; JetBrains Mono no resto
     (a MS Sans pixelada das barras de título vem do 98.css). */
  --font-head: "Space Mono", monospace;
  --font-name: var(--font-head);
  --font-text: "JetBrains Mono", monospace;
  color-scheme: dark;
  --taskbar-h: 30px;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #232a37 0%, #161b24 55%, #0c0f15 100%) fixed;
  background-color: var(--outside);
  color: var(--text);
  font-family: var(--font-text);
  /* Espaço da barra de tarefas (fixa no rodapé). */
  padding-bottom: var(--taskbar-h);
}

/* Granulação por cima de tudo (estática). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fundo inspirado na tela de título de Metal Gear Solid: curvas de nível, grade tática, névoa, scanlines e brilho.
   Todas as animações usam só transform, que o navegador compõe sem redesenhar a tela. */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg i { position: absolute; display: block; will-change: transform; }

.bg .topo {
  inset: -640px;
  background: url(/assets/topo.svg) 0 0 / 640px 640px;
  animation: drift 240s linear infinite;
}
@keyframes drift { to { transform: translate(640px, 320px); } }

.bg .grid-lines {
  inset: -96px;
  background:
    repeating-linear-gradient(0deg, #9db4a01a 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, #9db4a01a 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, #9db4a00a 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, #9db4a00a 0 1px, transparent 1px 24px);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 75%);
  animation: grid-pan 60s linear infinite;
}
@keyframes grid-pan { to { transform: translate(96px, 96px); } }

.bg .fog {
  inset: -30%;
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, #d9c9a810, transparent 80%),
    radial-gradient(ellipse 35% 40% at 80% 70%, #9bb7d40e, transparent 80%),
    radial-gradient(ellipse 30% 25% at 60% 20%, #9db4a00e, transparent 80%);
  animation: fog 40s ease-in-out infinite alternate;
}
@keyframes fog {
  0% { transform: translate(-6%, -4%) scale(1); }
  50% { transform: translate(5%, 3%) scale(1.15); }
  100% { transform: translate(-3%, 6%) scale(1.05); }
}

.bg .glint {
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 18vw;
  background: linear-gradient(90deg, transparent, #e8e6e10f 45%, #e8e6e126 50%, #e8e6e10f 55%, transparent);
  animation: glint 9s ease-in-out infinite;
}
@keyframes glint {
  0%, 70% { transform: translateX(-30vw) skewX(-18deg); }
  100% { transform: translateX(130vw) skewX(-18deg); }
}

.bg .scan {
  inset: 0;
  will-change: auto;
  background: repeating-linear-gradient(0deg, #00000038 0 1px, transparent 1px 3px);
}
.bg .scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18vh;
  background: linear-gradient(180deg, transparent, #9db4a00f, transparent);
  animation: scanline 7s linear infinite;
  will-change: transform;
}
@keyframes scanline { from { transform: translateY(-18vh); } to { transform: translateY(100vh); } }

/* Celular: menos camadas animadas. */
@media (pointer: coarse) {
  .bg .glint, .bg .fog { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bg i, .bg .scan::after { animation: none; }
  .bg .glint { display: none; }
}

/* Cabeçalho do celular em pé: nome, idioma e links fora do quadrado, legíveis. */
.mhead, .mboard { display: none; }
@media (orientation: portrait) and (max-aspect-ratio: 4/5) {
  .mhead {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex: none;
    padding: 10px 16px;
    font-family: "JetBrains Mono", monospace;
    text-shadow: 0 0 0.3em #000;
  }
  .mhead .title { gap: 12px; }
  .mhead .name { font-size: clamp(22px, 7.5vw, 40px); }
  /* Seletor de idioma com área de toque confortável. */
  .mhead .title .lang { font-size: 20px; }
  .mhead .title .lang summary { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--nav) 40%, transparent); border-radius: 6px; }
  .mhead .title .lang nav { top: calc(100% + 6px); padding: 6px; border-radius: 8px; }
  .mhead .theme nav { right: 0; left: auto; translate: none; }
  .mhead .theme nav button { padding: 10px 18px; font-size: 16px; }
  .mhead .title .lang nav a { padding: 10px 22px; font-size: 20px; border-radius: 6px; }
  .mhead .links { font-size: 14px; gap: 4px 10px; flex-wrap: wrap; justify-content: center; }
  .mhead .stamp { font-size: 11px; }
  body { justify-content: stretch; height: 100svh; }
  .desk { display: none !important; }
  .mboard { display: block; }
}
.mboard { position: relative; flex: 1 1 0; width: 100%; min-height: 0; container-type: size; }

/* Grades desktop: ocupam a tela toda; o <style> da página mostra a da proporção mais próxima. */
.desk { display: none; position: relative; width: 100vw; height: calc(100svh - var(--taskbar-h)); flex: none; container-type: size; }

a { color: inherit; }

/* Home: todos os textos em caixa baixa (barras de título, links, menus, rodapé, popup). */
.home, .home dialog { text-transform: lowercase; }
/* Botões não herdam text-transform por padrão. */
.home button { text-transform: inherit; }

.square {
  position: relative;
  width: min(100vw, 100dvh - var(--taskbar-h));
  height: min(100vw, 100dvh - var(--taskbar-h));
  container-type: size;
  /* Sem fundo próprio: o fundo animado aparece atrás das manchetes. */
  box-shadow: 0 0 0 1px #9db4a026;
}

.board { position: absolute; inset: 0.5cqmin; }
.board > * { position: absolute; }

/* Painéis no estilo Windows 98: o 98.css dá a base (.window, .title-bar, ícones dos botões);
   as cores vêm das variáveis abaixo, uma série por estilo (seletor ao lado de Compartilhar).
   Relevo do Win98 = quatro linhas: --w-hi (luz), --w-light, --w-shadow e --w-dark (sombra). */
:root, [data-theme="light"] {
  --w-face: silver; --w-hi: #fff; --w-light: #dfdfdf; --w-shadow: grey; --w-dark: #0a0a0a;
  --w-bar: linear-gradient(90deg, navy, #1084d0); --w-bar-text: #fff;
  --w-body: #fff; --w-text: #000; --w-hover: navy;
  /* Páginas internas: texto secundário, links e destaque. */
  --w-muted: #555; --w-link: navy; --w-accent: #7a4d00;
  --w-face-text: #222; /* texto direto sobre a moldura (diálogos) */
  --w-nav: #0000ee; --w-nav-visited: #9b00d6; --w-nav-active: #ee0000; /* links clássicos */
  /* Variação de tom do fundo das manchetes: luminosidade + base + --shade (−2…2) × passo. */
  --w-shade-base: -0.05; --w-shade-step: 0.025;
  /* Botões: o ícone do 98.css é preto; nos estilos escuros ele é invertido com filter (e as cores também). */
  --b-face: silver; --b-hi: #fff; --b-light: #dfdfdf; --b-shadow: grey; --b-dark: #0a0a0a; --b-filter: none;
}
/* Prompt do MS-DOS: moldura clássica, miolo preto e manchetes nas cores da paleta, com brilho de CRT. */
[data-theme="dos"] { --w-nav: #4f8cff; --w-nav-visited: #c64bff; --w-nav-active: #ff9e9e; --w-shade-base: 0.06; --w-shade-step: 0.03; --w-body: #000; --w-text: #fff; --w-hover: #fff; --w-muted: #aaa; --w-link: #9db4a0; --w-accent: #d9c9a8; }
/* --c é a cor de cada painel (inline): precisa ser lida no próprio painel, não no <html>. */
[data-theme="dos"] .tile-body:not(:hover) { color: var(--c); }
[data-theme="dos"] .tile-body { text-shadow: 0 0 0.25em color-mix(in srgb, var(--c) 55%, transparent); }
/* Alto contraste (inspirado no esquema do Windows): preto, bordas brancas, barra roxa, link amarelo. */
[data-theme="contrast"] {
  --w-face: #000; --w-hi: #fff; --w-light: #000; --w-shadow: grey; --w-dark: #fff;
  --w-bar: #800080; --w-bar-text: #fff;
  --w-shade-step: 0; /* alto contraste: sem variação */
  --w-face-text: #fff;
  --w-nav: #ff0; --w-nav-visited: #0ff; --w-nav-active: #f00;
  --w-body: #000; --w-text: #fff; --w-hover: #ff0; --w-muted: #c0c0c0; --w-link: #ff0; --w-accent: #0ff;
  /* Valores invertidos: depois do invert(1) viram preto, branco e cinza, com ícone branco. */
  --b-face: #fff; --b-hi: #000; --b-light: #fff; --b-shadow: #7f7f7f; --b-dark: #000; --b-filter: invert(1);
}
/* Noturno: Win98 em cinza-chumbo, miolo no azul-escuro do site. */
[data-theme="night"] {
  --w-face: #3a3f4b; --w-hi: #5b6272; --w-light: #4a5060; --w-shadow: #22262e; --w-dark: #0b0d11;
  --w-bar: linear-gradient(90deg, #0a246a, #3a6ea5); --w-bar-text: #e8e6e1;
  --w-shade-base: 0; --w-shade-step: 0.03; --w-face-text: #e8e6e1;
  --w-nav: #4f8cff; --w-nav-visited: #c64bff; --w-nav-active: #ff9e9e;
  --w-body: #1e2430; --w-text: #e8e6e1; --w-hover: var(--sage); --w-muted: #8a93a3; --w-link: #9db4a0; --w-accent: #d9c9a8;
  /* Inversos de #3a3f4b, #5b6272, #4a5060, #22262e e #0b0d11. */
  --b-face: #c5c0b4; --b-hi: #a49d8d; --b-light: #b5af9f; --b-shadow: #ddd9d1; --b-dark: #f4f2ee; --b-filter: invert(1);
}

/* A borda transparente é o respiro entre as janelas; o relevo 3D é o box-shadow interno. */
.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.25cqmin solid transparent;
  background-clip: padding-box;
  background-color: var(--w-face);
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
}
.tile .title-bar { flex: none; min-width: 0; container-type: inline-size; background: var(--w-bar); }
.tile .title-bar-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 4px; color: var(--w-bar-text); }
.tile .title-bar-controls button,
.tile .title-bar-controls button:not(:disabled):active {
  background-color: var(--b-face);
  filter: var(--b-filter);
}
.tile .title-bar-controls button { box-shadow: inset -1px -1px var(--b-dark), inset 1px 1px var(--b-hi), inset -2px -2px var(--b-shadow), inset 2px 2px var(--b-light); }
.tile .title-bar-controls button:not(:disabled):active { box-shadow: inset -1px -1px var(--b-hi), inset 1px 1px var(--b-dark), inset -2px -2px var(--b-light), inset 2px 2px var(--b-shadow); }
/* Janelas estreitas ficam só com o botão de fechar, para sobrar espaço para o nome do site. */
@container (max-width: 110px) {
  .title-bar-controls button:not(.close) { display: none; }
  .title-bar-controls button.close { margin-left: 0; }
}
.tile-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  gap: 1.2cqmin;
  padding: 1cqmin 1.2cqmin;
  margin-top: 2px;
  /* Área de conteúdo afundada, como a do Bloco de Notas. */
  background: var(--w-body);
  background: oklch(from var(--w-body) calc(l + var(--w-shade-base) + var(--shade, 0) * var(--w-shade-step)) c h);
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
  color: var(--w-text);
  text-decoration: none;
  text-transform: lowercase;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4cqmin;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.tile-body:focus { outline: 1px dotted var(--w-text); outline-offset: -2px; }
.tile-body:hover { color: var(--w-hover); }

.tile.pic-right .tile-body { flex-direction: row-reverse; }
.tile.pic-top .tile-body { flex-direction: column; }
.tile.pic-top .tile-pic { width: 100%; height: auto; max-width: none; max-height: 55%; }
.tile.pic-top .tile-text { height: auto; min-height: 0; }
/* Barra de status genérica (site.js) por cima do espaço vazio embaixo do texto, dentro da área da manchete. */
.tile-body { position: relative; }
.tile-body > .status-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  margin: 0;
  text-transform: lowercase;
  font: 11px "Pixelated MS Sans Serif", Arial, sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
}
.tile .status-bar-field { margin: 0; padding: 2px 4px; box-shadow: inset -1px -1px var(--w-light), inset 1px 1px var(--w-shadow); color: var(--w-face-text); overflow: hidden; white-space: nowrap; }
.tile-text { flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
/* Imagem da matéria (só nas grandes): quadro afundado 4:3, pixels nítidos do pontilhado de 216 cores. */
.tile-pic {
  flex: none;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-width: 42%;
  padding: 2px;
  background: #000;
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
}
.tile-pic img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* Na abertura a imagem chega de cima para baixo, em faixas, como numa conexão discada. */
.intro .tile.done .tile-pic img { animation: dialup 1.8s steps(12) 0.25s both; }
@keyframes dialup { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* O tamanho final vem do site.js (fitText), que cresce a fonte até preencher a caixa. */
.tile-text > span { display: block; overflow-wrap: normal; hyphens: auto; text-align: justify; text-align-last: left; }

.tile.vert .tile-text > span { display: inline-block; height: 100%; writing-mode: vertical-rl; }
.tile.vert.up .tile-text > span { transform: rotate(180deg); }

/* Abertura: janelas escondidas até o site.js abrir cada uma com animação. */
.intro .tile:not(.done) { opacity: 0; }
.tile.closed { visibility: hidden; }

.tile.big .tile-body { font-size: 3.4cqmin; padding: 1.4cqmin 1.6cqmin; }
.tile.feat .tile-body { font-size: 2.9cqmin; padding: 1.2cqmin 1.4cqmin; }

.center {
  text-shadow: 0 0 0.2em #000, 0 0 0.6em #000c;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqmin;
  text-align: center;
}

h1 { margin: 0; font-size: inherit; font-weight: 400; }

.name {
  font-family: var(--font-name);
  font-weight: 700;
  font-size: 4.2cqmin;
  letter-spacing: -0.04em;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}


.links {
  display: flex;
  align-items: center;
  gap: 1.2cqmin;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.8cqmin;
  color: var(--sand);
}
/* Links de navegação old-school: um único gradiente, do roxo de link visitado ao azul de link, atrás de
   todos os links de navegação (e do seletor de idioma). O .navgrad (título + links) pinta o gradiente
   recortado no texto (background-clip: text); os links têm texto transparente e mostram o gradiente, o resto
   (nome, separadores) tem cor própria e o cobre. Sem JS e sem background-attachment: fixed.
   Cores vivas sobre fundo escuro; dentro das janelas, as do estilo. */
:root {
  --nav: #4f8cff; --nav-visited: #c64bff; --nav-active: #ff9e9e;
}
.navgrad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
  /* Interpolado em OKLCH: o meio do caminho fica saturado em vez de acinzentado. */
  background: linear-gradient(90deg in oklch, var(--nav-visited), var(--nav));
  -webkit-background-clip: text;
  background-clip: text;
}
.navgrad :is(.links a, .links .share-btn, .links .theme > summary, .title .lang > summary) {
  color: transparent;
  /* Texto transparente deixaria a sombra aparecer no lugar das letras; o halo vem do filter do .navgrad. */
  text-shadow: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nav-visited) 50%, var(--nav));
  text-underline-offset: 0.15em;
}
.center .navgrad, .mhead .navgrad { filter: drop-shadow(0 0 0.12em #000); }
.navgrad :is(.links a, .links .share-btn):active { color: var(--nav-active); }
.navgrad :is(.links a, .links .share-btn, .links .theme > summary, .title .lang > summary):hover { text-decoration-thickness: 2px; }
/* Itens dos menus abertos têm cor própria (não entram no recorte do gradiente). */
.navgrad .lang nav { color: var(--nav); }
.page .navgrad {
  align-items: flex-start;
  gap: 0;
  /* Nas páginas a linha dos links ocupa só a metade esquerda do bloco: a transição termina ali. */
  background-image: linear-gradient(90deg in oklch, var(--nav-visited), var(--nav) 50%);
}
.links > span { color: var(--muted); }

.title { display: flex; align-items: baseline; justify-content: center; gap: 1.6cqmin; }
.title .lang { font-family: "JetBrains Mono", monospace; font-size: 2cqmin; }
.page .title { justify-content: flex-start; margin-bottom: 1.5cqmin; }
.page h2 { margin: 4cqmin 0 1cqmin; font-size: 1.6cqmin; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sources { columns: 3; margin: 0; padding: 0; list-style: none; font-size: 1.9cqmin; }
.sources li { padding: 0.4cqmin 0; break-inside: avoid; }
.sources span { color: var(--muted); font-size: 0.8em; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang nav {
  position: absolute;
  top: calc(100% + 0.8cqmin);
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0.6cqmin;
  border-radius: 0.8cqmin;
  background: var(--tile-hover);
  box-shadow: 0 1cqmin 3cqmin #0008;
}
.lang nav :is(a, button) { padding: 0.6cqmin 1.6cqmin; border-radius: 0.5cqmin; }
.lang nav :is(a, button):hover { background: var(--tile); }
.lang nav :is(a, button)[aria-current] { color: var(--sage); }
/* Itens do seletor de estilo são botões: sem o visual do 98.css. */
.theme nav button:is(*, :active, :hover) {
  min-width: 0;
  min-height: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}
.theme nav button:hover { background-color: var(--tile); }

.stamp { margin: 0; font-size: 1.3cqmin; color: var(--muted); }
.stamp a { color: var(--sage); }

/* Páginas internas numa janela Win98. As cores do site (--text, --muted…) são trocadas pelas do estilo,
   então as regras de .page abaixo valem para todos os estilos. */
.pagewin {
  position: absolute;
  inset: 1cqmin;
  display: flex;
  flex-direction: column;
  background-color: var(--w-face);
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
  --text: var(--w-text);
  --muted: var(--w-muted);
  --sage: var(--w-link);
  --sand: var(--w-accent);
  --nav: var(--w-nav);
  --nav-visited: var(--w-nav-visited);
  --nav-active: var(--w-nav-active);
}
.pagewin > .title-bar { flex: none; background: var(--w-bar); }
.pagewin .title-bar-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--w-bar-text); }
.pagewin .title-bar-controls button { background-color: var(--b-face); filter: var(--b-filter); box-shadow: inset -1px -1px var(--b-dark), inset 1px 1px var(--b-hi), inset -2px -2px var(--b-shadow), inset 2px 2px var(--b-light); }
.pagewin .page.window-body {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  margin: 2px 0 0;
  background: var(--w-body);
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
  color: var(--w-text);
  text-shadow: none;
  /* A fonte pixelada do 98.css (feita para 11px) fica só na barra de título. */
  font-family: var(--font-text);
  -webkit-font-smoothing: auto;
}
/* Menu de idioma como menu do Windows: cinza em relevo, item ativo em azul. */
.pagewin .lang nav {
  border-radius: 0;
  background: var(--w-face);
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
  color: var(--w-text);
}
.pagewin .lang nav a { border-radius: 0; }
.pagewin .lang nav a:hover { background: navy; color: #fff; }

/* About e interstitial */
.page {
  text-shadow: 0 0 0.2em #000, 0 0 0.5em #000c;
  height: 100%;
  overflow: auto;
  padding: 9cqmin 10cqmin;
  font-size: 2cqmin;
  line-height: 1.6;
}
.page h1 { margin-bottom: 2cqmin; }
.page .links { margin-bottom: 5cqmin; }
.page p { max-width: 62ch; }
.page .small { font-size: 1.8cqmin; color: var(--muted); }
.page a { color: var(--sage); }

.go .go-home { margin: 0 0 5cqmin; }
.go .go-home .name { font-size: 2.4cqmin; color: var(--muted); }
.go .go-home .name:hover { color: var(--text); }
.go h1 { font-family: var(--font-head); font-size: 4cqmin; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.go .source { color: var(--sand); margin: 0; }
/* Imagem da matéria ampliada com pixels nítidos, num quadro afundado. */
.go-pic {
  width: min(100%, 480px);
  aspect-ratio: 4 / 3;
  margin: 3cqmin 0 0;
  padding: 2px;
  background: #000;
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
}
.go-pic img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.go .summary { color: var(--text); }
.go .ad { min-height: 22cqmin; margin: 4cqmin 0; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 0.4cqmin; }
.go .go-now {
  display: inline-block;
  padding: 1.4cqmin 3cqmin;
  border: 1px solid var(--sage);
  border-radius: 0.6cqmin;
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 2.4cqmin;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sage);
}
.go .go-now:hover { background: var(--sage); color: var(--w-body, var(--bg)); }
.go h2 { margin: 5cqmin 0 1cqmin; font-size: 1.6cqmin; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.go .more { margin: 0; padding: 0; list-style: none; font-size: 2cqmin; }
.go .more li { padding: 0.8cqmin 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.go .more a { color: var(--text); text-decoration: none; }

/* Páginas internas no celular: tela inteira com rolagem e tamanhos em px (cqmin ficaria minúsculo). */
@media (max-width: 760px), (max-height: 520px) {
  .square { width: 100%; height: calc(100svh - var(--taskbar-h)); box-shadow: none; }
  .pagewin { inset: 0; }
  .page { padding: 24px 16px 40px; font-size: 15px; }
  .page .title { gap: 12px; margin-bottom: 8px; }
  .page .name { font-size: 26px; }
  .page .title .lang { font-size: 18px; }
  .page .lang summary { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--nav) 40%, transparent); border-radius: 6px; }
  .page .lang nav { top: calc(100% + 6px); padding: 6px; border-radius: 8px; }
  .page .lang nav a { padding: 10px 22px; font-size: 18px; border-radius: 6px; }
  .page .links { gap: 10px; font-size: 15px; margin-bottom: 24px; }
  .page h2 { margin: 28px 0 8px; font-size: 12px; }
  .page .small { font-size: 13px; }
  .sources { columns: 2; font-size: 15px; }
  .sources li { padding: 4px 0; }
  .go .go-home { margin-bottom: 24px; }
  .go .go-home .name { font-size: 16px; }
  .go h1 { font-size: 26px; }
  .go .ad { min-height: 120px; margin: 24px 0; border-radius: 4px; }
  .go .go-now { padding: 12px 20px; font-size: 16px; border-radius: 6px; }
  .go .more { font-size: 15px; }
  .go .more li { padding: 10px 0; }
}
@media (max-width: 420px) { .sources { columns: 1; } }

/* Desfaz o visual de botão do 98.css no link "Compartilhar". */
button.share-btn:is(*, :active, :hover) {
  min-width: 0;
  min-height: 0;
  box-shadow: none;
  font-family: inherit;
  text-shadow: inherit;
}
.share-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.share-btn:hover { color: var(--text); }

/* Compartilhar: janela de diálogo Win98 que segue o estilo escolhido. */
dialog.share {
  width: min(94vw, 520px);
  max-height: 96svh;
  padding: 3px;
  border: 0;
  background-color: var(--w-face);
  box-shadow: inset -1px -1px var(--w-dark), inset 1px 1px var(--w-light), inset -2px -2px var(--w-shadow), inset 2px 2px var(--w-hi);
  color: var(--w-face-text);
  text-shadow: none;
}
dialog.share::backdrop { background: #0008; }
.share .title-bar { background: var(--w-bar); }
.share .title-bar-text { color: var(--w-bar-text); }
.share .window-body { margin: 8px; }
/* Botões Win98 nas cores do estilo (o filter inverte texto e ícone nos estilos escuros). */
.share button, .share .btn98 {
  background-color: var(--b-face);
  box-shadow: inset -1px -1px var(--b-dark), inset 1px 1px var(--b-hi), inset -2px -2px var(--b-shadow), inset 2px 2px var(--b-light);
  filter: var(--b-filter);
}
.share button:not(:disabled):active, .share button[aria-pressed="true"], .share .btn98:active {
  box-shadow: inset -1px -1px var(--b-hi), inset 1px 1px var(--b-dark), inset -2px -2px var(--b-light), inset 2px 2px var(--b-shadow);
}
.share button[aria-pressed="true"] { font-weight: 700; }
.share .btn98 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  color: #222;
  font: 11px "Pixelated MS Sans Serif", Arial, sans-serif;
  -webkit-font-smoothing: none;
  text-decoration: none;
}
.share-preview {
  position: relative;
  height: min(50svh, 400px);
  max-width: 100%;
  margin: 0 auto;
  background: var(--w-body);
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow), inset -2px -2px var(--w-light), inset 2px 2px var(--w-dark);
  padding: 2px;
}
.share-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.share-wait, .share-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px;
  color: var(--w-text);
  text-align: center;
}
.share-wait p { margin: 0; }
.share-preview.busy .share-wait { display: flex; }
.share-error:not([hidden]) { display: flex; }
.share-wait .progress-indicator { width: min(220px, 80%); height: 20px; padding: 3px; }
/* Progresso indeterminado: os blocos azuis enchem e recomeçam. */
.share-wait .progress-indicator-bar { width: 0; animation: fill 1.6s steps(12) infinite; }
@keyframes fill { to { width: 100%; } }
.share-formats, .share-actions, .share-nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.share-formats { justify-content: center; }

/* Rodapé: barra de tarefas do Windows 98, com a bandeja (edição, selo e relógio) à direita. */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: var(--taskbar-h);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 4px;
  padding: 3px 2px 2px;
  background: var(--w-face);
  box-shadow: inset 0 1px var(--w-light), inset 0 2px var(--w-hi);
  color: var(--w-face-text);
  font: 11px "Pixelated MS Sans Serif", Arial, sans-serif;
  -webkit-font-smoothing: none;
  text-shadow: none;
}
.tray {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 10px;
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow);
  white-space: nowrap;
}
/* Edição à esquerda, num campo afundado como a bandeja. */
.task-edition {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  box-shadow: inset -1px -1px var(--w-hi), inset 1px 1px var(--w-shadow);
  white-space: nowrap;
  overflow: hidden;
}
.task-edition .sep { color: var(--w-shadow); }
.tray { margin-left: auto; }
/* Dois pontos do relógio piscando (o site.js alterna a classe a cada segundo); visibility mantém a largura. */
.colon-off .tray-clock .colon { visibility: hidden; }

/* Modo print (?shot=LxA, popup e og:image): só a grade quadrada, sem animações, com nome, data e endereço
   nas sobras do retângulo. */
.brand { display: none; }
.shot .bg i, .shot .bg .scan::after { animation: none; }
.shot .bg .glint, .shot .bg .scan::after, .shot .share-btn, .shot .links, .shot dialog { display: none !important; }
.shot .mhead, .shot .mboard, .shot .taskbar { display: none !important; }
.shot body { justify-content: center !important; height: auto !important; padding-bottom: 0; }
.shot .desk { display: none !important; }
.shot .desk[data-b="0"] { display: block !important; width: min(100vw, 100vh) !important; height: min(100vw, 100vh) !important; box-shadow: 0 0 0 1px #9db4a026; }
.shot .brand {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  font-family: var(--font-head);
  color: #e8e6e1;
  text-shadow: 0 0 0.3em #000;
  text-align: center;
}
.shot .brand b { font-weight: 700; letter-spacing: -0.04em; }
.shot .brand small { color: #9db4a0; font-size: 0.45em; }
@media (min-aspect-ratio: 21/20) {
  .shot .brand { top: 0; bottom: 0; width: calc((100vw - 100vh) / 2); writing-mode: vertical-rl; font-size: 5.2vh; }
  .shot .brand.a { left: 0; transform: rotate(180deg); }
  .shot .brand.b { right: 0; }
}
@media (max-aspect-ratio: 20/21) {
  .shot .brand { left: 0; right: 0; height: calc((100vh - 100vw) / 2); flex-direction: column; font-size: 9vw; }
  .shot .brand.a { top: 0; }
  .shot .brand.b { bottom: 0; font-size: 6vw; }
}
@media (max-aspect-ratio: 21/20) and (min-aspect-ratio: 20/21) { .shot .brand { display: none; } }