/* Music Archive: the landing card borrows the archive's cut-and-stuck visual language. */
.card-music{
  --music-hot:#ff4fa3;
  --music-cyan:#39e6df;
  --music-acid:#f3ef4e;
  --music-orange:#ff7b3f;
  --card-bg:radial-gradient(circle at 88% 20%,rgba(57,230,223,.14),transparent 25%),radial-gradient(circle at 71% 78%,rgba(255,79,163,.13),transparent 30%),repeating-linear-gradient(8deg,transparent 0 12px,rgba(255,255,255,.012) 12px 13px),#17181d;
  --card-text:#f7f3ea;
  --card-muted:#b8b2aa;
  grid-column:span 12;
  min-height:430px;
  overflow:visible!important;
  border:2px solid var(--music-cyan)!important;
  border-radius:4px!important;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:8px 8px 0 rgba(255,79,163,.28),0 24px 60px rgba(0,0,0,.24)!important;
}
.card-music::before{content:"";position:absolute;z-index:2;right:clamp(2rem,8vw,7rem);top:-9px;width:88px;height:20px;background:rgba(224,204,145,.72);clip-path:polygon(2% 7%,98% 0,100% 92%,0 100%);transform:rotate(2.5deg);pointer-events:none}
.card-music::after{content:"REC / FOUND AGAIN";position:absolute;right:2rem;bottom:1.45rem;color:var(--music-hot);font:900 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;transform:rotate(-3deg);opacity:.72}
.card-music .card-kicker{color:var(--music-cyan)!important}
.card-music .card-copy{max-width:650px;position:relative;z-index:3}
.card-music .card-copy h2{max-width:620px;text-shadow:2px 2px 0 rgba(255,79,163,.15),-1px -1px 0 rgba(57,230,223,.12)}
.card-music .card-copy h2::after{content:"";display:block;width:min(230px,48%);height:5px;margin:.8rem 0 0;background:var(--music-hot);clip-path:polygon(0 40%,92% 0,100% 62%,8% 100%);transform:rotate(-1.2deg)}
.card-music .card-route{position:relative;z-index:4;display:inline-flex;align-items:center;gap:.55rem;width:max-content;max-width:100%;color:var(--music-cyan)!important;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.2rem}
.card-music .card-route:hover{color:var(--music-acid)!important}

.music-random{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.85rem 1.1rem;align-items:center;width:min(720px,72%);margin-top:1.25rem;padding:.85rem .95rem .9rem;border:2px solid var(--music-hot);background:#24211d;color:#fff8e8;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:4px 4px 0 rgba(57,230,223,.28);transform:rotate(-.18deg)}
.music-random::before{content:"RANDOM DRAW · 91 TRACKS";position:absolute;left:.9rem;top:-.62rem;padding:.16rem .42rem;background:var(--music-acid);color:#111215;font:900 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.music-random-copy{display:grid;gap:.18rem;min-width:0;padding-top:.28rem}
.music-random-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.96rem;letter-spacing:-.02em}
.music-random-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,248,232,.62);font:700 .64rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.music-random-actions{display:flex;gap:.48rem;align-items:center}
.music-random button{appearance:none;border:0;border-radius:0;cursor:pointer;font:900 .68rem/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.015em;padding:.72rem .78rem;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.music-random-play{min-width:132px;background:var(--music-hot);color:#111215;box-shadow:2px 2px 0 var(--music-cyan)}
.music-random-skip{background:transparent!important;color:var(--music-cyan)!important;border:1px solid currentColor!important}
.music-random button:active{transform:translate(1px,1px)}
.music-random[data-loading="true"] .music-random-play{opacity:.7}
.music-random[data-error="true"]{border-color:var(--music-orange)}

.music-visual{position:absolute;z-index:1;right:clamp(1rem,4vw,3.2rem);top:50%;width:min(31%,310px);aspect-ratio:1;transform:translateY(-50%);opacity:.78;pointer-events:none}
.music-disc{position:absolute;inset:8%;border:2px solid var(--music-hot);border-radius:0;clip-path:polygon(50% 0,92% 12%,100% 50%,88% 92%,50% 100%,10% 88%,0 50%,12% 10%);background:repeating-radial-gradient(circle,transparent 0 10px,rgba(255,255,255,.055) 11px 12px),radial-gradient(circle,transparent 0 10%,rgba(57,230,223,.15) 11% 24%,rgba(255,255,255,.025) 25% 100%);box-shadow:6px 6px 0 rgba(57,230,223,.18)}
.music-disc::before{content:"";position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(12deg);border-radius:0;background:var(--music-acid);clip-path:polygon(50% 0,100% 25%,88% 88%,20% 100%,0 40%);box-shadow:0 0 0 7px rgba(255,255,255,.05)}
.music-wave{position:absolute;left:0;right:0;bottom:2%;height:30%;display:flex;align-items:center;justify-content:center;gap:4px;transform:rotate(2deg)}
.music-wave i{display:block;width:4px;height:var(--h,40%);border-radius:0;background:var(--music-cyan)}
.music-wave i:nth-child(1){--h:24%;background:var(--music-hot)}.music-wave i:nth-child(2){--h:48%}.music-wave i:nth-child(3){--h:76%;background:var(--music-acid)}.music-wave i:nth-child(4){--h:42%}.music-wave i:nth-child(5){--h:88%;background:var(--music-hot)}.music-wave i:nth-child(6){--h:58%}.music-wave i:nth-child(7){--h:32%;background:var(--music-acid)}.music-wave i:nth-child(8){--h:68%}.music-wave i:nth-child(9){--h:40%;background:var(--music-hot)}
.card-music:hover .music-disc{animation:music-card-turn 8s linear infinite}
@keyframes music-card-turn{to{transform:rotate(360deg)}}

html[data-theme="light"] .card-music{--card-bg:radial-gradient(circle at 84% 18%,rgba(57,230,223,.18),transparent 25%),radial-gradient(circle at 72% 76%,rgba(255,79,163,.12),transparent 30%),#e8ddc9;--card-text:#1b1b19;--card-muted:#5e574f;box-shadow:8px 8px 0 rgba(255,79,163,.32),0 22px 48px rgba(74,60,43,.15)!important}
html[data-theme="light"] .music-random{background:#fff8e9;color:#1b1b19}
html[data-theme="light"] .music-random-copy small{color:rgba(27,27,25,.64)}

@media(max-width:900px){.card-music{grid-column:span 12}.music-visual{width:34%;opacity:.48}.music-random{width:min(760px,82%)}}
@media(max-width:640px){.card-music{min-height:520px}.music-visual{right:-3rem;top:22%;width:61%;opacity:.28}.card-music .card-copy{max-width:86%}.music-random{grid-template-columns:1fr;width:100%;margin-top:1.1rem}.music-random-actions{justify-content:flex-start}.music-random-play{flex:1}.card-music::after{display:none}}
@media(prefers-reduced-motion:reduce){.card-music:hover .music-disc{animation:none!important}.music-random,.music-disc,.music-wave{transform:none!important}}