/* WILL NOT STOP's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's
   WILL NOT STOP's own. The page is gold like every module's; only the panel's own lights keep their colour: the eye's
   red, the skin's warm and a hit's white-hot. */

/* 16 HP at the line's scale: the panel's width over its height, and as wide as a 20 HP panel's 560 px would make it */
.stage { --panel-ratio: 80.98 / 128.5; --panel-max: 447.5px; --panel-max-narrow: 415.5px; overflow-x: clip; }

/* the panel's layers over the face: each window's dark and its light (its sprite masking black, then the lit colour),
   the knobs, the button and the jacks (parts.js), the cables (../cables.js), and each window's bloom screened over
   everything (js/panel2d.js sets the levels by opacity) */
.panel2d { isolation: isolate; }
.p2-win { position: absolute; pointer-events: none; opacity: 0; }
.p2-win { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.p2-dark { z-index: 1; background: #000; }
.p2-light { z-index: 1; }
.p2 { z-index: 2; }
.p2-bloom { z-index: 4; mix-blend-mode: screen; }

/* PRESS, the panel's button: the same hover as the knobs; the cap sinks while held */
.p2-button .wn-cap { transform: scale(1); transition: transform 60ms; }
.p2-button.held .wn-cap { transform: scale(0.92); }
.p2-button.held svg { filter: drop-shadow(0 0 0.35em rgba(212, 175, 55, 0.75)); }

/* beside the panel: your steps and its, the skin, your level against its; the last thing that happened; where it is */
#scope { display: block; width: 100%; height: 190px; }
.status { min-height: 1.4em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.4em; }