diff --git a/ios/Stemify/Core/Settings.swift b/ios/Stemify/Core/Settings.swift
index 8c2d91a..5d56f21 100644
--- a/ios/Stemify/Core/Settings.swift
+++ b/ios/Stemify/Core/Settings.swift
@@ -103,6 +103,7 @@ final class Settings: @unchecked Sendable {
         "plexUrl", "plexToken", "plexUser", "plexMachineId", "musicSection", "musicSectionTitle",
         "stemUrl", "stemToken", "stemRoots", "theme", "accent", "albumColorNowPlaying", "highRefreshRate",
         "stemQuality", "cacheLimitGb", "downloadsWifiOnly", "downloadSort", "keepStemMix", "masterVolume", "tabLayout",
+        "karaokeVocals", "karaokeSoftDb", "playbackSpeed", "stemsOnly",
     ]
 
     private func read<T>(_ kp: KeyPath<Settings, T>, _ key: String, _ def: T) -> T {
@@ -189,6 +190,8 @@ final class Settings: @unchecked Sendable {
     var karaokeVocals: Int { get { read(\.karaokeVocals, "karaokeVocals", KaraokeVocals.Off.rawValue) } set { write(\.karaokeVocals, "karaokeVocals", newValue, KaraokeVocals.Off.rawValue) } }
     /// How far down Soft karaoke puts the vocals, in dB.
     var karaokeSoftDb: Int { get { read(\.karaokeSoftDb, "karaokeSoftDb", -12) } set { write(\.karaokeSoftDb, "karaokeSoftDb", newValue, -12) } }
+    /// Library lists show only what has stems.
+    var stemsOnly: Bool { get { read(\.stemsOnly, "stemsOnly", false) } set { write(\.stemsOnly, "stemsOnly", newValue, false) } }
     var keepStemMix: Bool { get { read(\.keepStemMix, "keepStemMix", true) } set { write(\.keepStemMix, "keepStemMix", newValue, true) } }
     var playbackSpeed: Double {
         get { access(keyPath: \.playbackSpeed); lock.lock(); defer { lock.unlock() }; return (store["playbackSpeed"] as? NSNumber)?.doubleValue ?? 1 }
diff --git a/ios/Stemify/Plex/PlexClient.swift b/ios/Stemify/Plex/PlexClient.swift
index d002152..b4ddccb 100644
--- a/ios/Stemify/Plex/PlexClient.swift
+++ b/ios/Stemify/Plex/PlexClient.swift
@@ -36,7 +36,8 @@ final class PlexClient: @unchecked Sendable {
     var signedIn: Bool { !settings.plexToken.isEmpty }
     private var base: String { settings.plexUrl.trimmingCharacters(in: CharacterSet(charactersIn: "/")) }
     private var token: String { settings.plexToken }
-    private var section: String { settings.musicSection }
+    /// The chosen music libraries; listings pool them, in the order they were picked.
+    private var sections: [String] { settings.musicSection.split(separator: ",").map(String.init) }
 
     private func request(_ url: URL, withToken: Bool = true, method: String = "GET") -> URLRequest {
         var r = URLRequest(url: url)
@@ -97,6 +98,33 @@ final class PlexClient: @unchecked Sendable {
         return out
     }
 
+    /// Every section's listing, one after another.
+    private func pooled(_ params: [(String, Any?)]) async throws -> [PlexItem] {
+        var out: [PlexItem] = []
+        for sec in sections { out += try await all("/library/sections/\(sec)/all", params) }
+        return out
+    }
+
+    /// A page of a listing that runs on through each section in turn.
+    private func pooledPage(_ params: [(String, Any?)], start: Int, size: Int) async throws -> ([PlexItem], Int) {
+        if sections.count == 1 {
+            let c = try await get("/library/sections/\(sections[0])/all", params, start: start, size: size)
+            return (c.metadata, c.totalSize ?? c.size)
+        }
+        var out: [PlexItem] = []
+        var offset = 0, total = 0
+        for sec in sections {
+            let n = try await get("/library/sections/\(sec)/all", params, start: 0, size: 0)
+            let count = n.totalSize ?? n.size
+            let from = max(start + out.count - offset, 0)
+            if out.count < size, from < count {
+                out += try await get("/library/sections/\(sec)/all", params, start: from, size: size - out.count).metadata
+            }
+            offset += count; total += count
+        }
+        return (out, total)
+    }
+
     // ---- server -------------------------------------------------------------------
 
     func machineId() async throws -> String {
@@ -114,27 +142,36 @@ final class PlexClient: @unchecked Sendable {
     // ---- library ------------------------------------------------------------------
 
     func artists(sort: String = "titleSort") async throws -> [Artist] {
-        try await all("/library/sections/\(section)/all", [("type", 8), ("sort", sort)]).map { $0.toArtist() }
+        try await pooled([("type", 8), ("sort", sort)]).map { $0.toArtist() }
     }
 
     func albums(sort: String = "titleSort") async throws -> [Album] {
-        try await all("/library/sections/\(section)/all", [("type", 9), ("sort", sort)]).map { $0.toAlbum() }
+        try await pooled([("type", 9), ("sort", sort)]).map { $0.toAlbum() }
     }
 
     func recentlyAdded(count: Int = 20) async throws -> [Album] {
-        try await get("/library/sections/\(section)/all", [("type", 9), ("sort", "addedAt:desc")], start: 0, size: count)
-            .metadata.map { $0.toAlbum() }
+        var out: [Album] = []
+        for sec in sections {
+            out += try await get("/library/sections/\(sec)/all", [("type", 9), ("sort", "addedAt:desc")], start: 0, size: count)
+                .metadata.map { $0.toAlbum() }
+        }
+        return out
     }
 
     /// One page of every track. Returns the page and the library's track count.
     func tracksPage(start: Int, size: Int, sort: String = "titleSort") async throws -> ([Track], Int) {
-        let c = try await get("/library/sections/\(section)/all", [("type", 10), ("sort", sort)], start: start, size: size)
-        return (c.metadata.map { $0.toTrack() }, c.totalSize ?? c.size)
+        let (page, total) = try await pooledPage([("type", 10), ("sort", sort)], start: start, size: size)
+        return (page.map { $0.toTrack() }, total)
     }
 
     /// Random tracks from the whole library, for shuffling it without loading every page.
     func randomTracks(_ count: Int) async throws -> [Track] {
-        try await get("/library/sections/\(section)/all", [("type", 10), ("sort", "random")], start: 0, size: count).metadata.map { $0.toTrack() }
+        var out: [Track] = []
+        for sec in sections {
+            out += try await get("/library/sections/\(sec)/all", [("type", 10), ("sort", "random")], start: 0, size: count / max(sections.count, 1) + 1)
+                .metadata.map { $0.toTrack() }
+        }
+        return Array(out.shuffled().prefix(count))
     }
 
     func album(_ key: String) async throws -> Album? {
@@ -148,7 +185,7 @@ final class PlexClient: @unchecked Sendable {
     // Not /library/metadata/<artist>/children: that leaves out compilations, singles and live
     // albums (an artist with only "The Best of Kansas" came back empty).
     func artistAlbums(_ key: String) async throws -> [Album] {
-        try await all("/library/sections/\(section)/all", [("type", 9), ("artist.id", key)]).map { $0.toAlbum() }
+        try await pooled([("type", 9), ("artist.id", key)]).map { $0.toAlbum() }
     }
 
     func artistTracks(_ key: String) async throws -> [Track] {
@@ -161,7 +198,9 @@ final class PlexClient: @unchecked Sendable {
 
     /// Title search inside the music section; used to give stem-only entries Plex metadata.
     func searchTracks(_ title: String) async throws -> [Track] {
-        try await get("/library/sections/\(section)/search", [("type", 10), ("query", title)]).metadata.map { $0.toTrack() }
+        var out: [Track] = []
+        for sec in sections { out += try await get("/library/sections/\(sec)/search", [("type", 10), ("query", title)]).metadata.map { $0.toTrack() } }
+        return out
     }
 
     /// Plex's own loudness analysis (what Plexamp draws its waveform from), in dB.
@@ -178,7 +217,7 @@ final class PlexClient: @unchecked Sendable {
     }
 
     func search(_ query: String) async throws -> SearchResults {
-        let hubs = try await get("/hubs/search", [("query", query), ("limit", 12), ("sectionId", section)]).hubs
+        let hubs = try await get("/hubs/search", [("query", query), ("limit", 12), ("sectionId", sections.count == 1 ? sections[0] : nil)]).hubs
         func hub(_ type: String) -> [PlexItem] { hubs.first { $0.type == type }?.metadata ?? [] }
         return SearchResults(
             artists: hub("artist").map { $0.toArtist() },
diff --git a/ios/Stemify/UI/Screens/LibraryScreens.swift b/ios/Stemify/UI/Screens/LibraryScreens.swift
index 9f8630f..5c7b3a2 100644
--- a/ios/Stemify/UI/Screens/LibraryScreens.swift
+++ b/ios/Stemify/UI/Screens/LibraryScreens.swift
@@ -121,9 +121,12 @@ struct SortOption {
     var up = "Ascending"
     var down = "Descending"
 
+    /// Random has no direction; picking it again reshuffles.
+    var random: Bool { key == "random" }
+
     /// Plex reverses a compound key by its first field.
     func param(_ reversed: Bool) -> String {
-        guard desc != reversed else { return key }
+        guard !random, desc != reversed else { return key }
         var fields = key.split(separator: ",").map(String.init)
         fields[0] += ":desc"
         return fields.joined(separator: ",")
@@ -133,6 +136,7 @@ struct SortOption {
 private let AZ = (up: "A to Z", down: "Z to A")
 private let NEW = (up: "Oldest First", down: "Newest First")
 private let MOST = (up: "Fewest First", down: "Most First")
+private let RANDOM = SortOption(title: "Random", key: "random", up: "Shuffled", down: "Shuffled")
 
 let ARTIST_SORTS = [
     SortOption(title: "Name", key: "titleSort", up: AZ.up, down: AZ.down),
@@ -140,6 +144,7 @@ let ARTIST_SORTS = [
     SortOption(title: "Last Played", key: "lastViewedAt", desc: true, up: NEW.up, down: NEW.down),
     SortOption(title: "Plays", key: "viewCount", desc: true, up: MOST.up, down: MOST.down),
     SortOption(title: "Rating", key: "userRating", desc: true, up: "Lowest First", down: "Highest First"),
+    RANDOM,
 ]
 
 let ALBUM_SORTS = [
@@ -151,6 +156,7 @@ let ALBUM_SORTS = [
     SortOption(title: "Last Played", key: "lastViewedAt", desc: true, up: NEW.up, down: NEW.down),
     SortOption(title: "Plays", key: "viewCount", desc: true, up: MOST.up, down: MOST.down),
     SortOption(title: "Rating", key: "userRating", desc: true, up: "Lowest First", down: "Highest First"),
+    RANDOM,
 ]
 
 let SONG_SORTS = [
@@ -162,6 +168,7 @@ let SONG_SORTS = [
     SortOption(title: "Plays", key: "viewCount", desc: true, up: MOST.up, down: MOST.down),
     SortOption(title: "Rating", key: "userRating", desc: true, up: "Lowest First", down: "Highest First"),
     SortOption(title: "Duration", key: "duration", desc: true, up: "Shortest First", down: "Longest First"),
+    RANDOM,
 ]
 
 let PLAYLIST_SORTS = [
@@ -171,6 +178,7 @@ let PLAYLIST_SORTS = [
     SortOption(title: "Last Played", key: "lastViewedAt", desc: true, up: NEW.up, down: NEW.down),
     SortOption(title: "Plays", key: "viewCount", desc: true, up: MOST.up, down: MOST.down),
     SortOption(title: "Duration", key: "duration", desc: true, up: "Shortest First", down: "Longest First"),
+    RANDOM,
 ]
 
 /// A screen's sort choice, kept across launches under `sort.<name>`.
@@ -188,6 +196,8 @@ struct SortState: DynamicProperty {
     var current: Int { options.indices.contains(index) ? index : 0 }
     var option: SortOption { options[current] }
     var param: String { option.param(reversed) }
+    /// Changes whenever the list should reload, including a reshuffle of Random.
+    var token: String { "\(param)|\(reversed)" }
     /// The default order (first option, its own direction), where a letter index makes sense.
     var isDefault: Bool { current == 0 && !reversed }
 
@@ -216,13 +226,16 @@ struct SortMenu: View {
                     }
                 }
             }
-            Section {
+            if !sort.option.random { Section {
                 Button { sort.setDescending(false) } label: {
                     if sort.descending { Text(sort.option.up) } else { Label(sort.option.up, systemImage: "checkmark") }
                 }
                 Button { sort.setDescending(true) } label: {
                     if sort.descending { Label(sort.option.down, systemImage: "checkmark") } else { Text(sort.option.down) }
                 }
+            } }
+            Section {
+                Toggle("Stems Only", systemImage: "waveform", isOn: Bindable(AppGraph.shared.settings).stemsOnly)
             }
         } label: {
             Image(systemName: "arrow.up.arrow.down")
@@ -230,6 +243,21 @@ struct SortMenu: View {
     }
 }
 
+/// The Stems Only filter. It only applies once there's a stems index (and, for albums and
+/// artists, once the library has been matched against it), so nothing vanishes while loading.
+@MainActor
+enum StemsOnly {
+    private static var g: AppGraph { .shared }
+    static var on: Bool { g.settings.stemsOnly && g.stems.index.size > 0 }
+    static func tracks(_ list: [Track]) -> [Track] { on ? list.filter { g.stems.find($0) != nil } : list }
+    static func albums(_ list: [Album]) -> [Album] {
+        on && g.coverage.ready ? list.filter { (g.coverage.albums[$0.ratingKey]?.withStems ?? 0) > 0 } : list
+    }
+    static func artists(_ list: [Artist]) -> [Artist] {
+        on && g.coverage.ready ? list.filter { (g.coverage.artists[$0.ratingKey]?.withStems ?? 0) > 0 } : list
+    }
+}
+
 // ---- artists ---------------------------------------------------------------------------------
 
 struct ArtistsScreen: View {
@@ -243,7 +271,8 @@ struct ArtistsScreen: View {
         ScrollViewReader { proxy in
             ScrollView {
                 LazyVStack(alignment: .leading, spacing: 0) {
-                    Loaded(state: artists, retry: { reload += 1 }) { list in
+                    Loaded(state: artists, retry: { reload += 1 }) { all in
+                        let list = StemsOnly.artists(all)
                         ForEach(list) { a in
                             Button { ui.push(.ArtistPage(a)) } label: { ArtistRow(artist: a).contentShape(Rectangle()) }
                                 .buttonStyle(.plain)
@@ -257,14 +286,14 @@ struct ArtistsScreen: View {
             }
             .background(p.bg)
             .overlay(alignment: .trailing) {
-                if sort.isDefault, let list = artists.value, list.count > 30 {
+                if sort.isDefault, let list = artists.value.map({ StemsOnly.artists($0) }), list.count > 30 {
                     SectionIndex(titles: list.map(\.sortTitle)) { i in proxy.scrollTo(list[i].ratingKey, anchor: .top) }
                 }
             }
         }
         .navigationTitle("Artists")
         .toolbar { ToolbarItem(placement: .topBarTrailing) { SortMenu(sort: sort) } }
-        .task(id: "\(AppGraph.shared.settings.musicSection)|\(sort.param)|\(reload)") {
+        .task(id: "\(AppGraph.shared.settings.musicSection)|\(sort.token)|\(reload)") {
             await LoadState.load($artists) { try await AppGraph.shared.plex.artists(sort: sort.param) }
         }
     }
@@ -327,13 +356,13 @@ struct AlbumsScreen: View {
     var body: some View {
         Page(title: "Albums") {
             Loaded(state: albums, retry: { reload += 1 }) { list in
-                AlbumGrid(albums: list, menu: { ui.menu.album($0) }, open: { ui.push(.AlbumPage($0)) }).padding(.top, 8)
+                AlbumGrid(albums: StemsOnly.albums(list), menu: { ui.menu.album($0) }, open: { ui.push(.AlbumPage($0)) }).padding(.top, 8)
             }
         }
         .toolbar {
             ToolbarItem(placement: .topBarTrailing) { SortMenu(sort: sort) }
         }
-        .task(id: "\(AppGraph.shared.settings.musicSection)|\(sort.param)|\(reload)") {
+        .task(id: "\(AppGraph.shared.settings.musicSection)|\(sort.token)|\(reload)") {
             await LoadState.load($albums) { try await AppGraph.shared.plex.albums(sort: sort.param) }
         }
     }
@@ -350,6 +379,8 @@ struct SongsScreen: View {
     @State private var error: String?
     /// Bumped when the sort changes, so a page still loading for the old order is dropped.
     @State private var gen = 0
+    /// How far into the unfiltered listing we've read; Stems Only drops rows as they arrive.
+    @State private var offset = 0
     private let sort = SortState("songs", SONG_SORTS)
     private var g: AppGraph { .shared }
 
@@ -364,7 +395,7 @@ struct SongsScreen: View {
     var body: some View {
         Page(title: "Songs") {
             if !tracks.isEmpty {
-                if total > 0 {
+                if total > 0, !StemsOnly.on, !sort.option.random {
                     Text(songs(total)).font(.subheadline).foregroundStyle(p.label2).padding(.leading, MARGIN).padding(.bottom, 12)
                 }
                 PlayShuffle(play: { g.playback.playTracks(Array(tracks.prefix(1000))) },
@@ -384,21 +415,31 @@ struct SongsScreen: View {
         }
         .toolbar { ToolbarItem(placement: .topBarTrailing) { SortMenu(sort: sort) } }
         .task { if tracks.isEmpty { loadMore() } }
-        .onChange(of: sort.param) {
-            gen += 1; tracks = []; total = -1; error = nil; loading = false
+        .onChange(of: "\(sort.token)|\(StemsOnly.on)|\(g.settings.musicSection)") {
+            gen += 1; tracks = []; total = -1; offset = 0; error = nil; loading = false
             loadMore()
         }
     }
 
     private func loadMore() {
-        if loading || (total >= 0 && tracks.count >= total) { return }
+        if loading || (total >= 0 && offset >= total) { return }
         loading = true
-        let mine = gen, order = sort.param
+        let mine = gen, order = sort.param, random = sort.option.random
         Task {
             do {
-                let (page, n) = try await g.plex.tracksPage(start: tracks.count, size: 200, sort: order)
+                // Random pages would repeat songs, so it's one shuffled batch.
+                let page: [Track], n: Int
+                if random {
+                    page = try await g.plex.randomTracks(1000); n = page.count
+                } else {
+                    let r = try await g.plex.tracksPage(start: offset, size: 200, sort: order)
+                    page = r.0; n = r.1
+                }
                 guard mine == gen else { return }
-                tracks += page; total = n; error = nil
+                let kept = StemsOnly.tracks(page)
+                tracks += kept; offset += page.count; total = n; error = nil
+                // A page that the filter mostly emptied leaves nothing on screen to trigger the next one.
+                if kept.count < 40, !page.isEmpty, offset < n { loading = false; loadMore(); return }
             } catch {
                 guard mine == gen else { return }
                 self.error = error.localizedDescription
@@ -687,7 +728,7 @@ struct GenreScreen: View {
     var body: some View {
         Page(title: genre) {
             Loaded(state: albums, retry: { reload += 1 }) { list in
-                AlbumGrid(albums: list.filter { $0.genre == genre }, menu: { ui.menu.album($0) }, open: { ui.push(.AlbumPage($0)) }).padding(.top, 8)
+                AlbumGrid(albums: StemsOnly.albums(list.filter { $0.genre == genre }), menu: { ui.menu.album($0) }, open: { ui.push(.AlbumPage($0)) }).padding(.top, 8)
             }
         }
         .task(id: "\(AppGraph.shared.settings.musicSection)|\(reload)") {
diff --git a/ios/Stemify/UI/Screens/PlaylistScreens.swift b/ios/Stemify/UI/Screens/PlaylistScreens.swift
index 9fee23d..686f21b 100644
--- a/ios/Stemify/UI/Screens/PlaylistScreens.swift
+++ b/ios/Stemify/UI/Screens/PlaylistScreens.swift
@@ -47,8 +47,10 @@ struct PlaylistsScreen: View {
                 Button { kind == .Plex ? newPlaylist() : newStemPlaylist() } label: { Image(systemName: "plus") }
             }
         }
-        .task(id: "\(g.settings.musicSection)|\(sort.param)|\(reload)") {
-            await LoadState.load($lists) { try await g.plex.playlists(sort: sort.param) }
+        .task(id: "\(g.settings.musicSection)|\(sort.token)|\(reload)") {
+            // /playlists may not take sort=random, so Random shuffles here.
+            let random = sort.option.random
+            await LoadState.load($lists) { try await random ? g.plex.playlists().shuffled() : g.plex.playlists(sort: sort.param) }
         }
     }
 
diff --git a/ios/Stemify/UI/Screens/SettingsScreens.swift b/ios/Stemify/UI/Screens/SettingsScreens.swift
index 60a9113..b65a8ee 100644
--- a/ios/Stemify/UI/Screens/SettingsScreens.swift
+++ b/ios/Stemify/UI/Screens/SettingsScreens.swift
@@ -160,6 +160,7 @@ struct SettingsScreen: View {
             }
             Section {
                 NavCell(title: "Appearance", value: s.theme.label, icon: "paintbrush.fill", iconBg: 0x007AFF, route: .Appearance)
+                ToggleCell(title: "Only Show Songs With Stems", icon: "waveform", iconBg: 0xAF52DE, isOn: $s.stemsOnly)
             } header: { Header(text: "Display") } footer: {
                 Footer(text: "Stemify \(Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String ?? "1.1") · stems by stemd on your server · \(UIScreen.main.maximumFramesPerSecond) Hz")
             }
@@ -270,8 +271,11 @@ struct PlexAccountScreen: View {
                         if list.isEmpty { Text("No music libraries found").foregroundStyle(p.label).themedRow() }
                         ForEach(list) { sec in
                             Button {
-                                s.musicSection = sec.key
-                                s.musicSectionTitle = sec.title
+                                // Tapping adds or drops a library; the picked ones are pooled. One always stays.
+                                var keys = s.musicSection.split(separator: ",").map(String.init)
+                                if let i = keys.firstIndex(of: sec.key) { if keys.count > 1 { keys.remove(at: i) } } else { keys.append(sec.key) }
+                                s.musicSection = keys.joined(separator: ",")
+                                s.musicSectionTitle = keys.compactMap { k in list.first { $0.key == k }?.title }.joined(separator: " + ")
                             } label: {
                                 HStack {
                                     VStack(alignment: .leading, spacing: 2) {
@@ -281,7 +285,7 @@ struct PlexAccountScreen: View {
                                         }
                                     }
                                     Spacer()
-                                    if sec.key == s.musicSection { Image(systemName: "checkmark").font(.body.weight(.semibold)).foregroundStyle(p.accent) }
+                                    if s.musicSection.split(separator: ",").contains(Substring(sec.key)) { Image(systemName: "checkmark").font(.body.weight(.semibold)).foregroundStyle(p.accent) }
                                 }
                                 .contentShape(Rectangle())
                             }
@@ -291,7 +295,7 @@ struct PlexAccountScreen: View {
                     } else {
                         ProgressView().frame(maxWidth: .infinity).themedRow()
                     }
-                } header: { Header(text: "Music Library") }
+                } header: { Header(text: "Music Libraries") } footer: { Footer(text: "Pick more than one to pool them into one library.") }
                 Section {
                     ActionCell(title: "Sign Out", color: p.red, centered: true) {
                         ui.overlays.confirm("Sign Out of Plex?", "Downloads stay on this phone.", "Sign Out") {
diff --git a/server/stemd.py b/server/stemd.py
index 0d5164f..2bb2b96 100644
--- a/server/stemd.py
+++ b/server/stemd.py
@@ -235,6 +235,43 @@ def resolve(plex_path):
     return path if os.path.splitext(path)[1].lower() in SOURCE_RANK else None
 
 
+class Status:
+    """What stemd is up to, for stemserve's /api/queue: the track in progress (the Plex path for
+    a Stem Now, else the path under MUSIC_DIR), how many tracks were finished since start, and the
+    last Stem Now paths that couldn't be done. Kept in QUEUE_DIR/.status.json, which the "*.json"
+    request glob skips because it starts with a dot."""
+
+    def __init__(self):
+        self.path = os.path.join(QUEUE_DIR, ".status.json")
+        self.current, self.done, self.failed = None, 0, []
+        self.write()
+
+    def start(self, current):
+        self.current = current
+        self.write()
+
+    def finish(self, ok, failed_path=None):
+        self.current = None
+        if ok:
+            self.done += 1
+        elif failed_path:
+            self.failed = [p for p in self.failed if p != failed_path][-49:] + [failed_path]
+        self.write()
+
+    def write(self):
+        tmp = self.path + ".tmp"
+        try:
+            with open(tmp, "w") as f:
+                json.dump({"current": self.current, "done": self.done, "failed": self.failed,
+                           "at": time.time()}, f)
+            os.replace(tmp, self.path)
+        except OSError:
+            pass
+
+
+status = None  # set in main()
+
+
 def serve_queue(sep, failed):
     """Separate every Stem Now request, oldest first. Returns whether any track was attempted.
 
@@ -257,6 +294,8 @@ def serve_queue(sep, failed):
             src = resolve(p) if isinstance(p, str) else None
             if src is None:
                 log(f"stem now: not in {MUSIC_DIR}: {p}")
+                if isinstance(p, str):
+                    status.finish(False, p)
                 continue
             dest = os.path.join(STEMS_DIR, os.path.splitext(os.path.relpath(src, MUSIC_DIR))[0])
             if is_done(dest):
@@ -267,17 +306,20 @@ def serve_queue(sep, failed):
                 continue
             if failed.skip(src, sig):
                 log(f"stem now: skip {os.path.relpath(src, MUSIC_DIR)}: failed before ({failed.data[src]['msg']})")
+                status.finish(False, p)
                 continue
-            todo.append((src, dest, sig))
+            todo.append((p, src, dest, sig))
         if todo:
             log(f"stem now: {len(todo)} track{'' if len(todo) == 1 else 's'} ahead of the rest")
-        for i, (src, dest, sig) in enumerate(todo, 1):
+        for i, (p, src, dest, sig) in enumerate(todo, 1):
             if stop.is_set():
                 return used
             if is_done(dest):
                 continue
             used = True
-            separate(sep, failed, src, dest, sig, f"[now {i}/{len(todo)}]")
+            status.start(p)
+            ok = separate(sep, failed, src, dest, sig, f"[now {i}/{len(todo)}]")
+            status.finish(ok, None if ok else p)
         if stop.is_set():
             break
         try:
@@ -316,7 +358,10 @@ def run_pass(sep, failed):
         if is_done(dest):  # a full pass takes days; the desktop or a Stem Now may have got there first
             continue
         used = True
-        if separate(sep, failed, path, dest, sig, f"[{i}/{len(todo)}]"):
+        status.start(os.path.relpath(path, MUSIC_DIR))
+        ok = separate(sep, failed, path, dest, sig, f"[{i}/{len(todo)}]")
+        status.finish(ok)
+        if ok:
             done += 1
     return done, used
 
@@ -347,6 +392,8 @@ def main():
         os.makedirs(QUEUE_DIR, exist_ok=True)
     except OSError as e:
         log(f"WARNING: can't create {QUEUE_DIR} ({e}); Stem Now won't work")
+    global status
+    status = Status()
     log(f"stemd: {MUSIC_DIR} -> {STEMS_DIR}")
     migrate_markers()
     sep = Separator()
diff --git a/server/stemserve.py b/server/stemserve.py
index 95bade4..fde3ea1 100644
--- a/server/stemserve.py
+++ b/server/stemserve.py
@@ -15,6 +15,8 @@ Endpoints (all GET unless noted; add ?token=... or X-Stem-Token when TOKEN is se
   /api/peaks?key=<key>&n=<buckets>           per-stem RMS envelopes, 0..1000
   POST /api/prepare?key=<key>&fmt=opus&br=160 start transcodes in the background
   POST /api/stem  {"paths": [...]}           "Stem Now": stemd separates these Plex files next
+  /api/queue                                 Stem Now progress: pending paths, the track in progress,
+                                             tracks done since stemd started, recent failures
   /file/<key>/<file>[?fmt=opus&br=160]       the stem itself, with Range support
   /plex/...                                  proxy to PLEX_URL (needs TOKEN or the Plex token)
   /api/config                                Plex URL and token from PLEX_URL / PLEX_TOKEN, if set
@@ -24,6 +26,7 @@ Endpoints (all GET unless noted; add ?token=... or X-Stem-Token when TOKEN is se
 """
 
 import email.utils
+import glob
 import hashlib
 import json
 import operator
@@ -106,9 +109,10 @@ class Index:
         return self._count
 
     def refresh(self):
+        """Rescans STEMS_DIR. Returns False if another scan was already running."""
         # One scan at a time; callers that lose the race use the previous result.
         if not self._scanning.acquire(blocking=self._at == 0):
-            return
+            return False
         try:
             tracks = []
             for root, dirs, files in os.walk(STEMS_DIR):
@@ -128,6 +132,7 @@ class Index:
                 self._at = time.monotonic()
         finally:
             self._scanning.release()
+        return True
 
 
 def _read_marker(folder, files):
@@ -354,6 +359,8 @@ class Handler(BaseHTTPRequestHandler):
                 return self._prepare(query)
             if path == "/api/stem":
                 return self._stem_now()
+            if path == "/api/queue":
+                return self._queue()
             if path.startswith("/file/"):
                 return self._file(path[len("/file/"):], query)
             return self._error(404, "not found")
@@ -422,6 +429,32 @@ class Handler(BaseHTTPRequestHandler):
             log(f"stem now: {len(paths)} track{'' if len(paths) == 1 else 's'} queued")
         self._send(202, json.dumps({"queued": len(paths)}).encode())
 
+    _seen_done = None
+
+    def _queue(self):
+        """What stemd has left to do, from its request files and the status file it keeps."""
+        pending = []
+        for req in sorted(glob.glob(os.path.join(QUEUE_DIR, "*.json"))):
+            try:
+                with open(req, encoding="utf-8") as f:
+                    paths = json.load(f).get("paths")
+            except (OSError, ValueError, AttributeError):
+                continue
+            if isinstance(paths, list):
+                pending += [p for p in paths if isinstance(p, str)]
+        try:
+            with open(os.path.join(QUEUE_DIR, ".status.json"), encoding="utf-8") as f:
+                st = json.load(f)
+        except (OSError, ValueError):
+            st = {}
+        done = st.get("done", 0)
+        # A track just finished: rescan now so the index the client fetches next includes it.
+        if done != Handler._seen_done and INDEX.refresh():
+            Handler._seen_done = done
+        self._send(200, json.dumps({"pending": pending, "current": st.get("current"), "done": done,
+                                    "failed": st.get("failed", []), "at": st.get("at")}).encode(),
+                   headers={"Cache-Control": "no-store"})
+
     def _file(self, rel, query):
         key, _, fname = rel.rpartition("/")
         src = _resolve(key, fname)
diff --git a/web/app.js b/web/app.js
index d0ff95c..f5a2fac 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1,449 +1,102 @@
-// Stemify web player. Browses Plex, plays stems from stemserve, no build step.
-// Each stem is its own <audio> element so speed changes keep pitch; a tick keeps them lined up.
+// Stemify web player: views, the player bar, drawers (mixer, lyrics, queue), the context
+// menu and settings. Playback lives in player.js, Plex in plex.js, stemserve in stems.js.
 
-const $ = (s, r = document) => r.querySelector(s);
-const esc = s => String(s ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-const fmtTime = s => { s = Math.max(0, Math.floor(s || 0)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
-const shuffled = a => { a = a.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; };
-
-const ICON = {
-  play: '<svg viewBox="0 0 24 24"><path d="M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5z"/></svg>',
-  pause: '<svg viewBox="0 0 24 24"><rect x="5.5" y="4" width="4.5" height="16" rx="1.2"/><rect x="14" y="4" width="4.5" height="16" rx="1.2"/></svg>',
-  prev: '<svg viewBox="0 0 24 24"><rect x="4" y="5" width="2.5" height="14" rx="1"/><path d="M20 5.7v12.6a1 1 0 0 1-1.55.83L9 12.83a1 1 0 0 1 0-1.66l9.45-6.3A1 1 0 0 1 20 5.7z"/></svg>',
-  next: '<svg viewBox="0 0 24 24"><rect x="17.5" y="5" width="2.5" height="14" rx="1"/><path d="M4 5.7v12.6a1 1 0 0 0 1.55.83L15 12.83a1 1 0 0 0 0-1.66l-9.45-6.3A1 1 0 0 0 4 5.7z"/></svg>',
-  shuffle: '<svg viewBox="0 0 24 24"><path d="M17 3l4 4-4 4V8h-2.2c-1 0-1.9.5-2.5 1.3L7.6 16c-.9 1.3-2.4 2-4 2H2v-2h1.6c.9 0 1.8-.5 2.3-1.2l4.7-6.7C11.5 6.8 13 6 14.8 6H17V3zM2 6h1.6c1.6 0 3.1.8 4 2l.9 1.3-1.2 1.7-1.4-1.9A2.8 2.8 0 0 0 3.6 8H2V6zm12.3 9.7c.6.8 1.5 1.3 2.5 1.3H17v-3l4 4-4 4v-3h-.2c-1.7 0-3.3-.8-4.2-2.2l-.6-.8 1.2-1.7.1.4z"/></svg>',
-  repeat: '<svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4V6H7a2 2 0 0 0-2 2v3H3V8a4 4 0 0 1 4-4h10V1zM7 23l-4-4 4-4v3h10a2 2 0 0 0 2-2v-3h2v3a4 4 0 0 1-4 4H7v3z"/></svg>',
-  repeat1: '<svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4V6H7a2 2 0 0 0-2 2v3H3V8a4 4 0 0 1 4-4h10V1zM7 23l-4-4 4-4v3h10a2 2 0 0 0 2-2v-3h2v3a4 4 0 0 1-4 4H7v3z"/><path d="M11.2 9.6l1.8-.9h1.2v6.6h-1.6v-4.9l-1.4.6z"/></svg>',
-  mixer: '<svg viewBox="0 0 24 24"><path d="M6 3h2v6.2a3 3 0 0 1 0 5.6V21H6v-6.2a3 3 0 0 1 0-5.6V3zm10 0h2v2.2a3 3 0 0 1 0 5.6V21h-2V10.8a3 3 0 0 1 0-5.6V3zM7 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>',
-  queue: '<svg viewBox="0 0 24 24"><path d="M3 5h14v2H3zm0 6h14v2H3zm0 6h9v2H3zm13-1.5v-1.5l6 3.5-6 3.5V17z"/></svg>',
-  busy: '<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9h-2.2A6.8 6.8 0 1 1 12 5.2V3z"/></svg>',
-};
-
-// ---- settings --------------------------------------------------------------------------
-
-const KEY = "stemify-web";
-const S = Object.assign({
-  plex: null,           // {url, token, name}
-  section: null,
-  stemUrl: "",          // empty = same origin as this page
-  stemToken: "",
-  fmt: "opus160",
-  volume: 0.85, speed: 1, shuffle: false, repeat: "off",
-  mix: {},              // stem name -> {level, muted, solo}; kept across tracks
-  albumSort: "titleSort",
-}, load(KEY) || {});
-if (!S.clientId) S.clientId = crypto.randomUUID ? crypto.randomUUID() : String(Math.random()).slice(2);
-if (S.fmt.startsWith("opus") && !new Audio().canPlayType('audio/ogg; codecs="opus"')) S.fmt = "flac";
-
-function load(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }
-let saveTimer;
-function save() {
-  clearTimeout(saveTimer);
-  saveTimer = setTimeout(() => {
-    try {
-      localStorage.setItem(KEY, JSON.stringify(S));
-      localStorage.setItem(KEY + "-queue", JSON.stringify({ items: Q.items.slice(0, 2000), orig: Q.orig?.slice(0, 2000), i: Q.i, pos: E.position() }));
-    } catch {}
-  }, 300);
-}
+import { $, $$, esc, fmtTime, fmtBytes, plural, on, emit, toast, ICON, store } from "./util.js";
+import { S, save, songMixes, saveSongMix, forgetSongMix, playlists, savePlaylists, newPlaylist, addToPlaylist, Offline } from "./store.js";
+import { px, img, track, sources, liveServers, server, refreshServer, addServer, manualServer, signIn, sortState, pickSort, comparator, sortTracks, Pager, everything } from "./plex.js";
+import { Stems, Live, stemNow, stemTrack, stemBase, api } from "./stems.js";
+import { E, Q, PRESETS, setting, stemGain, applyPreset, currentPreset, mixChanged, setKaraoke, setKaraokeMode, sameMix, setSpeed, saveQueue, saveOffline } from "./player.js";
+import { lyricsFor, lineAt } from "./lyrics.js";
 
 const SPEEDS = [0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 2];
+const view = $("#view");
 
-// ---- Plex ------------------------------------------------------------------------------
+// ---- appearance -------------------------------------------------------------------------------
 
-const plexHeaders = token => ({
-  Accept: "application/json",
-  "X-Plex-Product": "Stemify Web",
-  "X-Plex-Client-Identifier": S.clientId,
-  ...(token ? { "X-Plex-Token": token } : {}),
-});
-
-async function px(path, params = {}) {
-  if (!S.plex) throw new Error("Not signed in to Plex");
-  const u = new URL(S.plex.url + path, location.href);
-  for (const [k, v] of Object.entries(params)) u.searchParams.set(k, v);
-  const r = await fetch(u, { headers: plexHeaders(S.plex.token) });
-  if (!r.ok) throw new Error(`Plex ${r.status}`);
-  return (await r.json()).MediaContainer || {};
+const THEMES = {
+  amber: { bg: "#0d0e12", panel: "#15171d", raised: "#1d2028", line: "#262a33", text: "#eceef3", muted: "#8a8f9c", accent: "#f2b544" },
+  ocean: { bg: "#0a1018", panel: "#101a26", raised: "#172434", line: "#1f2f42", text: "#e6eef7", muted: "#8698ad", accent: "#4cc2ff" },
+  rose: { bg: "#120c10", panel: "#1b1218", raised: "#251922", line: "#33222e", text: "#f5e9f0", muted: "#a48b99", accent: "#ff6f9f" },
+  forest: { bg: "#0b110d", panel: "#111a14", raised: "#18241c", line: "#223127", text: "#e8f2ea", muted: "#88a08e", accent: "#62d38a" },
+  mono: { bg: "#0e0e0e", panel: "#161616", raised: "#202020", line: "#2c2c2c", text: "#f0f0f0", muted: "#8c8c8c", accent: "#f0f0f0" },
+  oled: { bg: "#000000", panel: "#000000", raised: "#141414", line: "#1e1e1e", text: "#f2f2f2", muted: "#8a8a8a", accent: "#f2b544" },
+  light: { bg: "#f6f6f3", panel: "#ffffff", raised: "#ebeae5", line: "#dddbd4", text: "#18181b", muted: "#6b6b73", accent: "#c27a06", light: true },
+};
+const inkFor = hex => {
+  const n = parseInt(hex.slice(1), 16), l = (0.299 * (n >> 16) + 0.587 * (n >> 8 & 255) + 0.114 * (n & 255)) / 255;
+  return l > 0.6 ? "#141414" : "#ffffff";
+};
+function applyTheme() {
+  const t = THEMES[S.theme] || THEMES.amber, a = S.accent || t.accent;
+  $("#theme").textContent = `:root{--bg:${t.bg};--panel:${t.panel};--raised:${t.raised};--line:${t.line};--text:${t.text};--muted:${t.muted};` +
+    `--accent:${a};--accent-ink:${inkFor(a)};--glass:${t.panel}ee;--hover:${t.text}0d;--shadow:${t.light ? "#0003" : "#0009"};` +
+    `--wave:${t.text}44;--wave-ghost:${t.text}14;color-scheme:${t.light ? "light" : "dark"}}`;
+  $("#custom-css").textContent = S.css || "";
+  $('meta[name="theme-color"]').content = t.bg;
+  Wave.colors();
 }
 
-const plexImg = (thumb, size = 300) => thumb && S.plex
-  ? `${S.plex.url}/photo/:/transcode?width=${size}&height=${size}&minSize=1&upscale=1&url=${encodeURIComponent(thumb)}&X-Plex-Token=${S.plex.token}`
-  : "";
+// ---- stems-only filter ------------------------------------------------------------------------
+// Tracks know whether they have stems. Album and artist cards are matched by folder name
+// (stems are stored as Artist/Album/Track), which is close enough for a filter.
 
-function plexTrack(m) {
-  const part = m.Media?.[0]?.Part?.[0];
-  return {
-    id: "p" + m.ratingKey, title: m.title, artist: m.originalTitle || m.grandparentTitle || "", album: m.parentTitle || "",
-    albumKey: m.parentRatingKey, thumb: m.thumb || m.parentThumb || m.grandparentThumb, duration: m.duration || part?.duration || 0,
-    part: part?.key, file: part?.file, index: m.index,
-  };
-}
-
-async function plexSignIn(status) {
-  const pin = await (await fetch("https://plex.tv/api/v2/pins?strong=true", { method: "POST", headers: plexHeaders() })).json();
-  const auth = `https://app.plex.tv/auth#?clientID=${encodeURIComponent(S.clientId)}&code=${encodeURIComponent(pin.code)}&context%5Bdevice%5D%5Bproduct%5D=Stemify%20Web`;
-  window.open(auth, "_blank", "width=800,height=740");
-  status("Waiting for Plex sign-in…");
-  let token = null;
-  for (let n = 0; n < 150 && !token; n++) {
-    await new Promise(r => setTimeout(r, 2000));
-    token = (await (await fetch(`https://plex.tv/api/v2/pins/${pin.id}`, { headers: plexHeaders() })).json()).authToken;
-  }
-  if (!token) throw new Error("Sign-in timed out");
-  status("Finding your server…");
-  const res = await (await fetch("https://plex.tv/api/v2/resources?includeHttps=1", { headers: plexHeaders(token) })).json();
-  const https = location.protocol === "https:";
-  for (const srv of res.filter(r => r.provides?.includes("server"))) {
-    const conns = (srv.connections || []).filter(c => !https || c.protocol === "https")
-      .sort((a, b) => (b.local - a.local) || (a.relay - b.relay));
-    for (const c of conns) {
-      try {
-        const r = await fetch(`${c.uri}/identity`, { headers: plexHeaders(srv.accessToken || token), signal: AbortSignal.timeout(3500) });
-        if (r.ok) return { url: c.uri, token: srv.accessToken || token, name: srv.name };
-      } catch {}
+const nameKey = s => (s || "").toLowerCase().replace(/\s*[([][^)\]]*[)\]]/g, "").replace(/[^\p{L}\p{N}]+/gu, "");
+let stemSetCache = null;
+function stemSets() {
+  if (!stemSetCache) {
+    stemSetCache = { album: new Set(), artist: new Set() };
+    for (const e of Stems.entries) {
+      const p = e.key.split("/");
+      stemSetCache.album.add(nameKey(p.at(-2)));
+      stemSetCache.artist.add(nameKey(p.at(-3)));
     }
   }
-  throw new Error("Signed in, but no Plex server answered from this browser");
+  return stemSetCache;
+}
+const cardHasStems = (kind, title) => stemSets()[kind]?.has(nameKey(title)) ?? true;
+
+function applyStemsOnly() {
+  document.body.classList.toggle("stems-only", S.stemsOnly);
+  $$("[data-stemsonly]").forEach(b => b.classList.toggle("on", S.stemsOnly));
+  kick?.();
 }
 
-async function musicSection() {
-  if (S.section) return S.section;
-  const secs = (await px("/library/sections")).Directory || [];
-  S.section = secs.find(d => d.type === "artist")?.key || null;
-  save();
-  if (!S.section) throw new Error("No music library on this Plex server");
-  return S.section;
-}
-
-// ---- stemserve -------------------------------------------------------------------------
-
-const stemBase = () => (S.stemUrl || location.origin).replace(/\/+$/, "");
-const stemQuery = extra => {
-  const q = new URLSearchParams(extra);
-  if (S.stemToken) q.set("token", S.stemToken);
-  const s = q.toString();
-  return s ? "?" + s : "";
-};
-const keyPath = k => k.split("/").map(encodeURIComponent).join("/");
-const fmtParams = () => S.fmt.startsWith("opus") ? { fmt: "opus", br: S.fmt.slice(4) } : {};
-
-// Same matching as the apps: the stems folder mirrors the music folder, so the Plex path's
-// suffix identifies a track. Short or duration-mismatched suffixes only count under a root
-// learned from an earlier confident match.
-const Stems = {
-  entries: [], bySource: new Map(), roots: [], etag: null, ok: false,
-  norm(p) {
-    p = p.normalize("NFC").replaceAll("\\", "/");
-    const slash = p.lastIndexOf("/"), dot = p.lastIndexOf(".");
-    if (dot > slash + 1) p = p.slice(0, dot);
-    return p.toLowerCase();
-  },
-  async refresh() {
-    try {
-      const r = await fetch(stemBase() + "/api/index" + stemQuery(), { headers: this.etag ? { "If-None-Match": this.etag } : {} });
-      this.ok = r.ok || r.status === 304;
-      if (r.status !== 200) return false;
-      this.etag = r.headers.get("ETag");
-      this.entries = (await r.json()).tracks || [];
-      this.bySource = new Map();
-      for (const e of this.entries) { const k = this.norm(e.source); if (!this.bySource.has(k)) this.bySource.set(k, e); }
-      return true;
-    } catch { this.ok = false; return false; }
-  },
-  find(t) {
-    if (t.stem) return t.stem;
-    if (!t.file || !this.entries.length) return null;
-    const path = this.norm(t.file);
-    for (const root of this.roots) if (path.startsWith(root)) { const hit = this.bySource.get(path.slice(root.length)); if (hit) return hit; }
-    const parts = path.split("/");
-    for (let i = 1; i < parts.length; i++) {
-      const hit = this.bySource.get(parts.slice(i).join("/"));
-      if (!hit) continue;
-      const okDur = !hit.duration || !t.duration || Math.abs(hit.duration * 1000 - t.duration) < 3000;
-      if (parts.length - i >= 2 && okDur) {
-        const root = parts.slice(0, i).join("/") + "/";
-        if (!this.roots.includes(root)) this.roots.push(root);
-        return hit;
-      }
-    }
-    return null;
-  },
-  url(e, s) { return `${stemBase()}/file/${keyPath(e.key)}/${encodeURIComponent(s.file)}${stemQuery(fmtParams())}`; },
-  prepare(e) {
-    if (e && S.fmt.startsWith("opus")) fetch(`${stemBase()}/api/prepare${stemQuery({ key: e.key, ...fmtParams() })}`, { method: "POST" }).catch(() => {});
-  },
-};
-
-const stemTrack = e => {
-  const parts = e.key.split("/");
-  return { id: "s" + e.key, title: parts.at(-1), artist: parts.at(-3) || "", album: parts.at(-2) || "", duration: (e.duration || 0) * 1000, stem: e };
-};
-
-// ---- mix -------------------------------------------------------------------------------
-
-const unity = () => ({ level: 1, muted: false, solo: false });
-const PRESETS = [
-  ["Full Mix", () => ({})],
-  ["Karaoke", n => n.includes("vocals") && { vocals: { muted: true } }],
-  ["A Cappella", n => n.includes("vocals") && { vocals: { solo: true } }],
-  ["No Drums", n => n.includes("drums") && { drums: { muted: true } }],
-  ["Rhythm", n => n.includes("drums") && n.includes("bass") && { drums: { solo: true }, bass: { solo: true } }],
-  ["No Guitar", n => n.includes("guitar") && { guitar: { muted: true } }],
-  ["No Bass", n => n.includes("bass") && { bass: { muted: true } }],
-];
-const setting = name => ({ ...unity(), ...S.mix[name] });
-function stemGain(name, names) {
-  const s = setting(name), anySolo = names.some(n => setting(n).solo);
-  return anySolo ? (s.solo ? s.level : 0) : (s.muted ? 0 : s.level);
-}
-function applyPreset(build, names) {
-  const m = build(names);
-  if (!m) return;
-  S.mix = {};
-  for (const [k, v] of Object.entries(m)) S.mix[k] = { ...unity(), ...v };
-  mixChanged();
-}
-function currentPreset(names) {
-  const norm = m => JSON.stringify(names.map(n => { const s = { ...unity(), ...m[n] }; return [s.level, s.muted, s.solo]; }));
-  const now = norm(S.mix);
-  return PRESETS.find(([, b]) => { const m = b(names); return m && norm(Object.fromEntries(Object.entries(m).map(([k, v]) => [k, { ...unity(), ...v }]))) === now; })?.[0];
-}
-
-// ---- audio -----------------------------------------------------------------------------
-
-const E = {
-  els: [], names: [], gains: [], ctx: null, master: null, graph: false,
-  want: false, stalled: false, onEnded: null,
-
-  audioCtx() {
-    if (!this.ctx) {
-      const C = window.AudioContext || window.webkitAudioContext;
-      if (!C) return null;
-      this.ctx = new C();
-      this.master = this.ctx.createGain();
-      this.master.connect(this.ctx.destination);
-      this.master.gain.value = S.volume;
-    }
-    if (this.ctx.state === "suspended") this.ctx.resume();
-    return this.ctx;
-  },
-
-  load(sources, startSec, play) {
-    this.unload();
-    // Web Audio gains work everywhere (iOS ignores element volume) but need same-origin media.
-    const sameOrigin = sources.every(s => new URL(s.url, location.href).origin === location.origin);
-    this.graph = sameOrigin && !!this.audioCtx();
-    for (const s of sources) {
-      const el = new Audio();
-      el.preload = "auto";
-      el.preservesPitch = true;
-      el.src = s.url;
-      el.playbackRate = el.defaultPlaybackRate = S.speed;
-      if (startSec) el.currentTime = startSec;
-      let gain = null;
-      if (this.graph) {
-        gain = this.ctx.createGain();
-        this.ctx.createMediaElementSource(el).connect(gain).connect(this.master);
-      }
-      this.els.push(el); this.gains.push(gain); this.names.push(s.name);
-    }
-    const lead = this.els[0];
-    lead.addEventListener("ended", () => this.onEnded?.());
-    lead.addEventListener("durationchange", () => UI.progress());
-    lead.addEventListener("error", () => { if (this.want) toast("Couldn't load this track"); });
-    this.applyGains();
-    this.want = play;
-    this.stalled = play;
-  },
-
-  unload() {
-    for (const el of this.els) { el.pause(); el.removeAttribute("src"); el.load(); }
-    this.els = []; this.names = []; this.gains = [];
-  },
-
-  applyGains() {
-    const named = this.names.filter(Boolean);
-    this.els.forEach((el, i) => {
-      const g = this.names[i] ? stemGain(this.names[i], named) : 1;
-      if (this.gains[i]) this.gains[i].gain.value = g;
-      else el.volume = Math.min(1, g * (this.graph ? 1 : S.volume));
-    });
-    if (this.master) this.master.gain.value = S.volume;
-  },
-
-  play() { this.audioCtx(); this.want = true; this.stalled = true; this.tick(); },
-  pause() { this.want = false; this.stalled = false; this.els.forEach(e => e.pause()); },
-  seek(sec) { this.els.forEach(e => { e.currentTime = sec; }); if (this.want) this.stalled = true; UI.progress(); },
-  setSpeed(v) { this.els.forEach(e => { e.playbackRate = e.defaultPlaybackRate = v; }); },
-  position() { return this.els[0]?.currentTime || 0; },
-  duration() { const d = this.els[0]?.duration; return isFinite(d) ? d : (Q.cur()?.duration || 0) / 1000; },
-  get playing() { return this.want; },
-  get buffering() { return this.want && this.stalled; },
-
-  // Holds everything until every stem can play, then starts them together and keeps followers
-  // within ~15 ms of the lead by nudging their rate (pitch is preserved, so it's inaudible).
-  tick() {
-    if (!this.els.length || !this.want) return;
-    const lead = this.els[0];
-    const notReady = this.els.some(e => e.readyState < 3 && !e.ended);
-    if (notReady) {
-      if (!this.stalled) { this.els.forEach(e => e.pause()); this.stalled = true; UI.transport(); }
-      return;
-    }
-    if (this.stalled) {
-      this.stalled = false;
-      const t = lead.currentTime;
-      this.els.forEach(e => { if (e !== lead && Math.abs(e.currentTime - t) > 0.01) e.currentTime = t; e.playbackRate = S.speed; });
-      Promise.all(this.els.map(e => e.play())).catch(err => {
-        if (err.name === "NotAllowedError") { this.pause(); UI.transport(); }
-      });
-      UI.transport();
-      return;
-    }
-    for (const f of this.els.slice(1)) {
-      if (f.ended || lead.ended) continue;
-      const d = f.currentTime - lead.currentTime;
-      if (Math.abs(d) > 0.25) f.currentTime = lead.currentTime;
-      else if (Math.abs(d) > 0.015) f.playbackRate = S.speed * (1 - Math.max(-0.06, Math.min(0.06, d * 1.5)));
-      else if (f.playbackRate !== S.speed) f.playbackRate = S.speed;
-    }
-  },
-};
-setInterval(() => E.tick(), 150);
-
-// ---- queue -----------------------------------------------------------------------------
-
-let uidSeq = Date.now();
-const wrap = t => ({ uid: uidSeq++, t });
-const Q = {
-  items: [], orig: null, i: -1,
-  cur() { return this.items[this.i]?.t; },
-
-  playList(tracks, start = 0, shuffle = S.shuffle) {
-    if (!tracks.length) return;
-    const all = tracks.map(wrap);
-    if (shuffle) {
-      const first = all[start] && start >= 0 ? all[start] : all[Math.floor(Math.random() * all.length)];
-      this.orig = all;
-      this.items = [first, ...shuffled(all.filter(x => x !== first))];
-      this.i = 0;
-    } else { this.orig = null; this.items = all; this.i = start; }
-    S.shuffle = shuffle;
-    this.start(0, true);
-  },
-  add(tracks, next = false) {
-    const w = tracks.map(wrap);
-    if (next) { this.items.splice(this.i + 1, 0, ...w); this.orig?.push(...w); }
-    else { this.items.push(...w); this.orig?.push(...w); }
-    if (this.i < 0) { this.i = 0; this.start(0, false); }
-    UI.drawer(); save();
-    toast(tracks.length === 1 ? `Added “${tracks[0].title}”` : `Added ${tracks.length} tracks`);
-  },
-  remove(idx) {
-    if (idx === this.i) return;
-    const [x] = this.items.splice(idx, 1);
-    if (this.orig) this.orig = this.orig.filter(o => o !== x);
-    if (idx < this.i) this.i--;
-    UI.drawer(); save();
-  },
-  jump(idx) { this.i = idx; this.start(0, true); },
-
-  start(posSec, play) {
-    const t = this.cur();
-    if (!t) { E.unload(); UI.all(); return; }
-    const e = Stems.find(t);
-    const srcs = e
-      ? e.stems.map(s => ({ name: s.name, url: Stems.url(e, s) }))
-      : [{ name: null, url: `${S.plex?.url}${t.part}?X-Plex-Token=${S.plex?.token}` }];
-    E.load(srcs, posSec, play);
-    Wave.load(e);
-    Stems.prepare(e);
-    this.prepareNext();
-    UI.all(); save();
-  },
-
-  // Transcode the next track only once this one is playing and fully buffered, so they don't compete.
-  prepareNext() {
-    clearInterval(this.nextTimer);
-    const nt = this.items[this.i + 1]?.t;
-    if (!nt) return;
-    const ready = () => E.playing && !E.buffering && E.els.length
-      && E.els.every(el => el.duration > 0 && el.buffered.length && el.buffered.end(el.buffered.length - 1) >= el.duration - 0.5);
-    this.nextTimer = setInterval(() => {
-      if (!ready()) return;
-      clearInterval(this.nextTimer);
-      Stems.prepare(Stems.find(nt));
-    }, 1000);
-  },
-
-  next(auto = false) {
-    if (auto && S.repeat === "one") { E.seek(0); E.play(); return; }
-    if (this.i + 1 < this.items.length) { this.i++; this.start(0, true); }
-    else if (S.repeat !== "off" && this.items.length) { this.i = 0; this.start(0, true); }
-    else if (auto) { E.pause(); E.seek(0); UI.transport(); }
-  },
-  prev() {
-    if (E.position() > 3 || (this.i === 0 && S.repeat === "off")) { E.seek(0); return; }
-    this.i = this.i > 0 ? this.i - 1 : this.items.length - 1;
-    this.start(0, E.playing);
-  },
-
-  toggleShuffle() {
-    if (!S.shuffle) {
-      this.orig = this.items.slice();
-      this.items = [...this.items.slice(0, this.i + 1), ...shuffled(this.items.slice(this.i + 1))];
-    } else if (this.orig) {
-      const cur = this.items[this.i];
-      this.items = this.orig;
-      this.i = Math.max(0, this.items.indexOf(cur));
-      this.orig = null;
-    }
-    S.shuffle = !S.shuffle;
-    UI.transport(); UI.drawer(); save();
-  },
-  cycleRepeat() {
-    S.repeat = { off: "all", all: "one", one: "off" }[S.repeat];
-    UI.transport(); save();
-  },
-};
-E.onEnded = () => Q.next(true);
-
-function setSpeed(v) {
-  S.speed = v;
-  E.setSpeed(v);
-  UI.transport(); save();
-}
-function mixChanged() { E.applyGains(); Wave.draw(); UI.drawer(); save(); }
-
-// ---- waveform --------------------------------------------------------------------------
+// ---- waveform ---------------------------------------------------------------------------------
 
 const Wave = {
-  peaks: null, key: null, canvas: $("#wave"),
-  async load(e) {
-    this.peaks = null; this.key = e?.key || null;
+  peaks: null, key: null, canvas: $("#wave"), c: {},
+  colors() {
+    const cs = getComputedStyle(document.documentElement), v = n => cs.getPropertyValue(n).trim();
+    this.c = { accent: v("--accent"), bar: v("--wave"), ghost: v("--wave-ghost") };
     this.draw();
-    if (!e) return;
-    try {
-      const r = await fetch(`${stemBase()}/api/peaks${stemQuery({ key: e.key, n: 300 })}`);
-      if (!r.ok || this.key !== e.key) return;
-      this.peaks = (await r.json()).stems;
-      this.draw();
-    } catch {}
+  },
+  async load(t) {
+    const e = t && Stems.find(t);
+    this.peaks = null; this.key = t?.id || null;
+    this.draw();
+    if (!t) return;
+    const key = this.key;
+    let peaks = null;
+    if (Offline.has(t.id)) peaks = (await Offline.get(t.id).catch(() => null))?.peaks;
+    else if (e) peaks = (await fetch(api("/api/peaks", { key: e.key, n: 300 })).then(r => r.ok ? r.json() : null).catch(() => null))?.stems;
+    if (this.key === key && peaks) { this.peaks = peaks; this.draw(); }
   },
   draw() {
-    const c = this.canvas, dpr = devicePixelRatio || 1;
-    const w = c.clientWidth, h = c.clientHeight;
+    const c = this.canvas, dpr = devicePixelRatio || 1, w = c.clientWidth, h = c.clientHeight;
     if (!w) return;
     if (c.width !== w * dpr) { c.width = w * dpr; c.height = h * dpr; }
     const x = c.getContext("2d");
     x.setTransform(dpr, 0, 0, dpr, 0, 0);
     x.clearRect(0, 0, w, h);
     const dur = E.duration(), frac = dur ? Math.min(1, E.position() / dur) : 0;
-    const accent = getComputedStyle(document.documentElement).getPropertyValue("--accent");
+    if (E.loading) {
+      x.fillStyle = this.c.ghost; x.fillRect(0, h / 2 - 2, w, 4);
+      x.fillStyle = this.c.bar; x.fillRect(0, h / 2 - 2, w * E.loadFrac, 4);
+      return;
+    }
     if (!this.peaks) {
-      x.fillStyle = "#ffffff22"; x.fillRect(0, h / 2 - 2, w, 4);
-      x.fillStyle = accent; x.fillRect(0, h / 2 - 2, w * frac, 4);
+      x.fillStyle = this.c.ghost; x.fillRect(0, h / 2 - 2, w, 4);
+      x.fillStyle = this.c.accent; x.fillRect(0, h / 2 - 2, w * frac, 4);
       return;
     }
     const names = Object.keys(this.peaks), n = this.peaks[names[0]].length;
@@ -457,13 +110,9 @@ const Wave = {
     for (let b = 0; b < bars; b++) {
       const i = Math.floor(b / bars * n);
       const v = Math.sqrt(mixed[i]) / max, ghost = Math.sqrt(full[i]) / max;
-      const cx = b * bw;
-      x.fillStyle = "#ffffff12";
-      const gh = Math.max(2, ghost * h);
-      x.fillRect(cx, (h - gh) / 2, bw - 1, gh);
-      x.fillStyle = b / bars < frac ? accent : "#ffffff40";
-      const bh = Math.max(2, v * h);
-      x.fillRect(cx, (h - bh) / 2, bw - 1, bh);
+      const gh = Math.max(2, ghost * h), bh = Math.max(2, v * h);
+      x.fillStyle = this.c.ghost; x.fillRect(b * bw, (h - gh) / 2, bw - 1, gh);
+      x.fillStyle = b / bars < frac ? this.c.accent : this.c.bar; x.fillRect(b * bw, (h - bh) / 2, bw - 1, bh);
     }
   },
 };
@@ -472,28 +121,29 @@ const Wave = {
   const at = ev => { const r = Wave.canvas.getBoundingClientRect(); return Math.max(0, Math.min(1, (ev.clientX - r.left) / r.width)) * E.duration(); };
   Wave.canvas.addEventListener("pointerdown", ev => { drag = true; Wave.canvas.setPointerCapture(ev.pointerId); E.seek(at(ev)); });
   Wave.canvas.addEventListener("pointermove", ev => { if (drag) E.seek(at(ev)); });
-  Wave.canvas.addEventListener("pointerup", () => { drag = false; save(); });
+  Wave.canvas.addEventListener("pointerup", () => { drag = false; saveQueue(); });
   new ResizeObserver(() => Wave.draw()).observe(Wave.canvas);
 }
 
-// ---- player UI -------------------------------------------------------------------------
+// ---- player bar and drawers -------------------------------------------------------------------
 
-let drawerMode = null; // "mixer" | "queue"
+let drawer = null; // "mixer" | "lyrics" | "queue"
+const Lyr = { id: null, data: null, idx: -1 };
+const artOf = (t, size) => t?.srv ? img(t.srv, t.thumb, size) : "";
 
 const UI = {
-  all() { this.track(); this.transport(); this.progress(); this.drawer(); markPlaying(); },
+  all() { this.track(); this.transport(); this.progress(); this.drawer(); marks(); },
   track() {
     const t = Q.cur();
     $("#player").classList.toggle("empty", !t);
     $("#np-title").textContent = t?.title || "Nothing playing";
     $("#np-sub").textContent = t ? [t.artist, t.album].filter(Boolean).join(" · ") : "";
-    const art = t ? plexImg(t.thumb, 120) : "";
+    const art = artOf(t, 120);
     if (art) $("#np-art").src = art; else $("#np-art").removeAttribute("src");
     document.title = t ? `${t.title} · Stemify` : "Stemify";
     if ("mediaSession" in navigator) {
       navigator.mediaSession.metadata = t ? new MediaMetadata({
-        title: t.title, artist: t.artist, album: t.album,
-        artwork: t.thumb ? [{ src: plexImg(t.thumb, 512), sizes: "512x512" }] : [],
+        title: t.title, artist: t.artist, album: t.album, artwork: art ? [{ src: artOf(t, 512), sizes: "512x512" }] : [],
       }) : null;
     }
   },
@@ -501,18 +151,19 @@ const UI = {
     const p = $("#b-play");
     p.innerHTML = E.buffering ? ICON.busy : E.playing ? ICON.pause : ICON.play;
     p.classList.toggle("busy", E.buffering);
+    p.title = E.loading ? `Loading stems ${Math.round(E.loadFrac * 100)}%` : "Play (Space)";
     $("#b-shuffle").classList.toggle("on", S.shuffle);
     $("#b-repeat").innerHTML = S.repeat === "one" ? ICON.repeat1 : ICON.repeat;
     $("#b-repeat").classList.toggle("on", S.repeat !== "off");
     $("#b-repeat").title = `Repeat: ${S.repeat} (R)`;
     $("#speed").value = String(S.speed);
     $("#speed").classList.toggle("on", S.speed !== 1);
-    $("#b-mixer").classList.toggle("on", drawerMode === "mixer");
-    $("#b-queue").classList.toggle("on", drawerMode === "queue");
+    for (const d of ["mixer", "lyrics", "queue"]) $(`#b-${d}`).classList.toggle("on", drawer === d);
+    $("#b-mixer").classList.toggle("dot", S.karaoke);
     if ("mediaSession" in navigator) navigator.mediaSession.playbackState = E.playing ? "playing" : "paused";
   },
   progress() {
-    $("#t-pos").textContent = fmtTime(E.position());
+    $("#t-pos").textContent = E.loading ? `${Math.round(E.loadFrac * 100)}%` : fmtTime(E.position());
     $("#t-dur").textContent = fmtTime(E.duration());
     Wave.draw();
     const d = E.duration();
@@ -522,18 +173,31 @@ const UI = {
   },
   drawer() {
     const d = $("#drawer");
-    d.hidden = !drawerMode;
-    if (drawerMode === "mixer") d.innerHTML = mixerHtml();
-    else if (drawerMode === "queue") d.innerHTML = queueHtml();
+    d.hidden = !drawer;
+    if (drawer) {
+      const tabs = `<nav class="tabs">${["mixer", "lyrics", "queue"].map(k => `<button data-drawer="${k}" class="${drawer === k ? "on" : ""}">${k[0].toUpperCase() + k.slice(1)}</button>`).join("")}
+        <button class="x" data-drawer="" title="Close">×</button></nav>`;
+      d.innerHTML = tabs + `<div id="dbody">${drawer === "mixer" ? mixerHtml() : drawer === "queue" ? queueHtml() : lyricsShell()}</div>`;
+      if (drawer === "lyrics") loadLyrics();
+      if (drawer === "queue") $(".q-item.cur", d)?.scrollIntoView({ block: "center" });
+    }
     this.transport();
   },
 };
+const toggleDrawer = m => { drawer = drawer === m || !m ? null : m; UI.drawer(); };
+
+const mixNames = () => E.entry ? E.entry.stems.map(s => s.name).filter(n => E.names.includes(n)) : [];
+const karaokeHtml = () => `<div class="kara">
+  <button class="chip ${S.karaoke ? "on" : ""}" data-kara title="Karaoke (K)">Karaoke</button>
+  <div class="seg">${[["off", "No vocals"], ["soft", "Soft vocals"], ["on", "Vocals on"]].map(([m, l]) => `<button class="${S.karaokeMode === m ? "on" : ""}" data-kmode="${m}">${l}</button>`).join("")}</div>
+  ${S.karaokeMode === "soft" ? `<label class="note">Soft vocals: <b id="softdb">${S.softDb} dB</b><input type="range" min="-30" max="-3" step="1" value="${S.softDb}" data-softdb></label>` : ""}</div>`;
 
 function mixerHtml() {
-  const names = E.names.filter(Boolean);
-  if (!names.length) return `<h2>Mixer</h2><p class="note">${Q.cur() ? "This track has no stems yet." : "Play something with stems to mix it."}</p>`;
-  const cur = currentPreset(names);
-  return `<h2>Mixer</h2>
+  const names = mixNames();
+  if (!names.length) return `<p class="note">${E.loading ? "Loading stems…" : Q.cur() ? "This track has no stems yet. Right-click it and pick Stem Now." : "Play something with stems to mix it."}</p>`;
+  const cur = currentPreset(names), key = E.entry.key, saved = songMixes[key];
+  const savedNote = saved ? (sameMix(saved, S.mix, names) ? "Using this song's saved mix." : "Changed from this song's saved mix.") : "";
+  return karaokeHtml() + `
     <div class="presets">${PRESETS.map(([label, b], i) => `<button class="chip ${cur === label ? "on" : ""}" data-preset="${i}" ${b(names) ? "" : "disabled"}>${label}</button>`).join("")}</div>
     ${names.map(n => {
       const s = setting(n), g = stemGain(n, names);
@@ -542,68 +206,119 @@ function mixerHtml() {
         <button class="ms solo ${s.solo ? "on" : ""}" data-solo="${esc(n)}" title="Solo">S</button>
         <input type="range" min="0" max="1" step="0.01" value="${s.level}" data-level="${esc(n)}"></div>`;
     }).join("")}
-    <p class="note">The mix carries over to the next track.</p>`;
+    <div class="row mixrow">
+      <button class="btn small" data-savemix>${saved ? "Update saved mix" : "Save mix for this song"}</button>
+      ${saved ? `<button class="btn small" data-forgetmix>Forget</button>` : ""}
+      <button class="btn small" data-mixtopl>Add to stem playlist…</button>
+    </div>
+    <p class="note">${savedNote} ${S.karaoke ? "Karaoke is on, so saved mixes are ignored until you turn it off." : S.keepMix ? "Songs without a saved mix keep this mix." : "Songs without a saved mix start at full mix."}</p>`;
 }
 
 function queueHtml() {
-  if (!Q.items.length) return `<h2>Queue</h2><p class="note">Empty.</p>`;
-  return `<h2>Queue</h2>${Q.items.map((x, i) => `
-    <div class="q-item ${i === Q.i ? "cur" : i < Q.i ? "past" : ""}" data-q="${i}">
-      <img loading="lazy" ${x.t.thumb ? `src="${esc(plexImg(x.t.thumb, 80))}"` : ""} alt="">
-      <div class="tx"><div>${esc(x.t.title)}</div><div>${esc(x.t.artist)}</div></div>
+  if (!Q.items.length) return `<p class="note">Empty.</p>`;
+  const left = Q.items.length - Q.i - 1;
+  return `<div class="row"><span class="note">${plural(left, "track")} up next</span><button class="btn small" data-qclear>Clear</button></div>
+    ${Q.items.map((x, i) => `
+    <div class="q-item ${i === Q.i ? "cur" : i < Q.i ? "past" : ""}" data-q="${i}" draggable="true">
+      ${artOf(x.t, 80) ? `<img loading="lazy" src="${esc(artOf(x.t, 80))}" alt="">` : `<div class="ph"></div>`}
+      <div class="tx"><div>${esc(x.t.title)}${x.mix ? ' <span class="tag">MIX</span>' : ""}</div><div>${esc(x.t.artist)}</div></div>
       ${i === Q.i ? "" : `<button class="x" data-qx="${i}" title="Remove">×</button>`}
     </div>`).join("")}`;
 }
 
-$("#drawer").addEventListener("click", ev => {
-  const b = ev.target.closest("button, .q-item");
+const lyricsShell = () => `<div id="lyrhead">${mixNames().includes("vocals") ? karaokeHtml() : ""}</div><div id="lyr" class="note">Looking for lyrics…</div>`;
+async function loadLyrics() {
+  const t = Q.cur(), box = $("#lyr");
+  Lyr.idx = -1;
+  if (!t) { box.textContent = "Nothing playing."; return; }
+  if (Lyr.id !== t.id) { Lyr.id = t.id; Lyr.data = null; Lyr.data = await lyricsFor(t).catch(() => null); }
+  if (Lyr.id !== t.id || drawer !== "lyrics" || !$("#lyr")) return;
+  const d = Lyr.data, el = $("#lyr");
+  if (!d) { el.textContent = "No lyrics found on LRCLIB."; return; }
+  if (d.instrumental) { el.textContent = "Instrumental."; return; }
+  el.className = d.lines ? "synced" : "plain";
+  el.innerHTML = d.lines ? d.lines.map((l, i) => `<p data-li="${i}">${esc(l.text) || "♪"}</p>`).join("") : esc(d.plain || "").replace(/\n/g, "<br>");
+}
+function tickLyrics() {
+  const lines = Lyr.data?.lines;
+  if (drawer !== "lyrics" || !lines || Lyr.id !== Q.cur()?.id) return;
+  const i = lineAt(lines, E.position());
+  if (i === Lyr.idx) return;
+  Lyr.idx = i;
+  $$("#lyr p.on").forEach(p => p.classList.remove("on"));
+  const p = $(`#lyr p[data-li="${i}"]`);
+  if (p) { p.classList.add("on"); p.scrollIntoView({ block: "center", behavior: "smooth" }); }
+}
+
+const d$ = $("#drawer");
+d$.addEventListener("click", ev => {
+  const b = ev.target.closest("button, .q-item, #lyr p");
   if (!b) return;
-  const names = E.names.filter(Boolean);
-  if (b.dataset.preset) applyPreset(PRESETS[+b.dataset.preset][1], names);
-  else if (b.dataset.mute) { const n = b.dataset.mute; S.mix[n] = { ...setting(n), muted: !setting(n).muted }; mixChanged(); }
-  else if (b.dataset.solo) { const n = b.dataset.solo; S.mix[n] = { ...setting(n), solo: !setting(n).solo }; mixChanged(); }
-  else if (b.dataset.qx) Q.remove(+b.dataset.qx);
-  else if (b.dataset.q) Q.jump(+b.dataset.q);
+  const names = mixNames(), ds = b.dataset;
+  if (ds.drawer != null) toggleDrawer(ds.drawer || null);
+  else if (ds.preset) applyPreset(PRESETS[+ds.preset][1], names);
+  else if (ds.mute) { S.mix[ds.mute] = { ...setting(ds.mute), muted: !setting(ds.mute).muted }; mixChanged(); }
+  else if (ds.solo) { S.mix[ds.solo] = { ...setting(ds.solo), solo: !setting(ds.solo).solo }; mixChanged(); }
+  else if ("kara" in ds) setKaraoke(!S.karaoke);
+  else if (ds.kmode) setKaraokeMode(ds.kmode);
+  else if ("savemix" in ds) { saveSongMix(E.entry.key, S.mix); toast("Saved the mix for this song"); UI.drawer(); }
+  else if ("forgetmix" in ds) { forgetSongMix(E.entry.key); UI.drawer(); }
+  else if ("mixtopl" in ds) { const r = b.getBoundingClientRect(); pickPlaylist(r.left, r.bottom, [Q.cur()], S.mix); }
+  else if ("qclear" in ds) Q.clear();
+  else if (ds.qx) Q.remove(+ds.qx);
+  else if (ds.q) Q.jump(+ds.q);
+  else if (ds.li) E.seek(Lyr.data.lines[+ds.li].t);
 });
-$("#drawer").addEventListener("input", ev => {
-  const n = ev.target.dataset.level;
-  if (!n) return;
-  S.mix[n] = { ...setting(n), level: +ev.target.value };
-  E.applyGains(); Wave.draw(); save();
+d$.addEventListener("input", ev => {
+  const ds = ev.target.dataset;
+  if (ds.level) { S.mix[ds.level] = { ...setting(ds.level), level: +ev.target.value }; E.applyGains(); Wave.draw(); save(); }
+  if (ds.softdb) $("#softdb").textContent = ev.target.value + " dB";
 });
-$("#drawer").addEventListener("change", ev => { if (ev.target.dataset.level) UI.drawer(); });
+d$.addEventListener("change", ev => {
+  if (ev.target.dataset.level) UI.drawer();
+  if (ev.target.dataset.softdb) setKaraokeMode("soft", +ev.target.value);
+});
+{
+  let from = -1;
+  d$.addEventListener("dragstart", ev => { from = +ev.target.closest("[data-q]")?.dataset.q; });
+  d$.addEventListener("dragover", ev => { if (ev.target.closest("[data-q]")) ev.preventDefault(); });
+  d$.addEventListener("drop", ev => { const to = ev.target.closest("[data-q]"); if (to && from >= 0) { ev.preventDefault(); Q.move(from, +to.dataset.q); } from = -1; });
+}
 
 $("#b-play").innerHTML = ICON.play;
 $("#b-prev").innerHTML = ICON.prev;
 $("#b-next").innerHTML = ICON.next;
 $("#b-shuffle").innerHTML = ICON.shuffle;
 $("#b-mixer").innerHTML = ICON.mixer;
+$("#b-lyrics").innerHTML = ICON.lyrics;
 $("#b-queue").innerHTML = ICON.queue;
 $("#speed").innerHTML = SPEEDS.map(v => `<option value="${v}">${v}×</option>`).join("");
 $("#volume").value = S.volume;
 
-const togglePlay = () => { if (!Q.cur()) return; E.playing ? E.pause() : E.play(); UI.transport(); save(); };
-const toggleDrawer = m => { drawerMode = drawerMode === m ? null : m; UI.drawer(); };
+const togglePlay = () => { if (!Q.cur()) return; E.playing ? E.pause() : E.play(); saveQueue(); };
 $("#b-play").onclick = togglePlay;
 $("#b-prev").onclick = () => Q.prev();
 $("#b-next").onclick = () => Q.next();
 $("#b-shuffle").onclick = () => Q.toggleShuffle();
 $("#b-repeat").onclick = () => Q.cycleRepeat();
 $("#b-mixer").onclick = () => toggleDrawer("mixer");
+$("#b-lyrics").onclick = () => toggleDrawer("lyrics");
 $("#b-queue").onclick = () => toggleDrawer("queue");
 $("#speed").onchange = ev => setSpeed(+ev.target.value);
 $("#volume").oninput = ev => { S.volume = +ev.target.value; E.applyGains(); save(); };
+$(".np").onclick = () => { const t = Q.cur(); if (t?.albumKey) location.hash = `#/album/${t.srv}:${t.albumKey}`; };
 
 if ("mediaSession" in navigator) {
   const ms = navigator.mediaSession;
-  ms.setActionHandler("play", () => { E.play(); UI.transport(); });
-  ms.setActionHandler("pause", () => { E.pause(); UI.transport(); });
+  ms.setActionHandler("play", () => E.play());
+  ms.setActionHandler("pause", () => E.pause());
   ms.setActionHandler("previoustrack", () => Q.prev());
   ms.setActionHandler("nexttrack", () => Q.next());
   try { ms.setActionHandler("seekto", d => E.seek(d.seekTime)); } catch {}
 }
 
 document.addEventListener("keydown", ev => {
+  if (ev.key === "Escape") return Menu.close();
   if (ev.target.closest("input, select, textarea") || ev.metaKey || ev.ctrlKey || ev.altKey) return;
   const k = ev.key.toLowerCase();
   if (k === " ") { ev.preventDefault(); togglePlay(); }
@@ -612,247 +327,395 @@ document.addEventListener("keydown", ev => {
   else if (k === "s") Q.toggleShuffle();
   else if (k === "r") Q.cycleRepeat();
   else if (k === "m") toggleDrawer("mixer");
+  else if (k === "l") toggleDrawer("lyrics");
   else if (k === "q") toggleDrawer("queue");
+  else if (k === "k") setKaraoke(!S.karaoke);
   else if (k === "]" || k === "[") { const i = SPEEDS.indexOf(S.speed) + (k === "]" ? 1 : -1); if (SPEEDS[i]) setSpeed(SPEEDS[i]); }
 });
 
 (function frame() {
-  if (E.playing) {
-    $("#t-pos").textContent = fmtTime(E.position());
-    Wave.draw();
-  }
+  if (E.playing && !E.loading) { $("#t-pos").textContent = fmtTime(E.position()); Wave.draw(); tickLyrics(); }
   requestAnimationFrame(frame);
 })();
-setInterval(() => { if (E.playing) { UI.progress(); save(); } }, 5000);
+setInterval(() => { if (E.playing) { UI.progress(); saveQueue(); } }, 5000);
 
-function toast(msg) {
-  let t = $("#toast");
-  if (!t) {
-    t = document.createElement("div");
-    t.id = "toast";
-    t.style.cssText = "position:fixed;left:50%;bottom:calc(var(--player-h) + 16px);transform:translateX(-50%);background:var(--raised);padding:9px 16px;border-radius:999px;box-shadow:0 8px 30px #0008;z-index:9;transition:opacity .3s";
-    document.body.append(t);
-  }
-  t.textContent = msg;
-  t.style.opacity = 1;
-  clearTimeout(t._h);
-  t._h = setTimeout(() => { t.style.opacity = 0; }, 2200);
-}
-
-// ---- views -----------------------------------------------------------------------------
-
-const view = $("#view");
-let lists = {}; // track lists rendered in the current view, by id
-let routeSeq = 0;
-
-function markPlaying() {
-  const id = Q.cur()?.id;
-  view.querySelectorAll("tr[data-id]").forEach(r => r.classList.toggle("playing", r.dataset.id === id));
-}
-
-function card(href, img, t, s, round = false) {
-  return `<a class="card ${round ? "round" : ""}" href="${href}">${img ? `<img loading="lazy" src="${esc(img)}" alt="">` : `<div class="ph"></div>`}
-    <div class="t">${esc(t)}</div><div class="s">${esc(s || "")}</div></a>`;
-}
-
-function trackTable(listId, tracks, { numbers = false, album = true } = {}) {
-  lists[listId] = tracks;
-  return `<table class="tracks"><tbody>${tracks.map((t, i) => `
-    <tr data-list="${listId}" data-i="${i}" data-id="${esc(t.id)}">
-      <td class="n">${numbers ? t.index ?? i + 1 : i + 1}</td>
-      <td class="ti">${esc(t.title)}${Stems.find(t) ? '<span class="stem-dot">STEMS</span>' : ""}${album ? `<small>${esc([t.artist, t.album].filter(Boolean).join(" · "))}</small>` : ""}</td>
-      <td class="d">${fmtTime(t.duration / 1000)}</td>
-      <td><button class="add" data-add="${i}" title="Add to queue (shift: play next)">+</button></td>
-    </tr>`).join("")}</tbody></table>`;
-}
-
-view.addEventListener("click", ev => {
-  const add = ev.target.closest("[data-add]");
-  const row = ev.target.closest("tr[data-list]");
-  if (add && row) { Q.add([lists[row.dataset.list][+add.dataset.add]], ev.shiftKey); return; }
-  if (row) { Q.playList(lists[row.dataset.list], +row.dataset.i, false); return; }
-  const act = ev.target.closest("[data-play]");
-  if (act) {
-    const tracks = lists[act.dataset.play];
-    if (act.dataset.mode === "queue") Q.add(tracks);
-    else if (act.dataset.mode === "stem") stemNow(tracks);
-    else Q.playList(tracks, act.dataset.mode === "shuffle" ? -1 : 0, act.dataset.mode === "shuffle");
-  }
+on("track", () => { UI.track(); UI.transport(); UI.progress(); Wave.load(Q.cur()); marks(); if (drawer) UI.drawer(); });
+on("transport", () => UI.transport());
+on("progress", () => UI.progress());
+on("loading", () => { UI.transport(); UI.progress(); });
+on("attached", () => { UI.progress(); if (drawer === "mixer") UI.drawer(); });
+on("queue", () => { if (drawer === "queue") UI.drawer(); });
+on("mix", () => {
+  Wave.draw(); UI.transport();
+  if (drawer === "mixer") UI.drawer();
+  else if (drawer === "lyrics" && $("#lyrhead")) $("#lyrhead").innerHTML = mixNames().includes("vocals") ? karaokeHtml() : "";
 });
 
-async function stemNow(tracks) {
-  const seen = new Set();
-  const paths = tracks.filter(t => t.file && !Stems.find(t) && !seen.has(t.file) && seen.add(t.file)).map(t => t.file);
-  if (!paths.length) return toast("Already has stems");
-  try {
-    const r = await fetch(stemBase() + "/api/stem" + stemQuery(), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paths }) });
-    const j = await r.json().catch(() => ({}));
-    toast(r.ok ? `Stemming ${paths.length === 1 ? "1 track" : paths.length + " tracks"} next` : `Couldn't queue: ${j.error || r.status}`);
-  } catch (e) { toast("Couldn't queue: " + e.message); }
+// ---- live stem status ---------------------------------------------------------------------------
+
+const base = p => (p || "").split("/").pop().replace(/\.[^.]+$/, "");
+const badge = t => {
+  if (Stems.find(t)) return '<span class="tag stems">STEMS</span>';
+  const s = Live.state(t);
+  return s ? `<span class="tag ${s}">${{ queued: "QUEUED", stemming: "STEMMING", failed: "FAILED" }[s]}</span>` : "";
+};
+// Refreshes playing, stem and download markers in whatever is on screen.
+function marks() {
+  const id = Q.cur()?.id;
+  for (const r of $$("tr[data-list]", view)) {
+    const t = lists[r.dataset.list]?.[+r.dataset.i];
+    if (!t) continue;
+    r.classList.toggle("playing", t.id === id);
+    r.classList.toggle("nostem", !Stems.find(t));
+    const b = $(".badge", r), html = badge(t);
+    if (b.innerHTML !== html) b.innerHTML = html;
+    $(".off", r).innerHTML = Offline.has(t.id) ? ICON.download : "";
+  }
+  for (const c of $$(".card[data-nk]", view)) c.classList.toggle("nostem", !stemSets()[c.dataset.kind]?.has(c.dataset.nk));
+}
+function liveStatus() {
+  const el = $("#live"), n = Live.pending.size;
+  el.hidden = !Live.busy;
+  el.innerHTML = Live.current ? `<span class="pulse"></span>Stemming “${esc(base(Live.current))}”${n ? ` · ${n} queued` : ""}` : n ? `${n} queued for stems` : "";
+}
+on("live", () => { marks(); liveStatus(); });
+on("stems", () => { stemSetCache = null; marks(); });
+on("offline", () => marks());
+on("newstems", fresh => {
+  toast(fresh.length === 1 ? `Stems ready: ${base(fresh[0].key)}` : `Stems ready for ${fresh.length} tracks`);
+  const t = Q.cur();
+  if (t && !E.entry && !E.loading && Stems.find(t)) Q.reload();
+});
+document.addEventListener("visibilitychange", () => { if (!document.hidden) Live.poll(); });
+
+// ---- context menu -------------------------------------------------------------------------------
+
+const Menu = {
+  el: null,
+  open(x, y, items) {
+    this.close();
+    items = items.filter(Boolean);
+    const m = document.createElement("div");
+    m.id = "menu";
+    m.innerHTML = items.map((it, i) => it === "-" ? "<hr>" : `<button data-mi="${i}" ${it.run ? "" : "disabled"}>${esc(it.label)}</button>`).join("");
+    document.body.append(m);
+    const r = m.getBoundingClientRect();
+    m.style.left = Math.max(8, Math.min(x, innerWidth - r.width - 8)) + "px";
+    m.style.top = Math.max(8, Math.min(y, innerHeight - r.height - 8)) + "px";
+    m.onclick = ev => { const b = ev.target.closest("[data-mi]"); if (b) { const it = items[+b.dataset.mi]; this.close(); it.run(); } };
+    this.el = m;
+  },
+  close() { this.el?.remove(); this.el = null; },
+};
+addEventListener("pointerdown", ev => { if (Menu.el && !Menu.el.contains(ev.target)) Menu.close(); }, true);
+addEventListener("blur", () => Menu.close());
+view.addEventListener("scroll", () => Menu.close(), { passive: true });
+
+const download = tracks => saveOffline(tracks, m => m && toast(m, 120000));
+function stemItem(tracks) {
+  const need = tracks.filter(t => !Stems.find(t));
+  if (!need.length) return { label: tracks.length === 1 ? "Has stems" : "All have stems" };
+  if (tracks.length === 1) {
+    const s = Live.state(tracks[0]);
+    if (s === "stemming") return { label: "Stemming now…" };
+    if (s === "queued") return { label: "Queued for stems" };
+    if (!tracks[0].file) return { label: "Stem Now (no file path)" };
+  }
+  return { label: tracks.length === 1 ? "Stem Now" : `Stem Now (${need.length})`, run: () => stemNow(tracks) };
+}
+function pickPlaylist(x, y, tracks, mix = null) {
+  const add = p => { addToPlaylist(p, tracks, mix); toast(`Added to “${p.title}”${mix ? " with this mix" : ""}`); };
+  Menu.open(x, y, [
+    { label: "New stem playlist…", run: () => { const n = prompt("Stem playlist name"); if (n?.trim()) add(newPlaylist(n.trim())); } },
+    playlists.length && "-",
+    ...playlists.map(p => ({ label: p.title, run: () => add(p) })),
+  ]);
+}
+function trackMenu(x, y, listId, i) {
+  const t = lists[listId][i], pl = listId.startsWith("spl:") && playlists.find(p => p.id === listId.slice(4));
+  Menu.open(x, y, [
+    { label: "Play", run: () => playFrom(listId, i) },
+    { label: "Play next", run: () => Q.add([listItems[listId]?.[i] || t], true) },
+    { label: "Add to queue", run: () => Q.add([listItems[listId]?.[i] || t]) },
+    "-",
+    stemItem([t]),
+    { label: "Add to stem playlist…", run: () => pickPlaylist(x, y, [t]) },
+    Offline.has(t.id) ? { label: "Remove download", run: () => Offline.remove(t.id).then(() => emit("offline")) }
+      : { label: "Download for offline", run: () => download([t]) },
+    (t.albumKey || t.artistKey) && "-",
+    t.albumKey && { label: "Go to album", run: () => { location.hash = `#/album/${t.srv}:${t.albumKey}`; } },
+    t.artistKey && { label: "Go to artist", run: () => { location.hash = `#/artist/${t.srv}:${t.artistKey}`; } },
+    pl && "-",
+    pl && Q.cur()?.id === t.id && E.entry && { label: "Use the current mix here", run: () => { pl.items[i].mix = JSON.parse(JSON.stringify(S.mix)); savePlaylists(); route(); } },
+    pl && pl.items[i].mix && { label: "Clear this item's mix", run: () => { pl.items[i].mix = null; savePlaylists(); route(); } },
+    pl && { label: "Remove from playlist", run: () => { pl.items.splice(i, 1); pl.updated = Date.now(); savePlaylists(); route(); } },
+  ]);
+}
+async function leaves(srv, key) { return ((await px(srv, `/library/metadata/${key}/allLeaves`)).Metadata || []).map(m => track(srv, m)); }
+function listMenu(x, y, get) {
+  const run = fn => async () => { try { fn(visible(await get())); } catch (e) { toast(e.message); } };
+  Menu.open(x, y, [
+    { label: "Play", run: run(ts => Q.playList(ts, 0, false)) },
+    { label: "Shuffle", run: run(ts => Q.playList(ts, -1, true)) },
+    { label: "Play next", run: run(ts => Q.add(ts, true)) },
+    { label: "Add to queue", run: run(ts => Q.add(ts)) },
+    "-",
+    { label: "Stem Now", run: run(ts => stemNow(ts)) },
+    { label: "Add to stem playlist…", run: run(ts => pickPlaylist(x, y, ts)) },
+    { label: "Download for offline", run: run(ts => download(ts)) },
+  ]);
 }
 
-const playButtons = id => `<div class="actions">
+// ---- views --------------------------------------------------------------------------------------
+
+let lists = {}, listItems = {}, seq = 0, kick = null, genreCache = null;
+const visible = tracks => S.stemsOnly ? tracks.filter(t => (t.t || t) && Stems.find(t.t || t)) : tracks;
+function playFrom(listId, i) {
+  const all = listItems[listId] || lists[listId], pick = all[i];
+  const vis = visible(all);
+  Q.playList(vis.includes(pick) ? vis : all, Math.max(0, (vis.includes(pick) ? vis : all).indexOf(pick)), false);
+}
+
+function card({ href, img: src, t, s = "", round, kind, srv, key }) {
+  const nk = kind === "album" || kind === "artist" ? nameKey(t) : "";
+  const hide = nk && !stemSets()[kind].has(nk);
+  return `<a class="card ${round ? "round" : ""} ${hide ? "nostem" : ""}" href="${href}" ${kind ? `data-kind="${kind}" data-srv="${esc(srv)}" data-key="${esc(key)}"` : ""} ${nk ? `data-nk="${esc(nk)}"` : ""}>
+    ${src ? `<img loading="lazy" src="${esc(src)}" alt="">` : `<div class="ph"></div>`}<div class="t">${esc(t)}</div><div class="s">${esc(s)}</div></a>`;
+}
+const albumCard = m => card({ href: `#/album/${m._srv}:${m.ratingKey}`, img: img(m._srv, m.thumb), t: m.title, s: [m.parentTitle, m.year].filter(Boolean).join(" · "), kind: "album", srv: m._srv, key: m.ratingKey });
+const artistCard = m => card({ href: `#/artist/${m._srv}:${m.ratingKey}`, img: img(m._srv, m.thumb), t: m.title, round: true, kind: "artist", srv: m._srv, key: m.ratingKey });
+
+const rowHtml = (listId, t, i, { numbers, album = true, mix } = {}) => `
+  <tr data-list="${listId}" data-i="${i}" class="${Stems.find(t) ? "" : "nostem"} ${Q.cur()?.id === t.id ? "playing" : ""}">
+    <td class="n">${numbers ? t.index ?? i + 1 : i + 1}</td>
+    <td class="ti">${esc(t.title)}<span class="badge">${badge(t)}</span>${mix ? '<span class="tag">MIX</span>' : ""}${album ? `<small>${esc([t.artist, t.album].filter(Boolean).join(" · "))}</small>` : ""}</td>
+    <td class="off">${Offline.has(t.id) ? ICON.download : ""}</td>
+    <td class="d">${fmtTime(t.duration / 1000)}</td>
+    <td class="acts"><button data-add title="Add to queue (shift: play next)">+</button><button data-menu title="More">${ICON.more}</button></td>
+  </tr>`;
+function trackTable(listId, tracks, opts = {}) {
+  lists[listId] = tracks;
+  if (!tracks.length) return `<p class="empty-msg">Nothing here.</p>`;
+  return `<table class="tracks"><tbody>${tracks.map((t, i) => rowHtml(listId, t, i, { ...opts, mix: listItems[listId]?.[i]?.mix })).join("")}</tbody></table>
+    <p class="empty-msg only-stems">None of these have stems yet.</p>`;
+}
+
+const stemsChip = () => `<button class="chip ${S.stemsOnly ? "on" : ""}" data-stemsonly title="Only show songs with stems">Stems only</button>`;
+function sortControl(screen) {
+  const st = sortState(screen);
+  return `<div class="sort"><select data-sort="${screen}" title="Sort">${st.opts.map((o, i) => `<option value="${i}" ${i === st.i ? "selected" : ""}>${o[0]}</option>`).join("")}</select>
+    ${st.random ? `<button class="chip" data-reshuffle title="Shuffle again">${ICON.shuffle}</button>`
+      : `<button class="chip" data-sortdir="${screen}" title="Flip order">${st.desc ? st.o[4] : st.o[3]}</button>`}</div>`;
+}
+const bar = (title, { sort, filter = true, extra = "" } = {}) =>
+  `<div class="bar"><h1>${esc(title)}</h1><span class="sub" id="count"></span><span class="grow"></span>${extra}${filter ? stemsChip() : ""}${sort ? sortControl(sort) : ""}</div>`;
+const actions = id => `<div class="actions">
   <button class="btn primary" data-play="${id}">${ICON.play} Play</button>
   <button class="btn" data-play="${id}" data-mode="shuffle">${ICON.shuffle} Shuffle</button>
-  <button class="btn" data-play="${id}" data-mode="queue">${ICON.queue} Add to queue</button>
-  <button class="btn" data-play="${id}" data-mode="stem">Stem Now</button></div>`;
+  <button class="btn" data-play="${id}" data-mode="stem">Stem Now</button>
+  <button class="btn icon" data-listmenu="${id}" title="More">${ICON.more}</button></div>`;
+const hero = (src, kind, title, sub, id, round) => `<div class="hero">${src ? `<img src="${esc(src)}" alt="" ${round ? 'class="round"' : ""}>` : `<div class="ph ${round ? "round" : ""}"></div>`}
+  <div class="meta"><div class="kind">${kind}</div><h1>${esc(title)}</h1><div class="sub">${sub}</div>${id ? actions(id) : ""}</div></div>`;
 
 function needPlex() {
-  view.innerHTML = `<h1>Welcome</h1><p class="sub">Sign in to Plex in <a href="#/settings" style="color:var(--accent)">Settings</a> to browse your library, or open <a href="#/stems" style="color:var(--accent)">Stems only</a>.</p>`;
+  view.innerHTML = `<h1>Welcome</h1><p class="sub">Add a Plex server in <a class="link" href="#/settings">Settings</a> to browse your library, or <a class="link" href="#/stems">browse the stems</a> on their own.</p>`;
 }
+const splitKey = arg => { const i = arg.lastIndexOf(":"); return [arg.slice(0, i), arg.slice(i + 1)]; };
+const count = (n, w) => { const c = $("#count"); if (c) c.textContent = n ? plural(n, w) : ""; };
 
-// Grid of Plex items, loaded 120 at a time as you scroll.
-async function pagedGrid(seq, path, params, cardFn) {
-  const grid = $(".grid", view), more = document.createElement("div");
+// Appends pages from a Pager as you scroll. `html(items, offset)` renders a page.
+async function paged(mySeq, target, pager, size, html, word) {
+  const more = document.createElement("div");
   more.className = "more";
-  grid.after(more);
-  let start = 0, total = Infinity, busy = false;
+  (target.closest("table") || target).after(more);
+  let busy = false, shown = 0;
   const next = async () => {
-    if (busy || start >= total || seq !== routeSeq) return;
+    if (busy || pager.done || mySeq !== seq) return;
     busy = true;
-    const mc = await px(path, { ...params, "X-Plex-Container-Start": start, "X-Plex-Container-Size": 120 });
-    if (seq !== routeSeq) return;
-    total = mc.totalSize ?? mc.size ?? 0;
-    const items = mc.Metadata || [];
-    start += items.length;
-    if (!items.length) total = start;
-    grid.insertAdjacentHTML("beforeend", items.map(cardFn).join(""));
-    if (!start) grid.outerHTML = `<p class="empty-msg">Nothing here.</p>`;
+    let items;
+    try { items = await pager.next(size); }
+    catch (e) { more.textContent = e.message; busy = false; return; }
+    if (mySeq !== seq) return;
+    target.insertAdjacentHTML("beforeend", html(items, shown));
+    shown += items.length;
+    count(pager.total, word);
     busy = false;
-    if (more.getBoundingClientRect().top < innerHeight * 1.5) next();
+    if (pager.done && !shown) more.outerHTML = `<p class="empty-msg">Nothing here.</p>`;
+    else if (!pager.done && more.getBoundingClientRect().top < innerHeight * 1.5) next();
   };
+  kick = next;
   new IntersectionObserver(es => { if (es[0].isIntersecting) next(); }, { root: view, rootMargin: "600px" }).observe(more);
   await next();
 }
+const secPath = s => `/library/sections/${s.sec}/all`;
 
-const albumCard = m => card(`#/album/${m.ratingKey}`, plexImg(m.thumb), m.title, [m.parentTitle, m.year].filter(Boolean).join(" · "));
+async function genres() {
+  if (genreCache && Date.now() - genreCache.at < 10 * 60e3) return genreCache.list;
+  const by = new Map();
+  for (const g of await everything(sources(), s => `/library/sections/${s.sec}/genre`, { type: 9 })) {
+    const k = g.title.toLowerCase();
+    if (!by.has(k)) by.set(k, { title: g.title, srcs: [] });
+    const src = sources().find(s => s.srv.id === g._srv && s.sec === g._sec);
+    by.get(k).srcs.push({ ...src, params: { genre: g.key.match(/(\d+)\D*$/)?.[1] ?? g.key } });
+  }
+  genreCache = { at: Date.now(), list: [...by.values()].sort((a, b) => a.title.localeCompare(b.title)) };
+  return genreCache.list;
+}
+const hue = s => [...s].reduce((h, c) => (h * 31 + c.charCodeAt(0)) % 360, 7);
 
 const routes = {
-  async albums(seq) {
-    if (!S.plex) return needPlex();
-    const sec = await musicSection();
-    view.innerHTML = `<div class="bar"><h1>Albums</h1>
-      <select id="sort">${[["titleSort", "Title"], ["addedAt:desc", "Recently added"], ["year:desc", "Year"], ["artist.titleSort", "Artist"]]
-        .map(([v, l]) => `<option value="${v}" ${S.albumSort === v ? "selected" : ""}>${l}</option>`).join("")}</select></div><div class="grid"></div>`;
-    $("#sort").onchange = ev => { S.albumSort = ev.target.value; save(); route(); };
-    await pagedGrid(seq, `/library/sections/${sec}/all`, { type: 9, sort: S.albumSort }, albumCard);
+  async albums(my) {
+    const srcs = sources();
+    if (!srcs.length) return needPlex();
+    view.innerHTML = bar("Albums", { sort: "albums" }) + `<div class="grid"></div>`;
+    await paged(my, $(".grid", view), new Pager(srcs, secPath, { type: 9, sort: sortState("albums").param }), 120, ms => ms.map(albumCard).join(""), "album");
   },
-  async artists(seq) {
-    if (!S.plex) return needPlex();
-    const sec = await musicSection();
-    view.innerHTML = `<div class="bar"><h1>Artists</h1></div><div class="grid"></div>`;
-    await pagedGrid(seq, `/library/sections/${sec}/all`, { type: 8, sort: "titleSort" },
-      m => card(`#/artist/${m.ratingKey}`, plexImg(m.thumb), m.title, "", true));
+  async artists(my) {
+    const srcs = sources();
+    if (!srcs.length) return needPlex();
+    view.innerHTML = bar("Artists", { sort: "artists" }) + `<div class="grid"></div>`;
+    await paged(my, $(".grid", view), new Pager(srcs, secPath, { type: 8, sort: sortState("artists").param }), 120, ms => ms.map(artistCard).join(""), "artist");
   },
-  async playlists() {
-    if (!S.plex) return needPlex();
-    const pls = (await px("/playlists", { playlistType: "audio" })).Metadata || [];
-    view.innerHTML = `<div class="bar"><h1>Playlists</h1></div>` + (pls.length
-      ? `<div class="grid">${pls.map(p => card(`#/playlist/${p.ratingKey}`, plexImg(p.composite || p.thumb), p.title, `${p.leafCount} tracks`)).join("")}</div>`
-      : `<p class="empty-msg">No music playlists.</p>`);
+  async songs(my) {
+    const srcs = sources();
+    if (!srcs.length) return needPlex();
+    view.innerHTML = bar("Songs", { sort: "songs", extra: `<button class="chip" data-shuffleall>${ICON.shuffle} Shuffle all</button>` })
+      + `<table class="tracks"><tbody></tbody></table><p class="empty-msg only-stems">No songs with stems loaded yet. Scroll for more.</p>`;
+    lists.songs = [];
+    const size = S.stemsOnly ? 1000 : 150;
+    await paged(my, $("tbody", view), new Pager(srcs, secPath, { type: 10, sort: sortState("songs").param }, size), size, (ms, off) => {
+      const ts = ms.map(m => track(m._srv, m));
+      lists.songs.push(...ts);
+      return ts.map((t, i) => rowHtml("songs", t, off + i)).join("");
+    }, "song");
   },
-  async album(seq, key) {
-    const [info, kids] = await Promise.all([px(`/library/metadata/${key}`), px(`/library/metadata/${key}/children`)]);
-    const a = info.Metadata?.[0] || {}, tracks = (kids.Metadata || []).map(plexTrack);
+  async genres(my) {
+    if (!sources().length) return needPlex();
+    view.innerHTML = bar("Genres", { filter: false }) + `<p class="note">Loading…</p>`;
+    const list = await genres();
+    if (my !== seq) return;
+    count(list.length, "genre");
+    view.innerHTML = bar("Genres", { filter: false }) + (list.length ? `<div class="grid genres">${list.map(g =>
+      `<a class="genre" style="--h:${hue(g.title)}" href="#/genre/${encodeURIComponent(g.title)}">${esc(g.title)}</a>`).join("")}</div>` : `<p class="empty-msg">No genres.</p>`);
+    count(list.length, "genre");
+  },
+  async genre(my, title) {
+    const g = (await genres()).find(x => x.title === title);
+    if (my !== seq) return;
+    if (!g) { view.innerHTML = `<h1>${esc(title)}</h1><p class="empty-msg">No albums in this genre.</p>`; return; }
+    view.innerHTML = bar(g.title, { sort: "albums", extra: `<button class="chip" data-genreplay="shuffle">${ICON.shuffle} Shuffle</button>` }) + `<div class="grid"></div>`;
+    view.dataset.genre = g.title;
+    await paged(my, $(".grid", view), new Pager(g.srcs, secPath, { type: 9, sort: sortState("albums").param }), 120, ms => ms.map(albumCard).join(""), "album");
+  },
+  async playlists(my) {
+    const st = sortState("playlists");
+    view.innerHTML = bar("Playlists", { sort: "playlists", filter: false })
+      + `<div class="bar sm"><h2>Stem playlists</h2><button class="chip" data-newpl>+ New</button></div>`
+      + (playlists.length ? `<div class="grid">${playlists.map(p => card({ href: `#/stemplaylist/${p.id}`, img: artOf(p.items[0]?.track, 300), t: p.title, s: plural(p.items.length, "track") })).join("")}</div>`
+        : `<p class="note">Stem playlists remember a mix for each song. Right-click any song to add it.</p>`)
+      + `<h2>Plex playlists</h2><div id="plexpl"><p class="note">${liveServers().length ? "Loading…" : "No Plex server set up."}</p></div>`;
+    if (!liveServers().length) return;
+    let pls = await everything(liveServers().map(srv => ({ srv })), "/playlists", { playlistType: "audio" });
+    if (my !== seq) return;
+    pls = st.random ? pls.sort(() => Math.random() - 0.5) : pls.sort(comparator(st.param));
+    count(pls.length + playlists.length, "playlist");
+    $("#plexpl").innerHTML = pls.length ? `<div class="grid">${pls.map(p => card({ href: `#/playlist/${p._srv}:${p.ratingKey}`, img: img(p._srv, p.composite || p.thumb), t: p.title, s: plural(p.leafCount || 0, "track") })).join("")}</div>`
+      : `<p class="empty-msg">No music playlists.</p>`;
+  },
+  async album(my, arg) {
+    const [srv, key] = splitKey(arg);
+    const [info, kids] = await Promise.all([px(srv, `/library/metadata/${key}`), px(srv, `/library/metadata/${key}/children`)]);
+    if (my !== seq) return;
+    const a = info.Metadata?.[0] || {}, tracks = sortTracks((kids.Metadata || []).map(m => track(srv, m)), sortState("album"));
     const stems = tracks.filter(t => Stems.find(t)).length;
-    view.innerHTML = `<div class="hero"><img src="${esc(plexImg(a.thumb, 420))}" alt="">
-      <div class="meta"><div class="kind">Album</div><h1>${esc(a.title)}</h1>
-      <div class="sub"><a href="#/artist/${a.parentRatingKey}">${esc(a.parentTitle)}</a>${a.year ? " · " + a.year : ""} · ${tracks.length} tracks${stems ? ` · ${stems} with stems` : ""}</div>
-      ${playButtons("album")}</div></div>${trackTable("album", tracks, { numbers: true, album: false })}`;
+    view.innerHTML = hero(img(srv, a.thumb, 420), "Album", a.title,
+      `<a href="#/artist/${srv}:${a.parentRatingKey}">${esc(a.parentTitle)}</a>${a.year ? " · " + a.year : ""} · ${plural(tracks.length, "track")}${stems ? ` · ${stems} with stems` : ""}`, "album")
+      + `<div class="bar sm"><span class="grow"></span>${stemsChip()}${sortControl("album")}</div>` + trackTable("album", tracks, { numbers: !sortState("album").o[1], album: false });
   },
-  async artist(seq, key) {
-    const [info, kids] = await Promise.all([px(`/library/metadata/${key}`), px(`/library/metadata/${key}/children`)]);
-    const a = info.Metadata?.[0] || {};
-    view.innerHTML = `<div class="hero"><img src="${esc(plexImg(a.thumb, 420))}" alt="" style="border-radius:50%">
-      <div class="meta"><div class="kind">Artist</div><h1>${esc(a.title)}</h1>${playButtons("artist")}</div></div>
-      <h2>Albums</h2><div class="grid">${(kids.Metadata || []).map(albumCard).join("")}</div>`;
-    lists.artist = [];
-    const all = await px(`/library/metadata/${key}/allLeaves`);
-    if (seq === routeSeq) lists.artist = (all.Metadata || []).map(plexTrack);
+  async artist(my, arg) {
+    const [srv, key] = splitKey(arg);
+    const [info, kids] = await Promise.all([px(srv, `/library/metadata/${key}`), px(srv, `/library/metadata/${key}/children`)]);
+    if (my !== seq) return;
+    const a = info.Metadata?.[0] || {}, albums = (kids.Metadata || []).map(m => (m._srv = srv, m));
+    view.innerHTML = hero(img(srv, a.thumb, 420), "Artist", a.title, plural(albums.length, "album"), "artist", true)
+      + `<div class="bar sm"><h2>Albums</h2><span class="grow"></span>${stemsChip()}</div><div class="grid">${albums.map(albumCard).join("")}</div>
+      <div class="bar sm"><h2>Songs</h2><span class="grow"></span>${sortControl("artist")}</div><div id="artist-songs"><p class="note">Loading…</p></div>`;
+    const tracks = sortTracks(await leaves(srv, key), sortState("artist"));
+    if (my !== seq) return;
+    $("#artist-songs").innerHTML = trackTable("artist", tracks);
   },
-  async playlist(seq, key) {
-    const [info, items] = await Promise.all([px(`/playlists/${key}`), px(`/playlists/${key}/items`)]);
-    const p = info.Metadata?.[0] || {}, tracks = (items.Metadata || []).map(plexTrack);
-    view.innerHTML = `<div class="hero"><img src="${esc(plexImg(p.composite || p.thumb, 420))}" alt="">
-      <div class="meta"><div class="kind">Playlist</div><h1>${esc(p.title)}</h1><div class="sub">${tracks.length} tracks</div>${playButtons("playlist")}</div></div>
-      ${trackTable("playlist", tracks)}`;
+  async playlist(my, arg) {
+    const [srv, key] = splitKey(arg);
+    const [info, items] = await Promise.all([px(srv, `/playlists/${key}`), px(srv, `/playlists/${key}/items`)]);
+    if (my !== seq) return;
+    const p = info.Metadata?.[0] || {}, tracks = sortTracks((items.Metadata || []).map(m => track(srv, m)), sortState("playlist"));
+    view.innerHTML = hero(img(srv, p.composite || p.thumb, 420), "Playlist", p.title, plural(tracks.length, "track"), "playlist")
+      + `<div class="bar sm"><span class="grow"></span>${stemsChip()}${sortControl("playlist")}</div>` + trackTable("playlist", tracks);
   },
-  async search(seq, q) {
-    if (!S.plex) return needPlex();
-    const hubs = (await px("/hubs/search", { query: q, limit: 12, sectionId: await musicSection() })).Hub || [];
-    const hub = t => hubs.find(h => h.type === t)?.Metadata || [];
-    const artists = hub("artist"), albums = hub("album"), tracks = hub("track").map(plexTrack);
-    view.innerHTML = `<div class="bar"><h1>“${esc(q)}”</h1></div>` +
-      (artists.length ? `<h2>Artists</h2><div class="grid">${artists.map(m => card(`#/artist/${m.ratingKey}`, plexImg(m.thumb), m.title, "", true)).join("")}</div>` : "") +
+  async stemplaylist(my, id) {
+    const p = playlists.find(x => x.id === id);
+    if (!p) { view.innerHTML = `<h1>Not found</h1><p class="sub">This stem playlist was deleted.</p>`; return; }
+    const lid = "spl:" + id;
+    listItems[lid] = p.items.map(x => ({ t: x.track, mix: x.mix }));
+    view.innerHTML = hero(artOf(p.items[0]?.track, 420), "Stem playlist", p.title,
+      `${plural(p.items.length, "track")} · ${p.items.filter(x => x.mix).length} with their own mix
+       · <button class="link" data-plrename="${id}">Rename</button> · <button class="link" data-pldelete="${id}">Delete</button>`, lid)
+      + `<div class="bar sm"><span class="grow"></span>${stemsChip()}</div>` + trackTable(lid, p.items.map(x => x.track));
+  },
+  async search(my, q) {
+    const srcs = sources();
+    if (!srcs.length) return needPlex();
+    const hubs = (await Promise.all(srcs.map(s => px(s.srv, "/hubs/search", { query: q, limit: 12, sectionId: s.sec })
+      .then(mc => (mc.Hub || []).map(h => ({ ...h, Metadata: (h.Metadata || []).map(m => (m._srv = s.srv.id, m)) }))).catch(() => [])))).flat();
+    if (my !== seq) return;
+    const hub = t => hubs.filter(h => h.type === t).flatMap(h => h.Metadata);
+    const artists = hub("artist"), albums = hub("album"), tracks = sortTracks(hub("track").map(m => track(m._srv, m)), sortState("search"));
+    view.innerHTML = bar(`“${q}”`) +
+      (artists.length ? `<h2>Artists</h2><div class="grid">${artists.map(artistCard).join("")}</div>` : "") +
       (albums.length ? `<h2>Albums</h2><div class="grid">${albums.map(albumCard).join("")}</div>` : "") +
-      (tracks.length ? `<h2>Songs</h2>${trackTable("search", tracks)}` : "") +
+      (tracks.length ? `<div class="bar sm"><h2>Songs</h2><span class="grow"></span>${sortControl("search")}</div>${trackTable("search", tracks)}` : "") +
       (!artists.length && !albums.length && !tracks.length ? `<p class="empty-msg">No results.</p>` : "");
   },
-  async stems(seq) {
+  async downloads(my) {
+    const recs = (await Offline.all().catch(() => [])).sort((a, b) => b.saved - a.saved);
+    if (my !== seq) return;
+    const total = recs.reduce((a, r) => a + r.size, 0);
+    const est = await navigator.storage?.estimate?.().catch(() => null);
+    view.innerHTML = bar("Downloads", { filter: false, extra: recs.length ? `<button class="chip" data-dlclear>Remove all</button>` : "" })
+      + `<p class="note">${plural(recs.length, "track")}, ${fmtBytes(total)} stored in this browser${est?.quota ? ` (${fmtBytes(est.usage)} of ${fmtBytes(est.quota)} used)` : ""}.
+        Downloads play without the network. ${isSecureContext ? "" : "This page isn't on HTTPS, so the browser may clear them when space runs low."}</p>`
+      + (recs.length ? trackTable("downloads", recs.map(r => r.track)) : `<p class="empty-msg">Nothing downloaded. Right-click a song or album and pick Download for offline.</p>`);
+    count(recs.length, "track");
+  },
+  async stems(my) {
     if (!Stems.entries.length) await Stems.refresh();
+    if (my !== seq) return;
     const all = Stems.entries.map(stemTrack).sort((a, b) => a.id.localeCompare(b.id));
-    view.innerHTML = `<div class="bar"><h1>Stems only</h1><input type="text" id="sf" placeholder="Filter ${all.length} tracks"></div><div id="sl"></div>`;
+    view.innerHTML = bar("All stems", { filter: false, extra: `<input type="text" id="sf" placeholder="Filter ${all.length} tracks">` }) + `<div id="sl"></div>`;
     const render = () => {
       const f = $("#sf").value.toLowerCase();
       const hits = f ? all.filter(t => t.stem.key.toLowerCase().includes(f)) : all;
-      $("#sl").innerHTML = (hits.length ? trackTable("stems", hits.slice(0, 400)) : `<p class="empty-msg">${Stems.ok ? "No matches." : "Can't reach stemserve. Check Settings."}</p>`) +
-        (hits.length > 400 ? `<p class="note">Showing 400 of ${hits.length}. Filter to narrow it down.</p>` : "");
-      markPlaying();
+      $("#sl").innerHTML = (hits.length ? trackTable("stems", hits.slice(0, 400)) : `<p class="empty-msg">${Stems.ok ? "No matches." : "Can't reach stemserve. Check Settings."}</p>`)
+        + (hits.length > 400 ? `<p class="note">Showing 400 of ${hits.length}. Filter to narrow it down.</p>` : "");
     };
     $("#sf").oninput = render;
     render();
   },
-  async settings() {
-    const info = await fetch(stemBase() + "/api/info" + stemQuery()).then(r => r.ok ? r.json() : null).catch(() => null);
-    let secs = [];
-    if (S.plex) secs = ((await px("/library/sections").catch(() => ({}))).Directory || []).filter(d => d.type === "artist");
-    view.innerHTML = `<h1>Settings</h1>
-      <h2>Plex</h2><div class="form">
-        <p class="note">${S.plex ? `Plex: <b>${esc(S.plex.env ? "via this server" : S.plex.name && S.plex.name !== S.plex.url ? S.plex.name + " (" + S.plex.url + ")" : S.plex.url)}</b>${S.plex.env ? " (set by the server)" : ""}` : "Not signed in."}</p>
-        <div class="row"><button class="btn primary" id="signin">Sign in with Plex</button>${S.plex ? `<button class="btn" id="signout">Sign out</button>` : ""}<span class="note" id="sstatus"></span></div>
-        ${secs.length > 1 ? `<label>Music library<select id="sec">${secs.map(d => `<option value="${d.key}" ${d.key == S.section ? "selected" : ""}>${esc(d.title)}</option>`).join("")}</select></label>` : ""}
-        <details><summary class="note">Enter a server and token by hand</summary><div class="form" style="margin-top:12px">
-          <label>Server URL<input type="url" id="purl" placeholder="http://10.0.0.2:32400" value="${esc(S.plex?.url || "")}"></label>
-          <label>Token<input type="password" id="ptok" value="${esc(S.plex?.token || "")}"></label>
-          <div class="row"><button class="btn" id="psave">Save</button></div></div></details>
-      </div>
-      <h2>Stem server</h2><div class="form">
-        <p class="note">${info ? `stemserve v${info.version}, ${info.tracks} tracks with stems${info.ffmpeg ? ", Opus available" : ""}.` : "Can't reach stemserve."}</p>
-        <label>URL (blank = this page's server)<input type="url" id="surl" placeholder="${esc(location.origin)}" value="${esc(S.stemUrl)}"></label>
-        <label>Token (if stemserve has TOKEN set)<input type="password" id="stok" value="${esc(S.stemToken)}"></label>
-        <label>Stream format<select id="fmt">${[["opus96", "Opus 96 kbps"], ["opus160", "Opus 160 kbps"], ["opus256", "Opus 256 kbps"], ["flac", "FLAC (original)"]]
-          .map(([v, l]) => `<option value="${v}" ${S.fmt === v ? "selected" : ""}>${l}</option>`).join("")}</select></label>
-        <div class="row"><button class="btn" id="ssave">Save</button></div>
-      </div>
-      <h2>Keys</h2><p class="note">Space play/pause · ←/→ seek 5s (shift 30s) · S shuffle · R repeat · [ ] speed · M mixer · Q queue</p>`;
-    $("#signin").onclick = async () => {
-      const st = $("#sstatus");
-      try { S.plex = await plexSignIn(m => { st.textContent = m; }); S.section = null; save(); route(); }
-      catch (e) { st.textContent = e.message; }
-    };
-    if ($("#signout")) $("#signout").onclick = () => { S.plex = null; S.section = null; save(); route(); };
-    if ($("#sec")) $("#sec").onchange = ev => { S.section = ev.target.value; save(); };
-    $("#psave").onclick = () => {
-      const url = $("#purl").value.trim().replace(/\/+$/, ""), token = $("#ptok").value.trim();
-      S.plex = url && token ? { url, token, name: "" } : null; S.section = null; save(); route();
-    };
-    $("#ssave").onclick = async () => {
-      S.stemUrl = $("#surl").value.trim(); S.stemToken = $("#stok").value.trim(); S.fmt = $("#fmt").value;
-      Stems.etag = null; save(); await Stems.refresh(); route();
-    };
-  },
+  settings: renderSettings,
 };
 
 async function route() {
-  const seq = ++routeSeq;
+  const my = ++seq;
   const [, name = "albums", ...rest] = (location.hash || "#/albums").split("/");
   const arg = decodeURIComponent(rest.join("/"));
-  document.querySelectorAll("#nav a").forEach(a => a.classList.toggle("on", a.dataset.nav === name));
-  lists = {};
+  $$("#nav a").forEach(a => a.classList.toggle("on", a.dataset.nav === name || (a.dataset.nav === "genres" && name === "genre") || (a.dataset.nav === "playlists" && /playlist$/.test(name))));
+  lists = {}; listItems = {}; kick = null;
+  delete view.dataset.genre;
   view.scrollTop = 0;
-  try { await (routes[name] || routes.albums)(seq, arg); }
-  catch (e) { if (seq === routeSeq) view.innerHTML = `<h1>Something went wrong</h1><p class="sub">${esc(e.message)}</p>`; }
-  if (seq === routeSeq) markPlaying();
+  Menu.close();
+  try { await (routes[name] || routes.albums)(my, arg); }
+  catch (e) { if (my === seq) view.innerHTML = `<h1>Something went wrong</h1><p class="sub">${esc(e.message)}</p>`; }
+  if (my === seq) marks();
 }
 addEventListener("hashchange", route);
 $("#search").onsubmit = ev => {
@@ -861,40 +724,213 @@ $("#search").onsubmit = ev => {
   if (q) location.hash = "#/search/" + encodeURIComponent(q);
 };
 
-// Plex from the server's PLEX_URL / PLEX_TOKEN when nothing was signed in by hand, and a
-// local stemserve when this page's own server has none.
-async function autoConnect() {
+view.addEventListener("click", async ev => {
+  const el = ev.target.closest("button, tr[data-list]");
+  if (!el) return;
+  const ds = el.dataset, row = ev.target.closest("tr[data-list]");
+  if ("stemsonly" in ds) { S.stemsOnly = !S.stemsOnly; save(); applyStemsOnly(); return; }
+  if ("sortdir" in ds) { pickSort(ds.sortdir, sortState(ds.sortdir).i); return route(); }
+  if ("reshuffle" in ds) return route();
+  if ("add" in ds && row) return Q.add([listItems[row.dataset.list]?.[+row.dataset.i] || lists[row.dataset.list][+row.dataset.i]], ev.shiftKey);
+  if ("menu" in ds && row) { const r = el.getBoundingClientRect(); return trackMenu(r.left, r.bottom, row.dataset.list, +row.dataset.i); }
+  if (el === row) return playFrom(row.dataset.list, +row.dataset.i);
+  if (ds.play) {
+    const all = listItems[ds.play] || lists[ds.play] || [], tracks = visible(all);
+    if (ds.mode === "stem") return stemNow(all.map(x => x.t || x));
+    if (!tracks.length) return toast(all.length ? "None of these have stems yet" : "Still loading…");
+    return Q.playList(tracks, ds.mode === "shuffle" ? -1 : 0, ds.mode === "shuffle");
+  }
+  if (ds.listmenu) { const r = el.getBoundingClientRect(); return listMenu(r.left, r.bottom, async () => listItems[ds.listmenu] || lists[ds.listmenu] || []); }
+  if ("shuffleall" in ds) {
+    const ts = (await new Pager(sources(), secPath, { type: 10, sort: "random" }, 200).next(200)).map(m => track(m._srv, m));
+    return Q.playList(visible(ts), -1, true);
+  }
+  if (ds.genreplay) {
+    const g = (await genres()).find(x => x.title === view.dataset.genre);
+    const albums = await new Pager(g.srcs, secPath, { type: 9, sort: "random" }, 12).next(12);
+    const ts = (await Promise.all(albums.map(m => leaves(m._srv, m.ratingKey)))).flat();
+    return Q.playList(visible(ts), -1, true);
+  }
+  if ("newpl" in ds) { const n = prompt("Stem playlist name"); if (n?.trim()) { newPlaylist(n.trim()); route(); } return; }
+  if (ds.plrename) { const p = playlists.find(x => x.id === ds.plrename), n = prompt("Rename", p.title); if (n?.trim()) { p.title = n.trim(); savePlaylists(); route(); } return; }
+  if (ds.pldelete) { if (confirm("Delete this stem playlist?")) { playlists.splice(playlists.findIndex(x => x.id === ds.pldelete), 1); savePlaylists(); location.hash = "#/playlists"; } return; }
+  if ("dlclear" in ds) { if (confirm("Remove every download?")) { for (const id of [...Offline.ids]) await Offline.remove(id); emit("offline"); route(); } }
+});
+view.addEventListener("change", ev => {
+  const s = ev.target.dataset.sort;
+  if (s) { pickSort(s, +ev.target.value); route(); }
+});
+view.addEventListener("contextmenu", ev => {
+  const row = ev.target.closest("tr[data-list]"), c = ev.target.closest(".card[data-kind]");
+  if (row) { ev.preventDefault(); trackMenu(ev.clientX, ev.clientY, row.dataset.list, +row.dataset.i); }
+  else if (c) { ev.preventDefault(); listMenu(ev.clientX, ev.clientY, () => leaves(c.dataset.srv, c.dataset.key)); }
+});
+
+// ---- settings -----------------------------------------------------------------------------------
+
+const SECTIONS = [["plex", "Plex"], ["stems", "Stem server"], ["playback", "Playback"], ["karaoke", "Karaoke"], ["look", "Appearance"], ["offline", "Offline"], ["backup", "Backup"], ["keys", "Keys"]];
+const FORMATS = [["opus96", "Opus 96 kbps"], ["opus160", "Opus 160 kbps"], ["opus256", "Opus 256 kbps"], ["flac", "FLAC (original)"]];
+
+function serverHtml(srv) {
+  const dup = srv.mid && S.servers.find(o => o !== srv && o.mid === srv.mid && S.servers.indexOf(o) < S.servers.indexOf(srv));
+  return `<div class="srv"><div class="row"><b>${esc(srv.name || srv.url)}</b>
+      <span class="note">${srv.env ? "through this stemserve (PLEX_URL)" : esc(srv.url)}</span><span class="grow"></span>
+      <button class="btn small" data-refsrv="${esc(srv.id)}">Refresh</button>
+      ${srv.env ? "" : `<button class="btn small" data-rmsrv="${esc(srv.id)}">Remove</button>`}</div>
+    ${dup ? `<p class="note">Same Plex server as ${esc(dup.name)}, which is used instead.</p>`
+      : (srv.sections || []).length ? `<div class="secs">${srv.sections.map(sec => `<label class="check"><input type="checkbox" data-sec="${esc(srv.id)}|${esc(sec.key)}" ${sec.on ? "checked" : ""}>${esc(sec.title)}</label>`).join("")}</div>`
+      : `<p class="note">No music libraries found. Try Refresh.</p>`}</div>`;
+}
+
+function renderSettings() {
+  const theme = THEMES[S.theme] || THEMES.amber;
+  view.innerHTML = `<div class="settings"><nav class="toc">${SECTIONS.map(([id, l]) => `<a href="#/settings" data-jump="${id}">${l}</a>`).join("")}</nav><div class="panes">
+  <section id="set-plex"><h2>Plex</h2>
+    <p class="note">Turn on the music libraries you want. Everything that's on is browsed as one library.</p>
+    <div id="srvs">${S.servers.map(serverHtml).join("") || `<p class="note">No servers yet.</p>`}</div>
+    <div class="row"><button class="btn primary" id="signin">Sign in with Plex</button><span class="note" id="sstatus"></span></div>
+    <details><summary class="note">Add a server by URL and token</summary><div class="form">
+      <label>Server URL<input type="url" id="purl" placeholder="http://10.0.0.2:32400"></label>
+      <label>Token<input type="password" id="ptok"></label>
+      <div class="row"><button class="btn" id="padd">Add server</button></div></div></details>
+  </section>
+  <section id="set-stems"><h2>Stem server</h2><div class="form">
+    <p class="note" id="stem-info">Checking stemserve…</p>
+    <label>URL (blank = this page's server)<input type="url" id="surl" placeholder="${esc(location.origin)}" value="${esc(S.stemUrl)}"></label>
+    <label>Token (if stemserve has TOKEN set)<input type="password" id="stok" value="${esc(S.stemToken)}"></label>
+    <div class="row"><button class="btn" id="ssave">Save and reconnect</button></div></div>
+  </section>
+  <section id="set-playback"><h2>Playback</h2><div class="form">
+    <label>Stem format<select id="fmt">${FORMATS.map(([v, l]) => `<option value="${v}" ${S.fmt === v ? "selected" : ""}>${l}</option>`).join("")}</select></label>
+    <p class="note">Stems are downloaded whole before a song starts. Opus 160 is about 1 MB per stem-minute; FLAC is around eight times that.</p>
+    <label class="check"><input type="checkbox" id="keepmix" ${S.keepMix ? "checked" : ""}>Keep the mix when the next song has no saved mix</label>
+    <div class="row"><span class="note">${plural(Object.keys(songMixes).length, "saved song mix")}</span>${Object.keys(songMixes).length ? `<button class="btn small" id="forgetall">Forget all</button>` : ""}</div></div>
+  </section>
+  <section id="set-karaoke"><h2>Karaoke</h2><div class="form">
+    <label class="check"><input type="checkbox" id="kon" ${S.karaoke ? "checked" : ""}>Karaoke on (K)</label>
+    <label>Vocals in karaoke<select id="kmode">${[["off", "Off"], ["soft", "Soft"], ["on", "Left on (lyrics only)"]].map(([v, l]) => `<option value="${v}" ${S.karaokeMode === v ? "selected" : ""}>${l}</option>`).join("")}</select></label>
+    <label>Soft vocal level: <span id="kdbv">${S.softDb} dB</span><input type="range" id="kdb" min="-30" max="-3" step="1" value="${S.softDb}"></label>
+    <p class="note">Synced lyrics come from LRCLIB, shown in the Lyrics drawer (L).</p></div>
+  </section>
+  <section id="set-look"><h2>Appearance</h2><div class="form">
+    <div class="themes">${Object.entries(THEMES).map(([k, t]) => `<button class="swatch ${S.theme === k ? "on" : ""}" data-theme="${k}" style="background:${t.bg};color:${t.text};border-color:${t.line}"><i style="background:${t.accent}"></i>${k[0].toUpperCase() + k.slice(1)}</button>`).join("")}</div>
+    <div class="row"><label class="check">Accent <input type="color" id="accent" value="${S.accent || theme.accent}"></label>${S.accent ? `<button class="btn small" id="accentreset">Use the theme's</button>` : ""}</div>
+    <label>Custom CSS<textarea id="css" rows="8" spellcheck="false" placeholder=":root { --accent: #7cf; --radius: 4px; }\n.card img { border-radius: 0; }">${esc(S.css)}</textarea></label>
+    <p class="note">Applied live, after the theme. Variables: --bg --panel --raised --line --text --muted --accent --accent-ink --radius --wave --wave-ghost.</p></div>
+  </section>
+  <section id="set-offline"><h2>Offline</h2>
+    <p class="note" id="storage-info">${plural(Offline.ids.size, "track")} downloaded. <a class="link" href="#/downloads">Manage downloads</a></p>
+    ${isSecureContext && navigator.storage?.persist ? `<div class="row"><button class="btn small" id="persist">Ask the browser to keep downloads</button></div>` : `<p class="note">Over plain HTTP the browser may clear downloads when it's short on space.</p>`}
+  </section>
+  <section id="set-backup"><h2>Backup</h2>
+    <p class="note">Settings, saved mixes and stem playlists. The file includes your Plex tokens.</p>
+    <div class="row"><button class="btn" id="export">Export</button><label class="btn">Import<input type="file" id="import" accept="application/json" hidden></label></div>
+  </section>
+  <section id="set-keys"><h2>Keys</h2><p class="note">Space play/pause · ←/→ seek 5s (shift 30s) · S shuffle · R repeat · [ ] speed · M mixer · L lyrics · Q queue · K karaoke · right-click a song or album for more</p></section>
+  </div></div>`;
+
+  // Slow bits fill in after the page is up.
+  fetch(api("/api/info"), { signal: AbortSignal.timeout(5000) }).then(r => r.ok ? r.json() : null).catch(() => null).then(info => {
+    const el = $("#stem-info");
+    if (el) el.textContent = info ? `stemserve v${info.version} at ${stemBase()}, ${info.tracks} tracks with stems${info.ffmpeg ? ", Opus available" : ""}.` : `Can't reach stemserve at ${stemBase()}.`;
+  });
+  navigator.storage?.estimate?.().then(e => { const el = $("#storage-info"); if (el && e?.quota) el.insertAdjacentText("afterbegin", `${fmtBytes(e.usage)} of ${fmtBytes(e.quota)} used. `); }).catch(() => {});
+
+  const again = () => { if (location.hash.startsWith("#/settings")) renderSettings(); };
+  const plexChanged = () => { genreCache = null; save(); };
+  $("#signin").onclick = async () => {
+    const st = $("#sstatus");
+    try { const ok = await signIn(m => { st.textContent = m; }); plexChanged(); toast(`Added ${plural(ok.length, "server")}`); again(); }
+    catch (e) { st.textContent = e.message; }
+  };
+  $("#padd").onclick = async () => {
+    const url = $("#purl").value.trim().replace(/\/+$/, ""), token = $("#ptok").value.trim();
+    if (!url || !token) return toast("Need both a URL and a token");
+    const srv = addServer(manualServer(url, token));
+    try { await refreshServer(srv); } catch (e) { toast(e.message); }
+    plexChanged(); again();
+  };
+  $("#ssave").onclick = async () => {
+    S.stemUrl = $("#surl").value.trim(); S.stemToken = $("#stok").value.trim();
+    Stems.etag = null; save(); await Stems.refresh(); Live.poll(); again();
+  };
+  $("#fmt").onchange = ev => { S.fmt = ev.target.value; save(); };
+  $("#keepmix").onchange = ev => { S.keepMix = ev.target.checked; save(); };
+  if ($("#forgetall")) $("#forgetall").onclick = () => { for (const k of Object.keys(songMixes)) forgetSongMix(k); again(); };
+  $("#kon").onchange = ev => setKaraoke(ev.target.checked);
+  $("#kmode").onchange = ev => setKaraokeMode(ev.target.value);
+  $("#kdb").oninput = ev => { $("#kdbv").textContent = ev.target.value + " dB"; };
+  $("#kdb").onchange = ev => setKaraokeMode(S.karaokeMode, +ev.target.value);
+  $("#accent").oninput = ev => { S.accent = ev.target.value; applyTheme(); save(); };
+  if ($("#accentreset")) $("#accentreset").onclick = () => { S.accent = ""; applyTheme(); save(); again(); };
+  let cssTimer;
+  $("#css").oninput = ev => { clearTimeout(cssTimer); cssTimer = setTimeout(() => { S.css = ev.target.value; applyTheme(); save(); }, 250); };
+  if ($("#persist")) $("#persist").onclick = async () => toast(await navigator.storage.persist() ? "Downloads will be kept" : "The browser said no");
+  $("#export").onclick = () => {
+    const blob = new Blob([JSON.stringify({ stemify: 1, settings: S, mixes: songMixes, playlists }, null, 2)], { type: "application/json" });
+    const a = Object.assign(document.createElement("a"), { href: URL.createObjectURL(blob), download: "stemify-web.json" });
+    a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  };
+  $("#import").onchange = async ev => {
+    try {
+      const j = JSON.parse(await ev.target.files[0].text());
+      if (!j.stemify) throw new Error("Not a Stemify backup");
+      store("stemify-web", { ...j.settings, clientId: S.clientId });
+      if (j.mixes) store("stemify-web-mixes", j.mixes);
+      if (j.playlists) store("stemify-web-playlists", j.playlists);
+      location.reload();
+    } catch (e) { toast(e.message); }
+  };
+  const sv = $(".settings");
+  sv.addEventListener("click", async ev => {
+    const b = ev.target.closest("[data-jump], [data-theme], [data-refsrv], [data-rmsrv]");
+    if (!b) return;
+    const ds = b.dataset;
+    if (ds.jump) { ev.preventDefault(); $("#set-" + ds.jump).scrollIntoView({ behavior: "smooth" }); }
+    else if (ds.theme) { S.theme = ds.theme; S.accent = ""; applyTheme(); save(); again(); }
+    else if (ds.refsrv) { try { await refreshServer(server(ds.refsrv)); toast("Refreshed"); } catch (e) { toast(e.message); } plexChanged(); again(); }
+    else if (ds.rmsrv && confirm("Remove this server?")) { S.servers = S.servers.filter(s => s.id !== ds.rmsrv); plexChanged(); again(); }
+  });
+  sv.addEventListener("change", ev => {
+    const k = ev.target.dataset.sec;
+    if (!k) return;
+    const [id, key] = k.split("|"), sec = server(id)?.sections.find(s => s.key === key);
+    if (sec) { sec.on = ev.target.checked; plexChanged(); }
+  });
+}
+on("mix", () => { if ($("#kon")) $("#kon").checked = S.karaoke; });
+
+// ---- start --------------------------------------------------------------------------------------
+
+// The server's own PLEX_URL / PLEX_TOKEN show up as a server proxied through stemserve, and a
+// local stemserve is tried when this page's server has none.
+async function connect() {
   const ok = await Stems.refresh();
   if (!ok && !Stems.ok && !S.stemUrl && !/^(localhost|127\.0\.0\.1)$/.test(location.hostname)) {
     for (const u of ["http://localhost:8765", "http://127.0.0.1:8765"]) {
       try {
-        const r = await fetch(u + "/api/info" + stemQuery(), { signal: AbortSignal.timeout(1500) });
+        const r = await fetch(u + "/api/info", { signal: AbortSignal.timeout(1500) });
         if (r.ok) { S.stemUrl = u; save(); await Stems.refresh(); break; }
       } catch {}
     }
   }
-  if (!S.plex || S.plex.env) {
-    try {
-      const c = await fetch(stemBase() + "/api/config" + stemQuery()).then(r => r.ok ? r.json() : null);
-      if (c?.plex) S.plex = { token: c.plex.token, url: stemBase() + "/plex", name: "", env: true };
-      else if (S.plex?.env) S.plex = null;
-      save();
-    } catch {}
-  }
+  try {
+    const c = await fetch(api("/api/config"), { signal: AbortSignal.timeout(4000) }).then(r => r.ok ? r.json() : null);
+    if (c?.plex) addServer({ id: "env", env: true, token: c.plex.token, url: stemBase() + "/plex" });
+    else if (c) S.servers = S.servers.filter(s => !s.env);
+  } catch {}
+  await Promise.all(S.servers.filter(s => !s.sections?.length || !s.mid).map(s => refreshServer(s).catch(() => {})));
+  save();
 }
 
-// ---- start -----------------------------------------------------------------------------
-
 (async () => {
-  await Promise.race([autoConnect(), new Promise(r => setTimeout(r, 4000))]);
-  const saved = load(KEY + "-queue");
-  if (saved?.items?.length) {
-    Q.items = saved.items; Q.orig = saved.orig; Q.i = Math.min(saved.i, saved.items.length - 1);
-    uidSeq = Math.max(uidSeq, ...saved.items.map(x => x.uid + 1));
-    if (Q.orig) Q.orig = Q.orig.map(o => Q.items.find(x => x.uid === o.uid) || o);
-    Q.start(saved.pos || 0, false);
-  }
+  applyTheme();
+  applyStemsOnly();
+  await Offline.init();
+  await Promise.race([connect(), new Promise(r => setTimeout(r, 5000))]);
+  Q.restore();
   UI.all();
   route();
+  Live.poll();
   setInterval(() => Stems.refresh(), 5 * 60 * 1000);
 })();
diff --git a/web/index.html b/web/index.html
index 099f482..e451749 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,16 +6,21 @@
 <meta name="theme-color" content="#0d0e12">
 <title>Stemify</title>
 <link rel="stylesheet" href="style.css">
+<style id="theme"></style>
+<style id="custom-css"></style>
 </head>
 <body>
 <div id="app">
   <aside id="nav">
     <div class="brand">stemify</div>
+    <form id="search"><input type="search" name="q" placeholder="Search" autocomplete="off"></form>
     <a href="#/albums" data-nav="albums">Albums</a>
     <a href="#/artists" data-nav="artists">Artists</a>
+    <a href="#/songs" data-nav="songs">Songs</a>
+    <a href="#/genres" data-nav="genres">Genres</a>
     <a href="#/playlists" data-nav="playlists">Playlists</a>
-    <a href="#/stems" data-nav="stems">Stems only</a>
-    <form id="search"><input type="search" name="q" placeholder="Search" autocomplete="off"></form>
+    <a href="#/downloads" data-nav="downloads">Downloads</a>
+    <div id="live" hidden></div>
     <a href="#/settings" data-nav="settings" class="settings-link">Settings</a>
   </aside>
   <main id="view"></main>
@@ -41,8 +46,9 @@
     </div>
   </div>
   <div class="right">
-    <select id="speed" title="Speed"></select>
+    <select id="speed" title="Speed ([ and ])"></select>
     <button id="b-mixer" class="pill" title="Mixer (M)"></button>
+    <button id="b-lyrics" class="pill" title="Lyrics (L)"></button>
     <button id="b-queue" class="pill" title="Queue (Q)"></button>
     <input id="volume" type="range" min="0" max="1" step="0.01" title="Volume">
   </div>
diff --git a/web/lyrics.js b/web/lyrics.js
new file mode 100644
index 0000000..573b1b3
--- /dev/null
+++ b/web/lyrics.js
@@ -0,0 +1,46 @@
+// Synced lyrics from LRCLIB, same lookup as the iOS app: exact match first, then a search.
+
+const cache = new Map();
+
+function parse(lrc) {
+  const out = [];
+  for (const line of (lrc || "").split("\n")) {
+    const stamps = [...line.matchAll(/\[(\d+):(\d+(?:\.\d+)?)\]/g)];
+    if (!stamps.length) continue;
+    const text = line.replace(/\[[^\]]*\]/g, "").trim();
+    for (const m of stamps) out.push({ t: +m[1] * 60 + +m[2], text });
+  }
+  return out.sort((a, b) => a.t - b.t);
+}
+
+// -> {lines: [{t, text}] | null, plain: string | null, instrumental: bool} or null if not found.
+export async function lyricsFor(t) {
+  const id = t.id;
+  if (cache.has(id)) return cache.get(id);
+  const p = (async () => {
+    const q = { track_name: t.title, artist_name: t.artist, album_name: t.album };
+    if (t.duration) q.duration = Math.round(t.duration / 1000);
+    const get = async (path, params) => {
+      const r = await fetch(`https://lrclib.net${path}?${new URLSearchParams(params)}`, { signal: AbortSignal.timeout(8000) });
+      return r.ok ? r.json() : null;
+    };
+    let hit = await get("/api/get", q).catch(() => null);
+    if (!hit) {
+      const list = await get("/api/search", { track_name: t.title, artist_name: t.artist }).catch(() => null) || [];
+      hit = list.find(x => x.syncedLyrics) || list[0] || null;
+    }
+    if (!hit) return null;
+    return { lines: hit.syncedLyrics ? parse(hit.syncedLyrics) : null, plain: hit.plainLyrics || null, instrumental: !!hit.instrumental };
+  })();
+  cache.set(id, p);
+  const res = await p;
+  if (!res) cache.delete(id);
+  return res;
+}
+
+// Index of the line playing at `sec`, or -1 before the first.
+export function lineAt(lines, sec) {
+  let lo = 0, hi = lines.length - 1, ans = -1;
+  while (lo <= hi) { const mid = (lo + hi) >> 1; if (lines[mid].t <= sec + 0.15) { ans = mid; lo = mid + 1; } else hi = mid - 1; }
+  return ans;
+}
diff --git a/web/player.js b/web/player.js
new file mode 100644
index 0000000..f93e05b
--- /dev/null
+++ b/web/player.js
@@ -0,0 +1,432 @@
+// Playback: the mix, karaoke, the stem engine and the queue.
+// Stems are downloaded whole as Blobs and played from blob: URLs. Six streaming <audio>
+// elements used to hold all six of Chrome's connections to stemserve, so nothing else on the
+// page (settings, the Plex proxy) could load until they finished.
+
+import { S, save, songMixes, Offline } from "./store.js";
+import { Stems, api } from "./stems.js";
+import { partUrl } from "./plex.js";
+import { emit, load, store, shuffled, toast, clone } from "./util.js";
+
+// ---- mix -------------------------------------------------------------------------------------
+
+export const unity = () => ({ level: 1, muted: false, solo: false });
+export const PRESETS = [
+  ["Full Mix", () => ({})],
+  ["Karaoke", n => n.includes("vocals") && { vocals: { muted: true } }],
+  ["A Cappella", n => n.includes("vocals") && { vocals: { solo: true } }],
+  ["No Drums", n => n.includes("drums") && { drums: { muted: true } }],
+  ["Rhythm", n => n.includes("drums") && n.includes("bass") && { drums: { solo: true }, bass: { solo: true } }],
+  ["No Guitar", n => n.includes("guitar") && { guitar: { muted: true } }],
+  ["No Bass", n => n.includes("bass") && { bass: { muted: true } }],
+];
+export const setting = name => ({ ...unity(), ...S.mix[name] });
+export function stemGain(name, names, mix = S.mix) {
+  const s = n => ({ ...unity(), ...mix[n] });
+  const me = s(name), anySolo = names.some(n => s(n).solo);
+  return anySolo ? (me.solo ? me.level : 0) : (me.muted ? 0 : me.level);
+}
+const normMix = (m, names) => JSON.stringify(names.map(n => { const s = { ...unity(), ...m?.[n] }; return [+s.level.toFixed(3), s.muted, s.solo]; }));
+export const sameMix = (a, b, names) => normMix(a, names) === normMix(b, names);
+export function applyPreset(build, names) {
+  const m = build(names);
+  if (!m) return;
+  S.mix = {};
+  for (const [k, v] of Object.entries(m)) S.mix[k] = { ...unity(), ...v };
+  mixChanged();
+}
+export const currentPreset = names => PRESETS.find(([, b]) => { const m = b(names); return m && sameMix(m, S.mix, names); })?.[0];
+export function mixChanged() { E.applyGains(); emit("mix"); save(); }
+
+// Karaoke: vocals on, soft (default -12 dB) or off. The iOS app does the same.
+export function karaokeMix() {
+  if (S.karaokeMode === "on") return {};
+  if (S.karaokeMode === "soft") return { vocals: { ...unity(), level: Math.pow(10, S.softDb / 20) } };
+  return { vocals: { ...unity(), muted: true } };
+}
+export function setKaraoke(on) {
+  const names = E.names.filter(Boolean);
+  if (on && !S.karaoke) { S.preKaraokeMix = clone(S.mix); S.mix = karaokeMix(); }
+  else if (!on && S.karaoke) {
+    if (sameMix(S.mix, karaokeMix(), names.length ? names : ["vocals"])) {
+      const key = E.entry?.key;
+      S.mix = clone((key && songMixes[key]) || S.preKaraokeMix || {});
+    }
+    delete S.preKaraokeMix;
+  }
+  S.karaoke = on;
+  mixChanged();
+}
+export function setKaraokeMode(mode, softDb) {
+  const wasKaraoke = S.karaoke && sameMix(S.mix, karaokeMix(), ["vocals"]);
+  S.karaokeMode = mode;
+  if (softDb != null) S.softDb = softDb;
+  if (wasKaraoke) S.mix = karaokeMix();
+  mixChanged();
+}
+// The mix a track starts with: karaoke, the queue item's own mix (stem playlists), the song's
+// saved mix, or whatever was playing before.
+function startMix(item, entry) {
+  if (S.karaoke) return karaokeMix();
+  return clone(item.mix || songMixes[entry.key] || (S.keepMix ? S.mix : {}));
+}
+
+// ---- fetching stems ---------------------------------------------------------------------------
+
+// Downloads every stem of `entry` as a Blob, `conc` at a time, reporting the overall fraction.
+export async function fetchStems(entry, fmt, { conc = 4, signal, onProgress } = {}) {
+  const got = new Array(entry.stems.length).fill(0), sizes = new Array(entry.stems.length).fill(0);
+  const report = () => {
+    const total = sizes.reduce((a, b) => a + b, 0);
+    onProgress?.(total ? got.reduce((a, b) => a + b, 0) / total : 0);
+  };
+  const one = async i => {
+    const r = await fetch(Stems.url(entry, entry.stems[i], fmt), { signal });
+    if (!r.ok) throw new Error(`stem ${r.status}`);
+    sizes[i] = +r.headers.get("Content-Length") || entry.stems[i].size || 0;
+    const reader = r.body.getReader(), chunks = [];
+    for (;;) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      chunks.push(value); got[i] += value.length; report();
+    }
+    return new Blob(chunks, { type: r.headers.get("Content-Type") || "audio/flac" });
+  };
+  Stems.prepare(entry, fmt);
+  const out = {}, todo = entry.stems.map((_, i) => i);
+  await Promise.all(Array.from({ length: Math.min(conc, todo.length) }, async () => {
+    while (todo.length) { const i = todo.shift(); out[entry.stems[i].name] = await one(i); }
+  }));
+  return out;
+}
+
+// One prefetched track, so the next song starts instantly. Kept to Opus (FLAC is too big).
+const Pre = {
+  key: null, promise: null, ctl: null,
+  get(entry) { return this.key === `${entry.key}|${S.fmt}` ? this.promise : null; },
+  start(entry) {
+    const k = `${entry.key}|${S.fmt}`;
+    if (this.key === k) return;
+    this.ctl?.abort();
+    this.key = k; this.ctl = new AbortController();
+    this.promise = fetchStems(entry, S.fmt, { conc: 2, signal: this.ctl.signal });
+    this.promise.catch(() => { if (this.key === k) this.key = null; });
+  },
+  clear() { this.ctl?.abort(); this.key = this.promise = null; },
+};
+
+// ---- engine -----------------------------------------------------------------------------------
+
+export const E = {
+  els: [], names: [], gains: [], urls: [], ctx: null, master: null,
+  want: false, stalled: false, loading: false, loadFrac: 0, pendingPos: 0,
+  entry: null, offline: null, ctl: null, gen: 0,
+
+  audioCtx() {
+    if (!this.ctx) {
+      const C = window.AudioContext || window.webkitAudioContext;
+      if (!C) return null;
+      this.ctx = new C();
+      this.master = this.ctx.createGain();
+      this.master.connect(this.ctx.destination);
+      this.master.gain.value = S.volume;
+    }
+    if (this.ctx.state === "suspended") this.ctx.resume();
+    return this.ctx;
+  },
+
+  // Loads a track: its stems (offline copy, prefetched, or downloaded now) or the Plex file.
+  async load(t, entry, startSec, play) {
+    this.unload();
+    const gen = ++this.gen;
+    this.want = play; this.stalled = play; this.pendingPos = startSec || 0;
+    this.entry = entry; this.offline = null;
+    const rec = await Offline.get(t.id).catch(() => null);
+    if (gen !== this.gen) return;
+    let blobs = null;
+    if (rec) { this.offline = rec; this.entry = entry = rec.entry; blobs = rec.blobs; }
+    else if (entry) {
+      this.loading = true; this.loadFrac = 0; emit("loading");
+      this.ctl = new AbortController();
+      try {
+        blobs = await (Pre.get(entry) || fetchStems(entry, S.fmt, {
+          signal: this.ctl.signal, onProgress: f => { if (gen === this.gen) { this.loadFrac = f; emit("loading"); } },
+        }));
+      } catch (e) {
+        if (gen !== this.gen) return;
+        this.loading = false; emit("loading");
+        if (e.name !== "AbortError") toast("Couldn't load the stems: " + e.message);
+        return;
+      }
+      if (gen !== this.gen) return;
+      this.loading = false; emit("loading");
+    }
+    let sources;
+    if (blobs?.file) sources = [{ name: null, url: URL.createObjectURL(blobs.file), blob: true }];
+    else if (blobs) {
+      const order = entry.stems.map(s => s.name);
+      sources = Object.entries(blobs).sort((a, b) => order.indexOf(a[0]) - order.indexOf(b[0]))
+        .map(([name, b]) => ({ name, url: URL.createObjectURL(b), blob: true }));
+    }
+    else {
+      const url = partUrl(t);
+      if (!url) { toast("Can't play this: its Plex server isn't set up here"); this.want = false; emit("transport"); return; }
+      sources = [{ name: null, url }];
+    }
+    this.attach(sources);
+  },
+
+  attach(sources) {
+    // Web Audio gains work everywhere (iOS ignores element volume) but need same-origin media.
+    const graph = sources.every(s => s.blob || new URL(s.url, location.href).origin === location.origin) && !!this.audioCtx();
+    for (const s of sources) {
+      const el = new Audio();
+      el.preload = "auto";
+      el.preservesPitch = true;
+      el.src = s.url;
+      el.playbackRate = el.defaultPlaybackRate = S.speed;
+      if (this.pendingPos) el.currentTime = this.pendingPos;
+      let gain = null;
+      if (graph) {
+        gain = this.ctx.createGain();
+        this.ctx.createMediaElementSource(el).connect(gain).connect(this.master);
+      }
+      if (s.blob) this.urls.push(s.url);
+      this.els.push(el); this.gains.push(gain); this.names.push(s.name);
+    }
+    this.graph = graph;
+    const lead = this.els[0];
+    lead.addEventListener("ended", () => this.onEnded?.());
+    lead.addEventListener("durationchange", () => emit("progress"));
+    lead.addEventListener("error", () => { if (this.want) toast("Couldn't play this track"); });
+    this.applyGains();
+    emit("attached");
+  },
+
+  unload() {
+    this.gen++;
+    this.ctl?.abort(); this.ctl = null;
+    for (const el of this.els) { el.pause(); el.removeAttribute("src"); el.load(); }
+    for (const u of this.urls) URL.revokeObjectURL(u);
+    this.els = []; this.names = []; this.gains = []; this.urls = [];
+    this.loading = false;
+  },
+
+  applyGains() {
+    const named = this.names.filter(Boolean);
+    this.els.forEach((el, i) => {
+      const g = this.names[i] ? stemGain(this.names[i], named) : 1;
+      if (this.gains[i]) this.gains[i].gain.value = g;
+      else el.volume = Math.min(1, g * S.volume);
+    });
+    if (this.master) this.master.gain.value = S.volume;
+  },
+
+  play() { this.audioCtx(); this.want = true; this.stalled = true; this.tick(); emit("transport"); },
+  pause() { this.want = false; this.stalled = false; this.els.forEach(e => e.pause()); emit("transport"); },
+  seek(sec) {
+    this.pendingPos = sec;
+    this.els.forEach(e => { e.currentTime = sec; });
+    if (this.want) this.stalled = true;
+    emit("progress");
+  },
+  setSpeed(v) { this.els.forEach(e => { e.playbackRate = e.defaultPlaybackRate = v; }); },
+  position() { return this.els[0] ? this.els[0].currentTime : this.pendingPos; },
+  duration() { const d = this.els[0]?.duration; return isFinite(d) ? d : (Q.cur()?.duration || 0) / 1000; },
+  get playing() { return this.want; },
+  get buffering() { return this.want && (this.stalled || this.loading); },
+  get ready() { return this.els.length > 0 && !this.loading; },
+
+  // Holds everything until every stem can play, then starts them together and keeps followers
+  // within ~15 ms of the lead by nudging their rate (pitch is preserved, so it's inaudible).
+  tick() {
+    if (!this.els.length || !this.want) return;
+    const lead = this.els[0];
+    if (this.els.some(e => e.readyState < 3 && !e.ended)) {
+      if (!this.stalled) { this.els.forEach(e => e.pause()); this.stalled = true; emit("transport"); }
+      return;
+    }
+    if (this.stalled) {
+      this.stalled = false;
+      const t = lead.currentTime;
+      this.els.forEach(e => { if (e !== lead && Math.abs(e.currentTime - t) > 0.01) e.currentTime = t; e.playbackRate = S.speed; });
+      Promise.all(this.els.map(e => e.play())).catch(err => { if (err.name === "NotAllowedError") this.pause(); });
+      emit("transport");
+      return;
+    }
+    for (const f of this.els.slice(1)) {
+      if (f.ended || lead.ended) continue;
+      const d = f.currentTime - lead.currentTime;
+      if (Math.abs(d) > 0.25) f.currentTime = lead.currentTime;
+      else if (Math.abs(d) > 0.015) f.playbackRate = S.speed * (1 - Math.max(-0.06, Math.min(0.06, d * 1.5)));
+      else if (f.playbackRate !== S.speed) f.playbackRate = S.speed;
+    }
+  },
+};
+setInterval(() => E.tick(), 150);
+
+export function setSpeed(v) { S.speed = v; E.setSpeed(v); emit("transport"); save(); }
+
+// ---- queue ------------------------------------------------------------------------------------
+
+const QKEY = "stemify-web-queue";
+let uidSeq = Date.now();
+const wrap = (t, mix = null) => ({ uid: uidSeq++, t, mix });
+let qTimer;
+export function saveQueue() {
+  clearTimeout(qTimer);
+  qTimer = setTimeout(() => store(QKEY, { items: Q.items.slice(0, 2000), orig: Q.orig?.slice(0, 2000), i: Q.i, pos: E.position() }), 300);
+}
+
+export const Q = {
+  items: [], orig: null, i: -1,
+  cur() { return this.items[this.i]?.t; },
+  curItem() { return this.items[this.i]; },
+
+  // tracks: plain tracks, or {t, mix} items from a stem playlist.
+  playList(tracks, start = 0, shuffle = S.shuffle) {
+    if (!tracks.length) return;
+    const all = tracks.map(x => x.t ? wrap(x.t, x.mix) : wrap(x));
+    if (shuffle) {
+      const first = start >= 0 && all[start] ? all[start] : all[Math.floor(Math.random() * all.length)];
+      this.orig = all;
+      this.items = [first, ...shuffled(all.filter(x => x !== first))];
+      this.i = 0;
+    } else { this.orig = null; this.items = all; this.i = start; }
+    S.shuffle = shuffle;
+    this.start(0, true);
+  },
+  add(tracks, next = false) {
+    const w = tracks.map(x => x.t ? wrap(x.t, x.mix) : wrap(x));
+    if (next) this.items.splice(this.i + 1, 0, ...w); else this.items.push(...w);
+    this.orig?.push(...w);
+    if (this.i < 0) { this.i = 0; this.start(0, false); }
+    emit("queue"); saveQueue(); this.prepareNext();
+    toast(tracks.length === 1 ? `${next ? "Playing next" : "Added"}: “${(tracks[0].t || tracks[0]).title}”` : `${next ? "Playing next" : "Added"}: ${tracks.length} tracks`);
+  },
+  remove(idx) {
+    if (idx === this.i) return;
+    const [x] = this.items.splice(idx, 1);
+    if (this.orig) this.orig = this.orig.filter(o => o !== x);
+    if (idx < this.i) this.i--;
+    emit("queue"); saveQueue();
+  },
+  move(from, to) {
+    if (from === to) return;
+    const cur = this.items[this.i];
+    const [x] = this.items.splice(from, 1);
+    this.items.splice(to, 0, x);
+    this.i = this.items.indexOf(cur);
+    emit("queue"); saveQueue();
+  },
+  clear() {
+    this.items = this.items.slice(this.i, this.i + 1); this.orig = null; this.i = this.items.length ? 0 : -1;
+    emit("queue"); saveQueue();
+  },
+  jump(idx) { this.i = idx; this.start(0, true); },
+
+  start(posSec, play) {
+    const it = this.curItem();
+    if (!it) { E.unload(); emit("track"); return; }
+    const e = Stems.find(it.t);
+    if (e) S.mix = startMix(it, e);
+    E.load(it.t, e, posSec, play).then(() => this.prepareNext());
+    emit("track"); saveQueue(); save();
+  },
+  // Reloads the current track in place, e.g. when it just got stems.
+  reload() { if (this.cur()) this.start(E.position(), E.playing); },
+
+  // Fetch the next track only once this one is playing and fully loaded, so they don't compete.
+  prepareNext() {
+    clearInterval(this.nextTimer);
+    const nt = this.items[this.i + 1]?.t;
+    if (!nt) return;
+    const ready = () => E.playing && !E.buffering && E.ready
+      && E.els.every(el => el.duration > 0 && el.buffered.length && el.buffered.end(el.buffered.length - 1) >= el.duration - 0.5);
+    this.nextTimer = setInterval(() => {
+      if (!ready()) return;
+      clearInterval(this.nextTimer);
+      const e = Stems.find(nt);
+      if (!e || Offline.has(nt.id)) return;
+      if (S.fmt.startsWith("opus")) Pre.start(e); else Stems.prepare(e);
+    }, 1000);
+  },
+
+  next(auto = false) {
+    if (auto && S.repeat === "one") { E.seek(0); E.play(); return; }
+    if (this.i + 1 < this.items.length) { this.i++; this.start(0, true); }
+    else if (S.repeat !== "off" && this.items.length) { this.i = 0; this.start(0, true); }
+    else if (auto) { E.pause(); E.seek(0); }
+  },
+  prev() {
+    if (E.position() > 3 || (this.i === 0 && S.repeat === "off")) { E.seek(0); return; }
+    this.i = this.i > 0 ? this.i - 1 : this.items.length - 1;
+    this.start(0, E.playing);
+  },
+
+  toggleShuffle() {
+    if (!S.shuffle) {
+      this.orig = this.items.slice();
+      this.items = [...this.items.slice(0, this.i + 1), ...shuffled(this.items.slice(this.i + 1))];
+    } else if (this.orig) {
+      const cur = this.items[this.i];
+      this.items = this.orig;
+      this.i = Math.max(0, this.items.indexOf(cur));
+      this.orig = null;
+    }
+    S.shuffle = !S.shuffle;
+    Pre.clear(); this.prepareNext();
+    emit("transport"); emit("queue"); saveQueue(); save();
+  },
+  cycleRepeat() {
+    S.repeat = { off: "all", all: "one", one: "off" }[S.repeat];
+    emit("transport"); save();
+  },
+
+  restore() {
+    const saved = load(QKEY);
+    if (!saved?.items?.length) return;
+    // Queues saved before multiple servers have ids like "p123" and no server.
+    const fix = x => {
+      if (x.t.id?.startsWith("p") && !x.t.srv && S.servers[0]) {
+        x.t.srv = S.servers[0].id; x.t.key = x.t.id.slice(1); x.t.id = `p${x.t.srv}:${x.t.key}`;
+      }
+      return x;
+    };
+    this.items = saved.items.map(fix);
+    this.i = Math.min(Math.max(0, saved.i), this.items.length - 1);
+    uidSeq = Math.max(uidSeq, ...this.items.map(x => x.uid + 1));
+    this.orig = saved.orig ? saved.orig.map(o => this.items.find(x => x.uid === o.uid) || fix(o)) : null;
+    this.start(saved.pos || 0, false);
+  },
+};
+E.onEnded = () => Q.next(true);
+
+// ---- offline ----------------------------------------------------------------------------------
+
+export async function saveOffline(tracks, onStatus) {
+  let n = 0;
+  for (const t of tracks) {
+    if (Offline.has(t.id)) continue;
+    onStatus?.(`Downloading ${++n} of ${tracks.length}: ${t.title}`);
+    try {
+      const entry = Stems.find(t);
+      let blobs, peaks = null;
+      if (entry) {
+        blobs = await fetchStems(entry, S.fmt, { conc: 2 });
+        peaks = await fetch(api("/api/peaks", { key: entry.key, n: 300 })).then(r => r.ok ? r.json() : null).catch(() => null);
+      } else {
+        const url = partUrl(t);
+        if (!url) continue;
+        const r = await fetch(url);
+        if (!r.ok) throw new Error(`Plex ${r.status}`);
+        blobs = { file: await r.blob() };
+      }
+      const size = Object.values(blobs).reduce((a, b) => a + b.size, 0);
+      await Offline.put({ id: t.id, track: t, entry, fmt: entry ? S.fmt : "original", size, peaks: peaks?.stems || null, blobs, saved: Date.now() });
+    } catch (e) { toast(`Couldn't download “${t.title}”: ${e.message}`); }
+  }
+  emit("offline");
+  onStatus?.("");
+  if (n) toast(n === 1 ? "Downloaded for offline" : `Downloaded ${n} tracks for offline`);
+}
diff --git a/web/plex.js b/web/plex.js
new file mode 100644
index 0000000..78d809f
--- /dev/null
+++ b/web/plex.js
@@ -0,0 +1,235 @@
+// Plex: any number of servers, each with its music sections switched on or off. Lists from
+// several sections are merged page by page so they read as one library.
+
+import { S, save } from "./store.js";
+import { uuid } from "./util.js";
+
+export const headers = token => ({
+  Accept: "application/json",
+  "X-Plex-Product": "Stemify Web",
+  "X-Plex-Client-Identifier": S.clientId,
+  ...(token ? { "X-Plex-Token": token } : {}),
+});
+
+export const server = id => S.servers.find(s => s.id === id);
+
+export async function px(srv, path, params = {}) {
+  if (typeof srv === "string") srv = server(srv);
+  if (!srv) throw new Error("That Plex server isn't set up any more");
+  const u = new URL(srv.url + path, location.href);
+  for (const [k, v] of Object.entries(params)) u.searchParams.set(k, v);
+  const r = await fetch(u, { headers: headers(srv.token), signal: AbortSignal.timeout(15000) });
+  if (!r.ok) throw new Error(`Plex ${r.status} from ${srv.name}`);
+  return (await r.json()).MediaContainer || {};
+}
+
+export function img(srvId, thumb, size = 300) {
+  const s = server(srvId);
+  return thumb && s
+    ? `${s.url}/photo/:/transcode?width=${size}&height=${size}&minSize=1&upscale=1&url=${encodeURIComponent(thumb)}&X-Plex-Token=${s.token}`
+    : "";
+}
+
+export function partUrl(t) {
+  const s = server(t.srv);
+  return s && t.part ? `${s.url}${t.part}?X-Plex-Token=${s.token}` : null;
+}
+
+export function track(srvId, m) {
+  const part = m.Media?.[0]?.Part?.[0];
+  return {
+    id: `p${srvId}:${m.ratingKey}`, srv: srvId, key: m.ratingKey,
+    title: m.title, artist: m.originalTitle || m.grandparentTitle || "", album: m.parentTitle || "",
+    albumKey: m.parentRatingKey, artistKey: m.grandparentRatingKey,
+    thumb: m.thumb || m.parentThumb || m.grandparentThumb, duration: m.duration || part?.duration || 0,
+    part: part?.key, file: part?.file, index: m.index,
+    meta: { titleSort: m.titleSort, addedAt: m.addedAt, lastViewedAt: m.lastViewedAt, viewCount: m.viewCount, userRating: m.userRating },
+  };
+}
+
+// Sections that are switched on, one per (server, section). A Plex server reachable two ways
+// (the env proxy and a sign-in) only counts once.
+export function sources() {
+  const seen = new Set(), out = [];
+  for (const srv of S.servers) {
+    if (srv.mid && seen.has(srv.mid)) continue;
+    if (srv.mid) seen.add(srv.mid);
+    for (const sec of srv.sections || []) if (sec.on) out.push({ srv, sec: sec.key });
+  }
+  return out;
+}
+export const liveServers = () => [...new Map(sources().map(s => [s.srv.id, s.srv])).values()];
+
+// Fills in the server's identity and music sections. New sections start switched on.
+export async function refreshServer(srv) {
+  const [id, secs] = await Promise.all([px(srv, "/").catch(() => ({})), px(srv, "/library/sections")]);
+  if (id.machineIdentifier) srv.mid = id.machineIdentifier;
+  if (id.friendlyName && (!srv.name || srv.name === srv.url)) srv.name = id.friendlyName;
+  const old = new Map((srv.sections || []).map(s => [s.key, s]));
+  srv.sections = (secs.Directory || []).filter(d => d.type === "artist")
+    .map(d => ({ key: String(d.key), title: d.title, on: old.get(String(d.key))?.on ?? true }));
+  save();
+  return srv;
+}
+
+export function addServer(srv) {
+  const i = S.servers.findIndex(s => s.id === srv.id || (srv.mid && s.mid === srv.mid && !s.env));
+  if (i >= 0) S.servers[i] = { ...S.servers[i], ...srv, sections: S.servers[i].sections };
+  else S.servers.push({ sections: [], ...srv });
+  save();
+  return S.servers[i >= 0 ? i : S.servers.length - 1];
+}
+export const manualServer = (url, token) => ({ id: "m" + uuid().slice(0, 8), url, token, name: url });
+
+// PIN sign-in, then every server on the account that answers from this browser.
+export async function signIn(status) {
+  const pin = await (await fetch("https://plex.tv/api/v2/pins?strong=true", { method: "POST", headers: headers() })).json();
+  const auth = `https://app.plex.tv/auth#?clientID=${encodeURIComponent(S.clientId)}&code=${encodeURIComponent(pin.code)}&context%5Bdevice%5D%5Bproduct%5D=Stemify%20Web`;
+  window.open(auth, "_blank", "width=800,height=740");
+  status("Waiting for Plex sign-in…");
+  let token = null;
+  for (let n = 0; n < 150 && !token; n++) {
+    await new Promise(r => setTimeout(r, 2000));
+    token = (await (await fetch(`https://plex.tv/api/v2/pins/${pin.id}`, { headers: headers() })).json()).authToken;
+  }
+  if (!token) throw new Error("Sign-in timed out");
+  status("Finding your servers…");
+  const res = await (await fetch("https://plex.tv/api/v2/resources?includeHttps=1", { headers: headers(token) })).json();
+  const https = location.protocol === "https:";
+  const found = await Promise.all(res.filter(r => r.provides?.includes("server")).map(async srv => {
+    const conns = (srv.connections || []).filter(c => !https || c.protocol === "https")
+      .sort((a, b) => (b.local - a.local) || (a.relay - b.relay));
+    for (const c of conns) {
+      try {
+        const r = await fetch(`${c.uri}/identity`, { headers: headers(srv.accessToken || token), signal: AbortSignal.timeout(3500) });
+        if (r.ok) return { id: srv.clientIdentifier, mid: srv.clientIdentifier, url: c.uri, token: srv.accessToken || token, name: srv.name };
+      } catch {}
+    }
+    return null;
+  }));
+  const ok = found.filter(Boolean);
+  if (!ok.length) throw new Error("Signed in, but no Plex server answered from this browser");
+  for (const f of ok) await refreshServer(addServer(f)).catch(() => {});
+  return ok;
+}
+
+// ---- sorting -------------------------------------------------------------------------------
+// Same options as the iOS app, plus Random. [title, Plex key, starts descending, up, down].
+
+const AZ = ["A to Z", "Z to A"], NEW = ["Oldest First", "Newest First"], MOST = ["Fewest First", "Most First"];
+const RANDOM = ["Random", "random", false, "Shuffled", "Shuffled"];
+export const SORTS = {
+  artists: [["Name", "titleSort", false, ...AZ], ["Date Added", "addedAt", true, ...NEW], ["Last Played", "lastViewedAt", true, ...NEW],
+    ["Plays", "viewCount", true, ...MOST], ["Rating", "userRating", true, "Lowest First", "Highest First"], RANDOM],
+  albums: [["Title", "titleSort", false, ...AZ], ["Artist", "artist.titleSort,year", false, ...AZ], ["Year", "year", true, ...NEW],
+    ["Release Date", "originallyAvailableAt", true, ...NEW], ["Date Added", "addedAt", true, ...NEW], ["Last Played", "lastViewedAt", true, ...NEW],
+    ["Plays", "viewCount", true, ...MOST], ["Rating", "userRating", true, "Lowest First", "Highest First"], RANDOM],
+  songs: [["Title", "titleSort", false, ...AZ], ["Artist", "artist.titleSort,album.titleSort,album.index,album.id,track.absoluteIndex", false, ...AZ],
+    ["Album", "album.titleSort,album.index,album.id,track.absoluteIndex", false, ...AZ], ["Date Added", "addedAt", true, ...NEW],
+    ["Last Played", "lastViewedAt", true, ...NEW], ["Plays", "viewCount", true, ...MOST], ["Rating", "userRating", true, "Lowest First", "Highest First"],
+    ["Duration", "duration", true, "Shortest First", "Longest First"], RANDOM],
+  playlists: [["Title", "titleSort", false, ...AZ], ["Date Added", "addedAt", true, ...NEW], ["Last Updated", "updatedAt", true, ...NEW],
+    ["Last Played", "lastViewedAt", true, ...NEW], ["Plays", "viewCount", true, ...MOST], ["Duration", "duration", true, "Shortest First", "Longest First"], RANDOM],
+};
+// Track lists inside an album, artist, playlist or genre are sorted in the browser.
+SORTS.tracks = [["Default", "", false, "In Order", "Reversed"], ...SORTS.songs];
+
+export function sortState(screen) {
+  const opts = SORTS[screen === "album" || screen === "artist" || screen === "playlist" || screen === "search" ? "tracks" : screen] || SORTS.tracks;
+  const st = S.sorts[screen] || {};
+  const i = opts[st.i] ? st.i : 0, o = opts[i];
+  const desc = o[2] !== !!st.rev;
+  return { opts, i, o, desc, random: o[1] === "random", param: o[1] === "random" ? "random" : o[1].split(",").map((f, j) => j || !desc ? f : f + ":desc").join(",") };
+}
+// Picking the current field again flips it, like Plexamp and the iOS app.
+export function pickSort(screen, i, dir) {
+  const st = S.sorts[screen] ||= {};
+  const opts = sortState(screen).opts;
+  if (dir != null) st.rev = dir !== opts[st.i ?? 0][2];
+  else if ((st.i ?? 0) === i) st.rev = !st.rev;
+  else { st.i = i; st.rev = false; }
+  save();
+}
+
+// Value Plex sorts by, for merging pages from several sections and for sorting in the browser.
+const FIELD = {
+  titleSort: m => m.titleSort || m.title,
+  "artist.titleSort": m => m.type === "track" ? m.grandparentTitle : m.parentTitle,
+  "album.titleSort": m => m.parentTitle,
+  originallyAvailableAt: m => m.originallyAvailableAt || "",
+};
+const coll = new Intl.Collator(undefined, { sensitivity: "base", numeric: true });
+export function comparator(param) {
+  const keys = param.split(",").map(k => { const [f, d] = k.split(":"); return { get: FIELD[f] || (m => m[f]), dir: d === "desc" ? -1 : 1 }; });
+  return (a, b) => {
+    for (const { get, dir } of keys) {
+      let x = get(a), y = get(b);
+      if (x == null && y == null) continue;
+      if (typeof x === "number" || typeof y === "number") { x ??= -Infinity; y ??= -Infinity; if (x !== y) return (x < y ? -1 : 1) * dir; }
+      else { const c = coll.compare(x ?? "", y ?? ""); if (c) return c * dir; }
+    }
+    return 0;
+  };
+}
+
+// Sorts plain tracks (from plexTrack) the way a Plex sort key would.
+export function sortTracks(tracks, st) {
+  if (!st.o[1]) return st.desc !== st.o[2] ? tracks.slice().reverse() : tracks;
+  if (st.random) return tracks.map(t => [Math.random(), t]).sort((a, b) => a[0] - b[0]).map(x => x[1]);
+  const asMeta = t => ({ type: "track", title: t.title, grandparentTitle: t.artist, parentTitle: t.album, duration: t.duration, ...t.meta });
+  const cmp = comparator(st.param);
+  return tracks.slice().sort((a, b) => cmp(asMeta(a), asMeta(b)));
+}
+
+// ---- merged paging ----------------------------------------------------------------------------
+// Pulls pages from every source and merges them by the sort, or interleaves them for Random.
+
+export class Pager {
+  constructor(srcs, path, params, size = 120) {
+    this.cmp = params.sort && params.sort !== "random" ? comparator(params.sort) : null;
+    this.random = params.sort === "random";
+    this.st = srcs.map(s => ({ ...s, buf: [], start: 0, total: Infinity }));
+    this.path = path; this.params = params; this.size = size;
+    this.total = 0;
+  }
+  get done() { return this.st.every(s => !s.buf.length && s.start >= s.total); }
+  async fill(s) {
+    if (s.buf.length || s.start >= s.total) return;
+    const mc = await px(s.srv, typeof this.path === "function" ? this.path(s) : this.path,
+      { ...this.params, ...(s.params || {}), "X-Plex-Container-Start": s.start, "X-Plex-Container-Size": this.size });
+    const items = mc.Metadata || [];
+    const first = s.total === Infinity;
+    s.total = items.length ? mc.totalSize ?? mc.size ?? 0 : s.start;
+    if (first) this.total += s.total;
+    s.start += items.length;
+    for (const m of items) m._srv = s.srv.id;
+    s.buf.push(...items);
+  }
+  async next(n = this.size) {
+    const out = [];
+    while (out.length < n) {
+      await Promise.all(this.st.map(s => this.fill(s).catch(e => { s.total = s.start; s.err = e; })));
+      const live = this.st.filter(s => s.buf.length);
+      if (!live.length) break;
+      let pick;
+      if (live.length === 1) pick = live[0];
+      else if (this.random) {
+        let r = Math.random() * live.reduce((a, s) => a + s.buf.length + s.total - s.start, 0);
+        pick = live.find(s => (r -= s.buf.length + s.total - s.start) < 0) || live[0];
+      } else pick = this.cmp ? live.reduce((a, s) => this.cmp(s.buf[0], a.buf[0]) < 0 ? s : a) : live[0];
+      // A single live source can hand over its whole buffer at once.
+      out.push(...(live.length === 1 ? pick.buf.splice(0, n - out.length) : [pick.buf.shift()]));
+    }
+    if (!out.length && this.st.every(s => s.err)) throw this.st[0].err;
+    return out;
+  }
+}
+
+// Every page of every source, for lists that are only ever shown whole (genres, playlists).
+export async function everything(srcs, path, params = {}) {
+  const per = await Promise.all(srcs.map(async s => {
+    const mc = await px(s.srv, typeof path === "function" ? path(s) : path, params).catch(() => ({}));
+    return (mc.Metadata || mc.Directory || []).map(m => (m._srv = s.srv.id, m._sec = s.sec, m));
+  }));
+  return per.flat();
+}
diff --git a/web/stems.js b/web/stems.js
new file mode 100644
index 0000000..6920bad
--- /dev/null
+++ b/web/stems.js
@@ -0,0 +1,122 @@
+// stemserve: the index of tracks that have stems, Stem Now, and the live separation queue.
+
+import { S } from "./store.js";
+import { emit, toast } from "./util.js";
+
+export const stemBase = () => (S.stemUrl || location.origin).replace(/\/+$/, "");
+export const stemQuery = extra => {
+  const q = new URLSearchParams(extra);
+  if (S.stemToken) q.set("token", S.stemToken);
+  const s = q.toString();
+  return s ? "?" + s : "";
+};
+const keyPath = k => k.split("/").map(encodeURIComponent).join("/");
+export const fmtParams = (fmt = S.fmt) => fmt.startsWith("opus") ? { fmt: "opus", br: fmt.slice(4) } : {};
+export const api = (path, extra) => stemBase() + path + stemQuery(extra);
+
+// Same matching as the apps: the stems folder mirrors the music folder, so the Plex path's
+// suffix identifies a track. Short or duration-mismatched suffixes only count under a root
+// learned from an earlier confident match.
+export const Stems = {
+  entries: [], bySource: new Map(), byKey: new Map(), roots: [], etag: null, ok: false,
+  norm(p) {
+    p = p.normalize("NFC").replaceAll("\\", "/");
+    const slash = p.lastIndexOf("/"), dot = p.lastIndexOf(".");
+    if (dot > slash + 1) p = p.slice(0, dot);
+    return p.toLowerCase();
+  },
+  async refresh() {
+    try {
+      const r = await fetch(api("/api/index"), { headers: this.etag ? { "If-None-Match": this.etag } : {}, signal: AbortSignal.timeout(15000) });
+      this.ok = r.ok || r.status === 304;
+      if (r.status !== 200) return false;
+      this.etag = r.headers.get("ETag");
+      this.entries = (await r.json()).tracks || [];
+      this.bySource = new Map(); this.byKey = new Map();
+      for (const e of this.entries) {
+        const k = this.norm(e.source);
+        if (!this.bySource.has(k)) this.bySource.set(k, e);
+        this.byKey.set(e.key, e);
+      }
+      emit("stems");
+      return true;
+    } catch { this.ok = false; return false; }
+  },
+  find(t) {
+    if (t.stem) return this.byKey.get(t.stem.key) || t.stem;
+    if (!t.file || !this.entries.length) return null;
+    const path = this.norm(t.file);
+    for (const root of this.roots) if (path.startsWith(root)) { const hit = this.bySource.get(path.slice(root.length)); if (hit) return hit; }
+    const parts = path.split("/");
+    for (let i = 1; i < parts.length; i++) {
+      const hit = this.bySource.get(parts.slice(i).join("/"));
+      if (!hit) continue;
+      const okDur = !hit.duration || !t.duration || Math.abs(hit.duration * 1000 - t.duration) < 3000;
+      if (parts.length - i >= 2 && okDur) {
+        const root = parts.slice(0, i).join("/") + "/";
+        if (!this.roots.includes(root)) this.roots.push(root);
+        return hit;
+      }
+    }
+    return null;
+  },
+  url(e, s, fmt) { return `${stemBase()}/file/${keyPath(e.key)}/${encodeURIComponent(s.file)}${stemQuery(fmtParams(fmt))}`; },
+  prepare(e, fmt = S.fmt) {
+    if (e && fmt.startsWith("opus")) fetch(api("/api/prepare", { key: e.key, ...fmtParams(fmt) }), { method: "POST" }).catch(() => {});
+  },
+};
+
+export const stemTrack = e => {
+  const parts = e.key.split("/");
+  return { id: "s" + e.key, title: parts.at(-1), artist: parts.at(-3) || "", album: parts.at(-2) || "", duration: (e.duration || 0) * 1000, stem: e };
+};
+
+// ---- live queue ------------------------------------------------------------------------------
+// Polls /api/queue: quickly while stemd has work, slowly otherwise. When stemd finishes a track
+// the index is refreshed, and every list on screen updates its badges.
+
+export const Live = {
+  pending: new Set(), current: null, done: null, failed: new Set(), timer: null,
+  state(t) {
+    if (!t.file) return null;
+    if (this.current && (t.file === this.current || t.file.endsWith("/" + this.current))) return "stemming";
+    if (this.pending.has(t.file)) return "queued";
+    if (this.failed.has(t.file)) return "failed";
+    return null;
+  },
+  get busy() { return !!this.current || this.pending.size > 0; },
+  async poll() {
+    clearTimeout(this.timer);
+    try {
+      const r = await fetch(api("/api/queue"), { cache: "no-store", signal: AbortSignal.timeout(8000) });
+      if (r.ok) {
+        const j = await r.json();
+        const before = new Set(Stems.entries.map(e => e.key));
+        const changed = j.done !== this.done;
+        this.pending = new Set(j.pending || []); this.current = j.current || null; this.failed = new Set(j.failed || []);
+        if (changed && this.done !== null && await Stems.refresh()) {
+          const fresh = Stems.entries.filter(e => !before.has(e.key));
+          if (fresh.length) emit("newstems", fresh);
+        }
+        this.done = j.done;
+        emit("live");
+      }
+    } catch {}
+    this.timer = setTimeout(() => this.poll(), this.busy ? 4000 : 30000);
+  },
+};
+
+export async function stemNow(tracks) {
+  const seen = new Set();
+  const paths = tracks.filter(t => t.file && !Stems.find(t) && !seen.has(t.file) && seen.add(t.file)).map(t => t.file);
+  if (!paths.length) return toast(tracks.length === 1 ? "Already has stems" : "These all have stems already");
+  try {
+    const r = await fetch(api("/api/stem"), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paths }) });
+    const j = await r.json().catch(() => ({}));
+    if (!r.ok) return toast(`Couldn't queue: ${j.error || r.status}`);
+    for (const p of paths) Live.pending.add(p);
+    emit("live");
+    toast(`Stemming ${paths.length === 1 ? "1 track" : paths.length + " tracks"} next`);
+    Live.poll();
+  } catch (e) { toast("Couldn't queue: " + e.message); }
+}
diff --git a/web/store.js b/web/store.js
new file mode 100644
index 0000000..ec3c346
--- /dev/null
+++ b/web/store.js
@@ -0,0 +1,86 @@
+// Everything the player keeps in the browser: settings, saved song mixes, stem playlists,
+// and offline downloads (IndexedDB).
+
+import { load, store, uuid } from "./util.js";
+
+const KEY = "stemify-web";
+
+export const S = Object.assign({
+  servers: [],          // [{id, url, token, name, env?, sections: [{key, title, on}]}]
+  stemUrl: "",          // empty = same origin as this page
+  stemToken: "",
+  fmt: "opus160",
+  volume: 0.85, speed: 1, shuffle: false, repeat: "off",
+  mix: {},              // stem name -> {level, muted, solo}; the live mix
+  keepMix: true,        // carry the mix to the next track when it has no saved mix
+  karaoke: false, karaokeMode: "off", softDb: -12,
+  sorts: {},            // screen -> sort value
+  stemsOnly: false,
+  theme: "amber", accent: "", css: "",
+}, load(KEY) || {});
+
+if (!S.clientId) S.clientId = uuid();
+if (S.fmt.startsWith("opus") && !new Audio().canPlayType('audio/ogg; codecs="opus"')) S.fmt = "flac";
+
+// Before multiple servers there was one S.plex and one S.section.
+if (S.plex) {
+  const p = S.plex;
+  if (!p.env) S.servers.push({ id: "m" + Date.now().toString(36), url: p.url, token: p.token, name: p.name || p.url, sections: S.section ? [{ key: String(S.section), title: "Music", on: true }] : [] });
+  delete S.plex; delete S.section;
+}
+if (S.albumSort) { S.sorts.albums = S.albumSort; delete S.albumSort; }
+
+let timer;
+export function save() {
+  clearTimeout(timer);
+  timer = setTimeout(() => store(KEY, S), 300);
+}
+
+// ---- saved song mixes, keyed by the stem entry's key -----------------------------------
+
+const MIX_KEY = KEY + "-mixes";
+export const songMixes = load(MIX_KEY) || {};
+export function saveSongMix(key, mix) { songMixes[key] = JSON.parse(JSON.stringify(mix)); store(MIX_KEY, songMixes); }
+export function forgetSongMix(key) { delete songMixes[key]; store(MIX_KEY, songMixes); }
+
+// ---- stem playlists: tracks plus an optional mix per item ------------------------------
+
+const PL_KEY = KEY + "-playlists";
+export const playlists = load(PL_KEY) || [];
+export const savePlaylists = () => store(PL_KEY, playlists);
+export function newPlaylist(title) {
+  const p = { id: uuid(), title, items: [], created: Date.now(), updated: Date.now() };
+  playlists.unshift(p);
+  savePlaylists();
+  return p;
+}
+export function addToPlaylist(p, tracks, mix) {
+  for (const t of tracks) p.items.push({ uid: uuid(), track: t, mix: mix ? JSON.parse(JSON.stringify(mix)) : null });
+  p.updated = Date.now();
+  savePlaylists();
+}
+
+// ---- offline downloads -----------------------------------------------------------------
+// One record per track: {id, track, entry, fmt, size, peaks, lyrics, blobs: {name: Blob}}.
+
+let dbp;
+function db() {
+  return dbp ||= new Promise((res, rej) => {
+    const r = indexedDB.open("stemify-web", 1);
+    r.onupgradeneeded = () => r.result.createObjectStore("tracks", { keyPath: "id" });
+    r.onsuccess = () => res(r.result);
+    r.onerror = () => rej(r.error);
+  });
+}
+const req = r => new Promise((res, rej) => { r.onsuccess = () => res(r.result); r.onerror = () => rej(r.error); });
+async function os(mode) { return (await db()).transaction("tracks", mode).objectStore("tracks"); }
+
+export const Offline = {
+  ids: new Set(),
+  async init() { try { this.ids = new Set(await req((await os("readonly")).getAllKeys())); } catch {} },
+  has: id => Offline.ids.has(id),
+  async get(id) { return this.ids.has(id) ? req((await os("readonly")).get(id)) : null; },
+  async all() { return req((await os("readonly")).getAll()); },
+  async put(rec) { await req((await os("readwrite")).put(rec)); this.ids.add(rec.id); },
+  async remove(id) { await req((await os("readwrite")).delete(id)); this.ids.delete(id); },
+};
diff --git a/web/style.css b/web/style.css
index eb8bd0d..219eb37 100644
--- a/web/style.css
+++ b/web/style.css
@@ -9,12 +9,18 @@
   --accent-ink: #1a1306;
   --radius: 12px;
   --player-h: 96px;
+  --glass: #15171dee;
+  --hover: #eceef30d;
+  --shadow: #0009;
+  --wave: #eceef344;
+  --wave-ghost: #eceef314;
   color-scheme: dark;
 }
 * { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
   font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }
-button, input, select { font: inherit; color: inherit; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button:disabled { opacity: .4; cursor: default; }
 button { background: none; border: 0; cursor: pointer; padding: 0; }
 a { color: inherit; text-decoration: none; }
 svg { width: 1em; height: 1em; fill: currentColor; display: block; }
@@ -36,7 +42,7 @@ h2 { font-size: 17px; margin: 28px 0 12px; }
 .sub { color: var(--muted); }
 .bar { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
 .bar h1 { margin-right: auto; }
-select, input[type=text], input[type=url], input[type=password] { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; }
+select, textarea, input[type=text], input[type=url], input[type=password] { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; }
 
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px; }
 .card { display: block; min-width: 0; }
@@ -47,7 +53,7 @@ select, input[type=text], input[type=url], input[type=password] { background: va
 .card .s { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 .hero { display: flex; gap: 28px; align-items: flex-end; margin-bottom: 26px; }
-.hero img { width: 210px; height: 210px; border-radius: var(--radius); object-fit: cover; background: var(--raised); box-shadow: 0 20px 50px #0008; }
+.hero img { width: 210px; height: 210px; border-radius: var(--radius); object-fit: cover; background: var(--raised); box-shadow: 0 20px 50px var(--shadow); }
 .hero .meta { min-width: 0; }
 .hero .kind { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
 .actions { display: flex; gap: 10px; margin-top: 16px; }
@@ -57,28 +63,109 @@ select, input[type=text], input[type=url], input[type=password] { background: va
 
 .tracks { width: 100%; border-collapse: collapse; }
 .tracks tr { border-radius: 8px; }
-.tracks td { padding: 8px 10px; border-bottom: 1px solid #ffffff08; white-space: nowrap; }
+.tracks td { padding: 8px 10px; border-bottom: 1px solid var(--hover); white-space: nowrap; }
 .tracks tr:hover td { background: var(--panel); }
 .tracks tr.playing td { color: var(--accent); }
 .tracks .n { width: 36px; color: var(--muted); text-align: right; }
 .tracks .ti { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .tracks .ti small { color: var(--muted); margin-left: 8px; }
 .tracks .d { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
-.tracks .add { opacity: 0; color: var(--muted); font-size: 18px; }
-.tracks tr:hover .add { opacity: 1; }
-.tracks .add:hover { color: var(--text); }
-.stem-dot { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--accent); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 8px; vertical-align: 1px; }
-.more { display: block; margin: 24px auto; }
+.tracks tr { cursor: default; }
+.tracks .off { color: var(--accent); width: 20px; padding: 0 2px; font-size: 13px; }
+.tracks .acts { width: 1px; padding: 0 4px; }
+.tracks .acts button { opacity: 0; color: var(--muted); font-size: 18px; width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; vertical-align: middle; }
+.tracks tr:hover .acts button { opacity: 1; }
+.tracks .acts button:hover { color: var(--text); background: var(--raised); }
+.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--muted); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 8px; vertical-align: 1px; }
+.tag.stems { color: var(--accent); }
+.tag.queued { color: var(--muted); }
+.tag.stemming { color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
+.tag.failed { color: #e5534b; }
+@keyframes pulse { 50% { opacity: .35; } }
+.badge:empty { display: none; }
+.more { min-height: 1px; margin: 24px auto; color: var(--muted); }
+.sub#count { margin-right: auto; }
+.bar h1 + .sub { margin-left: -2px; }
+.bar.sm { margin: 28px 0 12px; }
+.bar.sm h2 { margin: 0; }
+.grow { flex: 1; }
+.sort { display: flex; gap: 6px; align-items: center; }
+.sort select { padding: 5px 8px; font-size: 13px; }
+.sort .chip svg { display: inline-block; vertical-align: -2px; }
+.chip { display: inline-flex; gap: 6px; align-items: center; }
+.link { color: var(--accent); cursor: pointer; }
+.btn.small { padding: 5px 12px; font-size: 13px; }
+.btn.icon { padding: 9px 12px; }
+.hero .ph { width: 210px; height: 210px; border-radius: var(--radius); background: var(--raised); flex: none; }
+.hero .round { border-radius: 50%; }
+
+/* Stems-only filter hides rows and cards without stems. */
+body.stems-only .tracks tr.nostem, body.stems-only .card.nostem { display: none; }
+.only-stems { display: none; }
+body.stems-only .tracks:not(:has(tr:not(.nostem))) + .only-stems { display: block; }
+
+.genres { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
+.genre { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 16px; color: #fff;
+  background: linear-gradient(135deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 40) 60% 24%)); text-shadow: 0 1px 6px #0006; }
+.genre:hover { filter: brightness(1.12); }
+
+#live { margin-top: 14px; padding: 8px 10px; border-radius: 8px; background: var(--raised); font-size: 12px; color: var(--muted); line-height: 1.35; }
+.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: pulse 1.4s ease-in-out infinite; }
+
+#menu { position: fixed; z-index: 50; min-width: 200px; padding: 5px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px var(--shadow); }
+#menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; }
+#menu button:not(:disabled):hover { background: var(--accent); color: var(--accent-ink); }
+#menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
+
+#toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 18px); transform: translate(-50%, 10px); z-index: 60; max-width: min(520px, calc(100% - 32px));
+  background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
+#toast.show { opacity: 1; transform: translate(-50%, 0); }
 .empty-msg { color: var(--muted); padding: 40px 0; }
 
 .form { max-width: 520px; display: grid; gap: 14px; }
 .form label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .form label input, .form label select { color: var(--text); font-size: 14px; }
-.form .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
+.check { display: flex !important; gap: 8px; align-items: center; color: var(--text) !important; font-size: 14px !important; }
+textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; resize: vertical; color: var(--text); }
+.settings { display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: start; }
+.toc { position: sticky; top: 0; display: grid; gap: 2px; }
+.toc a { padding: 6px 10px; border-radius: 8px; color: var(--muted); }
+.toc a:hover { color: var(--text); background: var(--hover); }
+.panes section { max-width: 640px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 10px; }
+.panes section h2 { margin-top: 0; }
+.srv { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
+.srv .row { margin: 0; }
+.secs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
+details summary { cursor: pointer; margin: 12px 0; }
+.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
+.swatch { border: 1px solid; border-radius: 10px; padding: 10px; text-align: left; font-weight: 600; display: flex; gap: 8px; align-items: center; }
+.swatch i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
+.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
+input[type=color] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
 .note { color: var(--muted); font-size: 13px; }
 
 #drawer { width: 340px; background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 22px 20px; }
 #drawer h2 { margin: 0 0 14px; }
+#drawer { display: flex; flex-direction: column; padding-top: 12px; }
+#drawer[hidden] { display: none; }
+.tabs { display: flex; gap: 4px; margin-bottom: 16px; position: sticky; top: -12px; background: var(--panel); padding: 6px 0; z-index: 1; }
+.tabs button { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; }
+.tabs button.on { background: var(--raised); color: var(--text); }
+.tabs .x { margin-left: auto; font-size: 20px; }
+.kara { display: grid; gap: 10px; margin-bottom: 16px; }
+.kara .chip { justify-self: start; }
+.seg { display: flex; background: var(--raised); border-radius: 8px; padding: 3px; }
+.seg button { flex: 1; padding: 5px 4px; border-radius: 6px; font-size: 12px; color: var(--muted); }
+.seg button.on { background: var(--accent); color: var(--accent-ink); }
+.kara label { display: grid; gap: 4px; }
+.mixrow { margin-top: 16px; }
+#lyr.synced p { margin: 0; padding: 7px 4px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--muted); opacity: .55; cursor: pointer; transition: opacity .2s, color .2s; }
+#lyr.synced p:hover { opacity: .85; }
+#lyr.synced p.on { color: var(--text); opacity: 1; }
+#lyr.plain { font-size: 15px; line-height: 1.6; color: var(--text); }
+.q-item .ph { width: 38px; height: 38px; border-radius: 6px; background: var(--raised); flex: none; }
+.q-item[draggable] { cursor: grab; }
 .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
 .chip { background: var(--raised); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
 .chip.on { background: var(--accent); color: var(--accent-ink); }
@@ -102,7 +189,7 @@ select, input[type=text], input[type=url], input[type=password] { background: va
 .q-item .x { color: var(--muted); font-size: 18px; padding: 0 4px; opacity: 0; }
 .q-item:hover .x { opacity: 1; }
 
-#player { position: fixed; left: 0; right: 0; bottom: 0; height: var(--player-h); background: #101116ee; backdrop-filter: blur(20px);
+#player { position: fixed; left: 0; right: 0; bottom: 0; height: var(--player-h); background: var(--glass); backdrop-filter: blur(20px);
   border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.6fr) minmax(180px, 1fr); align-items: center; gap: 20px; padding: 0 20px; }
 #player.empty .center, #player.empty .right { opacity: .35; pointer-events: none; }
 .np { display: flex; gap: 12px; align-items: center; min-width: 0; }
@@ -126,6 +213,9 @@ select, input[type=text], input[type=url], input[type=password] { background: va
 .right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
 .pill { color: var(--muted); font-size: 18px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
 .pill.on { background: var(--raised); color: var(--accent); }
+.pill { position: relative; }
+.pill.dot::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
+.np { cursor: pointer; }
 #speed { padding: 5px 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
 #speed.on { color: var(--accent); border-color: var(--accent); }
 #volume { width: 96px; }
@@ -138,6 +228,11 @@ input[type=range] { accent-color: var(--accent); }
   .brand { padding: 0 8px 0 4px; }
   #nav a { white-space: nowrap; }
   #search input { margin: 0; width: 120px; }
+  #live { margin: 0; white-space: nowrap; }
+  .settings { grid-template-columns: 1fr; }
+  .toc { position: static; display: flex; flex-wrap: wrap; }
+  .tracks .acts button { opacity: 1; }
+  .tracks .ti small { display: block; margin-left: 0; }
   .settings-link { margin-top: 0; }
   #view { padding: 20px 16px 40px; }
   #drawer { position: fixed; inset: auto 0 var(--player-h) 0; width: auto; max-height: 60vh; border-left: 0; border-top: 1px solid var(--line); z-index: 5; }
diff --git a/web/util.js b/web/util.js
new file mode 100644
index 0000000..e1a3a66
--- /dev/null
+++ b/web/util.js
@@ -0,0 +1,49 @@
+// Small helpers shared by the web player's modules.
+
+export const $ = (s, r = document) => r.querySelector(s);
+export const $$ = (s, r = document) => [...r.querySelectorAll(s)];
+export const esc = s => String(s ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+export const fmtTime = s => { s = Math.max(0, Math.floor(s || 0)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`; };
+export const fmtBytes = n => n >= 1e9 ? (n / 1e9).toFixed(1) + " GB" : (n / 1e6).toFixed(n >= 1e8 ? 0 : 1) + " MB";
+export const plural = (n, w) => `${n.toLocaleString()} ${w}${n === 1 ? "" : "s"}`;
+export const shuffled = a => { a = a.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; };
+export const clone = o => JSON.parse(JSON.stringify(o ?? null));
+// crypto.randomUUID only exists on HTTPS pages, and the player is usually opened over plain HTTP.
+export const uuid = () => crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2);
+
+export function load(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }
+export function store(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} }
+
+// Lets the player tell the UI what changed without importing it.
+const bus = {};
+export const on = (ev, fn) => { (bus[ev] ||= []).push(fn); };
+export const emit = (ev, ...args) => { for (const fn of bus[ev] || []) fn(...args); };
+
+export function toast(msg, ms = 2400) {
+  let t = $("#toast");
+  if (!t) {
+    t = document.createElement("div");
+    t.id = "toast";
+    document.body.append(t);
+  }
+  t.textContent = msg;
+  t.classList.add("show");
+  clearTimeout(t._h);
+  t._h = setTimeout(() => t.classList.remove("show"), ms);
+}
+
+export const ICON = {
+  play: '<svg viewBox="0 0 24 24"><path d="M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5z"/></svg>',
+  pause: '<svg viewBox="0 0 24 24"><rect x="5.5" y="4" width="4.5" height="16" rx="1.2"/><rect x="14" y="4" width="4.5" height="16" rx="1.2"/></svg>',
+  prev: '<svg viewBox="0 0 24 24"><rect x="4" y="5" width="2.5" height="14" rx="1"/><path d="M20 5.7v12.6a1 1 0 0 1-1.55.83L9 12.83a1 1 0 0 1 0-1.66l9.45-6.3A1 1 0 0 1 20 5.7z"/></svg>',
+  next: '<svg viewBox="0 0 24 24"><rect x="17.5" y="5" width="2.5" height="14" rx="1"/><path d="M4 5.7v12.6a1 1 0 0 0 1.55.83L15 12.83a1 1 0 0 0 0-1.66l-9.45-6.3A1 1 0 0 0 4 5.7z"/></svg>',
+  shuffle: '<svg viewBox="0 0 24 24"><path d="M17 3l4 4-4 4V8h-2.2c-1 0-1.9.5-2.5 1.3L7.6 16c-.9 1.3-2.4 2-4 2H2v-2h1.6c.9 0 1.8-.5 2.3-1.2l4.7-6.7C11.5 6.8 13 6 14.8 6H17V3zM2 6h1.6c1.6 0 3.1.8 4 2l.9 1.3-1.2 1.7-1.4-1.9A2.8 2.8 0 0 0 3.6 8H2V6zm12.3 9.7c.6.8 1.5 1.3 2.5 1.3H17v-3l4 4-4 4v-3h-.2c-1.7 0-3.3-.8-4.2-2.2l-.6-.8 1.2-1.7.1.4z"/></svg>',
+  repeat: '<svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4V6H7a2 2 0 0 0-2 2v3H3V8a4 4 0 0 1 4-4h10V1zM7 23l-4-4 4-4v3h10a2 2 0 0 0 2-2v-3h2v3a4 4 0 0 1-4 4H7v3z"/></svg>',
+  repeat1: '<svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4V6H7a2 2 0 0 0-2 2v3H3V8a4 4 0 0 1 4-4h10V1zM7 23l-4-4 4-4v3h10a2 2 0 0 0 2-2v-3h2v3a4 4 0 0 1-4 4H7v3z"/><path d="M11.2 9.6l1.8-.9h1.2v6.6h-1.6v-4.9l-1.4.6z"/></svg>',
+  mixer: '<svg viewBox="0 0 24 24"><path d="M6 3h2v6.2a3 3 0 0 1 0 5.6V21H6v-6.2a3 3 0 0 1 0-5.6V3zm10 0h2v2.2a3 3 0 0 1 0 5.6V21h-2V10.8a3 3 0 0 1 0-5.6V3zM7 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm10-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>',
+  queue: '<svg viewBox="0 0 24 24"><path d="M3 5h14v2H3zm0 6h14v2H3zm0 6h9v2H3zm13-1.5v-1.5l6 3.5-6 3.5V17z"/></svg>',
+  lyrics: '<svg viewBox="0 0 24 24"><path d="M12 2a4 4 0 0 1 4 4v5a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4zm-7 9h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.93V21h3v2H8v-2h3v-3.07A7 7 0 0 1 5 11z"/></svg>',
+  more: '<svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>',
+  download: '<svg viewBox="0 0 24 24"><path d="M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6V3zM4 19h16v2H4z"/></svg>',
+  busy: '<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9h-2.2A6.8 6.8 0 1 1 12 5.2V3z"/></svg>',
+};