/* Stationary stage washes, behind the shared StageFeet page. */
body:has(#appView){
  isolation:isolate;
}
body:has(#appView)::before,
body:has(#appView)::after{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:min(1100px,100svh);
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 32% at 0 0,rgba(var(--stage-light-source),.28),transparent 88%),
    conic-gradient(from 90deg at -4% -6%,
      transparent 7deg,
      rgba(var(--stage-light-beam),.045) 14deg,
      rgba(var(--stage-light-beam),.19) 23deg,
      rgba(var(--stage-light-beam),.10) 32deg,
      transparent 43deg),
    conic-gradient(from 90deg at -4% -6%,
      transparent 24deg,
      rgba(var(--stage-light-fill),.04) 34deg,
      rgba(var(--stage-light-fill),.15) 46deg,
      rgba(var(--stage-light-fill),.055) 57deg,
      transparent 70deg);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 0 0,#000 16%,rgba(0,0,0,.75) 46%,transparent 90%);
  mask-image:radial-gradient(ellipse 100% 100% at 0 0,#000 16%,rgba(0,0,0,.75) 46%,transparent 90%);
}
body:has(#appView)::before{
  --stage-light-source:248,221,179;
  --stage-light-beam:241,216,181;
  --stage-light-fill:160,193,235;
}
body:has(#appView)::after{
  --stage-light-source:183,213,250;
  --stage-light-beam:162,198,244;
  --stage-light-fill:199,190,230;
  transform:scaleX(-1);
  opacity:.9;
}
body:has(#appView) .topbar{
  background:
    radial-gradient(ellipse 620px 210px at 0 0,rgba(241,216,181,.10),transparent 82%),
    radial-gradient(ellipse 620px 210px at 100% 0,rgba(162,198,244,.10),transparent 82%),
    #000;
  border-bottom-color:rgba(151,172,199,.24);
}
@media(max-width:760px){
  body:has(#appView)::before,
  body:has(#appView)::after{
    height:min(780px,100svh);
    background-repeat:no-repeat;
  }
}
@media(forced-colors:active){
  body:has(#appView)::before,
  body:has(#appView)::after{display:none}
  body:has(#appView) .topbar{background:Canvas}
}
@media print{
  body:has(#appView)::before,
  body:has(#appView)::after{display:none}
}

/* Recessed lighting rail replaces the old divider. Its beams are decorative. */
body:has(#appView) .topbar{border-bottom:0!important;overflow:visible}
.stage-lighting-bar{
  position:relative;
  height:14px;
  pointer-events:none;
  background:linear-gradient(180deg,#151a20,#07090d 45%,#11161c);
  box-shadow:inset 0 1px rgba(192,207,225,.10),inset 0 -1px rgba(192,207,225,.08);
}
.stage-lighting-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 4px 2px at 3.571% 50%,#f3cb90 15%,#f3cb9099 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 10.714% 50%,#94c9f2 15%,#94c9f299 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 17.857% 50%,#d8a4c7 15%,#d8a4c799 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 25.000% 50%,#98d8ca 15%,#98d8ca99 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 32.143% 50%,#baa8e4 15%,#baa8e499 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 39.286% 50%,#eca99c 15%,#eca99c99 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 46.429% 50%,#a6bdef 15%,#a6bdef99 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 53.571% 50%,#f3cb90 15%,#f3cb9099 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 60.714% 50%,#94c9f2 15%,#94c9f299 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 67.857% 50%,#d8a4c7 15%,#d8a4c799 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 75.000% 50%,#98d8ca 15%,#98d8ca99 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 82.143% 50%,#baa8e4 15%,#baa8e499 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 89.286% 50%,#eca99c 15%,#eca99c99 45%,transparent 100%),
    radial-gradient(ellipse 4px 2px at 96.429% 50%,#a6bdef 15%,#a6bdef99 45%,transparent 100%);
}
.stage-lighting-bar::after{
  content:"";
  position:absolute;
  top:calc(100% - 2px);
  left:0;
  width:100%;
  height:min(500px,65svh);
  background:url("/assets/stage-lighting-beams.svg") center top / 100% 100% no-repeat;
  opacity:.75;
  pointer-events:none;
}
@media(max-width:760px){
  .stage-lighting-bar{height:12px}
  .stage-lighting-bar::after{height:min(340px,48svh);opacity:.65}
}
@media(forced-colors:active),print{
  .stage-lighting-bar{display:none}
}