/* 音乐 PR6a · 分享卡片 (js/music-card.js). The prototype's own values (_handoff/music-app/listen-together-v2.html .shc): frosted glass that lets the cover colour through, a bright
   upper edge, a sheen that sweeps across every few seconds. No border, no scrollbar, no source label. The colours (--c1 deep, --c2 light) are worked out from the cover when the card is
   shared and stored with it, so every device draws the same card. Standard width in the single chat, .wide in a 朋友圈 post. */
@keyframes mcSheen{0%,55%{background-position:-150% 0}100%{background-position:150% 0}}
@keyframes mcSpin{to{transform:rotate(360deg)}}
@keyframes mcEq{50%{height:90%}}
.mc{--o1:#3a4f8f;--o2:#9fb9e6;--m1:#3a3a3e;--m2:#8a8a90;--c1:var(--o1);--c2:var(--o2);position:relative;display:block;width:250px;max-width:100%;box-sizing:border-box;color:#fff;text-align:left;cursor:pointer;border-radius:18px;background:color-mix(in srgb,var(--c1) 82%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px -16px rgba(0,0,0,.6);overflow:hidden;transition:transform var(--mo-release,380ms) var(--mo-ease-bounce,ease);-webkit-tap-highlight-color:transparent;font:inherit}
.mu-root[data-skin="mono"] .mc{--c1:var(--m1);--c2:var(--m2)}
.mc.wide{width:100%;max-width:340px}
.mc:active{transform:scale(.97);transition-duration:var(--mo-fast,90ms)}
.mc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.26) 48%,transparent 60%) -150% 0/250% 100% no-repeat;animation:mcSheen 5.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.mc::after,.mc-rec,.mc-mini{animation:none}}
.mc button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.mc b{font-weight:600}
.mc-chat{display:block;max-width:100%}
.mc-cv{display:block;width:100%;height:100%;background-color:rgba(255,255,255,.12);background-size:cover;background-position:center}
/* song · 封套 */
.mc-song-sleeve{height:130px}
.mc-sleeve{position:absolute;left:12px;top:12px;width:106px;height:106px;border-radius:8px;overflow:hidden;z-index:2;box-shadow:6px 0 16px rgba(0,0,0,.35)}
.mc-rec{position:absolute;left:24px;top:14px;width:102px;height:102px;border-radius:50%;background:radial-gradient(circle,var(--c2) 0 20%,#111 21%),repeating-radial-gradient(circle,#121214 0 1.3px,#1e1e21 1.3px 2.6px);animation:mcSpin 8s linear infinite;transition:left 700ms var(--mo-ease-bounce,ease)}
.mc-song-sleeve.in .mc-rec{left:66px}
.mc-song-sleeve .mc-txt{position:absolute;left:178px;right:10px;top:14px;display:flex;flex-direction:column}
.mc-song-sleeve.wide .mc-txt{left:190px}
.mc-txt b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.mc-txt small{font-size:11.5px;opacity:.7;margin-top:4px}
/* song · 小播放器 */
.mc-song-player{padding:11px}
.mc-dtop{display:flex;gap:10px;align-items:center}
.mc-dcv{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0}
.mc-dtop .mc-t{min-width:0;flex:1}
.mc-dtop b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-dtop small{display:block;font-size:11.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-trial{font-style:normal;font-weight:400;font-size:10px;margin-left:6px;padding:1px 6px;border-radius:8px;background:rgba(255,255,255,.2);vertical-align:1px}
.mc-pp{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#fff!important;color:#1d2230!important;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-eq{display:flex;align-items:center;gap:2px;height:26px;margin:10px 2px 4px}
.mc-eq i{flex:1;border-radius:2px;background:rgba(255,255,255,.85);height:20%}
.mc-eq i.p{background:rgba(255,255,255,.3)}
.mc-song-player.play .mc-eq i{animation:mcEq 1s ease-in-out infinite}
.mc-bt{display:flex;justify-content:space-between;font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}
/* lyric */
.mc-lyric{padding:16px 14px 12px}
.mc-lyric::before{content:"“";position:absolute;right:10px;top:-14px;font-size:84px;line-height:1;opacity:.18;font-weight:700}
.mc-ly{display:block;font-size:16px;line-height:1.6;font-weight:600;letter-spacing:1px;overflow-wrap:anywhere}
.mc-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:10px;background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) top/100% 1px no-repeat}
.mc-mini{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;animation:mcSpin 10s linear infinite}
.mc-foot b{display:block;font-size:13px}
.mc-foot small{display:block;font-size:11px;opacity:.65}
/* ticket */
.mc-ticket{display:flex;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;overflow:visible}
.mc-ticket::after{border-radius:16px}
.mc-main{flex:1;min-width:0;padding:12px;border-radius:16px 0 0 16px;background:color-mix(in srgb,var(--c1) 82%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.mc-stub{position:relative;width:70px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-radius:0 16px 16px 0;background:color-mix(in srgb,var(--c2) 40%,var(--c1));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.mc-stub::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:repeating-linear-gradient(rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.mc-no{display:block;font-size:10px;letter-spacing:1px;opacity:.7}
.mc-ttl{display:flex;align-items:baseline;gap:0;margin-top:6px;font-size:14px;line-height:1.4;white-space:nowrap;font-weight:600}
.mc-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mc-ttl>span:last-child{flex:0 0 auto}
.mc-min{display:block;margin-top:2px;font-size:12px;opacity:.85;white-space:nowrap}
.mc-min em{font-style:normal;font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.mc-row{display:flex;align-items:center;gap:6px;margin-top:10px}
.mc-av{width:22px;height:22px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:10px;background:rgba(255,255,255,.2)}
.mc-av img,.mc-wav img{width:100%;height:100%;object-fit:cover}
.mc-stc{width:40px;height:40px;border-radius:50%;overflow:hidden}
.mc-bars{display:flex;gap:1.5px;height:22px;align-items:flex-end}
.mc-bars i{width:2px;background:currentColor;opacity:.75}
.mc-stub small{font-size:9.5px;font-weight:600}
/* playlist */
.mc-playlist{display:flex;gap:12px;align-items:center;padding:12px}
.mc-pcov{width:64px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.mc-playlist .mc-txt{position:static;min-width:0;display:flex;flex-direction:column}
.mc-playlist .mc-txt small{margin:0 0 3px}
.mc-playlist .mc-txt span{font-size:11.5px;opacity:.7;margin-top:4px}
/* the share dialog (inside .mu-dlg) */
.mc-prev{display:flex;justify-content:center;margin:2px 0 10px}
.mc-tabs,.mc-sty{display:flex;justify-content:center;gap:4px;margin:0 auto 10px;padding:3px;width:max-content;border-radius:16px;background:color-mix(in srgb,currentColor 10%,transparent)}
.mc-tabs button,.mc-sty button{height:28px;padding:0 16px;border-radius:14px;font-size:13px;opacity:.65;background:none}
.mc-tabs button.on,.mc-sty button.on{background:color-mix(in srgb,currentColor 18%,transparent);opacity:1}
.mc-shly{max-height:150px;overflow-y:auto;scrollbar-width:none;margin-bottom:8px}
.mc-shly::-webkit-scrollbar{display:none}
.mc-shly small{display:block;font-size:11.5px;opacity:.55;margin:0 4px 4px}
.mc-shly button{display:block;width:100%;text-align:left;padding:6px 10px;border-radius:10px;font-size:13.5px;opacity:.6;background:none}
.mc-shly button.on{background:color-mix(in srgb,currentColor 14%,transparent);opacity:1;font-weight:600}
.mc-note{display:block;width:100%;box-sizing:border-box;height:38px;margin:0 0 8px;padding:0 12px;border-radius:12px;font:inherit;font-size:14px;color:inherit;background:color-mix(in srgb,currentColor 9%,transparent)}
.mc-note:focus{outline:none;background:color-mix(in srgb,currentColor 14%,transparent)}
.mc-who{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.mc-who::-webkit-scrollbar{display:none}
.mc-who button{flex:0 0 auto;width:58px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;background:none}
.mc-who button span:last-child{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-wav{width:42px;height:42px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,currentColor 14%,transparent);box-shadow:0 0 0 0 transparent;transition:box-shadow 120ms}
.mc-who button.on .mc-wav{box-shadow:0 0 0 2.5px currentColor}
.mc-hint{margin:0 0 8px;font-size:12px;opacity:.6;text-align:center}
.mc-nf{display:block;font-style:normal;font-size:11.5px;opacity:.78;margin-top:4px}
.mc-missing .mc-pp{opacity:.35}