/* Floating player (assets/js/sim/music.js). Source/FloatingPlayer.swift: 320 pt wide, padding 16, radius 24, blur +
   black .48, rim white .3 → .06; cover 54 r12; title 13.5 semibold; controls 18/24/18 pt with 22 pt gaps;
   lyrics: the line now 15 semibold, the next 12 secondary. */
[data-sim="music"] :where(.cv button) { border: 0; padding: 0; background: none; cursor: pointer; }
[data-sim="music"] .cv .mbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 37px; padding: 0 14px 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.92); background: rgba(10,14,30,.18); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); }
[data-sim="music"] .cv .mbar .l, [data-sim="music"] .cv .mbar .r { display: flex; align-items: center; gap: 20px; }
[data-sim="music"] .cv .mbar .r { gap: 16px; }
[data-sim="music"] .cv .mbar img { height: 16px; }

/* closed island: cover left, equaliser right (as the hero) */
[data-sim="music"] .cv .isl { position: absolute; z-index: 6; top: 0; left: 50%; width: 254px; height: 37px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 8px; background: #000; border-radius: 0 0 14px 14px; }
[data-sim="music"] .cv .isl .art { width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: #333; }
[data-sim="music"] .cv .isl .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sim="music"] .cv .isl .art .fb img { height: 11px; width: auto; }
[data-sim="music"] .cv .isl .eq { display: flex; align-items: center; gap: 2px; height: 16px; }
[data-sim="music"] .cv .isl .eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--eq, #ffb35c); animation: m2-eq 1.1s ease-in-out infinite; }
[data-sim="music"] .cv .isl .eq i:nth-child(2) { animation-delay: .18s; } [data-sim="music"] .cv .isl .eq i:nth-child(3) { animation-delay: .36s; } [data-sim="music"] .cv .isl .eq i:nth-child(4) { animation-delay: .54s; }
[data-sim="music"] .cv .isl.paused .eq i { animation-play-state: paused; }
@keyframes m2-eq { 0%, 100% { height: 28%; } 50% { height: 100%; } }

/* the card */
[data-sim="music"] .cv .fp {
  position: absolute; z-index: 20; left: 220px; top: 58px; width: 320px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  border-radius: 24px; color: #fff; background: rgba(0,0,0,.48); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 .8px 0 rgba(255,255,255,.3), inset 0 0 0 .8px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.45);
  cursor: default; touch-action: none; transition: opacity .25s, transform .25s, filter .3s;
}
[data-sim="music"] .cv .fp.drag { cursor: grabbing; transition: none; }
[data-sim="music"] .cv .fp.off { opacity: 0; transform: scale(.94); pointer-events: none; }
[data-sim="music"] .cv .fp.swap { transform: scale(.985); }
[data-sim="music"] .cv .fp .top { display: flex; align-items: center; gap: 12px; }
[data-sim="music"] .cv .fp .cover { width: 54px; height: 54px; flex: none; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
[data-sim="music"] .cv .fp .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sim="music"] .cv .fb { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, rgb(115,97,250), rgb(51,115,255)); }
[data-sim="music"] .cv .fp .cover .fb img { width: auto; height: 20px; }
[data-sim="music"] .cv .fp .meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
[data-sim="music"] .cv .fp .ti { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="music"] .cv .fp .ar { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="music"] .cv .fp .side { display: grid; gap: 6px; }
[data-sim="music"] .cv .circ { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.18); opacity: .9; }
[data-sim="music"] .cv .circ.on { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.1)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.3); opacity: 1; }
[data-sim="music"] .cv .circ img { height: 9px; }
[data-sim="music"] .cv .prog { display: grid; gap: 3px; }
[data-sim="music"] .cv .bar { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); cursor: pointer; }
[data-sim="music"] .cv .bar::before { content: ""; position: absolute; inset: -6px 0; }
[data-sim="music"] .cv .bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; border-radius: 2px; background: rgba(255,255,255,.85); transition: width .25s linear; }
[data-sim="music"] .cv .times { display: flex; justify-content: space-between; font: 500 9.5px -apple-system, BlinkMacSystemFont, sans-serif; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.55); }
[data-sim="music"] .cv .ctl { display: flex; align-items: center; }
[data-sim="music"] .cv .ctl .sp { flex: 1; }
[data-sim="music"] .cv .ctl .tog img { height: 13px; opacity: .6; transition: opacity .15s; }
[data-sim="music"] .cv .ctl .tog.on img { opacity: 1; }
[data-sim="music"] .cv .ctl .c18 { width: 32px; height: 28px; display: grid; place-items: center; }
[data-sim="music"] .cv .ctl .c18 img { height: 15px; }
[data-sim="music"] .cv .ctl .c24 { width: 38px; height: 34px; margin: 0 22px; display: grid; place-items: center; }
[data-sim="music"] .cv .ctl .c24 img { height: 22px; }
[data-sim="music"] .cv .ctl button:active { opacity: .6; }
[data-sim="music"] .cv .lyr { display: grid; gap: 4px; }
[data-sim="music"] .cv .lyr[hidden] { display: none; }
[data-sim="music"] .cv .lyr .now { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="music"] .cv .lyr .now.in { animation: m2-line .25s ease-out; }
@keyframes m2-line { from { opacity: 0; transform: translateY(6px); } }
[data-sim="music"] .cv .lyr .nx { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
[data-sim="music"] .cv .list { display: grid; gap: 6px; }
[data-sim="music"] .cv .list[hidden] { display: none; }
[data-sim="music"] .cv .list hr { width: 100%; margin: 0 0 4px; border: 0; height: 1px; background: rgba(255,255,255,.1); }
[data-sim="music"] .cv .list .lh { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
[data-sim="music"] .cv .list p { margin: 0; font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.35; }
[data-sim="music"] .cv .row { display: flex; align-items: center; gap: 8px; text-align: left; color: #fff; border-radius: 6px; }
[data-sim="music"] .cv .row:hover { background: rgba(255,255,255,.05); }
[data-sim="music"] .cv .row .nt { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.07); }
[data-sim="music"] .cv .row .nt img { height: 9px; opacity: .55; }
[data-sim="music"] .cv .row .rt { flex: 1; min-width: 0; display: grid; }
[data-sim="music"] .cv .row b { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-sim="music"] .cv .row small { font-size: 9.5px; color: rgba(255,255,255,.55); }
[data-sim="music"] .cv .row .pl { height: 8px; opacity: .3; }

/* Dock */
[data-sim="music"] .cv .dock { position: absolute; z-index: 10; left: 50%; bottom: 8px; transform: translateX(-50%); height: 70px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 22px; background: rgba(150,160,190,.26); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.3); }
[data-sim="music"] .cv .dock .it { position: relative; width: 50px; height: 50px; transition: transform .2s ease; }
[data-sim="music"] .cv .dock .it:hover { transform: translateY(-6px) scale(1.08); }
[data-sim="music"] .cv .dock .it img { width: 100%; height: 100%; display: block; }
[data-sim="music"] .cv .dock .it.run::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.75); }
[data-sim="music"] .cv .dock .it.bounce { animation: m2-bounce .6s ease; }
@keyframes m2-bounce { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 80% { transform: translateY(-5px); } }
[data-sim="music"] .cv .dock .tip { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 7px; background: rgba(40,40,44,.85); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
[data-sim="music"] .cv .dock .it:hover .tip { opacity: 1; }
[data-sim="music"] .cv .try { bottom: 92px; }
[data-sim="music"] .cv .try .reopen { font: inherit; color: #fff; }

/* demo pointer */
[data-sim="music"] .cv .cur { position: absolute; z-index: 70; left: 0; top: 0; width: 22px; height: 30px; margin: -2px 0 0 -3px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M3 2v22l5.5-5.3 3.6 8.3 3.4-1.5-3.5-8.1H19z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition: transform .7s cubic-bezier(.4,.1,.2,1), opacity .3s; }
[data-sim="music"] .cv .cur.down { scale: .86; }
[data-sim="music"] .cv .cur.gone { opacity: 0; }
[data-sim="music"] .cv.instant *, [data-sim="music"] .cv.instant { transition: none !important; animation: none !important; }
[data-sim="music"] .cv [hidden] { display: none !important; }

/* phone crop (360 × 620): island, the card, the Dock */
[data-sim="music"] .cv.ph .mbar > * { display: none; }
[data-sim="music"] .cv.ph .fp { left: 20px; top: 54px; }
[data-sim="music"] .cv.ph .try { bottom: 88px; white-space: normal; width: 320px; text-align: center; font-size: 13px; }