html, body { margin: 0; background: #030705; }
html { overflow: hidden; }
body { overflow-x: hidden; }
.blr { min-height: 0; border: 0; }
.blr__top, .blr__footer, .blr__scribble { display: none; }
.blr__intro { margin: 0; padding: 26px 12px 0; }
.blr__headline { font-size: clamp(30px, 7cqw, 74px); letter-spacing: -1.5px; }
.blr__intro > p { font-size: 12px; letter-spacing: 3px; }
.blr__stage { height: 345px; }
.blr__item { width: 288px; height: 320px; }
.blr__bottom { display: flex; flex-direction: column; gap: 15px; padding: 8px 5% 22px; }
.blr__selection { order: 0; width: 100%; }
.blr__result { padding: 14px 20px; }
.blr__result-name { font-size: 30px; }
.blr__price { font-size: 34px; }
.blr__description { font-size: 16px; }
.blr__dots { max-width: none; margin: 12px auto 0; }
.blr__dot { width: 25px; height: 28px; }
.blr__hint { margin: 2px 0 21px; }
.blr__hint small { top: 35px; }
.blr__random-area { order: 1; margin: 0; display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 0 12px; max-width: 380px; width: 100%; align-self: center; }
.blr__splash { width: 100px; height: 65px; font-size: 19px; }
.blr__random { min-height: 57px; font-size: 17px; }
.blr__random-note { grid-column: 1 / -1; min-height: 0; margin: 5px 0 0; }
.blr__motto { display: none; }
.blr__stats { order: 2; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.blr__stat { min-height: 52px; padding: 7px; gap: 5px; }
.blr__stat svg { width: 20px; height: 30px; }
.blr__stat strong { font-size: 14px; }
.blr__stat small { font-size: 10px; letter-spacing: 0; }
@media (min-width: 900px) {
  .blr__stage { height: 400px; }
  .blr__item { width: 337px; height: 375px; }
  .blr__bottom { max-width: 820px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .blr__intro { padding-top: 24px; }
  .blr__headline { font-size: 8cqw; }
  .blr__intro > p { font-size: 11px; letter-spacing: 2px; }
  .blr__stage { height: 315px; }
  .blr__item { width: 270px; height: 300px; }
  .blr__result-name { font-size: 28px; }
  .blr__result { padding: 14px 17px; }
  .blr__result-meta { font-size: 15px; }
  .blr__price { font-size: 30px; }
  .blr__dots { max-width: 270px; }
  .blr__dot { width: 25px; height: 30px; }
  .blr__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blr__stat { padding: 9px 12px; gap: 8px; }
  .blr__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Extend only the scenery into the space reserved for the playlist. */
@media (max-width: 720px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .blr { overflow: visible; }
  .blr::before, .blr::after { bottom: calc(-88px - env(safe-area-inset-bottom, 0px)); }
}

/* Match the scale of the site's section headings. */
.blr .blr__headline{font-size:clamp(36px,4.4vw,66px);line-height:1.05;letter-spacing:.015em}