/* Keep the light behind content and outside the pointer/focus flow. */
body.stage-lighting-active{isolation:isolate}
.stage-lighting{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85}
@media(max-width:700px){.stage-lighting{opacity:.32}}
@media print{.stage-lighting{display:none}}
/* Keep the side margins for visible light beams. */
@media screen and (min-width:1101px){.stage-lighting-active>.wrap{max-width:min(1240px,calc(100% - 340px))}}
@media screen and (min-width:651px) and (max-width:1100px){.stage-lighting-active>.wrap{max-width:min(760px,calc(100% - 96px))}}
@media(max-width:1540px){.stage-lighting-active .site-header{flex-wrap:wrap}}

.lighting-rack{overflow:visible}
/* Keep foreignObject descendants in normal flow: Safari can detach positioned
   or independently composited HTML from the surrounding SVG transform. */
.rack-display{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:7px 12px;height:100%;color:#d8f3a2;font:22px/1.2 var(--mono)}
.rack-display [data-lighting-display]{grid-column:1;grid-row:1}
.rack-display output{grid-column:2;grid-row:1;align-self:start;font-size:16px}
.rack-display small{grid-column:1/-1;grid-row:2;font-size:10px;color:#abc285}
/* Keep nested effect icons independent of the hero's full-width SVG rule. */
.rack-effects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:4px;height:100%}
.rack-effect{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;border:1px solid #617056;border-radius:4px;background:#212822;color:#bdc6b5;font:10px/1 var(--mono);cursor:pointer}
.hero-art .rack-effect svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rack-effect[aria-pressed="true"]{background:#c1dda02b;border-color:var(--green);color:var(--green);box-shadow:inset 0 0 8px #c1dda010}
.rack-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:4px;height:100%}
.rack-pad{min-width:0;border:1px solid rgba(var(--pad-rgb),.5);border-radius:5px;background:linear-gradient(rgba(var(--pad-rgb),.5),rgba(var(--pad-rgb),.5)) center bottom 6px / 14px 2px no-repeat,rgba(var(--pad-rgb),.12);color:#dbe2d5;box-shadow:inset 0 1px 1px #ffffff08;font:14px/1 var(--mono);cursor:pointer}
.rack-pad[aria-pressed="true"]{background:linear-gradient(#10181099,#10181099) center bottom 6px / 14px 2px no-repeat,rgba(var(--pad-rgb),.88);color:#101810;border-color:rgb(var(--pad-rgb));box-shadow:0 0 10px rgba(var(--pad-rgb),.25),inset 0 1px 2px #fff5}
.rack-pad:hover:not(:disabled),.rack-effect:hover:not(:disabled){border-color:#f0eee5}
.rack-pad:focus-visible,.rack-effect:focus-visible{outline:3px solid var(--amber);outline-offset:1px}
.rack-pad:disabled,.rack-effect:disabled{cursor:default;opacity:.45}

.rack-flashes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:4px;height:100%}
.rack-flash{border:1px solid #c3c6bb;border-radius:5px;background:linear-gradient(#f4f2e8,#cccfc3);box-shadow:0 3px 0 #090c0a;color:#283027;font:12px/1 var(--mono);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rack-flash[aria-pressed="true"]{background:#fff;box-shadow:0 0 15px #fff9,inset 0 2px 3px #535c4e}
.rack-flash:focus-visible{outline:3px solid var(--amber);outline-offset:1px}
.rack-flash:disabled{cursor:default;opacity:.45}

.rack-dimmer{display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;padding:4px;color:#c5d2bb;font:11px/1 var(--mono)}
.rack-dimmer input{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:48px;min-height:0;flex:1;margin:3px 0;border:0;padding:0;background:repeating-linear-gradient(to top,#74816c 0 1px,transparent 1px 10%) left center / 8px calc(100% - 22px) no-repeat,repeating-linear-gradient(to top,#74816c 0 1px,transparent 1px 10%) right center / 8px calc(100% - 22px) no-repeat;cursor:ns-resize;touch-action:none}
.rack-dimmer input::-webkit-slider-runnable-track{width:8px;height:100%;border:1px solid #0a0e0b;border-radius:3px;background:#0c110d;box-shadow:inset 2px 0 3px #000b,1px 0 0 #64705b}
.rack-dimmer input::-moz-range-track{width:8px;height:100%;border:1px solid #0a0e0b;border-radius:3px;background:#0c110d;box-shadow:inset 2px 0 3px #000b,1px 0 0 #64705b}
.rack-dimmer input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:34px;height:22px;margin-left:-14px;border:1px solid #101610;border-radius:3px;background:linear-gradient(to bottom,#899183 0%,#515b4d 18%,#30392e 43%,#d9edc0 44%,#d9edc0 54%,#30392e 55%,#434e3e 80%,#20291f 100%);box-shadow:0 3px 4px #0009,inset 0 1px 0 #c7cfbc66;cursor:ns-resize}
.rack-dimmer input::-moz-range-thumb{width:34px;height:22px;border:1px solid #101610;border-radius:3px;background:linear-gradient(to bottom,#899183 0%,#515b4d 18%,#30392e 43%,#d9edc0 44%,#d9edc0 54%,#30392e 55%,#434e3e 80%,#20291f 100%);box-shadow:0 3px 4px #0009,inset 0 1px 0 #c7cfbc66;cursor:ns-resize}
.rack-dimmer input:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.rack-dimmer input:disabled{cursor:default;opacity:.45}