@react-youtube-jukebox/core 0.1.0 → 0.1.2

package/dist/index.css

@@ -1,1345 +0,0 @@
-/* src/styles/jukebox.css */
-.rj-root {
-  --rj-text: #111827;
-  --rj-text-muted: #667085;
-  --rj-border: rgba(255, 255, 255, 0.55);
-  --rj-panel: rgba(255, 255, 255, 0.84);
-  --rj-shadow: 0 18px 44px -22px rgba(15, 23, 42, 0.28);
-  --rj-gradient:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #e3eaf2 100%);
-  --rj-gradient-soft:
-    linear-gradient(
-      180deg,
-      #f8fafc 0%,
-      #e7edf4 100%);
-  --rj-button-text: #334155;
-  --rj-dock-bg: rgba(255, 255, 255, 0.82);
-  --rj-dock-shadow: 0 -8px 22px -16px rgba(15, 23, 42, 0.24), 0 10px 28px -20px rgba(15, 23, 42, 0.2);
-  --rj-dock-inner-bg:
-    linear-gradient(
-      
-      180deg,
-      rgba(255, 255, 255, 0.84) 0%,
-      rgba(241, 245, 249, 0.94) 100% );
-  --rj-track-hover-bg: rgba(255, 255, 255, 0.55);
-  --rj-level-gradient:
-    linear-gradient(
-      
-      180deg,
-      #f8fafc 0%,
-      #cbd5e1 45%,
-      #64748b 100% );
-  --rj-level-shadow-color: rgba(148, 163, 184, 0.14);
-  --rj-icon-hover-bg: rgba(15, 23, 42, 0.04);
-  --rj-shell-border: rgba(0, 0, 0, 0.06);
-  --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
-  --rj-screen-frame-border: #c7d0da;
-  --rj-screen-frame-bg:
-    linear-gradient(
-      180deg,
-      #fbfdff 0%,
-      #e9eef4 100%);
-  --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
-  --rj-screen-border: #9aa7b8;
-  --rj-screen-bg: #0f172a;
-  --rj-player-bg:
-    radial-gradient(
-      circle at top,
-      rgba(45, 212, 191, 0.15),
-      transparent 45%),
-    linear-gradient(
-      180deg,
-      rgba(15, 23, 42, 0.96) 0%,
-      rgba(2, 6, 23, 1) 100%);
-  --rj-chip-border: #b4bfcc;
-  --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  --rj-chip-primary-border: #a7b3c2;
-  --rj-chip-primary-text: #1e293b;
-  --rj-volume-track: #cbd5e1;
-  --rj-volume-thumb: #334155;
-  --rj-volume-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  --rj-expanded-icon: #475569;
-  --rj-expanded-icon-hover: #1e293b;
-  --rj-next-border: #c3cad5;
-  --rj-next-bg:
-    linear-gradient(
-      180deg,
-      #f8fafc 0%,
-      #e8edf3 100%);
-  --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  --rj-font-family:
-    Inter,
-    "Segoe UI",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
-  --rj-root-width: min(320px, calc(100vw - 16px));
-  --rj-root-expanded-width: min(320px, calc(100vw - 16px));
-  --rj-dock-radius: 22px;
-  --rj-dock-padding: 6px;
-  --rj-dock-backdrop: blur(18px) saturate(1.5);
-  --rj-dock-inner-radius: 18px;
-  --rj-dock-inner-gap: 6px;
-  --rj-dock-inner-padding-right: 6px;
-  --rj-track-summary-radius: 18px;
-  --rj-track-summary-padding: 10px 12px;
-  --rj-expanded-radius: 22px;
-  --rj-expanded-padding: 8px;
-  --rj-expanded-backdrop: blur(18px) saturate(1.5);
-  --rj-shell-radius: 18px;
-  --rj-shell-padding: 12px;
-  --rj-screen-frame-radius: 15px;
-  --rj-screen-frame-padding: 8px;
-  --rj-screen-radius: 12px;
-  --rj-screen-padding: 8px;
-  --rj-player-radius: 10px;
-  --rj-chip-radius: 9999px;
-  --rj-chip-padding: 7px 10px;
-  --rj-volume-width: 72px;
-  --rj-expanded-control-gap: 8px;
-  --rj-next-radius: 16px;
-  --rj-next-padding: 10px 12px;
-  color: var(--rj-text);
-  z-index: 50;
-  width: var(--rj-root-width);
-  overflow: visible;
-  font-family: var(--rj-font-family);
-}
-.rj-root[data-theme=simple] {
-  --rj-text: #171717;
-  --rj-text-muted: #737373;
-  --rj-border: rgba(23, 23, 23, 0.1);
-  --rj-panel: #ffffff;
-  --rj-shadow: 0 16px 40px -28px rgba(23, 23, 23, 0.24);
-  --rj-gradient:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #f5f5f5 100%);
-  --rj-gradient-soft:
-    linear-gradient(
-      180deg,
-      #fafafa 0%,
-      #f4f4f5 100%);
-  --rj-button-text: #262626;
-  --rj-dock-bg: #ffffff;
-  --rj-dock-shadow: 0 14px 32px -28px rgba(23, 23, 23, 0.2);
-  --rj-dock-inner-bg: #ffffff;
-  --rj-track-hover-bg: #f5f5f5;
-  --rj-level-gradient:
-    linear-gradient(
-      
-      180deg,
-      #fafafa 0%,
-      #d4d4d8 52%,
-      #52525b 100% );
-  --rj-level-shadow-color: rgba(82, 82, 91, 0.12);
-  --rj-icon-hover-bg: rgba(23, 23, 23, 0.05);
-  --rj-shell-border: rgba(23, 23, 23, 0.08);
-  --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  --rj-screen-frame-border: #d4d4d8;
-  --rj-screen-frame-bg:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #f4f4f5 100%);
-  --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  --rj-screen-border: #a1a1aa;
-  --rj-screen-bg: #18181b;
-  --rj-player-bg:
-    radial-gradient(
-      circle at top,
-      rgba(255, 255, 255, 0.08),
-      transparent 40%),
-    linear-gradient(
-      180deg,
-      #27272a 0%,
-      #09090b 100%);
-  --rj-chip-border: #d4d4d8;
-  --rj-chip-shadow: none;
-  --rj-chip-primary-border: #171717;
-  --rj-chip-primary-text: #fafafa;
-  --rj-volume-track: #d4d4d8;
-  --rj-volume-thumb: #171717;
-  --rj-volume-thumb-shadow: none;
-  --rj-expanded-icon: #52525b;
-  --rj-expanded-icon-hover: #171717;
-  --rj-next-border: #e4e4e7;
-  --rj-next-bg:
-    linear-gradient(
-      180deg,
-      #fafafa 0%,
-      #f4f4f5 100%);
-  --rj-next-shadow: none;
-}
-.rj-root[data-theme=sunset] {
-  --rj-text: #4a1635;
-  --rj-text-muted: #8b5b6d;
-  --rj-border: rgba(255, 255, 255, 0.3);
-  --rj-panel: rgba(255, 244, 237, 0.86);
-  --rj-shadow: 0 22px 48px -24px rgba(159, 18, 57, 0.28);
-  --rj-gradient:
-    linear-gradient(
-      135deg,
-      #fff0d8 0%,
-      #ffc7a1 48%,
-      #ff9bb2 100%);
-  --rj-gradient-soft:
-    linear-gradient(
-      
-      180deg,
-      rgba(255, 248, 240, 0.96) 0%,
-      rgba(255, 225, 213, 0.96) 100% );
-  --rj-button-text: #7a284f;
-  --rj-dock-bg: rgba(255, 241, 232, 0.82);
-  --rj-dock-shadow: 0 -8px 22px -16px rgba(190, 24, 93, 0.22), 0 12px 30px -18px rgba(249, 115, 22, 0.24);
-  --rj-dock-inner-bg:
-    linear-gradient(
-      
-      135deg,
-      rgba(255, 249, 240, 0.96) 0%,
-      rgba(255, 228, 212, 0.96) 100% );
-  --rj-track-hover-bg: rgba(255, 255, 255, 0.45);
-  --rj-level-gradient:
-    linear-gradient(
-      
-      180deg,
-      #fff7ed 0%,
-      #fb7185 48%,
-      #7c3aed 100% );
-  --rj-level-shadow-color: rgba(251, 113, 133, 0.2);
-  --rj-icon-hover-bg: rgba(190, 24, 93, 0.08);
-  --rj-shell-border: rgba(244, 114, 182, 0.15);
-  --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
-  --rj-screen-frame-border: #f9a8d4;
-  --rj-screen-frame-bg:
-    linear-gradient(
-      180deg,
-      #fff1f2 0%,
-      #ffe4e6 100%);
-  --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
-  --rj-screen-border: #be185d;
-  --rj-screen-bg: #431407;
-  --rj-player-bg:
-    radial-gradient(
-      circle at top,
-      rgba(253, 224, 71, 0.18),
-      transparent 40%),
-    radial-gradient(
-      
-      circle at 70% 30%,
-      rgba(244, 114, 182, 0.18),
-      transparent 35% ),
-    linear-gradient(
-      180deg,
-      #7c2d12 0%,
-      #4c0519 100%);
-  --rj-chip-border: rgba(244, 114, 182, 0.28);
-  --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
-  --rj-chip-primary-border: rgba(190, 24, 93, 0.16);
-  --rj-chip-primary-text: #5b1032;
-  --rj-volume-track: #fda4af;
-  --rj-volume-thumb: #9f1239;
-  --rj-volume-thumb-shadow: 0 1px 6px rgba(159, 18, 57, 0.24);
-  --rj-expanded-icon: #9f1239;
-  --rj-expanded-icon-hover: #831843;
-  --rj-next-border: rgba(244, 114, 182, 0.2);
-  --rj-next-bg:
-    linear-gradient(
-      180deg,
-      #fff1f2 0%,
-      #ffe4e6 100%);
-  --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
-}
-.rj-root[data-theme=ride] {
-  --rj-text: #f8fafc;
-  --rj-text-muted: rgba(226, 232, 240, 0.7);
-  --rj-border: rgba(255, 255, 255, 0.1);
-  --rj-panel: rgba(3, 7, 18, 0.96);
-  --rj-shadow: 0 24px 54px -34px rgba(2, 6, 23, 0.72);
-  --rj-gradient:
-    linear-gradient(
-      180deg,
-      #f1f5f9 0%,
-      #d8e1ea 100%);
-  --rj-gradient-soft:
-    linear-gradient(
-      
-      180deg,
-      rgba(15, 23, 42, 0.96) 0%,
-      rgba(2, 6, 23, 0.98) 100% );
-  --rj-button-text: #f8fafc;
-  --rj-dock-bg: #050816;
-  --rj-dock-shadow: 0 24px 54px -34px rgba(2, 6, 23, 0.72);
-  --rj-dock-inner-bg:
-    linear-gradient(
-      
-      180deg,
-      rgba(255, 255, 255, 0.03) 0%,
-      rgba(255, 255, 255, 0) 100% );
-  --rj-track-hover-bg: rgba(255, 255, 255, 0.06);
-  --rj-level-gradient:
-    linear-gradient(
-      
-      180deg,
-      #f8fafc 0%,
-      #cbd5e1 45%,
-      #64748b 100% );
-  --rj-level-shadow-color: rgba(148, 163, 184, 0.14);
-  --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);
-  --rj-shell-border: rgba(255, 255, 255, 0.08);
-  --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  --rj-screen-frame-border: rgba(148, 163, 184, 0.24);
-  --rj-screen-frame-bg:
-    linear-gradient(
-      
-      180deg,
-      rgba(30, 41, 59, 0.92) 0%,
-      rgba(15, 23, 42, 0.98) 100% );
-  --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  --rj-screen-border: rgba(100, 116, 139, 0.4);
-  --rj-screen-bg: #050816;
-  --rj-player-bg:
-    radial-gradient(
-      circle at top,
-      rgba(255, 255, 255, 0.08),
-      transparent 40%),
-    linear-gradient(
-      180deg,
-      rgba(15, 23, 42, 0.96) 0%,
-      rgba(2, 6, 23, 1) 100%);
-  --rj-chip-border: rgba(191, 219, 254, 0.58);
-  --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  --rj-chip-primary-border: rgba(255, 255, 255, 0.38);
-  --rj-chip-primary-text: #f8fafc;
-  --rj-volume-track: rgba(148, 163, 184, 0.38);
-  --rj-volume-thumb: #ffffff;
-  --rj-volume-thumb-shadow: none;
-  --rj-expanded-icon: rgba(226, 232, 240, 0.82);
-  --rj-expanded-icon-hover: #ffffff;
-  --rj-next-border: rgba(255, 255, 255, 0.1);
-  --rj-next-bg:
-    linear-gradient(
-      
-      180deg,
-      rgba(15, 23, 42, 0.96) 0%,
-      rgba(2, 6, 23, 0.98) 100% );
-  --rj-next-shadow: none;
-}
-.rj-root[data-chrome=wallet] {
-  --rj-root-width: min(306px, calc(100vw - 16px));
-  --rj-root-expanded-width: min(306px, calc(100vw - 16px));
-  --rj-dock-radius: 26px;
-  --rj-dock-padding: 6px;
-  --rj-dock-inner-radius: 20px;
-  --rj-dock-inner-gap: 8px;
-  --rj-dock-inner-padding-right: 0;
-  --rj-track-summary-radius: 20px;
-  --rj-track-summary-padding: 12px;
-  --rj-expanded-radius: 26px;
-  --rj-expanded-padding: 8px;
-  --rj-shell-radius: 20px;
-  --rj-shell-padding: 14px;
-  --rj-screen-frame-radius: 18px;
-  --rj-screen-frame-padding: 8px;
-  --rj-screen-radius: 14px;
-  --rj-screen-padding: 8px;
-  --rj-player-radius: 12px;
-  --rj-chip-radius: 14px;
-  --rj-chip-padding: 8px 12px;
-  --rj-volume-width: 64px;
-  --rj-expanded-control-gap: 6px;
-  --rj-next-radius: 16px;
-  --rj-next-padding: 10px 12px;
-}
-.rj-root[data-chrome=ride] {
-  --rj-font-family:
-    "IBM Plex Sans",
-    "Segoe UI",
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
-  --rj-root-width: min(336px, calc(100vw - 16px));
-  --rj-root-expanded-width: min(336px, calc(100vw - 16px));
-  --rj-dock-radius: 18px;
-  --rj-dock-padding: 4px;
-  --rj-dock-backdrop: none;
-  --rj-dock-inner-radius: 14px;
-  --rj-dock-inner-gap: 4px;
-  --rj-dock-inner-padding-right: 4px;
-  --rj-track-summary-radius: 12px;
-  --rj-track-summary-padding: 12px;
-  --rj-expanded-radius: 18px;
-  --rj-expanded-padding: 6px;
-  --rj-expanded-backdrop: none;
-  --rj-shell-radius: 14px;
-  --rj-shell-padding: 12px;
-  --rj-screen-frame-radius: 12px;
-  --rj-screen-frame-padding: 6px;
-  --rj-screen-radius: 10px;
-  --rj-screen-padding: 6px;
-  --rj-player-radius: 8px;
-  --rj-chip-radius: 12px;
-  --rj-chip-padding: 10px 12px;
-  --rj-volume-width: 88px;
-  --rj-expanded-control-gap: 6px;
-  --rj-next-radius: 14px;
-  --rj-next-padding: 10px 12px;
-}
-.rj-root[data-theme=glass][data-chrome=wallet] {
-  --rj-text: #0f172a;
-  --rj-text-muted: #64748b;
-  --rj-border: rgba(191, 219, 254, 0.72);
-  --rj-panel: rgba(245, 249, 255, 0.96);
-  --rj-shadow: 0 22px 46px -28px rgba(37, 99, 235, 0.22);
-  --rj-gradient:
-    linear-gradient(
-      135deg,
-      #eff6ff 0%,
-      #dbeafe 100%);
-  --rj-gradient-soft:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #eef4ff 100%);
-  --rj-button-text: #1e3a8a;
-  --rj-dock-bg: rgba(231, 240, 255, 0.86);
-  --rj-dock-shadow: 0 16px 36px -28px rgba(59, 130, 246, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.92);
-  --rj-dock-inner-bg: transparent;
-  --rj-track-hover-bg: rgba(219, 234, 254, 0.58);
-  --rj-level-gradient:
-    linear-gradient(
-      
-      180deg,
-      #60a5fa 0%,
-      #2563eb 60%,
-      #1d4ed8 100% );
-  --rj-level-shadow-color: rgba(96, 165, 250, 0.2);
-  --rj-icon-hover-bg: rgba(59, 130, 246, 0.1);
-  --rj-shell-border: rgba(191, 219, 254, 0.88);
-  --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
-  --rj-screen-frame-border: #bfdbfe;
-  --rj-screen-frame-bg:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #eff6ff 100%);
-  --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
-  --rj-screen-border: #93c5fd;
-  --rj-screen-bg: #dbeafe;
-  --rj-player-bg:
-    radial-gradient(
-      circle at top,
-      rgba(255, 255, 255, 0.48),
-      transparent 48%),
-    linear-gradient(
-      180deg,
-      #bfdbfe 0%,
-      #60a5fa 100%);
-  --rj-chip-border: rgba(147, 197, 253, 0.9);
-  --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
-  --rj-chip-primary-border: rgba(59, 130, 246, 0.28);
-  --rj-chip-primary-text: #1e3a8a;
-  --rj-volume-track: #bfdbfe;
-  --rj-volume-thumb: #2563eb;
-  --rj-volume-thumb-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
-  --rj-expanded-icon: #2563eb;
-  --rj-expanded-icon-hover: #1d4ed8;
-  --rj-next-border: rgba(147, 197, 253, 0.72);
-  --rj-next-bg:
-    linear-gradient(
-      180deg,
-      #ffffff 0%,
-      #eff6ff 100%);
-  --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
-}
-.rj-root--inline {
-  z-index: 20;
-  width: min(100%, var(--rj-root-width));
-  max-width: 100%;
-}
-.rj-dock {
-  border: 1px solid var(--rj-border);
-  border-radius: var(--rj-dock-radius);
-  background: var(--rj-dock-bg);
-  padding: var(--rj-dock-padding);
-  box-shadow: var(--rj-dock-shadow);
-  backdrop-filter: var(--rj-dock-backdrop);
-}
-.rj-root--expanded .rj-dock {
-  width: var(--rj-root-expanded-width);
-  max-width: calc(100vw - 16px);
-}
-.rj-root--inline.rj-root--expanded .rj-dock {
-  width: min(100%, var(--rj-root-expanded-width));
-  max-width: 100%;
-}
-.rj-root[data-position$=right].rj-root--expanded .rj-dock {
-  margin-left: calc(var(--rj-root-width) - var(--rj-root-expanded-width));
-}
-.rj-dock__inner {
-  display: flex;
-  align-items: center;
-  gap: var(--rj-dock-inner-gap);
-  border-radius: var(--rj-dock-inner-radius);
-  background: var(--rj-dock-inner-bg);
-  padding-right: var(--rj-dock-inner-padding-right);
-}
-.rj-track-summary {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  align-items: center;
-  gap: 10px;
-  border: 0;
-  background: transparent;
-  border-radius: var(--rj-track-summary-radius);
-  padding: var(--rj-track-summary-padding);
-  text-align: left;
-  color: inherit;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-.rj-track-summary:hover {
-  background: var(--rj-track-hover-bg);
-}
-.rj-track-summary--empty {
-  cursor: default;
-}
-.rj-track-summary--empty:hover {
-  background: transparent;
-}
-.rj-level-meter {
-  display: flex;
-  width: 28px;
-  height: 28px;
-  flex-shrink: 0;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 4px;
-}
-.rj-level-bar {
-  width: 4px;
-  border-radius: 9999px;
-  background: var(--rj-level-gradient);
-  box-shadow: 0 0 0 1px var(--rj-level-shadow-color);
-  opacity: 0.55;
-  transform-origin: bottom center;
-}
-.rj-level-bar--playing {
-  opacity: 1;
-  animation: rj-jukebox-bounce 0.9s ease-in-out infinite;
-}
-.rj-track-summary__copy {
-  min-width: 0;
-  flex: 1;
-}
-.rj-track-summary__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-.rj-track-summary__artist {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11px;
-  color: var(--rj-text-muted);
-}
-.rj-chevron {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  color: var(--rj-text-muted);
-}
-.rj-chevron__icon {
-  display: block;
-  height: 100%;
-  width: 100%;
-  transform: rotate(0deg);
-  transition: transform 0.2s ease;
-}
-.rj-chevron__icon--expanded {
-  transform: rotate(180deg);
-}
-.rj-icon-button {
-  display: inline-flex;
-  height: 32px;
-  width: 32px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 9999px;
-  background: transparent;
-  color: var(--rj-text-muted);
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease,
-    opacity 0.2s ease;
-}
-.rj-icon-button:hover {
-  background: var(--rj-icon-hover-bg);
-  color: var(--rj-text);
-}
-.rj-icon-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-.rj-icon-button__icon {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
-}
-.rj-icon-button__icon svg {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-.rj-expanded {
-  position: absolute;
-  width: var(--rj-root-expanded-width);
-  max-width: calc(100vw - 16px);
-  right: 0;
-  bottom: calc(100% + 10px);
-  left: auto;
-  z-index: 2;
-  border: 1px solid var(--rj-border);
-  border-radius: var(--rj-expanded-radius);
-  background: var(--rj-panel);
-  padding: var(--rj-expanded-padding);
-  box-shadow: var(--rj-shadow);
-  backdrop-filter: var(--rj-expanded-backdrop);
-}
-.rj-root--inline .rj-expanded {
-  width: min(100%, var(--rj-root-expanded-width));
-  max-width: 100%;
-}
-.rj-root[data-position$=left] .rj-expanded {
-  right: auto;
-  left: 0;
-}
-.rj-expanded--hidden {
-  visibility: hidden;
-  pointer-events: none;
-  opacity: 0;
-}
-.rj-root[data-position^=top] .rj-expanded {
-  top: calc(100% + 10px);
-  bottom: auto;
-}
-.rj-expanded__shell {
-  border-radius: var(--rj-shell-radius);
-  border: 1px solid var(--rj-shell-border);
-  background: var(--rj-gradient-soft);
-  padding: var(--rj-shell-padding);
-  box-shadow: var(--rj-shell-inset-shadow);
-}
-.rj-expanded__screen-frame {
-  border-radius: var(--rj-screen-frame-radius);
-  border: 1px solid var(--rj-screen-frame-border);
-  background: var(--rj-screen-frame-bg);
-  padding: var(--rj-screen-frame-padding);
-  box-shadow: var(--rj-screen-frame-shadow);
-}
-.rj-expanded__screen {
-  border-radius: var(--rj-screen-radius);
-  border: 1px solid var(--rj-screen-border);
-  background: var(--rj-screen-bg);
-  padding: var(--rj-screen-padding);
-}
-.rj-expanded__player {
-  overflow: hidden;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: var(--rj-player-radius);
-  background: var(--rj-player-bg);
-}
-.rj-expanded__meta {
-  margin-top: 12px;
-}
-.rj-expanded__titles {
-  margin-bottom: 10px;
-}
-.rj-expanded__title {
-  font-size: 13px;
-  font-weight: 700;
-}
-.rj-expanded__artist {
-  margin-top: 2px;
-  font-size: 11px;
-  color: var(--rj-text-muted);
-}
-.rj-expanded__controls {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--rj-expanded-control-gap);
-}
-.rj-expanded__transport,
-.rj-expanded__utility {
-  display: flex;
-  align-items: center;
-  gap: var(--rj-expanded-control-gap);
-}
-.rj-expanded__utility {
-  margin-left: auto;
-}
-.rj-chip-button {
-  border: 1px solid var(--rj-chip-border);
-  border-radius: var(--rj-chip-radius);
-  background: var(--rj-gradient-soft);
-  padding: var(--rj-chip-padding);
-  color: var(--rj-button-text);
-  font-size: 10px;
-  font-weight: 600;
-  cursor: pointer;
-  box-shadow: var(--rj-chip-shadow);
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-.rj-chip-button:hover {
-  transform: translateY(-1px);
-}
-.rj-chip-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-  transform: none;
-}
-.rj-chip-button--primary {
-  border-color: var(--rj-chip-primary-border);
-  background: var(--rj-gradient);
-  color: var(--rj-chip-primary-text);
-  font-weight: 700;
-}
-.rj-volume {
-  width: var(--rj-volume-width);
-  height: 4px;
-  cursor: pointer;
-  appearance: none;
-  border-radius: 9999px;
-  background: var(--rj-volume-track);
-  outline: none;
-}
-.rj-volume::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 9999px;
-  background: var(--rj-volume-track);
-}
-.rj-volume::-webkit-slider-thumb {
-  width: 12px;
-  height: 12px;
-  margin-top: -4px;
-  appearance: none;
-  border: 0;
-  border-radius: 9999px;
-  background: var(--rj-volume-thumb);
-  box-shadow: var(--rj-volume-thumb-shadow);
-}
-.rj-volume::-moz-range-track {
-  height: 4px;
-  border-radius: 9999px;
-  background: var(--rj-volume-track);
-}
-.rj-volume::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  border: 0;
-  border-radius: 9999px;
-  background: var(--rj-volume-thumb);
-  box-shadow: var(--rj-volume-thumb-shadow);
-}
-.rj-expanded .rj-icon-button {
-  margin-left: 4px;
-  height: 24px;
-  width: 24px;
-  color: var(--rj-expanded-icon);
-}
-.rj-expanded .rj-icon-button:hover {
-  background: transparent;
-  color: var(--rj-expanded-icon-hover);
-}
-.rj-expanded .rj-icon-button__icon {
-  height: 12px;
-  width: 12px;
-}
-.rj-expanded__counter {
-  margin-left: auto;
-  font-size: 10px;
-  color: var(--rj-text-muted);
-  font-family:
-    "SF Mono",
-    SFMono-Regular,
-    ui-monospace,
-    Menlo,
-    Consolas,
-    monospace;
-}
-.rj-next-track {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 10px;
-  border-radius: var(--rj-next-radius);
-  border: 1px solid var(--rj-next-border);
-  background: var(--rj-next-bg);
-  padding: var(--rj-next-padding);
-  font-size: 10px;
-  color: var(--rj-text-muted);
-  box-shadow: var(--rj-next-shadow);
-}
-.rj-next-track__label {
-  font-weight: 700;
-}
-.rj-next-track__button {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border: 0;
-  background: transparent;
-  color: var(--rj-button-text);
-  cursor: pointer;
-}
-.rj-next-track__button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-.rj-root[data-chrome=wallet] .rj-dock {
-  border-color: var(--rj-border);
-}
-.rj-root[data-chrome=wallet] .rj-dock__inner {
-  align-items: center;
-}
-.rj-root[data-chrome=wallet] .rj-track-summary {
-  border: 1px solid var(--rj-border);
-  background: var(--rj-gradient-soft);
-  box-shadow: var(--rj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.92);
-}
-.rj-root[data-chrome=wallet] .rj-level-meter {
-  width: 32px;
-  height: 32px;
-  border-radius: 14px;
-  background: var(--rj-gradient);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
-}
-.rj-root[data-chrome=wallet] .rj-chevron {
-  width: 22px;
-  height: 22px;
-  border-radius: 9999px;
-  background: var(--rj-track-hover-bg);
-}
-.rj-root[data-chrome=wallet] .rj-track-summary__title {
-  font-size: 13px;
-  letter-spacing: -0.02em;
-}
-.rj-root[data-chrome=wallet] .rj-track-summary__artist {
-  margin-top: 3px;
-  font-size: 10px;
-}
-.rj-root[data-chrome=wallet] .rj-dock .rj-icon-button {
-  width: 34px;
-  height: 34px;
-  border: 1px solid var(--rj-border);
-  border-radius: 14px;
-  background: var(--rj-gradient-soft);
-  box-shadow: var(--rj-chip-shadow);
-}
-.rj-root[data-chrome=wallet] .rj-expanded__meta {
-  margin-top: 14px;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__titles {
-  margin-bottom: 12px;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__title {
-  font-size: 14px;
-  letter-spacing: -0.02em;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__controls {
-  align-items: stretch;
-  gap: 10px;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__transport,
-.rj-root[data-chrome=wallet] .rj-expanded__utility {
-  flex: 1 1 100%;
-  margin-left: 0;
-  border: 1px solid var(--rj-border);
-  border-radius: 18px;
-  background: var(--rj-gradient-soft);
-  padding: 8px;
-  box-shadow: var(--rj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96);
-}
-.rj-root[data-chrome=wallet] .rj-expanded__transport {
-  justify-content: space-between;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__utility {
-  gap: 8px;
-}
-.rj-root[data-chrome=wallet] .rj-chip-button {
-  font-size: 11px;
-  flex: 1 1 0;
-  min-height: 38px;
-}
-.rj-root[data-chrome=wallet] .rj-chip-button--primary {
-  padding-inline: 14px;
-}
-.rj-root[data-chrome=wallet] .rj-expanded .rj-icon-button {
-  margin-left: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 12px;
-  background: var(--rj-track-hover-bg);
-}
-.rj-root[data-chrome=wallet] .rj-volume {
-  flex: 1 1 auto;
-  width: auto;
-}
-.rj-root[data-chrome=wallet] .rj-expanded__counter {
-  margin-left: 0;
-  flex: 0 0 auto;
-  border: 1px solid var(--rj-chip-border);
-  border-radius: 9999px;
-  background: var(--rj-track-hover-bg);
-  padding: 7px 10px;
-  color: var(--rj-button-text);
-}
-.rj-root[data-chrome=wallet] .rj-next-track {
-  gap: 10px;
-}
-.rj-root[data-chrome=wallet] .rj-next-track__label {
-  border-radius: 10px;
-  background: var(--rj-track-hover-bg);
-  padding: 4px 8px;
-}
-.rj-root[data-chrome=ride] .rj-dock {
-  border-color: var(--rj-border);
-}
-.rj-root[data-chrome=ride] .rj-track-summary__title,
-.rj-root[data-chrome=ride] .rj-expanded__title,
-.rj-root[data-chrome=ride] .rj-next-track__label {
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.rj-root[data-chrome=ride] .rj-track-summary__title {
-  font-size: 11px;
-}
-.rj-root[data-chrome=ride] .rj-track-summary__artist {
-  font-size: 10px;
-}
-.rj-root[data-chrome=ride] .rj-dock .rj-icon-button {
-  border-radius: 12px;
-  background: var(--rj-track-hover-bg);
-}
-.rj-root[data-chrome=ride] .rj-expanded {
-  overflow: hidden;
-  border-color: var(--rj-border);
-  background:
-    radial-gradient(
-      circle at top left,
-      var(--rj-track-hover-bg),
-      transparent 32%),
-    var(--rj-next-bg);
-  box-shadow: var(--rj-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
-}
-.rj-root[data-chrome=ride] .rj-expanded__shell {
-  position: relative;
-  background:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.04),
-      rgba(255, 255, 255, 0)),
-    var(--rj-panel);
-}
-.rj-root[data-chrome=ride] .rj-expanded__shell::before {
-  content: "";
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  width: 58px;
-  height: 58px;
-  border-radius: 50%;
-  background:
-    radial-gradient(
-      circle,
-      rgba(255, 255, 255, 0.12),
-      transparent 62%);
-  opacity: 0.75;
-  pointer-events: none;
-}
-.rj-root[data-chrome=ride] .rj-expanded__screen-frame {
-  border-color: var(--rj-screen-frame-border);
-  background: var(--rj-screen-frame-bg);
-  box-shadow: var(--rj-screen-frame-shadow), 0 16px 24px -24px rgba(0, 0, 0, 0.28);
-}
-.rj-root[data-chrome=ride] .rj-expanded__screen {
-  border-color: var(--rj-screen-border);
-}
-.rj-root[data-chrome=ride] .rj-expanded__meta {
-  margin-top: 14px;
-}
-.rj-root[data-chrome=ride] .rj-expanded__titles {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-.rj-root[data-chrome=ride] .rj-expanded__artist {
-  max-width: 96px;
-  margin-top: 0;
-  text-align: right;
-}
-.rj-root[data-chrome=ride] .rj-expanded__controls {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px 12px;
-  align-items: stretch;
-}
-.rj-root[data-chrome=ride] .rj-expanded__transport,
-.rj-root[data-chrome=ride] .rj-expanded__utility {
-  margin-left: 0;
-  min-width: 0;
-}
-.rj-root[data-chrome=ride] .rj-expanded__transport {
-  display: grid;
-  grid-template-columns: 36px minmax(52px, auto) 36px;
-  gap: 6px;
-  align-items: center;
-  justify-content: start;
-  width: fit-content;
-  max-width: 100%;
-  border: 1px solid var(--rj-border);
-  border-radius: 14px;
-  background: var(--rj-panel);
-  padding: 6px;
-}
-.rj-root[data-chrome=ride] .rj-expanded__utility {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 10px 12px;
-  align-items: center;
-}
-.rj-root[data-chrome=ride] .rj-chip-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  min-height: 32px;
-  padding-inline: 0;
-  box-shadow: none;
-  text-align: center;
-}
-.rj-root[data-chrome=ride] .rj-chip-button--primary {
-  width: 100%;
-  min-width: 0;
-  padding-inline: 10px;
-  border-color: var(--rj-chip-primary-border);
-  border-radius: 13px;
-  background: var(--rj-gradient-soft);
-  color: var(--rj-chip-primary-text);
-  font-size: 9px;
-  line-height: 1;
-  letter-spacing: 0;
-  text-transform: none;
-}
-.rj-root[data-chrome=ride] .rj-expanded__transport .rj-chip-button:not(.rj-chip-button--primary) {
-  border-color: var(--rj-chip-border);
-  border-radius: 12px;
-  background: var(--rj-gradient-soft);
-  color: var(--rj-button-text);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 16px -14px rgba(15, 23, 42, 0.22);
-}
-.rj-root[data-chrome=ride] .rj-expanded__transport .rj-chip-button:not(.rj-chip-button--primary):hover {
-  transform: translateY(0);
-  filter: brightness(1.02);
-}
-.rj-root[data-chrome=ride] .rj-expanded .rj-icon-button {
-  margin-left: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: 12px;
-  background: var(--rj-track-hover-bg);
-}
-.rj-root[data-chrome=ride] .rj-volume {
-  grid-column: 1 / -1;
-  width: 100%;
-  min-width: 0;
-}
-.rj-root[data-chrome=ride] .rj-expanded__counter {
-  margin-left: 0;
-  justify-self: end;
-  border-top: 1px solid var(--rj-border);
-  padding: 8px 0 0;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-.rj-root[data-chrome=ride] .rj-next-track {
-  align-items: flex-start;
-  gap: 12px;
-  background: var(--rj-next-bg);
-}
-.rj-root[data-chrome=ride] .rj-next-track__button {
-  text-align: right;
-}
-@media (prefers-color-scheme: dark) {
-  .rj-root[data-theme=glass] {
-    --rj-text: #f8fafc;
-    --rj-text-muted: #b8c2cf;
-    --rj-border: rgba(255, 255, 255, 0.1);
-    --rj-panel: rgba(0, 0, 0, 0.48);
-    --rj-shadow: 0 22px 60px -30px rgba(15, 23, 42, 0.42);
-    --rj-gradient:
-      linear-gradient(
-        180deg,
-        #f1f5f9 0%,
-        #d8e1ea 100%);
-    --rj-gradient-soft:
-      linear-gradient(
-        180deg,
-        #2b3440 0%,
-        #1c232d 100%);
-    --rj-button-text: #e2e8f0;
-    --rj-dock-bg: rgba(0, 0, 0, 0.52);
-    --rj-dock-inner-bg:
-      linear-gradient(
-        
-        180deg,
-        rgba(37, 42, 49, 0.94) 0%,
-        rgba(22, 27, 34, 0.98) 100% );
-    --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);
-    --rj-shell-border: rgba(255, 255, 255, 0.06);
-    --rj-next-border: rgba(255, 255, 255, 0.08);
-    --rj-screen-frame-border: rgba(255, 255, 255, 0.08);
-    --rj-expanded-icon: #94a3b8;
-    --rj-expanded-icon-hover: #ffffff;
-    --rj-volume-track: #475569;
-    --rj-volume-thumb: #e2e8f0;
-  }
-  .rj-root[data-theme=simple] {
-    --rj-text: #fafafa;
-    --rj-text-muted: #a1a1aa;
-    --rj-border: rgba(255, 255, 255, 0.08);
-    --rj-panel: rgba(10, 10, 11, 0.94);
-    --rj-shadow: 0 24px 54px -30px rgba(0, 0, 0, 0.58);
-    --rj-gradient:
-      linear-gradient(
-        180deg,
-        #fafafa 0%,
-        #d4d4d8 100%);
-    --rj-gradient-soft:
-      linear-gradient(
-        180deg,
-        #27272a 0%,
-        #18181b 100%);
-    --rj-button-text: #f4f4f5;
-    --rj-dock-bg: rgba(10, 10, 11, 0.92);
-    --rj-dock-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.5);
-    --rj-dock-inner-bg: #111113;
-    --rj-track-hover-bg: rgba(255, 255, 255, 0.04);
-    --rj-level-gradient:
-      linear-gradient(
-        
-        180deg,
-        #fafafa 0%,
-        #a1a1aa 52%,
-        #3f3f46 100% );
-    --rj-level-shadow-color: rgba(255, 255, 255, 0.08);
-    --rj-icon-hover-bg: rgba(255, 255, 255, 0.07);
-    --rj-shell-border: rgba(255, 255, 255, 0.08);
-    --rj-shell-inset-shadow: none;
-    --rj-screen-frame-border: #3f3f46;
-    --rj-screen-frame-bg:
-      linear-gradient(
-        180deg,
-        #27272a 0%,
-        #18181b 100%);
-    --rj-screen-frame-shadow: none;
-    --rj-screen-border: #52525b;
-    --rj-screen-bg: #09090b;
-    --rj-player-bg:
-      radial-gradient(
-        
-        circle at top,
-        rgba(255, 255, 255, 0.06),
-        transparent 38% ),
-      linear-gradient(
-        180deg,
-        #18181b 0%,
-        #020617 100%);
-    --rj-chip-border: #3f3f46;
-    --rj-chip-primary-border: #fafafa;
-    --rj-chip-primary-text: #171717;
-    --rj-volume-track: #3f3f46;
-    --rj-volume-thumb: #fafafa;
-    --rj-expanded-icon: #d4d4d8;
-    --rj-expanded-icon-hover: #ffffff;
-    --rj-next-border: #3f3f46;
-    --rj-next-bg:
-      linear-gradient(
-        180deg,
-        #27272a 0%,
-        #18181b 100%);
-  }
-  .rj-root[data-theme=sunset] {
-    --rj-text: #fff1f2;
-    --rj-text-muted: #fecdd3;
-    --rj-border: rgba(255, 255, 255, 0.1);
-    --rj-panel: rgba(76, 5, 25, 0.78);
-    --rj-shadow: 0 24px 56px -28px rgba(76, 5, 25, 0.5);
-    --rj-gradient:
-      linear-gradient(
-        
-        135deg,
-        #fde68a 0%,
-        #fb7185 54%,
-        #7c3aed 100% );
-    --rj-gradient-soft:
-      linear-gradient(
-        
-        180deg,
-        rgba(136, 19, 55, 0.92) 0%,
-        rgba(76, 5, 25, 0.96) 100% );
-    --rj-button-text: #fff7ed;
-    --rj-dock-bg: rgba(76, 5, 25, 0.74);
-    --rj-dock-shadow: 0 -8px 24px -18px rgba(244, 114, 182, 0.24), 0 14px 34px -18px rgba(126, 34, 206, 0.3);
-    --rj-dock-inner-bg:
-      linear-gradient(
-        
-        135deg,
-        rgba(136, 19, 55, 0.92) 0%,
-        rgba(76, 5, 25, 0.96) 100% );
-    --rj-track-hover-bg: rgba(255, 255, 255, 0.06);
-    --rj-level-gradient:
-      linear-gradient(
-        
-        180deg,
-        #fde68a 0%,
-        #fb7185 52%,
-        #7c3aed 100% );
-    --rj-level-shadow-color: rgba(253, 224, 71, 0.16);
-    --rj-icon-hover-bg: rgba(255, 255, 255, 0.08);
-    --rj-shell-border: rgba(255, 255, 255, 0.08);
-    --rj-shell-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-    --rj-screen-frame-border: rgba(251, 113, 133, 0.4);
-    --rj-screen-frame-bg:
-      linear-gradient(
-        180deg,
-        #881337 0%,
-        #4c0519 100%);
-    --rj-screen-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-    --rj-screen-border: rgba(253, 186, 116, 0.48);
-    --rj-screen-bg: #19030d;
-    --rj-player-bg:
-      radial-gradient(
-        circle at top,
-        rgba(253, 224, 71, 0.2),
-        transparent 40%),
-      radial-gradient(
-        
-        circle at 70% 30%,
-        rgba(192, 132, 252, 0.18),
-        transparent 36% ),
-      linear-gradient(
-        180deg,
-        #4c0519 0%,
-        #1e1b4b 100%);
-    --rj-chip-border: rgba(253, 186, 116, 0.2);
-    --rj-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-    --rj-chip-primary-border: rgba(253, 224, 71, 0.18);
-    --rj-chip-primary-text: #4c0519;
-    --rj-volume-track: rgba(251, 113, 133, 0.48);
-    --rj-volume-thumb: #fde68a;
-    --rj-volume-thumb-shadow: 0 1px 8px rgba(253, 224, 71, 0.18);
-    --rj-expanded-icon: #fda4af;
-    --rj-expanded-icon-hover: #fff1f2;
-    --rj-next-border: rgba(251, 113, 133, 0.22);
-    --rj-next-bg:
-      linear-gradient(
-        
-        180deg,
-        rgba(136, 19, 55, 0.96) 0%,
-        rgba(76, 5, 25, 0.96) 100% );
-    --rj-next-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  }
-  .rj-root[data-chrome=ride] {
-    --rj-volume-thumb-shadow: none;
-  }
-}
-@media (max-width: 640px) {
-  .rj-root {
-    --rj-root-width: min(100vw - 16px, 320px);
-    --rj-root-expanded-width: min(100vw - 16px, 320px);
-  }
-  .rj-root--inline {
-    --rj-root-width: 100%;
-    --rj-root-expanded-width: 100%;
-  }
-  .rj-root--inline .rj-expanded {
-    padding: 6px;
-  }
-  .rj-root--inline .rj-expanded__shell {
-    padding: 10px;
-  }
-  .rj-root--inline .rj-next-track {
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
-  .rj-root--inline .rj-next-track__button {
-    width: 100%;
-    text-align: left;
-  }
-  .rj-root--inline[data-chrome=wallet] .rj-expanded__transport {
-    gap: 6px;
-    padding: 6px;
-  }
-  .rj-root--inline[data-chrome=wallet] .rj-expanded__utility {
-    display: grid;
-    grid-template-columns: 28px minmax(0, 1fr);
-    gap: 8px;
-  }
-  .rj-root--inline[data-chrome=wallet] .rj-expanded__counter {
-    width: 100%;
-    text-align: center;
-  }
-  .rj-root--inline[data-chrome=ride] .rj-expanded__titles {
-    flex-direction: column;
-    gap: 4px;
-  }
-  .rj-root--inline[data-chrome=ride] .rj-expanded__artist {
-    max-width: none;
-    text-align: left;
-  }
-  .rj-root--inline[data-chrome=ride] .rj-expanded__controls {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .rj-root--inline[data-chrome=ride] .rj-expanded__transport {
-    width: 100%;
-  }
-  .rj-root--inline[data-chrome=ride] .rj-expanded__counter {
-    justify-self: start;
-  }
-}
-@keyframes rj-jukebox-bounce {
-  0%, 100% {
-    transform: scaleY(0.35);
-  }
-  50% {
-    transform: scaleY(1);
-  }
-}
-/*# sourceMappingURL=index.css.map */