/* LO AND BEHOLD's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's this
   module's own. The page is gold like every module's; only the panel's own lights keep their colour: the twelve spoke
   windows round SPIN and LIGHT's and BEHOLD's caps, hot white going orange like sparks (the mockup's). */

/* 20 HP at the line's scale */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; overflow-x: clip; }
.panel-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.live .panel-lit { display: none; }

/* the spoke windows: the mockup's lit window (light as alpha), warm under hot, turned to each window's angle */
.p2-spoke { position: absolute; pointer-events: none; }
.p2-spoke > div { position: absolute; inset: 0; background: center / 100% 100% no-repeat; opacity: 0; }

/* LIGHT and BEHOLD: pressed, the cap goes in a little */
.p2-button svg .p2-capg { transition: transform 60ms; transform-origin: 0 0; }
.p2-button.held svg .p2-capg { transform: scale(0.92); }

/* the wheel's readout: the status, the speed's trace, what a control just did */
#trace { display: block; width: 100%; height: 72px; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.2em; }