html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

/* Titel und Kategorien im Footer (HTML über dem Canvas, Position setzt sketch.js) */
@font-face {
  font-family: "Akkurat Bold";
  src: url("assets/Akkurat-Bold.ttf") format("truetype");
  font-display: block;
}
/* Ebenen: p5-Canvas < #dust (1) < #vignette (2) < #tint (2, im DOM danach) < Schriftzug/Titel (3) < Hover (4) */
#dust {
  position: fixed;
  z-index: 1;
  pointer-events: none;
}
#titles div {
  position: fixed;
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
  font-family: "Akkurat Bold", sans-serif;
  color: #ffffe0;	/* wie Headline/Tagline (Weiß + 12 % Gelb) */
  opacity: 0;
  transform: translateX(300px);
}
/* Einblenden: von +300 px zur Endposition, Alpha 0 -> 1, Expo ease-out, 400 ms, zweite Zeile 80 ms später */
#titles.in div {
  opacity: 1;
  transform: none;
  transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
}
#titles.in #cats {
  transition-delay: 80ms;
}

/* Hover-Anzeigen (über den Titeln), Position setzt sketch.js */
#vignette {
  position: fixed;
  z-index: 2;
  pointer-events: none;
}
/* Tönung über Staub und Verlauf, unter der Typo: Primärfarbe des aktuellen Bildes (setzt sketch.js), neutrales Grau als Startwert */
#tint {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(128, 128, 128, 0.5);
  mix-blend-mode: overlay;
  transition: background-color 1.2s ease;
}
#thumbPreview, #copyHint {
  position: fixed;
  z-index: 4;
  display: none;
  pointer-events: none;
}
#thumbPreview {
  outline: 1px solid #ffffff;
  outline-offset: -1px;
}
#copyHint {
  box-sizing: border-box;
  height: 24px;
  padding: 0 6px;
  line-height: 25px;
  background: #ffff00;
  border: 0.5px solid rgba(0, 0, 0, 0.5);
  color: #000000;
  font-family: "Akkurat Bold", sans-serif;
  font-size: 12px;
  white-space: nowrap;
}