/* FIREFLIES's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's
   FIREFLIES's own. The page is gold like every module's; only the panel's own lights keep their colour (the
   fireflies' warm yellow-green, and PULSE's tag lit through), and the cables theirs. */

/* 20 HP at the line's scale */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 560px; --panel-max-narrow: 520px; }

/* the panel's layers over the face: the fireflies' windows (screened, so an unlit one is the face's bare FR4) and
   PULSE's lit tag, the knobs and jacks (parts.js), the cables, and the bloom round the light screened over everything
   (js/panel2d.js) */
.panel2d { isolation: isolate; }
.p2-flies, .p2-bloom, .p2-cables, .p2-tag { position: absolute; pointer-events: none; }
.p2-flies { z-index: 1; mix-blend-mode: screen; }
.p2-tag { z-index: 1; opacity: 0; }
.p2 { z-index: 2; }
.p2-cables { z-index: 3; left: 0; top: 0; width: 100%; height: 100%; }
.p2-bloom { z-index: 4; mix-blend-mode: screen; }

/* SCARE, the house button: the same hover as the knobs; the cap sinks while held */
.p2-button .ff-cap { transform: scale(1); transition: transform 60ms; }
.p2-button.held .ff-cap { transform: scale(0.93); }

/* beside the panel: the last eighteen seconds of flashes, a row a firefly */
#scope { display: block; width: 100%; height: 190px; }
.status { min-height: 1.4em; }
.readout { min-height: 1.4em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.4em; }