/* Every row follows C C♯ D D♯ E F F♯ G G♯ A A♯ B, including the loop seam. */
.pianola-premium .loop-carousel [data-piano-key] {
  --key-surface: #fff;
  --key-ink: #1b1b1b;
  --key-muted: #646464;
  --key-border: #d9d9d9;
  --key-accent: #ececec;
  background: var(--key-surface);
  color: var(--key-ink);
  border: 1px solid var(--key-border);
  border-radius: 5px 5px 12px 12px;
  box-shadow: inset 0 -4px 0 #00000006;
}

.pianola-premium .loop-carousel [data-piano-key='black'] {
  --key-surface: #1c1c1c;
  --key-ink: #fafafa;
  --key-muted: #bebebe;
  --key-border: #303030;
  --key-accent: #303030;
  box-shadow: inset 0 2px 0 #ffffff0b, inset 0 -5px 0 #00000038;
}

.pianola-premium .loop-carousel [data-piano-key]:hover {
  background: var(--key-surface);
  border-color: var(--key-muted);
}

.pianola-premium .loop-carousel [data-piano-key] :is(.song-card-copy strong, .review-name, h3) {
  color: var(--key-ink);
}

.pianola-premium .loop-carousel [data-piano-key] :is(.song-card-copy small, .song-card-tag, .review-profile, .story-number, .story-symbol, .review-quote-mark) {
  color: var(--key-muted);
}

.pianola-premium .loop-carousel [data-piano-key] :is(blockquote p, .story-card p) {
  color: var(--key-ink);
}

.pianola-premium .loop-carousel .story-card[data-piano-key] p {
  color: var(--key-muted);
}

.pianola-premium .loop-carousel [data-piano-key] :is(.review-avatar, .song-card-icon) {
  background: var(--key-accent);
  color: var(--key-ink);
}

.pianola-premium .loop-carousel .song-card[data-piano-key]::after {
  color: var(--key-accent);
}

.pianola-premium .loop-carousel [data-piano-key] .story-keyline {
  background: var(--key-muted);
}

.pianola-premium .loop-carousel a.song-card-tag {
  align-self: flex-start;
  padding: 5px 0;
  text-underline-offset: 4px;
}

.pianola-premium .loop-carousel a.song-card-tag:focus-visible {
  outline: 2px solid var(--key-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Native scrolling keeps the same card position during manual browsing. */

@media (prefers-reduced-motion: reduce) {
  .loop-carousel [data-loop-fill] { display: none; }
}