/* [player] listening dock + Music grid. The dock is always dark (#0a0c12) so it matches the Bandcamp/Mixcloud iframes. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{padding-bottom:var(--ccp-h,0px);transition:padding-bottom .25s}
.ccp-slot{min-height:var(--slot-h,0px);margin:0 0 26px}
.ccp{--pk:#F6B79B;background:#0a0c12;color:#f4efe8;border:1px solid rgba(255,255,255,.14);border-radius:var(--r,14px);padding:12px 14px 14px;box-shadow:0 10px 40px rgba(0,0,0,.25);color-scheme:dark}
.ccp[hidden]{display:none}
.ccp-bar{display:flex;align-items:center;gap:12px;min-width:0}
.ccp-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:none;background:#1a2030}
.ccp-thumb[hidden]{display:none}
.ccp-now{display:flex;flex-direction:column;min-width:0;flex:1}
.ccp-label{font:700 .68rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pk)}
.ccp-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-tabs{display:flex;gap:2px;padding:3px;border-radius:99px;background:#1a2030;flex:none}
.ccp-tabs button{font:800 .78rem/1 var(--body);letter-spacing:.04em;color:#c9cfdb;background:transparent;border:0;border-radius:99px;padding:.55rem .85rem;cursor:pointer;min-height:36px}
.ccp-tabs button[aria-selected=true]{background:#c8121a;color:#fff}
.ccp-actions{display:flex;align-items:center;gap:6px;flex:none}
.ccp-open{font-weight:800;font-size:.82rem;color:var(--pk);text-decoration:none;padding:.5rem .7rem;border:1px solid rgba(246,183,155,.4);border-radius:99px;white-space:nowrap}
.ccp-open:hover{background:rgba(246,183,155,.12)}
.ccp-hide{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f4efe8;cursor:pointer;font-size:.9rem;display:none}
.ccp-pane{margin-top:12px}
.ccp-pane[hidden]{display:none}
.ccp-pane iframe{display:block;width:100%;height:120px;border:0;border-radius:10px;background:#0a0c12}
#ccp-pane-bc iframe{max-width:700px;background:transparent}
.ccp .ccp-load{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;border:1px dashed rgba(255,255,255,.22);border-radius:10px;background:#121621;color:#f4efe8;font:inherit;text-align:left;cursor:pointer}
.ccp .ccp-load:hover{border-color:#EE1921}
.ccp .ccp-load .pl{flex:none;width:42px;height:42px;border-radius:50%;background:#c8121a;color:#fff;display:grid;place-items:center}
.ccp .ccp-load b{display:block;font-weight:800}.ccp .ccp-load small{display:block;color:#b7c2cf;font-size:.8rem}
.ccp-mcrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.85rem;flex-wrap:wrap}
.ccp-mcrow label{font-weight:800;color:var(--pk)}
.ccp-mcrow select{flex:1;min-width:0;max-width:100%;font:inherit;color:#f4efe8;background:#1a2030;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:.45rem .6rem}
.ccp-mcrow a{color:var(--pk);font-weight:700}
.ccp-say{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
/* docked: fixed to the bottom of the screen (thegroovemaster.uk .player.is-docked) */
.ccp.is-docked{position:fixed;left:50%;bottom:10px;z-index:60;width:min(920px,calc(100% - 20px));transform:translateX(-50%);padding:10px 12px 12px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:ccp-in .28s ease-out}
.ccp.is-docked .ccp-hide{display:block}
.ccp.is-docked .ccp-pane{margin-top:10px}
.ccp.is-docked .ccp-mcrow{margin-bottom:8px}
@keyframes ccp-in{from{transform:translate(-50%,24px);opacity:0}to{transform:translateX(-50%);opacity:1}}
/* pages without a slot: the dock waits off-screen until the pill opens it (iframes stay alive while hidden) */
.ccp.no-slot:not(.is-docked){position:fixed;left:-200vw;bottom:0;width:min(920px,calc(100% - 20px));visibility:hidden}
.ccp-pill{position:fixed;right:14px;bottom:14px;z-index:59;display:flex;align-items:center;gap:8px;padding:.7rem 1.05rem;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:#0a0c12;color:#f4efe8;font:800 .85rem/1 var(--body);letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ccp-pill[hidden]{display:none}
.ccp-pill:hover{border-color:#EE1921}
.ccp-pill .eq{height:14px;gap:2px}.ccp-pill .eq i{width:3px;animation-play-state:paused}
.ccp-pill.is-on .eq i{animation-play-state:running}
@media (max-width:700px){
  .ccp{padding:10px}
  .ccp-bar{flex-wrap:wrap;row-gap:8px}
  .ccp-thumb{width:40px;height:40px}
  .ccp-now{flex-basis:calc(100% - 100px)}
  .ccp-tabs{order:3;flex:1}.ccp-tabs button{flex:1}
  .ccp-actions{order:4}
  .ccp-open .lbl{display:none}
  .ccp.is-docked{bottom:0;width:100%;border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .ccp.is-docked .ccp-thumb{display:none}
  .ccp.is-docked .ccp-mcrow{display:none}
}
@media (prefers-reduced-motion:reduce){.ccp.is-docked{animation:none}.ccp-pill .eq i{animation:none}body{transition:none}}
/* Music grid */
.mu-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.mu-f[hidden]{display:none}
.mu-q{flex:1 1 280px}
.mu-f input,.mu-f select{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem;min-height:44px}
.mu-f select{width:auto}
.mu-kinds{display:flex;gap:4px;flex-wrap:wrap}
.mu-kinds button,.mu-reset{font:700 .82rem/1 var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:.6rem .9rem;min-height:40px;cursor:pointer}
.mu-kinds button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mu-reset[hidden]{display:none}
.mu-count{margin:0 0 0 auto;font-size:.85rem;color:var(--mute)}
.mu-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.mu-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mu-card[hidden]{display:none}
.mu-card.is-playing{border-color:#EE1921;box-shadow:0 0 0 1px #EE1921}
.mu-art{aspect-ratio:1;background:var(--bg3)}
.mu-art img{width:100%;height:100%;object-fit:cover;display:block}
.mu-tx{padding:12px 12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.mu-tx h3{margin:0;font-size:.98rem;line-height:1.25}
.mu-tx h3 a{color:inherit;text-decoration:none}.mu-tx h3 a:hover{text-decoration:underline}
.mu-by,.mu-meta,.mu-hit{margin:0;font-size:.8rem;color:var(--mute)}
.mu-hit{color:var(--acc);font-weight:700}
.mu-act{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.mu-play{display:inline-flex;align-items:center;gap:6px;font:800 .82rem/1 var(--body);color:#fff;background:#EE1921;border:0;border-radius:99px;padding:.6rem .95rem;min-height:38px;cursor:pointer}
.mu-play:hover{background:#a50e15}
.mu-card.is-playing .mu-play{background:#0a0c12;color:#F6B79B;box-shadow:inset 0 0 0 1px #F6B79B}
.mu-buy{font-size:.8rem;font-weight:700;color:var(--acc)}
.mu-empty{padding:28px;border:1px dashed var(--line);border-radius:var(--r);text-align:center;color:var(--mute)}
.mu-empty[hidden],.mu-more[hidden]{display:none}
.mu-more{text-align:center;margin:22px 0 0}
.mu-src{font-size:.8rem;margin:18px 0 0}
.lite-bc.in-dock{border-color:#EE1921}
@media (max-width:520px){.mu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mu-tx{padding:10px}.mu-f select{flex:1}.mu-count{margin:0;width:100%}}
/* [player] queue (r3) */
.ccp-q-bar{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.ccp-tx{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#1a2030;color:#f4efe8;cursor:pointer;font-size:.9rem;flex:none}
.ccp-tx:disabled{opacity:.35;cursor:default}
.ccp-up{flex:1;min-width:0;margin:0;font-size:.82rem;color:#c9cfdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-up b{color:#f4efe8}.ccp-pos{display:inline-block;font-weight:800;color:var(--pk);margin-right:.35em}
.ccp-qbtn{font:800 .78rem/1 var(--body);color:#f4efe8;background:#1a2030;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:.55rem .8rem;min-height:36px;cursor:pointer;flex:none}
.ccp-qbtn[aria-expanded=true]{border-color:var(--pk);color:var(--pk)}
.ccp-qbtn span{display:inline-block;min-width:1.3em;padding:.15em .35em;margin-left:.2em;border-radius:99px;background:#c8121a;color:#fff;font-size:.72rem}
.ccp-q{margin-top:10px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.ccp-q[hidden]{display:none}
.ccp-q-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;margin-bottom:8px}
.ccp-q-tools button{font:700 .78rem/1 var(--body);color:#f4efe8;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:.45rem .7rem;cursor:pointer}
.ccp-auto{display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer}.ccp-auto input{accent-color:#c8121a;width:16px;height:16px}
.ccp-left{color:#b7c2cf;margin-right:auto}
.ccp-ql,.ccp-res{list-style:none;margin:0;padding:0;max-height:min(34vh,300px);overflow:auto;overscroll-behavior:contain}
.ccp-res{max-height:min(30vh,260px);margin-top:6px}
.ccp-qi{display:flex;align-items:center;gap:4px;border-radius:8px}
.ccp-qi.is-cur{background:rgba(238,25,33,.18);box-shadow:inset 3px 0 0 #EE1921}
.ccp-qi.is-done{opacity:.55}
.ccp-qt{flex:1;min-width:0;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:transparent;border:0;color:#f4efe8;font:inherit;padding:6px;cursor:pointer;border-radius:8px}
.ccp-qt img{grid-row:1/3;width:32px;height:32px;border-radius:4px;object-fit:cover;background:#1a2030}
.ccp-qt span,.ccp-res .ccp-rt{font-weight:700;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-qt small,.ccp-res small{color:#b7c2cf;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccp-qt:hover{background:rgba(255,255,255,.06)}
.ccp-qx,.ccp-res button,.mu-tl button{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:#f4efe8;cursor:pointer;font-size:.8rem}
.ccp-qx:disabled{opacity:.3;cursor:default}
.ccp-qe{color:#b7c2cf;font-size:.82rem;padding:8px 6px}
.ccp-add{margin-top:10px}
.ccp-add label{display:block;font-weight:800;font-size:.8rem;color:var(--pk);margin-bottom:6px}
.ccp-add input{width:100%;font:inherit;color:#f4efe8;background:#1a2030;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.6rem .75rem;min-height:42px}
.ccp-res li{display:grid;grid-template-columns:32px 1fr auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:5px 4px;border-radius:8px}
.ccp-res li img{grid-row:1/3;width:32px;height:32px;border-radius:4px;object-fit:cover}
.ccp-res li button{grid-row:1/3}
.ccp-res li .ccp-rt,.ccp-res li small{grid-column:2}
.ccp-res li button[data-r=play]{grid-column:3}.ccp-res li button[data-r=add]{grid-column:4}
.ccp-note{font-size:.74rem;color:#b7c2cf;margin:8px 0 0}
.ccp.is-docked .ccp-q-bar{margin-bottom:8px}
.ccp.is-docked .ccp-ql{max-height:min(28vh,240px)}
/* pop-out window */
body:has(.ccp.is-popout) .hd,body:has(.ccp.is-popout) .ft,body:has(.ccp.is-popout) .skip{display:none}
.ccp-popwrap{max-width:720px;margin:0 auto;padding:14px 12px 24px}.ccp-popwrap .kick{margin:0 0 8px}
.ccp-popnote{font-size:.8rem;margin:12px 2px 0}
.ccp.is-popout .ccp-ql{max-height:40vh}
/* grid additions */
.mu-qadd,.mu-tk{font:700 .78rem/1 var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:99px;padding:.55rem .75rem;min-height:36px;cursor:pointer}
.mu-qadd:hover,.mu-tk:hover{border-color:var(--ink)}
.mu-all{font:800 .82rem/1 var(--body);color:#fff;background:#c8121a;border:0;border-radius:99px;padding:.65rem 1rem;min-height:40px;cursor:pointer}
.mu-all:disabled{opacity:.4;cursor:default}
.mu-tl{list-style:decimal inside;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line);font-size:.8rem}
.mu-tl[hidden]{display:none}
.mu-tl li{display:flex;align-items:center;gap:6px;padding:3px 0}
.mu-tl li::marker{color:var(--mute)}
.mu-tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-tl small{color:var(--mute)}
.mu-tl button{width:28px;height:28px;color:var(--ink);border-color:var(--line)}
@media (max-width:700px){
  .ccp-up{order:5;flex-basis:100%}
  .ccp.is-docked .ccp-ql{max-height:24vh}
  .ccp.is-docked .ccp-res{max-height:22vh}
  .ccp.is-docked .ccp-note{display:none}
  .ccp-pop{display:none}
}

/* ---------- polish (r4): rhythm, states, alignment. Visual only. ---------- */
/* shared focus ring for keyboard users */
.ccp :focus-visible,.ccp-pill:focus-visible,.mu-page :focus-visible,.mu-f :focus-visible{outline:2px solid #F6B79B;outline-offset:2px}
.ccp button,.ccp a,.ccp-pill,.mu-card,.mu-card button,.mu-card a,.mu-f button,.mu-all{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease}
/* page + section rhythm on /music */
.mu-page .ph1 .lede{line-height:1.6;max-width:58ch;color:color-mix(in srgb,var(--ink) 86%,transparent)}
.mu-page .sh{margin-bottom:20px}
.mu-page .sh .disp{margin:.12em 0 .32em}
.mu-page .sh .mute{line-height:1.6;max-width:78ch}
/* filter bar: one height, quiet panel */
.mu-f{gap:10px;padding:12px;margin:0 0 22px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);border-radius:14px}
.mu-f input,.mu-f select{min-height:44px;background:var(--bg)}
.mu-f input:focus,.mu-f select:focus{outline:none;border-color:#F6B79B;box-shadow:0 0 0 3px rgba(246,183,155,.2)}
.mu-kinds{gap:6px}
.mu-kinds button{min-height:44px;padding:.6rem 1rem}
.mu-kinds button:not([aria-pressed=true]):hover{border-color:var(--ink)}
.mu-all{min-height:44px;padding:.65rem 1.15rem}
.mu-all:not(:disabled):hover{background:#a50e15}
.mu-count{font-variant-numeric:tabular-nums}
/* cards: aligned actions, steady title block, gentle hover */
.mu-grid{gap:20px}
.mu-card{border-radius:14px;transform:translateZ(0)}
.mu-art{aspect-ratio:1/1;overflow:hidden}
.mu-art img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mu-tx{padding:14px 14px 16px;gap:5px}
.mu-tx h3{font-size:1rem;line-height:1.3;letter-spacing:-.005em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.mu-tx h3 a:hover{text-decoration:none}
.mu-by,.mu-meta{line-height:1.45}
.mu-meta{font-variant-numeric:tabular-nums}
.mu-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}
.mu-act>*{width:100%;justify-content:center;text-align:center;min-height:40px}
.mu-play{padding:.6rem .7rem}
.mu-qadd,.mu-tk{min-height:40px;padding:.55rem .6rem}
.mu-buy{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);text-decoration:none;font-size:.78rem;letter-spacing:.02em}
.mu-act .mu-buy:nth-child(3){grid-column:1/-1} /* singles: Buy spans under Play/Queue */
.mu-tl{margin-top:10px}
.mu-tl li{padding:4px 0;gap:8px}
@media (hover:hover){
  .mu-card:hover{border-color:rgba(255,255,255,.26);transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(0,0,0,.7)}
  .mu-card:hover .mu-art img{transform:scale(1.035)}
  .mu-tx h3 a:hover{color:#F6B79B}
  .mu-qadd:hover,.mu-tk:hover{border-color:var(--ink);background:rgba(255,255,255,.05)}
  .mu-buy:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:var(--acc)}
  .mu-tl button:hover{border-color:#F6B79B;color:#F6B79B}
}
.mu-card.is-playing{border-color:#EE1921;box-shadow:0 0 0 1px #EE1921,0 14px 34px -18px rgba(238,25,33,.55)}
/* dock: calmer chrome, clear states */
.ccp{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px -20px rgba(0,0,0,.7)}
.ccp-bar{gap:14px}
.ccp-tabs{background:#141925;border:1px solid rgba(255,255,255,.06)}
.ccp-tabs button{padding:.55rem .95rem}
.ccp-tabs button[aria-selected=false]:hover{color:#fff;background:rgba(255,255,255,.07)}
.ccp-q-bar{gap:10px}
.ccp-hide:hover{border-color:#F6B79B;color:#F6B79B}
#ccp-prev:not(:disabled):hover,#ccp-next:not(:disabled):hover,.ccp-qbtn:hover,#ccp-pop:hover{border-color:#F6B79B;color:#F6B79B}
.ccp-qbtn{min-height:38px;padding:.55rem .9rem}
.ccp-q{margin-top:12px;padding-top:12px;border-top-color:rgba(255,255,255,.09)}
.ccp-q-tools{gap:10px;margin-bottom:10px}
.ccp-q-tools button{min-height:34px;padding:.45rem .85rem}
.ccp-q-tools button:hover{border-color:#F6B79B;color:#F6B79B}
.ccp-ql,.ccp-res{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding-right:2px}
.ccp-ql li+li,.ccp-res li+li{margin-top:2px}
.ccp-qi{gap:6px;padding-right:4px;border-radius:10px}
.ccp-qi:hover{background:rgba(255,255,255,.045)}
.ccp-qt:hover{background:transparent}
.ccp-qi.is-cur{background:linear-gradient(90deg,rgba(238,25,33,.16),rgba(238,25,33,.05));box-shadow:inset 3px 0 0 #EE1921}
.ccp-qt{padding:7px 8px;row-gap:1px}
.ccp-qt img{width:34px;height:34px;border-radius:5px}
@media (hover:hover){.ccp-qx:not(:disabled):hover,.ccp-res button:hover{border-color:#F6B79B;color:#F6B79B;background:rgba(246,183,155,.08)}}
.ccp-pill{box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.ccp-pill:hover{border-color:#F6B79B}
@media (max-width:640px){
  .ccp-bar{gap:10px}
  .mu-act{gap:6px}
  .ccp-qx,.ccp-res button{width:36px;height:36px}
  .ccp-q-tools button{min-height:36px}
  .ccp-open{min-width:40px;min-height:40px}
}
@media (max-width:520px){
  .mu-grid{gap:12px}
  .mu-tx{padding:11px 11px 13px}
  .mu-tx h3{font-size:.95rem}
  .mu-act{gap:6px}
  .mu-act>*{min-height:40px;padding-inline:.25rem;font-size:.76rem;white-space:nowrap}
  .mu-f{padding:10px}
  .mu-f>label:not(.mu-q),.mu-f>select{flex:1 1 0}
  .mu-kinds{flex:1 1 100%;gap:4px}.mu-kinds button{flex:1 1 auto;padding:.6rem .7rem;white-space:nowrap}
  .mu-all{flex:1}
}
@media (prefers-reduced-motion:reduce){.mu-card,.mu-art img,.ccp button{transition:none}.mu-card:hover{transform:none}.mu-card:hover .mu-art img{transform:none}}
/* footer links: comfortable tap targets, same visual rhythm */
.ft ul{gap:0}
.ft ul a{display:inline-flex;align-items:center;min-height:36px;transition:color .18s ease}
/* docked on shorter screens: keep the panel clear of the page */
@media (max-height:820px) and (min-width:641px){.ccp.is-docked .ccp-ql{max-height:min(22vh,200px)}.ccp.is-docked .ccp-res{max-height:min(20vh,180px)}}
@media (max-width:640px){
  .ccp.is-docked .ccp-up{order:0;flex:1 1 0;min-width:0;font-size:.78rem}
  .ccp.is-docked .ccp-q-bar{flex-wrap:nowrap;gap:8px}
  .ccp.is-docked{padding-top:9px}
  .ccp.is-docked .ccp-pane{margin-top:8px}
}
@media (max-width:640px){
  .ccp-q-tools{row-gap:6px}
  .ccp-q-tools .ccp-auto{order:1}
  .ccp-q-tools #ccp-shuf{order:2;margin-left:auto}
  .ccp-q-tools #ccp-clear{order:3}
  .ccp-q-tools .ccp-left{order:4;flex-basis:100%;color:#b7c2cf}
}

/* ---------- [polish r5] now-playing picture (jSpek spectrogram image, or a CSS equaliser) + slim default dock ---------- */
.ccp-actions{display:flex;align-items:center;gap:8px;flex:none}
.ccp-more{display:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f4efe8;cursor:pointer;font-size:.85rem;line-height:1;padding:0}
.ccp-more span{display:inline-block;transition:transform .2s ease}
.ccp.is-docked .ccp-more{display:inline-grid;place-items:center}
.ccp.is-slim .ccp-more span{transform:rotate(180deg)}
@media (hover:hover){.ccp-more:hover{border-color:#F6B79B;color:#F6B79B}}
.ccp-wf{position:relative;height:56px;margin-top:10px;border-radius:10px;overflow:hidden;background:#06070b;border:1px solid rgba(255,255,255,.07)}
.ccp-wf::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0a0c12 0,transparent 6%,transparent 94%,#0a0c12 100%)}
.ccp-wf-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 72%;opacity:.92;filter:saturate(1.05)}
.ccp-wf-img[hidden]{display:none}
.ccp-wf-tag{position:absolute;right:8px;top:6px;z-index:1;font:700 .62rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#f4efe8;background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:.3em .6em}
.ccp-wf-tag[hidden]{display:none}
.ccp-eqb{position:absolute;inset:8px 14px;display:flex;align-items:flex-end;gap:3px}
.ccp-eqb[hidden]{display:none}
.ccp-eqb i{flex:1;height:100%;border-radius:2px 2px 0 0;background:linear-gradient(to top,#c8121a,#F6B79B);transform-origin:bottom;transform:scaleY(.25);opacity:.75;animation:ccp-eqb var(--eqd,2.6s) ease-in-out infinite alternate}
.ccp.is-live .ccp-eqb i{--eqd:.9s;opacity:.95}
.ccp-eqb i:nth-child(3n){animation-delay:-.4s;--eqd:2.1s}.ccp-eqb i:nth-child(3n+1){animation-delay:-1.1s}.ccp-eqb i:nth-child(4n){animation-delay:-.7s;--eqd:3s}
.ccp-eqb i:nth-child(5n){animation-delay:-1.6s}.ccp-eqb i:nth-child(7n){animation-delay:-.2s;--eqd:1.8s}
.ccp.is-live .ccp-eqb i:nth-child(3n){--eqd:.7s}.ccp.is-live .ccp-eqb i:nth-child(4n){--eqd:1.1s}.ccp.is-live .ccp-eqb i:nth-child(7n){--eqd:.6s}
@keyframes ccp-eqb{0%{transform:scaleY(.12)}35%{transform:scaleY(.62)}70%{transform:scaleY(.3)}100%{transform:scaleY(.9)}}
/* slim: the default docked state before anyone presses play */
.ccp.is-docked.is-slim{padding:8px 10px 10px}
.ccp.is-slim .ccp-pane,.ccp.is-slim .ccp-mcrow{display:none}
.ccp.is-slim .ccp-thumb{width:40px;height:40px}
.ccp.is-slim .ccp-wf{height:30px;margin-top:8px}
.ccp.is-slim .ccp-eqb{inset:5px 12px}
.ccp.is-slim .ccp-wf-tag{top:50%;transform:translateY(-50%);font-size:.56rem}
.ccp.is-docked .ccp-wf{margin-top:8px}
@media (max-width:640px){
  .ccp-wf{height:44px}
  .ccp.is-slim .ccp-bar{flex-wrap:nowrap}
  .ccp.is-slim .ccp-now{flex:1 1 auto;flex-basis:auto}
  .ccp.is-slim .ccp-tabs{display:none}
  .ccp.is-docked .ccp-more{width:40px;height:40px}
  .ccp.is-docked .ccp-hide{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.ccp-eqb i{animation:none;transform:scaleY(.4)}.ccp-eqb i:nth-child(2n){transform:scaleY(.65)}.ccp-more span{transition:none}}

/* ---------- [window] floating (movable, resizable) + maximised player ---------- */
.ccp-grip,.ccp-rz,.ccp-win{display:none}
.ccp-grip[hidden],.ccp-rz[hidden],.ccp-win[hidden]{display:none!important}
.ccp-win{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#f4efe8;cursor:pointer;place-items:center;flex:none}
.ccp-win .i-off,.ccp-win[aria-pressed=true] .i-on{display:none}.ccp-win[aria-pressed=true] .i-off{display:inline}
.ccp-win svg{display:block}
.ccp.is-docked:not(.is-slim) .ccp-win,.ccp.is-float .ccp-win,.ccp.is-max .ccp-win{display:inline-grid}
@media (hover:hover){.ccp-win:hover{border-color:#F6B79B;color:#F6B79B}}
.ccp-win[aria-pressed=true]{border-color:rgba(246,183,155,.55);color:#F6B79B}
/* floating window */
.ccp.is-docked.is-float{left:var(--wx,auto);top:var(--wy,auto);right:auto;bottom:auto;width:var(--ww,560px);height:var(--wh,520px);max-width:none;transform:none;animation:none;border:1px solid rgba(255,255,255,.16);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px 14px;box-shadow:0 28px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4)}
.ccp.is-docked.is-float.is-slim{height:auto}
.ccp.is-float .ccp-bar,.ccp.is-max .ccp-bar{flex:none}
.ccp.is-float .ccp-wf,.ccp.is-max .ccp-wf{flex:none}
.ccp.is-float .ccp-pane:not([hidden]),.ccp.is-max .ccp-pane:not([hidden]){flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ccp.is-float .ccp-thumb{display:block}
.ccp.is-float .ccp-bar{flex-wrap:wrap;row-gap:8px}
.ccp.is-float .ccp-now{flex:1 1 140px}
@media (pointer:fine){.ccp.is-float .ccp-bar{cursor:grab}.ccp.is-float .ccp-bar :is(button,a,input,select,label){cursor:pointer}}
.ccp.is-float .ccp-grip{display:inline-grid;place-items:center;flex:none;width:28px;height:36px;margin-left:-4px;border:0;border-radius:8px;background:transparent;color:#a9b0bf;font-size:1rem;cursor:grab;touch-action:none}
.ccp.is-float .ccp-grip:hover{color:#F6B79B;background:rgba(255,255,255,.05)}
.ccp.is-float .ccp-rz{display:block;position:absolute;right:0;bottom:0;width:26px;height:26px;padding:0;border:0;background:transparent;cursor:nwse-resize;touch-action:none;z-index:2}
.ccp.is-float .ccp-rz::before{content:"";position:absolute;right:5px;bottom:5px;width:12px;height:12px;background:linear-gradient(135deg,transparent 0 45%,rgba(246,183,155,.75) 45% 52%,transparent 52% 64%,rgba(246,183,155,.75) 64% 71%,transparent 71% 83%,rgba(246,183,155,.75) 83% 90%,transparent 90%)}
.ccp.is-float .ccp-rz:hover::before,.ccp.is-float .ccp-rz:focus-visible::before{filter:brightness(1.3)}
.ccp.is-float .ccp-ql{max-height:none}
.ccp.is-float .ccp-res{max-height:min(30vh,240px)}
/* maximised: fills the viewport */
.ccp.is-docked.is-max{left:0;top:0;right:0;bottom:0;width:100%;height:100vh;height:100dvh;max-width:none;transform:none;animation:none;border:0;border-radius:0;z-index:80;display:flex;flex-direction:column;overflow:hidden;
  padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.ccp.is-max .ccp-thumb{display:block;width:56px;height:56px}
.ccp.is-max .ccp-title{font-size:1.15rem}
.ccp.is-max .ccp-wf{height:clamp(72px,16vh,180px);margin-top:12px}
.ccp.is-max .ccp-eqb{inset:12px 18px}
.ccp.is-max .ccp-ql{max-height:none}
.ccp.is-max .ccp-mcrow{display:flex}
html:has(.ccp.is-max.is-docked){overflow:hidden}
/* while dragging: a shield over everything (iframes included) so the pointer is never lost */
.ccp-shield{position:fixed;inset:0;z-index:2147483646;background:transparent;touch-action:none}
.ccp.is-dragging,.ccp.is-dragging *{user-select:none;-webkit-user-select:none}
.ccp.is-dragging iframe{pointer-events:none}
@media (max-width:640px){
  .ccp-win{width:40px;height:40px}
  .ccp.is-docked.is-float{padding:8px 10px 14px}
  .ccp.is-float .ccp-grip{width:36px;height:40px}
  .ccp.is-float .ccp-rz{width:36px;height:36px}
  .ccp.is-float .ccp-thumb,.ccp.is-max .ccp-thumb{display:none}
  .ccp.is-max .ccp-tabs{order:3}
}

/* ---------- [vu] analog VU meters beside the waveform; [play-ux] Play vs Queue; [expanded] cue hint ---------- */
.ccp .ccp-viz{display:flex;gap:8px;align-items:stretch;margin-top:10px;flex:none}
.ccp .ccp-viz>.ccp-wf{flex:1 1 auto;min-width:0;margin-top:0}
.ccp.is-docked .ccp-viz{margin-top:8px}
.ccp-vu{flex:none;display:flex;gap:6px;height:56px;padding:3px;border-radius:10px;background:linear-gradient(#1c1813,#0b0907);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5)}
.ccp-vu canvas{display:block;height:100%;aspect-ratio:1.55/1;width:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.ccp-vu.is-on{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 14px rgba(255,170,60,.16)}
.ccp.is-slim .ccp-vu{display:none}
.ccp.is-slim .ccp-viz{margin-top:8px}
.ccp.is-max .ccp-viz{margin-top:12px}
.ccp.is-max .ccp-vu{height:clamp(72px,16vh,180px);padding:5px;gap:10px}
@media (max-width:720px){.ccp-vu{height:44px;gap:4px;padding:2px}}
@media (max-width:420px){.ccp.is-max .ccp-viz{flex-direction:column}.ccp.is-max .ccp-vu{height:auto;justify-content:center}.ccp.is-max .ccp-vu canvas{height:auto;width:calc(50% - 5px)}}
.ccp-cue{margin:8px 0 0;font-size:.82rem;color:#F6B79B}
.ccp-cue[hidden]{display:none}
.ccp-cue span{display:inline-block;margin-right:4px}
.ccp.is-cue #ccp-pane-bc iframe{box-shadow:0 0 0 2px #F6B79B;animation:ccp-cue 1.8s ease-in-out infinite}
@keyframes ccp-cue{50%{box-shadow:0 0 0 4px rgba(246,183,155,.35)}}
.ccp-res button.is-play,.mu-tl button.is-play{background:#c8121a;border-color:#c8121a;color:#fff}
@media (hover:hover){.ccp-res button.is-play:hover,.mu-tl button.is-play:hover{background:#a50e15;border-color:#a50e15;color:#fff}}
.mu-qadd.is-done{border-color:#F6B79B;color:#F6B79B}
@media (prefers-reduced-motion:reduce){.ccp.is-cue #ccp-pane-bc iframe{animation:none}}
@media (max-width:720px){.ccp.is-docked:not(.is-max):not(.is-float) .ccp-cue{display:none}}
/* [spec] real spectrogram from Chris's audio + real-time playhead */
.ccp-wf.is-real .ccp-wf-img{object-fit:fill;object-position:0 0;opacity:1}
.ccp-wf.is-real::after{background:linear-gradient(90deg,rgba(6,7,11,.5) 0,rgba(6,7,11,.5) var(--ph,0%),transparent var(--ph,0%))}
.ccp-ph{position:absolute;top:0;bottom:0;left:0;z-index:1;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px rgba(255,255,255,.75);pointer-events:none;transition:left .25s linear}
.ccp-ph::before{content:"";position:absolute;top:-1px;left:50%;border:5px solid transparent;border-top-color:#fff;transform:translateX(-50%)}
.ccp-ph[hidden]{display:none}
.ccp-wf.is-real .ccp-wf-tag{background:rgba(10,12,18,.8);border-color:rgba(255,190,80,.55);color:#ffe2a8;font-variant-numeric:tabular-nums}
.ccp-wf.is-real .ccp-wf-tag::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;border-radius:50%;background:#ffb347;vertical-align:.05em}
@media (prefers-reduced-motion:reduce){.ccp-ph{transition:none}}
.ccp-wf.is-real .ccp-wf-tag{white-space:nowrap}
@media (max-width:640px){.ccp-wf-lg{display:none}.ccp-wf.is-real .ccp-wf-tag{font-size:.54rem;top:4px;right:4px}}