react-modern-audio-player 2.1.0 → 2.3.0

package/README.md

@@ -15,11 +15,11 @@
   <a href="https://www.npmjs.com/package/react-modern-audio-player">
     <img src="https://img.shields.io/npm/dt/react-modern-audio-player" alt="Download">
   </a>
-  <a href="https://bundlephobia.com/package/react-modern-audio-player@2.0.0">
+  <a href="https://bundlephobia.com/package/react-modern-audio-player">
     <img src="https://img.shields.io/bundlephobia/minzip/react-modern-audio-player" alt="BundleSize">
   </a>
   <a href="https://github.com/slash9494/react-modern-audio-player/actions/workflows/integration.yml">
-    <img src="https://github.com/slash9494/react-modern-audio-player/actions/workflows/integration.yml/badge.svg?branch=main" alt="CI">
+    <img src="https://img.shields.io/github/actions/workflow/status/slash9494/react-modern-audio-player/integration.yml?branch=main&label=CI" alt="CI">
   </a>
   <img src="https://img.shields.io/badge/TypeScript-first-3178C6?logo=typescript&logoColor=white" alt="TypeScript">
 </p>
@@ -29,6 +29,8 @@
 - **Waveform** progress bar powered by `wavesurfer.js`
 - **Playlist** with drag-and-drop reorder, repeat, shuffle
 - **Fully customizable** — swap any sub-component, CSS variable theming, light & dark themes
+- **Compound slots** — `AudioPlayer.Volume`, `AudioPlayer.Progress`, `AudioPlayer.PlayList`, etc. for partial customization without losing the preset
+- **Multi-instance playlist** — render multiple players on the same page with isolated playlist drawers and fully independent audio state
 - **Accessible** — WAI-ARIA patterns, full keyboard navigation, axe-tested
 - **TypeScript-first** — typed props and hooks (`useAudioPlayer`, sub-hooks)
 - **SSR-friendly** — works with Next.js App Router / Server Components
@@ -154,8 +156,9 @@ export default function PlayerPage() {
 | **Props**            | [PlayList](#playlist) · [InitialStates](#initialstates) · [ActiveUI](#activeui) · [Placement](#placement) · [RootContainerProps](#rootcontainerprops) |
 | **Override & Style** | [CustomIcons](#customicons) · [CoverImgsCss](#coverimgscss) · [Theme mode](#theme-mode-dark-mode) · [ID & Classnames](#id--classnames)                |
 | **Player Hook API**  | [useAudioPlayer](#useaudioplayer) · [AudioPlayerControls](#audioplayercontrols) · [Sub-Hooks](#sub-hooks)                                             |
-| **Custom Component** | [Custom Component](#custom-component)                                                                                                                 |
+| **Custom Component** | [Custom Component](#custom-component) · [Compound Slots](#compound-slots)                                                                             |
 | **Accessibility**    | [Keyboard support](#keyboard-support)                                                                                                                 |
+| **Gotchas**          | [Gotchas](#gotchas)                                                                                                                                   |
 | **Example**          | [Example](#example)                                                                                                                                   |
 
 # Props
@@ -173,6 +176,7 @@ interface AudioPlayerProps {
     playList?: PlayListPlacement;
     interface?: InterfacePlacement;
     volumeSlider?: VolumeSliderPlacement;
+    speedSelector?: SpeedSelectorPlacement;
   };
   rootContainerProps?: RootContainerProps;
   colorScheme?: "light" | "dark";
@@ -238,9 +242,12 @@ type InitialStates = Omit<
   currentTime?: number;
   duration?: number;
   curPlayId: number;
+  playListExpanded?: boolean;
 };
 ```
 
+> `playListExpanded: true` opens the playlist drawer on mount. Consistent with the other fields on `audioInitialState`, this is read once at mount and is not tracked in reducer state.
+
 ## ActiveUI
 
 ```tsx
@@ -256,6 +263,7 @@ type ActiveUI = {
   trackInfo: boolean;
   artwork: boolean;
   progress: ProgressUI;
+  playbackRate: boolean;
 };
 type ProgressUI = "waveform" | "bar" | false;
 type PlayListUI = "sortable" | "unSortable" | false;
@@ -300,7 +308,9 @@ type PlayerPlacement =
   | "top-left"
   | "top-right";
 
-type VolumeSliderPlacement = "bottom" | "top" | 'left' | 'right';
+type VolumeSliderPlacement = "bottom" | "top" | "left" | "right";
+
+type SpeedSelectorPlacement = "bottom" | "top" | "left" | "right";
 
 type PlayListPlacement = "bottom" | "top";
 
@@ -315,7 +325,7 @@ type InterfacePlacementKey =
   | "trackTimeCurrent"
   | "trackTimeDuration";
 
-type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row9-9"
+type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row10-10"
 /** if you apply custom components, values must be "row1-1" ~ any more */
 
 type InterfaceGridTemplateArea = Record<InterfacePlacementKey,InterfacePlacementValue>;
@@ -346,6 +356,7 @@ const defaultInterfacePlacement = {
     volume: "row1-7",
     playButton: "row1-8",
     playList: "row1-9",
+    playbackRate: "row1-10",
   },
 };
 ```
@@ -379,6 +390,12 @@ const defaultInterfacePlacement = {
 
 - rm-audio-player
 
+> **Multi-instance note**: when multiple `<AudioPlayer>` instances share a
+> page the root `id` is duplicated across them. Playlist and audio state are
+> still isolated per instance (each player has its own React provider tree
+> and its own `<audio>` DOM node). If you need per-instance selectors, target
+> via the class names below rather than the id.
+
 ### root ClassName
 
 - rmap-player-provider
@@ -459,26 +476,28 @@ function App() {
 
 ## AudioPlayerControls
 
-| Property          | Type                       | Description               |
-| ----------------- | -------------------------- | ------------------------- |
-| `isPlaying`       | `boolean`                  | Current playback state    |
-| `volume`          | `number`                   | Current volume (0–1)      |
-| `currentTime`     | `number`                   | Elapsed time in seconds   |
-| `duration`        | `number`                   | Track duration in seconds |
-| `repeatType`      | `RepeatType`               | Current repeat mode       |
-| `muted`           | `boolean`                  | Whether audio is muted    |
-| `currentTrack`    | `AudioData \| null`        | Currently playing track   |
-| `currentIndex`    | `number`                   | Index in playlist         |
-| `playList`        | `PlayList`                 | Full playlist             |
-| `play()`          | `() => void`               | Start playback            |
-| `pause()`         | `() => void`               | Pause playback            |
-| `togglePlay()`    | `() => void`               | Toggle play/pause         |
-| `next()`          | `() => void`               | Skip to next track        |
-| `prev()`          | `() => void`               | Skip to previous track    |
-| `seek(time)`      | `(time: number) => void`   | Seek to time in seconds   |
-| `setVolume(vol)`  | `(volume: number) => void` | Set volume (0–1, clamped) |
-| `toggleMute()`    | `() => void`               | Toggle mute on/off        |
-| `setTrack(index)` | `(index: number) => void`  | Jump to playlist index    |
+| Property                | Type                       | Description                                                    |
+| ----------------------- | -------------------------- | -------------------------------------------------------------- |
+| `isPlaying`             | `boolean`                  | Current playback state                                         |
+| `volume`                | `number`                   | Current volume (0–1)                                           |
+| `currentTime`           | `number`                   | Elapsed time in seconds                                        |
+| `duration`              | `number`                   | Track duration in seconds                                      |
+| `repeatType`            | `RepeatType`               | Current repeat mode                                            |
+| `muted`                 | `boolean`                  | Whether audio is muted                                         |
+| `currentTrack`          | `AudioData \| null`        | Currently playing track                                        |
+| `currentIndex`          | `number`                   | Index in playlist                                              |
+| `playList`              | `PlayList`                 | Full playlist                                                  |
+| `play()`                | `() => void`               | Start playback                                                 |
+| `pause()`               | `() => void`               | Pause playback                                                 |
+| `togglePlay()`          | `() => void`               | Toggle play/pause                                              |
+| `next()`                | `() => void`               | Skip to next track                                             |
+| `prev()`                | `() => void`               | Skip to previous track                                         |
+| `seek(time)`            | `(time: number) => void`   | Seek to time in seconds                                        |
+| `setVolume(vol)`        | `(volume: number) => void` | Set volume (0–1, clamped)                                      |
+| `toggleMute()`          | `() => void`               | Toggle mute on/off                                             |
+| `setTrack(index)`       | `(index: number) => void`  | Jump to playlist index                                         |
+| `playbackRate`          | `number`                   | Current playback rate (`1` = normal). Default `1`.             |
+| `setPlaybackRate(rate)` | `(rate: number) => void`   | Set playback rate. No clamping; browser enforces HTML5 bounds. |
 
 ## Sub-Hooks
 
@@ -510,13 +529,13 @@ function TimeDisplay() {
 }
 ```
 
-| Hook                     | Returns                                                                         |
-| ------------------------ | ------------------------------------------------------------------------------- |
-| `useAudioPlayerPlayback` | `{ isPlaying, repeatType, play, pause, togglePlay }`                            |
-| `useAudioPlayerTrack`    | `{ currentPlayId, currentIndex, playList, currentTrack, setTrack, next, prev }` |
-| `useAudioPlayerVolume`   | `{ volume, muted, setVolume, toggleMute }`                                      |
-| `useAudioPlayerTime`     | `{ currentTime, duration, seek }`                                               |
-| `useAudioPlayerElement`  | `{ audioEl, waveformInst }` (advanced)                                          |
+| Hook                     | Returns                                                                             |
+| ------------------------ | ----------------------------------------------------------------------------------- |
+| `useAudioPlayerPlayback` | `{ isPlaying, repeatType, playbackRate, play, pause, togglePlay, setPlaybackRate }` |
+| `useAudioPlayerTrack`    | `{ currentPlayId, currentIndex, playList, currentTrack, setTrack, next, prev }`     |
+| `useAudioPlayerVolume`   | `{ volume, muted, setVolume, toggleMute }`                                          |
+| `useAudioPlayerTime`     | `{ currentTime, duration, seek }`                                                   |
+| `useAudioPlayerElement`  | `{ audioEl, waveformInst }` (advanced)                                              |
 
 # Context Hooks
 
@@ -551,21 +570,34 @@ You can place a custom component anywhere in the player interface using `AudioPl
 import AudioPlayer, {
   useAudioPlayer,
   InterfacePlacement,
+  DEFAULT_INTERFACE_GRID_BOUND,
 } from "react-modern-audio-player";
 
 const activeUI: ActiveUI = {
   all: true,
 };
 
+// `as 12` pins the literal type — TS arithmetic widens
+// `DEFAULT_INTERFACE_GRID_BOUND + 1` to `number`, which would erase grid-coord
+const TOTAL_INTERFACE_GRID_BOUND = (DEFAULT_INTERFACE_GRID_BOUND + 1) as 12;
+
+// `row1-${DEFAULT_INTERFACE_GRID_BOUND}` resolves to `"row1-11"` —
+// the first cell beyond the default template area (which fills 1..10).
+const customComponentGridArea = `row1-${DEFAULT_INTERFACE_GRID_BOUND}`;
+
 const placement = {
   interface: {
     customComponentsArea: {
-      playerCustomComponent: "row1-10",
+      playerCustomComponent: customComponentGridArea,
     },
-  } as InterfacePlacement<11>,
+  } as InterfacePlacement<typeof TOTAL_INTERFACE_GRID_BOUND>,
   /**
-   * set the generic value of InterfacePlacement to the max interface length + 1
-   * for correct "row1-10" autocompletion
+   * The generic on `InterfacePlacement<N>` is an exclusive upper bound on grid
+   * indices — usable cells are `1..(N - 1)`. Default is
+   * `DEFAULT_INTERFACE_GRID_BOUND` (= 11), giving cells `1..10` which the
+   * built-in template area already occupies (e.g. `playbackRate` at `row1-10`).
+   * To reserve an additional cell for the custom component, pass `<N + 1>` —
+   * here `<12>` makes `row1-11` a valid coordinate.
    */
 };
 
@@ -590,6 +622,114 @@ const CustomComponent = () => {
 </AudioPlayer>;
 ```
 
+# Compound Slots
+
+`AudioPlayer` exposes its built-in controls as static members so you can re-place or augment individual pieces without rebuilding the whole layout.
+
+| Member                                                                   | Renders                                                                                                                              |
+| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `AudioPlayer.Progress`                                                   | progress bar / waveform                                                                                                              |
+| `AudioPlayer.Volume`                                                     | volume trigger + slider (accepts `triggerType?: "click" \| "hover"`, `placement?: VolumeSliderPlacement`)                            |
+| `AudioPlayer.PlayList`                                                   | sortable playlist drawer (accepts `initialExpanded?`)                                                                                |
+| `AudioPlayer.PlayListEmpty`                                              | fallback rendered inside the playlist drawer when `playList` is empty                                                                |
+| [`AudioPlayer.PlayButton`](#audioplayerplaybutton-and-activeuiprevnnext) | Play + Prev + Next group (Prev/Next visibility follows `activeUI.prevNnext`)                                                         |
+| `AudioPlayer.RepeatButton`                                               | repeat-type button                                                                                                                   |
+| `AudioPlayer.SpeedSelector`                                              | playback rate dropdown (accepts `options?`, `formatRate?`, `triggerType?: "click" \| "hover"`, `placement?: SpeedSelectorPlacement`) |
+| `AudioPlayer.Artwork`                                                    | track artwork                                                                                                                        |
+| `AudioPlayer.TrackInfo`                                                  | track title / writer                                                                                                                 |
+| `AudioPlayer.TrackTime`                                                  | current + duration time                                                                                                              |
+| `AudioPlayer.CustomComponent`                                            | user-defined slot                                                                                                                    |
+
+Each slot accepts the full `GridItemLayoutProps` set — `gridArea?`, `visible?`, `width?`, `padding?`, `justifySelf?`, `UNSAFE_className?` — plus its own domain props. `AudioPlayer.TrackTime` is the exception: it only exposes `visible?` because the slot maps to two grid areas internally.
+
+Native HTML attributes (`className`, `style`, `onClick`, `data-*`, etc.) are **not** forwarded by compound slots. Compose the underlying primitives (`PlayBtn`, `PrevBtn`, `NextBtn`, etc., still exported) when full DOM control is needed; headless support with native attribute pass-through is planned for v3.
+
+## Mental model — `activeUI` vs compound children
+
+- **`activeUI`** governs the **preset** (default layout) — which built-in controls are shown.
+- **Compound children** are **explicit placements** that always render (`visible` defaults to `true`).
+
+The two layers are orthogonal. Compound children render **additively** alongside the preset. To truly replace a preset control, disable it in `activeUI` and render the compound counterpart:
+
+```tsx
+// Remove the default volume, re-place it with a custom gridArea
+<AudioPlayer playList={playList} activeUI={{ all: true, volume: false }}>
+  <AudioPlayer.Volume gridArea="row1-5" />
+</AudioPlayer>
+```
+
+In development, a `console.warn` is emitted when a compound slot is rendered while its preset counterpart is still active, so silent duplication is easy to catch.
+
+## `AudioPlayer.PlayButton` and `activeUI.prevNnext`
+
+`AudioPlayer.PlayButton` is a single slot that renders the **Play + Prev + Next** group as one unit. There is no separate `AudioPlayer.PrevButton` / `AudioPlayer.NextButton` compound slot — Prev / Next are part of the `PlayButton` compound, and there are two ways to render them.
+
+### Method 1 — `AudioPlayer.PlayButton` compound (group)
+
+Place the whole group at a custom grid area; Prev / Next visibility inside the group follows `activeUI.prevNnext` (which defaults to `activeUI.all`):
+
+```tsx
+// Re-place the full Play + Prev + Next group at a custom area
+<AudioPlayer
+  playList={playList}
+  activeUI={{ all: true, playButton: false }} // hide the preset transport
+>
+  <AudioPlayer.PlayButton gridArea="row1-3" />
+</AudioPlayer>
+
+// Same compound, but render Play only — Prev / Next hidden by activeUI.prevNnext
+<AudioPlayer
+  playList={playList}
+  activeUI={{ all: true, playButton: false, prevNnext: false }}
+>
+  <AudioPlayer.PlayButton gridArea="row1-3" />
+</AudioPlayer>
+```
+
+### Method 2 — primitives via `AudioPlayer.CustomComponent`
+
+When you need finer control — placing Prev / Play / Next in different grid cells, applying custom wrappers, or attaching native HTML attributes — drop down to the `PlayBtn`, `PrevBtn`, and `NextBtn` primitives (still exported) and render them inside `AudioPlayer.CustomComponent`:
+
+```tsx
+import AudioPlayer, {
+  PrevBtn,
+  PlayBtn,
+  NextBtn,
+} from "react-modern-audio-player";
+
+<AudioPlayer
+  playList={playList}
+  activeUI={{ all: true, playButton: false }} // hide the preset transport
+  placement={{
+    interface: { customComponentsArea: { "custom-transport": "row1-3" } },
+  }}
+>
+  <AudioPlayer.CustomComponent id="custom-transport">
+    <div className="my-transport">
+      <PrevBtn isVisible />
+      <PlayBtn />
+      <NextBtn isVisible />
+    </div>
+  </AudioPlayer.CustomComponent>
+</AudioPlayer>;
+```
+
+`PrevBtn` / `NextBtn` accept an `isVisible` boolean for symmetry with the compound group's visibility logic; pass `false` to omit them. Use Method 2 when Method 1's group placement and `activeUI.prevNnext` toggle aren't enough.
+
+## Custom empty-playlist UI
+
+Pass children to `AudioPlayer.PlayListEmpty` to render a custom node inside the playlist drawer when `playList` is empty. Omit the slot to keep the default (drawer content renders nothing).
+
+```tsx
+<AudioPlayer playList={[]}>
+  <AudioPlayer.PlayListEmpty>
+    <div className="my-empty">Playlist is empty</div>
+  </AudioPlayer.PlayListEmpty>
+</AudioPlayer>
+```
+
+`PlayListEmpty` is a marker slot; its children are consumed by the drawer via context and the component itself does not render in-place.
+
 # **Accessibility**
 
 The player follows WAI-ARIA patterns and is fully navigable by keyboard and screen readers.
@@ -598,16 +738,29 @@ The player follows WAI-ARIA patterns and is fully navigable by keyboard and scre
 
 All controls are reachable via `Tab` and respond to standard keyboard activation. The playlist uses the WAI-ARIA "Listbox with Rearrangeable Options" pattern:
 
-| Key | Action |
-| --- | --- |
-| `Tab` / `Shift+Tab` | Move focus between player controls |
-| `Space` / `Enter` | Activate the focused button (play/pause, prev/next, repeat, mute, playlist) |
-| `ArrowUp` / `ArrowDown` | Move focus between playlist items |
-| `Alt+ArrowUp` / `Alt+ArrowDown` | Reorder the focused playlist item |
-| `Enter` / `Space` on a playlist item | Select and play that track |
+| Key                                  | Action                                                                      |
+| ------------------------------------ | --------------------------------------------------------------------------- |
+| `Tab` / `Shift+Tab`                  | Move focus between player controls                                          |
+| `Space` / `Enter`                    | Activate the focused button (play/pause, prev/next, repeat, mute, playlist) |
+| `ArrowUp` / `ArrowDown`              | Move focus between playlist items                                           |
+| `Alt+ArrowUp` / `Alt+ArrowDown`      | Reorder the focused playlist item                                           |
+| `Enter` / `Space` on a playlist item | Select and play that track                                                  |
 
 Drag-and-drop reordering is preserved as an alternative — keyboard and mouse both call the same `onReorder` handler.
 
+# **Gotchas**
+
+Common integration mistakes to avoid:
+
+- **Don't toggle the theme via `rootContainerProps.style.colorScheme`.** The native CSS `color-scheme` property does not switch the player's theme. Use the top-level [`colorScheme`](#theme-mode-dark-mode) prop, which drives the `[data-theme]` attribute and re-initializes the waveform colors.
+- **Set the `InterfacePlacement` generic when placing `customComponentsArea` beyond row 9.** TypeScript rejects values past the default range, so use `InterfacePlacement<N>` where `N` is `(max row length + 1)` — e.g. `InterfacePlacement<11>` for `"row1-10"` (see [Custom Component](#custom-component)).
+- **`AudioPlayer.CustomComponent` accepts a single React element child.** It uses `React.cloneElement` internally, so passing multiple children or a primitive (string, number) will throw.
+- **Volume is `0..1`, not `0..100`.** `setVolume` clamps out-of-range values, so `setVolume(50)` silently becomes `setVolume(1)`.
+- **Compound slots don't forward native HTML attributes.** `<AudioPlayer.Volume className="...">` is rejected by TypeScript — only `GridItemLayoutProps` (layout) pass through. Compose the underlying primitives (`PlayBtn`, `PrevBtn`, `NextBtn`, etc., still exported) when you need `className`, `style`, `onClick`, or `data-*`. Full headless support is planned for v3.
+- **`id: 0` is a valid track id.** The reducer uses nullish checks, so tracks with `id: 0` are handled correctly — don't filter them out of `playList` on the assumption that zero is falsy.
+- **Don't import the CSS manually.** Styles are auto-injected via `sideEffects: ["*.css"]`; `import "react-modern-audio-player/dist/index.css"` will 404 or double-load.
+- **Multiple mounted `<AudioPlayer>` instances don't share React state, but they do share the user's speakers.** Each instance has its own provider and its own `<audio>` element, so the state is isolated — but if two instances both play, the user hears both tracks simultaneously. Coordinate playback yourself (e.g. pause the others when one `play()` fires).
+
 # **Example**
 
 ```tsx

package/dist/index.css

@@ -1 +1 @@
-.rmap-player-provider{--rm-audio-player-text-color: #2c2c2c;--rm-audio-player-shadow: 0 0 0;--rm-audio-player-interface-container: #f5f5f5;--rm-audio-player-volume-background: #ccc;--rm-audio-player-volume-panel-background: #f2f2f2;--rm-audio-player-volume-panel-border: #ccc;--rm-audio-player-volume-thumb: #5c5c5c;--rm-audio-player-volume-fill: rgba(0, 0, 0, .5);--rm-audio-player-volume-track: #ababab;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #8c8c8c;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #393939;--rm-audio-player-waveform-cursor: #4b4b4b;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #eaeaea;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #b3b3b3;color:var(--rm-audio-player-text-color)}@media (prefers-color-scheme: dark){.rmap-player-provider:not([data-theme=light]){--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}}.rmap-player-provider[data-theme=dark]{--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}.rmap-player-provider *{box-sizing:border-box;font:inherit;font-size:100%}.rmap-player-provider ol,.rmap-player-provider ul{list-style:none;margin:0;padding:0}.rmap-player-provider blockquote,.rmap-player-provider q{quotes:none}.rmap-player-provider blockquote:before,.rmap-player-provider blockquote:after,.rmap-player-provider q:before,.rmap-player-provider q:after{content:none}.rmap-player-provider table{border-collapse:collapse;border-spacing:0}.rmap-player-provider button{margin:0;padding:0;background:transparent;color:inherit;cursor:pointer;vertical-align:baseline;border:0}.rmap-ctrl-btn-wrapper{display:flex;align-items:center;gap:10px}.styled-btn.rmap-play-btn{width:35px}.styled-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;width:20px;height:100%;transition:transform .2s ease-out,opacity .2s ease-out}.styled-btn svg{width:100%;height:100%;pointer-events:none}.styled-btn:hover{transform:scale(1.1)}.styled-btn:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.styled-btn:active{transform:scale(.8);opacity:.5}.rmap-drawer-container{position:relative;min-width:20px;min-height:20px}.rmap-drawer-container .rmap-drawer-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-drawer-container .rmap-drawer-trigger[aria-expanded=true] svg{color:var(--rm-audio-player-sortable-list-button-active)}.rmap-drawer-container .rmap-drawer-content{transform-origin:center top}.rmap-drawer-container .rmap-drawer-content-enter{animation:rmap-appearance-in .25s ease-out forwards}.rmap-drawer-container .rmap-drawer-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-sortable-list-container,.rmap-sortable-list-container li{list-style-type:none}.rmap-sortable-list-container{cursor:pointer}.rmap-sortable-item{border-top:2px solid transparent;border-bottom:2px solid transparent;transition:opacity .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out,backdrop-filter .3s ease-in-out}.rmap-sortable-item *{pointer-events:none}.rmap-sortable-item.rmap-drag-start{opacity:.5}.rmap-sortable-item.rmap-drag-over{transform:scale(1.02);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 3.58195px 22.3872px -2.68646px rgb(var( --rm-audio-player-shadow, 0 0 0 ) / 20%)}.rmap-sortable-item-inner{display:flex;align-items:center}.rmap-playlist-item{width:100%;height:100%;display:flex;align-items:center;padding:10px 20px}.rmap-playlist-item.rmap-cur-played{background:var(--rm-audio-player-selected-list-item-background)}.rmap-playlist-item .rmap-playlist-item-contents{width:100%;display:flex;gap:10px}.rmap-playlist-item .rmap-playlist-album-cover{display:flex;align-items:center}.rmap-playlist-item .rmap-playlist-album-cover img{width:35px;height:35px}.rmap-playlist-item .rmap-playlist-album-info{display:grid;min-width:10px;font-size:13px;margin-right:1.5rem;padding:2px 0%}.rmap-playlist-item .rmap-playlist-album-info span{align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-playlist-container{transition-property:max-height,opacity;overflow-x:hidden;overflow-y:auto}.rmap-playlist-container.rmap-playlist-content-enter{opacity:0;max-height:0}.rmap-playlist-container.rmap-playlist-content-enter-active{opacity:1;max-height:20vh;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,0,1.2)}.rmap-playlist-container.rmap-playlist-content-leave{opacity:1;max-height:20vh}.rmap-playlist-container.rmap-playlist-content-leave-active{opacity:0;max-height:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.66,-.41,1,1)}.rmap-bar-progress-wrapper{display:flex;width:100%;height:18px;padding:8px 0;cursor:pointer;position:relative;align-items:center}.rmap-bar-progress-wrapper .rmap-progress-bar{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--rm-audio-player-progress-bar-background)}.rmap-bar-progress-wrapper .rmap-progress-fill{position:absolute;left:0;width:100%;height:100%;background-color:var(--rm-audio-player-progress-bar);transform-origin:0 0;transform:scaleX(0)}.rmap-bar-progress-wrapper .rmap-progress-handle{position:absolute;left:-4px;background-color:var(--rm-audio-player-progress-bar);border-radius:50%;height:8px;width:8px;opacity:0;transition:opacity .2s ease-in-out}.rmap-bar-progress-wrapper:hover .rmap-progress-handle,.rmap-bar-progress-wrapper:focus-visible .rmap-progress-handle{opacity:1}.rmap-bar-progress-wrapper:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.rmap-waveform-wrapper{display:flex;width:100%}.rmap-waveform-wrapper[data-active=false]{height:0;opacity:0;pointer-events:none}.rmap-waveform-wrapper #rm-waveform{width:100%;overflow:hidden}.rmap-waveform-wrapper #rm-waveform wave{cursor:pointer!important;overflow-x:hidden!important}.rmap-progress-container{min-width:100px}.rmap-volume-container{position:relative;height:119px;width:32px;display:flex;align-items:center;justify-content:center}.rmap-volume-container[data-placement=top]{bottom:auto}.rmap-volume-container[data-placement=left]{transform:rotate(-90deg);right:50px}.rmap-volume-container[data-placement=right]{transform:rotate(90deg);left:50px}.rmap-volume-container[data-placement=bottom]{transform:rotateX(180deg);top:5px}.rmap-volume-container .rmap-volume-panel{width:30px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;height:118px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;bottom:5px}.rmap-volume-container .rmap-volume-panel:before{content:"";bottom:-10px;left:7.9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-border) var(--rm-audio-player-volume-panel-border);border-style:solid;border-width:5px;box-shadow:-3px 3px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;z-index:0}.rmap-volume-container .rmap-volume-panel:after{content:"";bottom:-8px;left:9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-background) var(--rm-audio-player-volume-panel-background);border-style:solid;border-width:4px;z-index:1;position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none}.rmap-volume-container input[type=range]{margin-left:14px;position:absolute;display:block;top:-45px;left:0;height:2px;width:92px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--rm-audio-player-volume-background);transform-origin:75px 75px;transform:rotate(-90deg)}.rmap-volume-container input:focus:not(:focus-visible){outline-color:transparent}.rmap-volume-container input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb)}.rmap-volume-container input::-moz-range-thumb{width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb);border:none}.rmap-volume-container input::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-volume-container input::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}@keyframes rmap-appearance-in{0%{opacity:0;transform:scale(.95)}60%{opacity:.75;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes rmap-appearance-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.rmap-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.rmap-dropdown-container .rmap-dropdown-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-dropdown-container .rmap-dropdown-content{transform-origin:center top}.rmap-dropdown-container .rmap-dropdown-content-enter{animation:rmap-appearance-in .25s ease-out normal forwards}.rmap-dropdown-container .rmap-dropdown-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-artwork-container{display:flex;align-items:center;width:100%;height:100%}.rmap-artwork-container img,.rmap-artwork-container .rmap-artwork-fallback{width:50px;height:50px}.rmap-artwork-container .rmap-artwork-fallback{display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:13px}.rmap-track-info-container{display:grid;align-items:center;row-gap:5px}.rmap-track-info-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-track-info-container .title{font-size:16px}.rmap-track-info-container .writer{font-size:12px}.rmap-track-time-container{display:flex;align-items:center;justify-content:center;min-height:16px;font-family:monospace!important;font-size:16px!important}.rmap-track-time-container[data-position=left] .rmap-track-current-time,.rmap-track-time-container[data-position=left] .rmap-track-duration{margin-right:-10px}.rmap-track-time-container[data-position=right] .rmap-track-current-time:before,.rmap-track-time-container[data-position=right] .rmap-track-duration:before{content:"/";margin:0 .3rem}.rmap-track-time-current .rmap-track-current-time{font-weight:700;letter-spacing:-.1rem;color:var(--rm-audio-player-track-current-time)}.rmap-track-time-duration .rmap-track-duration{display:flex;color:var(--rm-audio-player-track-duration);letter-spacing:-.1rem}.rmap-interface-container .rmap-interface-grid{background:var(--rm-audio-player-interface-container);padding:.5rem 10px}.rmap-interface-container .rmap-sortable-playlist{background:var(--rm-audio-player-sortable-list);box-shadow:-5px 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 4%) inset}
+.rmap-player-provider{--rm-audio-player-text-color: #2c2c2c;--rm-audio-player-shadow: 0 0 0;--rm-audio-player-interface-container: #f5f5f5;--rm-audio-player-volume-background: #ccc;--rm-audio-player-volume-panel-background: #f2f2f2;--rm-audio-player-volume-panel-border: #ccc;--rm-audio-player-volume-thumb: #5c5c5c;--rm-audio-player-volume-fill: rgba(0, 0, 0, .5);--rm-audio-player-volume-track: #ababab;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #8c8c8c;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #393939;--rm-audio-player-waveform-cursor: #4b4b4b;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #eaeaea;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #b3b3b3;color:var(--rm-audio-player-text-color)}@media (prefers-color-scheme: dark){.rmap-player-provider:not([data-theme=light]){--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}}.rmap-player-provider[data-theme=dark]{--rm-audio-player-text-color: #ededed;--rm-audio-player-shadow: 255 255 255;--rm-audio-player-interface-container: #1e1e1e;--rm-audio-player-volume-background: #5c5c5c;--rm-audio-player-volume-panel-background: #2c2c2c;--rm-audio-player-volume-panel-border: #393939;--rm-audio-player-volume-thumb: #d3d3d3;--rm-audio-player-volume-fill: rgba(255, 255, 255, .5);--rm-audio-player-volume-track: #494949;--rm-audio-player-track-current-time: #0072f5;--rm-audio-player-track-duration: #a2a2a2;--rm-audio-player-progress-bar: #0072f5;--rm-audio-player-progress-bar-background: #d1d1d1;--rm-audio-player-waveform-cursor: #c8c8c8;--rm-audio-player-waveform-background: var( --rm-audio-player-progress-bar-background );--rm-audio-player-waveform-bar: var(--rm-audio-player-progress-bar);--rm-audio-player-sortable-list: #2c2c2c;--rm-audio-player-sortable-list-button-active: #0072f5;--rm-audio-player-selected-list-item-background: #5c5c5c}.rmap-player-provider *{box-sizing:border-box;font:inherit;font-size:100%}.rmap-player-provider ol,.rmap-player-provider ul{list-style:none;margin:0;padding:0}.rmap-player-provider blockquote,.rmap-player-provider q{quotes:none}.rmap-player-provider blockquote:before,.rmap-player-provider blockquote:after,.rmap-player-provider q:before,.rmap-player-provider q:after{content:none}.rmap-player-provider table{border-collapse:collapse;border-spacing:0}.rmap-player-provider button{margin:0;padding:0;background:transparent;color:inherit;cursor:pointer;vertical-align:baseline;border:0}.rmap-ctrl-btn-wrapper{display:flex;align-items:center;gap:10px}.styled-btn.rmap-play-btn{width:35px}.styled-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;width:20px;height:100%;transition:transform .2s ease-out,opacity .2s ease-out}.styled-btn svg{width:100%;height:100%;pointer-events:none}.styled-btn:hover{transform:scale(1.1)}.styled-btn:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.styled-btn:active{transform:scale(.8);opacity:.5}.rmap-drawer-container{position:relative;min-width:20px;min-height:20px}.rmap-drawer-container .rmap-drawer-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-drawer-container .rmap-drawer-trigger[aria-expanded=true] svg{color:var(--rm-audio-player-sortable-list-button-active)}.rmap-drawer-container .rmap-drawer-content{transform-origin:center top}.rmap-drawer-container .rmap-drawer-content-enter{animation:rmap-appearance-in .25s ease-out forwards}.rmap-drawer-container .rmap-drawer-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-sortable-list-container,.rmap-sortable-list-container li{list-style-type:none}.rmap-sortable-list-container{cursor:pointer}.rmap-sortable-item{border-top:2px solid transparent;border-bottom:2px solid transparent;transition:opacity .3s ease-in-out,transform .3s ease-in-out,box-shadow .3s ease-in-out,backdrop-filter .3s ease-in-out}.rmap-sortable-item *{pointer-events:none}.rmap-sortable-item.rmap-drag-start{opacity:.5}.rmap-sortable-item.rmap-drag-over{transform:scale(1.02);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 3.58195px 22.3872px -2.68646px rgb(var( --rm-audio-player-shadow, 0 0 0 ) / 20%)}.rmap-sortable-item-inner{display:flex;align-items:center}.rmap-playlist-item{width:100%;height:100%;display:flex;align-items:center;padding:10px 20px}.rmap-playlist-item.rmap-cur-played{background:var(--rm-audio-player-selected-list-item-background)}.rmap-playlist-item .rmap-playlist-item-contents{width:100%;display:flex;gap:10px}.rmap-playlist-item .rmap-playlist-album-cover{display:flex;align-items:center}.rmap-playlist-item .rmap-playlist-album-cover img{width:35px;height:35px}.rmap-playlist-item .rmap-playlist-album-info{display:grid;min-width:10px;font-size:13px;margin-right:1.5rem;padding:2px 0%}.rmap-playlist-item .rmap-playlist-album-info span{align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-playlist-container{transition-property:max-height,opacity;overflow-x:hidden;overflow-y:auto}.rmap-playlist-container.rmap-playlist-content-enter{opacity:0;max-height:0}.rmap-playlist-container.rmap-playlist-content-enter-active{opacity:1;max-height:20vh;transition-duration:.5s;transition-timing-function:cubic-bezier(0,0,0,1.2)}.rmap-playlist-container.rmap-playlist-content-leave{opacity:1;max-height:20vh}.rmap-playlist-container.rmap-playlist-content-leave-active{opacity:0;max-height:0;transition-duration:.25s;transition-timing-function:cubic-bezier(.66,-.41,1,1)}.rmap-bar-progress-wrapper{display:flex;width:100%;height:18px;padding:8px 0;cursor:pointer;position:relative;align-items:center}.rmap-bar-progress-wrapper .rmap-progress-bar{position:relative;width:100%;height:100%;overflow:hidden;background-color:var(--rm-audio-player-progress-bar-background)}.rmap-bar-progress-wrapper .rmap-progress-fill{position:absolute;left:0;width:100%;height:100%;background-color:var(--rm-audio-player-progress-bar);transform-origin:0 0;transform:scaleX(0)}.rmap-bar-progress-wrapper .rmap-progress-handle{position:absolute;left:-4px;background-color:var(--rm-audio-player-progress-bar);border-radius:50%;height:8px;width:8px;opacity:0;transition:opacity .2s ease-in-out}.rmap-bar-progress-wrapper:hover .rmap-progress-handle,.rmap-bar-progress-wrapper:focus-visible .rmap-progress-handle{opacity:1}.rmap-bar-progress-wrapper:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:2px}.rmap-waveform-wrapper{display:flex;width:100%}.rmap-waveform-wrapper[data-active=false]{height:0;opacity:0;pointer-events:none}.rmap-waveform-wrapper #rm-waveform{width:100%;overflow:hidden}.rmap-waveform-wrapper #rm-waveform wave{cursor:pointer!important;overflow-x:hidden!important}.rmap-progress-container{min-width:100px}.styled-btn.rmap-speed-selector-trigger{width:auto;min-width:36px;height:100%;align-items:center;justify-content:center;font:inherit;font-variant-numeric:tabular-nums;line-height:1;color:var(--rm-audio-player-text-color);border-radius:4px}.rmap-dropdown-container .rmap-dropdown-trigger.rmap-speed-selector-trigger{position:static;inset:auto}.styled-btn.rmap-speed-selector-trigger:hover{transform:none;color:var(--rm-audio-player-track-current-time)}.styled-btn.rmap-speed-selector-trigger:active{transform:scale(.95)}.rmap-speed-selector-menu{list-style:none;margin:0;padding:4px;min-width:64px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);display:flex;flex-direction:column}.rmap-speed-selector-option{width:100%;background:none;border:none;cursor:pointer;text-align:center;font:inherit;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--rm-audio-player-text-color);border-radius:3px;transition:background-color .15s ease-out,color .15s ease-out}.rmap-speed-selector-option:hover{background-color:rgb(var(--rm-audio-player-shadow, 0 0 0) / 8%)}.rmap-speed-selector-option:focus-visible{outline:2px solid var(--rm-audio-player-progress-bar, #0072f5);outline-offset:-2px}.rmap-speed-selector-option.rmap-speed-selector-option--active{color:var(--rm-audio-player-track-current-time);font-weight:600}.rmap-speed-selector-menu .rmap-speed-selector-option{padding:6px 12px}@keyframes rmap-appearance-in{0%{opacity:0;transform:scale(.95)}60%{opacity:.75;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes rmap-appearance-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.rmap-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;min-width:20px;min-height:20px}.rmap-dropdown-container .rmap-dropdown-trigger{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;display:flex}.rmap-dropdown-container .rmap-dropdown-content{transform-origin:center top}.rmap-dropdown-container .rmap-dropdown-content-enter{animation:rmap-appearance-in .25s ease-out normal forwards}.rmap-dropdown-container .rmap-dropdown-content-leave{animation:rmap-appearance-out .1s ease-in forwards}.rmap-volume-container{position:relative;height:119px;width:32px;display:flex;align-items:center;justify-content:center}.rmap-volume-container[data-placement=top]{bottom:auto}.rmap-volume-container[data-placement=left]{transform:rotate(-90deg);right:50px}.rmap-volume-container[data-placement=right]{transform:rotate(90deg);left:50px}.rmap-volume-container[data-placement=bottom]{transform:rotateX(180deg);top:5px}.rmap-volume-container .rmap-volume-panel{width:30px;background-color:var(--rm-audio-player-volume-panel-background);border:1px solid var(--rm-audio-player-volume-panel-border);border-radius:5px;height:118px;box-shadow:0 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;bottom:5px}.rmap-volume-container .rmap-volume-panel:before{content:"";bottom:-10px;left:7.9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-border) var(--rm-audio-player-volume-panel-border);border-style:solid;border-width:5px;box-shadow:-3px 3px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 10%);position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;z-index:0}.rmap-volume-container .rmap-volume-panel:after{content:"";bottom:-8px;left:9px;border-color:transparent transparent var(--rm-audio-player-volume-panel-background) var(--rm-audio-player-volume-panel-background);border-style:solid;border-width:4px;z-index:1;position:absolute;width:0;height:0;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none}.rmap-volume-container input[type=range]{margin-left:14px;position:absolute;display:block;top:-45px;left:0;height:2px;width:92px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--rm-audio-player-volume-background);transform-origin:75px 75px;transform:rotate(-90deg)}.rmap-volume-container input:focus:not(:focus-visible){outline-color:transparent}.rmap-volume-container input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb)}.rmap-volume-container input::-moz-range-thumb{width:16px;height:16px;border-radius:12px;overflow:visible;background:var(--rm-audio-player-volume-thumb);border:none}.rmap-volume-container input::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-volume-container input::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;overflow:visible;color:transparent;cursor:pointer;border-radius:2%/50%;border-color:transparent;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:100% 3px;background-image:linear-gradient(90deg,var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),var(--rm-audio-player-volume-track) var(--rm-audio-player-volume-value))}.rmap-artwork-container{display:flex;align-items:center;width:100%;height:100%}.rmap-artwork-container img,.rmap-artwork-container .rmap-artwork-fallback{width:50px;height:50px}.rmap-artwork-container .rmap-artwork-fallback{display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:13px}.rmap-track-info-container{display:grid;align-items:center;row-gap:5px}.rmap-track-info-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rmap-track-info-container .title{font-size:16px}.rmap-track-info-container .writer{font-size:12px}.rmap-track-time-container{display:flex;align-items:center;justify-content:center;min-height:16px;font-family:monospace!important;font-size:16px!important}.rmap-track-time-container[data-position=left] .rmap-track-current-time,.rmap-track-time-container[data-position=left] .rmap-track-duration{margin-right:-10px}.rmap-track-time-container[data-position=right] .rmap-track-current-time:before,.rmap-track-time-container[data-position=right] .rmap-track-duration:before{content:"/";margin:0 .3rem}.rmap-track-time-current .rmap-track-current-time{font-weight:700;letter-spacing:-.1rem;color:var(--rm-audio-player-track-current-time)}.rmap-track-time-duration .rmap-track-duration{display:flex;color:var(--rm-audio-player-track-duration);letter-spacing:-.1rem}.rmap-interface-container .rmap-interface-grid{background:var(--rm-audio-player-interface-container);padding:.5rem 10px}.rmap-interface-container .rmap-sortable-playlist{background:var(--rm-audio-player-sortable-list);box-shadow:-5px 2px 4px rgb(var(--rm-audio-player-shadow, 0 0 0) / 4%) inset}