.memory-music {
  --music-ink: #26343d;
  --music-muted: #626d73;
  --music-accent: #9aafbb;
  --music-surface: #fffefb;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  color: var(--music-ink);
  font-family: inherit;
  text-align: left;
}

.memory-music > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid #cdd5d9;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.memory-music > summary::-webkit-details-marker { display: none; }
.memory-music > summary::marker { content: ''; }
.memory-music > summary:hover,
.memory-music[open] > summary { background: #edf0f1; }
.memory-music > summary:focus-visible,
.memory-music a:focus-visible { outline: 2px solid #416e89; outline-offset: 4px; }
.memory-music-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.memory-music-chevron { width: 12px; height: 12px; margin-left: 2px; flex: 0 0 auto; }
.memory-music[open] .memory-music-chevron { transform: rotate(180deg); }

.memory-music-body {
  position: absolute;
  z-index: 30;
  top: calc(100% + 12px);
  right: 0;
  width: min(390px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #d8dee1;
  border-radius: 8px;
  background: var(--music-surface);
  box-shadow: 0 10px 32px #30383e12;
}

.memory-music:not([open]) > .memory-music-body { display: none; }
.memory-music-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--music-ink); }
.memory-music-artist { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--music-muted); }
.memory-music-status { margin: 0 0 12px; color: var(--music-muted); font-size: 12px; line-height: 1.6; }
.memory-music-player { min-width: 0; min-height: 152px; }
.memory-music-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #edf0f1; }
.memory-music-footer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 13px 0 0; }
.memory-music-link { color: var(--music-ink); font-size: 12px; line-height: 1.5; text-underline-offset: 3px; }
.memory-music-hint { color: var(--music-muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 650px) {
  .memory-music { max-width: 100%; }
  .memory-music[open] { width: 100%; }
  .memory-music-body { position: static; width: 100%; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-music *, .memory-music *::before, .memory-music *::after { transition: none !important; animation: none !important; }
}