html, body { margin: 0; height: 100%; background: #000; color: #e8e6e1; overflow: hidden;
  font: 15px/1.5 "Share Tech Mono", ui-monospace, monospace; }
canvas#gl { position: fixed; left: 0; top: 0; width: 100vw; height: 56.25vw; display: block; }
body.playing { cursor: none; }
body.playing.moved { cursor: default; }

#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.72), rgba(0,0,0,.92)); }
#overlay.hidden { display: none; }
#overlay .card { text-align: center; padding: 2rem; }
#overlay .pre { letter-spacing: .5em; text-transform: uppercase; opacity: .6; margin: 0 0 1rem; font-size: 12px; }
#overlay h1 { font: 500 clamp(28px, 6vw, 64px)/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 .5rem; }
#overlay .artist { opacity: .75; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; }
#overlay button { margin-top: 2rem; font: inherit; font-size: 16px; letter-spacing: .3em; text-transform: uppercase;
  color: #000; background: #e8e6e1; border: 0; padding: .8em 2em; cursor: pointer; }
#overlay button:hover { background: #fff; }
#overlay .keys { margin-top: 1.5rem; opacity: .45; font-size: 12px; }
#overlay .video { display: inline-block; margin-top: 1rem; color: inherit; opacity: .6; letter-spacing: .2em;
  text-transform: uppercase; font-size: 12px; }
#overlay .video:hover { opacity: 1; }
#overlay .loading { opacity: .6; letter-spacing: .4em; }
#overlay .err { color: #ff8080; white-space: pre-wrap; max-width: 90vw; max-height: 80vh; overflow: auto; font-size: 12px; }

#overlay.list { flex-direction: column; background: #050507; }
#overlay.list h1 { font: 400 64px/1 "Monoton", sans-serif; margin: 0; letter-spacing: .05em; }
#overlay.list .sub { opacity: .5; letter-spacing: .3em; margin: .5rem 0 2rem; }
#overlay.list ul { list-style: none; padding: 0; margin: 0; min-width: min(560px, 90vw); }
#overlay.list li { border-top: 1px solid #222; }
#overlay.list a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem .4rem; color: inherit;
  text-decoration: none; }
#overlay.list a:hover { background: #111; }
#overlay.list a span { opacity: .5; }

#debug { position: fixed; left: 10px; top: 10px; padding: 8px 10px; background: rgba(0,0,0,.6); font-size: 12px;
  line-height: 1.45; pointer-events: none; white-space: pre; }
#debug .bad { color: #ff7070; }
#hud { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
#hud::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: rgba(255,255,255,.35); }
body.playing #hud { opacity: 0; transition: opacity .6s; }
body.playing.moved #hud { opacity: 1; }
#overlay .warm { letter-spacing: .3em; text-transform: uppercase; font-size: 12px; opacity: .7; margin: 1.5rem 0 .8rem; }
#overlay .bar { width: min(60vw, 320px); height: 2px; margin: 0 auto; background: rgba(255,255,255,.15); }
#overlay .bar i { display: block; height: 100%; width: 0; background: #fff; transition: width .1s linear; }
#overlay.warming { background: #000; }
#overlay.warming #go, #overlay.warming .keys, #overlay.warming .video, #overlay.warming br { display: none; }