/* CLOAK's page: the shared skin and the shared stage are ../module.css (site/public/module.css); this is only what's
   CLOAK's own. The page is gold like every other; the only colour of its own is the panel's light, the figure lit blue
   from behind (assets/zone<z>.png, screened over the face). */

/* 20 HP, the line's scale; on .stage so the hint under the panel takes the same width */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; }
.panel-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.live .panel-lit { display: none; }

/* the figure behind the panel: each LED's light, screened over the face, as bright as the engine says */
.p2-zone { position: absolute; max-width: none; pointer-events: none; mix-blend-mode: screen; opacity: 0; }
.p2-button { z-index: 1; }

/* the readout: BEHIND's bands, the edge, MOVE */
#scope { display: block; width: 100%; height: 96px; }
.readout {
  text-align: center; min-height: 2.6em; margin-top: 2px;
  font: italic 700 0.74rem/1.3 "Space Mono", ui-monospace, monospace; color: var(--ink);
}
#patch-note { min-height: 7.4em; }