html,
body {
  width: 100%;
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
body[data-align="align-to-top"] {
  align-items: flex-start;
}
body[data-align="align-to-bottom"] {
  align-items: flex-end;
}
.widget {
  flex: none;
  isolation: isolate;
  transition:
    background 1.1s,
    color 1.1s;
}
.widget.hidden {
  transform: none;
}
.widget .title {
  font-size: calc(25px * var(--font-scale, 1)) !important;
}
.widget .artist {
  font-size: calc(16px * var(--font-scale, 1)) !important;
}
.widget .album {
  font-size: calc(11px * var(--font-scale, 1)) !important;
}
.widget .eyebrow {
  font-size: calc(9px * var(--font-scale, 1));
}
.widget .times {
  font-size: calc(9px * var(--font-scale, 1));
}
.widget.nutty-classic .times {
  font-size: calc(11px * var(--font-scale, 1));
}
.no-art:not(.vinyl) .art {
  display: none !important;
}
.vinyl.no-art .art img,
.vinyl.no-art .fallback {
  display: none !important;
}
.no-progress .timeline,
.vinyl.no-progress:before,
.color-palette.no-progress .palette-tiles > div:before {
  display: none !important;
}
.no-primary .title,
.no-secondary .artist {
  display: none !important;
}
.eyebrow {
  justify-content: var(--text-justify, flex-start);
}
.nutty-classic .info {
  min-height: 180px;
  height: auto;
}
.album-art .info,
.card .info {
  flex-shrink: 0;
}
.palette-tiles small {
  font-size: calc(14px * var(--font-scale, 1));
}
.palette-tiles strong {
  font-size: calc(20px * var(--font-scale, 1));
}
.palette-tiles > div {
  height: max(120px, calc(25px + 45px * var(--font-scale, 1)));
}
.album-art {
  min-height: calc(180px + 60px * var(--font-scale, 1));
}
.compact-bar,
.compact-inverted {
  height: auto;
  min-height: max(56px, calc(26px + 26px * var(--font-scale, 1)));
}
.widget.compact-bar .title,
.widget.compact-inverted .title {
  font-size: calc(20px * var(--font-scale, 1)) !important;
}
.widget.compact-bar .artist,
.widget.compact-inverted .artist {
  font-size: calc(15px * var(--font-scale, 1)) !important;
}
.widget-cover-background {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: var(--opacity, 1);
  pointer-events: none;
}
.cover-background:not(.vinyl):not(.color-palette) {
  background: transparent !important;
}
.cover-background:not(.vinyl):not(.color-palette) .widget-cover-background {
  display: block;
}
.cover-background > .art,
.cover-background > .info,
.cover-background > .palette-tiles {
  position: relative;
  z-index: 1;
}
/* Clip the painted theme layers while allowing the outside meter to overflow. */
.compact-bar .timeline,
.compact-inverted .timeline {
  border-radius: inherit;
  clip-path: inset(0 round var(--radius));
}
.album-art .art {
  border-radius: inherit;
}
.album-art .info {
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Keep the rounded clip separate from the blurred image. */
.widget-cover-background > div {
  position: absolute;
  inset: -32px;
  background-position: center;
  background-size: cover;
  filter: blur(24px);
}
.cover-background.nutty-classic .info {
  background: transparent;
}
.cover-background.album-art .art {
  display: none;
}
.cover-background.album-art .info {
  background: transparent;
}
/* Classic keeps the artwork and the text card as separate rounded surfaces. */
.nutty-classic .info {
  position: relative;
  isolation: isolate;
}
.nutty-classic .info > .widget-cover-background {
  z-index: -1;
}