/* SCREW's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's SCREW's own.
   The page is gold like every module's; only the panel's own lights (the sixteen strobe dots round SCREW, the clock
   light and CHOP's and BACK's caps) keep a colour of their own, a violet. */

/* 14 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: 70.82 / 128.5; --panel-max: 391.5px; --panel-max-narrow: 363.5px; }
.panel-lit { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage.live .panel-lit { display: none; }

/* the strobe dots and the clock light: a lit lens over the face's bare FR4, and a glow screened round it (the art's lit
   window, assets/dot.png, when it's there) */
.p2-dot { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.p2-dot-lens {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fbf6ff 0%, #d9bcff 35%, #a35cff 75%, #7a35d6 100%);
}
.p2-dot-glow {
  position: absolute; inset: -260%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(163, 92, 255, 0.55) 0%, rgba(163, 92, 255, 0.2) 25%, rgba(163, 92, 255, 0) 60%);
}
/* with the art's own picture of a lit window (assets/dot.png, light as alpha): that, over the lens */
.p2-dot-glow.art { background: center / 100% 100% no-repeat; border-radius: 0; mix-blend-mode: normal; }

/* how far behind: the status, the trace, what a control just did */
.behind { display: grid; gap: 0.35rem; }
#trace { display: block; width: 100%; height: 64px; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 6.4em; }