/* ============================================================
   1. SEITE
   Der Blog selbst: eine Spalte, von oben nach unten gelesen.
   ============================================================ */
body{
  margin:0;
  background:#fff;
  color:#111;
  font:16px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.page{max-width:680px;margin:0 auto;padding:8vh 24px}
.page p{margin:0 0 1.6em}


/* ============================================================
   2. FRAME-BASIS
   Gilt für JEDES Experiment. Hier gehört nur hinein, was alle
   Frames gemeinsam haben – nichts Experiment-Spezifisches.
   ============================================================ */
.frame{
  position:relative;
  width:100%;          /* volle Spaltenbreite */
  background:#fff;
  overflow:hidden;     /* nichts ragt aus dem Frame heraus */
  border:0;
}
.frame > canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}


/* ============================================================
   3. EINZELNE FRAMES
   Pro Experiment ein kurzer Block, benannt wie das Modul.
   Meist steht hier nur die Größe – alles Visuelle macht das JS.

   Wird dieser Abschnitt irgendwann unübersichtlich, ziehen wir
   ihn nach frames/<name>.css um. Vorher nicht.
   ============================================================ */

/* marching-ants ------------------------------------------------ */
.frame--marching-ants{
  height:420px;
  /* pan-y = vertikales Scrollen der Seite bleibt auf Touch erhalten,
     horizontale Fingerbewegungen zeichnen. Auf "none" stellen, wenn
     der Frame auf Touch in beide Richtungen zeichnen soll. */
  touch-action:pan-y;
}
@media (max-width:600px){ .frame--marching-ants{ height:300px } }