/* Opaque tonal surfaces keep the search legible over ambient artwork. */
:root {
  --discovery-surface: color-mix(
    in srgb,
    var(--page, #f6f7f5) 88%,
    var(--ink, #111318)
  );
  --discovery-border: #c9ccc9;
}
:root[data-theme="dark"] {
  --discovery-surface: color-mix(
    in srgb,
    var(--page, #191b20) 84%,
    var(--ink, #eee)
  );
  --discovery-border: #555860;
}
.music-global-search {
  background: var(--discovery-surface) !important;
  border: 1px solid var(--discovery-border) !important;
  border-radius: var(--search-radius, 24px) !important;
  box-shadow: 0 3px 16px #0000000d;
  align-items: center;
  width: min(540px, 43vw);
  padding: 5px 7px;
}
.music-global-search input {
  background: none !important;
  box-shadow: none !important;
  padding: 9px 10px;
}
.music-global-search select {
  max-width: 105px;
  min-width: 65px;
  background: var(--discovery-surface);
  color: var(--ink);
  border: 0;
  font: inherit;
  font-size: 12px;
  padding: 8px 2px;
  cursor: pointer;
}
.music-global-search button {
  background: var(--discovery-surface) !important;
  border-color: var(--discovery-border) !important;
  border-radius: var(--search-action-radius, 20px) !important;
  padding: 9px 13px;
}
.music-global-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
#explore-open {
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: 8px;
}
.explore-connections {
  display: flex;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px 0 12px;
  max-width: 100%;
  scrollbar-width: thin;
}
.explore-connections button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  border-radius: 18px;
  padding: 8px 12px;
  white-space: nowrap;
  cursor: pointer;
}
.explore-connections img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}
#profile-connections {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 25;
  max-width: min(590px, 55vw);
}
#profile-connections > small {
  color: var(--muted);
  font-size: 11px;
}
:root[data-view="shelf"] #profile-connections,
:root[data-music-workspace="open"] #profile-connections,
:root[data-creation-modal="open"] #profile-connections,
:root[data-appearance="open"] #profile-connections {
  display: none;
}
/* Quiet icon; the control opens inwards so it never pushes the page. */
.universal-volume{position:fixed;right:22px;bottom:20px;z-index:35;color:var(--ink);font:12px var(--theme-font,Arial,sans-serif)}
.universal-volume button{display:grid;place-items:center;width:42px;height:42px;padding:0;background:var(--discovery-surface);border:1px solid var(--discovery-border);border-radius:50%;color:inherit;cursor:pointer}
.universal-volume button:focus-visible,.universal-volume input:focus-visible{outline:2px solid currentColor;outline-offset:3px}
#universal-volume-controls{position:absolute;right:0;bottom:calc(100% + 8px);display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--discovery-surface);border:1px solid var(--discovery-border);border-radius:24px;box-shadow:0 4px 20px #0002;max-width:calc(100vw - 32px);box-sizing:border-box}
#universal-volume-controls::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
#universal-volume-controls[hidden]{display:none!important}
#universal-volume-controls button{width:30px;height:30px;border:0;background:none}
.universal-volume input{width:110px;accent-color:var(--accent);touch-action:pan-x}
.universal-volume small{max-width:175px;line-height:1.5}.universal-volume small:empty{display:none}
.universal-volume input:disabled{display:none}.universal-volume button:disabled{opacity:.45}
.volume-silent{display:none}.universal-volume[data-muted=true] .volume-waves{display:none}.universal-volume[data-muted=true] .volume-silent{display:block}
:root:is([data-creation-modal="open"],[data-appearance="open"],[data-music-workspace="open"],[data-rooms="open"]) #universal-volume,
:root:has(#settings-popover:not([hidden]),.companion-invite:not([hidden])) #universal-volume{display:none!important}
:root:is([data-theme-preset=windows],[data-theme-preset=geocities]) .universal-volume button,:root:is([data-theme-preset=windows],[data-theme-preset=geocities]) #universal-volume-controls{border-radius:2px}
#ps3-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#ps3-background[hidden] {
  display: none;
}
:root[data-ps3-background="on"] #cd-stage::after {
  display: none;
}
/* Comments live below the disc as a quiet reading strip, never in the side column. */
.soundcloud-comments,
:root[data-view="map"] .soundcloud-comments {
  position: fixed;
  left: 8%;
  right: auto;
  top: auto;
  bottom: 68px;
  width: min(470px, 38vw);
  z-index: 24;
}
.soundcloud-comments > button {
  padding: 6px 0;
  min-height: 30px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
}
.soundcloud-comments-panel,
:root[data-view="map"] .soundcloud-comments-panel {
  position: relative;
  top: auto;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  max-width: none;
  max-height: 190px;
  background: var(--discovery-surface);
  border: 0;
  border-radius: 12px;
  padding: 12px 15px;
  box-shadow: none;
  box-sizing: border-box;
}
.soundcloud-comments-panel h2 {
  font-size: 12px;
}
.soundcloud-comments-panel header small {
  display: none;
}
.soundcloud-comments-panel li {
  padding: 8px 0;
}
.soundcloud-comments-panel ol {
  margin: 5px 0;
}
.soundcloud-comments-panel li p {
  margin: 2px 0 0;
}
:root[data-view="map"] .soundcloud-comments,
:root[data-view="library"] .soundcloud-comments,
:root[data-view="shelf"] .soundcloud-comments {
  left: 50%;
  transform: translateX(-50%);
  bottom: 68px;
  width: min(430px, 60vw);
}
:root[data-view="playlist"] #cd-stage canvas,
:root[data-view="playlist"] #link-profile,
:root[data-view="playlist"] #disc-rail {
  visibility: hidden;
  pointer-events: none;
}
.playlist-view {
  position: absolute;
  inset: 110px 5% 86px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 6%;
  z-index: 8;
  color: var(--ink);
  min-height: 0;
  pointer-events: auto;
}
.playlist-art {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
}
.playlist-package {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45;
  isolation: isolate;
  filter: drop-shadow(0 15px 18px #0003);
}
.playlist-disc {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  right: 0;
  top: 0;
  border-radius: 50%;
  background: conic-gradient(#a4a9ae, #eee, #9aa4b4, #dadbe1, #aaa);
  mask: radial-gradient(circle, transparent 0 6%, #000 6.5%);
  -webkit-mask: radial-gradient(circle, transparent 0 6%, #000 6.5%);
  overflow: hidden;
  border: 1px solid #ffffff60;
  animation: playlist-spin 18s linear infinite;
  animation-play-state: paused;
}
.playlist-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.playlist-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 30deg,
    #fff0,
    #fff4,
    #fff0,
    #fff2,
    #0001,
    #fff0
  );
  pointer-events: none;
  opacity: var(--disc-rainbow-opacity, 0.6);
}
.playlist-disc::before {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  border: 2px solid #e9edf4a0;
  z-index: 1;
  background: #a8b1bc40;
}
.playlist-view[data-playing="true"] .playlist-disc {
  animation-play-state: running;
}
.playlist-sleeve {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  left: 0;
  top: 0;
  background: var(--discovery-surface);
  border: 5px solid #ffffff25;
  border-left: 10px solid #191a2240;
  box-sizing: border-box;
  box-shadow: 4px 0 6px #0006;
  overflow: hidden;
}
.playlist-sleeve img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.playlist-sleeve span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: var(--muted);
  z-index: -1;
}
#playlist-edit-cover {
  position: absolute;
  bottom: 10px;
  left: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--discovery-surface);
  color: var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
.playlist-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 0;
}
.playlist-details h1 {
  font-size: clamp(24px, 3vw, 48px);
  letter-spacing: -0.04em;
  margin: 20px 0 8px;
}
.playlist-details p {
  margin: 0 0 12px;
  color: var(--muted);
}
.playlist-details select {
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--discovery-surface);
  color: var(--ink);
  padding: 10px;
  border-radius: 12px;
  font: inherit;
}
#playlist-tracks {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex: 1;
  min-height: 80px;
}
#playlist-tracks li {
  border-top: 1px solid var(--line);
}
#playlist-tracks button {
  width: 100%;
  display: flex;
  text-align: left;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
#playlist-tracks button > span:first-child {
  color: var(--muted);
  font-size: 12px;
}
#playlist-tracks strong {
  font-weight: 500;
  display: block;
}
#playlist-tracks small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
#playlist-tracks button[aria-current="true"] {
  color: var(--accent);
  background: var(--panel);
}
.playlist-view[hidden],
[hidden].explore-connections,
#profile-connections[hidden] {
  display: none !important;
}
@keyframes playlist-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 760px) {
  .music-global-search {
    width: calc(100% - 38px);
    top: 68px;
    max-width: 480px;
    box-sizing: border-box;
  }
  .music-global-search input {
    font-size: 14px;
    padding-left: 6px;
  }
  .music-global-search select {
    font-size: 11px;
    max-width: 90px;
  }
  .music-global-search button {
    font-size: 12px;
    padding: 9px;
  }
  #explore-open {
    font-size: 12px;
    padding: 6px;
  }
  .universal-volume {
    right: 10px;
    bottom: 10px;
    padding: 0;
  }
  .universal-volume input {
    width: 110px;
  }
  #profile-connections {
    left: 12px;
    bottom: 58px;
    max-width: calc(100vw - 24px);
  }
  .explore-connections {
    padding: 4px 0;
  }
  .explore-connections button {
    padding: 5px 9px;
    font-size: 11px;
  }
  .explore-connections img {
    width: 23px;
    height: 23px;
  }
  .soundcloud-comments,
  :root[data-view="map"] .soundcloud-comments,
  :root[data-view="library"] .soundcloud-comments,
  :root[data-view="shelf"] .soundcloud-comments {
    left: 16px;
    right: auto;
    top: auto;
    bottom: 62px;
    width: calc(100% - 32px);
    transform: none;
  }
  .soundcloud-comments-panel {
    max-height: 165px;
  }
  .playlist-view {
    inset: 135px 16px 62px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .playlist-art {
    flex: none;
    margin: 8px auto 0;
    width: min(100%, 360px);
  }
  .playlist-details {
    min-height: 200px;
    flex: 1;
    padding: 0;
  }
  .playlist-details h1 {
    font-size: 24px;
    margin: 12px 0 6px;
  }
  .playlist-details select {
    padding: 7px;
    font-size: 12px;
  }
  #playlist-tracks button {
    padding: 11px 6px;
  }
  :root[data-view="playlist"] .soundcloud-comments {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .playlist-disc {
    animation: none;
  }
}

#view-mode-toggle {
  display: none !important;
}
#page-view {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: 0;
  max-width: 94px;
  cursor: pointer;
}
:root[data-theme-preset="plain"] #music-global-search {
  border-radius: 23px !important;
}
:root[data-theme-preset="plain"] #music-global-search button {
  border-radius: 18px !important;
}
#music-global-search {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#music-global-search input {
  font-size: 14px;
}
.playlist-playback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}
.playlist-playback button {
  background: var(--discovery-surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 38px;
  padding: 7px 14px;
  cursor: pointer;
}
.playlist-playback input {
  accent-color: var(--accent);
  flex: 1;
  min-width: 80px;
}
.playlist-playback small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
:root[data-soundcloud-profile="open"] .playlist-view {
  top: 218px;
}
:root[data-view="playlist"] .soundcloud-comments {
  bottom: 65px;
  left: 5%;
  width: min(470px, 43vw);
}
:root[data-creation-modal="open"] #universal-volume {
  display: none;
}
.shelf-spine-detail {
  position: absolute;
  inset: 4px;
  border-left: 1px solid #ffffff30;
  border-right: 1px solid #0003;
}
@media (max-width: 760px) {
  #explore-open {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 28;
    border: 1px solid var(--discovery-border);
    border-radius: 18px;
    padding: 9px 14px;
    background: var(--discovery-surface);
    font-size: 12px;
  }
  #page-view {
    max-width: 80px;
    font-size: 12px;
  }
  :root[data-soundcloud-profile="open"] .playlist-view {
    top: 224px;
  }
  :root[data-view="playlist"] .soundcloud-comments {
    display: none;
  }
}

.soundcloud-comments-panel {
  max-height: 180px;
}
:root:has(#site-player:not([hidden])) #universal-volume {
  bottom: 110px;
}
:root[data-view="playlist"] .playlist-disc img {
  filter: var(--playlist-art-filter, none);
}
.playlist-view[data-finish="engraved"] {
  --playlist-art-filter: grayscale(1) contrast(3);
}
.playlist-view[data-finish="frosted"] .playlist-disc::after {
  background: linear-gradient(130deg, #fff2, #fff8, #fff1);
}
.playlist-view[data-finish="brushed"] .playlist-disc::after {
  background: repeating-radial-gradient(circle, #fff0 0 1px, #fff5 1.2px 1.8px);
}
.playlist-view[data-finish="pearl"] .playlist-disc::after {
  background: conic-gradient(#e7d4fa80, #d4efef50, #ece7bb70, #e7d4fa80);
}
@media (max-width: 760px) {
  .soundcloud-comments-panel {
    max-height: 150px;
  }
  .soundcloud-comments-panel li p {
    font-size: 12px;
  }
  :root[data-creation-modal="open"] #explore-open {
    display: none;
  }
}

.soundcloud-comments-panel {
  background: none;
  border-radius: 0;
  padding: 4px 0;
}
.soundcloud-comments-panel footer button {
  border: 0;
  background: none;
  padding: 5px 0;
}
.soundcloud-comments-panel li:last-child {
  border-bottom: 0;
}

.playlist-art {
  flex-direction: column;
  justify-content: center;
}
:root[data-view="playlist"] #playlist-view .soundcloud-comments {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: min(100%, 470px);
  transform: none;
  margin-top: 14px;
  flex-shrink: 0;
}
:root[data-view="playlist"] #playlist-view .soundcloud-comments:not([hidden]) {
  display: block;
}
@media (min-width: 761px) {
  .playlist-art:has(.soundcloud-comments-panel:not([hidden]))
    .playlist-package {
    width: min(100%, calc((100vh - 400px) * 1.45));
  }
}



/* Background-specific options stay out of other themes, including editor search. */
#ps3-background-controls[hidden],#ps3-background-controls [data-ps3-field][hidden]{display:none!important}
#ps3-background-controls .theme-control-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
#ps3-background-controls [data-ps3-field]>label{display:grid;gap:7px}
#ps3-background-controls input[type=checkbox]{justify-self:start}
#ps3-background-controls input[type=range]{width:100%;min-width:0}
#ps3-background-controls details{margin-top:16px;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent);padding-top:12px}
#ps3-background-controls summary{cursor:pointer;font-size:14px;font-weight:600}

#ps3-background-controls .ps3-presets>label{display:grid;gap:8px;margin-top:18px}
#ps3-background-controls .ps3-presets select,#ps3-background-controls .ps3-presets input[type=text]{width:100%;min-width:0}
#ps3-background-controls .ps3-presets button{margin:8px 6px 8px 0}
#ps3-background-controls .ps3-presets small{display:block;opacity:.65;line-height:1.5}
#ps3-background-controls .ps3-parameter-name{font-size:11px;opacity:.55;line-height:1}
#ps3-background-controls .ps3-parameter-name:empty{display:none}