.chillsky-spotify {
  --cs-ink: #2b2721;
  --cs-muted: #736b60;
  --cs-line: #d9d3c9;
  --cs-olive: #59604a;
  --cs-orange: #b35d2e;
  color: var(--cs-ink);
  border-top: 1px solid var(--cs-ink);
  padding-top: 12px;
}

.chillsky-spotify__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--cs-muted);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chillsky-spotify__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-orange);
  box-shadow: 0 0 0 3px rgba(179, 93, 46, .10);
}

.chillsky-spotify__players {
  display: grid;
  gap: 16px;
}

.chillsky-spotify__player {
  min-width: 0;
}

.chillsky-spotify__player-label {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 0 7px;
}

.chillsky-spotify__number {
  color: var(--cs-orange);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}

.chillsky-spotify__player-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chillsky-spotify__player-copy strong,
.chillsky-spotify__player-copy span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chillsky-spotify__player-copy strong {
  color: var(--cs-ink);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
}

.chillsky-spotify__player-copy span {
  color: var(--cs-olive);
  font-size: 10px;
  line-height: 1.35;
}

.chillsky-spotify__embed {
  display: block;
  width: 100%;
  min-width: 0;
  height: 152px;
  border: 0;
  border-radius: 12px;
  background: #171717;
  box-shadow: 0 8px 22px rgba(43, 39, 33, .08);
}

.chillsky-spotify__note {
  margin: 12px 0 0;
  color: var(--cs-muted);
  font-size: 10px;
  line-height: 1.45;
}

.chillsky-spotify-error {
  padding: 10px 12px;
  border: 1px solid #d8b6a1;
  background: #fbf6f2;
  color: #6a3a22;
  font-size: 12px;
  line-height: 1.5;
}
