/* Clip player. Theme it by setting the --cp-* variables on .cp or any ancestor.
   On kylepudenz.com they fall back to the site's own tokens. */
.cp{
  --cp-accent:var(--acc,#E3263A); --cp-accent-text:var(--acc-text,#FF5468); --cp-on-accent:var(--acc-fg,#fff);
  --cp-surface:var(--m-surface,#0D1426); --cp-line:var(--m-line,#1C2741);
  --cp-fg:var(--m-fg,#EAF0FC); --cp-sub:var(--m-sub,#C4CCE0); --cp-muted:var(--m-muted,#8B97B3);
  --cp-wave:#34415F; --cp-radius:14px;
  --cp-font-title:var(--f-head,system-ui,sans-serif); --cp-font-mono:var(--f-mono,ui-monospace,monospace);
  display:grid;align-content:start;min-width:0;min-height:230px;color:var(--cp-fg);
}
.cp button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.cp :focus-visible{outline:2px solid var(--cp-accent);outline-offset:3px}
.cp-deck{display:grid;gap:16px;padding:20px;border:1px solid var(--cp-line);border-radius:var(--cp-radius);background:var(--cp-surface)}
.cp-top{display:flex;align-items:center;gap:16px;min-width:0}
.cp .cp-play{flex:none;width:52px;height:52px;border-radius:50%;background:var(--cp-accent);color:var(--cp-on-accent);display:grid;place-items:center;transition:transform .15s,filter .15s}
.cp .cp-play:hover{transform:translateY(-1px);filter:brightness(1.07)}
.cp .cp-play:disabled{opacity:.45;cursor:default;transform:none}
.cp-play svg{width:18px;height:18px}
.cp-meta{display:grid;gap:3px;min-width:0;flex:1}
.cp-title{font-family:var(--cp-font-title);font-weight:700;font-size:15px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-time{font-family:var(--cp-font-mono);font-size:12px;color:var(--cp-muted);font-variant-numeric:tabular-nums}
.cp-wave{height:56px;cursor:pointer;touch-action:none;border-radius:6px}
.cp-wave canvas{display:block;width:100%;height:100%}
.cp-list{list-style:none;margin:10px 0 0;padding:0}
.cp .cp-item{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:52px;padding:12px 4px;border-bottom:1px solid var(--cp-line);font-size:16px;color:var(--cp-sub);transition:color .15s}
.cp .cp-item:hover{color:var(--cp-fg)}
.cp .cp-item[aria-current="true"]{color:var(--cp-accent-text)}
.cp-n,.cp-d{font-family:var(--cp-font-mono);font-size:12px;color:var(--cp-muted);font-variant-numeric:tabular-nums}
.cp-t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-eq{display:none;align-items:flex-end;gap:2px;height:12px}
.cp-eq i{width:3px;height:40%;background:var(--cp-accent);border-radius:1px}
.cp-eq i:nth-child(2){height:100%}
.cp-eq i:nth-child(3){height:65%}
.cp-item[aria-current="true"] .cp-num{display:none}
.cp-item[aria-current="true"] .cp-eq{display:inline-flex}
@keyframes cp-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .cp.is-playing .cp-eq i{transform-origin:50% 100%;animation:cp-eq .9s ease-in-out infinite}
  .cp.is-playing .cp-eq i:nth-child(2){animation-delay:-.3s}
  .cp.is-playing .cp-eq i:nth-child(3){animation-delay:-.6s}
}
.cp-err{margin:14px 0 0;font-size:14px;color:var(--cp-accent-text)}
.cp-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:22px}
.cp-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:8px;background:var(--cp-accent);color:var(--cp-on-accent);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s,filter .15s}
.cp-cta:hover{transform:translateY(-1px);filter:brightness(1.07)}
.cp-rights{margin:0;font-size:13px;line-height:1.5;color:var(--cp-muted);flex:1 1 200px}
.cp-rights a{color:var(--cp-sub)}
/* Empty state: no clips uploaded yet. Looks like the player, but nothing is clickable. */
.cp.is-empty .cp-wave{cursor:default;pointer-events:none;opacity:.5}
.cp.is-empty .cp-title{color:var(--cp-sub)}
.cp.is-empty .cp-rights{display:none}
.cp .cp-ph{cursor:default;user-select:none;opacity:.55}
.cp .cp-ph:hover{color:var(--cp-sub)}
.cp-ph-bar{height:10px;border-radius:5px;background:var(--cp-wave)}