/* The scene paints behind one foreground stacking context. */
body { background:#090c15; isolation:isolate; }
body::before { content:none; }
.scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse 38rem 23rem at 80% 23rem,#3e42664d,transparent 80%),radial-gradient(ellipse 45rem 26rem at 35% 72rem,#4c463747,transparent 80%),url('light-field.svg') center top / 1600px 1600px repeat-y,#090c15; }
.scene-light { position:absolute; border-radius:50%; filter:blur(38px); opacity:.25; }
.scene-light-blue { width:24rem; height:35rem; right:4%; top:9rem; transform:rotate(35deg); background:linear-gradient(160deg,#7393ca,#6b619c 60%,transparent); }
.scene-light-amber { width:40rem; height:9rem; left:2%; top:67rem; transform:rotate(-10deg); background:linear-gradient(90deg,#b58b42,#aaa080,transparent); }
.site-layer { position:relative; z-index:1; }
.key-display { transform:none; isolation:auto; }
.key-display,article,.filters { background:linear-gradient(125deg,#ecf3ff09,#070b1417 55%,#070b1421); backdrop-filter:blur(22px) saturate(105%); -webkit-backdrop-filter:blur(22px) saturate(105%); }
.key-display::before { z-index:0; pointer-events:none; background:linear-gradient(115deg,transparent 11%,#ffffff0a 12%,#ffffff02 32%,transparent 33%); }
.key-display > * { position:relative; z-index:1; }
header { background:#10162230; }
.scene { position:fixed; background-position:center calc(0px - var(--scene-offset, 0px)); }
.scene-light-blue { top:9rem; translate:0 calc(0px - var(--scene-offset, 0px)); }
.scene-light-amber { top:67rem; translate:0 calc(0px - var(--scene-offset, 0px)); }
@media(prefers-reduced-motion:reduce) {
  .scene { background-position:center top; }
  .scene-light { translate:none; }
}