*,
::before,
::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  overscroll-behavior: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
}

body {
  background: #0d1124;
  color: #f4f6ff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

button:active {
  transform: scale(0.97);
}

.PageTitle {
  max-width: 820px;
  margin: 24px auto 16px;
  padding: 0 10px;
  color: #f4f6ff;
  font-size: 20px;
  font-weight: 500;
}

.PianoPlay {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 10px;
}
.PianoPlay-Stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #12162b;
}
.PianoPlay-Canvas {
  display: block;
  width: 100%;
  touch-action: none;
  cursor: pointer;
}
.PianoPlay-Quit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  border-radius: 999px;
  padding: 5px 14px;
  background: rgba(13, 17, 36, 0.6);
  color: #f4f6ff;
  font-size: 12px;
  font-weight: 500;
}
.PianoPlay-Quit[data-hidden] {
  display: none;
}

.TitleCover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: rgba(13, 17, 36, 0.86);
  text-align: center;
}
.TitleCover[data-hidden] {
  display: none;
}
.TitleCover-Heading {
  color: #9aa3c2;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.TitleCover-Name {
  margin-top: -6px;
  color: #f4f6ff;
  font-size: 24px;
  font-weight: 500;
}
.TitleCover-Label {
  margin-bottom: -6px;
  color: #9aa3c2;
  font-size: 12px;
}
.TitleCover-Start {
  border-radius: 999px;
  padding: 12px 38px;
  background: #ef9f27;
  color: #412402;
  font-size: 16px;
  font-weight: 500;
}
.TitleCover-Example {
  border-radius: 999px;
  padding: 9px 22px;
  color: #f4f6ff;
  font-size: 13px;
  font-weight: 500;
}
.TitleCover-Hint {
  color: #9aa3c2;
  font-size: 12px;
  line-height: 1.7;
}

.SpeedSelect {
  display: flex;
  gap: 8px;
}
.SpeedSelect-Option {
  border-radius: 999px;
  padding: 7px 16px;
  color: #f4f6ff;
  font-size: 13px;
  font-weight: 500;
}
.SpeedSelect-Option[data-selected] {
  background: #378add;
  color: #042c53;
}

.SongSelect {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.SongSelect-Option {
  border-radius: 999px;
  padding: 7px 16px;
  color: #f4f6ff;
  font-size: 13px;
  font-weight: 500;
}
.SongSelect-Option[data-selected] {
  background: #378add;
  color: #042c53;
}

.ResultCover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: rgba(13, 17, 36, 0.86);
  text-align: center;
}
.ResultCover[data-hidden] {
  display: none;
}
.ResultCover-Rank {
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
}
.ResultCover-Message {
  color: #f4f6ff;
  font-size: 14px;
  font-weight: 500;
}
.ResultCover-Score {
  color: #f4f6ff;
  font-size: 21px;
  font-weight: 500;
}
.ResultCover-Count {
  display: flex;
  gap: 14px;
  color: #9aa3c2;
  font-size: 13px;
}
.ResultCover-Combo {
  color: #9aa3c2;
  font-size: 13px;
}
.ResultCover-Retry {
  border-radius: 999px;
  padding: 12px 38px;
  background: #ef9f27;
  color: #412402;
  font-size: 16px;
  font-weight: 500;
}
.ResultCover-Back {
  border-radius: 999px;
  padding: 9px 22px;
  color: #f4f6ff;
  font-size: 13px;
  font-weight: 500;
}

.SongGuide {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 10px 40px;
}
.SongGuide-Heading {
  margin-top: 24px;
  color: #f4f6ff;
  font-size: 16px;
  font-weight: 500;
}
.SongGuide-Text {
  margin-top: 12px;
  color: #9aa3c2;
  font-size: 14px;
  line-height: 1.9;
}

.SongLink {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.SongLink-Item {
  color: #f4f6ff;
  font-size: 14px;
  text-decoration: none;
}