.ncm-player { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; width: 4rem; height: 4rem; color: #fff; font-size: .72rem; }
.ncm-disc { position: absolute; inset: 0; z-index: 2; width: 4rem; height: 4rem; border: 0; border-radius: 50%; padding: 0; cursor: grab; touch-action: none; background: radial-gradient(circle at center, #2a2a2a 0 4%, #070707 5% 27%, transparent 28%), repeating-radial-gradient(circle at center, #151515 0 2px, #050505 3px 5px, #1d1d1d 6px 7px); box-shadow: 0 5px 18px #0009, inset 0 0 0 1px #3b3b3b; }.ncm-disc:active { cursor: grabbing; }.ncm-disc::after { content: ""; position: absolute; inset: .22rem; pointer-events: none; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; box-shadow: inset 0 0 0 .12rem rgb(0 0 0 / 45%), inset 0 0 0 .14rem rgb(255 255 255 / 5%); }
.ncm-cover { position: absolute; inset: .76rem; overflow: hidden; pointer-events: none; border: 3px solid #0a0a0a; border-radius: 50%; background: #6d4c9c; box-shadow: 0 0 0 1px #565656; }.ncm-cover img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }.ncm-cover span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 1.3rem; }
.ncm-panel { position: absolute; top: -.22rem; right: 3.2rem; width: 0; height: 4.45rem; overflow: hidden; border-radius: 2.25rem; background: rgb(24 25 32 / 96%); box-shadow: 0 5px 18px #0007; opacity: 0; pointer-events: none; transition: width .3s ease, opacity .18s ease; }.ncm-player.open .ncm-panel { width: min(17rem, calc(100vw - 6.5rem)); opacity: 1; pointer-events: auto; }.ncm-player.open-right .ncm-panel { right: auto; left: 3.2rem; }
.ncm-info { box-sizing: border-box; width: min(17rem, calc(100vw - 6.5rem)); height: 100%; padding: .36rem .75rem .3rem; }.ncm-title { display: block; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.ncm-row { display: flex; align-items: center; gap: .22rem; margin-top: .15rem; white-space: nowrap; }.ncm-btn { width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: #ffffff20; color: inherit; font-size: .65rem; cursor: pointer; }.ncm-time { margin-left: auto; color: #ffffffaa; font-size: .64rem; font-variant-numeric: tabular-nums; }.ncm-progress,.ncm-volume { accent-color: #e56a9a; cursor: pointer; }.ncm-volume { width: 2.25rem; }.ncm-progress { width: 100%; height: .35rem; margin: .24rem 0 0; }.ncm-modes { display: flex; gap: .12rem; }.ncm-mode { width: 1.05rem; height: 1.05rem; padding: 0; border: 0; border-radius: .22rem; background: transparent; color: #ffffffaa; font-size: .72rem; cursor: pointer; }.ncm-mode.active { color: #fff; background: #ffffff2b; }
@media (max-width: 480px) { .ncm-player { right: .5rem; bottom: .5rem; }.ncm-player.open .ncm-panel,.ncm-info { width: min(15.5rem, calc(100vw - 6rem)); }.ncm-volume { width: 1.85rem; }.ncm-time { font-size: .58rem; } }