@font-face {
  font-family: Mono;
  src: url(../../fonts/MartianMono-Medium.woff2);
}
@font-face {
  font-family: Sans;
  src: url(../../fonts/TWKLausanne-350.woff2);
}
@font-face {
  font-family: Pixel;
  src: url(../../fonts/FKRasterGrotesk-Sharp.woff2);
}
:root {
  --pink: #fab3f6;
  --yellow: #fdcf00;
  --red: #fe4702;
  --green: #03e589;
  --gray: #e8e8e8;
  --dim: #8a8a8a;
}
* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  background: #fff;
}
#frame {
  width: 800px;
  height: 500px;
  background: #000;
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  font-family: Sans;
}
#top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  color: #000;
}
#top .who {
  font: 13px Mono;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#top .dots {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
#top .dots i {
  width: 22px;
  height: 6px;
  background: var(--gray);
  display: block;
}
#top .dots i.on {
  background: #000;
}
#stage {
  position: relative;
  overflow: hidden;
}
.beat {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: none;
  flex-direction: column;
  gap: 12px;
}
.beat.on {
  display: flex;
}
.step {
  font: 12px Mono;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.title {
  font: 26px Pixel;
  line-height: 1.1;
}
pre,
.line {
  font: 13.5px / 1.65 Mono;
  white-space: pre-wrap;
}
pre {
  background: #161616;
  padding: 12px 14px;
}
.c {
  color: var(--dim);
}
.bad {
  color: var(--red);
}
.good {
  color: var(--green);
}
.add {
  background: rgba(3, 229, 137, 0.16);
  display: block;
}
.del {
  background: rgba(254, 71, 2, 0.18);
  display: block;
  text-decoration: line-through;
  color: #bbb;
}
.card {
  background: #fff;
  color: #000;
  padding: 14px 16px;
  font: 14px / 1.45 Sans;
}
.card .src {
  font: 11.5px Mono;
  color: #1a7a4c;
}
.card .ttl {
  font: 17px Sans;
  color: #1a0dab;
  margin: 2px 0 6px;
}
.card p {
  margin-bottom: 6px;
}
mark {
  color: inherit;
  background:
    linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 /
    calc(var(--p, 0) * 100%) 100%;
  padding: 0 1px;
}
.tag {
  display: inline-block;
  font: 12px Mono;
  text-transform: uppercase;
  padding: 4px 8px;
  color: #000;
  letter-spacing: 0.04em;
}
.tag.red {
  background: var(--red);
}
.tag.green {
  background: var(--green);
}
.tag.pink {
  background: var(--pink);
}
.bubble {
  background: #fff;
  color: #000;
  padding: 12px 16px;
  font: 15px / 1.5 Sans;
  max-width: 600px;
}
.bubble b {
  font: 11px Mono;
  text-transform: uppercase;
  display: block;
  color: #666;
  margin-bottom: 2px;
  font-weight: normal;
}
#cap {
  background: var(--pink);
  color: #000;
  padding: 14px 22px;
  font: 17px / 1.35 Sans;
  min-height: 68px;
  display: flex;
  align-items: center;
}
.at {
  visibility: hidden;
}
.at.on {
  visibility: visible;
}
.cursor::after {
  content: "▌";
  color: var(--pink);
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
#frame {
  transform-origin: 0 0;
}
#top button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
#top .dots {
  margin-left: auto;
  align-items: center;
}
#top .dots button {
  padding: 8px 0;
}
#top .dots button i {
  width: 22px;
  height: 6px;
  background: var(--gray);
  display: block;
}
#top .dots button.on i {
  background: #000;
}
#top .dots button:hover i {
  background: #777;
}
#top .dots button.cur i {
  background: var(--pink);
  outline: 1.5px solid #000;
}
#top .ctl {
  display: flex;
  gap: 4px;
  margin-left: 14px;
}
#top .ctl button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font: 15px Mono;
  border: 1.5px solid #000;
}
#top .ctl button:hover {
  background: var(--pink);
}
#top .count {
  font: 12px Mono;
  margin-left: 12px;
  min-width: 34px;
  text-align: right;
}
#stage {
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
#hint {
  position: absolute;
  right: 22px;
  bottom: 12px;
  font: 11px Mono;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}