.db-player{--db-bg:#141819;--db-panel:#1e2425;--db-text:#fafcf9;--db-muted:#aeb9b5;--db-accent:#d9e6c6;position:fixed;inset:12px 12px 12px auto;z-index:99990;width:390px;max-width:calc(100vw - 24px);color:var(--db-text);background:var(--db-bg);border:1px solid #ffffff20;border-radius:22px;box-shadow:0 18px 70px #101d2447;overflow:hidden;font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;isolation:isolate;animation:db-enter .25s ease-out}
.db-player[hidden]{display:none!important}.db-player *,.db-player *::before,.db-player *::after{box-sizing:border-box}.db-player button,.db-player a,.db-player input{touch-action:manipulation}.db-player button{font:inherit;color:inherit;cursor:pointer;border:0}.db-player button:disabled{opacity:.35;cursor:default}.db-player button:focus-visible,.db-player a:focus-visible,.db-player input:focus-visible{outline:2px solid var(--db-accent);outline-offset:4px}.db-player svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.db-player button[hidden],.db-player [hidden]{display:none!important}
.db-top{height:59px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:#141819ef;position:relative;z-index:3}.db-top-label{font-size:11px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:#c6cfca}.db-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:transparent;flex-shrink:0}.db-icon:hover{background:#ffffff12}.db-scroll{height:calc(100% - 59px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#64726b transparent;padding:0 22px 24px}.db-visual{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:14px;background:#22292a;overflow:hidden;box-shadow:0 14px 38px #0005}.db-art{width:100%;height:100%;object-fit:cover;display:block}.db-video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;background:#090b0b}.db-visual.is-video{aspect-ratio:4/3}.db-visual.is-portrait{aspect-ratio:4/5;max-height:42vh}
.db-heading{display:flex;gap:12px;align-items:flex-start;margin:22px 0 13px}.db-heading-copy{min-width:0;flex:1}.db-track-title{margin:0;font-size:23px;font-weight:700;letter-spacing:-.65px;line-height:1.22;color:var(--db-text);overflow-wrap:anywhere}.db-track-artist{margin:6px 0 0;color:var(--db-muted);font-size:13px}.db-album-name{font-size:11px;margin:3px 0 0;color:#8f9e97}.db-watch{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10px!important;font-weight:600!important;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff1c!important;padding:7px 9px;border-radius:20px}.db-watch svg{width:15px;height:15px}
.db-progress{display:grid;grid-template-columns:1fr;gap:4px}.db-range{display:block;width:100%;height:20px;margin:0;background:transparent;accent-color:var(--db-accent);cursor:pointer}.db-range::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--db-accent) var(--progress,0%),#ffffff25 var(--progress,0%));border-radius:5px}.db-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--db-accent);margin-top:-4px}.db-range{-webkit-appearance:none;appearance:none}.db-range::-moz-range-track{height:3px;border-radius:4px;background:#ffffff25}.db-range::-moz-range-progress{height:3px;background:var(--db-accent)}.db-range::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--db-accent)}.db-time{display:flex;justify-content:space-between;font-size:10px;font-variant-numeric:tabular-nums;color:var(--db-muted)}
.db-controls{display:flex;align-items:center;justify-content:center;gap:23px;margin:6px 0 20px}.db-controls .db-icon svg{width:22px;height:22px}.db-play{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--db-accent);color:#1d2922!important;box-shadow:0 4px 14px #0003;transition:transform .15s}.db-play:hover{transform:scale(1.06);background:#e9f3dd}.db-play svg{width:24px;height:24px;fill:currentColor;stroke-width:0}.db-play.is-playing svg{fill:none;stroke:currentColor;stroke-width:5}.db-volume{display:flex;align-items:center;gap:6px;max-width:92px}.db-volume svg{width:16px;height:16px;color:var(--db-muted)}.db-volume input{width:58px}.db-controls .db-back{margin-left:auto}.db-controls .db-forward{margin-right:auto}.db-error{font-size:12px;color:#e7d3ad;line-height:1.5;margin:0 0 14px}.db-error:empty{display:none}
.db-lyrics{position:relative;border:1px solid #ffffff0b;border-radius:14px;background:linear-gradient(145deg,#313f37,#222c28);padding:17px 18px;margin:0 0 23px}.db-section-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 13px}.db-section-top h3{font-size:12px;font-weight:650;letter-spacing:.02em;margin:0;color:#f2f6ee}.db-follow{border-radius:20px;font-size:10px!important;background:#ffffff14;padding:5px 9px}.db-follow:hover{background:#ffffff24}.db-lyric-lines{height:215px;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;scroll-behavior:auto;overflow-anchor:none;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 24px),transparent);padding:4px 0 88px}.db-lyric-lines::-webkit-scrollbar{display:none}.db-lyric{display:block;text-align:left;width:100%;background:none;padding:5px 0;font-size:21px!important;font-weight:650!important;line-height:1.4;color:#ffffff52!important;transition:color .2s,transform .2s}.db-lyric:hover{color:#e2edd3!important}.db-lyric.is-current{color:#fff!important}.db-lyric.is-past{color:#d0d9cd!important}.db-lyric-note{margin:20px 0;color:#d4dfd0;font-size:13px;line-height:1.7}.db-lyrics:has(.db-lyric-note:not([hidden])) .db-lyric-lines{height:auto;min-height:44px;padding:0;mask-image:none;-webkit-mask-image:none}
.db-queue{margin:0 0 24px}.db-queue .db-section-top{margin-bottom:10px}.db-track-count{font-size:10px;color:var(--db-muted)}.db-track-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}.db-track{display:grid;grid-template-columns:22px minmax(0,1fr) 34px;gap:10px;align-items:center;text-align:left;width:100%;padding:10px 9px;background:transparent;border-radius:8px;min-height:47px}.db-track:hover{background:#ffffff09}.db-track[aria-current=true]{background:#ffffff10;color:var(--db-accent)}.db-number{font-size:11px;color:var(--db-muted);text-align:center;font-variant-numeric:tabular-nums}.db-track[aria-current=true] .db-number{color:var(--db-accent)}.db-track-name{font-size:12px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}.db-track-duration{font-size:10px;color:var(--db-muted);font-variant-numeric:tabular-nums;text-align:right}.db-services{padding-top:18px;border-top:1px solid #ffffff13}.db-services-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#98a69f;margin-bottom:12px}.db-service-links{display:flex;gap:8px;flex-wrap:wrap}.db-service{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 10px;border:1px solid #ffffff21;border-radius:30px;font-size:10px;color:#e7ede7!important;text-decoration:none!important;background:#ffffff04;cursor:pointer}.db-service:hover{background:#ffffff10;border-color:#ffffff55}.db-service svg{width:14px;height:14px}.db-queue-toggle{font-size:11px!important;background:transparent;color:var(--db-muted)!important;padding:0}
.tl-album[data-db-album]{cursor:pointer;position:relative}.tl-album[data-db-album] .tl-album-cover{position:relative}.db-card-play{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e6efdd;color:#243328;box-shadow:0 3px 10px #0003;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.db-card-play svg{width:12px;height:12px;fill:currentColor;stroke:none}.tl-album[data-db-album]:hover .db-card-play,.tl-album[data-db-album]:focus-visible .db-card-play,.tl-album[aria-expanded=true] .db-card-play{opacity:1;transform:none}.tl-album[aria-expanded=true] .tl-album-cover{outline:2px solid #74896d;outline-offset:4px}
@keyframes db-enter{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.db-player{width:410px;inset:18px 18px 18px auto}.db-scroll{padding:0 24px 24px}}
@media(max-width:760px){.db-player{inset:0;max-width:none;width:100%;height:100dvh;border:0;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:none}.db-top{height:57px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}.db-scroll{height:calc(100% - 57px);padding:0 max(24px,env(safe-area-inset-right,0px)) 30px max(24px,env(safe-area-inset-left,0px))}.db-visual{max-width:360px;margin:0 auto;max-height:38svh;aspect-ratio:1;object-fit:contain}.db-visual:not(.is-video){width:min(100%,38svh)}.db-visual.is-portrait{max-height:42svh}.db-heading{margin-top:24px}.db-track-title{font-size:25px}.db-controls{margin-bottom:24px;gap:30px}.db-lyrics{padding:19px 21px}.db-lyric-lines{height:230px}.db-lyric{font-size:24px!important}.db-volume{display:none}.db-controls .db-back,.db-controls .db-forward{margin:0}.db-service{font-size:12px}.db-track{padding:12px 8px}.db-track-name{font-size:14px}.db-track-duration,.db-number{font-size:12px}.db-card-play{opacity:1;transform:none}body.db-player-modal{overflow:hidden!important}}
@media(prefers-reduced-motion:reduce){.db-player,.db-player *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.db-player{box-sizing:border-box}.db-lyric.is-current .db-word{color:#ffffff65}.db-lyric.is-current .db-word.is-sung{color:#fff}.db-lyric.is-current .db-word.is-singing{color:#e8f8c9;text-shadow:0 0 18px #d9e6c62a}
@media(min-width:761px) and (max-width:1599px){.db-player{width:min(390px,max(300px,calc(50vw - 314px)))}}
.db-lyric-lines:focus{outline:none}.db-lyric-lines:focus-visible{background:#ffffff04;border-radius:6px}

.db-controls{position:relative;padding:0 40px;gap:18px}.db-controls .db-back,.db-controls .db-forward{margin:0}.db-volume{position:absolute;right:0;top:50%;transform:translateY(-50%);display:block;max-width:none}.db-volume-toggle{width:32px;height:36px}.db-volume-toggle svg{width:18px;height:18px}.db-volume-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:158px;padding:12px 14px;border:1px solid #ffffff24;border-radius:12px;background:#252e29;box-shadow:0 10px 28px #0006}.db-volume-menu label{display:block;font-size:11px;color:var(--db-muted);margin-bottom:5px}.db-volume-menu input{width:100%}.db-volume-toggle[aria-expanded=true]{background:#ffffff16}@media(max-width:760px){.db-controls{padding:0 38px;gap:24px}.db-volume{display:none}}

.db-controls{z-index:6}

/* Keep album thumbnails on their own paint layers during player animation. */
.tl-album[data-db-album] .tl-album-cover img{transform:translateZ(0);backface-visibility:hidden}
