/* ME / Music Room — Obsidian Neon.
   Color and light pass only: same pixel art, layout, music behavior and Dread Raven.
   Black-violet enamel with cyan, amethyst and fuchsia light caught at the edges. */
:root {
  --night:#06030e;
  --ink:#e1dbf6;
  --violet:#ba8bff;
  --aqua:#65f7ff;
  --rose:#ff84df;
  --peach:#ffb2ec;
  --line:rgba(157,96,248,.5);
  --signal-cyan:#48efff;
  --signal-violet:#ac62ff;
  --signal-fuchsia:#ff4bc7;
  --signal-blue:#566bff;
}
html { background:#04020b; }
.room {
  background-color:#05020e;
  background-image:radial-gradient(ellipse at 13% 22%,rgba(83,24,152,.16),transparent 53%),
    radial-gradient(ellipse at 91% 78%,rgba(138,18,152,.17),transparent 58%);
}
.room-ambient { filter:blur(26px) saturate(1.22) hue-rotate(-2deg) brightness(.52); }
.room:before {
  background:radial-gradient(ellipse at 50% 48%,transparent 30%,rgba(6,2,17,.25) 66%,rgba(3,1,9,.8)),
    linear-gradient(180deg,rgba(5,1,15,.58),transparent 24%,transparent 60%,rgba(4,1,12,.84));
}
/* Keep every original pixel. A slight violet night grade makes the neon read better. */
.scene-art { image-rendering:pixelated;filter:saturate(1.15) contrast(1.13) brightness(.9) hue-rotate(-3deg); }
.scene-plate:before {
  background:linear-gradient(135deg,rgba(151,47,240,.095),transparent 28%,transparent 63%,rgba(40,224,255,.085)),
    radial-gradient(ellipse at 50% 51%,transparent 44%,rgba(8,1,20,.17));
}
.scene-plate:after {box-shadow:inset 0 0 44px 22px rgba(4,1,14,.37)}
.room-header .back-link {
  background:linear-gradient(135deg,rgba(10,5,28,.97),rgba(24,6,43,.94));
  border-color:#6beaffab;color:#71faff;
  box-shadow:inset 0 0 0 1px #64f4ff24,0 0 17px #3fe5ff42;
}
.room-header .room-signature {
  background:linear-gradient(125deg,rgba(9,3,27,.91),rgba(25,4,44,.86));
  border-color:#a267f6a9;box-shadow:0 0 20px #a34eff39,inset 0 0 12px #a953ec26;
}
.room-signature small {color:#cda7ff!important}
.room-prompt {
  background:rgba(8,3,22,.85);
  border-color:rgba(191,102,255,.7);
  color:#eac8ff;
  box-shadow:0 0 16px #9c44ff29,inset 0 0 9px #a946e81f;
}
.room-prompt:before {color:#4aefff}
.gallery-dock {
  background:linear-gradient(125deg,rgba(8,3,22,.96),rgba(23,4,38,.95));
  border-color:rgba(190,99,255,.72);
  box-shadow:0 0 0 1px #4cedff1e,0 0 23px #bf49ff30,inset 0 1px #d99fff24;
}
.gallery-dock:before {background:#4af2ff;box-shadow:0 0 13px #4af2ff}
.gallery-dock:after {background:#ff50d2;box-shadow:0 0 13px #ff50d2}
.dock-open {color:#82f7ff;text-shadow:0 0 10px #3fe9ff8a}
.dock-tile {
  background:#080315;border-color:#5befff9e;
  box-shadow:0 0 9px #41e8ff27;
}
.dock-tile:nth-child(4n+2){border-color:#ff57d0ad;box-shadow:0 0 12px #ff4ecb40}
.dock-tile:nth-child(4n+3){border-color:#b77affad}
.dock-tile:nth-child(4n+4){border-color:#68dbffaa}
.dock-tile span {background:#080318dc;color:#dbd1ff}
.mini-player {background:linear-gradient(100deg,#08051beb,#230735eb);border-color:#89ecffab;box-shadow:0 0 19px #43efff36}
.mini-player button:not(.mini-open) {background:#140829;border:1px solid #54f0ff;color:#71faff;box-shadow:0 0 10px #46deff44}
.overlay-scrim,.shell-overlay .overlay-scrim {background:rgba(2,1,9,.9)}
.portal-panel {
  --rail-border:rgba(192,93,255,.82);
  background:radial-gradient(ellipse at 100% 0%,rgba(85,16,129,.24),transparent 42%),
    radial-gradient(ellipse at 0% 80%,rgba(41,10,93,.14),transparent 43%),
    linear-gradient(135deg,#080314,#0b041c 50%,#110620);
  box-shadow:0 0 0 1px #4debff23,0 0 28px #a645ff3b,0 24px 120px #000e;
}
.portal-panel::before {opacity:.2!important;background-image:linear-gradient(#ba66ff15 1px,transparent 1px),linear-gradient(90deg,#ba66ff15 1px,transparent 1px)}
.portal-panel::after {border-color:#af70ff22}
.panel-head {background:linear-gradient(100deg,#1406229e,#22092e87 65%,transparent);border-bottom-color:#ac55fc75}
.panel-head:before {background:linear-gradient(90deg,#50f2ff,#ad50ff,#ff54ce)}
.panel-title {filter:drop-shadow(0 0 13px rgba(176,88,255,.35))}
.close-button {background:#13061f;border-color:#f35ad8a6;color:#ff74e1;box-shadow:0 0 12px #dc39d32a}
.close-button:hover,.close-button:focus-visible {background:#210b32}
.now-playing,.archive-shelf {
  background:linear-gradient(140deg,rgba(7,3,19,.99),rgba(14,5,30,.99) 55%,rgba(23,7,39,.99));
  border-color:#aa60ffab;
  box-shadow:inset 0 1px #c9a2ff2f,inset 0 0 18px #a741ff12,0 0 17px #9343ff20;
}
.now-playing:before {background:linear-gradient(90deg,#48f3ff,#a24dff,transparent);box-shadow:0 0 14px #48f3ff89}
.archive-shelf {border-color:#e35bdc97}
.archive-shelf:before {background:linear-gradient(90deg,#ff4ecb,#a752ff,transparent);box-shadow:0 0 14px #ff4ecb7d}
.player-top,.shelf-head {color:#7cf4ff}
.player-top span:first-child:before,.shelf-head:before {color:#ff5bcb}
.track-byline {color:#da9cff}
.time-row {color:#a8a0da}
.seek {background:linear-gradient(90deg,#5df5ff var(--seek-progress),rgba(147,70,215,.28) var(--seek-progress));box-shadow:0 0 13px #58edff2d}
.seek::-webkit-slider-thumb {background:#0c0822;border-color:#65f7ff;box-shadow:0 0 13px #5cf0ff9c}
.seek::-moz-range-thumb {background:#0c0822;border-color:#65f7ff;box-shadow:0 0 13px #5cf0ff9c}
.transport button {
  background:linear-gradient(140deg,#0c0520,#1a0931);
  border:1px solid #ac66fdbe;
  color:#ba96ff;
  box-shadow:inset 0 0 14px #7d35d624,0 0 12px #a155fb1f;
}
.transport button:hover,.transport button:focus-visible {border-color:#5cf4ff;box-shadow:0 0 17px #53edff65;outline-color:#4ce8ff}
.transport .play-main {
  background:radial-gradient(circle at 50% 35%,#231044,#0c061f 74%);
  border:2px solid #5ff6ff;
  border-radius:16px;
  color:#6bfbff;
  text-shadow:0 0 10px #43eefd;
  box-shadow:inset 0 0 19px #7029cc71,0 0 0 1px #b851fb79,0 0 22px #4eefff99,0 0 33px #c13cff30;
}
.transport .play-main:hover,.transport .play-main:focus-visible {
  color:#efffff;border-color:#84ffff;
  box-shadow:inset 0 0 20px #a344ff75,0 0 28px #5af7ffc4,0 0 42px #cf4cff5c;
}
.player-actions .action-link,.player-actions .action-button {
  background:linear-gradient(110deg,#100620,#1c0a30);
  color:#ebc9ff;box-shadow:inset 0 0 15px #9f43ea16;
}
.player-actions .action-link {border-color:#56efffbd;color:#9afaff}
.player-actions .action-button {border-color:#e365e1b8;color:#fbb4f1}
.track-row {
  background:linear-gradient(110deg,#100723,#1a092b);
  border-color:#ac5bffae;
  box-shadow:inset 0 0 18px #a53eff23;
}
.track-row strong {color:#f6deff}
.track-row small {color:#c9a2e8}
.track-row .row-time {color:#67efff}
.gallery-card {background:linear-gradient(140deg,#0e071e,#1c0a30);border-color:#7bdbffad}
.gallery-card:nth-child(3n+2){border-color:#ff55d6bf}
.gallery-card:nth-child(3n+3){border-color:#b673ffbf}
.gallery-card span {background:linear-gradient(90deg,#0b061d,#200b2f);border-top-color:#ae61ff70;color:#ede1ff}
.art-lightbox {background:rgba(3,1,13,.96)}
.art-figure img {border-color:#bb65ff9c;box-shadow:0 0 0 1px #5becff47,0 0 36px #b34dff46}
.art-figure figcaption,.art-step {background:#100521e8;border-color:#af5dff9c;color:#deb6ff}
.bey-profile summary {background:linear-gradient(135deg,#0b051e,#19092b);border-color:#a855ff9c;color:#cba2ff}
.bey-profile summary span {color:#55f8ff}
.bey-profile summary:hover,.bey-profile[open] summary {border-color:#4ff3ff;box-shadow:0 0 12px #4ff3ff4e}
.bey-profile-panel {background:linear-gradient(155deg,#080418f9,#140723f9 65%,#1c092efa);border-color:#b267ffdc;box-shadow:0 14px 34px #000c,0 0 24px #ac48ff58}
.bey-profile-panel h3 {color:#e9c0ff}
.bey-profile-panel h3 span {color:#72faff}
.bey-profile-panel dt {color:#b48cdb}
.bey-profile-panel dd {color:#efddff}

/* Jukebox loading ritual — same platter, same panel, no cut to another view.
   The Dread Raven is visible and motionless before a song is chosen. */
.now-playing .loaded-controls {
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows 760ms cubic-bezier(.22,.7,.18,1);
}
.now-playing .loaded-inner {
  min-height:0;
  overflow:hidden;
  opacity:1;
  transform:translateY(0);
  transition:opacity 680ms ease 180ms,transform 760ms ease;
}
.now-playing.is-dormant .loaded-controls {grid-template-rows:0fr}
.now-playing.is-dormant .loaded-inner {
  opacity:0;
  transform:translateY(-6px);
  visibility:hidden;
  pointer-events:none;
}
.now-playing.is-dormant .disc-stage,
.now-playing.is-loading .disc-stage {
  background:none;
  border-radius:0;
  box-shadow:none;
  opacity:1;
}
.now-playing .disc-stage .disc.bey-disc {
  transition:filter 850ms ease, opacity 850ms ease;
}
.now-playing.is-dormant .disc-stage .disc.bey-disc {
  visibility:visible;
  opacity:.78;
  filter:brightness(.78) saturate(.8) drop-shadow(0 0 12px rgba(119,57,187,.3));
  animation-play-state:paused;
}
.now-playing.is-loading .disc-stage .disc.bey-disc {
  opacity:.93;
  filter:brightness(.97) saturate(1.05) drop-shadow(0 0 24px rgba(160,69,243,.59));
  animation-play-state:paused;
}
.now-playing.is-loading .disc-stage::after {
  display:block;
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  border:1px solid rgba(103,243,255,.45);
  background:none;
  box-shadow:0 0 20px rgba(125,70,234,.28),inset 0 0 17px rgba(103,243,255,.14);
  pointer-events:none;
  animation:jukebox-seat-glow 1650ms ease-in-out 1;
}
@keyframes jukebox-seat-glow {
  0%,100% {opacity:0}
  22%,66% {opacity:.45}
  90% {opacity:1}
}
.archive-shelf .track-row.is-loading {
  border-color:#75f5ffb5;
  box-shadow:inset 0 0 21px #66e5ff31,0 0 17px #66e5ff3d;
}
.archive-shelf .track-row.is-selected {
  border-color:#66eeffd8;
  box-shadow:inset 0 0 16px #41dfff21,0 0 17px #47e6ff2f;
}
.archive-shelf .track-row.is-selected strong {color:#e7ffff}
/* First awakening: a faceted song crystal, never a box or record sleeve.
   Track-specific colors mirror each element in the inner song collection. */
.jukebox-sleeve{
  --transfer-color:#fd72b8;
  --transfer-secondary:#ffb258;
  --transfer-halo:rgba(249,69,142,.42);
  --transfer-deep:rgba(113,18,70,.28);
  position:fixed;
  z-index:1000;
  top:0;left:0;
  width:116px;height:140px;
  display:grid;place-items:center;
  padding:0;
  border:0;border-radius:0;
  background:transparent;
  box-shadow:none;
  pointer-events:none;
  isolation:isolate;
  transform-origin:center center;
  will-change:transform,opacity;
  filter:drop-shadow(0 0 14px var(--transfer-halo));
}
.jukebox-sleeve[data-track="925444"]{
  --transfer-color:#65eafa;
  --transfer-secondary:#956aff;
  --transfer-halo:rgba(43,186,248,.4);
  --transfer-deep:rgba(13,68,119,.3);
}
.jukebox-sleeve::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--transfer-halo),transparent 72%);
  filter:blur(15px);
  animation:jukebox-gem-halo 1.7s ease-in-out infinite alternate;
}
.jukebox-transfer-crystal{
  display:grid;place-items:center;
  position:relative;
  width:100%;height:100%;
}
.jukebox-transfer-crystal svg{
  display:block;
  width:100%;height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 5px var(--transfer-halo));
  animation:jukebox-gem-facets 1.45s ease-in-out infinite alternate;
}
.jukebox-transfer-crystal .facet-cut{
  fill:var(--transfer-deep);
  stroke:var(--transfer-color);
  stroke-width:2.7px;
  filter:drop-shadow(0 0 2px var(--transfer-color));
}
.jukebox-transfer-crystal .facet-left{
  fill:color-mix(in srgb,var(--transfer-color) 19%,transparent);
}
.jukebox-transfer-crystal .facet-right{
  fill:color-mix(in srgb,var(--transfer-secondary) 16%,transparent);
}
.jukebox-transfer-crystal .facet-center{
  fill:color-mix(in srgb,var(--transfer-color) 24%,transparent);
}
.jukebox-transfer-crystal .facet-lines{
  stroke:var(--transfer-secondary);
  stroke-width:1.2px;
  opacity:.82;
}
.jukebox-transfer-crystal .facet-heart{
  fill:color-mix(in srgb,var(--transfer-color) 42%,transparent);
  stroke:var(--transfer-color);
  stroke-width:1.4px;
  filter:drop-shadow(0 0 5px var(--transfer-color));
}
@keyframes jukebox-gem-halo{
  from{opacity:.58;transform:scale(.86)}
  to{opacity:1;transform:scale(1.06)}
}
@keyframes jukebox-gem-facets{
  from{filter:drop-shadow(0 0 4px var(--transfer-halo));opacity:.86}
  to{filter:drop-shadow(0 0 11px var(--transfer-halo));opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .now-playing .loaded-controls,.now-playing .loaded-inner,
  .now-playing .disc-stage .disc.bey-disc {transition:none}
  .now-playing.is-loading .disc-stage::after {animation:none}
}

/* Music shelf: title first; only verified release dates below (MM/DD/YYYY). */
.archive-shelf .track-row {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:start;
  gap:4px;
  padding:19px 16px;
  min-height:70px;
}
.archive-shelf .track-row strong {
  font-size:clamp(10px,2.5vw,12px);
  line-height:1.5;
}
.archive-shelf .track-row .release-date {
  display:block;
  color:#bb92da;
  font:400 11px/1.4 var(--body);
  letter-spacing:.02em;
}
.archive-shelf .track-row .release-date[hidden] {display:none!important}


/* ME / Music Room — absorbed-shelf selector.
   The visible record is consumed by the existing jukebox animation. After
   seating, only a tiny SONGS dropdown survives. No second panel or extra copy. */
.archive-shelf .song-selector {
  width:100%;
  min-width:0;
}
.archive-shelf .song-selector > summary {
  display:none;
  list-style:none;
}
.archive-shelf .song-selector > summary::-webkit-details-marker {display:none}
.archive-shelf.is-absorbing .song-list {
  opacity:.16;
  transform:translateY(-4px) scale(.98);
  filter:brightness(.64);
  transition:opacity 1450ms ease,transform 1450ms ease,filter 1450ms ease;
  pointer-events:none;
}
.archive-shelf.is-absorbed {
  justify-self:end;
  width:auto;
  max-width:100%;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.archive-shelf.is-absorbed::before {display:none}
.archive-shelf.is-absorbed .song-selector {
  position:relative;
  width:auto;
}
.archive-shelf.is-absorbed .song-selector > summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(169,101,255,.58);
  border-radius:7px;
  background:linear-gradient(130deg,rgba(9,5,24,.91),rgba(28,8,45,.93));
  color:#caa2ed;
  font:400 9px/1.2 var(--pixel);
  letter-spacing:.035em;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  box-shadow:inset 0 1px #9d7adc15,0 0 13px #a153f529;
  transition:border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.archive-shelf.is-absorbed .song-selector > summary .song-selector-icon {
  color:#6df5ff;
  font:600 17px/1 var(--body);
}
.archive-shelf.is-absorbed .song-selector > summary .song-selector-chevron {
  color:#d394ff;
  font:600 15px/1 var(--body);
  transition:transform .18s ease;
}
.archive-shelf.is-absorbed .song-selector[open] > summary .song-selector-chevron {
  transform:rotate(180deg);
}
.archive-shelf.is-absorbed .song-selector > summary:hover,
.archive-shelf.is-absorbed .song-selector[open] > summary {
  border-color:#6aebffb8;
  color:#e9d9ff;
  box-shadow:0 0 14px #50e6ff40,inset 0 0 10px #6440b92b;
}
.archive-shelf.is-absorbed .song-selector > summary:focus-visible {
  outline:2px solid #8cf6ff;
  outline-offset:3px;
}
.archive-shelf.is-absorbed .song-selector:not([open]) > .song-list {
  display:none;
}
.archive-shelf.is-absorbed .song-selector[open] > .song-list {
  position:absolute;
  z-index:24;
  top:calc(100% + 9px);
  right:0;
  width:min(280px,calc(100vw - 40px));
  min-width:210px;
  padding:9px;
  border:1px solid #a569ff9c;
  border-radius:10px;
  background:linear-gradient(140deg,#0a041cf9,#210a35fa);
  box-shadow:0 17px 37px #000b,0 0 19px #ad56fa3b;
  opacity:1;
  transform:none;
  filter:none;
}
.archive-shelf.is-absorbed .song-list .track-row {
  min-height:58px;
  margin:0;
  padding:13px 12px;
}
/* On phones, an opened selector folds down naturally within the scrollable room. */
@media(max-width:720px){
  .archive-shelf.is-absorbed .song-selector[open] > .song-list {
    position:relative;
    top:auto;
    right:auto;
    width:min(280px,calc(100vw - 40px));
    min-width:0;
    margin-top:8px;
  }
}
@media(prefers-reduced-motion:reduce){
  .archive-shelf.is-absorbing .song-list {transition:none}
  .archive-shelf.is-absorbed .song-selector > summary {transition:none}
}


/* Integrated Music Room song selector — one panel, no separate shelf card.
   In dormancy a plain song name waits beneath Dread Raven. Once absorbed,
   the SONGS control rests inside the same player, below SAVE / SHARE. */
.music-layout {
  grid-template-columns:minmax(0,1fr);
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  gap:0;
}
.music-layout > .now-playing {
  min-width:0;
  width:100%;
  overflow:visible;
}
.now-playing > .archive-shelf {
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  margin:8px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.now-playing > .archive-shelf::before {display:none}
.now-playing > .archive-shelf .song-selector {width:100%;min-width:0}
.now-playing.is-dormant > .archive-shelf {
  margin-top:0;
  padding-top:2px;
}
.now-playing.is-dormant .song-list .track-row {
  width:100%;
  padding:14px 10px 15px;
  min-height:60px;
  border:0;
  border-top:1px solid rgba(161,86,249,.38);
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#e9d2ff;
  text-align:left;
  transition:border-color .2s ease,background .2s ease;
}
.now-playing.is-dormant .song-list .track-row:hover,
.now-playing.is-dormant .song-list .track-row:focus-visible {
  background:linear-gradient(90deg,rgba(143,67,216,.16),transparent);
  border-top-color:#63efffaf;
}
.now-playing.is-dormant .song-list .track-row strong {
  color:#d8bdff;
  text-shadow:0 0 10px #ad5aff40;
}
.now-playing > .archive-shelf.is-absorbed {
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  margin-top:9px;
  padding:0;
  width:100%;
}
.now-playing > .archive-shelf.is-absorbed .song-selector {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:auto;
  max-width:100%;
}
.now-playing > .archive-shelf.is-absorbed .song-selector > summary {
  min-height:34px;
  padding:7px 10px;
  border-color:rgba(173,108,255,.42);
  background:rgba(21,8,38,.38);
  box-shadow:none;
}
.now-playing > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
  position:relative;
  inset:auto;
  z-index:2;
  box-sizing:border-box;
  display:block;
  min-width:0;
  width:min(290px,calc(100vw - 80px));
  margin-top:7px;
  padding:4px 0 0;
  border:0;
  border-top:1px solid rgba(154,81,228,.4);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.now-playing > .archive-shelf.is-absorbed .song-list .track-row {
  border:0;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(122,43,206,.13),transparent);
  box-shadow:none;
}
.now-playing > .archive-shelf.is-absorbed .song-list .track-row:hover {
  background:linear-gradient(90deg,rgba(122,43,206,.26),transparent);
}
.now-playing .player-status:empty {display:none}
@media(max-width:720px){
  .music-layout {max-width:100%;grid-template-columns:minmax(0,1fr)}
  .now-playing > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
    position:relative;
    margin-top:7px;
    width:min(290px,calc(100vw - 80px));
  }
}


/* Closed jukebox record chooser — a quiet invitation, not an exposed song.
   Reveal the title list only when someone opens SELECT RECORD. */
.now-playing .song-label-active {display:none}
.now-playing.is-seated .song-label-active {display:inline}
.now-playing.is-seated .song-label-dormant {display:none}
.now-playing.is-dormant > .archive-shelf {
  margin-top:0;
  padding-top:4px;
}
.now-playing.is-dormant > .archive-shelf .song-selector {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:100%;
  position:relative;
}
.now-playing.is-dormant > .archive-shelf .song-selector > summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  min-height:39px;
  padding:9px 12px;
  border:1px solid rgba(150,101,227,.55);
  border-radius:7px;
  background:linear-gradient(120deg,rgba(18,6,38,.52),rgba(16,5,31,.32));
  box-shadow:inset 0 1px #b77cff14,0 0 14px #ac53ff17;
  color:#d4b4f4;
  font:400 9px/1.2 var(--pixel);
  letter-spacing:.06em;
  cursor:pointer;
  list-style:none;
  -webkit-user-select:none;
  user-select:none;
  transition:border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.now-playing.is-dormant > .archive-shelf .song-selector > summary .song-selector-icon {
  color:#76eeff;
  font:600 16px/1 var(--body);
}
.now-playing.is-dormant > .archive-shelf .song-selector > summary .song-selector-chevron {
  color:#ae82ef;
  font:600 15px/1 var(--body);
  transition:transform .18s ease;
}
.now-playing.is-dormant > .archive-shelf .song-selector[open] > summary .song-selector-chevron {
  transform:rotate(180deg);
}
.now-playing.is-dormant > .archive-shelf .song-selector > summary:hover,
.now-playing.is-dormant > .archive-shelf .song-selector[open] > summary {
  color:#f1e7ff;
  border-color:rgba(105,241,255,.74);
  box-shadow:0 0 15px #5cf0ff32,inset 0 0 10px #a43cfa17;
}
.now-playing.is-dormant > .archive-shelf .song-selector > summary:focus-visible {
  outline:2px solid #77f5ff;
  outline-offset:3px;
}
.now-playing.is-dormant > .archive-shelf .song-selector:not([open]) > .song-list {
  display:none!important;
}
.now-playing.is-dormant > .archive-shelf .song-selector[open] > .song-list {
  box-sizing:border-box;
  display:block;
  position:relative;
  width:min(340px,100%);
  min-width:0;
  margin-top:9px;
  padding:4px 8px 0;
  border:0;
  border-top:1px solid rgba(170,94,252,.36);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.now-playing.is-dormant .song-list .track-row {
  border-top:0;
  padding:10px 9px 11px;
  min-height:48px;
  text-align:left;
}
.now-playing.is-dormant .song-list .track-row strong {
  font-size:clamp(9px,2.6vw,11px);
}


/* Centered stationary song picker — controls remain fixed when the list opens.
   Absorbed state only: SELECT RECORD above remains unchanged. */
.now-playing > .archive-shelf.is-absorbed {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  margin-top:14px;
}
.now-playing > .archive-shelf.is-absorbed .song-selector {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:100%;
  min-width:0;
}
.now-playing > .archive-shelf.is-absorbed .song-selector > summary {
  box-sizing:border-box;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:min(172px,90%);
  min-height:46px;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(165,107,253,.64);
  border-radius:9px;
  background:linear-gradient(130deg,rgba(15,6,34,.86),rgba(34,9,53,.78));
  box-shadow:inset 0 1px #bf95ff22,0 0 16px #9e4fff29;
  color:#e1c6ff;
  font:400 10px/1.2 var(--pixel);
  letter-spacing:.04em;
  transform:none;
}
.now-playing > .archive-shelf.is-absorbed .song-selector > summary .song-selector-icon {
  font-size:19px;
}
.now-playing > .archive-shelf.is-absorbed .song-selector > summary .song-selector-chevron {
  font-size:17px;
}
.now-playing > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
  position:absolute;
  box-sizing:border-box;
  z-index:25;
  top:calc(100% + 8px);
  left:50%;
  right:auto;
  bottom:auto;
  inset-inline-start:50%;
  width:min(292px,100%);
  min-width:0;
  max-width:100%;
  margin:0;
  padding:8px;
  border:1px solid rgba(158,96,238,.52);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(12,5,27,.98),rgba(30,9,47,.98));
  box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 15px rgba(154,67,239,.2);
  transform:translateX(-50%);
}
@media(max-width:720px) {
  .now-playing > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
    position:absolute;
    top:calc(100% + 8px);
    left:50%;
    right:auto;
    margin:0;
    transform:translateX(-50%);
    width:min(292px,100%);
  }
}


/* One-state-machine player — no reflow when record is seated.
   The active controls always occupy their final layout dimensions, but are
   invisible and inert before selection. The sleeve lands in the SAME card,
   then the controls phase in without moving the disc or resizing the panel. */
.now-playing .player-deck {
  position:relative;
  isolation:isolate;
  display:block;
  width:100%;
  min-width:0;
}
.now-playing .player-deck > .loaded-controls,
.now-playing.is-dormant .player-deck > .loaded-controls,
.now-playing.is-loading .player-deck > .loaded-controls {
  box-sizing:border-box;
  display:grid;
  grid-template-rows:1fr;
  padding-bottom:65px;
  transition:none;
}
.now-playing .player-deck .loaded-inner {
  visibility:visible;
  opacity:1;
  transform:none;
  transition:opacity 950ms ease;
}
.now-playing.is-dormant .player-deck .loaded-inner,
.now-playing.is-loading .player-deck .loaded-inner {
  visibility:hidden;
  opacity:0;
  transform:none;
  pointer-events:none;
}
/* Give title, timeline and transport their own staggered light-up sequence.
   All pieces are laid out in final positions BEFORE the tap. */
.now-playing .player-deck .loaded-inner .track-title,
.now-playing .player-deck .loaded-inner .track-byline,
.now-playing .player-deck .loaded-inner .seek,
.now-playing .player-deck .loaded-inner .time-row,
.now-playing .player-deck .loaded-inner .transport,
.now-playing .player-deck .loaded-inner .player-actions {
  opacity:1;
  transform:none;
  transition:opacity 760ms ease,transform 760ms cubic-bezier(.18,.65,.25,1);
}
.now-playing.is-dormant .player-deck .loaded-inner .track-title,
.now-playing.is-dormant .player-deck .loaded-inner .track-byline,
.now-playing.is-dormant .player-deck .loaded-inner .seek,
.now-playing.is-dormant .player-deck .loaded-inner .time-row,
.now-playing.is-dormant .player-deck .loaded-inner .transport,
.now-playing.is-dormant .player-deck .loaded-inner .player-actions,
.now-playing.is-loading .player-deck .loaded-inner .track-title,
.now-playing.is-loading .player-deck .loaded-inner .track-byline,
.now-playing.is-loading .player-deck .loaded-inner .seek,
.now-playing.is-loading .player-deck .loaded-inner .time-row,
.now-playing.is-loading .player-deck .loaded-inner .transport,
.now-playing.is-loading .player-deck .loaded-inner .player-actions {
  opacity:0;
  transform:translateY(6px);
  transition-delay:0ms;
}
.now-playing.is-seated .player-deck .loaded-inner .track-title {transition-delay:80ms}
.now-playing.is-seated .player-deck .loaded-inner .track-byline {transition-delay:150ms}
.now-playing.is-seated .player-deck .loaded-inner .seek,
.now-playing.is-seated .player-deck .loaded-inner .time-row {transition-delay:230ms}
.now-playing.is-seated .player-deck .loaded-inner .transport {transition-delay:340ms}
.now-playing.is-seated .player-deck .loaded-inner .player-actions {transition-delay:460ms}
/* SELECT RECORD and the active SONGS picker occupy the same reserved deck.
   Because they are absolutely positioned, neither changes the card height. */
.now-playing .player-deck > .archive-shelf {
  position:absolute;
  z-index:9;
  top:5px;
  left:0;
  right:0;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  opacity:1;
  transition:opacity 370ms ease;
}
.now-playing .player-deck > .archive-shelf::before {display:none}
.now-playing .player-deck > .archive-shelf.is-absorbing {
  opacity:0;
  pointer-events:none;
}
.now-playing .player-deck > .archive-shelf .song-selector {
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  min-width:0;
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-selector > summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  min-height:39px;
  padding:9px 12px;
  border:1px solid rgba(150,101,227,.55);
  border-radius:7px;
  background:linear-gradient(120deg,rgba(18,6,38,.52),rgba(16,5,31,.32));
  box-shadow:inset 0 1px #b77cff14,0 0 14px #ac53ff17;
  color:#d4b4f4;
  font:400 9px/1.2 var(--pixel);
  letter-spacing:.06em;
  list-style:none;
  cursor:pointer;
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-selector > summary .song-selector-icon {
  color:#76eeff;
  font:600 16px/1 var(--body);
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-selector > summary .song-selector-chevron {
  color:#ae82ef;
  font:600 15px/1 var(--body);
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-selector:not([open]) > .song-list {display:none}
.now-playing.is-dormant .player-deck > .archive-shelf .song-selector[open] > .song-list {
  position:relative;
  box-sizing:border-box;
  display:block;
  width:min(340px,100%);
  min-width:0;
  margin-top:9px;
  padding:4px 8px 0;
  border:0;
  border-top:1px solid rgba(170,94,252,.36);
  border-radius:0;
  background:none;
  box-shadow:none;
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-list .track-row {
  width:100%;
  min-height:48px;
  padding:10px 9px 11px;
  border:0;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(141,53,213,.12),transparent);
  box-shadow:none;
  text-align:left;
}
.now-playing.is-dormant .player-deck > .archive-shelf .song-list .track-row:hover {
  background:linear-gradient(90deg,rgba(141,53,213,.24),transparent);
}
.now-playing .player-deck > .archive-shelf.is-absorbed {
  top:auto;
  bottom:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0;
  padding:0;
}
.now-playing .player-deck > .archive-shelf.is-absorbed .song-selector > summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:min(172px,90%);
  min-height:46px;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(165,107,253,.64);
  border-radius:9px;
  background:linear-gradient(130deg,rgba(15,6,34,.86),rgba(34,9,53,.78));
  box-shadow:inset 0 1px #bf95ff22,0 0 16px #9e4fff29;
  color:#e1c6ff;
  font:400 10px/1.2 var(--pixel);
  letter-spacing:.04em;
}
.now-playing .player-deck > .archive-shelf.is-absorbed .song-selector > summary .song-selector-icon {font-size:19px}
.now-playing .player-deck > .archive-shelf.is-absorbed .song-selector > summary .song-selector-chevron {font-size:17px}
.now-playing .player-deck > .archive-shelf.is-absorbed .song-selector[open] > .song-list {
  position:absolute;
  z-index:25;
  top:calc(100% + 8px);
  left:50%;
  right:auto;
  bottom:auto;
  transform:translateX(-50%);
  box-sizing:border-box;
  display:block;
  width:min(292px,100%);
  min-width:0;
  max-width:100%;
  margin:0;
  padding:8px;
  border:1px solid rgba(158,96,238,.52);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(12,5,27,.98),rgba(30,9,47,.98));
  box-shadow:0 14px 30px rgba(0,0,0,.7),0 0 15px rgba(154,67,239,.2);
}
.now-playing .player-deck > .archive-shelf.is-absorbed .song-selector:not([open]) > .song-list {display:none}
@media(prefers-reduced-motion:reduce){
  .now-playing .player-deck .loaded-inner,
  .now-playing .player-deck .loaded-inner .track-title,
  .now-playing .player-deck .loaded-inner .track-byline,
  .now-playing .player-deck .loaded-inner .seek,
  .now-playing .player-deck .loaded-inner .time-row,
  .now-playing .player-deck .loaded-inner .transport,
  .now-playing .player-deck .loaded-inner .player-actions,
  .now-playing .player-deck > .archive-shelf {transition:none}
}