/* ALERT's page: the shared skin is ../module.css (site/public/module.css), the stage's layout and controls included,
   and the knobs and jacks are ../../parts.js's. This is only what ALERT's stage adds: the screen's light over the face
   and its bloom, the readout of the knob being turned, and a little spacing. The page is gold like every page; only the
   screen keeps its own colours. */

/* the panel's scale (20 HP, module.css's defaults): its width over its height, and its widest */
.panel2d { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; isolation: isolate; }

/* the screen's light over its dark windows (screen: black adds nothing), and its bloom, 0.6 strong as the mockup's */
.screen-light, .screen-bloom { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.screen-bloom { filter: blur(11px); opacity: 0.6; }
.p2 { z-index: 1; }

/* the phase in the status line, and the knob being turned */
.status .ph { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
#patch-note { min-height: 7.2em; }
.readout {
  min-height: 2.7em;
  font: italic 700 0.78rem/1.35 "Space Mono", ui-monospace, monospace; color: var(--ink);
}

/* Inside: the words under the model */
#inside .prose { margin-top: 1.4rem; }