@font-face{font-family:'Chakra Petch';src:url('fonts/chakra-petch-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat-latin-wght-normal.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('fonts/familjen-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url('fonts/familjen-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* dna1: green room tubes and one follow spot; dna2: neon timing HUD */
:root{
  --stage:#1c1f1d;
  --sage:#8a958c;
  --tube:#b9cfae;
  --spot:#f4d2b0;
  --curtain:#6b2a3a;
  --sweep:#2ef2d0;
  --perfect:#c6ff3d;
  --miss:#ff4f9a;
  --hud-font:'Chakra Petch', sans-serif;
  --note-font:'Caveat', cursive;
  --caption-font:'Familjen Grotesk', sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--stage);
  color:var(--tube);
  font-family:var(--caption-font);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#frame{position:relative;width:min(100vw, 160vh);aspect-ratio:16 / 10}
#stage{display:block;width:100%;height:100%;background:var(--stage)}
/* dna8: the hard cut between scenes */
#cut{position:absolute;inset:0;background:var(--stage);opacity:0;pointer-events:none}
#cut.on{animation:hard-cut 140ms steps(2, end)}
@keyframes hard-cut{
  from{opacity:1}
  to{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  #cut.on{animation:none}
}
.fontload{position:absolute;left:-9999px;top:0;font-size:12px}
.fontload .hud{font-family:var(--hud-font);font-weight:700}
.fontload .note{font-family:var(--note-font)}
.fontload .cap{font-family:var(--caption-font)}
#live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}