:root {
  --c-sky-top: #8fd6ff;
  --c-sky-bottom: #d8f5ff;
  --c-sand: #ffe9b0;
  --c-tile: #fff6e0;
  --c-tile-border: #f3c14b;
  --c-bar: #ffd84a;
  --c-next: #00d9ff;
  --c-collected: #b6e8a0;
  --c-miku: #34c3d6;
  --c-text: #2a3d4f;
  --c-hud: #ffffffd9;
  --c-lyric-upcoming: #9fb3c4;
  --c-lyric-sung: #2a3d4f;
  --c-lyric-active: #ff5fa2;
  --c-lyric-bg: #2196f34d;
  --c-beat-bg-1: #b8ea86;
  --c-beat-bg-2: #74c244;
  --c-beat-shadow: #56ab2f8c;
  --stage-pad: 2vmin;
  --stage-gap: 1.5vmin;
  --hud-h: 9vmin;
  --beat-h: 9vmin;
  --lyric-h: 10vmin;
  --cols: 6;
  --rows: 4;
  --char-aspect: .83;
  --char-w: calc((100dvh - 2 * var(--stage-pad)) * var(--char-aspect));
  --board-w: min(100vw - var(--char-w)  - var(--stage-gap)  - 2 * var(--stage-pad), (100dvh - var(--hud-h)  - var(--beat-h)  - var(--lyric-h)  - 3 * var(--stage-gap)  - 2 * var(--stage-pad)) * var(--cols) / var(--rows));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  color: var(--c-text);
  height: 100%;
  font-family: system-ui, Segoe UI, sans-serif;
  overflow: hidden;
}

body {
  background: linear-gradient(180deg, var(--c-sky-top), var(--c-sky-bottom) 70%, var(--c-sand));
}
/*# sourceMappingURL=index.6a7eae02.css.map */