.compact-player {color-scheme:dark;--bg:#161616;--panel-2:#17181d;--text:#fff;--muted:#c8c8c8;--border:#2a2b31;--accent:#ff6268;--accent-2:#ff7272}
.compact-player[data-theme="light"] {color-scheme:light;--bg:#f4f4f4;--panel-2:#f1f1f1;--text:#161616;--muted:#484848;--border:#d8d8d8;--accent:#800000;--accent-2:#aa1717}
.compact-player[data-theme="dim"] {color-scheme:dark;--bg:#38434e;--panel-2:#333d47;--text:#fff;--muted:#d5d9de;--border:rgba(255,255,255,.14);--accent:#ff5f52;--accent-2:#ff7a6f}
.compact-player {padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;align-items:center}
.cp-title {margin:0 0 8px;font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.cp-play {width:48px;height:48px;display:grid;place-items:center;background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:8px}
.cp-play svg {width:27px;height:27px;fill:currentColor;grid-area:1/1}
.cp-play .pause-icon,.cp-play.is-playing .play-icon {display:none}
.cp-play.is-playing .pause-icon {display:block}
.cp-time {display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-top:3px;gap:12px}
.cp-seek {width:100%;margin:0;padding:0;accent-color:var(--accent);display:block;appearance:none;background:transparent;height:22px;border:0}
.cp-seek::-webkit-slider-runnable-track {height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 56%,transparent)}
.cp-seek::-webkit-slider-thumb {appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--accent)}
.cp-seek::-moz-range-track {height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 56%,transparent)}
.cp-seek::-moz-range-thumb {width:16px;height:16px;border:0;border-radius:50%;background:var(--accent)}
.cp-seek:disabled {opacity:.4}
.cp-status {grid-column:1/-1;font-size:13px;color:var(--muted);margin:10px 0 0;overflow-wrap:anywhere}
.cp-status:empty {display:none}
.compact-player button:focus-visible,.compact-player input:focus-visible {outline:2px solid var(--accent-2);outline-offset:3px}
/* Separate layout only: the original demo and playback logic remain unchanged. */
.compact-player {
  grid-template-columns:36px minmax(0,1fr);
  gap:0 12px;
  padding:8px 12px;
}
.cp-play {width:36px;height:36px;border-radius:6px}
.cp-play svg {width:23px;height:23px}
.compact-player > div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2px 10px;
}
.cp-title {grid-column:1;margin:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-title[hidden] {display:none}
.cp-title > span {display:inline-block;white-space:nowrap}
.cp-title.cp-scrolling {text-overflow:clip}
.compact-player > div:has(.cp-title[hidden]) {grid-template-columns:minmax(0,1fr) auto}
.cp-time {grid-column:2;grid-row:1;margin:0;gap:5px;white-space:nowrap}
.cp-seek {grid-column:1/-1;grid-row:2;height:18px}
.compact-player > div:has(.cp-title[hidden]) .cp-seek {grid-column:1;grid-row:1}
.cp-time::before {content:"/";order:1}
.cp-duration {order:2}
@media(max-width:560px) {
  .compact-player {padding:8px 10px;gap:0 10px}
  .cp-time {font-size:11px}
}

.compact-player{box-sizing:border-box;color:var(--magic-text,var(--text));font-family:inherit;--text:var(--magic-text,#fff);--muted:var(--magic-text,#c8c8c8)}.compact-player *{box-sizing:border-box}.compact-player button,.compact-player input{font:inherit}.compact-player button{cursor:pointer}