:root{color-scheme:dark}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,rgba(201,161,114,.22),transparent 45%),#2a241c;color:#f7f0e6;font-family:Arial,Helvetica,sans-serif}
.back-link{position:fixed;top:20px;left:20px;color:#f7f0e6;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.back-link:hover,.back-link:focus-visible{color:#f0b85b}
.music-page{max-width:760px;margin:0 auto;padding:72px 20px 60px}
.music-page header h1{font:bold 2.5rem/1 Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;color:#fff;margin:0 0 10px}
.music-page header p{margin:0 0 18px;line-height:1.5;color:#e4d3bb}
.dialog-link{display:inline-block;padding:10px 18px;background:#a41106;border:1px solid #651d0e;color:#fff;text-decoration:none;font:bold 14px Arial,sans-serif;text-transform:uppercase;cursor:pointer}
.dialog-link:hover{background:#c11407}
#music-status{color:#f0b85b;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
#mix-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.mix-row{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(40,34,28,.92);border:1px solid rgba(255,255,255,.12)}
.mix-play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #651d0e;background:#a41106;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mix-play:hover{background:#c11407}
.mix-play[data-playing="true"]{background:#414b9b;border-color:#2b3370}
.mix-info{flex:1 1 auto;min-width:0}
.mix-name{font-weight:bold;font-size:1.05rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mix-author{color:#c9a175;font-size:.85rem}
.mix-votes{flex:0 0 auto;display:flex;gap:10px;font-size:.85rem;color:#e4d3bb;white-space:nowrap}
.mix-votes .up{color:#7fd66b}
.mix-votes .down{color:#e2695f}
.mix-progress{position:relative;height:3px;background:rgba(255,255,255,.15);margin-top:8px;overflow:hidden;display:none}
.mix-row.playing .mix-progress{display:block}
.mix-progress > i{position:absolute;left:0;top:0;bottom:0;width:0;background:#f0b85b}
@media(max-width:540px){
  .mix-row{flex-wrap:wrap}
  .mix-votes{order:3;width:100%}
}