:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%;
  overflow: hidden; background: #05071a;
}
html.transparent, body.transparent { background: transparent; color-scheme: normal; }
main { width: 100%; height: 100%; display: grid; place-items: center; }
canvas {
  display: block;
  width: min(100vw, 56.25vh);
  height: min(100vh, 177.7778vw);
  border-radius: 2px;
}
#audio-unlock {
  position: fixed; left: 50%; bottom: 9%;
  transform: translateX(-50%);
  z-index: 4;
  border: 1px solid #ffe3a1;
  background: #171030f2;
  color: #fff8e6;
  padding: 12px 22px;
  border-radius: 26px;
  font: 700 15px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 28px #0009;
}
#audio-unlock[hidden] { display: none; }
#audio-unlock:hover { filter: brightness(1.1); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}