/* ==========================================================================
   Phone frames and the mock app screens inside them.

   Every screen is real HTML/CSS with fictional artists, albums and generated
   cover art, so nothing on the site is a photograph of copyrighted material.

   The screens are drawn to the app's own SwiftUI specs (MusicRater repo:
   AppBrand, AlbumHeader2View, RatingPopupView, PublicAlbumDetailView,
   MonthlyReviewView, LibraryView, SearchView). Sizes are written in points
   through --pt, which is one iPhone point (393pt wide screen) expressed in
   container-query width units, so a screen scales with its phone.
   ========================================================================== */

/* -------------------------------------------------------------- phone ---- */

.phone {
  position: relative;
  width: var(--phone-w, 300px);
  flex-shrink: 0;
  border-radius: calc(var(--phone-w, 300px) * 0.165);
  padding: calc(var(--phone-w, 300px) * 0.026);
  background: linear-gradient(160deg, #3a3a46, #15151c 40%, #23232d 70%, #0d0d12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 calc(var(--phone-w, 300px) * 0.008) #050508,
    0 0 0 calc(var(--phone-w, 300px) * 0.012) rgba(255, 255, 255, 0.06), var(--shadow-float),
    0 0 120px var(--phone-glow, rgba(123, 110, 255, 0.18));
  transform-style: preserve-3d;
}

.phone::before {
  content: "";
  position: absolute;
  left: -2.5%;
  top: 18%;
  width: 1.2%;
  height: 10%;
  border-radius: 2px;
  background: #1d1d25;
  box-shadow: 0 16% 0 0 #1d1d25, 0 34% 0 0 #1d1d25;
}

.phone::after {
  content: "";
  position: absolute;
  right: -2.5%;
  top: 24%;
  width: 1.2%;
  height: 14%;
  border-radius: 2px;
  background: #1d1d25;
}

.phone__screen {
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: calc(var(--phone-w, 300px) * 0.14);
  background: #111115;
  container-type: inline-size;
  transform: translateZ(0);
}

.phone__island {
  position: absolute;
  top: 1.3%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 4.3%;
  border-radius: 999px;
  background: #000;
  z-index: 8;
}

.phone__status {
  position: absolute;
  top: 1.9%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 9% 0 10%;
  font-family: var(--app-font);
  font-size: 4.3cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  z-index: 7;
  pointer-events: none;
}

.phone__status-right {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}

.phone__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.6cqw;
  height: 2.8cqw;
}

.phone__bars i {
  display: block;
  width: 1.1cqw;
  background: currentColor;
  border-radius: 1px;
}

.phone__battery {
  width: 7cqw;
  height: 3.4cqw;
  border-radius: 1.1cqw;
  border: 0.4cqw solid rgba(255, 255, 255, 0.45);
  padding: 0.45cqw;
}

.phone__battery::after {
  content: "";
  display: block;
  width: 80%;
  height: 100%;
  border-radius: 0.5cqw;
  background: #fff;
}

.phone__home {
  position: absolute;
  bottom: 0.9%;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 0.6%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 8;
}

.phone__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 48%);
  pointer-events: none;
  z-index: 9;
}

/* ------------------------------------------------------ app tokens ---- */

.mock {
  /* One iPhone point. 100cqw / 393. */
  --pt: 0.25445cqw;

  /* AppBrand adaptive neutrals, dark. */
  --app-bg: #111115;
  --app-card: #1c1c22;
  --app-card-2: #26262d;
  --app-border: rgba(255, 255, 255, 0.1);
  --app-label: #ffffff;
  --app-label-2: rgba(235, 235, 245, 0.6);
  --app-label-3: rgba(235, 235, 245, 0.3);
  --app-text-2: #a9a7be;
  --app-accent: #7b6eff;
  --app-accent-muted: #9b93ff;
  --app-accent-soft: #c4bfff;
  --app-pink: #ff375f;
  --app-orange: #ff9f0a;
  --app-teal: #40cbe0;
  --app-blue: #0a84ff;
  --app-green: #30d158;

  position: absolute;
  inset: 0;
  font-family: var(--app-font);
  font-size: calc(17 * var(--pt));
  line-height: 1.25;
  color: var(--app-label);
  background: var(--app-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.phone,
.mock {
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --app-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mock svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  flex-shrink: 0;
}

.mock__scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Rating badge: 44×36, radius 8, caption bold white on the rating colour. */
.rb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--pt));
  height: calc(36 * var(--pt));
  border-radius: calc(8 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  color: #fff;
  background: var(--rc, var(--score-6));
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.rb--0 { --rc: var(--score-0); }
.rb--1 { --rc: var(--score-1); }
.rb--2 { --rc: var(--score-2); }
.rb--3 { --rc: var(--score-3); }
.rb--4 { --rc: var(--score-4); }
.rb--5 { --rc: var(--score-5); }
.rb--6 { --rc: var(--score-6); }
.rb--7 { --rc: var(--score-7); }

.rt--0 { color: var(--score-0); }
.rt--1 { color: var(--score-1); }
.rt--2 { color: var(--score-2); }
.rt--3 { color: var(--score-3); }
.rt--4 { color: var(--score-4); }
.rt--5 { color: var(--score-5); }
.rt--6 { color: var(--score-6); }
.rt--7 { color: var(--score-7); }

/* Rounded numerals, the app's signature. */
.rn {
  font-family: var(--app-rounded);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Card recipe: cardBackground + 1px subtle border, radius 20. */
.mcard {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: calc(20 * var(--pt));
}

/* Capsule chip on secondaryCardBackground. */
.mchip {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  padding: calc(5 * var(--pt)) calc(10 * var(--pt));
  border-radius: 999px;
  background: var(--app-card-2);
  border: 1px solid var(--app-border);
  font-size: calc(12 * var(--pt));
  color: var(--app-label-2);
  white-space: nowrap;
}

.mchip svg {
  font-size: calc(11 * var(--pt));
}

.mchip--strong {
  color: var(--app-label);
  font-weight: 600;
}

.mchip--fav {
  color: var(--app-pink);
  font-weight: 700;
  background: rgba(255, 55, 95, 0.16);
  border-color: rgba(255, 55, 95, 0.44);
  padding: calc(7 * var(--pt)) calc(12 * var(--pt));
}

.mchip--accent {
  color: var(--app-accent);
  font-weight: 700;
  background: rgba(123, 110, 255, 0.12);
  border-color: transparent;
}

.mchip--accent-on {
  color: #fff;
  font-weight: 700;
  background: var(--app-accent);
  border-color: transparent;
}

/* Section header inside a card: 16pt bold. */
.msec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: calc(16 * var(--pt));
  font-weight: 700;
}

/* ---------------------------------------------------- generated covers ---- */

.art {
  position: relative;
  overflow: hidden;
  background: #23232f;
  isolation: isolate;
}

.art::before,
.art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.art::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: overlay;
}

.art--1 {
  background: radial-gradient(120% 90% at 20% 10%, #ff6b8a 0%, transparent 55%),
    radial-gradient(90% 90% at 90% 90%, #7b6eff 0%, transparent 60%),
    linear-gradient(160deg, #1b1032, #3a1c5c 50%, #0b0b14);
}
.art--1::before {
  background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.92) 0 9%, transparent 9.5%),
    radial-gradient(circle at 50% 62%, transparent 0 15%, rgba(255, 255, 255, 0.18) 15.5% 16.5%, transparent 17%);
}

.art--2 {
  background: linear-gradient(135deg, #f7d774 0%, #d98a2e 45%, #4a2a10 100%);
}
.art--2::before {
  background: linear-gradient(90deg, transparent 0 46%, rgba(20, 8, 0, 0.55) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 0 46%, rgba(20, 8, 0, 0.55) 46% 54%, transparent 54%);
}

.art--3 {
  background: radial-gradient(110% 80% at 80% 20%, #2ad3c6 0%, transparent 55%), linear-gradient(200deg, #0a2a35, #04131a 70%);
}
.art--3::before {
  background: repeating-linear-gradient(180deg, transparent 0 11%, rgba(255, 255, 255, 0.12) 11% 12.5%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 80%);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 80%);
}

.art--4 {
  background: conic-gradient(from 210deg at 50% 50%, #ffb347, #ff5e7e, #7b6eff, #ffb347);
}
.art--4::before {
  background: radial-gradient(circle at 50% 50%, #0d0d14 0 34%, transparent 35%);
}

.art--5 {
  background: linear-gradient(180deg, #e9e6ef 0%, #b8b4c9 100%);
}
.art--5::before {
  background: radial-gradient(circle at 30% 70%, #111118 0 26%, transparent 27%),
    radial-gradient(circle at 72% 32%, #7b6eff 0 12%, transparent 13%);
}

.art--6 {
  background: radial-gradient(80% 60% at 50% 100%, #3b82f6 0%, transparent 70%), linear-gradient(180deg, #05060d, #10163a);
}
.art--6::before {
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.9) 0 1.5%, transparent 2%),
    radial-gradient(circle at 20% 55%, rgba(255, 255, 255, 0.7) 0 1%, transparent 1.5%),
    radial-gradient(circle at 78% 48%, rgba(255, 255, 255, 0.8) 0 1.2%, transparent 1.7%),
    radial-gradient(circle at 64% 18%, rgba(255, 255, 255, 0.6) 0 0.8%, transparent 1.3%);
}

.art--7 {
  background: linear-gradient(135deg, #ff4d4d 0%, #9b1c3a 60%, #2a0a14 100%);
}
.art--7::before {
  background: linear-gradient(45deg, transparent 0 50%, rgba(0, 0, 0, 0.35) 50%);
}

.art--8 {
  background: radial-gradient(circle at 50% 50%, #1b1b22 0 20%, #22c55e 21% 22%, #1b1b22 23% 36%, #a3e635 37% 38%, #1b1b22 39% 52%, #eab308 53% 54%, #1b1b22 55%);
}

.art--9 {
  background: linear-gradient(160deg, #fdf0e2, #f1c9a8 50%, #d98f6a);
}
.art--9::before {
  background: radial-gradient(circle at 50% 50%, #c2543b 0 28%, transparent 29%);
}

.art--10 {
  background: linear-gradient(180deg, #0f0f16 0 50%, #7b6eff 50%);
}
.art--10::before {
  background: radial-gradient(circle at 50% 50%, #f5c96a 0 18%, transparent 19%);
}

.art--11 {
  background: radial-gradient(100% 100% at 0% 0%, #ff8fb1 0%, transparent 60%),
    radial-gradient(100% 100% at 100% 100%, #ffd166 0%, transparent 60%), #2b1a2f;
}

.art--12 {
  background: repeating-linear-gradient(45deg, #101018 0 8%, #2a2a3a 8% 16%);
}
.art--12::before {
  background: radial-gradient(circle at 50% 50%, #22c55e 0 22%, transparent 23%);
}

/* ---------------------------------------------------------- tab bar ---- */

/* iOS 26 floating glass tab bar: Home, Library, Stats, Social, then the
   system search tab, which the app tints. Selected tab sits in a filled
   accent bubble with the .fill glyph. */
.mtab {
  position: absolute;
  left: calc(20 * var(--pt));
  right: calc(20 * var(--pt));
  bottom: calc(24 * var(--pt));
  height: calc(62 * var(--pt));
  border-radius: 999px;
  background: rgba(36, 36, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(8 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(6 * var(--pt));
  z-index: 6;
}

.mtab__item {
  width: calc(50 * var(--pt));
  height: calc(50 * var(--pt));
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(235, 235, 245, 0.7);
  font-size: calc(24 * var(--pt));
}

.mtab__item.is-active {
  background: var(--app-accent);
  color: #fff;
  box-shadow: 0 calc(6 * var(--pt)) calc(16 * var(--pt)) rgba(123, 110, 255, 0.45);
}

.mfade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, var(--app-bg) 75%);
  pointer-events: none;
  z-index: 5;
}

/* Glass toolbar circles (iOS 26) used by the album screen. */
.mglass {
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(40, 40, 52, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 calc(4 * var(--pt)) calc(12 * var(--pt)) rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: calc(20 * var(--pt));
  color: #fff;
}

.mtoolbar {
  position: absolute;
  top: calc(56 * var(--pt));
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  display: flex;
  justify-content: space-between;
  z-index: 6;
}

.mtoolbar__group {
  display: flex;
  gap: calc(8 * var(--pt));
}

/* ------------------------------------------------------- album page ---- */

/* AlbumArtworkWallBackground: the cover is a 393pt square whose top edge
   sits 77pt below the top of the screen; mirrored, blurred copies fill the
   band above and the space below so the seam never shows. */
.mwall {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(560 * var(--pt));
  overflow: hidden;
}

.mwall__art {
  position: absolute;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
}

.mwall__art--main {
  top: calc(77 * var(--pt));
  z-index: 2;
}

.mwall__art--top {
  top: calc(77 * var(--pt));
  transform: scaleY(-1);
  transform-origin: top;
  filter: blur(6px);
  opacity: 0.9;
}

.mwall__art--bottom {
  top: calc(470 * var(--pt));
  transform: scaleY(-1);
  filter: blur(8px);
  opacity: 0.85;
}

.mwall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(17, 17, 21, 0.55), transparent 22%, transparent 60%, rgba(17, 17, 21, 0.35) 78%, var(--app-bg) 100%);
}

.malbum__content {
  position: absolute;
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  top: calc(393 * var(--pt));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--pt));
  z-index: 4;
}

/* Card 1: title + artist + chips | rating */
.mhead {
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
}

.mhead__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
}

.mhead__title {
  font-size: calc(20 * var(--pt));
  font-weight: 700;
  line-height: 1.2;
}

.mhead__artist {
  font-size: calc(15 * var(--pt));
  color: var(--app-label-2);
  margin-top: calc(6 * var(--pt));
}

.mhead__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--pt));
  flex-shrink: 0;
}

.mhead__score {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  font-size: calc(20 * var(--pt));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mhead__score svg {
  font-size: calc(12 * var(--pt));
}

.mhead__sub {
  font-size: calc(11 * var(--pt));
  color: var(--app-label-2);
}

.mhead__avg {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--pt));
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  color: var(--app-label-2);
  margin-top: calc(2 * var(--pt));
}

.mhead__avg svg {
  font-size: calc(9 * var(--pt));
}

.mhead__chips {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
}

.mhead__chips .mchip--fav {
  margin-left: auto;
}

/* Row: first listen | favourite song, two capsules on cardBackground. */
.mrow2 {
  display: flex;
  gap: calc(8 * var(--pt));
}

.mrow2 .mchip {
  flex: 1;
  justify-content: center;
  background: var(--app-card);
  padding: calc(8 * var(--pt)) calc(12 * var(--pt));
  min-width: 0;
}

.mrow2 .mchip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vibes card: top-three average vibes as chips. */
.mvibes {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  padding: calc(12 * var(--pt)) calc(14 * var(--pt));
}

.mvibes .mchip {
  font-weight: 700;
  padding: calc(5 * var(--pt)) calc(9 * var(--pt));
}

.mvibes__label {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  font-size: calc(11 * var(--pt));
  font-weight: 700;
  color: var(--app-label-3);
}

.tint-mood { color: var(--app-pink); }
.tint-energy { color: var(--app-orange); }
.tint-palette { color: var(--app-teal); }

/* Review card. */
.mreview {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
}

.mreview > svg {
  font-size: calc(20 * var(--pt));
  color: var(--app-label-3);
}

.mreview__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--pt));
}

.mreview__title {
  font-size: calc(15 * var(--pt));
  font-weight: 600;
}

.mreview__sub {
  font-size: calc(12 * var(--pt));
  color: var(--app-label-3);
}

.mreview__chev {
  font-size: calc(12 * var(--pt));
  color: var(--app-label-3);
}

/* Tracklist card. */
.mtracks {
  padding-top: calc(14 * var(--pt));
}

.mtracks .msec {
  padding: 0 calc(16 * var(--pt)) calc(4 * var(--pt));
}

.mtrack {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt));
  position: relative;
}

.mtrack + .mtrack::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(56 * var(--pt));
  right: 0;
  height: 1px;
  background: var(--app-border);
}

.mtrack__n {
  width: calc(24 * var(--pt));
  text-align: center;
  font-size: calc(15 * var(--pt));
  color: var(--app-label-3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mtrack__n svg {
  color: var(--app-pink);
  font-size: calc(15 * var(--pt));
}

.mtrack__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--pt));
}

.mtrack__name {
  font-size: calc(17 * var(--pt));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtrack__len {
  font-size: calc(12 * var(--pt));
  color: var(--app-label-3);
}

/* Compare variant (PublicAlbumDetailView): number 34pt wide caption, two
   badges, 11pt vertical padding. */
.mtrack--cmp {
  padding-block: calc(11 * var(--pt));
}

.mtrack--cmp .mtrack__n {
  width: calc(34 * var(--pt));
  text-align: right;
  font-size: calc(12 * var(--pt));
  font-weight: 500;
}

.mtrack--cmp .mtrack__name {
  font-size: calc(15 * var(--pt));
  font-weight: 500;
}

.mtrack--cmp .mtrack__len {
  font-size: calc(11 * var(--pt));
  color: var(--app-label-2);
}

.mcmp__cells {
  display: flex;
  gap: calc(6 * var(--pt));
}

.mcmp__head {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pt));
  padding: 0 calc(16 * var(--pt)) calc(10 * var(--pt));
}

.mcmp__avatars {
  display: flex;
  justify-content: flex-end;
  gap: calc(6 * var(--pt));
}

.mcmp__avatars .mavatar {
  width: calc(44 * var(--pt));
  display: flex;
  justify-content: center;
}

.mcmp__album {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(15 * var(--pt));
  font-weight: 600;
}

.mavatar i {
  display: grid;
  place-items: center;
  width: calc(22 * var(--pt));
  height: calc(22 * var(--pt));
  border-radius: 999px;
  font-style: normal;
  font-size: calc(9 * var(--pt));
  font-weight: 700;
  color: #fff;
  background: var(--av, var(--app-accent));
}

.mtracks__count {
  font-size: calc(12 * var(--pt));
  font-weight: 600;
  color: var(--app-text-2);
}

/* -------------------------------------------------------- rate sheet ---- */

.mrate {
  background: #0b0b0f;
}

.mrate__behind {
  position: absolute;
  inset: 0;
  transform: scale(0.94);
  transform-origin: top center;
  border-radius: calc(40 * var(--pt));
  overflow: hidden;
  filter: brightness(0.45);
}

.msheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 470pt detent plus the 34pt home-indicator inset it sits above. */
  height: calc(504 * var(--pt));
  background: #1c1c1e;
  border-radius: calc(40 * var(--pt)) calc(40 * var(--pt)) 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 calc(-10 * var(--pt)) calc(40 * var(--pt)) rgba(0, 0, 0, 0.5);
  z-index: 6;
}

.msheet__handle {
  width: calc(36 * var(--pt));
  height: calc(5 * var(--pt));
  border-radius: 3px;
  background: rgba(235, 235, 245, 0.35);
  margin: calc(12 * var(--pt)) auto 0;
}

.msheet__head {
  padding: calc(12 * var(--pt)) calc(20 * var(--pt)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
}

.msheet__row1 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
}

.msheet__title {
  font-size: calc(20 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msheet__album {
  font-size: calc(13 * var(--pt));
  color: var(--app-label-2);
  margin-top: calc(3 * var(--pt));
}

.msheet__score {
  font-family: var(--app-rounded);
  font-size: calc(52 * var(--pt));
  font-weight: 700;
  line-height: calc(50 * var(--pt));
  font-variant-numeric: tabular-nums;
  color: var(--tint, var(--score-7));
  flex-shrink: 0;
}

.msheet__row2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 600;
  color: var(--app-label-2);
}

.msheet__meta {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
}

.msheet__meta svg {
  font-size: calc(11 * var(--pt));
}

.msheet__meta i {
  font-style: normal;
  color: var(--app-label-3);
  font-weight: 700;
}

.msheet__meta .is-genre {
  color: var(--app-accent);
}

.msheet__word {
  font-weight: 700;
  color: var(--tint, var(--score-7));
  white-space: nowrap;
}

/* Tape scrubber: 56pt band, ticks from a 34pt baseline, 90pt per point,
   fixed centre marker in the rating colour. */
.mtape {
  position: relative;
  margin-top: calc(12 * var(--pt));
  height: calc(56 * var(--pt));
  background: rgba(235, 235, 245, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}

.mtape__strip {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: calc(900 * var(--pt));
  transform: translateX(calc(var(--v, 7) * -90 * var(--pt)));
  will-change: transform;
}

.mtape__unit {
  position: absolute;
  top: 0;
  width: calc(90 * var(--pt));
  height: 100%;
  /* whole tick at the left edge, half tick at 45pt, tenths every 9pt */
  background-image: linear-gradient(rgba(235, 235, 245, 0.7), rgba(235, 235, 245, 0.7)),
    linear-gradient(rgba(235, 235, 245, 0.4), rgba(235, 235, 245, 0.4)),
    repeating-linear-gradient(90deg, rgba(235, 235, 245, 0.25) 0 1px, transparent 1px calc(9 * var(--pt)));
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: 1px calc(20 * var(--pt)), 1px calc(14 * var(--pt)), calc(9 * var(--pt)) calc(8 * var(--pt));
  background-position: 0 calc(14 * var(--pt)), calc(45 * var(--pt)) calc(20 * var(--pt)), 0 calc(26 * var(--pt));
}

.mtape__unit b {
  position: absolute;
  left: 0;
  top: calc(38 * var(--pt));
  transform: translateX(-50%);
  font-size: calc(11 * var(--pt));
  font-weight: 700;
  color: var(--app-label-2);
}

.mtape__marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(3 * var(--pt));
  height: calc(36 * var(--pt));
  border-radius: 999px;
  background: var(--tint, var(--score-7));
  transform: translate(-50%, calc(-50% - 4 * var(--pt)));
  box-shadow: 0 0 calc(6 * var(--pt)) var(--tint, var(--score-7));
  z-index: 2;
}

/* Vibe rails. */
.mvibe-list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt)) calc(20 * var(--pt)) 0;
}

.mvibe {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pt));
}

.mvibe__labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: calc(12 * var(--pt));
  font-weight: 600;
  color: var(--app-label-3);
}

.mvibe__word {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  font-weight: 700;
  color: var(--vt, var(--app-pink));
}

.mvibe__word svg {
  font-size: calc(11 * var(--pt));
}

.mvibe__rail {
  position: relative;
  height: calc(24 * var(--pt));
}

.mvibe__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(3 * var(--pt));
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(235, 235, 245, 0.2);
}

.mvibe__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--f, 0.5) * 100%);
  width: calc(14 * var(--pt));
  height: calc(14 * var(--pt));
  border-radius: 999px;
  background: var(--vt, var(--app-pink));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 calc(3 * var(--pt)) color-mix(in srgb, var(--vt, var(--app-pink)) 25%, transparent);
}

.mvibe--mood { --vt: var(--app-pink); }
.mvibe--energy { --vt: var(--app-orange); }
.mvibe--palette { --vt: var(--app-teal); }

.mmore {
  margin: calc(12 * var(--pt)) calc(20 * var(--pt)) 0;
  min-height: calc(36 * var(--pt));
  padding: 0 calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: rgba(235, 235, 245, 0.08);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  color: var(--app-label-2);
}

.mmore__set {
  margin-left: auto;
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  color: var(--app-accent);
}

.mmore svg {
  font-size: calc(11 * var(--pt));
  color: var(--app-label-3);
}

.msheet__actions {
  margin-top: auto;
  display: flex;
  gap: calc(10 * var(--pt));
  padding: calc(10 * var(--pt)) calc(16 * var(--pt)) calc(46 * var(--pt));
}

.msheet__remove {
  width: calc(52 * var(--pt));
  height: calc(50 * var(--pt));
  border-radius: calc(14 * var(--pt));
  background: rgba(255, 69, 58, 0.1);
  color: #ff453a;
  display: grid;
  place-items: center;
  font-size: calc(17 * var(--pt));
  flex-shrink: 0;
}

.msheet__save {
  flex: 1;
  height: calc(50 * var(--pt));
  border-radius: calc(14 * var(--pt));
  background: var(--tint, var(--score-7));
  color: #fff;
  font-size: calc(17 * var(--pt));
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------- monthly review ---- */

.mreviewpg {
  --rv-base: #001f2e;
  --rv-1: #008594;
  --rv-2: #00d6db;
  --rv-3: #3324c2;
  background: var(--rv-base);
  color: #fff;
}

.mreviewpg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(60 * var(--pt)));
  pointer-events: none;
}

.mreviewpg__blob--1 {
  width: calc(340 * var(--pt));
  height: calc(340 * var(--pt));
  left: calc(80 * var(--pt));
  top: calc(-60 * var(--pt));
  background: var(--rv-1);
  opacity: 0.85;
}

.mreviewpg__blob--2 {
  width: calc(290 * var(--pt));
  height: calc(290 * var(--pt));
  left: calc(-80 * var(--pt));
  top: calc(260 * var(--pt));
  background: var(--rv-2);
  opacity: 0.78;
}

.mreviewpg__blob--3 {
  width: calc(250 * var(--pt));
  height: calc(250 * var(--pt));
  left: calc(120 * var(--pt));
  top: calc(560 * var(--pt));
  background: var(--rv-3);
  opacity: 0.72;
}

.mreviewpg__close {
  position: absolute;
  top: calc(60 * var(--pt));
  right: calc(16 * var(--pt));
  width: calc(34 * var(--pt));
  height: calc(34 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  display: grid;
  place-items: center;
  font-size: calc(13 * var(--pt));
  z-index: 3;
}

.mreviewpg__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.mrv-hero {
  padding: calc(100 * var(--pt)) calc(24 * var(--pt)) 0;
}

.mrv-kicker {
  font-size: calc(11 * var(--pt));
  font-weight: 900;
  letter-spacing: 2.5px;
  letter-spacing: calc(2.5 * var(--pt));
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: calc(10 * var(--pt));
}

.mrv-month {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--pt));
}

.mrv-month b {
  flex: 1;
  font-family: var(--app-rounded);
  font-size: calc(52 * var(--pt));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}

.mrv-step {
  width: calc(36 * var(--pt));
  height: calc(36 * var(--pt));
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: calc(20 * var(--pt));
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.mrv-step.is-off {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.22);
}

.mrv-year {
  font-family: var(--app-rounded);
  font-size: calc(28 * var(--pt));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-top: calc(4 * var(--pt));
}

.mrv-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(20 * var(--pt));
}

.mrv-stats {
  margin: calc(32 * var(--pt)) calc(16 * var(--pt)) 0;
  padding: calc(20 * var(--pt)) 0;
  display: flex;
  align-items: center;
}

.mrv-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--pt));
}

.mrv-stat b {
  font-family: var(--app-rounded);
  font-size: calc(40 * var(--pt));
  font-weight: 900;
  line-height: 1;
}

.mrv-stat span {
  font-size: calc(10 * var(--pt));
  font-weight: 700;
  letter-spacing: calc(1 * var(--pt));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.mrv-stats i {
  width: 1px;
  height: calc(52 * var(--pt));
  background: rgba(255, 255, 255, 0.15);
}

.mrv-section {
  margin-top: calc(36 * var(--pt));
  padding: 0 calc(20 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 900;
  letter-spacing: calc(1.6 * var(--pt));
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.mrv-spot {
  margin: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
  padding: calc(16 * var(--pt));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--pt));
  border-color: rgba(255, 214, 10, 0.3);
}

.mrv-spot .art {
  width: calc(90 * var(--pt));
  height: calc(90 * var(--pt));
  border-radius: calc(12 * var(--pt));
  box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.mrv-spot__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pt));
}

.mrv-spot__rank {
  font-size: calc(11 * var(--pt));
  font-weight: 900;
  letter-spacing: calc(1 * var(--pt));
  color: rgba(255, 214, 10, 0.9);
}

.mrv-spot__name {
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}

.mrv-spot__artist {
  font-size: calc(15 * var(--pt));
  color: rgba(255, 255, 255, 0.65);
}

.mrv-spot__score {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mrv-spot__score b {
  font-family: var(--app-rounded);
  font-size: calc(32 * var(--pt));
  font-weight: 900;
  line-height: 1;
}

.mrv-spot__score span {
  font-size: calc(7 * var(--pt));
  font-weight: 900;
  letter-spacing: calc(0.5 * var(--pt));
  color: rgba(255, 255, 255, 0.6);
}

.mrv-runners {
  margin: calc(12 * var(--pt)) calc(16 * var(--pt)) 0;
  display: flex;
  gap: calc(12 * var(--pt));
}

.mrv-runner {
  flex: 1;
  min-width: 0;
  padding: calc(14 * var(--pt));
  border-radius: calc(18 * var(--pt));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
}

.mrv-runner .art {
  width: calc(64 * var(--pt));
  height: calc(64 * var(--pt));
  border-radius: calc(10 * var(--pt));
}

.mrv-runner__rank {
  font-size: calc(10 * var(--pt));
  font-weight: 900;
  color: rgba(255, 255, 255, 0.55);
}

.mrv-runner__name {
  font-size: calc(15 * var(--pt));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: calc(3 * var(--pt));
}

.mrv-runner__artist {
  font-size: calc(12 * var(--pt));
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: calc(3 * var(--pt));
}

.mrv-runner__score {
  font-family: var(--app-rounded);
  font-size: calc(22 * var(--pt));
  font-weight: 900;
  line-height: 1;
}

.mrv-songs {
  margin: calc(16 * var(--pt)) calc(16 * var(--pt)) 0;
}

.mrv-song {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--pt));
  padding: calc(12 * var(--pt)) calc(18 * var(--pt));
  position: relative;
}

.mrv-song + .mrv-song::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(52 * var(--pt));
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.mrv-song__rank {
  width: calc(22 * var(--pt));
  text-align: right;
  font-family: var(--app-rounded);
  font-size: calc(13 * var(--pt));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.mrv-song__rank.is-low {
  color: rgba(255, 255, 255, 0.4);
}

.mrv-song__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--pt));
}

.mrv-song__title {
  font-size: calc(15 * var(--pt));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrv-song__album {
  font-size: calc(12 * var(--pt));
  color: rgba(255, 255, 255, 0.55);
}

.mrv-song__score {
  font-family: var(--app-rounded);
  font-size: calc(16 * var(--pt));
  font-weight: 700;
  min-width: calc(36 * var(--pt));
  text-align: right;
}

/* ------------------------------------------------------------ library ---- */

.mlib {
  background: var(--app-card);
}

.mlib__toolbar {
  position: absolute;
  top: calc(56 * var(--pt));
  left: calc(16 * var(--pt));
  display: flex;
  gap: calc(8 * var(--pt));
  z-index: 6;
}

.mlib__toolbar .mglass {
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  font-size: calc(18 * var(--pt));
}

.mlib__sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(108 * var(--pt));
  bottom: 0;
  background: var(--app-card);
  border-radius: calc(34 * var(--pt)) calc(34 * var(--pt)) 0 0;
  padding-top: calc(20 * var(--pt));
}

.mlib__pills {
  display: flex;
  gap: calc(8 * var(--pt));
  padding: 0 calc(16 * var(--pt)) calc(6 * var(--pt));
}

.mlib__pill {
  flex: 1;
  text-align: center;
  padding: calc(8 * var(--pt)) 0;
  border-radius: 999px;
  background: var(--app-card-2);
  border: 1px solid var(--app-border);
  font-size: calc(12 * var(--pt));
  font-weight: 600;
  color: var(--app-label-2);
  white-space: nowrap;
}

.mlib__year {
  padding: calc(18 * var(--pt)) calc(16 * var(--pt)) calc(8 * var(--pt));
  font-family: var(--app-rounded);
  font-size: calc(21 * var(--pt));
  font-weight: 700;
}

.mlib__month {
  padding: calc(6 * var(--pt)) calc(16 * var(--pt)) calc(8 * var(--pt));
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  color: var(--app-label-2);
}

.mlib__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--pt));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt)) 0;
}

.mlibcard {
  background: var(--app-card-2);
  border: 1px solid var(--app-border);
  border-radius: calc(20 * var(--pt));
  overflow: hidden;
}

.mlibcard__art {
  position: relative;
  padding: calc(9 * var(--pt));
}

.mlibcard__art .art {
  aspect-ratio: 1;
  border-radius: calc(16 * var(--pt));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 calc(4 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.18);
}

.mlibcard__score {
  position: absolute;
  right: calc(17 * var(--pt));
  bottom: calc(17 * var(--pt));
  padding: calc(5 * var(--pt)) calc(8 * var(--pt));
  border-radius: 999px;
  background: rgba(38, 38, 45, 0.92);
  border: 1px solid color-mix(in srgb, var(--rc, var(--score-6)) 28%, transparent);
  font-family: var(--app-rounded);
  font-size: calc(18 * var(--pt));
  font-weight: 900;
  line-height: 1;
  color: var(--rc, var(--score-6));
}

.mlibcard__meta {
  padding: calc(2 * var(--pt)) calc(14 * var(--pt)) calc(13 * var(--pt));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
}

.mlibcard__name {
  font-size: calc(15 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlibcard__artist {
  font-size: calc(12 * var(--pt));
  font-weight: 500;
  color: var(--app-label-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlibcard__info {
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  color: rgba(235, 235, 245, 0.5);
  white-space: nowrap;
}

.mlib__search {
  position: absolute;
  left: 50%;
  bottom: calc(92 * var(--pt));
  transform: translateX(-50%);
  width: 50%;
  height: calc(46 * var(--pt));
  border-radius: 999px;
  background: rgba(36, 36, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  font-size: calc(16 * var(--pt));
  color: var(--app-label-3);
  z-index: 6;
  box-shadow: 0 calc(8 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, 0.3);
}

.mlib .mfade {
  height: 27%;
  background: linear-gradient(180deg, transparent, var(--app-card) 70%);
}

/* ------------------------------------------------------------- search ---- */

.msearch {
  background: linear-gradient(180deg, #111115 0%, #111115 55%, rgba(38, 38, 45, 0.55) 100%);
}

.msearch__field {
  position: absolute;
  top: calc(60 * var(--pt));
  left: calc(16 * var(--pt));
  right: calc(16 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 999px;
  background: rgba(36, 36, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pt));
  padding: 0 calc(14 * var(--pt));
  font-size: calc(17 * var(--pt));
  z-index: 3;
}

.msearch__field svg {
  color: var(--app-label-2);
  font-size: calc(17 * var(--pt));
}

.msearch__cancel {
  margin-left: auto;
  font-size: calc(15 * var(--pt));
  color: var(--app-accent-muted);
}

.mcaret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--app-accent);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: mcaret 1s steps(2) infinite;
}

@keyframes mcaret {
  to {
    opacity: 0;
  }
}

.msearch__body {
  position: absolute;
  top: calc(118 * var(--pt));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--pt));
}

.msearch__head {
  padding: 0 calc(16 * var(--pt));
}

.msearch__title {
  font-family: var(--app-rounded);
  font-size: calc(34 * var(--pt));
  font-weight: 900;
  line-height: 1.1;
}

.msearch__sub {
  font-size: calc(15 * var(--pt));
  color: var(--app-text-2);
  margin-top: calc(6 * var(--pt));
}

.msearch__chips {
  display: flex;
  gap: calc(8 * var(--pt));
  padding: 0 calc(16 * var(--pt));
  overflow: hidden;
}

.msearch__chips .mchip {
  padding: calc(9 * var(--pt)) calc(12 * var(--pt));
  font-weight: 700;
  color: var(--app-label);
}

.msearch__chips .mchip.is-on {
  background: var(--app-accent-muted);
  border-color: rgba(196, 191, 255, 0.4);
  color: #fff;
}

.msearch__section {
  padding: 0 calc(16 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-text-2);
  margin-bottom: calc(-8 * var(--pt));
}

.msearch__list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
  padding: 0 calc(16 * var(--pt));
}

.mresult {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(12 * var(--pt));
  min-height: calc(84 * var(--pt));
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: calc(18 * var(--pt));
}

.mresult .art {
  width: calc(60 * var(--pt));
  height: calc(60 * var(--pt));
  border-radius: calc(14 * var(--pt));
  box-shadow: 0 calc(3 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}

.mresult__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pt));
}

.mresult__name {
  font-size: calc(17 * var(--pt));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mresult__artist {
  font-size: calc(15 * var(--pt));
  color: var(--app-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mresult__info {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  font-size: calc(12 * var(--pt));
  font-weight: 600;
  color: rgba(169, 167, 190, 0.86);
}

.mresult__info svg {
  font-size: calc(12 * var(--pt));
}

.mresult__score {
  padding: calc(5 * var(--pt)) calc(8 * var(--pt));
  border-radius: 999px;
  font-size: calc(12 * var(--pt));
  font-weight: 900;
  color: #fff;
  background: var(--rc, var(--score-6));
}

.mresult__chev {
  font-size: calc(12 * var(--pt));
  color: rgba(169, 167, 190, 0.8);
}