@react-youtube-jukebox/core 0.1.0

package/dist/index.css

@@ -0,0 +1,1345 @@
+/* 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 */