#music-dock{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:14px;width:244px;z-index:45;direction:rtl;font-family:var(--font);color:var(--ink)}
.music-bar{display:flex;align-items:center;gap:9px;padding:8px;background:var(--ks51);backdrop-filter:blur(18px);border:1px solid var(--kb30);box-shadow:0 8px 35px var(--kh19);border-radius:20px}
.music-bar{cursor:grab;touch-action:none}.music-dragging .music-bar{cursor:grabbing}
.music-toggle{height:44px;width:44px;flex-shrink:0;border:0;border-radius:14px;background:var(--ks52);color:white;display:grid;place-items:center;box-shadow:0 3px 0 var(--kh20)}
.music-toggle:hover{background:var(--ks53)}.music-expand{display:flex;align-items:center;gap:9px;text-align:right;flex:1;min-width:0;border:0;background:transparent;padding:2px 0}
.music-expand strong{display:block;font-size:12px;line-height:1.7}.music-expand small{display:block;font-size:10px;color:var(--kt50);line-height:1.5}.music-mini-art{height:34px;width:34px;flex-shrink:0;display:grid;place-items:center;border-radius:11px;font-size:21px}.music-chevron{margin-right:auto;color:var(--kt51)}.is-playing .music-mini-art{animation:music-bob 2.4s ease-in-out infinite}
.music-panel{position:absolute;bottom:calc(100% + 10px);right:0;width:354px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 180px);overflow-y:auto;overscroll-behavior:contain;border-radius:24px;padding:20px;background:var(--ks54);border:1px solid var(--kb31);box-shadow:0 20px 70px var(--kh21)}.music-panel[hidden]{display:none}
.music-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.music-eyebrow{font-size:9px;letter-spacing:2px;font-weight:800;color:var(--kt52)}.music-heading h2{font-size:18px;margin-top:4px}.music-heading-actions{display:flex;align-items:center;gap:7px}.music-close,.music-panel-toggle{display:grid;place-items:center;border:0;border-radius:50%;height:34px;width:34px;flex-shrink:0}.music-close{background:var(--ks55)}.music-panel-toggle{background:var(--ks52);color:white;box-shadow:0 2px 0 var(--kh20)}.music-intro{font-size:11px;color:var(--kt53);margin:7px 0 17px}.music-group h3{font-size:11px;font-weight:600;color:var(--kt54);margin:15px 0 8px}.music-stations{display:grid;gap:6px}.music-station{display:flex;align-items:center;gap:11px;text-align:right;width:100%;padding:9px;border:1px solid transparent;border-radius:14px;background:transparent}.music-station:hover{background:var(--ks56)}.music-station[aria-pressed=true]{background:var(--ks57);border-color:var(--kb32)}.music-art{width:41px;height:43px;border-radius:13px;display:grid;place-items:center;font-size:26px;flex-shrink:0}.music-station strong{display:block;font-size:12px}.music-station small{display:block;font-size:10px;color:var(--kt55);margin-top:2px}.music-selected{margin-right:auto;color:var(--kt56);visibility:hidden}.music-station[aria-pressed=true] .music-selected{visibility:visible}.music-volume{display:flex;align-items:center;gap:12px;border-top:1px solid var(--kb33);margin-top:17px;padding-top:16px;font-size:11px}.music-volume input{accent-color:var(--ks52);min-width:0;width:100%;height:28px;cursor:pointer}.music-volume output{min-width:34px;direction:ltr}.music-footnote{font-size:10px;line-height:1.8;color:var(--kt57);margin-top:7px}
body:has(#music-dock) .sidebar-bottom{padding-bottom:76px}body:has(#music-dock) .login-footer{padding-bottom:70px}body:has(#music-dock) .exercise{padding-bottom:280px}
@keyframes music-bob{50%{transform:rotate(-8deg) scale(1.06)}}
@media(max-width:720px){#music-dock{width:225px}.music-panel{padding:16px;max-height:calc(100dvh - 235px)}.music-toggle{width:42px;height:42px}.music-bar{padding:7px}.music-panel h2{font-size:17px}body:has(#music-dock) .page{padding-bottom:180px}body:has(#music-dock) .login-main{padding-bottom:90px}}
@media(max-width:720px),(hover:none) and (pointer:coarse){
  #music-dock{width:54px;height:54px;z-index:60;transition:left .18s ease,top .18s ease,width .18s ease;touch-action:none}
  #music-dock.music-dragging{transition:none}
  #music-dock .music-bar{width:54px;height:54px;padding:5px;gap:4px;border-radius:18px;cursor:grab;overflow:hidden;direction:ltr}
  #music-dock.music-dragging .music-bar{cursor:grabbing;box-shadow:0 12px 42px var(--kh21)}
  #music-dock .music-toggle{display:none;width:42px;height:42px;border-radius:13px}
  #music-dock .music-expand{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:13px;text-align:center}
  #music-dock .music-expand>span:not(.music-mini-art){display:none}
  #music-dock .music-mini-art{width:40px;height:40px;border-radius:12px;font-size:24px}
  #music-dock .music-panel{position:fixed;inset:max(12px,env(safe-area-inset-top)) 12px auto 12px;width:auto;max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-top));padding:16px;border-radius:22px;touch-action:pan-y;direction:rtl}
  #music-dock .music-panel h2{font-size:17px}
  body:has(#music-dock) .page{padding-bottom:105px}
  body:has(#music-dock) .login-main{padding-bottom:75px}
  body:has(#music-dock) .exercise{padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){.is-playing .music-mini-art{animation:none}}

/* Open and close from the compact dock instead of appearing abruptly. */
.music-panel{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.9);transform-origin:bottom right;transition:opacity .24s ease,transform .24s cubic-bezier(.2,.85,.25,1.08),visibility 0s linear .24s;will-change:transform,opacity}
#music-dock.music-open .music-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
#music-dock.music-edge-left .music-panel{right:auto;left:0;transform-origin:bottom left}
#music-dock.music-panel-below .music-panel{bottom:auto;top:calc(100% + 10px);transform-origin:top right}
#music-dock.music-edge-left.music-panel-below .music-panel{transform-origin:top left}
#music-dock.music-dragging .music-panel{transition:none}
@media(max-width:720px),(hover:none) and (pointer:coarse){
  #music-dock{--music-origin-x:calc(100vw - 28px);--music-origin-y:calc(100dvh - 90px);width:54px!important;height:54px!important;transition:left .2s ease,top .2s ease!important}
  #music-dock .music-panel{transform-origin:var(--music-origin-x) var(--music-origin-y);transform:scale(.08);transition:opacity .26s ease,transform .26s cubic-bezier(.18,.86,.2,1.04),visibility 0s linear .26s}
  #music-dock.music-open .music-panel{transform:scale(1)}
  /* The !important transition above used to beat the plain transition:none of
     the dragging state, so the bubble trailed 0.2s behind the finger. */
  #music-dock.music-dragging{transition:none!important}
  /* Same bubble on screen, a bigger target for the finger: an invisible ring
     around it catches taps and drags. z-index:-1 keeps it under the icon. */
  #music-dock .music-bar{position:relative;overflow:visible}
  #music-dock .music-bar::before{content:'';position:absolute;inset:-14px;z-index:-1;border-radius:30px}
}
/* No text selection, iOS callout or grey tap flash to cancel a drag midway. */
.music-bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.music-panel,#music-dock .music-panel{transition-duration:.01ms}}