/* THUMP's page: the shared skin is ../module.css (site/public/module.css), which lays out the stage and draws its parts
   as every module page has them; this is only what's THUMP's own: the panel's size, the screen of the last three
   seconds (js/stage.js) and the two figures the engine draws. THUMP is gold, as every page is. */

/* ---------- the stage: the panel (20 HP, 101.3 mm), playable, beside its screen ---------- */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; }
#scope { display: block; width: 100%; aspect-ratio: 16 / 11; }
.readout {
  text-align: center; min-height: 1.4em;
  font: italic 700 0.78rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
#patch-note { min-height: 2.6em; }

/* ---------- the figures the engine draws (js/figures.js) ---------- */
.figure canvas { width: 100%; max-width: 680px; aspect-ratio: 560 / 300; }