:root{color-scheme:dark;--mo-panel-a: #155e75;--mo-panel-b: #8f2557;--mo-text: #fff9f2;--mo-muted: #fff}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:transparent!important;font-family:"Exo 2",sans-serif}body{display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,2.5vw,24px)}.music-overlay{display:flex;flex-direction:column;width:min(400px,100%);opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 5px 12px rgba(0,0,0,.52));pointer-events:none}.music-overlay.has-content{opacity:1;transform:translateY(0)}.music-overlay :is(strong,span,time,b,.mo-remaining){text-shadow:0 4px 7px rgba(0,0,0,.98),0 2px 3px rgba(0,0,0,.95)}.mo-current{--mo-row-color: var(--mo-panel-a);order:0;position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:0;align-items:center;min-height:76px;padding:3px 4px}.mo-current[hidden]{display:none}.mo-cover-wrap{position:relative;width:72px;height:72px;overflow:hidden;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 4px,#24201d 5px 7px,#0c0c0c 8px 10px);box-shadow:0 5px 9px #000000e6;filter:drop-shadow(0 5px 5px rgba(0,0,0,.85));z-index:2}.mo-cover,.mo-cover-fallback{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:50%}.mo-cover{display:none;object-fit:cover}.mo-cover-fallback{display:grid;place-items:center;background:#27211d;color:#fff;font-size:28px}.mo-cover-wrap:after,.mo-queue-thumb-wrap:after{position:absolute;top:50%;left:50%;width:8px;height:8px;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:#12100f;content:"";transform:translate(-50%,-50%)}.mo-current.is-playing .mo-cover-wrap{animation:mo-spin 3.8s linear infinite!important;transform-origin:50% 50%;will-change:transform}.mo-current.is-paused .mo-cover-wrap{animation-play-state:paused!important}.mo-current-copy,.mo-queue-copy{display:flex;min-width:0;flex-direction:column}.mo-current-copy{position:relative;min-height:62px;justify-content:center;gap:4px;margin-left:-8px;padding:9px 12px 8px 19px;overflow:hidden;border-radius:0 18px 6px 0;background:var(--mo-row-color);box-shadow:inset -5px 0 #ffffff21,0 6px 10px #000000c7;opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-13px);will-change:clip-path,opacity,transform;z-index:1}.mo-current-copy strong{overflow:hidden;color:var(--mo-text);font-size:clamp(17px,3.3vw,22px);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.mo-current-copy>span{overflow:hidden;color:var(--mo-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.mo-progress{display:grid;grid-template-columns:minmax(60px,1fr) auto;gap:9px;align-items:center;margin-top:5px}.mo-progress-track{height:3px;overflow:hidden;border-radius:999px;background:#ffffff59}.mo-progress-track i{display:block;width:100%;height:100%;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform .25s linear}.mo-progress-time{display:flex;align-items:center;gap:3px;color:#fff;font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap}.mo-progress-time b{margin-left:4px;color:#fff;font-weight:700}.mo-queue{order:1;display:grid;gap:3px;margin:5px 0 0 15px;padding:0;list-style:none}.mo-queue:empty{display:none}.mo-queue-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0;align-items:center;min-height:42px;padding:2px 3px}.mo-queue-item:nth-child(odd){--mo-row-color: var(--mo-panel-b)}.mo-queue-item:nth-child(2n){--mo-row-color: var(--mo-panel-a)}.mo-queue-item.is-entering{animation:mo-queue-pop .3s cubic-bezier(.2,.85,.25,1.18) both}.mo-queue-thumb-wrap{position:relative;width:42px;height:42px;overflow:hidden;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#28221e 4px 6px,#0c0c0c 7px 8px);box-shadow:0 4px 7px #000000d9;filter:drop-shadow(0 4px 4px rgba(0,0,0,.82));z-index:2}.mo-queue-thumb{position:absolute;inset:5px;display:none;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;object-fit:cover}.mo-queue-fallback{position:absolute;inset:5px;display:grid;place-items:center;border-radius:50%;background:#27211d;color:#fff;font-size:15px}.mo-queue-copy{position:relative;min-height:36px;justify-content:center;gap:2px;margin-left:-5px;padding:6px 10px 6px 14px;overflow:hidden;border-radius:0 14px 5px 0;background:var(--mo-row-color);box-shadow:inset -4px 0 #ffffff21,0 5px 8px #000000c2;opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-10px);will-change:clip-path,opacity,transform;z-index:1}.mo-current .mo-cover-fallback,.mo-queue-item .mo-queue-fallback{background:var(--mo-row-color)}.mo-queue-copy strong{overflow:hidden;color:#fff;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.mo-queue-copy span{overflow:hidden;color:#fff;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.mo-current.is-revealing .mo-current-copy,.mo-queue-item.is-revealing .mo-queue-copy{animation:mo-info-swipe 2.2s cubic-bezier(.2,.76,.22,1) both}.mo-remaining{order:2;width:max-content;margin:6px 8px 0 auto;padding:2px 4px;color:#fff;font-size:9px;font-weight:700}.mo-remaining[hidden]{display:none}@keyframes mo-spin{to{transform:rotate(360deg)}}@keyframes mo-queue-pop{0%{opacity:0;transform:translateY(-10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes mo-info-swipe{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-13px)}16%{opacity:1}24%,72%{opacity:1;clip-path:inset(0 0 0 0);transform:translate(0)}84%{opacity:1}to{opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-13px)}}@media(max-width:430px){body{padding:10px}.mo-current{grid-template-columns:66px minmax(0,1fr);min-height:72px;padding:2px}.mo-cover-wrap{width:66px;height:66px}.mo-current-copy strong{font-size:16px}.mo-progress{grid-template-columns:minmax(45px,1fr) auto;gap:6px}.mo-queue-item{grid-template-columns:36px minmax(0,1fr);min-height:40px}.mo-queue-thumb-wrap{width:36px;height:36px}}@media(prefers-reduced-motion:reduce){.music-overlay{transition:none}.mo-queue-item.is-entering{animation:none}.mo-current.is-revealing .mo-current-copy,.mo-queue-item.is-revealing .mo-queue-copy{animation-name:mo-info-still}}@keyframes mo-info-still{0%,88%{opacity:1;clip-path:inset(0 0 0 0);transform:none}to{opacity:0;clip-path:inset(0 100% 0 0);transform:none}}
/*# sourceMappingURL=overlay-music.css.map */