/* Información legal de Bloopy: una sola página, texto compacto y discreto pero legible
   (13 px, contraste de cuerpo del tema). Plantilla sobre tokens.css; sigue al tema del sistema. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--ap-space-4); }
body {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: clip;
}
/* Texto largo: sin la capa de esferas detrás (tokens.css), fondo liso del tema. */
body:not(.has-wallpaper)::before { content: none; }
main { width: min(820px, 100% - 2 * var(--ap-gutter)); margin: 0 auto; padding: var(--ap-space-4) 0 var(--ap-space-6); }
a { color: var(--ap-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ap-accent); }
:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ap-space-1) var(--ap-space-4);
  padding-bottom: var(--ap-space-2);
  margin-bottom: var(--ap-space-4);
  border-bottom: 1px solid var(--ap-line);
}
header.top > a:first-child { font-weight: var(--ap-weight-title); color: var(--ap-ink); text-decoration: none; }
header.top nav { display: flex; flex-wrap: wrap; gap: 2px var(--ap-space-3); }
header.top nav a { color: var(--ap-ink-2); font-size: 12px; text-decoration: none; padding: 6px 0; }
header.top nav a:hover { color: var(--ap-ink); text-decoration: underline; }

h1 { margin: 0; font-family: var(--ap-font-display); font-size: 18px; font-weight: var(--ap-weight-title); line-height: 1.3; color: var(--ap-ink); }
.revision { margin: 2px 0 var(--ap-space-3); color: var(--ap-muted); font-size: 12px; }

section { padding-top: var(--ap-space-3); margin-top: var(--ap-space-3); border-top: 1px solid var(--ap-line); }
h2 { margin: 0 0 var(--ap-space-1); font-size: 13px; font-weight: var(--ap-weight-strong); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ap-ink); }
p { margin: 0 0 6px; color: var(--ap-ink-2); }
strong { color: var(--ap-ink); font-weight: var(--ap-weight-strong); }
em { font-style: normal; color: var(--ap-ink); }
footer.bottom { margin-top: var(--ap-space-4); padding-top: var(--ap-space-2); border-top: 1px solid var(--ap-line); color: var(--ap-muted); font-size: 12px; }
footer.bottom a { color: var(--ap-ink-2); }