.application-body.application-music {
  --app-colour: var(--app-colour-music, #00C300);
}
.application-body.application-music #app-content-music.injecting {
  opacity: 0;
}
.application-body.application-music .music-track-list .preview.album-art {
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radii-small, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--quaive-colour-gray-95, #f0f0f0);
}
.application-body.application-music .music-track-list .preview.album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.application-body.application-music .music-track-list .preview.album-art:empty {
  background-color: color-mix(in srgb, var(--app-colour) 14%, white);
  position: relative;
}
.application-body.application-music .music-track-list .preview.album-art:empty::after {
  content: '';
  position: absolute;
  inset: 28%;
  background-color: var(--app-colour);
  opacity: 0.45;
  -webkit-mask: var(--music-note-mask) center / contain no-repeat;
  mask: var(--music-note-mask) center / contain no-repeat;
}
.application-body.application-music {
  --kik-audio-tile-glyph: var(--music-note-mask);
  --music-note-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5.8" cy="17.5" r="2.75"/><circle cx="16.8" cy="15.5" r="2.75"/><path d="M8.55 17.5V6.25l11-2v11.25"/><path d="M8.55 9.75l11-2"/></svg>');
}
@container preview-cards (360px <= width < 530px) {
.application-body.application-music .music-album-card-table tbody tr {
  flex-basis: calc((100% - 2 * var(--kik-card-gap)) / 3);
}
}
@container preview-cards (width < 360px) {
.application-body.application-music .music-album-card-table tbody tr {
  flex-basis: calc((100% - 1 * var(--kik-card-gap)) / 2);
}
}
.application-body.application-music .music-album-header {
  container-type: inline-size;
  container-name: music-album-header;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.application-body.application-music .music-album-cover {
  width: 21rem;
  max-width: min(100%, 45cqi);
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: var(--border-radii-small, 4px);
  overflow: hidden;
  background: var(--quaive-colour-gray-95, #f0f0f0);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.application-body.application-music .music-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.application-body.application-music .music-album-cover > a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}
.application-body.application-music .music-album-cover svg {
  width: 40%;
  height: 40%;
  opacity: 0.35;
  color: var(--app-colour);
}
.application-body.application-music .music-album-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.5rem;
}
.application-body.application-music .music-album-title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}
.application-body.application-music .music-album-artist {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--app-colour);
}
.application-body.application-music .music-album-meta,
.application-body.application-music .music-album-summary {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.application-body.application-music .music-album-actions {
  margin: 0.75rem 0 0.25rem;
}
.application-body.application-music .music-album-actions.pat-button-bar {
  --pat-button-background-colour: #ffffffa1;
  --pat-button-background-colour-hover: #fffc;
  text-shadow: none;
}
.application-body.application-music .music-track-artist-name,
.application-body.application-music .music-track-artist-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.application-body.application-music .music-track-table tbody td:is(.music-track-artist, .music-track-album,
                                   .audio-track-duration, .functions) {
  vertical-align: middle;
}
.application-body.application-music .music-track-album-link {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.application-body.application-music .music-track-cover-img {
  border: 1px solid rgb(0 0 0 / 0.12);
}
.application-body.application-music .music-track-cover-placeholder {
  background-color: color-mix(in srgb, var(--app-colour) 14%, white);
}
.application-body.application-music .music-track-cover-placeholder:has(> img)::after {
  content: none;
}
.application-body.application-music .music-track-cover-placeholder::after {
  content: '';
  position: absolute;
  inset: 20%;
  background-color: var(--app-colour);
  opacity: 0.45;
  -webkit-mask: var(--music-note-mask) center / contain no-repeat;
  mask: var(--music-note-mask) center / contain no-repeat;
}
.application-body.application-music .music-track-album-name,
.application-body.application-music .music-track-album-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
.application-body.application-music .music-track-album-link:hover,
.application-body.application-music .music-track-artist-link:hover {
  text-decoration: underline;
}
}
.application-body.application-music .music-track-artist-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.application-body.application-music .audio-tracks a {
  cursor: default;
}
@media (hover: hover) {
.application-body.application-music .audio-tracks a[href]:hover,
.application-body.application-music .audio-tracks a[href]:not(.icon):not(.current):hover {
  cursor: default;
}
}
.application-body.application-music .item-title.current,
.application-body.application-music .audio-track-title.current,
.application-body.application-music .music-player-title.current,
.application-body.application-music .music-now-playing > a .item-title,
.application-body.application-music a.music-now-playing .audio-track-title,
.application-body.application-music .audio-track.music-now-playing .audio-track-title {
  color: var(--app-colour);
  font-weight: 700;
}
.application-body.application-music .audio-tracks tr:has(.current) .audio-track-byline {
  color: color-mix(in srgb, var(--colour-accent, var(--app-colour)) 75%, transparent);
}
.application-body.application-music .music-player {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.application-body.application-music .music-player-stage {
  container-type: inline-size;
  container-name: music-player-stage;
  display: flex;
  gap: 1.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.application-body.application-music .music-player-cover {
  width: 14rem;
  max-width: min(100%, 40cqi);
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radii-small, 4px);
  overflow: hidden;
  background: var(--quaive-colour-gray-95, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.application-body.application-music .music-player-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.application-body.application-music .music-player-cover svg {
  width: 40%;
  height: 40%;
  opacity: 0.35;
  color: var(--app-colour);
}
.application-body.application-music .music-player-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.application-body.application-music .music-player-meta .music-player-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.application-body.application-music .music-player-meta .music-player-byline {
  opacity: 0.75;
}
.application-body.application-music .music-player audio {
  width: 100%;
}
.application-body.application-music .music-up-next {
  margin-top: 0.5rem;
}
.application-body.application-music .music-track-list:not(.music-album-grid) .pat-link-list li a:not(.pat-lazy-load),
.application-body.application-music .audio-tracks a.audio-track-link {
  cursor: default;
}
@media (hover: hover) {
.application-body.application-music .music-track-list:not(.music-album-grid) .pat-link-list li a:not(.pat-lazy-load):hover,
.application-body.application-music .music-track-list:not(.music-album-grid) .pat-link-list li a:not(.pat-lazy-load):hover .item-title {
  text-decoration: none !important;
}
}
@container pat-table (((width <= 680px) and (style(--pat-table-small: table) or style(--pat-table-small: bare) or style(--pat-table-small: cards) or style(--pat-table-small: list))) or ((680px < width <= 1100px) and (style(--pat-table-medium: table) or style(--pat-table-medium: bare) or style(--pat-table-medium: cards) or style(--pat-table-medium: list))) or ((width > 1100px) and (style(--pat-table-large: table) or style(--pat-table-large: bare) or style(--pat-table-large: cards) or style(--pat-table-large: list)))) {
.application-body.application-music .pat-table td.item-media > .kik-audio-tile {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--kik-table-media-size, 2.4rem);
  height: var(--kik-table-media-size, 2.4rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
}
@container pat-table (((width <= 680px) and (style(--pat-table-small: table) or style(--pat-table-small: bare) or style(--pat-table-small: cards) or style(--pat-table-small: list))) or ((680px < width <= 1100px) and (style(--pat-table-medium: table) or style(--pat-table-medium: bare) or style(--pat-table-medium: cards) or style(--pat-table-medium: list))) or ((width > 1100px) and (style(--pat-table-large: table) or style(--pat-table-large: bare) or style(--pat-table-large: cards) or style(--pat-table-large: list)))) {
.application-body.application-music .pat-table td.item-media > .kik-audio-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}
.application-body.application-music .pat-table {
  --ll-preview-ratio: 1 / 1;
}
.application-body.application-music .pat-table {
  --kik-card-art-radius: var(--border-radii-small, 4px);
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table td.item-media figure.preview,
.application-body.application-music .pat-table td.item-media > .kik-audio-tile {
  grid-area: preview;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 0 var(--pat-x-list-gutter, 10px);
  aspect-ratio: 1 / 1;
  border-radius: var(--kik-card-art-radius, var(--border-radii-small, 4px));
  overflow: hidden;
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table td.item-media figure.preview:not(.preview-mark),
.application-body.application-music .pat-table td.item-media > .kik-audio-tile {
  display: block;
  background: var(--quaive-colour-gray-95, #f0f0f0);
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table td.item-media figure.preview > img,
.application-body.application-music .pat-table td.item-media > .kik-audio-tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table tbody tr.music-album-pending td.item-media figure.preview.preview-mark > :not(.music-pending-bar),
.application-body.application-music .pat-table tbody tr.music-album-pending .link-title,
.application-body.application-music .pat-table tbody tr.music-album-pending .music-card-byline {
  opacity: 0.55;
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table tbody tr.music-album-pending td.item-media figure.preview.preview-mark {
  position: relative;
  display: block;
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table tbody tr.music-album-pending td.item-media figure.preview.preview-mark > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  animation: none;
}
}
@container pat-table (((width <= 680px) and style(--pat-table-small: preview-cards)) or ((680px < width <= 1100px) and style(--pat-table-medium: preview-cards)) or ((width > 1100px) and style(--pat-table-large: preview-cards))) {
.application-body.application-music .pat-table tbody tr.music-album-pending td.item-media figure.preview.preview-mark > svg {
  position: absolute;
  inset: 35%;
}
}
.application-body.application-music .music-pending-bar {
  position: absolute;
  inset-inline: 8%;
  bottom: 8%;
  height: 5px;
  border-radius: 3px;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
  overflow: hidden;
}
.application-body.application-music .music-pending-bar > span {
  display: block;
  height: 100%;
  background: var(--app-colour);
  transition: width 0.4s ease;
}
.application-body.application-music .document-body:has(.music-artist-page) {
  position: relative;
  isolation: isolate;
}
.application-body.application-music .music-artist-hero {
  margin-bottom: 1.5rem;
}
.application-body.application-music .music-artist-hero.has-background {
  min-height: 16rem;
}
.application-body.application-music .music-artist-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42rem;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 30%, black 65%),
            linear-gradient(180deg, black 25%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 30%, black 65%),
            linear-gradient(180deg, black 25%, transparent 97%);
  mask-composite: intersect;
}
.application-body.application-music .music-artist-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--kik-hero-image);
  background-size: cover;
  background-position: center var(--kik-hero-focus, 25%);
}
.application-body.application-music .music-artist-hero-image.is-flipped::before {
  transform: scaleX(-1);
}
.application-body.application-music body[dir="rtl"] .music-artist-hero-image {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.07) 30%, black 65%),
            linear-gradient(180deg, black 25%, transparent 97%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.07) 30%, black 65%),
            linear-gradient(180deg, black 25%, transparent 97%);
}
.application-body.application-music body[dir="rtl"] .music-artist-hero-image::before {
  transform: scaleX(-1);
}
.application-body.application-music body[dir="rtl"] .music-artist-hero-image.is-flipped::before {
  transform: none;
}
.application-body.application-music .music-artist-hero-body {
  position: relative;
  max-width: 46%;
  padding-top: 1.5rem;
  text-shadow: 0 1px 2px var(--application-body-background-colour, white),
            0 0 14px var(--application-body-background-colour, white);
}
.application-body.application-music .music-artist-hero:not(.has-background) .music-artist-hero-body {
  max-width: 70%;
}
.application-body.application-music .music-artist-name {
  font-family: var(--pat-rich-header-level-1-font-family, serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}
.application-body.application-music .music-artist-section {
  margin-bottom: 1.5rem;
}
.application-body.application-music .music-countries {
  padding-top: 1rem;
}
.application-body.application-music .music-countries ul.flag-list li.flag.svg a::before {
  background-image: var(--kik-flag);
  background-size: cover;
  background-position: center;
}
.application-body.application-music .music-countries .flag.unknown a::before {
  content: attr(data-abbr);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--app-colour) 55%, black);
  background-color: color-mix(in srgb, var(--app-colour) 14%, white);
}
.application-body.application-music .music-countries .flag a .counter {
  margin-inline-start: 0.4rem;
  background-color: rgb(0 0 0 / 0.06);
  color: color-mix(in srgb, currentColor 75%, transparent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
}
.application-body.application-music .music-countries .flag a {
  cursor: default;
  text-decoration: none;
  color: inherit;
}
.application-body.application-music #app-content-music {
  position: relative;
}
.application-body.application-music .kik-music-progress-line {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
  display: none;
}
.application-body.application-music .kik-music-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  pointer-events: auto;
  transition: background-color 0.15s ease-out;
}
.application-body.application-music .kik-music-progress-track > i {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 3px;
  background: var(--colour-accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.9s linear, height 0.15s ease-out;
}
@media (hover: hover) {
.application-body.application-music .kik-music-progress-track:hover {
  background: rgb(0 0 0 / 0.05);
}
}
@media (hover: hover) {
.application-body.application-music .kik-music-progress-track:hover > i {
  height: 100%;
}
}
.application-body.application-music body[dir="rtl"] .kik-music-progress-track > i {
  border-radius: 2px 0 0 2px;
}
@container pat-table (((width <= 680px) and style(--pat-table-small: bare)) or ((680px < width <= 1100px) and style(--pat-table-medium: bare)) or ((width > 1100px) and style(--pat-table-large: bare))) {
.application-body.application-music .music-track-table th.item-name,
.application-body.application-music .music-track-table .audio-track-title {
  font-size: inherit;
  line-height: inherit;
}
}
.application-body.application-music .music-catalogue-licence {
  margin: 0;
  font-size: 0.85rem;
}
.application-body.application-music .music-catalogue-album .music-album-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.application-body.application-music .music-catalogue-album .music-album-actions > .music-catalogue-add {
  display: contents;
}
.application-body.application-music .music-catalogue-added-note {
  flex-basis: 100%;
  margin: 0;
  opacity: 0.7;
}
.application-body.application-music .music-catalogue-source {
  margin: 1.5rem 0;
  text-align: center;
  font-size: 0.85em;
  opacity: 0.6;
}
@media (max-width: 680px) {
.application-body.application-music :is(.music-album-page, .music-playlist-page) {
  padding-bottom: calc(var(--kik-dock-clearance, 85px) + 1rem);
}
}