/* now playing (05.11): a drawer at the right edge. Closed it is a small cover tab; open it is a panel with the cover,
   the track, a thin progress line and one round button. The cover is grey at rest and takes its colour while it plays. */
.dr{position:fixed;z-index:45;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;pointer-events:none}
/* the tab */
.dr-tab{pointer-events:auto;position:relative;display:flex;align-items:center;gap:10px;margin-bottom:0;padding:6px 14px 6px 6px;border:0;border-radius:16px 0 0 16px;background:#111112f2;box-shadow:inset 0 0 0 1px #ffffff1c,inset 0 1px 0 #ffffff1a,-10px 14px 36px #000b;color:var(--t2,#a0a09e);cursor:pointer;transform:translateX(calc(100% - 58px));transition:transform .5s var(--out,ease),opacity .3s,color .3s}
.dr-tab:hover,.dr-tab:focus-visible{transform:translateX(0);color:var(--t1,#f4f4f2)}
.dr-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dr-tab img{width:44px;height:44px;flex:none;border-radius:11px;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .8s}
.dr-tab .dr-tt{display:flex;flex-direction:column;gap:3px;text-align:left;white-space:nowrap}
.dr-tab b{font:500 13px/1.1 var(--sans);color:var(--t1,#f4f4f2)}
.dr-tab small{font:500 11px/1 var(--mono,monospace);letter-spacing:.04em;color:var(--t3,#6f6f6c)}
.dr-eq{position:absolute;left:18px;top:18px;display:flex;align-items:flex-end;gap:2px;height:14px;opacity:0;transition:opacity .3s}
.dr-eq u{width:3px;height:100%;border-radius:2px;background:#fff;box-shadow:0 0 6px #0009;transform-origin:bottom;animation:drEq .9s ease-in-out infinite alternate;animation-play-state:paused}
.dr-eq u:nth-child(2){animation-delay:-.3s}.dr-eq u:nth-child(3){animation-delay:-.6s}
.dr.on .dr-eq{opacity:1}.dr.on .dr-eq u{animation-play-state:running}
.dr.on .dr-tab img,.dr.on .dr-cv img{filter:none}
@keyframes drEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.dr.open .dr-tab{opacity:0;pointer-events:none;transform:translateX(100%)}

/* the panel */
.dr-p{pointer-events:auto;position:absolute;right:16px;bottom:0;width:min(320px,calc(100vw - 32px));padding:14px;border-radius:26px;background:#0e0e0f;box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff21,0 30px 80px #000d;overflow:hidden;isolation:isolate;
  opacity:0;visibility:hidden;transform:translateX(calc(100% + 24px));transition:transform .6s var(--out,cubic-bezier(.23,1,.32,1)),opacity .35s,visibility 0s .6s}
.dr.open .dr-p{opacity:1;visibility:visible;transform:none;transition:transform .6s var(--out,cubic-bezier(.23,1,.32,1)),opacity .35s,visibility 0s}
/* the cover, blurred and very dim, lights the panel from behind */
.dr-glow{position:absolute;inset:-30%;z-index:-1;background:var(--cov) center/cover;filter:blur(46px) saturate(.9);opacity:.18;transition:opacity 1s}
.dr:not(.on) .dr-glow{filter:blur(46px) grayscale(1);opacity:.12}
.dr-x{position:absolute;z-index:2;top:22px;right:22px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#000000a0;color:#f4f4f2;cursor:pointer;opacity:.8;transition:opacity .2s,transform .2s}
.dr-x:hover{opacity:1}.dr-x:active{transform:scale(.92)}
.dr-x svg{width:14px;height:14px}
.dr-cv{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px #000c,inset 0 0 0 1px #ffffff14}
.dr-cv img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8);transform:scale(1.02);transition:filter 1.2s ease,transform 8s ease}
.dr.on .dr-cv img{transform:scale(1.08)}
.dr-cv::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 55%,#0008);pointer-events:none}
.dr-row{display:flex;align-items:center;gap:14px;margin:16px 4px 0}
.dr-m{flex:1;min-width:0;margin:0}
.dr-m b{display:block;font:500 19px/1.15 var(--sans);letter-spacing:-.015em;color:var(--t1,#f4f4f2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-m span{display:block;margin-top:5px;font:500 12px/1 var(--mono,monospace);letter-spacing:.04em;color:var(--t3,#6f6f6c)}
.dr-b{position:relative;display:grid;place-items:center;flex:none;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:#f4f4f2;color:#0a0a0b;cursor:pointer;box-shadow:0 6px 20px #0009,inset 0 -2px 0 #0000001f;transition:transform .2s,box-shadow .3s}
.dr-b:active{transform:scale(.93)}
@media(hover:hover){.dr-b:hover{box-shadow:0 6px 26px #ffffff33,inset 0 -2px 0 #0000001f}}
.dr-b:focus-visible,.dr-x:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dr-i{position:absolute;width:21px;height:21px;transition:opacity .2s,transform .3s var(--out,ease)}
.dr-pause,.dr.on .dr-play{opacity:0;transform:scale(.6)}
.dr.on .dr-pause{opacity:1;transform:none}
/* progress: a thin line, thicker under the finger */
.dr-bar{position:relative;height:22px;margin:12px 4px 0;cursor:pointer;touch-action:none;outline:0}
.dr-bar::before,.dr-fill{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;background:#ffffff1f;transition:height .2s,top .2s}
.dr-fill{right:auto;width:0;background:#f4f4f2}
.dr-bar:hover::before,.dr-bar:hover .dr-fill,.dr-bar.drag::before,.dr-bar.drag .dr-fill{top:9px;height:5px}
.dr-fill::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #000a;transform:scale(0);transition:transform .2s}
.dr-bar:hover .dr-fill::after,.dr-bar.drag .dr-fill::after,.dr-bar:focus-visible .dr-fill::after{transform:none}
.dr-tm{display:flex;justify-content:space-between;margin:2px 4px 2px;font:500 11px/1 var(--mono,monospace);color:var(--t3,#6f6f6c);font-variant-numeric:tabular-nums}
@media(max-width:560px){.dr{bottom:calc(18px + env(safe-area-inset-bottom,0px))}.dr-p{right:12px;width:min(300px,calc(100vw - 24px))}.dr-tab img{width:40px;height:40px}.dr-tab{transform:translateX(calc(100% - 52px))}}
@media(prefers-reduced-motion:reduce){.dr-eq u{animation:none}.dr-cv img{transition:filter .3s}.dr.on .dr-cv img{transform:scale(1.02)}}

/* 05.11 v3: softer type (Onest throughout), volume, and motion */
.dr-tab b{font:600 13.5px/1.1 var(--sans);letter-spacing:-.01em}
.dr-tab small{font:400 12px/1.1 var(--sans);letter-spacing:0;color:#8a8a88}
.dr-m b{font:600 20px/1.15 var(--sans);letter-spacing:-.025em}
.dr-m span{margin-top:6px;font:400 14px/1.2 var(--sans);letter-spacing:-.005em;color:#8f8f8d}
.dr-tm{font:500 11.5px/1 var(--sans);letter-spacing:.01em;color:#7a7a78}
/* volume */
.dr-v{display:flex;align-items:center;gap:10px;margin:14px 2px 2px}
.dr-mu{display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:#8f8f8d;cursor:pointer;transition:color .2s,background .2s}
.dr-mu:hover{color:#f4f4f2;background:#ffffff0d}
.dr-mu:focus-visible{outline:2px solid #fff;outline-offset:1px}
.dr-mu svg{width:19px;height:19px}
.dr-mu path{transition:opacity .25s,transform .3s var(--out,ease);transform-origin:12px 12px}
.dr-mu .mx{opacity:0;transform:scale(.4)}
.dr.low .dr-mu .w2{opacity:0}
.dr.mute .dr-mu .w1,.dr.mute .dr-mu .w2{opacity:0;transform:scale(.7)}
.dr.mute .dr-mu .mx{opacity:1;transform:none}
.dr-vb{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none;outline:0}
.dr-vb::before,.dr-vf{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;background:#ffffff1f;transition:height .2s,top .2s}
.dr-vf{right:auto;background:#cfcfcd}
.dr-vb:hover::before,.dr-vb:hover .dr-vf,.dr-vb.drag::before,.dr-vb.drag .dr-vf{top:9px;height:5px}
.dr-vf::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #000a;transform:scale(0);transition:transform .2s}
.dr-vb:hover .dr-vf::after,.dr-vb.drag .dr-vf::after,.dr-vb:focus-visible .dr-vf::after{transform:none}
.dr.no-vol .dr-v{display:none}
.dr-fill{transition:height .2s,top .2s}

/* motion: the panel grows out of the tab with a light spring, its parts follow one by one */
.dr-p{transform-origin:100% 100%;transform:translate(18px,14px) scale(.82);filter:blur(4px);
  transition:transform .42s cubic-bezier(.4,0,.6,1),opacity .26s ease,filter .3s ease,visibility 0s .42s}
.dr.open .dr-p{transform:none;filter:none;transition:transform .7s cubic-bezier(.22,1.25,.36,1),opacity .3s ease,filter .4s ease,visibility 0s}
.dr-p>:is(.dr-cv,.dr-row,.dr-bar,.dr-tm,.dr-v,.dr-x){opacity:0;transform:translateY(12px);transition:opacity .2s,transform .3s}
.dr.open .dr-p>:is(.dr-cv,.dr-row,.dr-bar,.dr-tm,.dr-v,.dr-x){opacity:1;transform:none;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.dr.open .dr-cv{transition-delay:.05s}
.dr.open .dr-row{transition-delay:.13s}
.dr.open .dr-bar,.dr.open .dr-tm{transition-delay:.2s}
.dr.open .dr-v{transition-delay:.27s}
.dr.open .dr-x{transition-delay:.32s}
.dr-cv img{transform:scale(1.12)}
.dr.open .dr-cv img{transform:scale(1.02);transition:filter 1.2s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
/* while it plays: the cover breathes and a soft halo pulses around the button */
.dr.on.open .dr-cv img{animation:drBreath 7s ease-in-out infinite alternate}
@keyframes drBreath{from{transform:scale(1.03)}to{transform:scale(1.09)}}
.dr-cv{transition:box-shadow 1.2s ease}
.dr.on .dr-cv{box-shadow:0 22px 50px #000d,0 0 60px -10px #ffffff1a,inset 0 0 0 1px #ffffff14}
.dr-b::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 #ffffff40;opacity:0}
.dr.on .dr-b::before{opacity:1;animation:drHalo 2.4s ease-out infinite}
@keyframes drHalo{from{box-shadow:0 0 0 0 #ffffff38}to{box-shadow:0 0 0 14px #fff0}}
.dr-b:active{transform:scale(.9)}
.dr-i{transition:opacity .22s,transform .45s cubic-bezier(.22,1.4,.36,1)}
.dr-pause,.dr.on .dr-play{transform:scale(.5) rotate(-30deg)}
/* the tab: the cover tilts a little on hover and spins slowly like a record while the track plays */
.dr-tab img{transition:filter .8s,transform .5s cubic-bezier(.22,1,.36,1),border-radius .5s}
.dr-tab:hover img{transform:rotate(-4deg) scale(1.04)}
.dr.on .dr-tab img{border-radius:50%;animation:drSpin 8s linear infinite}
@keyframes drSpin{to{transform:rotate(1turn)}}
.dr-eq{left:21px;top:21px}
@media(prefers-reduced-motion:reduce){.dr-p,.dr.open .dr-p,.dr-p>*,.dr.open .dr-p>*{transition-duration:.01s!important;transition-delay:0s!important;filter:none}.dr.on.open .dr-cv img,.dr.on .dr-b::before,.dr.on .dr-tab img{animation:none}}

/* 05.11 v4: no spinning, a touch of transparency, a calm order: cover / title / progress + times / transport / volume */
.dr.on .dr-tab img{border-radius:11px;animation:none}
.dr-p{background:#0e0e0ff7}
@media (min-width:900.02px) and (hover:hover){.dr-p{background:#0e0e0fc7;-webkit-backdrop-filter:blur(18px) saturate(.6);backdrop-filter:blur(18px) saturate(.6)}}
.dr-row{display:block;margin:16px 6px 0}
.dr-bar{margin:14px 6px 0}
.dr-tm{margin:0 6px}
.dr-ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:8px 6px 0}
.dr-ctl .dr-b{grid-column:2;width:54px;height:54px}
.dr-sk{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:none;color:#a0a09e;cursor:pointer;transition:color .2s,background .2s,transform .2s}
.dr-back{justify-self:end;margin-right:18px}.dr-fwd{justify-self:start;margin-left:18px}
.dr-sk:hover{color:#f4f4f2;background:#ffffff0d}.dr-sk:active{transform:scale(.9)}
.dr-sk:focus-visible{outline:2px solid #fff;outline-offset:1px}
.dr-sk svg{width:26px;height:26px}
.dr-sk b{position:absolute;font:600 8.5px/1 var(--sans);letter-spacing:-.02em;padding-top:2px}
.dr-v{margin:10px 6px 0;padding-top:12px;border-top:1px solid #ffffff0f}
.dr-mu{margin-left:-6px}
.dr.open .dr-ctl{transition-delay:.24s}
.dr.open .dr-v{transition-delay:.3s}
.dr-p>.dr-ctl{opacity:0;transform:translateY(12px);transition:opacity .2s,transform .3s}
.dr.open .dr-p>.dr-ctl{opacity:1;transform:none;transition:opacity .5s ease .24s,transform .7s cubic-bezier(.22,1,.36,1) .24s}

/* 05.11 v5: the line rolls back at the end */
.dr.rewind .dr-fill{transition:width 1.1s cubic-bezier(.22,1,.36,1),height .2s,top .2s}

/* 06.11: the accent from the cover (--acc, set by player.js). Grey at rest, it flows in while the track plays */
.dr-fill,.dr-vf{transition:background-color .7s ease,height .2s,top .2s}
.dr-fill::after,.dr-vf::after{transition:transform .2s,background-color .7s ease,box-shadow .7s ease}
.dr.has-acc.on .dr-fill,.dr.has-acc.on .dr-fill::after{background-color:var(--acc)}
.dr.has-acc.on .dr-fill{box-shadow:0 0 12px color-mix(in srgb,var(--acc) 55%,transparent)}
.dr.has-acc.on .dr-fill::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 28%,transparent),0 2px 8px #000a}
.dr.has-acc.on .dr-vf,.dr.has-acc.on .dr-vf::after{background-color:color-mix(in srgb,var(--acc) 75%,#fff)}
.dr.has-acc.on .dr-b::before{animation-name:drHaloAcc}
@keyframes drHaloAcc{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}to{box-shadow:0 0 0 16px transparent}}
.dr.has-acc.on .dr-b{box-shadow:0 6px 26px color-mix(in srgb,var(--acc) 45%,transparent),inset 0 -2px 0 #0000001f}
/* a wash of the colour from the top of the panel and a tinted rim */
.dr-p::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(90% 55% at 50% 0,color-mix(in srgb,var(--acc,#fff) 22%,transparent),transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc,#fff) 30%,transparent)}
.dr.has-acc.on .dr-p::after{opacity:1}
.dr.has-acc.on .dr-tab{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),inset 0 1px 0 #ffffff1a,-10px 14px 36px #000b,-4px 0 24px color-mix(in srgb,var(--acc) 18%,transparent)}
.dr.has-acc.on .dr-eq u{background:var(--acc)}
.dr-tab{transition:transform .5s var(--out,ease),opacity .3s,color .3s,box-shadow .8s ease}
/* 06.11: the panel itself stays neutral; only the details take the colour */
.dr.has-acc.on .dr-p::after{opacity:0}
.dr.on .dr-glow{filter:blur(46px) grayscale(1);opacity:.12}

/* 06.11 smoother motion: one spring for everything that moves, the cover flies between the tab and the panel,
   the cover sits a little smaller on pause and grows when the track plays */
.dr{--spr:cubic-bezier(.22,1,.36,1)}
@supports (transition-timing-function:linear(0,1)){.dr{--spr:linear(0, .026, .091, .181, .285, .393, .499, .598, .688, .766, .833, .889, .933, .968, .995, 1.013, 1.026, 1.034, 1.038, 1.038, 1.037, 1.034, 1.031, 1.027, 1.023, 1.019, 1.015, 1.012, 1.009, 1.006, 1.004, 1.002, 1.001, 1)}}
.dr-p{transform:translate(14px,18px) scale(.9);filter:blur(3px);transition:transform .38s cubic-bezier(.4,0,.7,.2),opacity .26s ease .06s,filter .3s ease,visibility 0s .42s}
.dr.open .dr-p{transform:none;filter:none;transition:transform .8s var(--spr),opacity .28s ease,filter .45s ease,visibility 0s}
.dr-p>:is(.dr-row,.dr-bar,.dr-tm,.dr-ctl,.dr-v,.dr-x){transform:translateY(14px);transition:opacity .16s ease,transform .3s ease}
.dr.open .dr-p>:is(.dr-row,.dr-bar,.dr-tm,.dr-ctl,.dr-v,.dr-x){transition:opacity .45s ease,transform .8s var(--spr)}
.dr.open .dr-row{transition-delay:.12s}.dr.open .dr-bar,.dr.open .dr-tm{transition-delay:.18s}.dr.open .dr-ctl{transition-delay:.23s}.dr.open .dr-v{transition-delay:.28s}.dr.open .dr-x{transition-delay:.34s}
.dr-cv{scale:.9;transition:opacity .3s ease,transform .8s var(--spr),scale .9s var(--spr),box-shadow 1s ease}
.dr.on .dr-cv{scale:1}
.dr.open .dr-p>.dr-cv{transition:opacity .3s ease .04s,transform .8s var(--spr) .04s,scale .9s var(--spr),box-shadow 1s ease}
.dr-cv.flying,.dr.open .dr-p>.dr-cv.flying{opacity:0;transition:none}
.dr.measure,.dr.measure *{transition:none!important;animation-play-state:paused!important}
.dr.measure .dr-p,.dr.measure .dr-p>*{transform:none!important;filter:none!important}
.dr-fly{position:fixed;z-index:60;margin:0;object-fit:cover;pointer-events:none;transform-origin:0 0;filter:grayscale(1) brightness(.8);box-shadow:0 18px 40px #000a;will-change:transform}
.dr-fly.on{filter:none}
.dr-mu path{transition:opacity .3s ease,transform .5s var(--spr)}
.dr-i{transition:opacity .22s ease,transform .55s var(--spr)}
.dr-sk{transition:color .2s,background .2s,transform .45s var(--spr)}
.dr-sk:active{transform:scale(.86);transition-duration:.1s}
.dr-fill::after,.dr-vf::after{transition:transform .4s var(--spr),background-color .7s ease,box-shadow .7s ease}
@media(prefers-reduced-motion:reduce){.dr-cv,.dr.on .dr-cv{scale:1}}
/* 06.11: the cover no longer flies or changes size — it simply comes in with the panel, with no overshoot */
.dr-cv,.dr.on .dr-cv{scale:none}
.dr-p>.dr-cv{transform:translateY(10px);transition:opacity .2s ease,transform .3s ease,box-shadow 1s ease}
.dr.open .dr-p>.dr-cv{transform:none;transition:opacity .45s ease .04s,transform .6s cubic-bezier(.22,1,.36,1) .04s,box-shadow 1s ease}
.dr.on.open .dr-cv img{animation:none}
/* 06.11: no bars on the tab; while playing its cover gets a white-pink ring that flashes on the beat (player.js pulse) */
.dr-eq{display:none}
.dr-tab img{transition:filter .8s,transform .5s cubic-bezier(.22,1,.36,1)}
.dr.on .dr-tab img{box-shadow:0 0 0 1.5px color-mix(in srgb,#fff 60%,var(--acc,#ff8fb8))}
/* 06.11: the beat ring is on the tab's outer edge, not on the cover; per-frame values, so no transition on it while playing */
.dr.on .dr-tab img{box-shadow:none}
.dr.on .dr-tab{transition:transform .5s var(--out,ease),opacity .3s,color .3s}
.dr-tab{transform-origin:100% 50%}
/* 06.11: the pulse ring is white with pink running through it (a gradient ring and its blurred glow), driven by --k */
.dr-tab::before,.dr-tab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .6s ease}
.dr-tab::before{padding:calc(1.2px + var(--k,0) * 1.8px);background:linear-gradient(115deg,#fff 0%,color-mix(in srgb,var(--acc,#ff8fb8) 70%,#fff) 35%,#fff 55%,color-mix(in srgb,var(--acc,#ff8fb8) 85%,#fff) 80%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dr-tab::after{z-index:-1;inset:-2px;background:linear-gradient(115deg,#fff,var(--acc,#ff8fb8) 45%,#fff 70%,var(--acc,#ff8fb8));filter:blur(calc(6px + var(--k,0) * 16px));transform:scale(calc(1 + var(--k,0) * .06))}
.dr.on .dr-tab::before{opacity:calc(.55 + var(--k,0) * .45)}
.dr.on .dr-tab::after{opacity:calc(var(--k,0) * .7)}
.dr.on .dr-tab,.dr.has-acc.on .dr-tab{box-shadow:inset 0 1px 0 #ffffff1a,-10px 14px 36px #000b}
.dr-tab{isolation:isolate}
.dr.on .dr-tab::before,.dr.on .dr-tab::after{transition:none}
.dr.on .dr-tab::after{opacity:calc(var(--k,0) * .85)}
/* 06.11: only pink, nothing that moves the tab: a constant pink rim and a pink glow that breathes with the beat */
.dr-tab::before{padding:1.5px;background:var(--acc,#ff8fb8)}
.dr.on .dr-tab::before{opacity:.85}
.dr-tab::after{inset:0;background:var(--acc,#ff8fb8);filter:blur(14px);transform:none}
.dr.on .dr-tab::after{opacity:calc(var(--k,0) * .75)}

/* 06.11 phones: the tab sits at the bottom centre where a thumb reaches it, the player opens in the middle of the
   screen over a dimmed page; no blur and no spring there, just a short calm ease */
@media (max-width:900px),(hover:none){
  .dr{left:0;right:0;justify-content:center;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .dr-tab,.dr-tab:hover,.dr-tab:focus-visible{transform:none;border-radius:20px;padding:6px 16px 6px 6px;transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)}
  .dr-tab img{width:40px;height:40px;border-radius:12px}
  .dr.open .dr-tab{opacity:0;transform:translateY(16px) scale(.94);pointer-events:none}
  .dr.on .dr-tab{transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1)}
  .dr::before{content:"";position:fixed;inset:0;z-index:-1;background:#000000a6;opacity:0;transition:opacity .35s ease;pointer-events:none}
  .dr.open::before{opacity:1}
  .dr-p{position:fixed;left:50%;top:50%;right:auto;bottom:auto;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;
    transform-origin:50% 50%;filter:none;transform:translate(-50%,calc(-50% + 28px)) scale(.96);
    transition:transform .3s cubic-bezier(.4,0,1,1),opacity .22s ease,visibility 0s .3s}
  .dr.open .dr-p{filter:none;transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s}
  .dr-p>:is(.dr-cv,.dr-row,.dr-bar,.dr-tm,.dr-ctl,.dr-v,.dr-x){transform:translateY(8px);transition:opacity .15s ease,transform .2s ease}
  .dr.open .dr-p>:is(.dr-cv,.dr-row,.dr-bar,.dr-tm,.dr-ctl,.dr-v,.dr-x){transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .dr.open .dr-cv{transition-delay:.03s}.dr.open .dr-row{transition-delay:.07s}.dr.open .dr-bar,.dr.open .dr-tm{transition-delay:.1s}.dr.open .dr-ctl{transition-delay:.13s}.dr.open .dr-v{transition-delay:.16s}.dr.open .dr-x{transition-delay:.18s}
  .dr-cv img,.dr.open .dr-cv img{transform:none;transition:filter 1s ease}
}
@media (max-width:900px) and (max-height:700px),(hover:none) and (max-height:700px){.dr-cv{width:min(100%,230px);margin-inline:auto}}
@media (max-width:900px),(hover:none){.dr.open::before{pointer-events:auto}}
/* 06.11: nothing glows inside the mini player — the pulse is an outer shadow only (outer shadows are clipped to the outside of the box) */
.dr-tab::after{inset:0;background:none;filter:none;box-shadow:0 0 18px 3px color-mix(in srgb,var(--acc,#ff8fb8) 80%,transparent)}
.dr-tab{background:#111112}