/* Boulevard of Broken Weights — near-black + cold cyan + amber + alarm red */
html,body{margin:0;padding:0;background:rgb(3,5,9);height:100%;overflow:hidden;
  font-family:"IBM Plex Mono","Courier New",ui-monospace,monospace;color:#9fb8c4}
#stage{position:fixed;inset:0;display:block}
#overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;background:rgba(3,5,9,.94);cursor:pointer;z-index:10;
  transition:opacity .8s}
#overlay.gone{opacity:0;pointer-events:none}
#overlay h1{font-size:clamp(22px,4.4vw,44px);letter-spacing:.3em;font-weight:400;
  color:rgb(86,214,232);text-align:center;margin:0;line-height:1.5}
#overlay .sub{letter-spacing:.2em;font-size:12px;opacity:.6}
#overlay .btn{border:1px solid rgb(40,90,100);padding:12px 38px;letter-spacing:.3em;
  font-size:13px;color:#c8e6ee;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(86,214,232,0)}
  50%{box-shadow:0 0 22px 0 rgba(86,214,232,.25)}}
#overlay .keys{letter-spacing:.15em;font-size:11px;opacity:.35}
#hud{position:fixed;left:14px;top:12px;font-size:11px;letter-spacing:.12em;
  opacity:.4;z-index:5;white-space:pre}
#lyric{position:fixed;left:0;right:0;bottom:8vh;text-align:center;z-index:5;
  font-family:Georgia,serif;font-size:clamp(17px,2.4vw,28px);color:#cfe2ea;
  text-shadow:0 0 12px rgba(0,0,0,.9);pointer-events:none;
  transition:opacity .25s}
body.hidden-ui #hud,body.hidden-ui #lyric{opacity:0}