diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000..4d0ed3537
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  push:
+    branches: [ ps-1.13, feat/** ]
+  pull_request:
+
+# Every step below calls a Makefile target. No test file is named here or in the
+# Makefile: `unittest discover` finds test/test_*.py and `node --test` finds
+# test/js/**/*.test.js. A new test runs without a change to either file.
+# `make test` runs all of it at once and is what you run before you push.
+
+jobs:
+  python:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - name: Check that the server files parse
+        run: make compile
+      - name: Run the Python tests
+        run: make test-py
+
+  frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Run the JavaScript tests
+        run: make test-js
+      - name: Check the JSDoc types
+        run: make typecheck
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 120000
index 000000000..fbf31d295
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+GUIDE.md
\ No newline at end of file
diff --git a/GEMINI.md b/GEMINI.md
new file mode 120000
index 000000000..fbf31d295
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1 @@
+GUIDE.md
\ No newline at end of file
diff --git a/GUIDE.md b/GUIDE.md
new file mode 100644
index 000000000..253969c4e
--- /dev/null
+++ b/GUIDE.md
@@ -0,0 +1,219 @@
+# mod-ui — the pi-stomp "ultimate" fork
+
+> This document is the single source of truth for *this* version of `mod-ui` — the one sitting at `/Users/cam/dev/mod-ui`, on branch `more-fixes`, with the PatchStorage integration. It is meant for Claude, Gemini, and any future coding agent that has to touch this code.
+
+## What this repo is
+
+This is a fork of [mod-audio/mod-ui](https://github.com/moddevices/mod-ui), the web UI + control layer for the MOD audio ecosystem. It runs as a Python/Tornado webserver and talks to `mod-host` over a socket. It discovers LV2 plugins and pedalboards via `lilv`, serves an HTML5 pedalboard editor, and pushes real-time state to connected browsers and hardware peers over WebSocket.
+
+This fork is customized for the **pi-stomp** guitar-pedal hardware platform. It lives as a sibling to `pi-stomp`, `pi-gen-pistomp`, `pistomp-recovery`, etc.
+
+### Why "ultimate"
+
+This branch is the accumulation of several feature/experimental branches that were merged together to make a single "do everything" target:
+
+- PatchStorage-based plugin/pedalboard store in the web UI
+- nested user pedalboard directories (`~/.pedalboards/<category>/<board>.pedalboard`)
+- output clipping indicator (WebSocket push) with mod-host meter flow-control fixes
+- WebSocket BPM/BBT rebroadcast between browser clients
+- local WebSocket clients (i.e. pi-stomp) skip meter flow-control and self-acknowledge `output_data_ready`
+- hardening around `param_set` / bypass when parameters do not exist
+
+The user describes this as the **"ultimate version"** — the richest feature set — but some features were discussed and never implemented. Those are documented below under [Features we talked about but did not build](#features-we-talked-about-but-did-not-build).
+
+## How to build / run locally
+
+This is a Linux project, but it has been built/tested on macOS for development. The C++ utils library is the only compiled component.
+
+```bash
+# Python deps
+python3 -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+
+# Native utils (lilv + jack + optional alsa)
+make -C utils
+```
+
+To run locally against a MOD Desktop / mod-host instance, set the expected environment variables. A typical local run:
+
+```bash
+export MOD_DEV_ENVIRONMENT=0
+export MOD_DEVICE_WEBSERVER_PORT=18181
+export MOD_HOST_PORT=5555
+export MOD_HOST_FEEDBACK_PORT=5556
+export MOD_DATA_DIR=$HOME/.mod-data
+export MOD_USER_PEDALBOARDS_DIR=$MOD_DATA_DIR/.pedalboards
+export MOD_USER_FILES_DIR=$MOD_DATA_DIR/user-files
+export MOD_KEYS_PATH=$MOD_DATA_DIR/keys/
+export MOD_HTML_DIR=$PWD/html
+export MOD_DEFAULT_PEDALBOARD=$PWD/default.pedalboard
+export MOD_CLOUD_API=https://api.moddevices.com/v2
+export PATCHSTORAGE_API_URL=https://patchstorage.com/api/beta/patches
+export PATCHSTORAGE_PLATFORM_ID=8046
+export PATCHSTORAGE_TARGET_ID=8280
+export JACK_PROMISCUOUS_SERVER=jack
+python3 server.py
+```
+
+On the device these values are injected by the `mod-ui.service` in `pi-gen-pistomp` (see `debpkgs/mod-ui/debian/mod-ui.mod-ui.service`).
+
+## Testing a branch on a pi-Stomp
+
+`./deploy.sh` copies this working tree over the packaged mod-ui on the device and restarts it; `./deploy.sh restore` puts the packaged version back. See [`docs/deploying-to-pistomp.md`](docs/deploying-to-pistomp.md) for the recipe and its limits.
+
+## Repo layout
+
+| Path | Purpose |
+|------|---------|
+| `mod/` | Core Python server: webserver, session, host logic, settings |
+| `mod/host.py` | Plugin/pedalboard host controller; most WS dispatch lives here |
+| `mod/session.py` | WebSocket session management, local-vs-remote client handling |
+| `mod/webserver.py` | HTTP endpoints and pedalboard/config API |
+| `mod/settings.py` | Environment-based defaults (PatchStorage IDs live here) |
+| `utils/` | C/C++ helpers compiled into `libmod_utils.so` |
+| `utils/utils_lilv.cpp` | Plugin/pedalboard discovery via lilv; nested pedalboards added here |
+| `utils/patchstorage.cpp` | C++ helpers for PatchStorage metadata |
+| `html/js/patchstorage.js` | Browser-side PatchStorage store UI and API client |
+| `docs/output-data-flow.md` | How `output_data_ready` / `data_finish` meter flow-control works |
+
+## Key features implemented in this fork
+
+### 1. PatchStorage integration
+
+The browser can open a **PatchStorage** tab to browse, install, update, and remove LV2 plugins and pedalboards from the cloud.
+
+- Default endpoint: `https://patchstorage.com/api/beta/patches`
+- Default platform: **8046** ("LV2 Plugins")
+- Default target: **8280** (`rpi-aarch64`) — the pi-stomp image is 64-bit ARM
+- These values are configured through environment variables (`PATCHSTORAGE_*`) and exposed to the frontend as globals in `html/index.html`.
+- Each installed patch writes a `patchstorage.json` into the bundle so the UI can detect "outdated" content and offer updates.
+
+> Historical note: the original hardcoded IDs `5027`/`5037` were deleted by PatchStorage. This fork already moved to the current IDs (`8046`/`8280`) via the systemd environment.
+
+### 2. Nested pedalboard directories
+
+Upstream mod-ui / lilv only loads pedalboards that are **immediate children** of each LV2_PATH entry. We added a bounded directory walk in `utils/utils_lilv.cpp` so boards can live one level deeper, e.g.
+
+```
+~/.pedalboards/
+  Live/
+    FuzzSong.pedalboard/
+  Studio/
+    CleanPlate.pedalboard/
+```
+
+The walk is intentionally defensive:
+- max 2 levels deep
+- skips hidden dirs, `.git`, `node_modules`, `__pycache__`
+- only appends a sub-folder to `LV2_PATH` if it directly contains at least one `*.pedalboard` child
+- caps each directory scan at 1024 entries and warns once
+
+### 3. Output clipping indicator
+
+A WebSocket message `clip_status <label> <0|1>` is sent when an output clips or clears. This rides on the existing `monitor_audio_levels` infrastructure in `mod-host`, but uses a separate `POSTPONED_AUDIO_CLIP` event so it does not re-enable the expensive per-parameter stream that pi-stomp disabled. The frontend and pi-stomp can light an LED from this single message.
+
+See `docs/output-data-flow.md` for the full meter/flow-control handshake.
+
+### 4. Local WebSocket clients bypass meter flow-control
+
+`mod/session.py` treats clients marked as local (pi-stomp) differently from browser tabs: they self-acknowledge `data_ready`, avoiding the stall that can happen when a browser tab is not keeping up.
+
+### 5. `param_set` / bypass safety
+
+If a plugin instance or parameter does not exist, `host.py` no longer raises; it logs and returns. This prevents crashes during race conditions (e.g. blend-mode snapshot switching, MIDI footswitch events arriving while a pedalboard is being torn down).
+
+## Architecture gotchas
+
+### Source of truth
+
+There are two copies of "current state" at any moment:
+
+1. **mod-ui / mod-host** — the actual JACK audio graph and LV2 parameters.
+2. **pi-stomp** — its own mirror used to drive the LCD, LEDs, and footswitch logic.
+
+pi-stomp synchronizes by:
+- polling `last.json` and the pedalboard manifest
+- reading WebSocket events (`param_set`, `pedalboard`, `snapshot`, `bypass`, etc.)
+- sending commands back over WebSocket or MIDI
+
+Any agent touching state-sync code should read `docs/output-data-flow.md` and the `mod/session.py` local-client logic first.
+
+### WebSocket echo problem
+
+When pi-stomp sends a command to mod-ui over WebSocket, mod-ui broadcasts the resulting state change back to **all** clients, including the sender. pi-stomp has built echo-suppression machinery for some message types. If you add a new WebSocket-driven action, consider whether the sender needs to ignore its own echo.
+
+### Nested pedalboards vs. upstream
+
+The nested discovery is implemented in C++ inside `utils/utils_lilv.cpp`. It does **not** change how pedalboards are saved or how the manifest is parsed — it only changes which bundles are visible to lilv. Tests that run against the Python layer will not exercise this unless they also build `libmod_utils.so`.
+
+## Features we talked about but did not build
+
+These came up in conversation and were either rejected or left as future work. Do not re-implement them without checking with the user.
+
+### 1. Runtime PatchStorage slug resolution
+
+The idea was to resolve `platform_id`/`target_id` from stable slugs (`lv2-plugins`, `rpi-aarch64`) at startup, so a future PatchStorage renumbering would not silently break the store. The user rejected this; the current approach is to set the numeric IDs as environment variables in `pi-gen-pistomp/debpkgs/mod-ui/debian/mod-ui.mod-ui.service`.
+
+### 2. Self-hosted / mirror plugin catalog
+
+We discussed bundling a baseline plugin set in the OS image and/or maintaining a self-hosted mirror of the PatchStorage catalog as insurance against Blokas/availability risk. Not implemented — PatchStorage remains the primary channel.
+
+### 3. Pedalboard remote-git updates from recovery
+
+`pistomp-recovery` had a `PedalboardFacet.remote_updates()` path that duplicated PatchStorage. The decision was to **remove** that and let PatchStorage own pedalboard content delivery. Recovery should keep only stamp/rollback/factory-reset for pedalboards.
+
+### 4. Input clipping indicator
+
+Output clipping is wired up; input clipping was discussed but not implemented. It would require monitoring `system:capture_*` or a dedicated `tinygain` plugin placed at the input.
+
+### 5. Plugin "factory reset" / cache cap in recovery
+
+We discussed adding a Plugins facet to `pistomp-recovery` that could reset user-installed LV2 plugins back to the factory image baseline and possibly cap the cache size. Some scaffolding was started but not finished.
+
+### 6. Browser-side PatchStorage store redesign
+
+A more discoverable/filterable store UI, dependency handling between plugin bundles, and install-queue UX were discussed but not built. The current store is functional but minimal.
+
+## Environment variables you should know
+
+| Variable | Default / typical value | Meaning |
+|----------|-------------------------|---------|
+| `MOD_USER_PEDALBOARDS_DIR` | `~/.pedalboards` or `/home/pistomp/data/.pedalboards` | Where user pedalboards live |
+| `MOD_FACTORY_PEDALBOARDS_DIR` | `/usr/share/mod/pedalboards/` | Read-only factory boards |
+| `PATCHSTORAGE_API_URL` | `https://patchstorage.com/api/beta/patches` | PatchStorage API root |
+| `PATCHSTORAGE_PLATFORM_ID` | `8046` | Platform taxonomy ID |
+| `PATCHSTORAGE_TARGET_ID` | `8280` | Target/arch taxonomy ID (`rpi-aarch64`) |
+| `MOD_DEVICE_WEBSERVER_PORT` | `80` on device, `18181` locally | HTTP port |
+| `MOD_HOST_PORT` / `MOD_HOST_FEEDBACK_PORT` | `5555` / `5556` | mod-host command / feedback sockets |
+| `MOD_LOG` | `0` | Verbose logging when non-zero |
+
+## Coding conventions
+
+- Python: follow the existing style in `mod/`. No hard rule on type hints, but new files in recovery-related experiments used them.
+- C++: compiled with `-Wall -Wextra -Wshadow -std=gnu++0x`. Keep changes minimal; the file is large.
+- Commits are small and descriptive. The current branch is `more-fixes`.
+- Do not run `git commit` / `git push` / `git rebase` unless explicitly asked.
+
+## Common test commands
+
+```bash
+# Compile the utils library
+make -C utils clean && make -C utils
+
+# Python lint/smoke (no formal test suite in mod-ui itself)
+python3 -m py_compile mod/host.py mod/session.py mod/webserver.py
+```x
+
+The real integration tests live in `../pi-stomp` (a `uv`/`pytest` project). Any change to WebSocket message format or pedalboard loading should be validated there.
+
+## Related repos
+
+- `../pi-stomp` — the LCD/footswitch/encoder application that talks to this mod-ui over WebSocket and MIDI.
+- `../pi-gen-pistomp` — image generation and OS build; owns the Debian packaging and systemd units (including `mod-ui.service`).
+- `../pistomp-recovery` — recovery/rollback UI; should not duplicate PatchStorage pedalboard updates.
+- `../mod-host` — the LV2 plugin host this UI controls.
+
+## Last updated
+
+2026-06-23
diff --git a/Makefile b/Makefile
new file mode 100644
index 000000000..9a239e337
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,60 @@
+# pi-Stomp: the checks of this repository.
+#
+# Each target finds its own files. Do not write a file name here and do not
+# write a file name in .github/workflows/ci.yml. A new test must run without a
+# change to this file.
+#
+# Note for the packaging: debian/rules in pi-gen-pistomp overrides every
+# dh_auto_* step, so debhelper does not run these targets.
+
+PYTHON ?= python3
+NODE ?= node
+
+# The server files that must compile. py_compile reads one file at a time, so
+# this list is not test discovery; it is a syntax gate on the files that the
+# device runs first.
+PY_COMPILE_FILES = mod/host.py mod/session.py mod/webserver.py mod/sfzbuilder.py setup.py
+
+# unittest discover reads every test*.py file under test/.
+# node --test finds every *.test.js file below the directory that it runs in.
+# The recipe changes to JS_TEST_DIR first, because a directory that you give to
+# node --test as an argument is read as a file, and a glob needs a new version
+# of node. This form works with node 18 and later.
+JS_TEST_DIR = test/js
+
+.PHONY: test test-py test-js typecheck smoke compile utils clean-utils help
+
+## test: run every check
+test: compile test-py test-js typecheck smoke
+
+## compile: check that the server files parse
+compile:
+	$(PYTHON) -m py_compile $(PY_COMPILE_FILES)
+
+## test-py: run every Python test under test/
+test-py:
+	$(PYTHON) -m unittest discover -s test -v
+
+## test-js: run every JavaScript test under test/js/
+test-js:
+	cd $(JS_TEST_DIR) && $(NODE) --test
+
+## typecheck: check the JSDoc types of the islands
+typecheck:
+	npx -y -p typescript@5 tsc --noEmit
+
+## smoke: draw the SFZ builder in headless Chrome and check what it drew
+smoke:
+	./test/browser/run.sh
+
+## utils: build libmod_utils.so
+utils:
+	$(MAKE) -C utils
+
+## clean-utils: remove the build of libmod_utils.so
+clean-utils:
+	$(MAKE) -C utils clean
+
+## help: show the targets
+help:
+	@grep -E '^## ' $(MAKEFILE_LIST) | sed 's/^## /  /'
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 000000000..ef011ba0c
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,156 @@
+#!/usr/bin/env bash
+# Deploy this mod-ui working tree onto a pi-Stomp over the packaged install, and
+# put the packaged version back when you are done. See docs/deploying-to-pistomp.md.
+# Override PISTOMP_HOST / PISTOMP_USER if your device differs from the default.
+#
+# Usage:
+#   ./deploy.sh                 # sync Python + HTML, restart service, wait until it serves
+#   ./deploy.sh --build-utils   # also rsync utils/ source, build on device, install .so
+#   ./deploy.sh status          # packaged version, what is deployed over it, service state
+#   ./deploy.sh logs [args]     # follow the mod-ui journal (args go to journalctl)
+#   ./deploy.sh snapshot        # save the packaged install (done automatically on first deploy)
+#   ./deploy.sh restore         # put the snapshot back and restart
+set -euo pipefail
+
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
+HOST="${PISTOMP_HOST:-pistomp.local}"
+USER="${PISTOMP_USER:-pistomp}"
+TARGET="${USER}@${HOST}"
+
+VENV="/opt/pistomp/venvs/mod-ui"
+HTML_DIR="/opt/pistomp/mod-ui/html"
+MARKER="/opt/pistomp/mod-ui/DEV-DEPLOY"
+SNAPSHOT_DIR="/home/${USER}/mod-ui-snapshots"
+
+# One SSH connection for the whole run: one password prompt at most, and faster.
+SSH_OPTS=(-o ControlMaster=auto -o "ControlPath=/tmp/mod-ui-deploy-%r@%h:%p" -o ControlPersist=60 -o ConnectTimeout=10)
+export RSYNC_RSH="ssh ${SSH_OPTS[*]}"
+
+remote() { ssh "${SSH_OPTS[@]}" "${TARGET}" "$@"; }
+
+connect() {
+    if ! remote true; then
+        echo "error: cannot reach ${TARGET}. Is the pi-Stomp on the network? Set PISTOMP_HOST to its IP if mDNS fails." >&2
+        exit 1
+    fi
+    PKG_VERSION="$(remote "dpkg-query -W -f='\${Version}' mod-ui")"
+    PYTHON_VERSION="$(remote "ls ${VENV}/lib/" | grep -oE 'python[0-9]+\.[0-9]+' | head -1 | grep -oE '[0-9]+\.[0-9]+')"
+    SITE_PACKAGES="${VENV}/lib/python${PYTHON_VERSION}/site-packages"
+    SNAPSHOT="${SNAPSHOT_DIR}/mod-ui-${PKG_VERSION}.tar.gz"
+}
+
+# Must only ever capture the packaged files: refuses while a dev deploy is in place.
+snapshot() {
+    if remote "test -f ${SNAPSHOT}"; then
+        echo "==> Snapshot of packaged mod-ui ${PKG_VERSION} already at ${SNAPSHOT}"
+        return
+    fi
+    # A marker from an older package version means an upgrade already replaced the dev files.
+    if remote "grep -qx 'package=${PKG_VERSION}' ${MARKER} 2>/dev/null"; then
+        echo "error: a dev build is deployed and there is no snapshot of mod-ui ${PKG_VERSION}." >&2
+        echo "       Reinstall the package first (sudo apt install --reinstall mod-ui), then retry." >&2
+        exit 1
+    fi
+    echo "==> Saving packaged mod-ui ${PKG_VERSION} to ${SNAPSHOT}"
+    remote "mkdir -p ${SNAPSHOT_DIR} && tar -C / -czf ${SNAPSHOT}.tmp \
+        ${SITE_PACKAGES#/}/mod ${SITE_PACKAGES#/}/modtools ${HTML_DIR#/} && mv ${SNAPSHOT}.tmp ${SNAPSHOT}"
+}
+
+wait_until_serving() {
+    echo "==> Waiting for mod-ui to answer on port 80"
+    for _ in $(seq 1 45); do
+        if remote "${VENV}/bin/python -c \"import urllib.request; urllib.request.urlopen('http://localhost/', timeout=3)\"" 2>/dev/null; then
+            echo "==> mod-ui is up: http://${HOST}/"
+            return
+        fi
+        sleep 2
+    done
+    echo "error: mod-ui did not come up within 90s. Last journal lines:" >&2
+    remote "sudo journalctl -u mod-ui -n 40 --no-pager" >&2 || true
+    echo "Put the packaged version back with: ./deploy.sh restore" >&2
+    exit 1
+}
+
+deploy() {
+    local build_utils="${1:-}"
+
+    echo "==> Checking Python syntax locally"
+    python3 -W ignore -m py_compile mod/*.py modtools/*.py
+
+    connect
+    remote "command -v rsync >/dev/null" || { echo "error: rsync is not installed on the device (sudo apt install rsync)" >&2; exit 1; }
+    snapshot
+
+    local sha branch dirty=""
+    sha="$(git rev-parse --short HEAD)"
+    branch="$(git rev-parse --abbrev-ref HEAD)"
+    [[ -n "$(git status --porcelain)" ]] && dirty=" + uncommitted changes"
+    echo "==> Deploying ${branch} @ ${sha}${dirty} to ${TARGET} (Python ${PYTHON_VERSION})"
+
+    rsync -az --delete --exclude='__pycache__' --exclude='*.pyc' \
+        mod/ "${TARGET}:${SITE_PACKAGES}/mod/"
+
+    # Exclude libmod_utils.so: it is ARM64 and must be built on the device (see --build-utils).
+    rsync -az --delete --exclude='__pycache__' --exclude='*.pyc' --exclude='libmod_utils.so' \
+        modtools/ "${TARGET}:${SITE_PACKAGES}/modtools/"
+
+    rsync -az --delete --exclude='node_modules' --exclude='.DS_Store' \
+        html/ "${TARGET}:${HTML_DIR}/"
+
+    if [[ "${build_utils}" == "--build-utils" ]]; then
+        echo "==> Building utils on device"
+        rsync -az --delete --exclude='*.o' --exclude='*.so' \
+            utils/ "${TARGET}:/tmp/mod-ui-utils/"
+        remote "make -C /tmp/mod-ui-utils && cp /tmp/mod-ui-utils/libmod_utils.so ${SITE_PACKAGES}/modtools/"
+    fi
+
+    remote "printf '%s\n' 'branch=${branch}' 'commit=${sha}${dirty}' 'package=${PKG_VERSION}' \
+        'deployed=$(date '+%Y-%m-%d %H:%M:%S %z')' 'from=$(whoami)@$(hostname -s)' > ${MARKER}"
+
+    echo "==> Restarting mod-ui"
+    remote "sudo systemctl restart mod-ui"
+    wait_until_serving
+}
+
+restore() {
+    connect
+    if ! remote "test -f ${SNAPSHOT}"; then
+        echo "error: no snapshot of mod-ui ${PKG_VERSION} at ${SNAPSHOT}." >&2
+        echo "       Fall back to: ssh ${TARGET} sudo apt install --reinstall mod-ui" >&2
+        exit 1
+    fi
+    echo "==> Restoring packaged mod-ui ${PKG_VERSION} from ${SNAPSHOT}"
+    remote "rm -rf ${SITE_PACKAGES}/mod ${SITE_PACKAGES}/modtools ${HTML_DIR} \
+        && tar -C / -xzf ${SNAPSHOT} && rm -f ${MARKER}"
+    echo "==> Restarting mod-ui"
+    remote "sudo systemctl restart mod-ui"
+    wait_until_serving
+}
+
+status() {
+    connect
+    echo "Device:          ${TARGET}"
+    echo "Package:         mod-ui ${PKG_VERSION}"
+    if remote "test -f ${MARKER}"; then
+        echo "Dev deploy:      yes"
+        remote "sed 's/^/                 /' ${MARKER}"
+        if ! remote "grep -qx 'package=${PKG_VERSION}' ${MARKER}"; then
+            echo "                 (the package was upgraded after this deploy, so its files have replaced the dev build)"
+        fi
+    else
+        echo "Dev deploy:      no (packaged files)"
+    fi
+    echo "Snapshots:       $(remote "ls ${SNAPSHOT_DIR} 2>/dev/null | tr '\n' ' '")"
+    echo "Service:         $(remote "systemctl is-active mod-ui" || true)"
+}
+
+case "${1:-}" in
+    ""|--build-utils) deploy "${1:-}" ;;
+    status)           status ;;
+    logs)             shift; ssh "${SSH_OPTS[@]}" -t "${TARGET}" "sudo journalctl -u mod-ui ${*:--f}" ;;
+    snapshot)         connect; snapshot ;;
+    restore)          restore ;;
+    -h|--help)        sed -n '2,12p' "$0" | sed 's/^# \{0,1\}//' ;;
+    *)                echo "unknown command: $1 (try --help)" >&2; exit 1 ;;
+esac
diff --git a/docs/deploying-to-pistomp.md b/docs/deploying-to-pistomp.md
new file mode 100644
index 000000000..341a303ca
--- /dev/null
+++ b/docs/deploying-to-pistomp.md
@@ -0,0 +1,76 @@
+# Testing a mod-ui branch on a pi-Stomp
+
+`deploy.sh` copies this working tree over the mod-ui that the `mod-ui` Debian
+package installed on the device, restarts the service, and can put the packaged
+version back afterwards. Nothing is rebuilt or repackaged, so a round trip takes
+seconds.
+
+## What gets replaced
+
+The package (built by `pi-gen-pistomp/debpkgs/mod-ui`) installs mod-ui in three
+places. `deploy.sh` overwrites the first two and leaves the third alone:
+
+| On the device | From this repo | Deployed |
+|---------------|----------------|----------|
+| `/opt/pistomp/venvs/mod-ui/lib/python3.11/site-packages/{mod,modtools}` | `mod/`, `modtools/` | always |
+| `/opt/pistomp/mod-ui/html` (`MOD_HTML_DIR`) | `html/` | always |
+| `.../site-packages/modtools/libmod_utils.so` | `utils/` (C++) | only with `--build-utils` |
+
+The service unit, its environment and the Python dependencies in the venv stay
+as packaged.
+
+## The recipe
+
+```bash
+git switch my-branch
+./deploy.sh            # snapshot the packaged files (first time only), copy, restart, wait for port 80
+# test at http://pistomp.local/ — a normal reload picks up new JS/CSS (the ?v= key changes on each deploy)
+./deploy.sh logs       # follow the mod-ui journal while you test
+# edit, then ./deploy.sh again; repeat
+./deploy.sh status     # what is on the device right now
+./deploy.sh restore    # back to the packaged mod-ui when you are done
+```
+
+Uncommitted changes are deployed too; `status` says so. The device is
+`pistomp@pistomp.local` unless you set `PISTOMP_HOST` / `PISTOMP_USER`
+(use the IP address if mDNS does not resolve).
+
+## Snapshots and markers
+
+- **Snapshot.** Before the first deploy, the packaged `mod`, `modtools` and `html`
+  are saved to `~pistomp/mod-ui-snapshots/mod-ui-<package version>.tar.gz`.
+  Later deploys reuse it. `restore` puts it back. It is keyed by package version,
+  so after an `apt upgrade` of mod-ui the next deploy takes a fresh one.
+- **Marker.** Each deploy writes `/opt/pistomp/mod-ui/DEV-DEPLOY` (branch, commit,
+  time, package version). `restore` removes it. `deploy.sh` will not snapshot
+  while a dev build sits on top of the installed package version, so a dev build
+  is never saved as "packaged".
+  If you hit that error, run `sudo apt install --reinstall mod-ui` on the device
+  and deploy again.
+
+## Things to know
+
+- **A package upgrade overwrites a dev deploy.** `status` notices and says so.
+- **Crash loops start recovery.** The unit has `OnFailure=pistomp-recovery.service`
+  and `StartLimitBurst=3` in 60s. If the deployed code dies on startup three
+  times, the device drops into the recovery UI. `deploy.sh` waits 90s for port
+  80, prints the journal if it never answers, and you run `./deploy.sh restore`.
+- **Edited `.less`? Rebuild `main.css` before deploying.** The device serves
+  the compiled `html/css/main.css` and never compiles `.less` itself. This
+  reproduces the committed file exactly:
+
+  ```bash
+  cd html/css
+  npm install --no-save bootstrap@3.4.1
+  npx -y -p less@2 lessc --compress less/main.less main.css
+  ```
+
+- **C++ changes (`utils/`) need `--build-utils`.** The `.so` must be built for
+  ARM64 on the device, which needs `make`, `g++`, `liblilv-dev` and
+  `libjack-jackd2-dev` there. Without the flag the packaged `.so` is kept, which
+  is right as long as your branch does not touch `utils/` beyond what the
+  installed package was built from.
+- **Dependency changes are not deployed.** If a branch needs a new Python
+  package or service environment variable, test it by building the package
+  instead (set `MOD_UI_BRANCH` in `pi-gen-pistomp/config.sh` and run
+  `debpkgs/mod-ui/build.sh`).
diff --git a/docs/frontend-architecture.md b/docs/frontend-architecture.md
new file mode 100644
index 000000000..3f94bb10a
--- /dev/null
+++ b/docs/frontend-architecture.md
@@ -0,0 +1,617 @@
+# Frontend Architecture
+
+Status: in use. The SFZ builder is built this way and continuous integration
+holds the rules below.
+Branch: `feat/sfzbuilder`.
+Date: 2026-09-03. Last change: 2026-09-04.
+
+---
+
+## 1. Purpose
+
+This document gives the design for new frontend code in mod-ui.
+It also gives the reasons for the design.
+The SFZ builder is the first feature that uses this design.
+
+## 2. Technical names
+
+This document uses these technical names:
+
+- **Legacy code**: the JavaScript files in `html/js/`. This code is in the global scope.
+- **Island**: a group of files for one feature. An island has no global names.
+- **Seam**: the one point where the legacy code starts an island.
+- **Token**: a CSS custom property that holds one design value.
+- **Model**: a file that has only pure functions. A model does not touch the DOM.
+
+## 3. The problem
+
+The frontend has 17726 lines of JavaScript in 29 files.
+All of this code is in the global scope.
+The file `index.html` loads the code with 41 script elements.
+The order of these elements is important.
+
+The repository has no module system and no bundler.
+It has no JavaScript tests.
+It has no continuous integration.
+It has no configuration file for a linter, a formatter or a type checker.
+
+These conditions cause four problems:
+
+1. You cannot find the callers of a function, because all names are global.
+2. You cannot test the logic, because the logic and the DOM code are in the same functions.
+3. You must change `index.html` for each new feature, because that file holds all the markup.
+4. The tools cannot help you, because no type checker examines the code.
+
+The team will not rewrite the legacy code.
+The file `pedalboard.js` has 3040 lines.
+The file `modgui.js` has 2711 lines.
+These files must continue to work.
+
+## 4. The proposal
+
+Write each new feature as an island.
+Do not change the legacy code.
+The legacy code and the islands stay together for a long time.
+This is the correct condition. It is not a temporary condition.
+
+These are the seven rules.
+
+### 4.1 Use ES modules. Do not use a bundler
+
+Write islands as ES modules.
+The browser loads these modules with the `import` keyword.
+Tornado sends JavaScript files with the correct type.
+
+A bundler needs a `package.json` file in the root directory.
+A bundler also needs changes to the device package in `pi-gen-pistomp`.
+We do not do this work now.
+Write the code so that a bundler is easy to add later.
+
+### 4.2 Keep one seam
+
+The legacy code starts an island at one point only.
+An island does not read global variables directly.
+If an island needs data from the legacy code, write an adapter file.
+The adapter is the only file that knows the global names.
+
+### 4.3 Each island makes its own markup
+
+Today the markup is in `index.html`. The JavaScript finds the markup by ID.
+This is the reason that `index.html` is very large.
+
+An island gets one empty element from `index.html`.
+The island makes all of its other elements.
+This rule makes `index.html` smaller with each new feature.
+
+### 4.4 Use JSDoc types and `// @ts-check`
+
+Put `// @ts-check` at the top of each island file.
+Write the types in JSDoc comments.
+The type checker then finds errors in the editor and in continuous integration.
+
+This method needs no build step.
+The files stay as plain JavaScript. The browser loads them directly.
+TypeScript gives more, but TypeScript needs a bundler.
+A change from JSDoc to TypeScript is mechanical. Do it when a bundler exists.
+
+### 4.5 Use CSS tokens
+
+The file `less/variables.less` has 841 lines.
+These are LESS variables. LESS variables are constants. They are gone after the compile.
+
+An island puts its design values in CSS custom properties.
+The LESS rules then read these properties.
+Custom properties operate at run time. A LESS variable does not exist after the
+compile, so nothing can read it and nothing can change it.
+
+Three things follow from that, and they are the reason for the rule:
+
+* One value changes every rule that reads it. The accent of the SFZ builder
+  moved from orange to purple in one line.
+* A media query, or a class on the panel, can give a token a different value.
+  A LESS variable cannot do this at all.
+* A test can read a token. See the note on the accent below.
+
+mod-ui is a web page in a browser -- a laptop, and sometimes a tablet or a
+phone. It is **not** what the LCD of the pi-stomp shows: that screen belongs to
+the `pi-stomp` application, which talks to this server over WebSocket and MIDI
+and draws nothing from `html/`. Do not size a panel for that LCD.
+
+Put the tokens on `:root`, not on the root element of the island, and start
+every name with the name of the island, for example `--sfz-`.
+A token on the island cannot be read outside it, and jQuery UI puts the helper
+of a drag on the `body`, which is outside it.
+A `var()` that does not resolve makes the whole property invalid, so the helper
+of the SFZ builder was black text on nothing.
+The prefix is what keeps a token at the root from meeting a legacy name.
+
+A test names a token. A test never names the value of a token.
+The smoke test of the SFZ builder held `rgb(242, 148, 70)` in two places, and
+both broke on the day the accent changed, although nothing was wrong.
+It now reads `--sfz-accent` through a probe element, which also proves the token
+reaches the `body`, which is the fault the check was written for.
+
+### 4.6 Keep the model pure. Keep the view thin
+
+Put the calculations in a model file.
+The model has no DOM code and no network code.
+Test the model with the `node:test` module.
+
+Do not write a unit test for the elements that the view makes.
+The cost of these tests is high. The value is low.
+
+Write one smoke test instead. It draws the panel in headless Chrome and asks the
+questions that only a browser can answer: the computed style, where the focus
+sits, the tab order, and a drag from a list onto a pad.
+`test/browser/` holds it and `make smoke` runs it.
+This test is cheap because there is one of it, and it has found faults that no
+unit test could reach: a stylesheet that did not load, a value that changed the
+width of its own control, and a control that the keyboard could not reach.
+
+A check in this test says what it wants, not what the code does today.
+When a check fails, read it again before you change the panel. Two checks of the
+tab order were themselves wrong: one assumed that pad 1 held controls, and one
+let the last pad reach past the grid to the end of the panel.
+
+The page answers its own `confirm`. A headless browser stops on a dialog and the
+run does not end, so the test replaces `window.confirm` once at the top, keeps
+the answer in a variable, and keeps the question in another. A check that wants
+the other answer sets the variable and puts it back. Do the same for `prompt`
+and `alert` if a panel ever opens one.
+
+### 4.7 Make the state explicit
+
+Keep the state in one object.
+Change the state with one function.
+The view is a function of the state.
+
+This is not a framework. This is approximately 30 lines of code.
+The result is one place to write log messages. It is also one place to stop the debugger.
+
+**A control sends what it changed, not the object it was drawn from.**
+Some controls must not draw the panel again. The gain of a pad in the SFZ
+builder is one: a redraw takes the focus out of the box you are typing in.
+The first version let those controls write into the pad object directly, which
+kept the panel still but put the change outside the store, so nothing that
+watches the store -- the mark that says the work is unsaved, a log line, the
+debugger -- ever saw it. It also left each control holding an object that the
+store was free to replace.
+Send the index and the one field instead, and let the store make the new pad.
+A control that changes nothing the state holds -- how many pads fit on a line,
+which is how you look at the bank rather than what the bank is -- stays out of
+the store and out of the flag.
+
+**An answer belongs to the view that asked for it.**
+An island that asks for three things at once, and lets you change what it is
+showing while they are in the air, will get them back out of order.
+The SFZ builder asks for the sample list, the files of the bank and the pad
+layout in three requests; click bank A and then bank B and the answers for A
+can land last and draw the pads of A over the bank of B.
+Keep a number that counts the views. Each request keeps the number the panel had
+when it went out, and an answer that comes back to a different number is dropped
+-- the request that replaced it is already on its way.
+Raise the number wherever what the answers are for changes: a new bank, a new
+sample source, a bank that goes away.
+The smoke test holds one bank's answer back, clicks past it, and asks that the
+answer never lands.
+
+### 4.8 Vendor the dependencies
+
+Do not use npm for browser code.
+Do not load a file from a CDN. The device is frequently offline.
+
+If an island needs a third-party library, do these steps:
+
+1. Make sure that the library has an ES module build.
+2. Copy the file into `html/js/app/vendor/`.
+3. Write the version and the source URL in a comment at the top of the file.
+4. Import the file with a relative path.
+
+Prefer the browser APIs.
+A small quantity of your own code is better than a large dependency.
+Example: the Web Audio API can calculate the peaks for a waveform.
+
+### 4.9 Put each new directory in `setup.py`
+
+`setup.py` gives the file list of the package.
+It names each directory of `html/` with a glob that is **not** recursive.
+
+    (('share/mod/html/js'), glob('html/js/*.js')),
+
+A new directory is thus absent from the package.
+The server on the device then gives 404 for each file in it.
+
+An island makes all of its own markup (rule 4.3).
+Thus a file that is absent gives an empty panel and **no other sign**.
+This is a hard fault to find.
+
+When you make an island, do these steps:
+
+1. Add one line for the code: `glob('html/js/app/<feature>/*.js')`.
+2. Add one line for the style: `glob('html/js/app/<feature>/*.css')`.
+3. Run `python3 -m unittest discover -s test -p "test_setup_data_files.py"`.
+
+`test/test_setup_data_files.py` runs the same globs that `setup.py` runs and
+asks that each file under `html/js/app/` is in one of them. CI runs this test.
+
+The seam also writes a message on the panel when the island does not load, so
+the next fault of this class is visible in the browser.
+
+### 4.10 Give the panel back to the keyboard
+
+`main.less` holds this rule:
+
+    * {
+      outline: 0 !important
+    }
+
+It takes the focus ring that the browser draws off every element of the page,
+and thus off every island.
+A person on the keyboard then has no sign at all of where the focus sits.
+
+An island puts a ring back, inside itself only:
+
+    #sfzbuilder-library :focus {
+      outline: 2px solid var(--sfz-focus) !important;
+      outline-offset: -2px;
+    }
+    #sfzbuilder-library :focus:not(:focus-visible) {
+      outline: 0 !important;
+    }
+
+The `!important` is not decoration. Nothing except `!important` beats an
+`!important` declaration, and the rule above is the one that has to win.
+The offset is negative so that the ring is drawn inside the edge of the element:
+a ring outside the edge is cut by any list or grid that scrolls.
+The second rule takes the ring off a press, which matters wherever the page is
+opened by touch -- a tablet or a phone -- where a tap would else leave a ring
+behind.
+A browser that does not know `:focus-visible` drops that rule and shows the ring
+for a press as well, which is the safe way for it to fail.
+
+Then three rules about the elements themselves.
+
+**An element that takes a click must take focus.**
+A `div` or a `li` with an `onclick` and no `tabindex` cannot be reached by the
+keyboard, and an element that cannot hold the focus cannot show a focus ring.
+Give it `tabindex="0"`, a role, and the two keys that activate a button.
+`clickable()` in `dom.js` does all three.
+Act on a key only when the element itself has the focus: a press on a button
+inside it sends a click of its own, and the keydown goes up to the element as
+well, so without the test it acts two times.
+
+**Do not put a role on a container that drops what is inside it.**
+The children of `button`, `option`, `tab`, `menuitem`, `checkbox`, `radio` and
+`switch` are presentational: a screen reader is free to read the element as one
+piece of text and drop every control inside it.
+A pad of the SFZ builder holds nine controls and wore `role="button"` for a
+while, which hid all nine.
+A pad is a `group`. A sample row keeps the `listitem` that a `li` in a `ul`
+already has. A bank row holds text only, so it is a `button`.
+An element that gains a control while it is open, such as the note stepper when
+a click turns it into a field, drops its role while the field is there.
+
+**Keep the order of the document.**
+Do not write a positive `tabindex`. It pulls the element in front of the whole
+page. Do not write a negative one either, which takes the control out of reach.
+`tabindex="0"` everywhere means the order is the order you drew the elements in.
+A long panel is thus a long tab order -- the SFZ builder has about ten stops for
+each pad it holds -- and that is accepted for now. A shorter path is a question
+of its own, in section 7.
+
+### 4.11 Take down with jQuery what you put up with jQuery
+
+An island writes its own elements with the browser API (rule 4.3), and
+`clear()` in `dom.js` removes them with `removeChild`.
+
+This is wrong for an element that carries a jQuery UI widget.
+jQuery UI 1.10 keeps a `draggable` and a `droppable` in `$.ui.ddmanager` and in
+the jQuery data cache, and it removes them only through the `cleanData` hook of
+jQuery, which a native `removeChild` never runs.
+The entries thus stay after the element is gone. They hold the element, so it is
+never collected, and jQuery UI walks the whole list of droppables on each move
+of a drag.
+
+Use the jQuery `empty()` or `remove()` on any subtree that holds a widget, or
+destroy each widget before you remove it.
+
+`clear()` in `dom.js` is the one place an island takes elements down, so it
+calls the jQuery `empty()` when jQuery is there and falls back to `removeChild`
+when it is not. An island that keeps its teardown in one function of its own
+gets this right everywhere at once.
+
+The smoke test counts the entries in `$.ui.ddmanager` and in the jQuery data
+cache across eight redraws and asks that neither one grows. Before the fix, the
+pads and the sample rows of the SFZ builder leaked eighty droppables and
+ninety-six data entries over those eight draws, and the panel draws again on
+every click of a pad and every keystroke of the filter.
+
+### 4.12 Read what `main.less` already declares on every element
+
+`main.less` holds a second rule of the same shape as the one in 4.10:
+
+    * {
+      font-family: "cooper hewitt", Sans-serif !important;
+    }
+
+A universal selector with `!important` is the strongest thing a stylesheet can
+say about a property.
+It is not beaten by a longer selector, by a later rule, or by the identifier
+that every island rule starts with.
+It also lands on each element of the panel one by one, so it beats inheritance
+as well: the island named `var(--sfz-mono)` on `#sfzbuilder-library`, the rule
+above named the page font on every child of it, and the child won.
+The panel thus drew in the page font from the day it was written, and read
+nothing at all from its two font tokens.
+Nothing failed and nothing was logged; the header was where you saw it, as a
+title in the wrong font, wide enough in that font to push the tool row onto a
+line of its own.
+
+Two things follow.
+
+**Grep `main.less` for `!important` before you write a stylesheet.**
+There are only a few such rules and they are the ones that will silently
+overrule you. Today they cover `outline` and `font-family`.
+
+**A property you have to win, you win on every element, not on the panel.**
+
+    #sfzbuilder-library,
+    #sfzbuilder-library * {
+      font-family: var(--sfz-mono) !important;
+    }
+
+The descendant half of the selector is what does the work.
+A later rule of the island that names a class -- the status line asks for the
+sans token -- still wins, because a class beats the `*`.
+An element the island puts outside the panel needs the same treatment: the drag
+helper of the SFZ builder lives on the body and carries a pair of rules of its
+own.
+
+**Have a test read it.**
+A rule that loses is invisible in the file, so the smoke test reads the computed
+`font-family` of the title and of an element nested inside the panel and
+compares each against the token, as 4.5 asks.
+The nested element is the part that matters: the panel had the right family on
+itself while everything inside it had the page font.
+
+## 5. Examples
+
+### 5.1 The seam
+
+The island supplies a `mount` function:
+
+```js
+// html/js/app/sfzbuilder/mount.js
+// @ts-check
+
+/**
+ * Puts the SFZ builder in an element.
+ * @param {HTMLElement} root An empty element.
+ * @returns {{ destroy: () => void }}
+ */
+export function mount(root) { /* ... */ }
+```
+
+The legacy code calls this function with a dynamic import:
+
+```js
+// html/js/desktop.js  (legacy)
+JqueryClass('sfzBuilderBox', {
+    init: function () {
+        var self = $(this)
+        import('./app/sfzbuilder/mount.js').then(function (module) {
+            self.data('island', module.mount(self[0]))
+        })
+    }
+})
+```
+
+A dynamic import operates in a classic script.
+Thus `index.html` needs no new script element.
+
+### 5.2 The model and its test
+
+```js
+// html/js/app/sfzbuilder/model.js
+// @ts-check
+
+/**
+ * Changes the number of pads. Each pad keeps its index.
+ * @param {(Slot|null)[]} slots
+ * @param {number} count The new number of pads, 1 to 128.
+ * @returns {(Slot|null)[]} A new array. The input array does not change.
+ */
+export function resizePads(slots, count) {
+    const next = []
+    for (let i = 0; i < count; i++) next.push(slots[i] ?? null)
+    return next
+}
+```
+
+```js
+// test/js/model.test.js
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { resizePads } from '../../html/js/app/sfzbuilder/model.js'
+
+test('resizePads keeps each pad at its index', () => {
+    const slots = [null, { sample: 'kick.wav' }, null]
+    assert.deepEqual(resizePads(slots, 2), [null, { sample: 'kick.wav' }])
+})
+```
+
+This test needs no browser and no build step.
+Run it with `node --test test/js/`.
+
+### 5.3 The tokens
+
+The tokens go on `:root`, so that they reach an element the island puts on the
+`body`, and every name carries the prefix of the island.
+
+```css
+:root {
+    --sfz-bg: #111;
+    --sfz-accent: #883996;
+    --sfz-focus: #e8e8e8;
+    --sfz-pad-min: 150px;
+    --sfz-gap: 8px;
+}
+
+#sfzbuilder-library .sfz-pad-grid {
+    display: grid;
+    gap: var(--sfz-gap);
+    grid-template-columns: repeat(auto-fill, minmax(var(--sfz-pad-min), 1fr));
+}
+```
+
+Each rule starts at the identifier of the panel. `main.css` holds rules for the
+bare elements -- `button`, `input`, `select`, `ul` -- and the identifier gives
+the rules of the island the greater weight.
+
+### 5.4 The cache
+
+The script elements in `index.html` use a `?v={{version}}` parameter.
+This parameter stops the browser from using an old file.
+We keep this parameter now. We do not change the 41 script elements.
+
+An island is different.
+The legacy code loads an island with a dynamic import, and the island makes its
+own `<link>` for its stylesheet.
+Neither of these has a version parameter.
+
+We first accepted this risk. The risk became a fault on the device:
+
+* `TimelessStaticFileHandler` gives **every** static file `Cache-Control:
+  public, max-age=31536000` and no ETag.
+* `{{version}}` is `IMAGE_VERSION`, which the server reads from
+  `/etc/mod-release/release`. That value does **not** change when you copy new
+  files onto a device.
+* Thus the browser held the island files for one year -- and held the **404**
+  from a build that did not have those files yet.
+* An island makes all of its own markup. A file that the browser cannot read
+  gives an empty panel and **no other sign**.
+
+`IslandStaticFileHandler` in `mod/webserver.py` now serves `html/js/app/` with
+`Cache-Control: no-cache` and an ETag. The browser asks each time and the server
+answers 304 when the file did not change.
+The 41 script elements of `index.html` do not change.
+
+### 5.5 The checks
+
+The `Makefile` holds every check. Continuous integration calls the targets and
+names no test file, so a new test runs without a change to either one.
+
+| Target | What it answers |
+|---|---|
+| `make compile` | Do the server files parse? |
+| `make test-py` | Does the model on the server behave? `unittest discover` finds `test/test_*.py`. |
+| `make test-js` | Does the model in the browser behave? `node --test` finds `test/js/**/*.test.js`, with no browser and no build step. |
+| `make typecheck` | Do the JSDoc types hold? `tsc --noEmit` over `html/js/app/`. |
+| `make smoke` | Does the panel draw, style, focus and drag in a real browser? |
+| `make test` | All of the above. Run this before you push. |
+
+`test/test_setup_data_files.py` belongs to `make test-py` and is the check that
+rule 4.9 asks for: it runs the globs of `setup.py` and asks that every file
+under `html/js/app/` is in one of them.
+
+## 6. Tradeoffs
+
+**No bundler.**
+The browser makes one request for each module file.
+This is slow on the internet. It is fast on the local network.
+We accept this cost. We do not accept the cost of a build step now.
+
+**JSDoc types, not TypeScript.**
+JSDoc is longer than TypeScript syntax.
+Some advanced types are difficult to write.
+But JSDoc needs no build step. This is more important now.
+
+**Two code styles in one repository.**
+New code and legacy code look different.
+This can be a problem for a new person.
+The directory `html/js/app/` makes the boundary clear.
+
+**The islands do not share code at first.**
+The second island can find that it needs code from the first island.
+Then you must move that code to a shared directory.
+Do not make a shared directory before two islands need it.
+
+**The island files ask the server each time.**
+An island file carries no version parameter, so `IslandStaticFileHandler` gives
+it `Cache-Control: no-cache`.
+The browser thus makes one small request for each island file on each visit.
+The server answers 304 and sends no body.
+On the local network this cost is small. It is smaller than the cost of a panel
+that is empty because the browser holds an old file.
+
+**One test needs a browser.**
+`make smoke` needs headless Chrome, so it is the one check that does not run
+from Python and node alone.
+It is worth the cost: it is the only place that can answer a question about the
+computed style, the focus or a drag, and those are the faults that an island
+makes, because an island draws everything itself.
+
+**The legacy problems continue.**
+This design does not repair `pedalboard.js` or `modgui.js`.
+It stops the growth of the problem. It does not remove the problem.
+
+## 7. The SFZ builder
+
+The SFZ builder is the first island. What was decided, and what it became:
+
+| Question | Decision | Outcome |
+|---|---|---|
+| Directory | Use `html/js/app/<feature>/`. | `html/js/app/sfzbuilder/`: `mount.js`, `view.js`, `model.js`, `state.js`, `api.js`, `dom.js`, `legacy.js`, `sfzbuilder.css`. |
+| Number of commits | Two. Commit 1 gives the structure. Commit 2 gives the new design. | Held. `docs/sfzbuilder-inventory.md` was the test for commit 1. |
+| Continuous integration | Add a workflow. | `.github/workflows/ci.yml`, two jobs, calling the targets of section 5.5. |
+| The `?v=` parameter | Do not change it. `html/js/app/` gets `no-cache` instead. | `IslandStaticFileHandler` in `mod/webserver.py`. See section 5.4. |
+| Tokens | Write tokens for the SFZ builder only. | On `:root`, each name prefixed `--sfz-`. See rule 4.5. |
+
+Open question 1 of the earlier draft asked which steps the workflow runs in
+commit 1. It runs all of them: `compile`, `test-py`, `test-js`, `typecheck` and
+`smoke`.
+
+### What the first island taught
+
+Each of these is now a rule above, and each came from a fault in the panel.
+
+1. A file that the server does not send gives an empty panel and no other sign,
+   because the island draws everything. Hence the `setup.py` check (4.9), the
+   message on the seam, and the check that the stylesheet loaded.
+2. The browser held those files, and their 404, for a year (5.4).
+3. A token that does not reach the `body` makes a drag helper of black text on
+   nothing (4.5).
+4. `* { outline: 0 !important }` in `main.less` takes the focus ring off the
+   panel, and several controls could not hold focus in any case (4.10).
+5. A value that changes width moves the control under the pointer. A stepper
+   holds one width whatever it shows.
+6. A test that names a colour breaks when the design changes and says nothing
+   when the code breaks (4.5).
+7. An island draws its own elements, so it takes them down itself, and a native
+   `removeChild` leaks every jQuery UI widget on them (4.11).
+8. `* { font-family: ... !important }` in `main.less` beat the font tokens on
+   every element of the panel, and the panel drew in the page font from the day
+   it was written (4.12). The same shape of rule as 4: read what `main.less`
+   already says about a property before you say it yourself.
+9. Space between two rows of a header belongs in a `gap`, not in a margin on
+   the row above. The tool row of the SFZ builder is hidden while no bank is
+   open, and the margin under the title row was drawn all the same.
+10. A path that arrives from the browser is not checked by anything before the
+    handler that uses it. `build_bank` copied from any absolute path whose name
+    ended in an audio extension, and it now takes one only from the places the
+    panel lists samples from.
+11. A list the panel keeps a second copy of drifts. `model.js` holds the audio
+    extensions again, so the panel can drop a file the server would refuse
+    before it sends a batch; a test reads both files and asks that they agree.
+    Do this for the copy or delete the copy. Do not leave a comment asking the
+    next person to remember.
+
+### Open questions
+
+1. When do we add a bundler and TypeScript?
+2. Which shared directory do two islands use? Do not make this directory before
+   two islands need it.
+3. How does a long panel keep a short path for the keyboard? The SFZ builder
+   puts every pad and every control inside it in the tab order, which is correct
+   and slow at 128 pads. A roving `tabindex` with the arrow keys is the usual
+   answer, and it is not built (4.10).
diff --git a/docs/output-data-flow.md b/docs/output-data-flow.md
new file mode 100644
index 000000000..2e2d9d1b4
--- /dev/null
+++ b/docs/output-data-flow.md
@@ -0,0 +1,184 @@
+# mod-host Output Data Flow
+
+## Overview
+
+mod-host continuously produces two kinds of feedback on its read socket (port 5556):
+
+- **`output_set`** — real-time meter/scope values (audio level, parameter outputs)
+- **`param_set`** — state changes: bypass toggles, parameter edits, MIDI-learn assignments
+
+These share the same socket and the same flow-control mechanism.
+
+## The `data_finish` / `output_data_ready` Handshake
+
+mod-host batches one frame of output data, then signals the end:
+
+```
+mod-host                    mod-ui (host.py)              WebSocket clients
+    |                            |                               |
+    |-- output_set inst A ------>|                               |
+    |-- output_set inst B ------>|-- output_set inst A --------->|
+    |-- param_set X :bypass 1 ->|-- output_set inst B --------->|
+    |-- data_finish ------------>|-- param_set X :bypass 1.0 --->|
+    |                            |                               |
+    |                            |-- data_ready N -------------->|
+    |                            |                               |
+    |                            |<-- data_ready N --------------|
+    |                            |   (browser echoes back)       |
+    |<-- output_data_ready ------|                               |
+    |                            |                               |
+    |  (next frame unlocked)     |                               |
+    |-- output_set inst A ------>|                               |
+    ...
+```
+
+**`output_data_ready` is the unlock signal.** Until mod-ui sends it back to mod-host,
+mod-host will not produce the next frame. This means `param_set :bypass` echoes (and
+all other feedback) stall if `output_data_ready` is never sent.
+
+### mod-ui side (`host.py: process_read_message_body`)
+
+```python
+if msg == "data_finish":
+    if self.web_connected:          # any WebSocket client is open
+        self.web_data_ready_ok = False
+        self.web_data_ready_counter += 1
+        self.msg_callback("data_ready %i" % counter)
+        # Start a 150ms fallback timer in case no client acks in time.
+        # msg_callback sets web_data_ready_ok = True if it self-acknowledged,
+        # so the timer is only armed when a real ack is still outstanding.
+        if not self.web_data_ready_ok and self.last_data_finish_handle is None:
+            self.last_data_finish_handle = ioloop.call_later(0.15, self.send_output_data_ready_later)
+        return
+    else:
+        yield gen.Task(self.send_output_data_ready, now)   # no client: use timer
+```
+
+### Client echo path (`session.py: ws_data_ready`)
+
+```python
+def ws_data_ready(self, counter, ws):
+    ws._meter_ready = True
+    # Guard: if the 150ms timer already fired, web_data_ready_ok is True —
+    # skip to avoid sending a second output_data_ready to mod-host.
+    if self.host.web_data_ready_counter == counter and not self.host.web_data_ready_ok:
+        self.host.web_data_ready_ok = True
+        self.host.send_output_data_ready(None, None)
+```
+
+### `send_output_data_ready` (`host.py`)
+
+```python
+def send_output_data_ready(self, now, callback):
+    self.web_data_ready_ok = True   # mark as done before sending
+    ...
+    self.send_notmodified("output_data_ready", callback)   # write socket → mod-host
+```
+
+`web_data_ready_ok` is set here (rather than only in `ws_data_ready`) so that if the
+150ms timer fires first, any subsequent browser ack is a no-op.
+
+## Local Client Optimization (`_is_local`)
+
+pi-stomp connects from `127.0.0.1`; browsers connect from LAN IPs.
+Local clients don't need meter spam, so `msg_callback` skips `output_set` and
+`data_ready` for them (`session.py: websocket_opened` sets `ws._is_local = True`).
+
+**Problem:** if all connected clients are local, `data_ready` is sent to nobody,
+nobody echoes, and `output_data_ready` is never sent to mod-host → everything stalls.
+
+**Fix (`session.py: msg_callback`):** when `data_ready` was suppressed for every
+connected client, self-acknowledge immediately — mirroring what a real browser echo
+would do:
+
+```python
+if is_data_ready and not any_non_local_received:
+    self.host.web_data_ready_ok = True
+    self.host.send_output_data_ready(None, None)
+```
+
+## Backgrounded Browser Tabs (`_is_background`, `_meter_ready`)
+
+A Chrome tab in the background throttles its JS timers to ~1 Hz. Without mitigation,
+one backgrounded tab stalls the entire meter loop: it receives `data_ready N` but
+doesn't echo for ~1 second, blocking `output_data_ready` and all `param_set` echoes
+(including footswitch feedback to pi-stomp).
+
+Two mechanisms work together to prevent this.
+
+### Explicit visibility signal (`_is_background`)
+
+When the browser page becomes hidden, the JS `visibilitychange` listener sends a
+WebSocket message:
+
+```javascript
+document.addEventListener('visibilitychange', function () {
+    if (ws.readyState === WebSocket.OPEN) {
+        ws.send(document.hidden ? 'client_hidden' : 'client_visible')
+    }
+})
+```
+
+`webserver.py` sets/clears `ws._is_background` on receipt. In `msg_callback`, a
+client with `_is_background = True` is skipped for both `output_set` and `data_ready`:
+
+```python
+elif is_output_set:
+    if getattr(ws, '_is_background', False) or not getattr(ws, '_meter_ready', True):
+        continue
+elif is_data_ready:
+    if getattr(ws, '_is_background', False) or not getattr(ws, '_meter_ready', True):
+        continue
+    ws._meter_ready = False
+```
+
+When all non-local clients are skipped this way, `any_non_local_received` stays
+`False` and the self-acknowledge fires immediately — zero added latency.
+
+When `client_visible` arrives, the server sets `_is_background = False` and
+`_meter_ready = True`, and the client re-enters the normal handshake on the next frame.
+
+### Per-client pending-ack gate (`_meter_ready`)
+
+Each client carries a `_meter_ready` flag (default `True`). It is cleared when
+`data_ready N` is sent to that client, and restored when the client echoes back.
+A client with `_meter_ready = False` is skipped in `msg_callback`, the same as a
+backgrounded client.
+
+This covers a gradual slowdown that doesn't trigger `visibilitychange` (e.g., a
+foreground tab under heavy CPU load that is simply lagging its echo).
+
+### 150ms fallback timer
+
+`_is_background` relies on the browser sending `client_hidden` before the next
+`data_finish` arrives. This is not guaranteed: there is a race between Chrome's
+`visibilitychange` event and mod-host's next frame. To bound the worst case,
+`host.py` arms a 150ms timer after each `data_ready N` dispatch, but only when
+`web_data_ready_ok` is still `False` (i.e., `msg_callback` didn't self-acknowledge):
+
+```
+t=0      data_ready N sent to Chrome, timer armed for t=150ms
+t=50ms   Chrome (foreground) echoes back → ws_data_ready clears timer, output_data_ready sent
+t=150ms  timer fires only if Chrome hasn't echoed → output_data_ready sent, stall bounded
+```
+
+150ms is chosen to be safely above Chrome's 50ms JS echo debounce (`triggerDelayedReadyResponse`),
+so the timer never races a foreground ack in normal operation. When `client_hidden` is
+working, the timer is never armed (self-acknowledge fires in `msg_callback`).
+
+### Double-send protection
+
+Both `send_output_data_ready` and the `ws_data_ready` echo path converge on the same
+send. The `web_data_ready_ok` flag prevents a second `output_data_ready` from being
+sent if both fire in the same IOLoop turn:
+
+- `send_output_data_ready` sets `web_data_ready_ok = True` before sending.
+- `ws_data_ready` checks `not web_data_ready_ok` before calling `send_output_data_ready`.
+
+## Why the Browser Throttles
+
+The browser JavaScript delays its echo by 50 ms before sending `data_ready` back
+(`triggerDelayedReadyResponse` in `host.js`). This caps the `output_set` update rate
+at ~20 fps, preventing DOM update starvation on pedalboards with many parameters.
+Each new `data_ready` resets the debounce timer, so only the most recent counter is
+ever echoed.
diff --git a/docs/plugin-scanning.md b/docs/plugin-scanning.md
new file mode 100644
index 000000000..d20d5b640
--- /dev/null
+++ b/docs/plugin-scanning.md
@@ -0,0 +1,29 @@
+# Plugin scanning and hot-load
+
+## Normal install path (PatchStorage / web UI)
+
+`install_bundles_in_tmp_dir` in `webserver.py` does a live two-sided load:
+
+1. Sends `bundle_add "<path>"` to mod-host over the command socket → mod-host rescans its lilv world and accepts `add <uri>` commands for the new plugin immediately.
+2. Calls `add_bundle_to_lilv_world(bundlepath)` → C++ call into the in-process lilv world so mod-ui can query the plugin too.
+
+No restart needed. The plugin is drag-droppable onto the board straight away.
+
+## Manual bundle drop (hand-copying `.lv2` into `~/.lv2`)
+
+There is no signal or endpoint that triggers a rescan today.
+
+- `SIGUSR1` → save-state (or HMI screenshot / CC firmware update)
+- `SIGUSR2` → disconnect / boot-check / upgrade-check
+
+**Workaround:** `systemctl restart mod-ui`. This runs `lv2_cleanup()` + `lv2_init()` which does a full lilv rescan. mod-host is left running; only mod-ui restarts.
+
+## What a proper fix would look like
+
+Add a small HTTP endpoint (e.g. `POST /plugin/rescan`) that:
+
+1. Calls `add_bundle_to_lilv_world(bundlepath)` for the new bundle.
+2. Sends `bundle_add "<path>"` to mod-host via `SESSION.host.send_notmodified(...)`.
+3. Invalidates the `_plugins_list_cache` so the next `/effect/list` request reflects the change.
+
+Or wire one of the existing signals (or a new `SIGUSR1` sub-case) to the same three steps.
diff --git a/docs/session-recording.md b/docs/session-recording.md
new file mode 100644
index 000000000..f229a2d9b
--- /dev/null
+++ b/docs/session-recording.md
@@ -0,0 +1,80 @@
+# Session Recording (mod-ui side)
+
+mod-ui owns session recording end-to-end: its own toolbar trigger, its own
+UX. This does **not** have a pi-stomp counterpart plan or a protocol designed
+for pi-stomp consumption — the WebSocket messages below exist for mod-ui's
+own multi-tab sync, and pi-stomp is free to ignore them. Duplication between
+packages is acceptable; each owns its own UX. (pi-stomp keeps NAM capture as
+a separate, unrelated pedal-side utility.)
+
+This repurposes the old share-clip recorder wholesale: the share-clip UI
+(`.js-cloud` / the pedalboard-share modal) is only reachable when
+`using_mod` is true (`html/index.html:181-197`), which requires a MOD device
+key — unreachable on pi-stomp. So `Recorder`, the `/recording/*` endpoints,
+and the `Player` class were dead code on this deployment and have been
+repurposed/removed outright.
+
+## Design
+
+- **Format**: WAV, 32-bit IEEE float, stereo (`mod-monitor:out_1`/`out_2`) —
+  no fixed duration cap. Float is `jack_capture`'s default when no `-b` flag
+  is given; unlike any fixed-point depth (including `-b 32`, which is 32-bit
+  *integer*) it doesn't clip samples that exceed +/-1.0 — a hot gain stage
+  upstream is preserved losslessly instead of being pinned/truncated at
+  digital full-scale. ~1.3 GB/hour; WAV's 4 GB ceiling gives ≈3 hours,
+  acceptable for v1 (a follow-up could switch to `-f rf64` to remove it).
+  Trade-off: some older/simpler WAV players don't support float PCM: the
+  file may need normalizing back under 0 dBFS before it'll play everywhere.
+- **Location**: `<user-files>/Audio Recordings/` (`mod/settings.py:
+  RECORDINGS_DIR`). This is mod-ui's existing user-files category
+  (`FilesList`, `filetype=audiorecording`), so recordings automatically show
+  up in the File Manager tab and are selectable by any audio file-player
+  plugin — listen-back comes free, no custom playback path needed.
+- **Filename**: `YYYY-MM-DD_HHMMSS.wav`, optionally suffixed with a
+  slugified pedalboard title.
+- **Crash watch**: a ~1s `PeriodicCallback` polls the `jack_capture`
+  process; if it dies (disk full, JACK gone), the recorder finalizes and
+  broadcasts a stop like a normal one.
+- **State sync**: recording start/stop is broadcast over WebSocket
+  (`recording start <filename>` / `recording stop <filename>
+  <duration_seconds>`) via `msg_callback` (all sockets, not
+  `msg_callback_broadcast`) since the HTTP initiator isn't itself a
+  WebSocket client. A newly-opened socket gets a `recording start` message
+  immediately if a recording is already in progress, so page reloads and
+  second tabs resync.
+- **Guards**: refuses to start if already recording, or if free space at
+  `RECORDINGS_DIR` is below 500 MB.
+
+## REST endpoints (`mod/webserver.py`)
+
+| Endpoint | Returns |
+|---|---|
+| `GET /recording/start` | `{ok: true, filename}` or `{ok: false, error}` |
+| `GET /recording/stop` | `{ok, filename, duration}` |
+| `GET /recording/status` | `{recording, filename, elapsed}` — lets a client resync without waiting on a broadcast (used on page load) |
+| `GET /recording/file/<name>` | Streams the WAV (`web.StaticFileHandler` rooted at `RECORDINGS_DIR`) |
+
+Deleting recordings happens through the File Manager — there is no delete
+endpoint in v1.
+
+## Frontend
+
+- Toolbar record button (`#mod-recorder`, next to `#mod-xruns` /
+  `#mod-cpu-stats`): click to start/stop. Button state (red/pulsing +
+  elapsed timer) is driven **only** by the `recording *` WebSocket
+  messages, so it reflects reality across tabs/reloads and (if a peer ever
+  triggers it another way) other clients too.
+- On stop, a notification shows the filename/duration with a
+  `/recording/file/<name>` download link.
+- The old share-clip record/play/download UI (`#record-step-*` in
+  `index.html`, the ajax factories in `desktop.js`) is unreachable dead
+  markup, left in place but disconnected from any backend.
+
+## Out of scope (v1)
+
+- Dry-input / multichannel re-amp recording (would add extra
+  `--port system:capture_1`).
+- RF64 for files over the 4 GB WAV ceiling.
+- A recordings list UI in mod-ui — the File Manager already covers
+  browse/download/delete.
+- Any pi-stomp-side trigger/LED work.
diff --git a/docs/webapp-dev.md b/docs/webapp-dev.md
new file mode 100644
index 000000000..440a987e8
--- /dev/null
+++ b/docs/webapp-dev.md
@@ -0,0 +1,153 @@
+# pi-stomp Web UI — Developer Reference
+
+This document covers the codebase structure, key architectural decisions, and how to extend the app. For user-facing feature documentation see [`docs/webapp.md`](webapp.md).
+
+---
+
+## Files that make up the app
+
+| File | Role |
+|------|------|
+| `html/index.html` | Entry point; Tornado template that injects server config as JS globals |
+| `html/js/desktop.js` | Root `Desktop` object — instantiated once, holds references to all panels |
+| `html/js/pedalboard.js` | `pedalboard` jQuery plugin — the canvas, connection manager, and plugin rendering |
+| `html/js/effects.js` | `effectBox` jQuery plugin — the installed-plugin browser panel |
+| `html/js/host.js` | WebSocket client — single `ws` connection, dispatches every incoming message |
+| `html/js/snapshot.js` | `SnapshotsManager` — snapshot list panel and rename/save UI |
+| `html/js/transport.js` | `TransportControls` — BPM/BPB/rolling panel |
+| `html/js/hardware.js` | `HardwareManager` — parameter-to-actuator addressing logic |
+| `html/js/pedalboards.js` | `pedalboardBox` jQuery plugin — pedalboard list panel |
+| `html/js/banks.js` | Bank list panel |
+| `html/js/patchstorage.js` | PatchStorage store panel and API client |
+| `html/js/cc-manager.js` | Control Chain device management |
+| `html/js/installation.js` | `InstallationQueue` — serialises plugin/pedalboard installs |
+| `mod/webserver.py` | All HTTP endpoints (Tornado handlers) and WebSocket handler |
+| `mod/session.py` | WebSocket session management; local vs. remote client logic |
+| `mod/host.py` | mod-host command bridge; processes feedback socket and dispatches to WebSocket |
+
+## Technologies
+
+- **Python / Tornado** — async webserver; no framework beyond Tornado itself
+- **jQuery 1.9.1 + jQuery UI** — DOM manipulation; most panels are implemented as jQuery plugins via a thin `JqueryClass` helper
+- **Mustache** — template rendering for plugin/pedalboard list items
+- **lunr.js** — client-side full-text search for plugin and pedalboard names
+- **lilv (C++)** — LV2 plugin discovery via `utils/utils_lilv.cpp`, compiled into `libmod_utils.so`
+- No module bundler; all JS is loaded as individual `<script>` tags with a `?v={{version}}` cache-buster
+
+## Key objects and concepts
+
+**`Desktop`** (`desktop.js:4`) is the root controller. It is instantiated once in `index.html` and receives jQuery references to every named UI element. All panels communicate back through `Desktop` methods. If you are adding a new panel or toolbar button, this is where you wire it in.
+
+**`pedalboard` jQuery plugin** (`pedalboard.js`) manages the canvas. Internally it tracks:
+- `plugins` — map of `instance → plugin data`
+- `connectionManager` — tracks which output port is connected to which input port
+
+Mutations are driven by WebSocket messages (`add`, `remove`, `connect`, `disconnect`, `param_set`, `plugin_pos`) rather than by user interaction dispatching directly. This means the same code path runs whether a change comes from the browser or from pi-stomp.
+
+**`effectBox` jQuery plugin** (`effects.js`) is the installed-plugin browser. It uses `Desktop.pluginIndexer` (lunr) for search and fetches plugin metadata from `/effect/list` on startup.
+
+**`SnapshotsManager`** (`snapshot.js:4`) owns the snapshot list. Snapshot switches send `POST /snapshot/load`; saves send `POST /snapshot/save` or `POST /snapshot/saveas`. The server broadcasts `pedal_snapshot <index> <name>` over WebSocket to all clients when the active snapshot changes.
+
+**`HardwareManager`** (`hardware.js`) maps plugin parameters to physical actuators. Addressing data arrives over WebSocket as `hw_map`, `midi_map`, and `cv_map` messages when a pedalboard loads.
+
+**`InstallationQueue`** (`installation.js`) ensures that plugin installs are serialised — never two concurrent downloads — and surfaces progress to the user.
+
+---
+
+## Architectural decisions
+
+**WebSocket is the real-time state bus.** Every audio-state change — parameter values, bypass toggles, plugin additions, snapshot switches, transport changes — flows through the single WebSocket connection as a text message. REST calls handle configuration, queries, and one-shot actions (save, load, install). This keeps the browser state consistent without polling.
+
+**The server pushes; the browser reflects.** Rather than the browser directly mutating its own state on user gesture, every mutation goes to the server first (via REST or a WebSocket send), and the server echoes the result back as a push message. This means pi-stomp, the browser, and any other client all see the same stream. See [`docs/output-data-flow.md`](output-data-flow.md) for how the meter handshake works within this model.
+
+**Local clients bypass meter flow-control.** pi-stomp connects from `127.0.0.1` and is flagged as a local client in `session.py`. It does not receive `output_set` meter data or `data_ready` handshake messages — it self-acknowledges immediately. This prevents a hardware client from ever stalling audio feedback. See [`docs/output-data-flow.md`](output-data-flow.md) for the full handshake.
+
+**Background browser tabs are excluded from the meter loop.** When a browser tab becomes hidden, it sends `client_hidden` over the WebSocket. The server then skips that tab for both `output_set` and `data_ready`, so a backgrounded tab cannot stall the meter clock. The tab sends `client_visible` when it returns to the foreground. Commit `c1ffe8f8` ("Working background tabs") introduced this mechanism.
+
+**Plugin installation is live.** Installing a plugin via PatchStorage or the SDK endpoint calls both `bundle_add` on mod-host and `add_bundle_to_lilv_world` in the in-process lilv world. No restart is required. See [`docs/plugin-scanning.md`](plugin-scanning.md) for the full path and its current limitations.
+
+**Pedalboard loading is batched.** When a pedalboard loads, `host.js` opens a `pendingPlugins` buffer. All `add` messages received during the `loading_start` → `loading_end` window are collected and then fetched in a single bulk request to `/effect/bulk/` instead of one `/effect/get` per plugin. Commit `40eb3876` ("Actually crazy fast pedalboard loading") introduced this; before it, large boards could take several seconds to paint.
+
+**Nested pedalboard directories are a C++ concern.** The one-level-deep directory walk is in `utils/utils_lilv.cpp`. The Python and browser layers see flat bundle paths; they do not know or care about the parent directory. The walk is bounded at 2 levels, caps each scan at 1024 entries, and only appends sub-folders that directly contain at least one `.pedalboard` child.
+
+**Snapshots persist to disk immediately.** Before commit `135afb51`, snapshot state was only written on explicit user action or pedalboard save. Now every snapshot save writes to disk immediately, so a power cycle right after saving a snapshot does not lose the change.
+
+**BPM is part of the transport, not of individual plugins.** The BPM/BPB values are stored in snapshots (commit `3813b2d6`) and broadcast to all WebSocket clients when changed (commit `7c403535`). Any client — browser tab or pi-stomp — that sets BPM causes all others to reflect the new value.
+
+---
+
+## How to extend the app
+
+### Adding a new WebSocket message (server → browser)
+
+1. Emit the message from Python: call `self.msg_callback("your_cmd <args>")` in `host.py` or `session.py`.
+2. Handle it in `host.js`: add an `if (cmd == "your_cmd")` branch in `ws.onmessage`. Parse `data` and call the relevant `Desktop` or `desktop.pedalboard` method.
+3. If the message carries state that pi-stomp needs to react to, add a handler in the pi-stomp WebSocket client as described in the pi-stomp integration section below.
+4. Note that `loading_start` and `loading_end` frame every pedalboard load. If your new message is only valid outside a load, check `pb_loading` in `host.js` before acting on it.
+
+### Adding a new REST endpoint
+
+Follow the pattern in `mod/webserver.py`: subclass `tornado.web.RequestHandler`, add a `get` or `post` method, then register the URL in `url_patterns` at the bottom of the file. If the endpoint mutates plugin or pedalboard state, call the corresponding method on `SESSION.host`.
+
+### Adding a new UI panel or toolbar button
+
+1. Add the HTML element to `html/index.html` (or the appropriate `html/include/*.html` template).
+2. Pass a jQuery reference to it in the `Desktop(elements)` call in `index.html`.
+3. Accept it in the `elements` parameter of `Desktop` (`desktop.js`) and initialise it there.
+4. Implement the panel as a jQuery plugin (see `effects.js` for the `effectBox` pattern) or as a plain object (see `snapshot.js` for `SnapshotsManager`).
+
+### The echo problem
+
+When any client — browser or pi-stomp — sends a command that changes state, the server broadcasts the result to **all** connected clients, including the sender. pi-stomp already has echo-suppression for some message types. If you add a new action that pi-stomp initiates and the server echoes back, check whether pi-stomp's WebSocket handler needs to suppress its own echo for that message type.
+
+---
+
+## Integrating with pi-stomp (`../pi-stomp`)
+
+pi-stomp connects to mod-ui via a WebSocket bridge implemented in `../pi-stomp/modalapi/websocket_bridge.py` (`AsyncWebSocketBridge`). It runs on a daemon thread with exponential backoff reconnection (up to 4 attempts before the service exits). State changes are drained every 10 ms on the main polling loop (`modalapistomp.py:220`).
+
+**WebSocket** (`ws://localhost:80/websocket` — loopback, so pi-stomp is classified as a local client and never receives meter data or `data_ready` handshake messages):
+
+Messages pi-stomp receives and handles (`../pi-stomp/modalapi/ws_protocol.py` defines all message types; dispatch lives in `modhandler.py:516`):
+
+| Message | Meaning | pi-stomp action |
+|---------|---------|----------------|
+| `loading_start <isDefault>` | Pedalboard is being torn down and rebuilt | Suppresses outbound param_set; flushes stale outbound queue |
+| `loading_end <snapshotIndex>` | Pedalboard fully loaded | Clears loading flag; stashes snapshot index for file-watch path |
+| `pedal_snapshot <index> <name>` | Active snapshot changed | Updates LCD title; may activate blend mode |
+| `param_set /graph/<instance> :bypass <0|1>` | Plugin bypassed/unbypassed | Updates plugin state; redraws LCD and LED |
+| `param_set /graph/<instance> <symbol> <value>` | Parameter value changed | Caches value; mirrors onto bound controls |
+| `add <instance> <uri> …` | Plugin added to pedalboard | Buffers bypass state during load; registers plugin |
+| `remove <instance>` | Plugin removed | Removes from pedalboard plugin list |
+| `connect / disconnect` | Port wiring changed | Used for state reconciliation |
+| `midi_map <instance> <symbol> <ch> <cc>` | MIDI binding learned | Updates MIDI CC map |
+| `transport <rolling> <bpb> <bpm> <mode>` | Transport state changed | Caches BPM for tap-tempo display |
+| `truebypass <left> <right>` | Relay bypass state changed | Updates relay hardware |
+| `clip_status <label> <0|1>` | Output clip detected/cleared | Can light an LED |
+
+`output_set` (audio meter data) is **dropped at the WebSocket layer** before it enters the queue — it never reaches the main thread.
+
+Messages pi-stomp **sends** over the WebSocket:
+- `param_set /graph/<instance>/<symbol> <value>` — parameter change from encoder or LCD (`modhandler.py:1050`)
+- `transport-bpm <value>` — tap tempo BPM
+
+Parameter sets also go via a dedicated REST endpoint:
+- `GET /effect/parameter/pi_stomp_set/<instance>/<symbol>?value=<v>`
+
+**File-watch polling**: pi-stomp monitors `~/.pedalboards/last.json` (mtime-based, every 1000 ms). When the mtime changes, it reads the `pedalboard` field and reloads the pedalboard via LILV if it changed. This is the backup path for pedalboard switches that happen without a WebSocket connection being open.
+
+**Echo suppression strategy**: footswitches route through MIDI CC → mod-host → `param_set` echo back to pi-stomp (reconciliation via echo). Non-footswitch UI bypasses go direct WebSocket → mod-ui; pi-stomp updates the display optimistically, then reconciles when the echo arrives with the authoritative value. The suppression logic is in `modhandler.py:1026`.
+
+**Blend mode**: pi-stomp has a snapshot interpolation feature (`../pi-stomp/blend/`) that reads an analog input (expression pedal position) and linearly interpolates plugin parameter values between two snapshots. It intercepts hardware events when active and sends only changed parameters to avoid MIDI CC conflicts.
+
+### Checklist for adding a new feature that pi-stomp reacts to
+
+1. Add the message type to `../pi-stomp/modalapi/ws_protocol.py` (a `dataclass` + a branch in `parse_message`).
+2. Add a handler in `modhandler.py:_handle_ws_message`.
+3. If pi-stomp initiates the action and the server echoes it back, decide whether echo suppression is needed in `websocket_bridge.py`.
+4. If the new state should survive a WebSocket reconnect, ensure it is reflected in `last.json` or re-sent in the post-connect `loading_end` dump.
+5. See `../pi-stomp/GUIDE.md` (MOD Integration section) for architectural context on the polling loop and pedalboard data loading.
+
+---
+
+*Last updated: 2026-06-27. See also [`docs/output-data-flow.md`](output-data-flow.md) and [`docs/plugin-scanning.md`](plugin-scanning.md).*
diff --git a/docs/webapp.md b/docs/webapp.md
new file mode 100644
index 000000000..2fc8c7d43
--- /dev/null
+++ b/docs/webapp.md
@@ -0,0 +1,137 @@
+# pi-stomp Web UI
+
+The web UI lives at **http://pistomp.local** (or whatever hostname your device is on). It is the primary control surface for your pi-stomp: you build signal chains here, store them as named pedalboards, switch snapshots, and manage plugins. Everything you do in the browser is reflected immediately on the hardware.
+
+For developer and integration documentation see [`docs/webapp-dev.md`](webapp-dev.md).
+
+---
+
+## What you can do with this software
+
+This UI is a **live LV2 pedalboard editor**. Think of it as a patchbay and parameter panel rolled into one browser tab. You can:
+
+- Build a signal chain by dragging plugins onto a canvas and wiring their ports together with virtual patch cables.
+- Tune every plugin parameter in real time — knobs, toggles, selectors — and hear the result immediately.
+- Save the whole arrangement as a named **pedalboard**, and switch between pedalboards instantly.
+- Save multiple **snapshots** (parameter freezes) within one pedalboard so you can jump between tonal states — e.g. verse, chorus, solo — without switching pedalboards.
+- Assign plugin parameters to footswitches or encoders on the hardware, or to MIDI CC messages, so you can control them hands-free.
+- Install new plugins and pedalboards from the **PatchStorage** cloud store without restarting anything.
+
+What this software is **not**:
+
+- It is not a DAW. There is a basic recording endpoint in the server but no multitrack timeline, no arrangement view, no bouncing.
+- It is not a step sequencer or pattern editor.
+- It does not synthesize audio on its own — it hosts and connects LV2 plugins that you choose.
+- It does not manage the operating system, networking, or system updates (those live in pi-stomp and pi-gen-pistomp).
+
+---
+
+## The interface at a glance
+
+### Pedalboard canvas
+
+The centre of the screen is the pedalboard canvas: a pannable, zoomable workspace where your signal chain lives. Each plugin appears as a graphical block — drawn from its own LV2 GUI bundle when one exists, or rendered with a default template otherwise. Audio ports appear as jacks on the sides; connecting two ports draws a patch cable. Hardware input and output buses appear at fixed left/right edges.
+
+What you can do on the canvas:
+
+| Action | How |
+|--------|-----|
+| Add a plugin | Drag it from the Plugin Browser panel onto the canvas |
+| Move a plugin | Drag the plugin block |
+| Bypass a plugin | Click the bypass toggle on the plugin block (or the footswitch assigned to it) |
+| Adjust a parameter | Click/drag a knob, or right-click a parameter for addressing options |
+| Connect ports | Drag from an output jack to an input jack |
+| Disconnect a cable | Click the cable and delete, or drag it off the target port |
+| Remove a plugin | Right-click the block → Remove |
+| View plugin info / presets | Click the info button on a plugin block |
+| Zoom in/out | Zoom buttons in the toolbar, or scroll wheel |
+
+Multiple browser tabs can be open simultaneously; all share the same live state. Changes made in one tab (or by the hardware) appear in all tabs within the same meter frame.
+
+### Plugin browser
+
+The **Plugins** panel (left side) lists every LV2 plugin installed on the device. You can filter by category, search by name/brand/keyword, or browse by category tree. Drag any result onto the canvas to add it.
+
+Plugins are discovered at server startup from `~/.lv2` and the factory plugin directory. Installing a plugin via the PatchStorage store makes it available immediately — no page reload or restart needed.
+
+### Pedalboards and banks
+
+A **pedalboard** is a named file (`.pedalboard` bundle) containing the full canvas layout: which plugins are loaded, how they are wired, their parameter values, snapshot list, and hardware/MIDI assignments.
+
+Pedalboards live in `~/.pedalboards/` and can be nested one level deep into category subdirectories, e.g.:
+
+```
+~/.pedalboards/
+  Live/
+    FuzzSong.pedalboard/
+  Studio/
+    CleanPlate.pedalboard/
+```
+
+The **Pedalboards** panel lists all your boards. Clicking one loads it; the current pedalboard is shown in the title bar. You can save, save-as, reset to last-saved state, or delete from this panel.
+
+**Banks** group pedalboards for quick live switching. A bank is an ordered list of pedalboards; the hardware can cycle through them with footswitches. The **Banks** panel lets you create and reorder banks.
+
+### Snapshots
+
+A **snapshot** captures the current value of every plugin parameter in the pedalboard — without changing the wiring or which plugins are loaded. Snapshots let you move between "verse", "chorus", and "solo" sounds by switching a preset rather than reloading a whole pedalboard. BPM and beats-per-bar are included in snapshots.
+
+The snapshot list lives in the top toolbar. You can:
+
+- Switch to a snapshot by clicking it in the list
+- Save the current parameter state into an existing snapshot (overwrite)
+- Save as a new snapshot (with a name)
+- Rename or delete snapshots
+- Address a snapshot slot to a hardware footswitch via the addressing dialog
+
+Snapshots are written to disk immediately on save, so a power loss after saving does not lose the state.
+
+### Transport
+
+The transport toolbar controls the global JACK transport: BPM (tempo), beats per bar (time signature numerator), and rolling (start/stop). Plugins that sync to JACK transport — arpeggiators, sequencers, tempo-synced delays — respond to these values.
+
+Sync mode determines what drives the transport clock:
+- **Internal** — mod-ui is the JACK transport master; BPM/BPB are set here.
+- **MIDI Clock** — tempo is slaved to an incoming MIDI clock signal.
+
+BPM and beats-per-bar can be addressed to hardware knobs or footswitches, and they are broadcast to all browser tabs when changed by any source (hardware, another tab, or MIDI).
+
+### PatchStorage store
+
+The **PatchStorage** tab opens a cloud browser for LV2 plugins and pedalboards built for the pi-stomp (`rpi-aarch64` target). You can:
+
+- Browse and search available patches
+- Install a plugin or pedalboard with one click
+- Update an installed patch to a newer version (detected automatically from metadata)
+- Remove an installed patch
+
+Installed patches write a `patchstorage.json` file into their bundle so the UI can detect staleness. No restart is needed after installing; the plugin becomes drag-droppable immediately.
+
+### Plugin presets ("Snapshots")
+
+Individual plugins can have **presets**/**snapshots** — named configurations of their own parameters. These are separate from pedalboard snapshots: a preset belongs to the plugin and can be loaded across different pedalboards. Use the preset button on a plugin block to browse, save, or load plugin-level presets.
+
+### Hardware and MIDI addressing
+
+Right-clicking any parameter knob opens an **addressing dialog** where you can assign that parameter to:
+
+- A hardware actuator (footswitch, encoder) via the HMI — labeled `/hmi/...`
+- A MIDI CC message (MIDI learn or manual entry)
+- A CV input port
+- BPM sync (tempo division)
+
+Hardware mappings are saved as part of the pedalboard. When the pedalboard loads, all mappings are replayed so pi-stomp's LCD, LEDs, and footswitches are immediately configured.
+
+### System status
+
+The top-right toolbar shows:
+
+- CPU load and xrun count (xruns are audio glitches; a spike here means the DSP can't keep up)
+- RAM usage and CPU temperature/frequency (in the status tooltip)
+- Buffer size
+
+These update in real time from the WebSocket `stats` / `sys_stats` messages.
+
+---
+
+*See also [`docs/webapp-dev.md`](webapp-dev.md) for codebase architecture and pi-stomp integration guidance.*
diff --git a/html/allguis.html b/html/allguis.html
index 662d7d0eb..4f6ecedb2 100644
--- a/html/allguis.html
+++ b/html/allguis.html
@@ -25,7 +25,7 @@
     <script type="text/javascript">
       var desktop    = null
       var SAMPLERATE = 48000
-      var VERSION    = '{{version}}'
+      var VERSION    = '{{image_version}}'
       var options    = {
           bypassed: 0,
       }
diff --git a/html/css/less/blokas.less b/html/css/less/blokas.less
index 55d79ff97..98ebcebd3 100644
--- a/html/css/less/blokas.less
+++ b/html/css/less/blokas.less
@@ -1,30 +1,40 @@
 .blokas {
+
     header#pedalboard-actions,
     #bank-library header,
     #cloud-plugins-library header,
     #patchstorage-library header,
+    #patchstorage-pedalboards-library header,
+    #patchstorage-hub header,
     #pedalboards-library header,
-    #file-manager-library header {
+    #file-manager-library header,
+    #sfzbuilder-library header {
         background-image: none !important;
         padding-left: 10px !important;
     }
+
     #pedalboard-info {
         left: 10px !important;
     }
+
     path.loadinglogo {
         display: none !important;
     }
+
     #pedalboards-library .pedalboards,
     #bank-library #bank-edit,
     #file-manager-library,
     #patchstorage-library .patchstorage-plugins,
+    #patchstorage-pedalboards-library .patchstorage-plugins,
     #cloud-plugins-library .cloud-plugins {
         background-image: none !important;
     }
+
     #blokas-update {
         background-image: url(../img/icons/36/update.png);
+
         &.uptodate {
-          background-image: url(../img/icons/36/ok.png);
+            background-image: url(../img/icons/36/ok.png);
         }
     }
 
diff --git a/html/css/less/main.less b/html/css/less/main.less
index 150d0070f..9a70a0a40 100644
--- a/html/css/less/main.less
+++ b/html/css/less/main.less
@@ -72,6 +72,7 @@
 @import 'cloud_plugins.less';
 @import 'patchstorage.less';
 @import 'banks.less';
+@import 'sfzbuilder.less';
 @import 'file_manager.less';
 @import 'pedalboards.less';
 @import 'nprogress.less';
@@ -366,6 +367,29 @@ hr.dotted {
       background-position: -180px bottom;
     }
   }
+  // pi-Stomp: the shared sprite has no free frame, so this icon is inline SVG.
+  // Two pads that hold a sample and two that are free. This says what the panel
+  // does. The four squares of the earlier icon looked the same as the
+  // Constructor icon.
+  //
+  // The sprite holds each other icon two times: faded for the state that is not
+  // active and full for hover and selected. One drawing and an opacity gives
+  // the same result here.
+  #mod-sfzbuilder {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2245%22%20viewBox%3D%220%200%2045%2045%22%3E%3Cg%20fill%3D%22%23F29446%22%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2225%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2225%22%20width%3D%229%22%20height%3D%229%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.33;
+    transition: all 0.33s;
+    &:hover {
+      background-color: #000;
+      opacity: 1;
+    }
+    &.selected {
+      background-color: #000;
+      opacity: 1;
+    }
+  }
   #banks-saving {
     margin: 21px 0 0 6px;
     font-size: 10px;
@@ -373,7 +397,7 @@ hr.dotted {
     display: none;
   }
   #mod-show-midi-port, #mod-transport-icon, .mod-bypass,
-  #mod-cpu, #mod-ram, #mod-xruns, #mod-buffersize, #mod-cpu-stats {
+  #mod-cpu, #mod-ram, #mod-xruns, #mod-buffersize, #mod-cpu-stats, #mod-recorder {
     background-position: 8px 50%;
     background-repeat: no-repeat;
     padding-left: 40px;
@@ -444,6 +468,31 @@ hr.dotted {
     background-image: url(../img/icons/25/cpu.png);
     width: 125px !important;
   }
+  #mod-recorder {
+    position: relative;
+    width: 115px !important;
+    &:before {
+      content: "";
+      position: absolute;
+      left: 15px;
+      top: 50%;
+      margin-top: -6px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: #999;
+      transition: background-color 0.33s;
+    }
+    &.recording:before {
+      background-color: #ff3030;
+      animation: mod-recorder-pulse 1.5s ease-in-out infinite;
+    }
+  }
+  @keyframes mod-recorder-pulse {
+    0%   { opacity: 1; }
+    50%  { opacity: 0.35; }
+    100% { opacity: 1; }
+  }
 
     .progress {
       height: 45px;
@@ -521,7 +570,7 @@ hr.dotted {
   float: right;
   font-size: 21px;
 }
-#cloud_update_all, #patchstorage_update_all {
+#cloud_update_all, #patchstorage_update_all, #patchstorage_pedalboards_update_all {
   background-image: url(../img/icons/36/update.png);
   float: right;
   font-size: 21px;
@@ -533,8 +582,11 @@ header#pedalboard-actions,
 #bank-library header,
 #cloud-plugins-library header,
 #patchstorage-library header,
+#patchstorage-pedalboards-library header,
+#patchstorage-hub header,
 #pedalboards-library header,
-#file-manager-library header {
+#file-manager-library header,
+#sfzbuilder-library header {
   display: block;
   left: 0;
   height: 45px;
diff --git a/html/css/less/patchstorage.less b/html/css/less/patchstorage.less
index f36d38b34..e424ce88d 100644
--- a/html/css/less/patchstorage.less
+++ b/html/css/less/patchstorage.less
@@ -1,4 +1,6 @@
-#patchstorage-library {
+#patchstorage-library,
+#patchstorage-pedalboards-library,
+#patchstorage-hub {
   background: #2c2c2c;
   bottom: 45px;
   left: 0;
diff --git a/html/css/less/sfzbuilder.less b/html/css/less/sfzbuilder.less
new file mode 100644
index 000000000..a799ce00f
--- /dev/null
+++ b/html/css/less/sfzbuilder.less
@@ -0,0 +1,10 @@
+// pi-Stomp: SFZ Sound Bank Builder.
+//
+// This file is empty on purpose.
+//
+// The panel is an island. Its stylesheet is html/js/app/sfzbuilder/sfzbuilder.css
+// and mount.js adds that file to the page. Thus the markup, the code and the
+// style of the feature are in one directory, and a change to the panel does not
+// make main.css change.
+//
+// See docs/frontend-architecture.md, rules 4.3 and 4.5.
diff --git a/html/css/main.css b/html/css/main.css
index 93bede0d3..10fe50ac9 100644
--- a/html/css/main.css
+++ b/html/css/main.css
@@ -1 +1 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,*:before,*:after{color:#000 !important;text-shadow:none !important;background:transparent !important;box-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.table{border-collapse:collapse !important}.table td,.table th{background-color:#fff !important}.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#883996;text-decoration:none}a:hover,a:focus{color:#56245f;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive,.thumbnail>img,.thumbnail a>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:0}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:0;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:400;line-height:1;color:#999}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}small,.small{font-size:85%}mark,.mark{padding:.2em;background-color:#F29446}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#999}.text-primary{color:#883996}a.text-primary:hover,a.text-primary:focus{color:#662b71}.text-success{color:#3c763d}a.text-success:hover,a.text-success:focus{color:#2b542c}.text-info{color:#3A633D}a.text-info:hover,a.text-info:focus{color:#274329}.text-warning{color:#fff}a.text-warning:hover,a.text-warning:focus{color:#e6e6e6}.text-danger{color:#a94442}a.text-danger:hover,a.text-danger:focus{color:#843534}.bg-primary{color:#fff;background-color:#883996}a.bg-primary:hover,a.bg-primary:focus{background-color:#662b71}.bg-success{background-color:#dff0d8}a.bg-success:hover,a.bg-success:focus{background-color:#c1e2b3}.bg-info{background-color:#A6ECB1}a.bg-info:hover,a.bg-info:focus{background-color:#7ce38c}.bg-warning{background-color:#F29446}a.bg-warning:hover,a.bg-warning:focus{background-color:#ef7816}.bg-danger{background-color:#f2dede}a.bg-danger:hover,a.bg-danger:focus{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#999}blockquote footer:before,blockquote small:before,blockquote .small:before{content:"\2014 \00A0"}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:""}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:"\00A0 \2014"}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:0}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:0}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:100%}}@media (min-width:992px){.container{width:970px}}@media (min-width:1240px){.container{width:1270px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*="col-"]{padding-right:0;padding-left:0}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1240px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}table col[class*="col-"]{position:static;display:table-column;float:none}table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none}caption{padding-top:8px;padding-bottom:8px;color:#999;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#A6ECB1}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th{background-color:#91e89f}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#F29446}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr.warning:hover>th{background-color:#f0862e}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;appearance:none}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"].disabled,input[type="checkbox"].disabled,fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"]{cursor:not-allowed}input[type="file"]{display:block}input[type="range"]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}@media screen and (-webkit-min-device-pixel-ratio:0){input[type="date"].form-control,input[type="time"].form-control,input[type="datetime-local"].form-control,input[type="month"].form-control{line-height:34px}input[type="date"].input-sm,input[type="time"].input-sm,input[type="datetime-local"].input-sm,input[type="month"].input-sm,.input-group-sm input[type="date"],.input-group-sm input[type="time"],.input-group-sm input[type="datetime-local"],.input-group-sm input[type="month"]{line-height:30px}input[type="date"].input-lg,input[type="time"].input-lg,input[type="datetime-local"].input-lg,input[type="month"].input-lg,.input-group-lg input[type="date"],.input-group-lg input[type="time"],.input-group-lg input[type="datetime-local"],.input-group-lg input[type="month"]{line-height:46px}}.form-group{margin-bottom:15px}.radio,.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px}.radio.disabled label,.checkbox.disabled label,fieldset[disabled] .radio label,fieldset[disabled] .checkbox label{cursor:not-allowed}.radio label,.checkbox label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{position:absolute;margin-top:4px \9;margin-left:-20px}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.radio-inline.disabled,.checkbox-inline.disabled,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox-inline{cursor:not-allowed}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}select.input-sm{height:30px;line-height:30px}textarea.input-sm,select[multiple].input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm textarea.form-control,.form-group-sm select[multiple].form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}select.input-lg{height:46px;line-height:46px}textarea.input-lg,select[multiple].input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg textarea.form-control,.form-group-lg select[multiple].form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.33}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.input-lg+.form-control-feedback,.input-group-lg+.form-control-feedback,.form-group-lg .form-control+.form-control-feedback{width:46px;height:46px;line-height:46px}.input-sm+.form-control-feedback,.input-group-sm+.form-control-feedback,.form-group-sm .form-control+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label{color:#fff}.has-warning .form-control{border-color:#fff;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .form-control:focus{border-color:#e6e6e6;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #fff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #fff}.has-warning .input-group-addon{color:#fff;background-color:#F29446;border-color:#fff}.has-warning .form-control-feedback{color:#fff}.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline,.has-error.radio label,.has-error.checkbox label,.has-error.radio-inline label,.has-error.checkbox-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn,.form-inline .input-group .form-control{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .radio label,.form-inline .checkbox label{padding-left:0}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .radio,.form-horizontal .checkbox{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65;-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;background-image:none;border-color:#adadad}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#883996;border-color:#773284}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-primary:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#883996;border-color:#773284}.btn-primary .badge{color:#883996;background-color:#fff}.btn-success{color:#fff;background-color:#883996;border-color:#773284}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-success:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus{background-color:#883996;border-color:#773284}.btn-success .badge{color:#883996;background-color:#fff}.btn-info{color:#fff;background-color:#883996;border-color:#773284}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-info:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus{background-color:#883996;border-color:#773284}.btn-info .badge{color:#883996;background-color:#fff}.btn-warning{color:#fff;background-color:#F29446;border-color:#f0862e}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ef7816;border-color:#95490a}.btn-warning:hover{color:#fff;background-color:#ef7816;border-color:#d3680f}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ef7816;background-image:none;border-color:#d3680f}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d3680f;border-color:#95490a}.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus{background-color:#F29446;border-color:#f0862e}.btn-warning .badge{color:#F29446;background-color:#fff}.btn-danger{color:#fff;background-color:#D91E36;border-color:#c31b30}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#ac182b;border-color:#530b15}.btn-danger:hover{color:#fff;background-color:#ac182b;border-color:#8d1323}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#ac182b;background-image:none;border-color:#8d1323}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#8d1323;border-color:#530b15}.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus{background-color:#D91E36;border-color:#c31b30}.btn-danger .badge{color:#D91E36;background-color:#fff}.btn-link{font-weight:400;color:#883996;border-radius:0}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#56245f;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#999;text-decoration:none}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:0}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height, visibility;transition-property:height, visibility;-webkit-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;transition-timing-function:ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid \9;border-right:4px solid transparent;border-left:4px solid transparent}.dropup,.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:0;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#883996;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#999;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid \9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle="buttons"]>.btn input[type="radio"],[data-toggle="buttons"]>.btn-group>.btn input[type="radio"],[data-toggle="buttons"]>.btn input[type="checkbox"],[data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"]{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*="col-"]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn,select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn,select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn{height:auto}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:0}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:0}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:0}.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#999}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:#999;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#eee;border-color:#883996}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:0 0 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:0 0 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:0}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#883996}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:0 0 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:0}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030}.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:200px}}@media (min-width:768px){.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-right:15px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:0}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-right:-15px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);margin-top:8px;margin-bottom:8px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn,.navbar-form .input-group .form-control{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .radio,.navbar-form .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .radio label,.navbar-form .checkbox label{padding-left:0}.navbar-form .radio input[type="radio"],.navbar-form .checkbox input[type="checkbox"]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left !important}.navbar-right{float:right !important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:hover,.navbar-default .navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#ccc;background-color:transparent}}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:hover,.navbar-default .btn-link:focus{color:#333}.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:hover,.navbar-default .btn-link[disabled]:focus,fieldset[disabled] .navbar-default .btn-link:focus{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#999}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .navbar-nav>li>a{color:#999}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{color:#444;background-color:transparent}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#999}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#444;background-color:transparent}}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#999}.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus{color:#fff}.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:hover,.navbar-inverse .btn-link[disabled]:focus,fieldset[disabled] .navbar-inverse .btn-link:focus{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:0}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#999}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:0}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#883996;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{z-index:2;color:#56245f;background-color:#eee;border-color:#ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:3;color:#fff;cursor:default;background-color:#883996;border-color:#883996}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#999;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.33}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#999}.label-default[href]:hover,.label-default[href]:focus{background-color:#808080}.label-primary{background-color:#883996}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#662b71}.label-success{background-color:#883996}.label-success[href]:hover,.label-success[href]:focus{background-color:#662b71}.label-info{background-color:#883996}.label-info[href]:hover,.label-info[href]:focus{background-color:#662b71}.label-warning{background-color:#F29446}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ef7816}.label-danger{background-color:#D91E36}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#ac182b}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#999;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge,.btn-group-xs>.btn .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#883996;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1,.jumbotron .h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:0}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1,.jumbotron .h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:0;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail>img,.thumbnail a>img{margin-right:auto;margin-left:auto}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active{border-color:#883996}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:0}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:bold}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#3A633D;background-color:#A6ECB1;border-color:#89e689}.alert-info hr{border-top-color:#75e174}.alert-info .alert-link{color:#274329}.alert-warning{color:#fff;background-color:#F29446;border-color:#f0662e}.alert-warning hr{border-top-color:#ef5416}.alert-warning .alert-link{color:#e6e6e6}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#883996;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-striped .progress-bar,.progress-bar-striped{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-size:40px 40px}.progress.active .progress-bar,.progress-bar.active{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#883996}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-info{background-color:#883996}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-warning{background-color:#F29446}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-danger{background-color:#D91E36}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-left,.media-right,.media-body{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.list-group-item.disabled,.list-group-item.disabled:hover,.list-group-item.disabled:focus{color:#999;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text{color:#999}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{z-index:2;color:#fff;background-color:#883996;border-color:#883996}.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>.small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text{color:#ddb7e4}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:hover,button.list-group-item-success:hover,a.list-group-item-success:focus,button.list-group-item-success:focus{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,button.list-group-item-success.active,a.list-group-item-success.active:hover,button.list-group-item-success.active:hover,a.list-group-item-success.active:focus,button.list-group-item-success.active:focus{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#3A633D;background-color:#A6ECB1}a.list-group-item-info,button.list-group-item-info{color:#3A633D}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:hover,button.list-group-item-info:hover,a.list-group-item-info:focus,button.list-group-item-info:focus{color:#3A633D;background-color:#91e89f}a.list-group-item-info.active,button.list-group-item-info.active,a.list-group-item-info.active:hover,button.list-group-item-info.active:hover,a.list-group-item-info.active:focus,button.list-group-item-info.active:focus{color:#fff;background-color:#3A633D;border-color:#3A633D}.list-group-item-warning{color:#fff;background-color:#F29446}a.list-group-item-warning,button.list-group-item-warning{color:#fff}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:hover,button.list-group-item-warning:hover,a.list-group-item-warning:focus,button.list-group-item-warning:focus{color:#fff;background-color:#f0862e}a.list-group-item-warning.active,button.list-group-item-warning.active,a.list-group-item-warning.active:hover,button.list-group-item-warning.active:hover,a.list-group-item-warning.active:focus,button.list-group-item-warning.active:focus{color:#fff;background-color:#fff;border-color:#fff}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:hover,button.list-group-item-danger:hover,a.list-group-item-danger:focus,button.list-group-item-danger:focus{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,button.list-group-item-danger.active,a.list-group-item-danger.active:hover,button.list-group-item-danger.active:hover,a.list-group-item-danger.active:focus,button.list-group-item-danger.active:focus{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:-1px;border-top-right-radius:-1px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>a,.panel-title>small,.panel-title>.small,.panel-title>small>a,.panel-title>.small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.table,.panel>.table-responsive>.table,.panel>.panel-collapse>.table{margin-bottom:0}.panel>.table caption,.panel>.table-responsive>.table caption,.panel>.panel-collapse>.table caption{padding-right:15px;padding-left:15px}.panel>.table:first-child,.panel>.table-responsive:first-child>.table:first-child{border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child{border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child{border-top-left-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child{border-top-right-radius:-1px}.panel>.table:last-child,.panel>.table-responsive:last-child>.table:last-child{border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:-1px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child th,.panel>.table>tbody:first-child>tr:first-child td{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:0}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.panel-body,.panel-group .panel-heading+.panel-collapse>.list-group{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#444}.panel-default>.panel-heading{color:#999;background-color:#444;border-color:#444}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#444}.panel-default>.panel-heading .badge{color:#444;background-color:#999}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#444}.panel-primary{border-color:#883996}.panel-primary>.panel-heading{color:#fff;background-color:#883996;border-color:#883996}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#883996}.panel-primary>.panel-heading .badge{color:#883996;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#883996}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#89e689}.panel-info>.panel-heading{color:#3A633D;background-color:#A6ECB1;border-color:#89e689}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#89e689}.panel-info>.panel-heading .badge{color:#A6ECB1;background-color:#3A633D}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#89e689}.panel-warning{border-color:#f0662e}.panel-warning>.panel-heading{color:#fff;background-color:#F29446;border-color:#f0662e}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#f0662e}.panel-warning>.panel-heading .badge{color:#F29446;background-color:#fff}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#f0662e}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-lg{padding:24px;border-radius:0}.well-sm{padding:9px;border-radius:0}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none}.tooltip{position:absolute;z-index:1030;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:0}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.clearfix,.dl-horizontal dd,.container,.container-fluid,.row,.form-horizontal .form-group,.btn-toolbar,.btn-group-vertical>.btn-group,.nav,.navbar,.navbar-header,.navbar-collapse,.pager,.panel-body{display:block}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after{display:table;content:" "}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1239px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1240px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1240px){.visible-lg-block{display:block !important}}@media (min-width:1240px){.visible-lg-inline{display:inline !important}}@media (min-width:1240px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1239px){.hidden-md{display:none !important}}@media (min-width:1240px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table !important}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}#cloud-plugins-library{background:#2c2c2c;bottom:45px;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2}#cloud-plugins-library h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#cloud-plugins-library header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}#cloud-plugins-library header .close{opacity:1;position:absolute;right:10px;top:16px}#cloud-plugins-library .filter{bottom:45px;left:0;position:fixed;top:45px;right:0;width:240px;overflow:auto}#cloud-plugins-library .filter h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#cloud-plugins-library .filter h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#cloud-plugins-library .filter .control-group .switch{margin:5px 0 5px 15px;position:relative;width:18rem;height:2.5rem;font-size:0}#cloud-plugins-library .filter .control-group .switch input{position:absolute;top:0;z-index:2;opacity:0;cursor:pointer;height:2.5rem;width:5rem;left:5.5rem;margin:0}#cloud-plugins-library .filter .control-group .switch input:checked{z-index:1}#cloud-plugins-library .filter .control-group .switch input:checked+label{opacity:1;cursor:default}#cloud-plugins-library .filter .control-group .switch input:checked~.toggle-outside .toggle-inside{left:.25rem;background:#883996}#cloud-plugins-library .filter .control-group .switch input:not(:checked)+label:hover{opacity:.5}#cloud-plugins-library .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside{left:2.65rem;background:#4a4a4a}#cloud-plugins-library .filter .control-group .switch label{color:#fff;opacity:.33;transition:opacity .25s ease;cursor:pointer;font-size:14px;line-height:3rem;display:inline-block;width:5rem;height:100%;margin:0;text-align:center}#cloud-plugins-library .filter .control-group .switch label:first-of-type{text-align:left}#cloud-plugins-library .filter .control-group .switch label:last-of-type{margin-left:5.5rem}#cloud-plugins-library .filter .control-group .switch .toggle-outside{height:100%;border-radius:2rem;padding:.25rem;overflow:hidden;transition:.25s ease all;background:#fff;opacity:.8;position:absolute;width:5rem;left:5.5rem}#cloud-plugins-library .filter .control-group .switch .toggle-inside{border-radius:5rem;background:#4a4a4a;position:absolute;transition:.25s ease all;height:2rem;width:2rem}#cloud-plugins-library .filter .control-group select{width:50px}#cloud-plugins-library .filter .control-group input[type='checkbox']{display:none}#cloud-plugins-library .filter .control-group input[type='checkbox']+label{cursor:pointer;background:#222;color:#fff;display:block;height:32px;line-height:32px;width:100%;margin-bottom:1px;padding-left:15px;border:0 solid #F29446}#cloud-plugins-library .filter .control-group input[type='checkbox']+label:hover{background:#000}#cloud-plugins-library .filter .control-group input[type='checkbox']:checked+label{background:#F29446}#cloud-plugins-library .filter .control-group input[type='checkbox']:checked+label:hover{background:#600E6F}#cloud-plugins-library .filter>.form-group .input-clean{margin-right:8px !important}#cloud-plugins-library .filter .categories{width:100%;margin:0 0 15px 0}#cloud-plugins-library .filter .categories li{display:block;background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding:0 15px;position:relative;transition:all .33s;line-height:32px;height:32px}#cloud-plugins-library .filter .categories li span{float:right}#cloud-plugins-library .filter .categories li.selected{background:#883996;color:#fff}#cloud-plugins-library .filter .categories li:hover{background:#000}#cloud-plugins-library .filter .categories li.selected:hover{background:#600E6F}.cloud-plugins{left:240px;position:fixed;right:0;top:45px;bottom:45px;background:#111 url(../img/watermark.png) 100% 100% no-repeat;overflow-y:auto}.cloud-plugins .plugins-wrapper{width:100%}.cloud-plugins .cloud-plugin{color:#fff;float:left;width:100%;position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:120px;border:5px solid #000;padding:0 !important;background:rgba(255,255,255,0.07);transition:all .33s;cursor:pointer}@media (min-width:768px){.cloud-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:992px){.cloud-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:1240px){.cloud-plugins .cloud-plugin{float:left;width:33.33333333%}}.cloud-plugins .cloud-plugin:hover{background-color:black}.cloud-plugins .cloud-plugin:hover .description{background:rgba(0,0,0,0.8)}.cloud-plugins .cloud-plugin:hover .description hr{border-color:#F29446}.cloud-plugins .cloud-plugin:hover figure{top:-5px}.cloud-plugins .cloud-plugin:hover div.demo-plugin{opacity:0}.cloud-plugins .cloud-plugin:hover span.price{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:80px}.cloud-plugins .cloud-plugin:hover span.licensed{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:113px;text-align:center}.cloud-plugins .cloud-plugin:hover span.coming-soon{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:113px;text-align:center}.cloud-plugins .cloud-plugin:hover span.price-container{margin-left:170px;width:200px}.cloud-plugins .cloud-plugin figure{height:100px;position:absolute;top:10px;left:20px;margin:0;transition:all .33s linear;display:flex;flex-direction:column;justify-content:center}.cloud-plugins .cloud-plugin figure img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}.cloud-plugins .cloud-plugin span.price{transition:all .33s linear}.cloud-plugins .cloud-plugin span.price-container{transition:all .33s linear}.cloud-plugins .cloud-plugin .cloud-plugin-border{border:1px solid #333;width:100%;height:100%}.cloud-plugins .cloud-plugin .description{transition:all .33s;display:block;line-height:1.5;overflow:hidden;position:absolute;top:1px;right:1px;bottom:1px;left:80px;background:rgba(33,33,33,0.66)}.cloud-plugins .cloud-plugin .description .no_description{color:rgba(255,255,255,0.25)}.cloud-plugins .cloud-plugin .description hr{transition:all .33s;border:none;border-bottom:1px solid #883996;margin:0;position:absolute;top:50%;left:0;width:calc(100% - 5px)}.cloud-plugins .cloud-plugin .description .title{display:block;text-transform:uppercase;font-weight:bold;overflow:hidden;padding:8px 10px 1px 10px}.cloud-plugins .cloud-plugin .description .author{display:block;padding:1px 10px}.cloud-plugins .cloud-plugin .description p{position:absolute;left:10px;right:10px;top:75%;transform:translateY(-50%);height:2.4em;line-height:1.25em;overflow:hidden}.cloud-plugins .cloud-plugin .actions{font-size:11px;font-weight:bold;text-transform:uppercase}.cloud-plugins .cloud-plugin .actions>span{cursor:pointer}.cloud-plugins .cloud-plugin .actions>span:hover{text-decoration:underline}.cloud-plugins .cloud-plugin .actions span.duplicate{margin:0 6px}.cloud-plugins h2{margin-left:23px;font-size:20px;color:#cccccc}.cloud-plugins h3{color:#cccccc}.cloud-plugins .featured-plugins{position:relative;height:360px;width:100%;display:block}.cloud-plugins .featured-plugins.double,.cloud-plugins .featured-plugins.single{height:490px !important}.cloud-plugins .featured-plugins.double .box,.cloud-plugins .featured-plugins.single .box{transition:all 0s !important}.cloud-plugins .featured-plugins.double .carousel,.cloud-plugins .featured-plugins.single .carousel{height:485px !important}.cloud-plugins .featured-plugins.double .carousel .slick-list,.cloud-plugins .featured-plugins.single .carousel .slick-list{height:485px !important}.cloud-plugins .featured-plugins.double .box{margin:30px 80px !important}.cloud-plugins .featured-plugins.single .box{margin:30px 30px !important}.cloud-plugins .featured-plugins .carousel{position:absolute;top:0;bottom:0;right:90px;left:90px;height:380px !important}.cloud-plugins .featured-plugins .carousel .slick-list{height:380px !important}.cloud-plugins .featured-plugins .carousel .featured{cursor:pointer;margin-top:40px}.cloud-plugins .featured-plugins .carousel .featured .box{padding:4px;border:1px solid #737373;height:300px;opacity:.4;margin:0 24px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box{border:1px solid #444444;text-align:center;height:290px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price-container{position:absolute;top:0;left:0;width:90px;height:90px;overflow:hidden;color:#ffffff}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price{background-color:#883996;border:1px solid #883996;position:absolute;top:9px;left:-30px;padding:3px 0;transform:rotate(-45deg);min-width:108px;text-align:center}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price:before{content:"€ "}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .licensed{background-color:#883996;border:1px solid #883996;position:absolute;top:16px;left:-30px;padding:3px 27px;font-size:12px;transform:rotate(-45deg)}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .licensed:before{content:"PURCHASED"}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box h2{color:#c3c3c3;text-align:center}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .img-container{height:113px;width:100%}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .img-container img{vertical-align:middle;transition:all 500ms ease;width:auto;height:auto;margin:auto;display:block;max-height:113px;padding:0 20px;max-width:100%}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box p{color:#e0e0e0;padding:5px 5px 0 5px;height:59px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box button{background-color:transparent;color:#ff3838;border:1px solid #ff3838;text-transform:uppercase;padding:8px 20px}.cloud-plugins .featured-plugins .carousel .featured.slick-center{height:390px}.cloud-plugins .featured-plugins .carousel .featured.slick-center .box{opacity:1;transform:scale(1.2) translate(0, 0);transition:all 500ms ease}.cloud-plugins .featured-plugins .carousel .slick-arrow{width:60px;height:60px;top:200px}.cloud-plugins .featured-plugins .carousel .slick-arrow:before{font-size:60px}.cloud-plugins .featured-plugins .carousel .slick-prev{left:-70px !important}.cloud-plugins .featured-plugins .carousel .slick-next{right:-70px !important}.plugin-container .status-container{position:absolute;top:0;left:0;right:2px;text-align:right;padding-right:2px}.plugin-container .status{padding:1px 4px;text-align:center;text-transform:uppercase;font-weight:bold;font-size:9px;margin-left:1px}.plugin-container .status.installed{border:1px solid #883996;background-color:#883996}.plugin-container .status.installed:after{content:"installed"}.plugin-container .status.outdated{border:1px solid #F29446;background-color:#F29446;color:#212121}.plugin-container .status.outdated:after{content:"new version"}.plugin-container .price-container{position:absolute;top:0;left:0;width:90px;height:90px;overflow:hidden}.plugin-container .price{background-color:#883996;border:1px solid #883996;position:absolute;top:9px;left:-25px;padding:3px 0;transform:rotate(-45deg);min-width:108px;text-align:center}.plugin-container .price:before{content:"€ "}.plugin-container .licensed{background-color:#883996;border:1px solid #883996;position:absolute;top:21px;left:-30px;padding:3px 27px;font-size:14px;transform:rotate(-45deg)}.plugin-container .licensed:before{content:"PURCHASED"}.plugin-container .coming-soon{background-color:#883996;border:1px solid #883996;position:absolute;top:26px;left:-35px;padding:3px 27px;font-size:12px;transform:rotate(-45deg);width:135px}.plugin-container .coming-soon:before{content:"TRIAL ONLY"}.plugin-container .status.buildEnvironment{border:1px solid #FF2927;background-color:#FF2927}.plugin-container .status.buildEnvironment:after{content:"local"}.plugin-container .status.buildEnvironment.labs:after{content:"labs"}.plugin-container .status.buildEnvironment.dev:after{content:"dev"}.plugin-container .status.buildEnvironment.prod{display:none}.plugin-container .status.buildEnvironment.prod:after{content:""}.plugin-container .demo{border:1px solid #FF2927;background-color:#FF2927}.plugin-container .demo:after{content:"demo"}.plugin-container .description-price-container{position:absolute;top:-17px;left:-17px;overflow:hidden;height:200px}.plugin-container .description-price-container .description-price{background-color:#883996;border:1px solid #883996;position:relative;top:34px;left:-57px;padding:3px 0;transform:rotate(-45deg);min-width:250px;text-align:center;font-size:34px;z-index:11}.plugin-container .description-price-container .description-price:before{content:"€ "}.plugin-container .description-price-container .description-licensed{background-color:#883996;border:1px solid #883996;position:relative;top:50px;left:-60px;padding:3px 0;transform:rotate(-45deg);min-width:280px;text-align:center;font-size:34px;z-index:1}.plugin-container .description-price-container .description-licensed:before{content:"PURCHASED"}.plugin-container .description-price-container .description-coming-soon{background-color:#883996;border:1px solid #883996;position:relative;top:50px;left:-70px;padding:3px 0;transform:rotate(-45deg);min-width:280px;text-align:center;font-size:26px;z-index:1}.plugin-container .description-price-container .description-coming-soon:before{content:"TRIAL ONLY"}.buy-button{margin-top:-20px;position:relative}.buy-button iframe{position:absolute;top:-17px;left:0;min-width:115px;z-index:1}.shopify-fake-button{position:absolute;top:3px;left:0;z-index:0;background-color:#c224b0;font-family:Arial;font-size:12px;opacity:.25;min-width:115px;min-height:34px;padding:9px 15px;text-align:center}#patchstorage-library{background:#2c2c2c;bottom:45px;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2}#patchstorage-library h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#patchstorage-library header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}#patchstorage-library header .close{opacity:1;position:absolute;right:10px;top:16px}#patchstorage-library .filter{bottom:45px;left:0;position:fixed;top:45px;right:0;width:240px;overflow:auto}#patchstorage-library .filter h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#patchstorage-library .filter h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#patchstorage-library .filter .control-group .switch{margin:5px 0 5px 15px;position:relative;width:18rem;height:2.5rem;font-size:0}#patchstorage-library .filter .control-group .switch input{position:absolute;top:0;z-index:2;opacity:0;cursor:pointer;height:2.5rem;width:5rem;left:5.5rem;margin:0}#patchstorage-library .filter .control-group .switch input:checked{z-index:1}#patchstorage-library .filter .control-group .switch input:checked+label{opacity:1;cursor:default}#patchstorage-library .filter .control-group .switch input:checked~.toggle-outside .toggle-inside{left:.25rem;background:#883996}#patchstorage-library .filter .control-group .switch input:not(:checked)+label:hover{opacity:.5}#patchstorage-library .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside{left:2.65rem;background:#4a4a4a}#patchstorage-library .filter .control-group .switch label{color:#fff;opacity:.33;transition:opacity .25s ease;cursor:pointer;font-size:14px;line-height:3rem;display:inline-block;width:5rem;height:100%;margin:0;text-align:center}#patchstorage-library .filter .control-group .switch label:first-of-type{text-align:left}#patchstorage-library .filter .control-group .switch label:last-of-type{margin-left:5.5rem}#patchstorage-library .filter .control-group .switch .toggle-outside{height:100%;border-radius:2rem;padding:.25rem;overflow:hidden;transition:.25s ease all;background:#fff;opacity:.8;position:absolute;width:5rem;left:5.5rem}#patchstorage-library .filter .control-group .switch .toggle-inside{border-radius:5rem;background:#4a4a4a;position:absolute;transition:.25s ease all;height:2rem;width:2rem}#patchstorage-library .filter .control-group select{width:50px}#patchstorage-library .filter .control-group input[type='checkbox']{display:none}#patchstorage-library .filter .control-group input[type='checkbox']+label{cursor:pointer;background:#222;color:#fff;display:block;height:32px;line-height:32px;width:100%;margin-bottom:1px;padding-left:15px;border:0 solid #F29446}#patchstorage-library .filter .control-group input[type='checkbox']+label:hover{background:#000}#patchstorage-library .filter .control-group input[type='checkbox']:checked+label{background:#F29446}#patchstorage-library .filter .control-group input[type='checkbox']:checked+label:hover{background:#600E6F}#patchstorage-library .filter>.form-group .input-clean{margin-right:8px !important}#patchstorage-library .filter .categories{width:100%;margin:0 0 15px 0}#patchstorage-library .filter .categories li{display:block;background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding:0 15px;position:relative;transition:all .33s;line-height:32px;height:32px}#patchstorage-library .filter .categories li span{float:right}#patchstorage-library .filter .categories li.selected{background:#883996;color:#fff}#patchstorage-library .filter .categories li:hover{background:#000}#patchstorage-library .filter .categories li.selected:hover{background:#600E6F}.patchstorage-plugins{left:240px;position:fixed;right:0;top:45px;bottom:45px;background:#111 url(../img/watermark.png) 100% 100% no-repeat;overflow-y:auto}.patchstorage-plugins .plugins-wrapper{width:100%}.patchstorage-plugins .cloud-plugin{color:#fff;float:left;width:100%;position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:120px;border:5px solid #000;padding:0 !important;background:rgba(255,255,255,0.07);transition:all .33s;cursor:pointer}@media (min-width:768px){.patchstorage-plugins .cloud-plugin{float:left;width:100%}}@media (min-width:992px){.patchstorage-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:1240px){.patchstorage-plugins .cloud-plugin{float:left;width:33.33333333%}}.patchstorage-plugins .cloud-plugin:hover{background-color:black}.patchstorage-plugins .cloud-plugin:hover .description{background:rgba(0,0,0,0.8)}.patchstorage-plugins .cloud-plugin:hover .description hr{border-color:#F29446}.patchstorage-plugins .cloud-plugin:hover figure{top:-5px}.patchstorage-plugins .cloud-plugin figure{height:100px;position:absolute;top:10px;left:20px;margin:0;transition:all .33s linear;display:flex;flex-direction:column;justify-content:center}.patchstorage-plugins .cloud-plugin figure img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}.patchstorage-plugins .cloud-plugin .cloud-plugin-border{border:1px solid #333;width:100%;height:100%}.patchstorage-plugins .cloud-plugin .description{transition:all .33s;display:block;line-height:1.5;overflow:hidden;position:absolute;top:1px;right:1px;bottom:1px;left:80px;background:rgba(33,33,33,0.66)}.patchstorage-plugins .cloud-plugin .description .no_description{color:rgba(255,255,255,0.25)}.patchstorage-plugins .cloud-plugin .description hr{transition:all .33s;border:none;border-bottom:1px solid #883996;margin:0;position:absolute;top:50%;left:0;width:calc(100% - 5px)}.patchstorage-plugins .cloud-plugin .description .title{display:block;text-transform:uppercase;font-weight:bold;padding:8px 10px 1px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.patchstorage-plugins .cloud-plugin .description .author{display:block;padding:1px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.patchstorage-plugins .cloud-plugin .description p{position:absolute;left:10px;right:10px;top:75%;transform:translateY(-50%);height:2.4em;line-height:1.25em;overflow:hidden}.patchstorage-plugins .cloud-plugin .actions{font-size:11px;font-weight:bold;text-transform:uppercase}.patchstorage-plugins .cloud-plugin .actions>span{cursor:pointer}.patchstorage-plugins .cloud-plugin .actions>span:hover{text-decoration:underline}.patchstorage-plugins .cloud-plugin .actions span.duplicate{margin:0 6px}.patchstorage-plugins h2{margin-left:23px;font-size:20px;color:#cccccc}.patchstorage-plugins h3{color:#cccccc}.plugin-container .status-container{position:absolute;top:0;left:0;right:2px;text-align:right;padding-right:2px}.plugin-container .status{padding:1px 4px;text-align:center;text-transform:uppercase;font-weight:bold;font-size:9px;margin-left:1px}.plugin-container .status.downloads{border:1px solid black;background-color:black}.plugin-container .status.state.ready-to-go{display:none;border:1px solid #8AC926;background-color:#8AC926}.plugin-container .status.state.ready-to-go:after{content:"ready"}.plugin-container .status.state.help-needed{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.state.help-needed:after{content:"help"}.plugin-container .status.state.inactive{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.state.inactive:after{content:"deprecated"}.plugin-container .status.state.work-in-progress{border:1px solid #1982C4;background-color:#1982C4}.plugin-container .status.state.work-in-progress:after{content:"work in progress"}.plugin-container .status.installed{border:1px solid #883996;background-color:#883996}.plugin-container .status.installed:after{content:"installed"}.plugin-container .status.unavailable{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.unavailable:after{content:"removed from patchstorage"}.plugin-container .status.local{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.local:after{content:"local"}.plugin-container .status.outdated{border:1px solid #F29446;background-color:#F29446;color:#212121}.plugin-container .status.outdated:after{content:"new version"}.plugin-container .status.buildEnvironment{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.buildEnvironment:after{content:"local"}.plugin-container .status.buildEnvironment.dev:after{content:"dev"}.plugin-container .status.buildEnvironment.prod{display:none}.plugin-container .status.buildEnvironment.prod:after{content:""}.patchstorage-info{background-color:rgba(20,20,20,0.9);bottom:0;color:#ccc;left:0;overflow-y:scroll;position:fixed;right:0;top:0;z-index:40}.patchstorage-info .box{margin-top:3em;margin-bottom:3em;background-color:#111;padding:15px;border:2px solid #333}.patchstorage-info .box .row-fluid{position:relative}.patchstorage-info .close{color:#fff;font-size:12px;font-weight:bold;opacity:1;position:absolute;right:10px;text-shadow:none;text-transform:uppercase;top:10px}.patchstorage-info .screenshot{padding:18px;min-width:3em;min-height:9em;display:inline-block;z-index:0}.patchstorage-info .screenshot div.state{background-color:#FF2927;font-family:"cooper hewitt",sans-serif;text-transform:uppercase;font-weight:700;padding:5px 10px;color:white;position:absolute;top:18px;left:30px;font-size:16px}.patchstorage-info .screenshot div.state.ready-to-go{display:none;background-color:#8AC926}.patchstorage-info .screenshot div.state.ready-to-go:after{content:"state - ready to go!"}.patchstorage-info .screenshot div.state.help-needed{background-color:#D91E36}.patchstorage-info .screenshot div.state.help-needed:after{content:"state - help needed"}.patchstorage-info .screenshot div.state.inactive{background-color:#D91E36}.patchstorage-info .screenshot div.state.inactive:after{content:"state - deprecated"}.patchstorage-info .screenshot div.state.work-in-progress{background-color:#1982C4}.patchstorage-info .screenshot div.state.work-in-progress:after{content:"state - work in progress"}.patchstorage-info .screenshot img{max-width:100%}.patchstorage-info figure{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:992px){.patchstorage-info figure{float:left;width:33.33333333%}}.patchstorage-info figure:hover{z-index:10 !important}.patchstorage-info .plugin-description{position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:100%;display:block;position:a;padding-left:45px;background:-moz-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-webkit-gradient(linear, left top, right top, color-stop(1em, rgba(17,17,17,0.1)), color-stop(2em, #111));background:-webkit-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-o-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-ms-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:linear-gradient(to right, rgba(17,17,17,0.1) 1em, #111 2em);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1)}@media (min-width:992px){.patchstorage-info .plugin-description{float:left;width:58.33333333%}}.patchstorage-info .plugin-description>p{font-size:16px;margin-bottom:27px;white-space:pre-wrap}.patchstorage-info header{padding:18px 0 0}.patchstorage-info header h1{display:inline-block;vertical-align:middle;color:#fff;font-size:27px;font-weight:bold;line-height:1;margin:0;padding:0}.patchstorage-info header h1 span{font-size:16px;line-height:1;margin:0;padding:0}.patchstorage-info .ps-label{padding:1px 4px;text-transform:uppercase;font-weight:bold;font-size:9px;border:1px solid #03a9f4;background:#03a9f4;color:white;vertical-align:text-top;display:none}.patchstorage-info .version{color:#ccc;font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info .version span.bold{color:#fff;font-size:14px}.patchstorage-info .version button{font-weight:bold;margin-top:6px;text-transform:uppercase}.patchstorage-info .rating{background:url(../img/icn-rating.png) no-repeat -12px top;display:inline-block;height:14px;width:84px}.patchstorage-info .rating.one{background:url(../img/icn-rating.png) no-repeat -12px -15px}.patchstorage-info .rating.two{background:url(../img/icn-rating.png) no-repeat -12px -30px}.patchstorage-info .rating.three{background:url(../img/icn-rating.png) no-repeat -12px -45px}.patchstorage-info .rating.four{background:url(../img/icn-rating.png) no-repeat -12px -60px}.patchstorage-info .rating.five{background:url(../img/icn-rating.png) no-repeat -12px -75px}.patchstorage-info .rating-label{color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info .my-rate{width:15px;height:15px;margin:0;padding:0;float:left;cursor:pointer}.patchstorage-info .plugin-specs{text-align:center;width:100%;border-color:#333}.patchstorage-info .plugin-specs th{background:#333;color:#fff;border-color:#333;text-align:center}.patchstorage-info .plugin-specs td{border-color:#333}.patchstorage-info .plugin-specs td:first-child{width:40%}.patchstorage-info .plugin-specs td:not(first-child){width:20%}.patchstorage-info .comments-reviews{border-top:1px solid #333;margin-top:10px;padding-top:10px}.patchstorage-info .comments-reviews h1{color:#fff;font-size:21px;line-height:2;margin:0;padding:0}.patchstorage-info .reviews{border-bottom:1px solid #333;margin:9px 0 18px 0;padding:9px 0 18px 0}.patchstorage-info article.review{margin:18px 0}.patchstorage-info article.review h1{color:#fff;font-size:14px}.patchstorage-info article.review h1 .rating{margin-left:6px}.patchstorage-info article.review h1 .rating-label{color:#ccc;display:inline;font-size:12px;font-weight:normal;margin-left:6px}.patchstorage-info article.review .bar{background:#333;display:block;height:12px;margin:2px 6px 0;position:relative;width:100px}.patchstorage-info article.review .progress-bar{background:#444;bottom:0;display:block;height:10px;left:0;margin:1px;position:absolute;right:0;top:0;width:50%}.patchstorage-info article.review .rating-number{display:block;font-size:12px;margin-top:-1px}.patchstorage-info article.comment{border-top:1px solid #333;margin:18px 0 0;padding:18px 0 0}.patchstorage-info article.comment h1{color:#fff;font-size:16px;line-height:1}.patchstorage-info article.comment h1 .date{color:#ccc;font-size:12px;font-weight:normal;margin-left:6px}.patchstorage-info .comments{margin:18px 0;padding:18px 0}.patchstorage-info .comments button{margin-top:18px}.patchstorage-info form.comment-form{border-top:1px solid #333;margin:18px 0;padding:18px 0}.patchstorage-info form.comment-form label{font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info form.comment-form textarea{height:180px}.patchstorage-info .favorite-button{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(../img/icons/25/star-border.png) no-repeat center center;opacity:.5}.patchstorage-info .favorite-button.favorite{opacity:1;background:url(../img/icons/25/star.png) no-repeat center center}.patchstorage-info .favorite-button.favorite:hover{opacity:1}.patchstorage-info .online-button-href{display:inline-block;margin-bottom:10px}.patchstorage-info .status.demo{display:inline-block;padding:4px 8px;margin:2px 0;font-size:.8em}#bank-library{bottom:45px;left:0;overflow-x:hidden;overflow-y:auto;position:absolute;right:0;top:0;z-index:2}#bank-library .ui-draggable-dragging{cursor:webkit-dragging !important}#bank-library .mod-banks-drag-item{background:#F29446;color:white;font-weight:bold;z-index:10000;box-shadow:0 5px 15px black;opacity:.5}#bank-library .mod-banks-drag-item .img{display:block;height:auto;margin:0 auto;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-library .mod-banks-drag-item .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;padding-left:5px}#bank-library span.move{background-image:url(../img/move.png);background-position:left center;background-repeat:no-repeat;display:block;float:left;height:32px;left:0;cursor:move !important;margin:-1px 6px 0 0;width:24px}#bank-library span.remove{cursor:pointer;float:right;width:32px;height:32px;display:block;background-image:url(../img/icons/25/delete.png);background-repeat:no-repeat;background-position:50% 50%;transition:background-color .33s}#bank-library span.remove:hover{background-color:#F29446}#bank-library span.title{display:block;float:left;height:32px;overflow:hidden;max-width:70%;white-space:nowrap}#bank-library input::selection{background:#883996 !important;color:white}#bank-library .icon-add{width:1em;height:1em;display:inline-block;font-size:inherit;vertical-align:baseline}#bank-library .icon-add i{position:absolute;width:1em;margin-top:.3em;border-top:.4em solid #888}#bank-library .icon-add b{position:absolute;height:1em;margin-left:.3em;border-left:.4em solid #888}#bank-library #bank-list{left:0;list-style:none;margin:0;padding:0;position:fixed;bottom:45px;overflow-y:auto;top:45px;width:20%;background:#2c2c2c}#bank-library #bank-list>div.add-bank{color:#fff;cursor:pointer;padding-left:5px;line-height:32px;text-transform:uppercase;transition:all .33s}#bank-library #bank-list>div.add-bank:hover{background:#F29446}#bank-library #bank-list>div.add-bank .icon-add{display:inline-block;width:24px;margin-right:6px;padding-left:5px;box-sizing:border-box}#bank-library #bank-list>div.selected span.move{background-position:right center}#bank-library #bank-list>div.selected span.remove{background-position:right center}#bank-library #bank-list .edit-bank{color:#555;width:100% !important;height:30px;margin:1px;padding-left:.5em;background-color:#fff;background-image:none;border:0 solid #ccc;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out}#bank-library #bank-list div{background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;content:\002B;position:relative;transition:all .33s}#bank-library #bank-list div.selected{background:#883996;color:#fff}#bank-library #bank-list div:hover{background:#000}#bank-library #bank-list div.selected:hover{background:#600E6F}#bank-library #bank-list .bank-item{display:block;background:#222;color:#888;line-height:32px;height:32px;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding-left:5px;position:relative}#bank-library #bank-list .bank-item .remove{border-radius:0}#bank-library #bank-list .filter_{border-color:#111;border-style:dotted;border-width:0 1px 0 0;bottom:46px;left:0;padding-top:18px;position:fixed;top:0;right:0;width:240px;overflow:auto}#bank-library #bank-list .filter_ h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#bank-library #bank-list .filter_ h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#bank-library #bank-list .filter_ .control-group{float:left;margin-right:9px;margin-left:10px}#bank-library #bank-list .filter_ .control-group label{color:#fff;display:inline-block;font-size:12px;font-weight:bold}#bank-library #bank-list .filter_ .control-group select{width:50px}#bank-library #bank-list .filter_>.form-group{padding:15px}#bank-library #bank-title{background:#111;left:20%;height:92px;margin:0;padding:0;position:fixed;text-align:left;top:45px;width:50%}#bank-library #bank-title h1{font-size:2em;padding:0;max-height:2em;display:block;margin:.5em .8em 0 .8em;padding-bottom:.2em;color:white;white-space:nowrap;overflow:hidden}#bank-library #bank-title form{margin:0 2em;color:#666}#bank-library #bank-title h2{margin:4px 0 0 14px;display:block;text-transform:initial !Important;color:white;font-size:12px;line-height:20px;text-align:left}#bank-library #bank-title small{font-size:10px;color:#BBBBBB;text-align:left;display:block;margin-left:14px}#bank-library #bank-title select{display:block;float:left;height:22px;margin:5px 2.5%;width:20%;font-size:10px}#bank-library #bank-pedalboards{background:#111;bottom:46px;left:20%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0 0 200px 0;position:fixed;top:164px;width:50%}#bank-library #bank-pedalboards>div{margin:0 10px 20px 20px}#bank-library #bank-pedalboards .pedalboard{color:#fff;cursor:-webkit-grab !important;cursor:grab !important;width:100%;transition:all .33s}#bank-library #bank-pedalboards .pedalboard:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#bank-library #bank-pedalboards .pedalboard:hover{background-color:#883996}#bank-library #bank-pedalboards .pedalboard .info{height:32px;padding-left:5px;background:rgba(255,255,255,0.07)}#bank-library #bank-pedalboards .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative}#bank-library #bank-pedalboards .pedalboard .img{display:inline-block;float:left;height:auto;margin:0 9px 0 0;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-library #bank-pedalboards .mode{border:none;margin:22px 0 18px 0;text-align:center}#bank-library #bank-edit{position:fixed;display:block;background:#111 url(../img/watermark.png) 100% 100% no-repeat;width:80%;bottom:45px;top:45px;left:20%}#bank-library #bank-pedalboards-search{bottom:45px;right:0;overflow:auto;position:fixed;top:0;width:30%;z-index:6}#bank-library #bank-pedalboards-search h2{text-transform:uppercase;color:white;font-size:1.5em;font-weight:bold;float:left}#bank-library #bank-pedalboards-search .box{background:#111;padding:0;box-sizing:border-box}#bank-library #bank-pedalboards-search input{width:50%;padding-left:1em}#bank-library #bank-pedalboards-search .remove{display:none !important}#bank-library #bank-pedalboards-search label{color:#fff;font-weight:bold;text-transform:uppercase;float:left;line-height:45px;padding-left:10px}#bank-library #bank-pedalboards-search .control-group{margin-bottom:10px;padding:0 2%;position:relative;width:29.3%}#bank-library #bank-pedalboards-search input[type="search"]{width:50% !important;float:right;margin:5px}#bank-library #bank-pedalboards-search select{width:100%}#bank-library #bank-pedalboards-search .input-clean{background:#333;color:#fff;cursor:pointer;font-size:8px;height:18px;left:auto !important;position:absolute;right:8px !important;text-align:center;text-transform:uppercase;top:31px !important;width:18px;border-radius:100%}#bank-pedalboards-mode{background:#333;left:30%;height:30px;margin:0;padding:20px 0 0 0;position:absolute;text-align:center;top:68px;width:45%}#bank-pedalboards-mode .grid{background:url(../img/icn-grid-list.png) no-repeat left bottom;display:inline-block;height:14px;width:14px}#bank-pedalboards-mode .grid.selected{background-position:left top}#bank-pedalboards-mode .list{background:url(../img/icn-grid-list.png) no-repeat right bottom;display:inline-block;height:14px;width:14px}#bank-pedalboards-mode .list.selected{background-position:right top}.pedalboard .addressings{width:100%}.pedalboard .addressings .footswitch{background:#2b2b2b url(../img/footswitch-free.png) no-repeat center top;float:left;height:20px;width:25%}.pedalboard .addressings .footswitch.addressed{background:#2b2b2b url(../img/footswitch-addressed.png) no-repeat center top}#bank-pedalboards-result{position:fixed;bottom:45px;top:45px;overflow:auto;width:30%;background:#111}#bank-pedalboards-result .pedalboard{color:#fff;background:rgba(255,255,255,0.07);cursor:-webkit-grab;cursor:grab;margin:0 20px 20px 10px;transition:all .33s}#bank-pedalboards-result .pedalboard:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#bank-pedalboards-result .pedalboard:hover{background-color:#883996}#bank-pedalboards-result .pedalboard .img{display:block;height:auto;margin:0 auto;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-pedalboards-result .pedalboard .img img{max-width:100%}#bank-pedalboards-result .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;padding-left:5px}#bank-pedalboards-result .pedalboard .description{display:block;font-size:11px;height:27px;line-height:1.5;overflow:hidden}#file-manager-library{background:#2c2c2c url(../img/watermark.png) 100% 100% no-repeat;top:0;bottom:46px;left:0;right:0;overflow-x:hidden;overflow-y:auto;position:absolute;z-index:2}#file-manager-wrapper{display:flex;position:fixed;top:45px;bottom:55px;left:2em;right:2em;overflow:auto;padding-top:1%}#file-manager-wrapper iframe{flex:1;border:none}#pedalboards-library{background:#2c2c2c;bottom:45px;left:0;overflow-x:hidden;overflow-y:auto;position:absolute;right:0;top:0;z-index:2}#pedalboards-library h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#pedalboards-library header .form-group{display:inline-block;float:right;margin-top:5px;margin-right:5px}#pedalboards-library header .form-group .form-control{width:200px !important}#pedalboards-library header .form-group .input-clean{line-height:20px;margin-right:12px !important}#pedalboards-library header .view-modes{float:right;margin-right:12px;cursor:pointer}#pedalboards-library header .view-modes .view-mode{font-size:130%}#pedalboards-library header .view-modes .view-mode.selected{color:#fff}#pedalboards-library .filter{border-color:#111;border-style:dotted;border-width:0 1px 0 0;bottom:45px;left:0;position:fixed;right:0;top:45px;width:240px}#pedalboards-library .filter .control-group{float:left;margin-right:9px}#pedalboards-library .filter .control-group label{color:#fff;display:inline-block;font-size:12px;font-weight:bold;width:165px}#pedalboards-library .filter .control-group select{width:50px}#pedalboards-library .pedalboards{left:0;position:fixed;right:0;top:45px;bottom:45px;overflow:auto;background:#111 url(../img/watermark.png) 100% 100% no-repeat;padding-top:1%}#pedalboards-library .pedalboards .pedalboard{color:#fff;float:left;margin:0 0 1% 1%;width:18.8%;position:relative;background-color:transparent;background-image:url(../img/background.jpg);background-position:center center;background-repeat:repeat;background-size:auto 100%;transition:all .33s;cursor:pointer}#pedalboards-library .pedalboards .pedalboard:hover .info{background-color:#883996}#pedalboards-library .pedalboards .pedalboard .img{box-shadow:inset 0 3px 6px black;border:1px solid #000;display:block;width:100%;height:10vw;overflow:hidden;text-align:center;background-image:url(../img/loading-pedalboard.gif);background-position:center center;background-repeat:no-repeat;background-size:auto;position:relative}#pedalboards-library .pedalboards .pedalboard .img.loaded{background-size:contain}#pedalboards-library .pedalboards .pedalboard .img.broken{background-image:url(../img/icons/broken_image.svg);background-size:auto 50%}#pedalboards-library .pedalboards .pedalboard.broken .img::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background-color:rgba(17,17,17,0.5);background-image:url(../img/icons/broken_pedal.svg);background-size:auto 50%;background-repeat:no-repeat;background-position:center}#pedalboards-library .pedalboards .pedalboard .info{background-color:#2c2c2c;transition:background-color .33s}#pedalboards-library .pedalboards .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;height:32px;left:5px;width:calc(100% - 32px);text-overflow:ellipsis;white-space:nowrap}#pedalboards-library .pedalboards .pedalboard .description{display:block;font-size:12px;height:36px;line-height:1.5;overflow:hidden}#pedalboards-library .pedalboards .pedalboard .actions{font-weight:bold;text-transform:uppercase;position:absolute;top:0;right:0}#pedalboards-library .pedalboards .pedalboard .actions .js-remove{width:32px;height:32px;background-image:url(../img/icons/25/delete.png);background-repeat:no-repeat;background-position:50% 50%;transition:background-color .33s}#pedalboards-library .pedalboards .pedalboard .actions .js-remove:hover{background-color:#F29446}#pedalboards-library .pedalboards .pedalboard .actions>span{cursor:pointer}#pedalboards-library .pedalboards .pedalboard .actions>span:hover{text-decoration:underline}#pedalboards-library .pedalboards .pedalboard .actions>span.duplicate{margin:0 6px}#pedalboards-library .pedalboards.list-selected .img{display:none}#nprogress{pointer-events:none;z-index:103100}#nprogress .bar{background:#883996;position:fixed;z-index:103100;top:45px;left:0;opacity:.5;width:100%;height:2px}#nprogress .peg{display:none}#nprogress .spinner{display:none;position:fixed;z-index:1031;top:45px;right:0;background:rgba(0,0,0,0.5);padding:6px;box-sizing:border-box;transform:translate(-50% -50%)}#nprogress .spinner-icon{width:32px;height:32px;box-sizing:border-box;border:solid 3px transparent;border-top-color:#f29446;border-left-color:rgba(242,148,70,0.66);border-bottom-color:rgba(242,148,70,0.33);border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mod-pedal-settings .mod-address.addressed,.mod-pedal-settings .preset-btn-assign-all.addressed{background-color:#a144b2}.mod-pedal-settings-address .mod-box .form-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.mod-pedal-settings-address .mod-box .form-container .btn.js-type,.mod-pedal-settings-address .mod-box .form-container .btn.advanced-toggle{border:solid #333 1px}.mod-pedal-settings-address .mod-box .form-container .main-form-container{width:691px;padding-right:3px}.mod-pedal-settings-address .mod-box .form-container .main-form-container label{text-align:center}.mod-pedal-settings-address .mod-box .form-container .main-form-container .btn.js-type.selected{background-color:#333;color:white}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike{display:flex;flex-basis:100%;align-items:center;color:black;margin:6px 0}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:before,.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:after{content:"";flex-grow:1;background:black;height:3px;font-size:0;line-height:0}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:before{margin-right:8px}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:after{margin-left:8px}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table{width:100%}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:first-child{background-color:#f66}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(2){background-color:#ff6}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(3){background-color:#6ff}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(4){background-color:#bb7cd5}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(5){background-color:#f5a77e}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(6){background-color:#6f6}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(7){background-color:#f6f}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(8){background-color:#8080ff}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th,.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td{border:solid #333 1px;text-align:center}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td{padding:5px;cursor:pointer}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td.selected{background-color:#883996;color:white;box-shadow:3px 3px 3px #999}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td.disabled{cursor:auto;color:#999;background-color:#d9d9d9;box-shadow:inset 0 0 3px #555}.mod-pedal-settings-address .mod-box .form-container .main-form-container .midi-custom-uri{color:#883996}.mod-pedal-settings-address .mod-box .form-container .buttons-container{padding-right:3px;padding-bottom:18px}.mod-pedal-settings-address .mod-box .form-container .advanced-container{border-left:1px solid #eee;padding-left:12px;margin-left:12px}.mod-pedal-settings-address .mod-box .form-container .advanced-container .cv-op-mode label{width:100% !important}.mod-pedal-settings-address .mod-box .form-container .advanced-container .cv-op-mode .mod-controls{width:155px !important}.mod-cv-output .output-cv-checkbox{display:flex;position:absolute;top:45px;left:15px}.mod-cv-output .output-cv-checkbox .checkbox-container{position:relative;padding-left:45px;cursor:pointer;font-size:22px;height:35px;width:35px}.mod-cv-output .output-cv-checkbox .checkbox-container .checkmark{position:absolute;top:0;left:0;height:35px;width:35px;background-color:#eee}.mod-cv-output .output-cv-checkbox .checkbox-container .checkmark:after{content:"";position:absolute;display:none;left:13px;top:7px;width:10px;height:17px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;z-index:5;width:100%;height:100%;top:0;left:0}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:disabled{cursor:not-allowed}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:checked~.checkmark{background-color:#883996}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:checked~.checkmark:after{display:block}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:disabled~.checkmark{background-color:#999}.mod-cv-output .output-cv-checkbox input[type=text]{font-size:20px}.mod-cv-output .output-cv-checkbox ::selection{background:#883996 !important;color:white !important}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-semibold-webfont.eot');src:url('../fonts/cooper/cooperhewitt-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-semibold-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-semibold-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-semibold-webfont.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-light-webfont.eot');src:url('../fonts/cooper/cooperhewitt-light-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-light-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-light-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-light-webfont.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-lightitalic-webfont.eot');src:url('../fonts/cooper/cooperhewitt-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-bookitalic-webfont.eot');src:url('../fonts/cooper/cooperhewitt-bookitalic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-book-webfont.eot');src:url('../fonts/cooper/cooperhewitt-book-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-book-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-book-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-book-webfont.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}*{outline:0 !important}html,body{height:100%;overflow:hidden}body{background:#111;min-width:1024px}body.ios{position:fixed;min-width:980px}*{font-family:"cooper hewitt",Sans-serif !important}.unpadded{padding:0 !important}.unpadded-r{padding:0 0 0 7px}.unpadded-l{padding:0 7px 0 0}.ui-draggable:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}.form-control{width:100% !important}#wrapper{bottom:0;left:0;min-width:980px;overflow:hidden;position:absolute;right:0;top:0}hr.dotted{border:1px dotted #444;margin:2px 0 3px 0}.preset-list{width:100%;height:200px !important}.input-clean{background:#333;color:#fff;cursor:pointer;height:18px;left:auto !important;position:absolute;right:0;margin-right:18px !important;text-align:center;text-transform:uppercase;margin-top:-26px !important;width:18px;border-radius:100%}.input-clean:after{content:"&times;";content:"\00d7";font-size:14px;font-weight:bold}.form-control::selection{background:#883996 !important;color:white !important}#notifications{position:absolute;top:55px;right:0;width:320px;z-index:100000}#notifications>section{border-radius:0;margin-bottom:0 !important;opacity:.96;cursor:pointer}#notifications .progressbar{border:0;height:8px;overflow:hidden;position:absolute;left:8px;bottom:0;width:306px}#notifications .progressbar .progressbar-value{background-color:rgba(136,57,150,0.7);height:90%;margin:0}#main-menu{background:#111;bottom:0;color:#fff;height:45px;left:0;position:absolute;right:0;z-index:10}#main-menu>div{cursor:pointer;float:left}#main-menu>div.icon{height:45px;width:45px}#main-menu>div.icon>img{margin:5px 0 0 6px}#main-menu>div.icon.selected{background:#000}#main-menu>div.icon>a{display:block;height:45px;width:45px}#main-menu #mod-plugins{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-45px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-plugins:hover{background-color:#000;background-position:-45px bottom}#main-menu #mod-plugins.selected{background-color:#000;background-position:-45px bottom}#main-menu #mod-cloud-plugins{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-315px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-cloud-plugins:hover{background-color:#000;background-position:-315px bottom}#main-menu #mod-cloud-plugins.selected{background-color:#000;background-position:-315px bottom}#main-menu #patchstorage{background-image:url(../img/patchstorage-menu.png?v=2);background-position:0 top;background-repeat:no-repeat;transition:all .33s;background-size:cover}#main-menu #patchstorage:hover{background-color:#000;background-position:0 bottom}#main-menu #patchstorage.selected{background-color:#000;background-position:0 bottom}#main-menu #mod-pedalboard{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-90px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-pedalboard:hover{background-color:#000;background-position:-90px bottom}#main-menu #mod-pedalboard.selected{background-color:#000;background-position:-90px bottom}#main-menu #mod-bank{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-135px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-bank:hover{background-color:#000;background-position:-135px bottom}#main-menu #mod-bank.selected{background-color:#000;background-position:-135px bottom}#main-menu #mod-file-manager{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-180px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-file-manager:hover{background-color:#000;background-position:-180px bottom}#main-menu #mod-file-manager.selected{background-color:#000;background-position:-180px bottom}#main-menu #banks-saving{margin:21px 0 0 6px;font-size:10px;color:#666;display:none}#main-menu #mod-show-midi-port,#main-menu #mod-transport-icon,#main-menu .mod-bypass,#main-menu #mod-cpu,#main-menu #mod-ram,#main-menu #mod-xruns,#main-menu #mod-buffersize,#main-menu #mod-cpu-stats{background-position:8px 50%;background-repeat:no-repeat;padding-left:40px;padding-right:12px;color:#ffffff;float:right;font-size:11px;font-weight:bold;line-height:4.5;text-transform:uppercase;width:auto !important;transition:all .33s}#main-menu #mod-show-midi-port:hover,#main-menu #mod-transport-icon:hover,#main-menu .mod-bypass:hover,#main-menu #mod-cpu:hover,#main-menu #mod-ram:hover,#main-menu #mod-xruns:hover,#main-menu #mod-buffersize:hover,#main-menu #mod-cpu-stats:hover{background-color:#000}#main-menu #mod-show-midi-port.selected,#main-menu #mod-transport-icon.selected,#main-menu .mod-bypass.selected,#main-menu #mod-cpu.selected,#main-menu #mod-ram.selected,#main-menu #mod-xruns.selected,#main-menu #mod-buffersize.selected,#main-menu #mod-cpu-stats.selected{background-color:#333}#main-menu #mod-show-midi-port{background-image:url(../img/icons/25/midi.png)}#main-menu #mod-transport-icon{background-image:url(../img/icons/25/stop.png);font-family:monospace;width:10.5em !important;text-align:right}#main-menu #mod-transport-icon.playing{background-image:url(../img/icons/25/transport.png)}#main-menu .mod-bypass{background-image:url(../img/icons/25/bypass.png)}#main-menu .mod-bypass.bypassed{background-color:#883996}#main-menu #mod-cpu,#main-menu #mod-ram{cursor:default;width:115px !important;padding:0 !important;background:linear-gradient(to right, #1e5799 0, #2989d8 69%, #ff6430 78%, #ff6430 93%, #c40000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#c40000', GradientType=1)}#main-menu #mod-cpu .progress-title{background-image:url(../img/icons/25/cpu.png);background-position:0 50%;background-repeat:no-repeat;padding-left:30px}#main-menu #mod-ram .progress-title{background-image:url(../img/icons/25/ram.png);background-position:0 50%;background-repeat:no-repeat;padding-left:30px}#main-menu #mod-xruns{background-image:url(../img/icons/25/cpu.png);width:115px !important}#main-menu #mod-cpu-stats{background-image:url(../img/icons/25/cpu.png);width:155px !important;text-transform:none}#main-menu #mod-buffersize{background-image:url(../img/icons/25/cpu.png);width:125px !important}#main-menu .progress{height:45px;margin-bottom:0;overflow:hidden;float:right;background-color:#111;-webkit-transition:width 1s;transition:width 1s}#main-menu .progress .bar{float:right;background:#222 !important}#main-menu .progress-title{position:absolute;top:0;height:45px;margin:0;margin-left:1em;color:white}#main-menu .status{background-color:#111;background-position:3px 50%;background-size:36px;background-repeat:no-repeat;border-color:#2b2b2b;border-style:solid;border-width:0 0 0 1px;float:right}#main-menu #mod-settings{font-family:fontello !important;font-size:28px;padding-top:3px;padding-left:10px;position:relative;color:#fff;opacity:.66;cursor:pointer;transition:all .33s}#main-menu #mod-settings:after{content:'\e802'}#main-menu #mod-settings:hover{opacity:1}#main-menu #mod-update{background-image:url(../img/icons/36/update.png)}#main-menu #mod-update.uptodate{background-image:url(../img/icons/36/ok.png)}#main-menu #mod-status{background-image:url(../img/icons/36/disconnect.png)}#main-menu #mod-status.online{background-image:url(../img/icons/36/disconnect.png)}#main-menu #mod-devices{background-image:url(../img/icons/36/control-chain.png)}#cloud_install_all{background-image:url(../img/icons/36/save.png);float:right;font-size:21px}#cloud_update_all,#patchstorage_update_all{background-image:url(../img/icons/36/update.png);float:right;font-size:21px}header#pedalboard-actions,#bank-library header,#cloud-plugins-library header,#patchstorage-library header,#pedalboards-library header,#file-manager-library header{display:block;left:0;height:45px;line-height:45px;position:fixed;right:0;top:0;box-shadow:0 1px 10px rgba(0,0,0,0.1);z-index:5;background-color:#111;background-position:3px 50%;background-size:36px;background-repeat:no-repeat;background-image:url(../img/icons/36/mod.png);padding-left:45px}header#pedalboard-actions .help,#bank-library header .help,#cloud-plugins-library header .help,#patchstorage-library header .help,#pedalboards-library header .help,#file-manager-library header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}header#pedalboard-actions .close,#bank-library header .close,#cloud-plugins-library header .close,#patchstorage-library header .close,#pedalboards-library header .close,#file-manager-library header .close{opacity:1;position:absolute;right:10px;top:16px}header#pedalboard-actions .drop-menu,#bank-library header .drop-menu,#cloud-plugins-library header .drop-menu,#patchstorage-library header .drop-menu,#pedalboards-library header .drop-menu,#file-manager-library header .drop-menu{position:absolute;display:none;list-style-type:none;padding:0;background-color:rgba(0,0,0,0.8);color:#999;width:150px}header#pedalboard-actions .drop-menu:hover,#bank-library header .drop-menu:hover,#cloud-plugins-library header .drop-menu:hover,#patchstorage-library header .drop-menu:hover,#pedalboards-library header .drop-menu:hover,#file-manager-library header .drop-menu:hover{display:block}header#pedalboard-actions .drop-menu li,#bank-library header .drop-menu li,#cloud-plugins-library header .drop-menu li,#patchstorage-library header .drop-menu li,#pedalboards-library header .drop-menu li,#file-manager-library header .drop-menu li{padding:5px 20px}header#pedalboard-actions .drop-menu li:hover,#bank-library header .drop-menu li:hover,#cloud-plugins-library header .drop-menu li:hover,#patchstorage-library header .drop-menu li:hover,#pedalboards-library header .drop-menu li:hover,#file-manager-library header .drop-menu li:hover{color:white;background-color:#883996}header#pedalboard-actions .drop-menu .sub-menu,#bank-library header .drop-menu .sub-menu,#cloud-plugins-library header .drop-menu .sub-menu,#patchstorage-library header .drop-menu .sub-menu,#pedalboards-library header .drop-menu .sub-menu,#file-manager-library header .drop-menu .sub-menu{display:none;list-style-type:none;padding:0;position:absolute;left:150px;height:14em;overflow-y:auto;overflow-x:hidden;margin-top:-50px;background-color:rgba(0,0,0,0.8);width:15em;border-left:3px solid #666}header#pedalboard-actions .drop-menu .sub-menu:hover,#bank-library header .drop-menu .sub-menu:hover,#cloud-plugins-library header .drop-menu .sub-menu:hover,#patchstorage-library header .drop-menu .sub-menu:hover,#pedalboards-library header .drop-menu .sub-menu:hover,#file-manager-library header .drop-menu .sub-menu:hover{display:block}header#pedalboard-actions .menu-trigger:hover+.drop-menu,#bank-library header .menu-trigger:hover+.drop-menu,#cloud-plugins-library header .menu-trigger:hover+.drop-menu,#patchstorage-library header .menu-trigger:hover+.drop-menu,#pedalboards-library header .menu-trigger:hover+.drop-menu,#file-manager-library header .menu-trigger:hover+.drop-menu{display:block}header#pedalboard-actions .sub-menu-trigger:hover ul,#bank-library header .sub-menu-trigger:hover ul,#cloud-plugins-library header .sub-menu-trigger:hover ul,#patchstorage-library header .sub-menu-trigger:hover ul,#pedalboards-library header .sub-menu-trigger:hover ul,#file-manager-library header .sub-menu-trigger:hover ul{display:block}header#pedalboard-actions button,#bank-library header button,#cloud-plugins-library header button,#patchstorage-library header button,#pedalboards-library header button,#file-manager-library header button{background-position:8px 50%;background-size:25px;background-repeat:no-repeat;padding:0 12px 0 40px;background-color:transparent;border:none;height:45px;line-height:45px;opacity:.66;color:white;transition:all .33s}header#pedalboard-actions button:hover,#bank-library header button:hover,#cloud-plugins-library header button:hover,#patchstorage-library header button:hover,#pedalboards-library header button:hover,#file-manager-library header button:hover,header#pedalboard-actions button.selected,#bank-library header button.selected,#cloud-plugins-library header button.selected,#patchstorage-library header button.selected,#pedalboards-library header button.selected,#file-manager-library header button.selected{opacity:1;background-color:black}header#pedalboard-actions button.js-save,#bank-library header button.js-save,#cloud-plugins-library header button.js-save,#patchstorage-library header button.js-save,#pedalboards-library header button.js-save,#file-manager-library header button.js-save{background-image:url(../img/icons/25/save.png)}header#pedalboard-actions button.js-save-as,#bank-library header button.js-save-as,#cloud-plugins-library header button.js-save-as,#patchstorage-library header button.js-save-as,#pedalboards-library header button.js-save-as,#file-manager-library header button.js-save-as{background-image:url(../img/icons/25/save.png)}header#pedalboard-actions button.js-preset,#bank-library header button.js-preset,#cloud-plugins-library header button.js-preset,#patchstorage-library header button.js-preset,#pedalboards-library header button.js-preset,#file-manager-library header button.js-preset{background-image:url(../img/icons/36/presets.png);background-size:30px 30px}header#pedalboard-actions button#js-preset-enabler:hover,#bank-library header button#js-preset-enabler:hover,#cloud-plugins-library header button#js-preset-enabler:hover,#patchstorage-library header button#js-preset-enabler:hover,#pedalboards-library header button#js-preset-enabler:hover,#file-manager-library header button#js-preset-enabler:hover,header#pedalboard-actions button#js-preset-enabler.selected,#bank-library header button#js-preset-enabler.selected,#cloud-plugins-library header button#js-preset-enabler.selected,#patchstorage-library header button#js-preset-enabler.selected,#pedalboards-library header button#js-preset-enabler.selected,#file-manager-library header button#js-preset-enabler.selected{background-color:#883996}header#pedalboard-actions button.js-reset,#bank-library header button.js-reset,#cloud-plugins-library header button.js-reset,#patchstorage-library header button.js-reset,#pedalboards-library header button.js-reset,#file-manager-library header button.js-reset{background-image:url(../img/icons/25/new.png)}header#pedalboard-actions button.js-reset:hover,#bank-library header button.js-reset:hover,#cloud-plugins-library header button.js-reset:hover,#patchstorage-library header button.js-reset:hover,#pedalboards-library header button.js-reset:hover,#file-manager-library header button.js-reset:hover,header#pedalboard-actions button.js-reset.selected,#bank-library header button.js-reset.selected,#cloud-plugins-library header button.js-reset.selected,#patchstorage-library header button.js-reset.selected,#pedalboards-library header button.js-reset.selected,#file-manager-library header button.js-reset.selected{background-color:#883996}header#pedalboard-actions button.js-cv-addressing,#bank-library header button.js-cv-addressing,#cloud-plugins-library header button.js-cv-addressing,#patchstorage-library header button.js-cv-addressing,#pedalboards-library header button.js-cv-addressing,#file-manager-library header button.js-cv-addressing{background-image:url(../img/icons/25/cv.png)}header#pedalboard-actions button.js-cv-addressing:hover,#bank-library header button.js-cv-addressing:hover,#cloud-plugins-library header button.js-cv-addressing:hover,#patchstorage-library header button.js-cv-addressing:hover,#pedalboards-library header button.js-cv-addressing:hover,#file-manager-library header button.js-cv-addressing:hover,header#pedalboard-actions button.js-cv-addressing.selected,#bank-library header button.js-cv-addressing.selected,#cloud-plugins-library header button.js-cv-addressing.selected,#patchstorage-library header button.js-cv-addressing.selected,#pedalboards-library header button.js-cv-addressing.selected,#file-manager-library header button.js-cv-addressing.selected{background-color:#883996}header#pedalboard-actions button.js-cloud,#bank-library header button.js-cloud,#cloud-plugins-library header button.js-cloud,#patchstorage-library header button.js-cloud,#pedalboards-library header button.js-cloud,#file-manager-library header button.js-cloud{background-image:url(../img/icn-share.png);background-size:32px;background-position:5px center}header#pedalboard-actions h1,#bank-library header h1,#cloud-plugins-library header h1,#patchstorage-library header h1,#pedalboards-library header h1,#file-manager-library header h1{font-weight:2em;text-transform:uppercase;font-weight:normal;color:#999;display:inline-block;font-size:24px;line-height:49px;height:45px;padding:0}header#pedalboard-actions{box-shadow:0 2px 12px black}.tooltip{background:white;bottom:50px;height:auto;padding:7px;position:absolute}.tooltip .text{color:#222222;font-weight:bold;line-height:1;text-align:center}.tooltip .arrow{border-bottom:9px solid transparent;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid white;height:0;position:absolute;bottom:-18px;right:14px;width:0}#mod-devices-window,#mod-upgrade{background:white;color:black;font-size:15px;max-height:350px;overflow:auto;position:absolute;right:10px;bottom:50px;z-index:100}#mod-devices-window .progressbar-wrapper,#mod-upgrade .progressbar-wrapper{border:1px solid #444444;height:20px;width:330px}#mod-devices-window .progressbar,#mod-upgrade .progressbar{background-color:#8888ff;height:18px}#mod-devices-window{max-width:600px;min-width:500px}#mod-upgrade{max-width:450px;min-width:350px}#mod-transport-window{bottom:48px;right:310px;top:initial;left:initial;background:rgba(17,17,17,0.9);padding:50px 40px 15px 40px;z-index:999}#mod-transport-window .mod-midi-icon{width:auto !important;padding-left:25px;background-position:5% 45% !important;background-image:url(../img/icons/25/midi.png);background-size:15px;background-repeat:no-repeat}#plugins-library{bottom:45px;height:166px;left:0;position:absolute;right:0;transition:all .33s;transition:opacity .5s;transition:height .5s}#plugins-library.folded{height:38px}#plugins-library.folded #plugins-library-settings-window{bottom:0}#plugins-library.fade{opacity:.2}#plugins-library .fold{cursor:pointer;display:block !important;float:right;height:36px;position:absolute;top:0;right:0;width:36px;background-color:rgba(17,17,17,0.66);background-image:url(../img/icons/25/pinned.png);background-position:center center;background-repeat:no-repeat}#plugins-library .folded{cursor:pointer;display:block;float:right;height:36px;position:absolute;top:0;right:0;width:36px}#plugins-library.auto .fold{background-image:url(../img/icons/25/autohide.png)}#plugins-library .settings{background-color:rgba(17,17,17,0.66);background-image:url(../img/icn-search-white.png);background-position:center center;background-repeat:no-repeat;cursor:pointer;display:block;height:36px;position:absolute;right:37px;top:0;width:36px}#plugins-library #plugins-library-settings-window{background-color:rgba(17,17,17,0.66);bottom:130px;color:#fff;position:absolute;right:74px;transition:bottom .5s}#plugins-library #plugins-library-settings-window h1{padding:0}#plugins-library #plugins-library-settings-window form{padding:4px;border:0;margin:0}#plugins-library #plugins-library-settings-window label{margin-right:10px}#plugins-library #plugins-library-settings-window label.checkbox:last-child{margin-right:0}#plugins-library #plugins-library-settings-window .control-group{position:relative}#plugins-library #plugins-library-settings-window input{width:120px;height:28px;line-height:28px;padding:0 6px;outline:0;border:0}#plugins-library #plugins-library-settings-window .input-clean{position:absolute;top:50%;right:8px;bottom:auto;left:auto;transform:translateY(-50%);margin:0 !important;border-radius:100%}#plugins-library ul{list-style:none;margin:6px 73px 0 0;overflow:hidden;padding:10px 0 0 0;position:relative;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}#plugins-library ul li{background:rgba(17,17,17,0.66);color:#bbb;cursor:pointer !important;display:inline-block;float:left;font-size:11px;margin:0 1px 0 0;padding:3px 11px;text-shadow:1px 1px 0 #000;text-transform:uppercase;border-top:solid 3px transparent;transition-property:border-radius,color,margin-top,padding,border-top;transition-duration:.33s}#plugins-library ul li:hover{margin-top:-6px;padding:6px 11px;color:white}#plugins-library ul li.selected{color:white;font-weight:bold;margin-top:-6px;padding:6px 11px;border-top:solid 3px #883996}#plugins-library.scrolling .plugins-wrapper{transition:all .1s !important}#plugins-library #plugins-list{background:rgba(17,17,17,0.66);height:140px;overflow:hidden;position:relative;width:100%;z-index:1}#plugins-library #plugins-list .nav{background:url(../img/nav-left.png) 50% 50% no-repeat;cursor:pointer;position:absolute;top:0;width:50px;height:100%;opacity:.66}#plugins-library #plugins-list .nav:hover{opacity:1}#plugins-library #plugins-list .nav-left{left:0}#plugins-library #plugins-list .nav-right{background:url(../img/nav-right.png) 50% 50% no-repeat;right:0}#plugins-library #plugins-list #plugins-results{bottom:0;left:50px;position:absolute;overflow:hidden;right:50px;top:0}#plugins-library #plugins-list .plugins-wrapper{position:absolute;display:inline-block;white-space:nowrap;transition:all .5s;top:120px;left:0;opacity:0}#plugins-library #plugins-list .plugins-wrapper.selected{top:0;opacity:1}#plugins-library #plugins-list .plugins-wrapper .plugin{color:#fff;font-size:11px;font-weight:bold;height:108px;padding:14px 12px 10px;position:relative;text-align:center;display:inline-block}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb{height:67px;cursor:pointer !important;position:relative;display:flex;flex-direction:column;justify-content:center}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}#plugins-library #plugins-list .plugins-wrapper .plugin .status{display:block;height:16px;margin:0 auto;width:16px}#plugins-library #plugins-list .plugins-wrapper .plugin .status.demo{display:inline-block;width:auto;height:auto;margin:0}#plugins-library #plugins-list .plugins-wrapper .plugin .status.installed{background-image:url(../img/icn-installed.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .status.outdated{background-image:url(../img/icn-outdated.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .status.blocked{background-image:url(../img/icn-blocked.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .author{display:block;line-height:1.5}#plugins-library #plugins-list .plugins-wrapper .plugin .title{display:block;line-height:1.25}#plugins-library #plugins-list .plugins-wrapper .plugin .rating{background-image:url(../img/icn-rating.png);background-position:center top;background-repeat:no-repeat;display:block;height:16px;width:132px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.one{background-position:center -15px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.two{background-position:center -30px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.three{background-position:center -45px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.four{background-position:center -60px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.five{background-position:center -75px}#plugins-library #plugins-list .plugins-wrapper .plugin .downloads{display:block}#plugins-library #plugins-list .plugins-wrapper .plugin .demo-container{position:absolute;left:0;bottom:3px;right:0;text-align:center}.plugin-info{background-color:rgba(20,20,20,0.9);bottom:0;color:#ccc;left:0;overflow-y:scroll;position:fixed;right:0;top:0;z-index:40}.plugin-info .box{margin-top:3em;margin-bottom:3em;background-color:#111;padding:15px;border:2px solid #333}.plugin-info .box .row-fluid{position:relative}.plugin-info .close{color:#fff;font-size:12px;font-weight:bold;opacity:1;position:absolute;right:10px;text-shadow:none;text-transform:uppercase;top:10px}.plugin-info .screenshot{padding:18px;min-width:3em;min-height:9em;display:inline-block;z-index:0}.plugin-info .screenshot div.beta{background-color:#FF2927;font-family:"cooper hewitt",sans-serif;font-weight:700;padding:5px 10px;color:white;position:absolute;top:18px;left:30px;font-size:16px}.plugin-info .screenshot img{max-width:100%}.plugin-info figure{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:992px){.plugin-info figure{float:left;width:33.33333333%}}.plugin-info figure:hover{z-index:10 !important}.plugin-info .plugin-description{position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:100%;display:block;position:a;padding-left:45px;background:-moz-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-webkit-gradient(linear, left top, right top, color-stop(1em, rgba(17,17,17,0.1)), color-stop(2em, #111));background:-webkit-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-o-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-ms-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:linear-gradient(to right, rgba(17,17,17,0.1) 1em, #111 2em);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1)}@media (min-width:992px){.plugin-info .plugin-description{float:left;width:58.33333333%}}.plugin-info .plugin-description>p{font-size:16px;margin-bottom:27px;white-space:pre-wrap}.plugin-info header{padding:18px 0 0}.plugin-info header h1{display:inline-block;vertical-align:middle;color:#fff;font-size:27px;font-weight:bold;line-height:1;margin:0;padding:0}.plugin-info header h1 span{font-size:16px;line-height:1;margin:0;padding:0}.plugin-info .version{color:#ccc;font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info .version span.bold{color:#fff;font-size:14px}.plugin-info .version button{font-weight:bold;margin-top:6px;text-transform:uppercase}.plugin-info .rating{background:url(../img/icn-rating.png) no-repeat -12px top;display:inline-block;height:14px;width:84px}.plugin-info .rating.one{background:url(../img/icn-rating.png) no-repeat -12px -15px}.plugin-info .rating.two{background:url(../img/icn-rating.png) no-repeat -12px -30px}.plugin-info .rating.three{background:url(../img/icn-rating.png) no-repeat -12px -45px}.plugin-info .rating.four{background:url(../img/icn-rating.png) no-repeat -12px -60px}.plugin-info .rating.five{background:url(../img/icn-rating.png) no-repeat -12px -75px}.plugin-info .rating-label{color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info .my-rate{width:15px;height:15px;margin:0;padding:0;float:left;cursor:pointer}.plugin-info .plugin-specs{text-align:center;width:100%;border-color:#333}.plugin-info .plugin-specs th{background:#333;color:#fff;border-color:#333;text-align:center}.plugin-info .plugin-specs td{border-color:#333}.plugin-info .plugin-specs td:first-child{width:40%}.plugin-info .plugin-specs td:not(first-child){width:20%}.plugin-info .comments-reviews{border-top:1px solid #333;margin-top:10px;padding-top:10px}.plugin-info .comments-reviews h1{color:#fff;font-size:21px;line-height:2;margin:0;padding:0}.plugin-info .reviews{border-bottom:1px solid #333;margin:9px 0 18px 0;padding:9px 0 18px 0}.plugin-info article.review{margin:18px 0}.plugin-info article.review h1{color:#fff;font-size:14px}.plugin-info article.review h1 .rating{margin-left:6px}.plugin-info article.review h1 .rating-label{color:#ccc;display:inline;font-size:12px;font-weight:normal;margin-left:6px}.plugin-info article.review .bar{background:#333;display:block;height:12px;margin:2px 6px 0;position:relative;width:100px}.plugin-info article.review .progress-bar{background:#444;bottom:0;display:block;height:10px;left:0;margin:1px;position:absolute;right:0;top:0;width:50%}.plugin-info article.review .rating-number{display:block;font-size:12px;margin-top:-1px}.plugin-info article.comment{border-top:1px solid #333;margin:18px 0 0;padding:18px 0 0}.plugin-info article.comment h1{color:#fff;font-size:16px;line-height:1}.plugin-info article.comment h1 .date{color:#ccc;font-size:12px;font-weight:normal;margin-left:6px}.plugin-info .comments{margin:18px 0;padding:18px 0}.plugin-info .comments button{margin-top:18px}.plugin-info form.comment-form{border-top:1px solid #333;margin:18px 0;padding:18px 0}.plugin-info form.comment-form label{font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info form.comment-form textarea{height:180px}.plugin-info .favorite-button{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(../img/icons/25/star-border.png) no-repeat center center;cursor:pointer;opacity:.5}.plugin-info .favorite-button:hover{opacity:.8}.plugin-info .favorite-button.favorite{opacity:1;background:url(../img/icons/25/star.png) no-repeat center center}.plugin-info .favorite-button.favorite:hover{opacity:1}.plugin-info .online-button-href{display:inline-block;margin-bottom:10px}.plugin-info .status.demo{display:inline-block;padding:4px 8px;margin:2px 0;font-size:.8em}.clearfix:after,.container:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.clearfix,.container,.dl-horizontal dd,.container,.container-fluid,.row,.form-horizontal .form-group,.btn-toolbar,.btn-group-vertical>.btn-group,.nav,.navbar,.navbar-header,.navbar-collapse,.pager,.panel-body{display:block}.clear{clear:both}.blend{opacity:.25}.box{padding:10px}.alignleft{float:left}.alignright{float:right}.textcenter{text-align:center}.textright{text-align:right}.bottom{margin-bottom:0 !important;padding-bottom:0 !important}.left{margin-left:0 !important;padding-left:0 !important}.right{margin-right:0 !important;padding-right:0 !important}.top{margin-top:0 !important;padding-top:0 !important}.nobullets{list-style:none}.mod-hidden{display:none}.mod-init-hidden{opacity:0}::selection{background:transparent}.mod-box{background:white;left:50%;margin:-150px -168px;padding:18px;position:absolute;top:50%;width:300px}.mod-box:not(#midi-ports-box) label{display:inline-block;float:left;line-height:2;width:96px}.mod-box .mod-controls{float:left}.mod-box input[type="text"]{width:190px}.mod-box input[type="password"]{width:190px}.blocker{background:rgba(17,17,17,0.9);color:white;display:block;position:fixed;width:100% !important;height:100% !important;top:0;left:0;text-align:center;z-index:99999}.blocker p{position:absolute;top:50%;width:100%;margin-top:56px;font-size:24px}.blocker.screen-disconnected{background:rgba(17,17,17,0.9) url(../img/icons/blocked.svg) 50% 50% no-repeat;background-size:100px 100px}.blocker.screen-disconnected .button{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:120px}.plugin-wait{background:url(../img/loading-effect.gif) no-repeat center center;border:1px solid #CCCCCC}.button{background:#883996;color:white;display:inline-block;cursor:pointer;line-height:25px;padding:5px 15px;transition:all .33s;border:none}.button:hover{background-color:#F29446;box-shadow:0 1px 5px black}.button.icon{padding-left:40px;background-position:10px 50%;background-repeat:no-repeat;background-size:25px}.drag-handle{bottom:0;cursor:-webkit-grabbing !important;cursor:grabbing !important;left:0;position:absolute;right:0;top:0;z-index:20}.demo-plugin{background:url("/img/trial.svg") no-repeat center center;background-size:contain;opacity:.4;z-index:11 !important}.demo-mask{width:100%;height:100%;left:0;right:0;top:0;bottom:0;position:absolute}.demo-plugin-light{opacity:.1 !important}.actions{z-index:20}@keyframes flashlight{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 10px white}100%{box-shadow:0 0 0 transparent}}.alert{background:rgba(17,17,17,0.9);border-width:0 0 0 6px;border-color:#883996;color:white;box-shadow:0 3px 10px black;margin-top:5px !important}.alert .js-close{color:white}.alert-warning{border-color:#F29446}.alert-danger{border-color:#c00}#go-back{width:200px;text-align:left;margin:20px 0 0 0;background:none;border:none;font-size:15px;padding:5px;color:#fff !important}#go-back span{font-family:fontello !important}#go-back span:before{content:'\e804'}#go-back:hover{text-decoration:none}.unstable-warning{float:left;background-color:#ffebb1;padding:5px;border-radius:10px}.blokas header#pedalboard-actions,.blokas #bank-library header,.blokas #cloud-plugins-library header,.blokas #patchstorage-library header,.blokas #pedalboards-library header,.blokas #file-manager-library header{background-image:none !important;padding-left:10px !important}.blokas #pedalboard-info{left:10px !important}.blokas path.loadinglogo{display:none !important}.blokas #pedalboards-library .pedalboards,.blokas #bank-library #bank-edit,.blokas #file-manager-library,.blokas #patchstorage-library .patchstorage-plugins,.blokas #cloud-plugins-library .cloud-plugins{background-image:none !important}.blokas #blokas-update{background-image:url(../img/icons/36/update.png)}.blokas #blokas-update.uptodate{background-image:url(../img/icons/36/ok.png)}
\ No newline at end of file
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,*:before,*:after{color:#000 !important;text-shadow:none !important;background:transparent !important;box-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.table{border-collapse:collapse !important}.table td,.table th{background-color:#fff !important}.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#883996;text-decoration:none}a:hover,a:focus{color:#56245f;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive,.thumbnail>img,.thumbnail a>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:0}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:0;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:400;line-height:1;color:#999}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}small,.small{font-size:85%}mark,.mark{padding:.2em;background-color:#F29446}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#999}.text-primary{color:#883996}a.text-primary:hover,a.text-primary:focus{color:#662b71}.text-success{color:#3c763d}a.text-success:hover,a.text-success:focus{color:#2b542c}.text-info{color:#3A633D}a.text-info:hover,a.text-info:focus{color:#274329}.text-warning{color:#fff}a.text-warning:hover,a.text-warning:focus{color:#e6e6e6}.text-danger{color:#a94442}a.text-danger:hover,a.text-danger:focus{color:#843534}.bg-primary{color:#fff;background-color:#883996}a.bg-primary:hover,a.bg-primary:focus{background-color:#662b71}.bg-success{background-color:#dff0d8}a.bg-success:hover,a.bg-success:focus{background-color:#c1e2b3}.bg-info{background-color:#A6ECB1}a.bg-info:hover,a.bg-info:focus{background-color:#7ce38c}.bg-warning{background-color:#F29446}a.bg-warning:hover,a.bg-warning:focus{background-color:#ef7816}.bg-danger{background-color:#f2dede}a.bg-danger:hover,a.bg-danger:focus{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ul,ol{margin-top:0;margin-bottom:10px}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none;margin-left:-5px}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dt,dd{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[title],abbr[data-original-title]{cursor:help}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote p:last-child,blockquote ul:last-child,blockquote ol:last-child{margin-bottom:0}blockquote footer,blockquote small,blockquote .small{display:block;font-size:80%;line-height:1.42857143;color:#999}blockquote footer:before,blockquote small:before,blockquote .small:before{content:"\2014 \00A0"}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse footer:before,blockquote.pull-right footer:before,.blockquote-reverse small:before,blockquote.pull-right small:before,.blockquote-reverse .small:before,blockquote.pull-right .small:before{content:""}.blockquote-reverse footer:after,blockquote.pull-right footer:after,.blockquote-reverse small:after,blockquote.pull-right small:after,.blockquote-reverse .small:after,blockquote.pull-right .small:after{content:"\00A0 \2014"}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:0}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:0}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:100%}}@media (min-width:992px){.container{width:970px}}@media (min-width:1240px){.container{width:1270px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row-no-gutters{margin-right:0;margin-left:0}.row-no-gutters [class*="col-"]{padding-right:0;padding-left:0}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1240px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}table col[class*="col-"]{position:static;display:table-column;float:none}table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none}caption{padding-top:8px;padding-bottom:8px;color:#999;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#A6ECB1}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th{background-color:#91e89f}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#F29446}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr.warning:hover>th{background-color:#f0862e}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type="search"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;appearance:none}input[type="radio"],input[type="checkbox"]{margin:4px 0 0;margin-top:1px \9;line-height:normal}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"].disabled,input[type="checkbox"].disabled,fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"]{cursor:not-allowed}input[type="file"]{display:block}input[type="range"]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}@media screen and (-webkit-min-device-pixel-ratio:0){input[type="date"].form-control,input[type="time"].form-control,input[type="datetime-local"].form-control,input[type="month"].form-control{line-height:34px}input[type="date"].input-sm,input[type="time"].input-sm,input[type="datetime-local"].input-sm,input[type="month"].input-sm,.input-group-sm input[type="date"],.input-group-sm input[type="time"],.input-group-sm input[type="datetime-local"],.input-group-sm input[type="month"]{line-height:30px}input[type="date"].input-lg,input[type="time"].input-lg,input[type="datetime-local"].input-lg,input[type="month"].input-lg,.input-group-lg input[type="date"],.input-group-lg input[type="time"],.input-group-lg input[type="datetime-local"],.input-group-lg input[type="month"]{line-height:46px}}.form-group{margin-bottom:15px}.radio,.checkbox{position:relative;display:block;margin-top:10px;margin-bottom:10px}.radio.disabled label,.checkbox.disabled label,fieldset[disabled] .radio label,fieldset[disabled] .checkbox label{cursor:not-allowed}.radio label,.checkbox label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"]{position:absolute;margin-top:4px \9;margin-left:-20px}.radio+.radio,.checkbox+.checkbox{margin-top:-5px}.radio-inline,.checkbox-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.radio-inline.disabled,.checkbox-inline.disabled,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox-inline{cursor:not-allowed}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{margin-top:0;margin-left:10px}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}select.input-sm{height:30px;line-height:30px}textarea.input-sm,select[multiple].input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm textarea.form-control,.form-group-sm select[multiple].form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}select.input-lg{height:46px;line-height:46px}textarea.input-lg,select[multiple].input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg textarea.form-control,.form-group-lg select[multiple].form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.33}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.input-lg+.form-control-feedback,.input-group-lg+.form-control-feedback,.form-group-lg .form-control+.form-control-feedback{width:46px;height:46px;line-height:46px}.input-sm+.form-control-feedback,.input-group-sm+.form-control-feedback,.form-group-sm .form-control+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .help-block,.has-success .control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .help-block,.has-warning .control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label{color:#fff}.has-warning .form-control{border-color:#fff;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .form-control:focus{border-color:#e6e6e6;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #fff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #fff}.has-warning .input-group-addon{color:#fff;background-color:#F29446;border-color:#fff}.has-warning .form-control-feedback{color:#fff}.has-error .help-block,.has-error .control-label,.has-error .radio,.has-error .checkbox,.has-error .radio-inline,.has-error .checkbox-inline,.has-error.radio label,.has-error.checkbox label,.has-error.radio-inline label,.has-error.checkbox-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn,.form-inline .input-group .form-control{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .radio label,.form-inline .checkbox label{padding-left:0}.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .radio,.form-horizontal .checkbox{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;white-space:nowrap;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:hover,.btn:focus,.btn.focus{color:#333;text-decoration:none}.btn:active,.btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65;-webkit-box-shadow:none;box-shadow:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default:focus,.btn-default.focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default:active,.btn-default.active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;background-image:none;border-color:#adadad}.btn-default:active:hover,.btn-default.active:hover,.open>.dropdown-toggle.btn-default:hover,.btn-default:active:focus,.btn-default.active:focus,.open>.dropdown-toggle.btn-default:focus,.btn-default:active.focus,.btn-default.active.focus,.open>.dropdown-toggle.btn-default.focus{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.disabled:hover,.btn-default[disabled]:hover,fieldset[disabled] .btn-default:hover,.btn-default.disabled:focus,.btn-default[disabled]:focus,fieldset[disabled] .btn-default:focus,.btn-default.disabled.focus,.btn-default[disabled].focus,fieldset[disabled] .btn-default.focus{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#883996;border-color:#773284}.btn-primary:focus,.btn-primary.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-primary:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-primary:active,.btn-primary.active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-primary:active:hover,.btn-primary.active:hover,.open>.dropdown-toggle.btn-primary:hover,.btn-primary:active:focus,.btn-primary.active:focus,.open>.dropdown-toggle.btn-primary:focus,.btn-primary:active.focus,.btn-primary.active.focus,.open>.dropdown-toggle.btn-primary.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled.focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary.focus{background-color:#883996;border-color:#773284}.btn-primary .badge{color:#883996;background-color:#fff}.btn-success{color:#fff;background-color:#883996;border-color:#773284}.btn-success:focus,.btn-success.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-success:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-success:active,.btn-success.active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-success:active:hover,.btn-success.active:hover,.open>.dropdown-toggle.btn-success:hover,.btn-success:active:focus,.btn-success.active:focus,.open>.dropdown-toggle.btn-success:focus,.btn-success:active.focus,.btn-success.active.focus,.open>.dropdown-toggle.btn-success.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled.focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success.focus{background-color:#883996;border-color:#773284}.btn-success .badge{color:#883996;background-color:#fff}.btn-info{color:#fff;background-color:#883996;border-color:#773284}.btn-info:focus,.btn-info.focus{color:#fff;background-color:#662b71;border-color:#230f27}.btn-info:hover{color:#fff;background-color:#662b71;border-color:#4f2157}.btn-info:active,.btn-info.active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#662b71;background-image:none;border-color:#4f2157}.btn-info:active:hover,.btn-info.active:hover,.open>.dropdown-toggle.btn-info:hover,.btn-info:active:focus,.btn-info.active:focus,.open>.dropdown-toggle.btn-info:focus,.btn-info:active.focus,.btn-info.active.focus,.open>.dropdown-toggle.btn-info.focus{color:#fff;background-color:#4f2157;border-color:#230f27}.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled.focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info.focus{background-color:#883996;border-color:#773284}.btn-info .badge{color:#883996;background-color:#fff}.btn-warning{color:#fff;background-color:#F29446;border-color:#f0862e}.btn-warning:focus,.btn-warning.focus{color:#fff;background-color:#ef7816;border-color:#95490a}.btn-warning:hover{color:#fff;background-color:#ef7816;border-color:#d3680f}.btn-warning:active,.btn-warning.active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ef7816;background-image:none;border-color:#d3680f}.btn-warning:active:hover,.btn-warning.active:hover,.open>.dropdown-toggle.btn-warning:hover,.btn-warning:active:focus,.btn-warning.active:focus,.open>.dropdown-toggle.btn-warning:focus,.btn-warning:active.focus,.btn-warning.active.focus,.open>.dropdown-toggle.btn-warning.focus{color:#fff;background-color:#d3680f;border-color:#95490a}.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled.focus,.btn-warning[disabled].focus,fieldset[disabled] .btn-warning.focus{background-color:#F29446;border-color:#f0862e}.btn-warning .badge{color:#F29446;background-color:#fff}.btn-danger{color:#fff;background-color:#D91E36;border-color:#c31b30}.btn-danger:focus,.btn-danger.focus{color:#fff;background-color:#ac182b;border-color:#530b15}.btn-danger:hover{color:#fff;background-color:#ac182b;border-color:#8d1323}.btn-danger:active,.btn-danger.active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#ac182b;background-image:none;border-color:#8d1323}.btn-danger:active:hover,.btn-danger.active:hover,.open>.dropdown-toggle.btn-danger:hover,.btn-danger:active:focus,.btn-danger.active:focus,.open>.dropdown-toggle.btn-danger:focus,.btn-danger:active.focus,.btn-danger.active.focus,.open>.dropdown-toggle.btn-danger.focus{color:#fff;background-color:#8d1323;border-color:#530b15}.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled.focus,.btn-danger[disabled].focus,fieldset[disabled] .btn-danger.focus{background-color:#D91E36;border-color:#c31b30}.btn-danger .badge{color:#D91E36;background-color:#fff}.btn-link{font-weight:400;color:#883996;border-radius:0}.btn-link,.btn-link:active,.btn-link.active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent}.btn-link:hover,.btn-link:focus{color:#56245f;text-decoration:underline;background-color:transparent}.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus{color:#999;text-decoration:none}.btn-lg,.btn-group-lg>.btn{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}.btn-sm,.btn-group-sm>.btn{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}.btn-xs,.btn-group-xs>.btn{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:0}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height, visibility;transition-property:height, visibility;-webkit-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;transition-timing-function:ease}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid \9;border-right:4px solid transparent;border-left:4px solid transparent}.dropup,.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:0;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#883996;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#999}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#999;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid \9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;float:left}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover,.btn-group>.btn:focus,.btn-group-vertical>.btn:focus,.btn-group>.btn:active,.btn-group-vertical>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn.active{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle="buttons"]>.btn input[type="radio"],[data-toggle="buttons"]>.btn-group>.btn input[type="radio"],[data-toggle="buttons"]>.btn input[type="checkbox"],[data-toggle="buttons"]>.btn-group>.btn input[type="checkbox"]{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*="col-"]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:0}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn,select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:0}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn,select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn{height:auto}.input-group-addon,.input-group-btn,.input-group .form-control{display:table-cell}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:0}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:0}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:0}.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:hover,.input-group-btn>.btn:focus,.input-group-btn>.btn:active{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#999}.nav>li.disabled>a:hover,.nav>li.disabled>a:focus{color:#999;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:hover,.nav .open>a:focus{background-color:#eee;border-color:#883996}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:0 0 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:0 0 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:hover,.nav-tabs.nav-justified>.active>a:focus{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:0}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#883996}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:0 0 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:hover,.nav-tabs-justified>.active>a:focus{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:0}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none}.navbar-collapse.collapse{display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-top,.navbar-fixed-bottom{position:fixed;right:0;left:0;z-index:1030}.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:200px}}@media (min-width:768px){.navbar-fixed-top,.navbar-fixed-bottom{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container>.navbar-header,.container-fluid>.navbar-header,.container>.navbar-collapse,.container-fluid>.navbar-collapse{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-right:15px;margin-top:8px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:0}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;box-shadow:none}.navbar-nav .open .dropdown-menu>li>a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:hover,.navbar-nav .open .dropdown-menu>li>a:focus{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-right:-15px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);margin-top:8px;margin-bottom:8px}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn,.navbar-form .input-group .form-control{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .radio,.navbar-form .checkbox{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .radio label,.navbar-form .checkbox label{padding-left:0}.navbar-form .radio input[type="radio"],.navbar-form .checkbox input[type="checkbox"]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left !important}.navbar-right{float:right !important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:hover,.navbar-default .navbar-nav>.disabled>a:focus{color:#ccc;background-color:transparent}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#ccc;background-color:transparent}}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:hover,.navbar-default .btn-link:focus{color:#333}.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:hover,.navbar-default .btn-link[disabled]:focus,fieldset[disabled] .navbar-default .btn-link:focus{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#999}.navbar-inverse .navbar-brand:hover,.navbar-inverse .navbar-brand:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#999}.navbar-inverse .navbar-nav>li>a{color:#999}.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:hover,.navbar-inverse .navbar-nav>.disabled>a:focus{color:#444;background-color:transparent}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#999}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#444;background-color:transparent}}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-link{color:#999}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#999}.navbar-inverse .btn-link:hover,.navbar-inverse .btn-link:focus{color:#fff}.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:hover,.navbar-inverse .btn-link[disabled]:focus,fieldset[disabled] .navbar-inverse .btn-link:focus{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:0}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#999}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:0}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#883996;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{z-index:2;color:#56245f;background-color:#eee;border-color:#ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:3;color:#fff;cursor:default;background-color:#883996;border-color:#883996}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#999;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.33}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:0;border-bottom-right-radius:0}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#999;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#999}.label-default[href]:hover,.label-default[href]:focus{background-color:#808080}.label-primary{background-color:#883996}.label-primary[href]:hover,.label-primary[href]:focus{background-color:#662b71}.label-success{background-color:#883996}.label-success[href]:hover,.label-success[href]:focus{background-color:#662b71}.label-info{background-color:#883996}.label-info[href]:hover,.label-info[href]:focus{background-color:#662b71}.label-warning{background-color:#F29446}.label-warning[href]:hover,.label-warning[href]:focus{background-color:#ef7816}.label-danger{background-color:#D91E36}.label-danger[href]:hover,.label-danger[href]:focus{background-color:#ac182b}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:bold;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#999;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-xs .badge,.btn-group-xs>.btn .badge{top:0;padding:1px 5px}a.badge:hover,a.badge:focus{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#883996;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron h1,.jumbotron .h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:0}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1,.jumbotron .h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:0;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail>img,.thumbnail a>img{margin-right:auto;margin-left:auto}a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active{border-color:#883996}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:0}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:bold}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#3A633D;background-color:#A6ECB1;border-color:#89e689}.alert-info hr{border-top-color:#75e174}.alert-info .alert-link{color:#274329}.alert-warning{color:#fff;background-color:#F29446;border-color:#f0662e}.alert-warning hr{border-top-color:#ef5416}.alert-warning .alert-link{color:#e6e6e6}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#883996;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-striped .progress-bar,.progress-bar-striped{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-size:40px 40px}.progress.active .progress-bar,.progress-bar.active{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#883996}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-info{background-color:#883996}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-warning{background-color:#F29446}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.progress-bar-danger{background-color:#D91E36}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-left,.media-right,.media-body{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.list-group-item.disabled,.list-group-item.disabled:hover,.list-group-item.disabled:focus{color:#999;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text{color:#999}.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{z-index:2;color:#fff;background-color:#883996;border-color:#883996}.list-group-item.active .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>.small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:hover .list-group-item-text,.list-group-item.active:focus .list-group-item-text{color:#ddb7e4}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:hover,button.list-group-item:hover,a.list-group-item:focus,button.list-group-item:focus{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:hover,button.list-group-item-success:hover,a.list-group-item-success:focus,button.list-group-item-success:focus{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,button.list-group-item-success.active,a.list-group-item-success.active:hover,button.list-group-item-success.active:hover,a.list-group-item-success.active:focus,button.list-group-item-success.active:focus{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#3A633D;background-color:#A6ECB1}a.list-group-item-info,button.list-group-item-info{color:#3A633D}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:hover,button.list-group-item-info:hover,a.list-group-item-info:focus,button.list-group-item-info:focus{color:#3A633D;background-color:#91e89f}a.list-group-item-info.active,button.list-group-item-info.active,a.list-group-item-info.active:hover,button.list-group-item-info.active:hover,a.list-group-item-info.active:focus,button.list-group-item-info.active:focus{color:#fff;background-color:#3A633D;border-color:#3A633D}.list-group-item-warning{color:#fff;background-color:#F29446}a.list-group-item-warning,button.list-group-item-warning{color:#fff}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:hover,button.list-group-item-warning:hover,a.list-group-item-warning:focus,button.list-group-item-warning:focus{color:#fff;background-color:#f0862e}a.list-group-item-warning.active,button.list-group-item-warning.active,a.list-group-item-warning.active:hover,button.list-group-item-warning.active:hover,a.list-group-item-warning.active:focus,button.list-group-item-warning.active:focus{color:#fff;background-color:#fff;border-color:#fff}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:hover,button.list-group-item-danger:hover,a.list-group-item-danger:focus,button.list-group-item-danger:focus{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,button.list-group-item-danger.active,a.list-group-item-danger.active:hover,button.list-group-item-danger.active:hover,a.list-group-item-danger.active:focus,button.list-group-item-danger.active:focus{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:-1px;border-top-right-radius:-1px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>a,.panel-title>small,.panel-title>.small,.panel-title>small>a,.panel-title>.small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.table,.panel>.table-responsive>.table,.panel>.panel-collapse>.table{margin-bottom:0}.panel>.table caption,.panel>.table-responsive>.table caption,.panel>.panel-collapse>.table caption{padding-right:15px;padding-left:15px}.panel>.table:first-child,.panel>.table-responsive:first-child>.table:first-child{border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child{border-top-left-radius:-1px;border-top-right-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child{border-top-left-radius:-1px}.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child{border-top-right-radius:-1px}.panel>.table:last-child,.panel>.table-responsive:last-child>.table:last-child{border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:-1px;border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:-1px}.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:-1px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child th,.panel>.table>tbody:first-child>tr:first-child td{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:0}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.panel-body,.panel-group .panel-heading+.panel-collapse>.list-group{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#444}.panel-default>.panel-heading{color:#999;background-color:#444;border-color:#444}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#444}.panel-default>.panel-heading .badge{color:#444;background-color:#999}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#444}.panel-primary{border-color:#883996}.panel-primary>.panel-heading{color:#fff;background-color:#883996;border-color:#883996}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#883996}.panel-primary>.panel-heading .badge{color:#883996;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#883996}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#89e689}.panel-info>.panel-heading{color:#3A633D;background-color:#A6ECB1;border-color:#89e689}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#89e689}.panel-info>.panel-heading .badge{color:#A6ECB1;background-color:#3A633D}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#89e689}.panel-warning{border-color:#f0662e}.panel-warning>.panel-heading{color:#fff;background-color:#F29446;border-color:#f0662e}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#f0662e}.panel-warning>.panel-heading .badge{color:#F29446;background-color:#fff}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#f0662e}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-lg{padding:24px;border-radius:0}.well-sm{padding:9px;border-radius:0}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none}.tooltip{position:absolute;z-index:1030;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;filter:alpha(opacity=0);opacity:0}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:0}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.clearfix,.dl-horizontal dd,.container,.container-fluid,.row,.form-horizontal .form-group,.btn-toolbar,.btn-group-vertical>.btn-group,.nav,.navbar,.navbar-header,.navbar-collapse,.pager,.panel-body{display:block}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after{display:table;content:" "}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block{display:none !important}@media (max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media (max-width:767px){.visible-xs-block{display:block !important}}@media (max-width:767px){.visible-xs-inline{display:inline !important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline !important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block !important}}@media (min-width:992px) and (max-width:1239px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-block{display:block !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-inline{display:inline !important}}@media (min-width:992px) and (max-width:1239px){.visible-md-inline-block{display:inline-block !important}}@media (min-width:1240px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}@media (min-width:1240px){.visible-lg-block{display:block !important}}@media (min-width:1240px){.visible-lg-inline{display:inline !important}}@media (min-width:1240px){.visible-lg-inline-block{display:inline-block !important}}@media (max-width:767px){.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1239px){.hidden-md{display:none !important}}@media (min-width:1240px){.hidden-lg{display:none !important}}.visible-print{display:none !important}@media print{.visible-print{display:block !important}table.visible-print{display:table !important}tr.visible-print{display:table-row !important}th.visible-print,td.visible-print{display:table-cell !important}}.visible-print-block{display:none !important}@media print{.visible-print-block{display:block !important}}.visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}}.visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}}@media print{.hidden-print{display:none !important}}#cloud-plugins-library{background:#2c2c2c;bottom:45px;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2}#cloud-plugins-library h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#cloud-plugins-library header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}#cloud-plugins-library header .close{opacity:1;position:absolute;right:10px;top:16px}#cloud-plugins-library .filter{bottom:45px;left:0;position:fixed;top:45px;right:0;width:240px;overflow:auto}#cloud-plugins-library .filter h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#cloud-plugins-library .filter h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#cloud-plugins-library .filter .control-group .switch{margin:5px 0 5px 15px;position:relative;width:18rem;height:2.5rem;font-size:0}#cloud-plugins-library .filter .control-group .switch input{position:absolute;top:0;z-index:2;opacity:0;cursor:pointer;height:2.5rem;width:5rem;left:5.5rem;margin:0}#cloud-plugins-library .filter .control-group .switch input:checked{z-index:1}#cloud-plugins-library .filter .control-group .switch input:checked+label{opacity:1;cursor:default}#cloud-plugins-library .filter .control-group .switch input:checked~.toggle-outside .toggle-inside{left:.25rem;background:#883996}#cloud-plugins-library .filter .control-group .switch input:not(:checked)+label:hover{opacity:.5}#cloud-plugins-library .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside{left:2.65rem;background:#4a4a4a}#cloud-plugins-library .filter .control-group .switch label{color:#fff;opacity:.33;transition:opacity .25s ease;cursor:pointer;font-size:14px;line-height:3rem;display:inline-block;width:5rem;height:100%;margin:0;text-align:center}#cloud-plugins-library .filter .control-group .switch label:first-of-type{text-align:left}#cloud-plugins-library .filter .control-group .switch label:last-of-type{margin-left:5.5rem}#cloud-plugins-library .filter .control-group .switch .toggle-outside{height:100%;border-radius:2rem;padding:.25rem;overflow:hidden;transition:.25s ease all;background:#fff;opacity:.8;position:absolute;width:5rem;left:5.5rem}#cloud-plugins-library .filter .control-group .switch .toggle-inside{border-radius:5rem;background:#4a4a4a;position:absolute;transition:.25s ease all;height:2rem;width:2rem}#cloud-plugins-library .filter .control-group select{width:50px}#cloud-plugins-library .filter .control-group input[type='checkbox']{display:none}#cloud-plugins-library .filter .control-group input[type='checkbox']+label{cursor:pointer;background:#222;color:#fff;display:block;height:32px;line-height:32px;width:100%;margin-bottom:1px;padding-left:15px;border:0 solid #F29446}#cloud-plugins-library .filter .control-group input[type='checkbox']+label:hover{background:#000}#cloud-plugins-library .filter .control-group input[type='checkbox']:checked+label{background:#F29446}#cloud-plugins-library .filter .control-group input[type='checkbox']:checked+label:hover{background:#600E6F}#cloud-plugins-library .filter>.form-group .input-clean{margin-right:8px !important}#cloud-plugins-library .filter .categories{width:100%;margin:0 0 15px 0}#cloud-plugins-library .filter .categories li{display:block;background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding:0 15px;position:relative;transition:all .33s;line-height:32px;height:32px}#cloud-plugins-library .filter .categories li span{float:right}#cloud-plugins-library .filter .categories li.selected{background:#883996;color:#fff}#cloud-plugins-library .filter .categories li:hover{background:#000}#cloud-plugins-library .filter .categories li.selected:hover{background:#600E6F}.cloud-plugins{left:240px;position:fixed;right:0;top:45px;bottom:45px;background:#111 url(../img/watermark.png) 100% 100% no-repeat;overflow-y:auto}.cloud-plugins .plugins-wrapper{width:100%}.cloud-plugins .cloud-plugin{color:#fff;float:left;width:100%;position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:120px;border:5px solid #000;padding:0 !important;background:rgba(255,255,255,0.07);transition:all .33s;cursor:pointer}@media (min-width:768px){.cloud-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:992px){.cloud-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:1240px){.cloud-plugins .cloud-plugin{float:left;width:33.33333333%}}.cloud-plugins .cloud-plugin:hover{background-color:black}.cloud-plugins .cloud-plugin:hover .description{background:rgba(0,0,0,0.8)}.cloud-plugins .cloud-plugin:hover .description hr{border-color:#F29446}.cloud-plugins .cloud-plugin:hover figure{top:-5px}.cloud-plugins .cloud-plugin:hover div.demo-plugin{opacity:0}.cloud-plugins .cloud-plugin:hover span.price{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:80px}.cloud-plugins .cloud-plugin:hover span.licensed{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:113px;text-align:center}.cloud-plugins .cloud-plugin:hover span.coming-soon{position:absolute;top:25px;margin-left:98px;padding:3px 0;transform:rotate(0deg) scale(1.3);width:113px;text-align:center}.cloud-plugins .cloud-plugin:hover span.price-container{margin-left:170px;width:200px}.cloud-plugins .cloud-plugin figure{height:100px;position:absolute;top:10px;left:20px;margin:0;transition:all .33s linear;display:flex;flex-direction:column;justify-content:center}.cloud-plugins .cloud-plugin figure img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}.cloud-plugins .cloud-plugin span.price{transition:all .33s linear}.cloud-plugins .cloud-plugin span.price-container{transition:all .33s linear}.cloud-plugins .cloud-plugin .cloud-plugin-border{border:1px solid #333;width:100%;height:100%}.cloud-plugins .cloud-plugin .description{transition:all .33s;display:block;line-height:1.5;overflow:hidden;position:absolute;top:1px;right:1px;bottom:1px;left:80px;background:rgba(33,33,33,0.66)}.cloud-plugins .cloud-plugin .description .no_description{color:rgba(255,255,255,0.25)}.cloud-plugins .cloud-plugin .description hr{transition:all .33s;border:none;border-bottom:1px solid #883996;margin:0;position:absolute;top:50%;left:0;width:calc(100% - 5px)}.cloud-plugins .cloud-plugin .description .title{display:block;text-transform:uppercase;font-weight:bold;overflow:hidden;padding:8px 10px 1px 10px}.cloud-plugins .cloud-plugin .description .author{display:block;padding:1px 10px}.cloud-plugins .cloud-plugin .description p{position:absolute;left:10px;right:10px;top:75%;transform:translateY(-50%);height:2.4em;line-height:1.25em;overflow:hidden}.cloud-plugins .cloud-plugin .actions{font-size:11px;font-weight:bold;text-transform:uppercase}.cloud-plugins .cloud-plugin .actions>span{cursor:pointer}.cloud-plugins .cloud-plugin .actions>span:hover{text-decoration:underline}.cloud-plugins .cloud-plugin .actions span.duplicate{margin:0 6px}.cloud-plugins h2{margin-left:23px;font-size:20px;color:#cccccc}.cloud-plugins h3{color:#cccccc}.cloud-plugins .featured-plugins{position:relative;height:360px;width:100%;display:block}.cloud-plugins .featured-plugins.double,.cloud-plugins .featured-plugins.single{height:490px !important}.cloud-plugins .featured-plugins.double .box,.cloud-plugins .featured-plugins.single .box{transition:all 0s !important}.cloud-plugins .featured-plugins.double .carousel,.cloud-plugins .featured-plugins.single .carousel{height:485px !important}.cloud-plugins .featured-plugins.double .carousel .slick-list,.cloud-plugins .featured-plugins.single .carousel .slick-list{height:485px !important}.cloud-plugins .featured-plugins.double .box{margin:30px 80px !important}.cloud-plugins .featured-plugins.single .box{margin:30px 30px !important}.cloud-plugins .featured-plugins .carousel{position:absolute;top:0;bottom:0;right:90px;left:90px;height:380px !important}.cloud-plugins .featured-plugins .carousel .slick-list{height:380px !important}.cloud-plugins .featured-plugins .carousel .featured{cursor:pointer;margin-top:40px}.cloud-plugins .featured-plugins .carousel .featured .box{padding:4px;border:1px solid #737373;height:300px;opacity:.4;margin:0 24px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box{border:1px solid #444444;text-align:center;height:290px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price-container{position:absolute;top:0;left:0;width:90px;height:90px;overflow:hidden;color:#ffffff}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price{background-color:#883996;border:1px solid #883996;position:absolute;top:9px;left:-30px;padding:3px 0;transform:rotate(-45deg);min-width:108px;text-align:center}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .price:before{content:"€ "}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .licensed{background-color:#883996;border:1px solid #883996;position:absolute;top:16px;left:-30px;padding:3px 27px;font-size:12px;transform:rotate(-45deg)}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .licensed:before{content:"PURCHASED"}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box h2{color:#c3c3c3;text-align:center}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .img-container{height:113px;width:100%}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box .img-container img{vertical-align:middle;transition:all 500ms ease;width:auto;height:auto;margin:auto;display:block;max-height:113px;padding:0 20px;max-width:100%}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box p{color:#e0e0e0;padding:5px 5px 0 5px;height:59px}.cloud-plugins .featured-plugins .carousel .featured .box .inner-box button{background-color:transparent;color:#ff3838;border:1px solid #ff3838;text-transform:uppercase;padding:8px 20px}.cloud-plugins .featured-plugins .carousel .featured.slick-center{height:390px}.cloud-plugins .featured-plugins .carousel .featured.slick-center .box{opacity:1;transform:scale(1.2) translate(0, 0);transition:all 500ms ease}.cloud-plugins .featured-plugins .carousel .slick-arrow{width:60px;height:60px;top:200px}.cloud-plugins .featured-plugins .carousel .slick-arrow:before{font-size:60px}.cloud-plugins .featured-plugins .carousel .slick-prev{left:-70px !important}.cloud-plugins .featured-plugins .carousel .slick-next{right:-70px !important}.plugin-container .status-container{position:absolute;top:0;left:0;right:2px;text-align:right;padding-right:2px}.plugin-container .status{padding:1px 4px;text-align:center;text-transform:uppercase;font-weight:bold;font-size:9px;margin-left:1px}.plugin-container .status.installed{border:1px solid #883996;background-color:#883996}.plugin-container .status.installed:after{content:"installed"}.plugin-container .status.outdated{border:1px solid #F29446;background-color:#F29446;color:#212121}.plugin-container .status.outdated:after{content:"new version"}.plugin-container .price-container{position:absolute;top:0;left:0;width:90px;height:90px;overflow:hidden}.plugin-container .price{background-color:#883996;border:1px solid #883996;position:absolute;top:9px;left:-25px;padding:3px 0;transform:rotate(-45deg);min-width:108px;text-align:center}.plugin-container .price:before{content:"€ "}.plugin-container .licensed{background-color:#883996;border:1px solid #883996;position:absolute;top:21px;left:-30px;padding:3px 27px;font-size:14px;transform:rotate(-45deg)}.plugin-container .licensed:before{content:"PURCHASED"}.plugin-container .coming-soon{background-color:#883996;border:1px solid #883996;position:absolute;top:26px;left:-35px;padding:3px 27px;font-size:12px;transform:rotate(-45deg);width:135px}.plugin-container .coming-soon:before{content:"TRIAL ONLY"}.plugin-container .status.buildEnvironment{border:1px solid #FF2927;background-color:#FF2927}.plugin-container .status.buildEnvironment:after{content:"local"}.plugin-container .status.buildEnvironment.labs:after{content:"labs"}.plugin-container .status.buildEnvironment.dev:after{content:"dev"}.plugin-container .status.buildEnvironment.prod{display:none}.plugin-container .status.buildEnvironment.prod:after{content:""}.plugin-container .demo{border:1px solid #FF2927;background-color:#FF2927}.plugin-container .demo:after{content:"demo"}.plugin-container .description-price-container{position:absolute;top:-17px;left:-17px;overflow:hidden;height:200px}.plugin-container .description-price-container .description-price{background-color:#883996;border:1px solid #883996;position:relative;top:34px;left:-57px;padding:3px 0;transform:rotate(-45deg);min-width:250px;text-align:center;font-size:34px;z-index:11}.plugin-container .description-price-container .description-price:before{content:"€ "}.plugin-container .description-price-container .description-licensed{background-color:#883996;border:1px solid #883996;position:relative;top:50px;left:-60px;padding:3px 0;transform:rotate(-45deg);min-width:280px;text-align:center;font-size:34px;z-index:1}.plugin-container .description-price-container .description-licensed:before{content:"PURCHASED"}.plugin-container .description-price-container .description-coming-soon{background-color:#883996;border:1px solid #883996;position:relative;top:50px;left:-70px;padding:3px 0;transform:rotate(-45deg);min-width:280px;text-align:center;font-size:26px;z-index:1}.plugin-container .description-price-container .description-coming-soon:before{content:"TRIAL ONLY"}.buy-button{margin-top:-20px;position:relative}.buy-button iframe{position:absolute;top:-17px;left:0;min-width:115px;z-index:1}.shopify-fake-button{position:absolute;top:3px;left:0;z-index:0;background-color:#c224b0;font-family:Arial;font-size:12px;opacity:.25;min-width:115px;min-height:34px;padding:9px 15px;text-align:center}#patchstorage-library,#patchstorage-pedalboards-library,#patchstorage-hub{background:#2c2c2c;bottom:45px;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2}#patchstorage-library h1,#patchstorage-pedalboards-library h1,#patchstorage-hub h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#patchstorage-library header .help,#patchstorage-pedalboards-library header .help,#patchstorage-hub header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}#patchstorage-library header .close,#patchstorage-pedalboards-library header .close,#patchstorage-hub header .close{opacity:1;position:absolute;right:10px;top:16px}#patchstorage-library .filter,#patchstorage-pedalboards-library .filter,#patchstorage-hub .filter{bottom:45px;left:0;position:fixed;top:45px;right:0;width:240px;overflow:auto}#patchstorage-library .filter h1,#patchstorage-pedalboards-library .filter h1,#patchstorage-hub .filter h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#patchstorage-library .filter h2,#patchstorage-pedalboards-library .filter h2,#patchstorage-hub .filter h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#patchstorage-library .filter .control-group .switch,#patchstorage-pedalboards-library .filter .control-group .switch,#patchstorage-hub .filter .control-group .switch{margin:5px 0 5px 15px;position:relative;width:18rem;height:2.5rem;font-size:0}#patchstorage-library .filter .control-group .switch input,#patchstorage-pedalboards-library .filter .control-group .switch input,#patchstorage-hub .filter .control-group .switch input{position:absolute;top:0;z-index:2;opacity:0;cursor:pointer;height:2.5rem;width:5rem;left:5.5rem;margin:0}#patchstorage-library .filter .control-group .switch input:checked,#patchstorage-pedalboards-library .filter .control-group .switch input:checked,#patchstorage-hub .filter .control-group .switch input:checked{z-index:1}#patchstorage-library .filter .control-group .switch input:checked+label,#patchstorage-pedalboards-library .filter .control-group .switch input:checked+label,#patchstorage-hub .filter .control-group .switch input:checked+label{opacity:1;cursor:default}#patchstorage-library .filter .control-group .switch input:checked~.toggle-outside .toggle-inside,#patchstorage-pedalboards-library .filter .control-group .switch input:checked~.toggle-outside .toggle-inside,#patchstorage-hub .filter .control-group .switch input:checked~.toggle-outside .toggle-inside{left:.25rem;background:#883996}#patchstorage-library .filter .control-group .switch input:not(:checked)+label:hover,#patchstorage-pedalboards-library .filter .control-group .switch input:not(:checked)+label:hover,#patchstorage-hub .filter .control-group .switch input:not(:checked)+label:hover{opacity:.5}#patchstorage-library .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside,#patchstorage-pedalboards-library .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside,#patchstorage-hub .filter .control-group .switch input~input:checked~.toggle-outside .toggle-inside{left:2.65rem;background:#4a4a4a}#patchstorage-library .filter .control-group .switch label,#patchstorage-pedalboards-library .filter .control-group .switch label,#patchstorage-hub .filter .control-group .switch label{color:#fff;opacity:.33;transition:opacity .25s ease;cursor:pointer;font-size:14px;line-height:3rem;display:inline-block;width:5rem;height:100%;margin:0;text-align:center}#patchstorage-library .filter .control-group .switch label:first-of-type,#patchstorage-pedalboards-library .filter .control-group .switch label:first-of-type,#patchstorage-hub .filter .control-group .switch label:first-of-type{text-align:left}#patchstorage-library .filter .control-group .switch label:last-of-type,#patchstorage-pedalboards-library .filter .control-group .switch label:last-of-type,#patchstorage-hub .filter .control-group .switch label:last-of-type{margin-left:5.5rem}#patchstorage-library .filter .control-group .switch .toggle-outside,#patchstorage-pedalboards-library .filter .control-group .switch .toggle-outside,#patchstorage-hub .filter .control-group .switch .toggle-outside{height:100%;border-radius:2rem;padding:.25rem;overflow:hidden;transition:.25s ease all;background:#fff;opacity:.8;position:absolute;width:5rem;left:5.5rem}#patchstorage-library .filter .control-group .switch .toggle-inside,#patchstorage-pedalboards-library .filter .control-group .switch .toggle-inside,#patchstorage-hub .filter .control-group .switch .toggle-inside{border-radius:5rem;background:#4a4a4a;position:absolute;transition:.25s ease all;height:2rem;width:2rem}#patchstorage-library .filter .control-group select,#patchstorage-pedalboards-library .filter .control-group select,#patchstorage-hub .filter .control-group select{width:50px}#patchstorage-library .filter .control-group input[type='checkbox'],#patchstorage-pedalboards-library .filter .control-group input[type='checkbox'],#patchstorage-hub .filter .control-group input[type='checkbox']{display:none}#patchstorage-library .filter .control-group input[type='checkbox']+label,#patchstorage-pedalboards-library .filter .control-group input[type='checkbox']+label,#patchstorage-hub .filter .control-group input[type='checkbox']+label{cursor:pointer;background:#222;color:#fff;display:block;height:32px;line-height:32px;width:100%;margin-bottom:1px;padding-left:15px;border:0 solid #F29446}#patchstorage-library .filter .control-group input[type='checkbox']+label:hover,#patchstorage-pedalboards-library .filter .control-group input[type='checkbox']+label:hover,#patchstorage-hub .filter .control-group input[type='checkbox']+label:hover{background:#000}#patchstorage-library .filter .control-group input[type='checkbox']:checked+label,#patchstorage-pedalboards-library .filter .control-group input[type='checkbox']:checked+label,#patchstorage-hub .filter .control-group input[type='checkbox']:checked+label{background:#F29446}#patchstorage-library .filter .control-group input[type='checkbox']:checked+label:hover,#patchstorage-pedalboards-library .filter .control-group input[type='checkbox']:checked+label:hover,#patchstorage-hub .filter .control-group input[type='checkbox']:checked+label:hover{background:#600E6F}#patchstorage-library .filter>.form-group .input-clean,#patchstorage-pedalboards-library .filter>.form-group .input-clean,#patchstorage-hub .filter>.form-group .input-clean{margin-right:8px !important}#patchstorage-library .filter .categories,#patchstorage-pedalboards-library .filter .categories,#patchstorage-hub .filter .categories{width:100%;margin:0 0 15px 0}#patchstorage-library .filter .categories li,#patchstorage-pedalboards-library .filter .categories li,#patchstorage-hub .filter .categories li{display:block;background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding:0 15px;position:relative;transition:all .33s;line-height:32px;height:32px}#patchstorage-library .filter .categories li span,#patchstorage-pedalboards-library .filter .categories li span,#patchstorage-hub .filter .categories li span{float:right}#patchstorage-library .filter .categories li.selected,#patchstorage-pedalboards-library .filter .categories li.selected,#patchstorage-hub .filter .categories li.selected{background:#883996;color:#fff}#patchstorage-library .filter .categories li:hover,#patchstorage-pedalboards-library .filter .categories li:hover,#patchstorage-hub .filter .categories li:hover{background:#000}#patchstorage-library .filter .categories li.selected:hover,#patchstorage-pedalboards-library .filter .categories li.selected:hover,#patchstorage-hub .filter .categories li.selected:hover{background:#600E6F}.patchstorage-plugins{left:240px;position:fixed;right:0;top:45px;bottom:45px;background:#111 url(../img/watermark.png) 100% 100% no-repeat;overflow-y:auto}.patchstorage-plugins .plugins-wrapper{width:100%}.patchstorage-plugins .cloud-plugin{color:#fff;float:left;width:100%;position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:120px;border:5px solid #000;padding:0 !important;background:rgba(255,255,255,0.07);transition:all .33s;cursor:pointer}@media (min-width:768px){.patchstorage-plugins .cloud-plugin{float:left;width:100%}}@media (min-width:992px){.patchstorage-plugins .cloud-plugin{float:left;width:50%}}@media (min-width:1240px){.patchstorage-plugins .cloud-plugin{float:left;width:33.33333333%}}.patchstorage-plugins .cloud-plugin:hover{background-color:black}.patchstorage-plugins .cloud-plugin:hover .description{background:rgba(0,0,0,0.8)}.patchstorage-plugins .cloud-plugin:hover .description hr{border-color:#F29446}.patchstorage-plugins .cloud-plugin:hover figure{top:-5px}.patchstorage-plugins .cloud-plugin figure{height:100px;position:absolute;top:10px;left:20px;margin:0;transition:all .33s linear;display:flex;flex-direction:column;justify-content:center}.patchstorage-plugins .cloud-plugin figure img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}.patchstorage-plugins .cloud-plugin .cloud-plugin-border{border:1px solid #333;width:100%;height:100%}.patchstorage-plugins .cloud-plugin .description{transition:all .33s;display:block;line-height:1.5;overflow:hidden;position:absolute;top:1px;right:1px;bottom:1px;left:80px;background:rgba(33,33,33,0.66)}.patchstorage-plugins .cloud-plugin .description .no_description{color:rgba(255,255,255,0.25)}.patchstorage-plugins .cloud-plugin .description hr{transition:all .33s;border:none;border-bottom:1px solid #883996;margin:0;position:absolute;top:50%;left:0;width:calc(100% - 5px)}.patchstorage-plugins .cloud-plugin .description .title{display:block;text-transform:uppercase;font-weight:bold;padding:8px 10px 1px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.patchstorage-plugins .cloud-plugin .description .author{display:block;padding:1px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}.patchstorage-plugins .cloud-plugin .description p{position:absolute;left:10px;right:10px;top:75%;transform:translateY(-50%);height:2.4em;line-height:1.25em;overflow:hidden}.patchstorage-plugins .cloud-plugin .actions{font-size:11px;font-weight:bold;text-transform:uppercase}.patchstorage-plugins .cloud-plugin .actions>span{cursor:pointer}.patchstorage-plugins .cloud-plugin .actions>span:hover{text-decoration:underline}.patchstorage-plugins .cloud-plugin .actions span.duplicate{margin:0 6px}.patchstorage-plugins h2{margin-left:23px;font-size:20px;color:#cccccc}.patchstorage-plugins h3{color:#cccccc}.plugin-container .status-container{position:absolute;top:0;left:0;right:2px;text-align:right;padding-right:2px}.plugin-container .status{padding:1px 4px;text-align:center;text-transform:uppercase;font-weight:bold;font-size:9px;margin-left:1px}.plugin-container .status.downloads{border:1px solid black;background-color:black}.plugin-container .status.state.ready-to-go{display:none;border:1px solid #8AC926;background-color:#8AC926}.plugin-container .status.state.ready-to-go:after{content:"ready"}.plugin-container .status.state.help-needed{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.state.help-needed:after{content:"help"}.plugin-container .status.state.inactive{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.state.inactive:after{content:"deprecated"}.plugin-container .status.state.work-in-progress{border:1px solid #1982C4;background-color:#1982C4}.plugin-container .status.state.work-in-progress:after{content:"work in progress"}.plugin-container .status.installed{border:1px solid #883996;background-color:#883996}.plugin-container .status.installed:after{content:"installed"}.plugin-container .status.unavailable{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.unavailable:after{content:"removed from patchstorage"}.plugin-container .status.local{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.local:after{content:"local"}.plugin-container .status.outdated{border:1px solid #F29446;background-color:#F29446;color:#212121}.plugin-container .status.outdated:after{content:"new version"}.plugin-container .status.buildEnvironment{border:1px solid #D91E36;background-color:#D91E36}.plugin-container .status.buildEnvironment:after{content:"local"}.plugin-container .status.buildEnvironment.dev:after{content:"dev"}.plugin-container .status.buildEnvironment.prod{display:none}.plugin-container .status.buildEnvironment.prod:after{content:""}.patchstorage-info{background-color:rgba(20,20,20,0.9);bottom:0;color:#ccc;left:0;overflow-y:scroll;position:fixed;right:0;top:0;z-index:40}.patchstorage-info .box{margin-top:3em;margin-bottom:3em;background-color:#111;padding:15px;border:2px solid #333}.patchstorage-info .box .row-fluid{position:relative}.patchstorage-info .close{color:#fff;font-size:12px;font-weight:bold;opacity:1;position:absolute;right:10px;text-shadow:none;text-transform:uppercase;top:10px}.patchstorage-info .screenshot{padding:18px;min-width:3em;min-height:9em;display:inline-block;z-index:0}.patchstorage-info .screenshot div.state{background-color:#FF2927;font-family:"cooper hewitt",sans-serif;text-transform:uppercase;font-weight:700;padding:5px 10px;color:white;position:absolute;top:18px;left:30px;font-size:16px}.patchstorage-info .screenshot div.state.ready-to-go{display:none;background-color:#8AC926}.patchstorage-info .screenshot div.state.ready-to-go:after{content:"state - ready to go!"}.patchstorage-info .screenshot div.state.help-needed{background-color:#D91E36}.patchstorage-info .screenshot div.state.help-needed:after{content:"state - help needed"}.patchstorage-info .screenshot div.state.inactive{background-color:#D91E36}.patchstorage-info .screenshot div.state.inactive:after{content:"state - deprecated"}.patchstorage-info .screenshot div.state.work-in-progress{background-color:#1982C4}.patchstorage-info .screenshot div.state.work-in-progress:after{content:"state - work in progress"}.patchstorage-info .screenshot img{max-width:100%}.patchstorage-info figure{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:992px){.patchstorage-info figure{float:left;width:33.33333333%}}.patchstorage-info figure:hover{z-index:10 !important}.patchstorage-info .plugin-description{position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:100%;display:block;position:a;padding-left:45px;background:-moz-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-webkit-gradient(linear, left top, right top, color-stop(1em, rgba(17,17,17,0.1)), color-stop(2em, #111));background:-webkit-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-o-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-ms-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:linear-gradient(to right, rgba(17,17,17,0.1) 1em, #111 2em);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1)}@media (min-width:992px){.patchstorage-info .plugin-description{float:left;width:58.33333333%}}.patchstorage-info .plugin-description>p{font-size:16px;margin-bottom:27px;white-space:pre-wrap}.patchstorage-info header{padding:18px 0 0}.patchstorage-info header h1{display:inline-block;vertical-align:middle;color:#fff;font-size:27px;font-weight:bold;line-height:1;margin:0;padding:0}.patchstorage-info header h1 span{font-size:16px;line-height:1;margin:0;padding:0}.patchstorage-info .ps-label{padding:1px 4px;text-transform:uppercase;font-weight:bold;font-size:9px;border:1px solid #03a9f4;background:#03a9f4;color:white;vertical-align:text-top;display:none}.patchstorage-info .version{color:#ccc;font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info .version span.bold{color:#fff;font-size:14px}.patchstorage-info .version button{font-weight:bold;margin-top:6px;text-transform:uppercase}.patchstorage-info .rating{background:url(../img/icn-rating.png) no-repeat -12px top;display:inline-block;height:14px;width:84px}.patchstorage-info .rating.one{background:url(../img/icn-rating.png) no-repeat -12px -15px}.patchstorage-info .rating.two{background:url(../img/icn-rating.png) no-repeat -12px -30px}.patchstorage-info .rating.three{background:url(../img/icn-rating.png) no-repeat -12px -45px}.patchstorage-info .rating.four{background:url(../img/icn-rating.png) no-repeat -12px -60px}.patchstorage-info .rating.five{background:url(../img/icn-rating.png) no-repeat -12px -75px}.patchstorage-info .rating-label{color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info .my-rate{width:15px;height:15px;margin:0;padding:0;float:left;cursor:pointer}.patchstorage-info .plugin-specs{text-align:center;width:100%;border-color:#333}.patchstorage-info .plugin-specs th{background:#333;color:#fff;border-color:#333;text-align:center}.patchstorage-info .plugin-specs td{border-color:#333}.patchstorage-info .plugin-specs td:first-child{width:40%}.patchstorage-info .plugin-specs td:not(first-child){width:20%}.patchstorage-info .comments-reviews{border-top:1px solid #333;margin-top:10px;padding-top:10px}.patchstorage-info .comments-reviews h1{color:#fff;font-size:21px;line-height:2;margin:0;padding:0}.patchstorage-info .reviews{border-bottom:1px solid #333;margin:9px 0 18px 0;padding:9px 0 18px 0}.patchstorage-info article.review{margin:18px 0}.patchstorage-info article.review h1{color:#fff;font-size:14px}.patchstorage-info article.review h1 .rating{margin-left:6px}.patchstorage-info article.review h1 .rating-label{color:#ccc;display:inline;font-size:12px;font-weight:normal;margin-left:6px}.patchstorage-info article.review .bar{background:#333;display:block;height:12px;margin:2px 6px 0;position:relative;width:100px}.patchstorage-info article.review .progress-bar{background:#444;bottom:0;display:block;height:10px;left:0;margin:1px;position:absolute;right:0;top:0;width:50%}.patchstorage-info article.review .rating-number{display:block;font-size:12px;margin-top:-1px}.patchstorage-info article.comment{border-top:1px solid #333;margin:18px 0 0;padding:18px 0 0}.patchstorage-info article.comment h1{color:#fff;font-size:16px;line-height:1}.patchstorage-info article.comment h1 .date{color:#ccc;font-size:12px;font-weight:normal;margin-left:6px}.patchstorage-info .comments{margin:18px 0;padding:18px 0}.patchstorage-info .comments button{margin-top:18px}.patchstorage-info form.comment-form{border-top:1px solid #333;margin:18px 0;padding:18px 0}.patchstorage-info form.comment-form label{font-size:12px;font-weight:bold;text-transform:uppercase}.patchstorage-info form.comment-form textarea{height:180px}.patchstorage-info .favorite-button{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(../img/icons/25/star-border.png) no-repeat center center;opacity:.5}.patchstorage-info .favorite-button.favorite{opacity:1;background:url(../img/icons/25/star.png) no-repeat center center}.patchstorage-info .favorite-button.favorite:hover{opacity:1}.patchstorage-info .online-button-href{display:inline-block;margin-bottom:10px}.patchstorage-info .status.demo{display:inline-block;padding:4px 8px;margin:2px 0;font-size:.8em}#bank-library{bottom:45px;left:0;overflow-x:hidden;overflow-y:auto;position:absolute;right:0;top:0;z-index:2}#bank-library .ui-draggable-dragging{cursor:webkit-dragging !important}#bank-library .mod-banks-drag-item{background:#F29446;color:white;font-weight:bold;z-index:10000;box-shadow:0 5px 15px black;opacity:.5}#bank-library .mod-banks-drag-item .img{display:block;height:auto;margin:0 auto;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-library .mod-banks-drag-item .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;padding-left:5px}#bank-library span.move{background-image:url(../img/move.png);background-position:left center;background-repeat:no-repeat;display:block;float:left;height:32px;left:0;cursor:move !important;margin:-1px 6px 0 0;width:24px}#bank-library span.remove{cursor:pointer;float:right;width:32px;height:32px;display:block;background-image:url(../img/icons/25/delete.png);background-repeat:no-repeat;background-position:50% 50%;transition:background-color .33s}#bank-library span.remove:hover{background-color:#F29446}#bank-library span.title{display:block;float:left;height:32px;overflow:hidden;max-width:70%;white-space:nowrap}#bank-library input::selection{background:#883996 !important;color:white}#bank-library .icon-add{width:1em;height:1em;display:inline-block;font-size:inherit;vertical-align:baseline}#bank-library .icon-add i{position:absolute;width:1em;margin-top:.3em;border-top:.4em solid #888}#bank-library .icon-add b{position:absolute;height:1em;margin-left:.3em;border-left:.4em solid #888}#bank-library #bank-list{left:0;list-style:none;margin:0;padding:0;position:fixed;bottom:45px;overflow-y:auto;top:45px;width:20%;background:#2c2c2c}#bank-library #bank-list>div.add-bank{color:#fff;cursor:pointer;padding-left:5px;line-height:32px;text-transform:uppercase;transition:all .33s}#bank-library #bank-list>div.add-bank:hover{background:#F29446}#bank-library #bank-list>div.add-bank .icon-add{display:inline-block;width:24px;margin-right:6px;padding-left:5px;box-sizing:border-box}#bank-library #bank-list>div.selected span.move{background-position:right center}#bank-library #bank-list>div.selected span.remove{background-position:right center}#bank-library #bank-list .edit-bank{color:#555;width:100% !important;height:30px;margin:1px;padding-left:.5em;background-color:#fff;background-image:none;border:0 solid #ccc;border-radius:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out}#bank-library #bank-list div{background:#222;color:#888;cursor:pointer;font-weight:bold;margin:0 0 1px 0;content:\002B;position:relative;transition:all .33s}#bank-library #bank-list div.selected{background:#883996;color:#fff}#bank-library #bank-list div:hover{background:#000}#bank-library #bank-list div.selected:hover{background:#600E6F}#bank-library #bank-list .bank-item{display:block;background:#222;color:#888;line-height:32px;height:32px;cursor:pointer;font-weight:bold;margin:0 0 1px 0;padding-left:5px;position:relative}#bank-library #bank-list .bank-item .remove{border-radius:0}#bank-library #bank-list .filter_{border-color:#111;border-style:dotted;border-width:0 1px 0 0;bottom:46px;left:0;padding-top:18px;position:fixed;top:0;right:0;width:240px;overflow:auto}#bank-library #bank-list .filter_ h1{font-weight:2em;text-transform:uppercase;font-weight:bold;margin:0 0 0 10px}#bank-library #bank-list .filter_ h2{color:white;font-size:15px;text-transform:uppercase;font-weight:bold;margin-top:1em;margin-left:10px}#bank-library #bank-list .filter_ .control-group{float:left;margin-right:9px;margin-left:10px}#bank-library #bank-list .filter_ .control-group label{color:#fff;display:inline-block;font-size:12px;font-weight:bold}#bank-library #bank-list .filter_ .control-group select{width:50px}#bank-library #bank-list .filter_>.form-group{padding:15px}#bank-library #bank-title{background:#111;left:20%;height:92px;margin:0;padding:0;position:fixed;text-align:left;top:45px;width:50%}#bank-library #bank-title h1{font-size:2em;padding:0;max-height:2em;display:block;margin:.5em .8em 0 .8em;padding-bottom:.2em;color:white;white-space:nowrap;overflow:hidden}#bank-library #bank-title form{margin:0 2em;color:#666}#bank-library #bank-title h2{margin:4px 0 0 14px;display:block;text-transform:initial !Important;color:white;font-size:12px;line-height:20px;text-align:left}#bank-library #bank-title small{font-size:10px;color:#BBBBBB;text-align:left;display:block;margin-left:14px}#bank-library #bank-title select{display:block;float:left;height:22px;margin:5px 2.5%;width:20%;font-size:10px}#bank-library #bank-pedalboards{background:#111;bottom:46px;left:20%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0 0 200px 0;position:fixed;top:164px;width:50%}#bank-library #bank-pedalboards>div{margin:0 10px 20px 20px}#bank-library #bank-pedalboards .pedalboard{color:#fff;cursor:-webkit-grab !important;cursor:grab !important;width:100%;transition:all .33s}#bank-library #bank-pedalboards .pedalboard:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#bank-library #bank-pedalboards .pedalboard:hover{background-color:#883996}#bank-library #bank-pedalboards .pedalboard .info{height:32px;padding-left:5px;background:rgba(255,255,255,0.07)}#bank-library #bank-pedalboards .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative}#bank-library #bank-pedalboards .pedalboard .img{display:inline-block;float:left;height:auto;margin:0 9px 0 0;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-library #bank-pedalboards .mode{border:none;margin:22px 0 18px 0;text-align:center}#bank-library #bank-edit{position:fixed;display:block;background:#111 url(../img/watermark.png) 100% 100% no-repeat;width:80%;bottom:45px;top:45px;left:20%}#bank-library #bank-pedalboards-search{bottom:45px;right:0;overflow:auto;position:fixed;top:0;width:30%;z-index:6}#bank-library #bank-pedalboards-search h2{text-transform:uppercase;color:white;font-size:1.5em;font-weight:bold;float:left}#bank-library #bank-pedalboards-search .box{background:#111;padding:0;box-sizing:border-box}#bank-library #bank-pedalboards-search input{width:50%;padding-left:1em}#bank-library #bank-pedalboards-search .remove{display:none !important}#bank-library #bank-pedalboards-search label{color:#fff;font-weight:bold;text-transform:uppercase;float:left;line-height:45px;padding-left:10px}#bank-library #bank-pedalboards-search .control-group{margin-bottom:10px;padding:0 2%;position:relative;width:29.3%}#bank-library #bank-pedalboards-search input[type="search"]{width:50% !important;float:right;margin:5px}#bank-library #bank-pedalboards-search select{width:100%}#bank-library #bank-pedalboards-search .input-clean{background:#333;color:#fff;cursor:pointer;font-size:8px;height:18px;left:auto !important;position:absolute;right:8px !important;text-align:center;text-transform:uppercase;top:31px !important;width:18px;border-radius:100%}#bank-pedalboards-mode{background:#333;left:30%;height:30px;margin:0;padding:20px 0 0 0;position:absolute;text-align:center;top:68px;width:45%}#bank-pedalboards-mode .grid{background:url(../img/icn-grid-list.png) no-repeat left bottom;display:inline-block;height:14px;width:14px}#bank-pedalboards-mode .grid.selected{background-position:left top}#bank-pedalboards-mode .list{background:url(../img/icn-grid-list.png) no-repeat right bottom;display:inline-block;height:14px;width:14px}#bank-pedalboards-mode .list.selected{background-position:right top}.pedalboard .addressings{width:100%}.pedalboard .addressings .footswitch{background:#2b2b2b url(../img/footswitch-free.png) no-repeat center top;float:left;height:20px;width:25%}.pedalboard .addressings .footswitch.addressed{background:#2b2b2b url(../img/footswitch-addressed.png) no-repeat center top}#bank-pedalboards-result{position:fixed;bottom:45px;top:45px;overflow:auto;width:30%;background:#111}#bank-pedalboards-result .pedalboard{color:#fff;background:rgba(255,255,255,0.07);cursor:-webkit-grab;cursor:grab;margin:0 20px 20px 10px;transition:all .33s}#bank-pedalboards-result .pedalboard:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#bank-pedalboards-result .pedalboard:hover{background-color:#883996}#bank-pedalboards-result .pedalboard .img{display:block;height:auto;margin:0 auto;text-align:center;width:100%;background:url(../img/background.jpg);background-size:auto 100%;background-position:center center;box-shadow:inset 0 3px 6px black;border:1px solid #000}#bank-pedalboards-result .pedalboard .img img{max-width:100%}#bank-pedalboards-result .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;padding-left:5px}#bank-pedalboards-result .pedalboard .description{display:block;font-size:11px;height:27px;line-height:1.5;overflow:hidden}#file-manager-library{background:#2c2c2c url(../img/watermark.png) 100% 100% no-repeat;top:0;bottom:46px;left:0;right:0;overflow-x:hidden;overflow-y:auto;position:absolute;z-index:2}#file-manager-wrapper{display:flex;position:fixed;top:45px;bottom:55px;left:2em;right:2em;overflow:auto;padding-top:1%}#file-manager-wrapper iframe{flex:1;border:none}#pedalboards-library{background:#2c2c2c;bottom:45px;left:0;overflow-x:hidden;overflow-y:auto;position:absolute;right:0;top:0;z-index:2}#pedalboards-library h1{color:#fff;display:inline-block;font-size:24px;line-height:35px;margin:0 0 18px 0;padding:0}#pedalboards-library header .form-group{display:inline-block;float:right;margin-top:5px;margin-right:5px}#pedalboards-library header .form-group .form-control{width:200px !important}#pedalboards-library header .form-group .input-clean{line-height:20px;margin-right:12px !important}#pedalboards-library header .view-modes{float:right;margin-right:12px;cursor:pointer}#pedalboards-library header .view-modes .view-mode{font-size:130%}#pedalboards-library header .view-modes .view-mode.selected{color:#fff}#pedalboards-library .filter{border-color:#111;border-style:dotted;border-width:0 1px 0 0;bottom:45px;left:0;position:fixed;right:0;top:45px;width:240px}#pedalboards-library .filter .control-group{float:left;margin-right:9px}#pedalboards-library .filter .control-group label{color:#fff;display:inline-block;font-size:12px;font-weight:bold;width:165px}#pedalboards-library .filter .control-group select{width:50px}#pedalboards-library .pedalboards{left:0;position:fixed;right:0;top:45px;bottom:45px;overflow:auto;background:#111 url(../img/watermark.png) 100% 100% no-repeat;padding-top:1%}#pedalboards-library .pedalboards .pedalboard{color:#fff;float:left;margin:0 0 1% 1%;width:18.8%;position:relative;background-color:transparent;background-image:url(../img/background.jpg);background-position:center center;background-repeat:repeat;background-size:auto 100%;transition:all .33s;cursor:pointer}#pedalboards-library .pedalboards .pedalboard:hover .info{background-color:#883996}#pedalboards-library .pedalboards .pedalboard .img{box-shadow:inset 0 3px 6px black;border:1px solid #000;display:block;width:100%;height:10vw;overflow:hidden;text-align:center;background-image:url(../img/loading-pedalboard.gif);background-position:center center;background-repeat:no-repeat;background-size:auto;position:relative}#pedalboards-library .pedalboards .pedalboard .img.loaded{background-size:contain}#pedalboards-library .pedalboards .pedalboard .img.broken{background-image:url(../img/icons/broken_image.svg);background-size:auto 50%}#pedalboards-library .pedalboards .pedalboard.broken .img::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;background-color:rgba(17,17,17,0.5);background-image:url(../img/icons/broken_pedal.svg);background-size:auto 50%;background-repeat:no-repeat;background-position:center}#pedalboards-library .pedalboards .pedalboard .info{background-color:#2c2c2c;transition:background-color .33s}#pedalboards-library .pedalboards .pedalboard .title{display:block;line-height:32px;font-weight:bold;overflow:hidden;position:relative;height:32px;left:5px;width:calc(100% - 32px);text-overflow:ellipsis;white-space:nowrap}#pedalboards-library .pedalboards .pedalboard .description{display:block;font-size:12px;height:36px;line-height:1.5;overflow:hidden}#pedalboards-library .pedalboards .pedalboard .actions{font-weight:bold;text-transform:uppercase;position:absolute;top:0;right:0}#pedalboards-library .pedalboards .pedalboard .actions .js-remove{width:32px;height:32px;background-image:url(../img/icons/25/delete.png);background-repeat:no-repeat;background-position:50% 50%;transition:background-color .33s}#pedalboards-library .pedalboards .pedalboard .actions .js-remove:hover{background-color:#F29446}#pedalboards-library .pedalboards .pedalboard .actions>span{cursor:pointer}#pedalboards-library .pedalboards .pedalboard .actions>span:hover{text-decoration:underline}#pedalboards-library .pedalboards .pedalboard .actions>span.duplicate{margin:0 6px}#pedalboards-library .pedalboards.list-selected .img{display:none}#nprogress{pointer-events:none;z-index:103100}#nprogress .bar{background:#883996;position:fixed;z-index:103100;top:45px;left:0;opacity:.5;width:100%;height:2px}#nprogress .peg{display:none}#nprogress .spinner{display:none;position:fixed;z-index:1031;top:45px;right:0;background:rgba(0,0,0,0.5);padding:6px;box-sizing:border-box;transform:translate(-50% -50%)}#nprogress .spinner-icon{width:32px;height:32px;box-sizing:border-box;border:solid 3px transparent;border-top-color:#f29446;border-left-color:rgba(242,148,70,0.66);border-bottom-color:rgba(242,148,70,0.33);border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mod-pedal-settings .mod-address.addressed,.mod-pedal-settings .preset-btn-assign-all.addressed{background-color:#a144b2}.mod-pedal-settings-address .mod-box .form-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.mod-pedal-settings-address .mod-box .form-container .btn.js-type,.mod-pedal-settings-address .mod-box .form-container .btn.advanced-toggle{border:solid #333 1px}.mod-pedal-settings-address .mod-box .form-container .main-form-container{width:691px;padding-right:3px}.mod-pedal-settings-address .mod-box .form-container .main-form-container label{text-align:center}.mod-pedal-settings-address .mod-box .form-container .main-form-container .btn.js-type.selected{background-color:#333;color:white}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike{display:flex;flex-basis:100%;align-items:center;color:black;margin:6px 0}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:before,.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:after{content:"";flex-grow:1;background:black;height:3px;font-size:0;line-height:0}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:before{margin-right:8px}.mod-pedal-settings-address .mod-box .form-container .main-form-container .group-strike:after{margin-left:8px}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table{width:100%}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:first-child{background-color:#f66}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(2){background-color:#ff6}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(3){background-color:#6ff}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(4){background-color:#bb7cd5}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(5){background-color:#f5a77e}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(6){background-color:#6f6}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(7){background-color:#f6f}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th:nth-child(8){background-color:#8080ff}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table th,.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td{border:solid #333 1px;text-align:center}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td{padding:5px;cursor:pointer}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td.selected{background-color:#883996;color:white;box-shadow:3px 3px 3px #999}.mod-pedal-settings-address .mod-box .form-container .main-form-container .hmi-table td.disabled{cursor:auto;color:#999;background-color:#d9d9d9;box-shadow:inset 0 0 3px #555}.mod-pedal-settings-address .mod-box .form-container .main-form-container .midi-custom-uri{color:#883996}.mod-pedal-settings-address .mod-box .form-container .buttons-container{padding-right:3px;padding-bottom:18px}.mod-pedal-settings-address .mod-box .form-container .advanced-container{border-left:1px solid #eee;padding-left:12px;margin-left:12px}.mod-pedal-settings-address .mod-box .form-container .advanced-container .cv-op-mode label{width:100% !important}.mod-pedal-settings-address .mod-box .form-container .advanced-container .cv-op-mode .mod-controls{width:155px !important}.mod-cv-output .output-cv-checkbox{display:flex;position:absolute;top:45px;left:15px}.mod-cv-output .output-cv-checkbox .checkbox-container{position:relative;padding-left:45px;cursor:pointer;font-size:22px;height:35px;width:35px}.mod-cv-output .output-cv-checkbox .checkbox-container .checkmark{position:absolute;top:0;left:0;height:35px;width:35px;background-color:#eee}.mod-cv-output .output-cv-checkbox .checkbox-container .checkmark:after{content:"";position:absolute;display:none;left:13px;top:7px;width:10px;height:17px;border:solid white;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;z-index:5;width:100%;height:100%;top:0;left:0}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:disabled{cursor:not-allowed}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:checked~.checkmark{background-color:#883996}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:checked~.checkmark:after{display:block}.mod-cv-output .output-cv-checkbox .checkbox-container input[type=checkbox]:disabled~.checkmark{background-color:#999}.mod-cv-output .output-cv-checkbox input[type=text]{font-size:20px}.mod-cv-output .output-cv-checkbox ::selection{background:#883996 !important;color:white !important}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-semibold-webfont.eot');src:url('../fonts/cooper/cooperhewitt-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-semibold-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-semibold-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-semibold-webfont.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-light-webfont.eot');src:url('../fonts/cooper/cooperhewitt-light-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-light-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-light-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-light-webfont.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-lightitalic-webfont.eot');src:url('../fonts/cooper/cooperhewitt-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-lightitalic-webfont.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-bookitalic-webfont.eot');src:url('../fonts/cooper/cooperhewitt-bookitalic-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-bookitalic-webfont.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:'cooper hewitt';src:url('../fonts/cooper/cooperhewitt-book-webfont.eot');src:url('../fonts/cooper/cooperhewitt-book-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/cooper/cooperhewitt-book-webfont.woff2') format('woff2'),url('../fonts/cooper/cooperhewitt-book-webfont.woff') format('woff'),url('../fonts/cooper/cooperhewitt-book-webfont.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}*{outline:0 !important}html,body{height:100%;overflow:hidden}body{background:#111;min-width:1024px}body.ios{position:fixed;min-width:980px}*{font-family:"cooper hewitt",Sans-serif !important}.unpadded{padding:0 !important}.unpadded-r{padding:0 0 0 7px}.unpadded-l{padding:0 7px 0 0}.ui-draggable:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}.form-control{width:100% !important}#wrapper{bottom:0;left:0;min-width:980px;overflow:hidden;position:absolute;right:0;top:0}hr.dotted{border:1px dotted #444;margin:2px 0 3px 0}.preset-list{width:100%;height:200px !important}.input-clean{background:#333;color:#fff;cursor:pointer;height:18px;left:auto !important;position:absolute;right:0;margin-right:18px !important;text-align:center;text-transform:uppercase;margin-top:-26px !important;width:18px;border-radius:100%}.input-clean:after{content:"&times;";content:"\00d7";font-size:14px;font-weight:bold}.form-control::selection{background:#883996 !important;color:white !important}#notifications{position:absolute;top:55px;right:0;width:320px;z-index:100000}#notifications>section{border-radius:0;margin-bottom:0 !important;opacity:.96;cursor:pointer}#notifications .progressbar{border:0;height:8px;overflow:hidden;position:absolute;left:8px;bottom:0;width:306px}#notifications .progressbar .progressbar-value{background-color:rgba(136,57,150,0.7);height:90%;margin:0}#main-menu{background:#111;bottom:0;color:#fff;height:45px;left:0;position:absolute;right:0;z-index:10}#main-menu>div{cursor:pointer;float:left}#main-menu>div.icon{height:45px;width:45px}#main-menu>div.icon>img{margin:5px 0 0 6px}#main-menu>div.icon.selected{background:#000}#main-menu>div.icon>a{display:block;height:45px;width:45px}#main-menu #mod-plugins{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-45px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-plugins:hover{background-color:#000;background-position:-45px bottom}#main-menu #mod-plugins.selected{background-color:#000;background-position:-45px bottom}#main-menu #mod-cloud-plugins{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-315px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-cloud-plugins:hover{background-color:#000;background-position:-315px bottom}#main-menu #mod-cloud-plugins.selected{background-color:#000;background-position:-315px bottom}#main-menu #patchstorage{background-image:url(../img/patchstorage-menu.png?v=2);background-position:0 top;background-repeat:no-repeat;transition:all .33s;background-size:cover}#main-menu #patchstorage:hover{background-color:#000;background-position:0 bottom}#main-menu #patchstorage.selected{background-color:#000;background-position:0 bottom}#main-menu #mod-pedalboard{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-90px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-pedalboard:hover{background-color:#000;background-position:-90px bottom}#main-menu #mod-pedalboard.selected{background-color:#000;background-position:-90px bottom}#main-menu #mod-bank{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-135px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-bank:hover{background-color:#000;background-position:-135px bottom}#main-menu #mod-bank.selected{background-color:#000;background-position:-135px bottom}#main-menu #mod-file-manager{background-image:url(../img/menu-icons-sprite.png?v=2);background-position:-180px top;background-repeat:no-repeat;transition:all .33s}#main-menu #mod-file-manager:hover{background-color:#000;background-position:-180px bottom}#main-menu #mod-file-manager.selected{background-color:#000;background-position:-180px bottom}#main-menu #mod-sfzbuilder{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2245%22%20viewBox%3D%220%200%2045%2045%22%3E%3Cg%20fill%3D%22%23F29446%22%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2211%22%20height%3D%2211%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%2225%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2225%22%20width%3D%229%22%20height%3D%229%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:center;background-repeat:no-repeat;opacity:.33;transition:all .33s}#main-menu #mod-sfzbuilder:hover{background-color:#000;opacity:1}#main-menu #mod-sfzbuilder.selected{background-color:#000;opacity:1}#main-menu #banks-saving{margin:21px 0 0 6px;font-size:10px;color:#666;display:none}#main-menu #mod-show-midi-port,#main-menu #mod-transport-icon,#main-menu .mod-bypass,#main-menu #mod-cpu,#main-menu #mod-ram,#main-menu #mod-xruns,#main-menu #mod-buffersize,#main-menu #mod-cpu-stats,#main-menu #mod-recorder{background-position:8px 50%;background-repeat:no-repeat;padding-left:40px;padding-right:12px;color:#ffffff;float:right;font-size:11px;font-weight:bold;line-height:4.5;text-transform:uppercase;width:auto !important;transition:all .33s}#main-menu #mod-show-midi-port:hover,#main-menu #mod-transport-icon:hover,#main-menu .mod-bypass:hover,#main-menu #mod-cpu:hover,#main-menu #mod-ram:hover,#main-menu #mod-xruns:hover,#main-menu #mod-buffersize:hover,#main-menu #mod-cpu-stats:hover,#main-menu #mod-recorder:hover{background-color:#000}#main-menu #mod-show-midi-port.selected,#main-menu #mod-transport-icon.selected,#main-menu .mod-bypass.selected,#main-menu #mod-cpu.selected,#main-menu #mod-ram.selected,#main-menu #mod-xruns.selected,#main-menu #mod-buffersize.selected,#main-menu #mod-cpu-stats.selected,#main-menu #mod-recorder.selected{background-color:#333}#main-menu #mod-show-midi-port{background-image:url(../img/icons/25/midi.png)}#main-menu #mod-transport-icon{background-image:url(../img/icons/25/stop.png);font-family:monospace;width:10.5em !important;text-align:right}#main-menu #mod-transport-icon.playing{background-image:url(../img/icons/25/transport.png)}#main-menu .mod-bypass{background-image:url(../img/icons/25/bypass.png)}#main-menu .mod-bypass.bypassed{background-color:#883996}#main-menu #mod-cpu,#main-menu #mod-ram{cursor:default;width:115px !important;padding:0 !important;background:linear-gradient(to right, #1e5799 0, #2989d8 69%, #ff6430 78%, #ff6430 93%, #c40000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#c40000', GradientType=1)}#main-menu #mod-cpu .progress-title{background-image:url(../img/icons/25/cpu.png);background-position:0 50%;background-repeat:no-repeat;padding-left:30px}#main-menu #mod-ram .progress-title{background-image:url(../img/icons/25/ram.png);background-position:0 50%;background-repeat:no-repeat;padding-left:30px}#main-menu #mod-xruns{background-image:url(../img/icons/25/cpu.png);width:115px !important}#main-menu #mod-cpu-stats{background-image:url(../img/icons/25/cpu.png);width:155px !important;text-transform:none}#main-menu #mod-buffersize{background-image:url(../img/icons/25/cpu.png);width:125px !important}#main-menu #mod-recorder{position:relative;width:115px !important}#main-menu #mod-recorder:before{content:"";position:absolute;left:15px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;background-color:#999;transition:background-color .33s}#main-menu #mod-recorder.recording:before{background-color:#ff3030;animation:mod-recorder-pulse 1.5s ease-in-out infinite}@keyframes mod-recorder-pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}#main-menu .progress{height:45px;margin-bottom:0;overflow:hidden;float:right;background-color:#111;-webkit-transition:width 1s;transition:width 1s}#main-menu .progress .bar{float:right;background:#222 !important}#main-menu .progress-title{position:absolute;top:0;height:45px;margin:0;margin-left:1em;color:white}#main-menu .status{background-color:#111;background-position:3px 50%;background-size:36px;background-repeat:no-repeat;border-color:#2b2b2b;border-style:solid;border-width:0 0 0 1px;float:right}#main-menu #mod-settings{font-family:fontello !important;font-size:28px;padding-top:3px;padding-left:10px;position:relative;color:#fff;opacity:.66;cursor:pointer;transition:all .33s}#main-menu #mod-settings:after{content:'\e802'}#main-menu #mod-settings:hover{opacity:1}#main-menu #mod-update{background-image:url(../img/icons/36/update.png)}#main-menu #mod-update.uptodate{background-image:url(../img/icons/36/ok.png)}#main-menu #mod-status{background-image:url(../img/icons/36/disconnect.png)}#main-menu #mod-status.online{background-image:url(../img/icons/36/disconnect.png)}#main-menu #mod-devices{background-image:url(../img/icons/36/control-chain.png)}#cloud_install_all{background-image:url(../img/icons/36/save.png);float:right;font-size:21px}#cloud_update_all,#patchstorage_update_all,#patchstorage_pedalboards_update_all{background-image:url(../img/icons/36/update.png);float:right;font-size:21px}header#pedalboard-actions,#bank-library header,#cloud-plugins-library header,#patchstorage-library header,#patchstorage-pedalboards-library header,#patchstorage-hub header,#pedalboards-library header,#file-manager-library header,#sfzbuilder-library header{display:block;left:0;height:45px;line-height:45px;position:fixed;right:0;top:0;box-shadow:0 1px 10px rgba(0,0,0,0.1);z-index:5;background-color:#111;background-position:3px 50%;background-size:36px;background-repeat:no-repeat;background-image:url(../img/icons/36/mod.png);padding-left:45px}header#pedalboard-actions .help,#bank-library header .help,#cloud-plugins-library header .help,#patchstorage-library header .help,#patchstorage-pedalboards-library header .help,#patchstorage-hub header .help,#pedalboards-library header .help,#file-manager-library header .help,#sfzbuilder-library header .help{background-image:url(../img/icn-help-16x16.png);background-position:center center;background-repeat:no-repeat;display:inline-block;height:21px;width:21px}header#pedalboard-actions .close,#bank-library header .close,#cloud-plugins-library header .close,#patchstorage-library header .close,#patchstorage-pedalboards-library header .close,#patchstorage-hub header .close,#pedalboards-library header .close,#file-manager-library header .close,#sfzbuilder-library header .close{opacity:1;position:absolute;right:10px;top:16px}header#pedalboard-actions .drop-menu,#bank-library header .drop-menu,#cloud-plugins-library header .drop-menu,#patchstorage-library header .drop-menu,#patchstorage-pedalboards-library header .drop-menu,#patchstorage-hub header .drop-menu,#pedalboards-library header .drop-menu,#file-manager-library header .drop-menu,#sfzbuilder-library header .drop-menu{position:absolute;display:none;list-style-type:none;padding:0;background-color:rgba(0,0,0,0.8);color:#999;width:150px}header#pedalboard-actions .drop-menu:hover,#bank-library header .drop-menu:hover,#cloud-plugins-library header .drop-menu:hover,#patchstorage-library header .drop-menu:hover,#patchstorage-pedalboards-library header .drop-menu:hover,#patchstorage-hub header .drop-menu:hover,#pedalboards-library header .drop-menu:hover,#file-manager-library header .drop-menu:hover,#sfzbuilder-library header .drop-menu:hover{display:block}header#pedalboard-actions .drop-menu li,#bank-library header .drop-menu li,#cloud-plugins-library header .drop-menu li,#patchstorage-library header .drop-menu li,#patchstorage-pedalboards-library header .drop-menu li,#patchstorage-hub header .drop-menu li,#pedalboards-library header .drop-menu li,#file-manager-library header .drop-menu li,#sfzbuilder-library header .drop-menu li{padding:5px 20px}header#pedalboard-actions .drop-menu li:hover,#bank-library header .drop-menu li:hover,#cloud-plugins-library header .drop-menu li:hover,#patchstorage-library header .drop-menu li:hover,#patchstorage-pedalboards-library header .drop-menu li:hover,#patchstorage-hub header .drop-menu li:hover,#pedalboards-library header .drop-menu li:hover,#file-manager-library header .drop-menu li:hover,#sfzbuilder-library header .drop-menu li:hover{color:white;background-color:#883996}header#pedalboard-actions .drop-menu .sub-menu,#bank-library header .drop-menu .sub-menu,#cloud-plugins-library header .drop-menu .sub-menu,#patchstorage-library header .drop-menu .sub-menu,#patchstorage-pedalboards-library header .drop-menu .sub-menu,#patchstorage-hub header .drop-menu .sub-menu,#pedalboards-library header .drop-menu .sub-menu,#file-manager-library header .drop-menu .sub-menu,#sfzbuilder-library header .drop-menu .sub-menu{display:none;list-style-type:none;padding:0;position:absolute;left:150px;height:14em;overflow-y:auto;overflow-x:hidden;margin-top:-50px;background-color:rgba(0,0,0,0.8);width:15em;border-left:3px solid #666}header#pedalboard-actions .drop-menu .sub-menu:hover,#bank-library header .drop-menu .sub-menu:hover,#cloud-plugins-library header .drop-menu .sub-menu:hover,#patchstorage-library header .drop-menu .sub-menu:hover,#patchstorage-pedalboards-library header .drop-menu .sub-menu:hover,#patchstorage-hub header .drop-menu .sub-menu:hover,#pedalboards-library header .drop-menu .sub-menu:hover,#file-manager-library header .drop-menu .sub-menu:hover,#sfzbuilder-library header .drop-menu .sub-menu:hover{display:block}header#pedalboard-actions .menu-trigger:hover+.drop-menu,#bank-library header .menu-trigger:hover+.drop-menu,#cloud-plugins-library header .menu-trigger:hover+.drop-menu,#patchstorage-library header .menu-trigger:hover+.drop-menu,#patchstorage-pedalboards-library header .menu-trigger:hover+.drop-menu,#patchstorage-hub header .menu-trigger:hover+.drop-menu,#pedalboards-library header .menu-trigger:hover+.drop-menu,#file-manager-library header .menu-trigger:hover+.drop-menu,#sfzbuilder-library header .menu-trigger:hover+.drop-menu{display:block}header#pedalboard-actions .sub-menu-trigger:hover ul,#bank-library header .sub-menu-trigger:hover ul,#cloud-plugins-library header .sub-menu-trigger:hover ul,#patchstorage-library header .sub-menu-trigger:hover ul,#patchstorage-pedalboards-library header .sub-menu-trigger:hover ul,#patchstorage-hub header .sub-menu-trigger:hover ul,#pedalboards-library header .sub-menu-trigger:hover ul,#file-manager-library header .sub-menu-trigger:hover ul,#sfzbuilder-library header .sub-menu-trigger:hover ul{display:block}header#pedalboard-actions button,#bank-library header button,#cloud-plugins-library header button,#patchstorage-library header button,#patchstorage-pedalboards-library header button,#patchstorage-hub header button,#pedalboards-library header button,#file-manager-library header button,#sfzbuilder-library header button{background-position:8px 50%;background-size:25px;background-repeat:no-repeat;padding:0 12px 0 40px;background-color:transparent;border:none;height:45px;line-height:45px;opacity:.66;color:white;transition:all .33s}header#pedalboard-actions button:hover,#bank-library header button:hover,#cloud-plugins-library header button:hover,#patchstorage-library header button:hover,#patchstorage-pedalboards-library header button:hover,#patchstorage-hub header button:hover,#pedalboards-library header button:hover,#file-manager-library header button:hover,#sfzbuilder-library header button:hover,header#pedalboard-actions button.selected,#bank-library header button.selected,#cloud-plugins-library header button.selected,#patchstorage-library header button.selected,#patchstorage-pedalboards-library header button.selected,#patchstorage-hub header button.selected,#pedalboards-library header button.selected,#file-manager-library header button.selected,#sfzbuilder-library header button.selected{opacity:1;background-color:black}header#pedalboard-actions button.js-save,#bank-library header button.js-save,#cloud-plugins-library header button.js-save,#patchstorage-library header button.js-save,#patchstorage-pedalboards-library header button.js-save,#patchstorage-hub header button.js-save,#pedalboards-library header button.js-save,#file-manager-library header button.js-save,#sfzbuilder-library header button.js-save{background-image:url(../img/icons/25/save.png)}header#pedalboard-actions button.js-save-as,#bank-library header button.js-save-as,#cloud-plugins-library header button.js-save-as,#patchstorage-library header button.js-save-as,#patchstorage-pedalboards-library header button.js-save-as,#patchstorage-hub header button.js-save-as,#pedalboards-library header button.js-save-as,#file-manager-library header button.js-save-as,#sfzbuilder-library header button.js-save-as{background-image:url(../img/icons/25/save.png)}header#pedalboard-actions button.js-preset,#bank-library header button.js-preset,#cloud-plugins-library header button.js-preset,#patchstorage-library header button.js-preset,#patchstorage-pedalboards-library header button.js-preset,#patchstorage-hub header button.js-preset,#pedalboards-library header button.js-preset,#file-manager-library header button.js-preset,#sfzbuilder-library header button.js-preset{background-image:url(../img/icons/36/presets.png);background-size:30px 30px}header#pedalboard-actions button#js-preset-enabler:hover,#bank-library header button#js-preset-enabler:hover,#cloud-plugins-library header button#js-preset-enabler:hover,#patchstorage-library header button#js-preset-enabler:hover,#patchstorage-pedalboards-library header button#js-preset-enabler:hover,#patchstorage-hub header button#js-preset-enabler:hover,#pedalboards-library header button#js-preset-enabler:hover,#file-manager-library header button#js-preset-enabler:hover,#sfzbuilder-library header button#js-preset-enabler:hover,header#pedalboard-actions button#js-preset-enabler.selected,#bank-library header button#js-preset-enabler.selected,#cloud-plugins-library header button#js-preset-enabler.selected,#patchstorage-library header button#js-preset-enabler.selected,#patchstorage-pedalboards-library header button#js-preset-enabler.selected,#patchstorage-hub header button#js-preset-enabler.selected,#pedalboards-library header button#js-preset-enabler.selected,#file-manager-library header button#js-preset-enabler.selected,#sfzbuilder-library header button#js-preset-enabler.selected{background-color:#883996}header#pedalboard-actions button.js-reset,#bank-library header button.js-reset,#cloud-plugins-library header button.js-reset,#patchstorage-library header button.js-reset,#patchstorage-pedalboards-library header button.js-reset,#patchstorage-hub header button.js-reset,#pedalboards-library header button.js-reset,#file-manager-library header button.js-reset,#sfzbuilder-library header button.js-reset{background-image:url(../img/icons/25/new.png)}header#pedalboard-actions button.js-reset:hover,#bank-library header button.js-reset:hover,#cloud-plugins-library header button.js-reset:hover,#patchstorage-library header button.js-reset:hover,#patchstorage-pedalboards-library header button.js-reset:hover,#patchstorage-hub header button.js-reset:hover,#pedalboards-library header button.js-reset:hover,#file-manager-library header button.js-reset:hover,#sfzbuilder-library header button.js-reset:hover,header#pedalboard-actions button.js-reset.selected,#bank-library header button.js-reset.selected,#cloud-plugins-library header button.js-reset.selected,#patchstorage-library header button.js-reset.selected,#patchstorage-pedalboards-library header button.js-reset.selected,#patchstorage-hub header button.js-reset.selected,#pedalboards-library header button.js-reset.selected,#file-manager-library header button.js-reset.selected,#sfzbuilder-library header button.js-reset.selected{background-color:#883996}header#pedalboard-actions button.js-cv-addressing,#bank-library header button.js-cv-addressing,#cloud-plugins-library header button.js-cv-addressing,#patchstorage-library header button.js-cv-addressing,#patchstorage-pedalboards-library header button.js-cv-addressing,#patchstorage-hub header button.js-cv-addressing,#pedalboards-library header button.js-cv-addressing,#file-manager-library header button.js-cv-addressing,#sfzbuilder-library header button.js-cv-addressing{background-image:url(../img/icons/25/cv.png)}header#pedalboard-actions button.js-cv-addressing:hover,#bank-library header button.js-cv-addressing:hover,#cloud-plugins-library header button.js-cv-addressing:hover,#patchstorage-library header button.js-cv-addressing:hover,#patchstorage-pedalboards-library header button.js-cv-addressing:hover,#patchstorage-hub header button.js-cv-addressing:hover,#pedalboards-library header button.js-cv-addressing:hover,#file-manager-library header button.js-cv-addressing:hover,#sfzbuilder-library header button.js-cv-addressing:hover,header#pedalboard-actions button.js-cv-addressing.selected,#bank-library header button.js-cv-addressing.selected,#cloud-plugins-library header button.js-cv-addressing.selected,#patchstorage-library header button.js-cv-addressing.selected,#patchstorage-pedalboards-library header button.js-cv-addressing.selected,#patchstorage-hub header button.js-cv-addressing.selected,#pedalboards-library header button.js-cv-addressing.selected,#file-manager-library header button.js-cv-addressing.selected,#sfzbuilder-library header button.js-cv-addressing.selected{background-color:#883996}header#pedalboard-actions button.js-cloud,#bank-library header button.js-cloud,#cloud-plugins-library header button.js-cloud,#patchstorage-library header button.js-cloud,#patchstorage-pedalboards-library header button.js-cloud,#patchstorage-hub header button.js-cloud,#pedalboards-library header button.js-cloud,#file-manager-library header button.js-cloud,#sfzbuilder-library header button.js-cloud{background-image:url(../img/icn-share.png);background-size:32px;background-position:5px center}header#pedalboard-actions h1,#bank-library header h1,#cloud-plugins-library header h1,#patchstorage-library header h1,#patchstorage-pedalboards-library header h1,#patchstorage-hub header h1,#pedalboards-library header h1,#file-manager-library header h1,#sfzbuilder-library header h1{font-weight:2em;text-transform:uppercase;font-weight:normal;color:#999;display:inline-block;font-size:24px;line-height:49px;height:45px;padding:0}header#pedalboard-actions{box-shadow:0 2px 12px black}.tooltip{background:white;bottom:50px;height:auto;padding:7px;position:absolute}.tooltip .text{color:#222222;font-weight:bold;line-height:1;text-align:center}.tooltip .arrow{border-bottom:9px solid transparent;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid white;height:0;position:absolute;bottom:-18px;right:14px;width:0}#mod-devices-window,#mod-upgrade{background:white;color:black;font-size:15px;max-height:350px;overflow:auto;position:absolute;right:10px;bottom:50px;z-index:100}#mod-devices-window .progressbar-wrapper,#mod-upgrade .progressbar-wrapper{border:1px solid #444444;height:20px;width:330px}#mod-devices-window .progressbar,#mod-upgrade .progressbar{background-color:#8888ff;height:18px}#mod-devices-window{max-width:600px;min-width:500px}#mod-upgrade{max-width:450px;min-width:350px}#mod-transport-window{bottom:48px;right:310px;top:initial;left:initial;background:rgba(17,17,17,0.9);padding:50px 40px 15px 40px;z-index:999}#mod-transport-window .mod-midi-icon{width:auto !important;padding-left:25px;background-position:5% 45% !important;background-image:url(../img/icons/25/midi.png);background-size:15px;background-repeat:no-repeat}#plugins-library{bottom:45px;height:166px;left:0;position:absolute;right:0;transition:all .33s;transition:opacity .5s;transition:height .5s}#plugins-library.folded{height:38px}#plugins-library.folded #plugins-library-settings-window{bottom:0}#plugins-library.fade{opacity:.2}#plugins-library .fold{cursor:pointer;display:block !important;float:right;height:36px;position:absolute;top:0;right:0;width:36px;background-color:rgba(17,17,17,0.66);background-image:url(../img/icons/25/pinned.png);background-position:center center;background-repeat:no-repeat}#plugins-library .folded{cursor:pointer;display:block;float:right;height:36px;position:absolute;top:0;right:0;width:36px}#plugins-library.auto .fold{background-image:url(../img/icons/25/autohide.png)}#plugins-library .settings{background-color:rgba(17,17,17,0.66);background-image:url(../img/icn-search-white.png);background-position:center center;background-repeat:no-repeat;cursor:pointer;display:block;height:36px;position:absolute;right:37px;top:0;width:36px}#plugins-library #plugins-library-settings-window{background-color:rgba(17,17,17,0.66);bottom:130px;color:#fff;position:absolute;right:74px;transition:bottom .5s}#plugins-library #plugins-library-settings-window h1{padding:0}#plugins-library #plugins-library-settings-window form{padding:4px;border:0;margin:0}#plugins-library #plugins-library-settings-window label{margin-right:10px}#plugins-library #plugins-library-settings-window label.checkbox:last-child{margin-right:0}#plugins-library #plugins-library-settings-window .control-group{position:relative}#plugins-library #plugins-library-settings-window input{width:120px;height:28px;line-height:28px;padding:0 6px;outline:0;border:0}#plugins-library #plugins-library-settings-window .input-clean{position:absolute;top:50%;right:8px;bottom:auto;left:auto;transform:translateY(-50%);margin:0 !important;border-radius:100%}#plugins-library ul{list-style:none;margin:6px 73px 0 0;overflow:hidden;padding:10px 0 0 0;position:relative;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}#plugins-library ul li{background:rgba(17,17,17,0.66);color:#bbb;cursor:pointer !important;display:inline-block;float:left;font-size:11px;margin:0 1px 0 0;padding:3px 11px;text-shadow:1px 1px 0 #000;text-transform:uppercase;border-top:solid 3px transparent;transition-property:border-radius,color,margin-top,padding,border-top;transition-duration:.33s}#plugins-library ul li:hover{margin-top:-6px;padding:6px 11px;color:white}#plugins-library ul li.selected{color:white;font-weight:bold;margin-top:-6px;padding:6px 11px;border-top:solid 3px #883996}#plugins-library.scrolling .plugins-wrapper{transition:all .1s !important}#plugins-library #plugins-list{background:rgba(17,17,17,0.66);height:140px;overflow:hidden;position:relative;width:100%;z-index:1}#plugins-library #plugins-list .nav{background:url(../img/nav-left.png) 50% 50% no-repeat;cursor:pointer;position:absolute;top:0;width:50px;height:100%;opacity:.66}#plugins-library #plugins-list .nav:hover{opacity:1}#plugins-library #plugins-list .nav-left{left:0}#plugins-library #plugins-list .nav-right{background:url(../img/nav-right.png) 50% 50% no-repeat;right:0}#plugins-library #plugins-list #plugins-results{bottom:0;left:50px;position:absolute;overflow:hidden;right:50px;top:0}#plugins-library #plugins-list .plugins-wrapper{position:absolute;display:inline-block;white-space:nowrap;transition:all .5s;top:120px;left:0;opacity:0}#plugins-library #plugins-list .plugins-wrapper.selected{top:0;opacity:1}#plugins-library #plugins-list .plugins-wrapper .plugin{color:#fff;font-size:11px;font-weight:bold;height:108px;padding:14px 12px 10px;position:relative;text-align:center;display:inline-block}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb{height:67px;cursor:pointer !important;position:relative;display:flex;flex-direction:column;justify-content:center}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb:active{cursor:-webkit-grabbing !important;cursor:grabbing !important}#plugins-library #plugins-list .plugins-wrapper .plugin .thumb img{height:auto;margin:0 auto 3px;width:auto;pointer-events:none;max-width:256px;max-height:64px}#plugins-library #plugins-list .plugins-wrapper .plugin .status{display:block;height:16px;margin:0 auto;width:16px}#plugins-library #plugins-list .plugins-wrapper .plugin .status.demo{display:inline-block;width:auto;height:auto;margin:0}#plugins-library #plugins-list .plugins-wrapper .plugin .status.installed{background-image:url(../img/icn-installed.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .status.outdated{background-image:url(../img/icn-outdated.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .status.blocked{background-image:url(../img/icn-blocked.png);background-position:center center;background-repeat:no-repeat}#plugins-library #plugins-list .plugins-wrapper .plugin .author{display:block;line-height:1.5}#plugins-library #plugins-list .plugins-wrapper .plugin .title{display:block;line-height:1.25}#plugins-library #plugins-list .plugins-wrapper .plugin .rating{background-image:url(../img/icn-rating.png);background-position:center top;background-repeat:no-repeat;display:block;height:16px;width:132px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.one{background-position:center -15px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.two{background-position:center -30px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.three{background-position:center -45px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.four{background-position:center -60px}#plugins-library #plugins-list .plugins-wrapper .plugin .rating.five{background-position:center -75px}#plugins-library #plugins-list .plugins-wrapper .plugin .downloads{display:block}#plugins-library #plugins-list .plugins-wrapper .plugin .demo-container{position:absolute;left:0;bottom:3px;right:0;text-align:center}.plugin-info{background-color:rgba(20,20,20,0.9);bottom:0;color:#ccc;left:0;overflow-y:scroll;position:fixed;right:0;top:0;z-index:40}.plugin-info .box{margin-top:3em;margin-bottom:3em;background-color:#111;padding:15px;border:2px solid #333}.plugin-info .box .row-fluid{position:relative}.plugin-info .close{color:#fff;font-size:12px;font-weight:bold;opacity:1;position:absolute;right:10px;text-shadow:none;text-transform:uppercase;top:10px}.plugin-info .screenshot{padding:18px;min-width:3em;min-height:9em;display:inline-block;z-index:0}.plugin-info .screenshot div.beta{background-color:#FF2927;font-family:"cooper hewitt",sans-serif;font-weight:700;padding:5px 10px;color:white;position:absolute;top:18px;left:30px;font-size:16px}.plugin-info .screenshot img{max-width:100%}.plugin-info figure{position:relative;min-height:1px;padding-right:15px;padding-left:15px}@media (min-width:992px){.plugin-info figure{float:left;width:33.33333333%}}.plugin-info figure:hover{z-index:10 !important}.plugin-info .plugin-description{position:relative;min-height:1px;padding-right:15px;padding-left:15px;height:100%;display:block;position:a;padding-left:45px;background:-moz-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-webkit-gradient(linear, left top, right top, color-stop(1em, rgba(17,17,17,0.1)), color-stop(2em, #111));background:-webkit-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-o-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:-ms-linear-gradient(left, rgba(17,17,17,0.1) 1em, #111 2em);background:linear-gradient(to right, rgba(17,17,17,0.1) 1em, #111 2em);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1)}@media (min-width:992px){.plugin-info .plugin-description{float:left;width:58.33333333%}}.plugin-info .plugin-description>p{font-size:16px;margin-bottom:27px;white-space:pre-wrap}.plugin-info header{padding:18px 0 0}.plugin-info header h1{display:inline-block;vertical-align:middle;color:#fff;font-size:27px;font-weight:bold;line-height:1;margin:0;padding:0}.plugin-info header h1 span{font-size:16px;line-height:1;margin:0;padding:0}.plugin-info .version{color:#ccc;font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info .version span.bold{color:#fff;font-size:14px}.plugin-info .version button{font-weight:bold;margin-top:6px;text-transform:uppercase}.plugin-info .rating{background:url(../img/icn-rating.png) no-repeat -12px top;display:inline-block;height:14px;width:84px}.plugin-info .rating.one{background:url(../img/icn-rating.png) no-repeat -12px -15px}.plugin-info .rating.two{background:url(../img/icn-rating.png) no-repeat -12px -30px}.plugin-info .rating.three{background:url(../img/icn-rating.png) no-repeat -12px -45px}.plugin-info .rating.four{background:url(../img/icn-rating.png) no-repeat -12px -60px}.plugin-info .rating.five{background:url(../img/icn-rating.png) no-repeat -12px -75px}.plugin-info .rating-label{color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info .my-rate{width:15px;height:15px;margin:0;padding:0;float:left;cursor:pointer}.plugin-info .plugin-specs{text-align:center;width:100%;border-color:#333}.plugin-info .plugin-specs th{background:#333;color:#fff;border-color:#333;text-align:center}.plugin-info .plugin-specs td{border-color:#333}.plugin-info .plugin-specs td:first-child{width:40%}.plugin-info .plugin-specs td:not(first-child){width:20%}.plugin-info .comments-reviews{border-top:1px solid #333;margin-top:10px;padding-top:10px}.plugin-info .comments-reviews h1{color:#fff;font-size:21px;line-height:2;margin:0;padding:0}.plugin-info .reviews{border-bottom:1px solid #333;margin:9px 0 18px 0;padding:9px 0 18px 0}.plugin-info article.review{margin:18px 0}.plugin-info article.review h1{color:#fff;font-size:14px}.plugin-info article.review h1 .rating{margin-left:6px}.plugin-info article.review h1 .rating-label{color:#ccc;display:inline;font-size:12px;font-weight:normal;margin-left:6px}.plugin-info article.review .bar{background:#333;display:block;height:12px;margin:2px 6px 0;position:relative;width:100px}.plugin-info article.review .progress-bar{background:#444;bottom:0;display:block;height:10px;left:0;margin:1px;position:absolute;right:0;top:0;width:50%}.plugin-info article.review .rating-number{display:block;font-size:12px;margin-top:-1px}.plugin-info article.comment{border-top:1px solid #333;margin:18px 0 0;padding:18px 0 0}.plugin-info article.comment h1{color:#fff;font-size:16px;line-height:1}.plugin-info article.comment h1 .date{color:#ccc;font-size:12px;font-weight:normal;margin-left:6px}.plugin-info .comments{margin:18px 0;padding:18px 0}.plugin-info .comments button{margin-top:18px}.plugin-info form.comment-form{border-top:1px solid #333;margin:18px 0;padding:18px 0}.plugin-info form.comment-form label{font-size:12px;font-weight:bold;text-transform:uppercase}.plugin-info form.comment-form textarea{height:180px}.plugin-info .favorite-button{display:inline-block;vertical-align:middle;width:30px;height:30px;background:url(../img/icons/25/star-border.png) no-repeat center center;cursor:pointer;opacity:.5}.plugin-info .favorite-button:hover{opacity:.8}.plugin-info .favorite-button.favorite{opacity:1;background:url(../img/icons/25/star.png) no-repeat center center}.plugin-info .favorite-button.favorite:hover{opacity:1}.plugin-info .online-button-href{display:inline-block;margin-bottom:10px}.plugin-info .status.demo{display:inline-block;padding:4px 8px;margin:2px 0;font-size:.8em}.clearfix:after,.container:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.clearfix,.container,.dl-horizontal dd,.container,.container-fluid,.row,.form-horizontal .form-group,.btn-toolbar,.btn-group-vertical>.btn-group,.nav,.navbar,.navbar-header,.navbar-collapse,.pager,.panel-body{display:block}.clear{clear:both}.blend{opacity:.25}.box{padding:10px}.alignleft{float:left}.alignright{float:right}.textcenter{text-align:center}.textright{text-align:right}.bottom{margin-bottom:0 !important;padding-bottom:0 !important}.left{margin-left:0 !important;padding-left:0 !important}.right{margin-right:0 !important;padding-right:0 !important}.top{margin-top:0 !important;padding-top:0 !important}.nobullets{list-style:none}.mod-hidden{display:none}.mod-init-hidden{opacity:0}::selection{background:transparent}.mod-box{background:white;left:50%;margin:-150px -168px;padding:18px;position:absolute;top:50%;width:300px}.mod-box:not(#midi-ports-box) label{display:inline-block;float:left;line-height:2;width:96px}.mod-box .mod-controls{float:left}.mod-box input[type="text"]{width:190px}.mod-box input[type="password"]{width:190px}.blocker{background:rgba(17,17,17,0.9);color:white;display:block;position:fixed;width:100% !important;height:100% !important;top:0;left:0;text-align:center;z-index:99999}.blocker p{position:absolute;top:50%;width:100%;margin-top:56px;font-size:24px}.blocker.screen-disconnected{background:rgba(17,17,17,0.9) url(../img/icons/blocked.svg) 50% 50% no-repeat;background-size:100px 100px}.blocker.screen-disconnected .button{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:120px}.plugin-wait{background:url(../img/loading-effect.gif) no-repeat center center;border:1px solid #CCCCCC}.button{background:#883996;color:white;display:inline-block;cursor:pointer;line-height:25px;padding:5px 15px;transition:all .33s;border:none}.button:hover{background-color:#F29446;box-shadow:0 1px 5px black}.button.icon{padding-left:40px;background-position:10px 50%;background-repeat:no-repeat;background-size:25px}.drag-handle{bottom:0;cursor:-webkit-grabbing !important;cursor:grabbing !important;left:0;position:absolute;right:0;top:0;z-index:20}.demo-plugin{background:url("/img/trial.svg") no-repeat center center;background-size:contain;opacity:.4;z-index:11 !important}.demo-mask{width:100%;height:100%;left:0;right:0;top:0;bottom:0;position:absolute}.demo-plugin-light{opacity:.1 !important}.actions{z-index:20}@keyframes flashlight{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 10px white}100%{box-shadow:0 0 0 transparent}}.alert{background:rgba(17,17,17,0.9);border-width:0 0 0 6px;border-color:#883996;color:white;box-shadow:0 3px 10px black;margin-top:5px !important}.alert .js-close{color:white}.alert-warning{border-color:#F29446}.alert-danger{border-color:#c00}#go-back{width:200px;text-align:left;margin:20px 0 0 0;background:none;border:none;font-size:15px;padding:5px;color:#fff !important}#go-back span{font-family:fontello !important}#go-back span:before{content:'\e804'}#go-back:hover{text-decoration:none}.unstable-warning{float:left;background-color:#ffebb1;padding:5px;border-radius:10px}.blokas header#pedalboard-actions,.blokas #bank-library header,.blokas #cloud-plugins-library header,.blokas #patchstorage-library header,.blokas #patchstorage-pedalboards-library header,.blokas #patchstorage-hub header,.blokas #pedalboards-library header,.blokas #file-manager-library header,.blokas #sfzbuilder-library header{background-image:none !important;padding-left:10px !important}.blokas #pedalboard-info{left:10px !important}.blokas path.loadinglogo{display:none !important}.blokas #pedalboards-library .pedalboards,.blokas #bank-library #bank-edit,.blokas #file-manager-library,.blokas #patchstorage-library .patchstorage-plugins,.blokas #patchstorage-pedalboards-library .patchstorage-plugins,.blokas #cloud-plugins-library .cloud-plugins{background-image:none !important}.blokas #blokas-update{background-image:url(../img/icons/36/update.png)}.blokas #blokas-update.uptodate{background-image:url(../img/icons/36/ok.png)}
\ No newline at end of file
diff --git a/html/css/patchstorage-pedalboards.css b/html/css/patchstorage-pedalboards.css
new file mode 100644
index 000000000..f812e95c6
--- /dev/null
+++ b/html/css/patchstorage-pedalboards.css
@@ -0,0 +1,322 @@
+/* Patchstorage hub + pedalboards library (supplemental to main.css) */
+
+#cloud_update_all,
+#patchstorage_update_all,
+#patchstorage_pedalboards_update_all {
+  background-image: url(../img/icons/36/update.png);
+  float: right;
+  font-size: 21px;
+}
+
+#patchstorage-hub header,
+#patchstorage-pedalboards-library header {
+  display: block;
+  left: 0;
+  height: 45px;
+  line-height: 45px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 5;
+  box-shadow: 0 1px 10px rgba(0,0,0,.1);
+  background-color: #111;
+  background-position: 3px 50%;
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-image: url(../img/icons/36/mod.png);
+  padding-left: 45px;
+}
+
+.blokas #patchstorage-hub header,
+.blokas #patchstorage-pedalboards-library header {
+  background-image: none !important;
+  padding-left: 10px !important;
+}
+
+.blokas #patchstorage-pedalboards-library .patchstorage-plugins {
+  background-image: none !important;
+}
+
+#patchstorage-pedalboards-library .ps-label {
+  border: 1px solid #e53935;
+  background: #e53935;
+}
+
+/* Back button shared by plugins / pedalboards pages */
+.ps-back-btn {
+  float: left;
+  margin: 8px 12px 0 0;
+  height: 28px;
+  line-height: 28px;
+  padding: 0 12px;
+  border: 1px solid #444;
+  border-radius: 2px;
+  background: #222;
+  color: #ddd;
+  font-size: 13px;
+  cursor: pointer;
+}
+.ps-back-btn:hover {
+  background: #000;
+  border-color: #03a9f4;
+  color: #fff;
+}
+
+/* Hub selection page */
+#patchstorage-hub {
+  background: #2c2c2c;
+  bottom: 45px;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+#patchstorage-hub h1 {
+  color: #fff;
+  display: inline-block;
+  font-size: 24px;
+  line-height: 35px;
+  margin: 0;
+  padding: 0;
+}
+#patchstorage-hub .ps-hub-content {
+  position: fixed;
+  top: 45px;
+  bottom: 45px;
+  left: 0;
+  right: 0;
+  padding: 48px 40px;
+  background: #111 url(../img/watermark.png) 100% 100% no-repeat;
+  overflow-y: auto;
+}
+#patchstorage-hub .ps-hub-intro {
+  color: #aaa;
+  font-size: 15px;
+  margin: 0 0 28px 0;
+  max-width: 520px;
+}
+#patchstorage-hub .ps-hub-assets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  max-width: 760px;
+}
+#patchstorage-hub .ps-hub-asset {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  width: 340px;
+  min-height: 96px;
+  padding: 18px 20px;
+  border: 1px solid #333;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.07);
+  color: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.25s, border-color 0.25s;
+}
+#patchstorage-hub .ps-hub-asset:hover {
+  background: #000;
+  border-color: #03a9f4;
+}
+#patchstorage-hub .ps-hub-icon {
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-size: 26px;
+  font-weight: 700;
+  border-radius: 4px;
+  color: #fff;
+}
+#patchstorage-hub .ps-hub-icon-plugins {
+  background: #03a9f4;
+}
+#patchstorage-hub .ps-hub-icon-pedalboards {
+  background: #e53935;
+}
+#patchstorage-hub .ps-hub-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#patchstorage-hub .ps-hub-label {
+  font-size: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+#patchstorage-hub .ps-hub-desc {
+  font-size: 13px;
+  color: #aaa;
+  line-height: 1.35;
+}
+
+/* Share on Patchstorage: above the library windows and the pedalboard info window */
+#patchstorage-share-window {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3000;
+  background: rgba(0,0,0,.75);
+}
+
+#patchstorage-share-window .ps-share-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 460px;
+  max-width: calc(100% - 20px);
+  max-height: calc(100% - 20px);
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 18px;
+  background: #2c2c2c;
+  color: #ddd;
+  font-size: 13px;
+}
+
+#patchstorage-share-window h1 {
+  margin: 0 0 14px 0;
+  font-size: 18px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #fff;
+}
+
+#patchstorage-share-window .close {
+  float: right;
+  color: #fff;
+  opacity: .7;
+  cursor: pointer;
+}
+
+#patchstorage-share-window .ps-share-step {
+  display: none;
+}
+
+#patchstorage-share-window a {
+  color: #36a6db;
+}
+
+#patchstorage-share-window label {
+  display: block;
+  margin: 0 0 10px 0;
+  font-weight: normal;
+  color: #aaa;
+}
+
+#patchstorage-share-window input[type=text],
+#patchstorage-share-window input[type=password],
+#patchstorage-share-window textarea,
+#patchstorage-share-window select {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 3px;
+  padding: 5px 7px;
+  border: 1px solid #555;
+  background: #1c1c1c;
+  color: #fff;
+  font-size: 13px;
+}
+
+#patchstorage-share-window textarea {
+  resize: vertical;
+}
+
+#patchstorage-share-window .ps-share-row {
+  display: flex;
+  gap: 12px;
+}
+
+#patchstorage-share-window .ps-share-row label {
+  flex: 1;
+}
+
+#patchstorage-share-window .ps-share-artwork {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+#patchstorage-share-window .ps-share-artwork img {
+  width: 120px;
+  height: 68px;
+  object-fit: contain;
+  background: #1c1c1c;
+  border: 1px solid #555;
+}
+
+#patchstorage-share-window .ps-share-artwork span,
+#patchstorage-share-window .ps-share-artwork small {
+  display: block;
+  margin-bottom: 4px;
+  color: #aaa;
+}
+
+#patchstorage-share-window .ps-share-confirm {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  color: #ddd;
+}
+
+#patchstorage-share-window .ps-share-confirm input {
+  flex: none;
+  margin: 2px 0 0 0;
+}
+
+#patchstorage-share-window .ps-share-required {
+  margin: 0 0 6px 0;
+  font-size: 11px;
+  color: #888;
+}
+
+#patchstorage-share-window .ps-share-mode {
+  margin-bottom: 12px;
+  padding: 8px 10px;
+  background: #1c1c1c;
+}
+
+#patchstorage-share-window .ps-share-mode label {
+  margin: 4px 0;
+  color: #ddd;
+}
+
+#patchstorage-share-window .ps-share-mode input,
+#patchstorage-share-window .ps-share-mode input[type=radio] {
+  display: inline;
+  width: auto;
+  margin: 0 6px 0 0;
+}
+
+#patchstorage-share-window .ps-share-account,
+#patchstorage-share-window .ps-share-note {
+  margin-bottom: 12px;
+}
+
+#patchstorage-share-window .ps-share-note {
+  color: #e8b04c;
+}
+
+#patchstorage-share-window .ps-share-error {
+  min-height: 1em;
+  color: #ff6b6b;
+}
+
+#patchstorage-share-window .ps-share-actions {
+  text-align: right;
+}
+
+#patchstorage-share-window .ps-share-actions .btn {
+  margin-left: 6px;
+}
diff --git a/html/img/patchstorage-pedalboards-menu.png b/html/img/patchstorage-pedalboards-menu.png
new file mode 100644
index 000000000..2b2da2ca3
Binary files /dev/null and b/html/img/patchstorage-pedalboards-menu.png differ
diff --git a/html/include/patchstorage_pedalboard.html b/html/include/patchstorage_pedalboard.html
new file mode 100644
index 000000000..35b18040e
--- /dev/null
+++ b/html/include/patchstorage_pedalboard.html
@@ -0,0 +1,24 @@
+<div class="cloud-plugin plugin-container available-plugin js-available-effect" mod-role="cloud-plugin" mod-uri="{{uri}}">
+    <div class="cloud-plugin-border">
+        <figure class="thumb">
+            <img src="{{thumbnail_href}}" />
+        </figure>
+        <div class="description">
+            <span class="title">{{label}}</span>
+            <span class="author">{{brand}}</span>
+            <hr class="dotted" />
+            <p class="{{has_comment}}">{{comment}}<span class="limiter"></span></p>
+        </div>
+        <div class="status-container">
+            {{#download_count}}
+            <span class="status downloads" title="Pedalboard Downloads">&#129095; {{download_count}}</span>
+            {{/download_count}}
+            {{#state}}
+            <span class="status state {{state}}" title="Pedalboard State"></span>
+            {{/state}}
+            {{#status}}
+            <span class="status {{status}}" title="Pedalboard Status"></span>
+            {{/status}}
+        </div>
+    </div>
+</div>
diff --git a/html/include/patchstorage_pedalboard_info.html b/html/include/patchstorage_pedalboard_info.html
new file mode 100644
index 000000000..85c01580d
--- /dev/null
+++ b/html/include/patchstorage_pedalboard_info.html
@@ -0,0 +1,73 @@
+<div class="js-close patchstorage-info patchstorage-pedalboard-info plugin-container" mod-uri="{{escaped_uri}}">
+    <div class="container box">
+        <div class="row-fluid clearfix">
+          <span class="js-close alignright btn btn-mini btn-danger">Close</span>
+            <div class="span10 offset1 clearfix">
+                <figure class="screenshot text-center">
+                    {{#state}}
+                    <div class="state {{state}}" title="{{state}}"></div>
+                    {{/state}}
+                    <img src="{{screenshot_href}}">
+                </figure>
+
+                <div class="plugin-description">
+                    <header>
+                      <h1 class="text-uppercase">{{name}}</h1>
+                        <p></p>
+                        <p>
+                            {{#category}}
+                            <b>Category:</b> {{category}}<br/>
+                            {{/category}}
+                            {{#tags}}
+                            <b>Tags:</b> {{tags}}<br/>
+                            {{/tags}}
+                            {{#uploader}}
+                            <b>Uploader:</b> <span style="text-transform: uppercase;">{{uploader}}</span><br/>
+                            {{#link}}
+                            <b>Link:</b> <a href="{{link}}" target="_blank">{{link}}</a><br/>
+                            {{/link}}
+                            {{/uploader}}
+                        </p>
+                        <p class="version">
+                            {{#cloud_revision}}
+                            <span class="js-latest-version">
+                                <span class="ps-label">P</span> Latest Revision: <span class="bold">{{cloud_revision}}</span><br/>
+                            </span>
+                            {{/cloud_revision}}
+                            {{#local_revision}}
+                            <span class="js-installed-version">
+                                <span class="ps-label">P</span> Installed Revision: <span class="bold">{{local_revision}}</span><br/>
+                            </span>
+                            {{/local_revision}}
+                            {{#download_count}}
+                            <span>
+                                <span class="ps-label">P</span> Downloads: <span class="bold">{{download_count}}</span><br/>
+                            </span>
+                            {{/download_count}}
+                            <table><tr><td>
+                            <button class="js-install btn btn-info btn-mini">Install</button>
+                            <button class="js-upgrade btn btn-info btn-mini">Update</button>
+                            <button class="js-remove btn btn-danger btn-mini">Remove</button>
+                            <button class="js-load btn btn-success btn-mini">Load</button>
+                            <button class="js-share btn btn-warning btn-mini">Publish new revision</button>
+                            </td>
+                            </tr></table>
+                        </p>
+                    </header>
+                    <p></p>
+                    <p>{{comment}}</p>
+                    {{#url}}
+                    <a target="_blank" href="{{url}}" class="btn btn-info">
+                        <span>View on Patchstorage</span>
+                    </a>
+                    {{/url}}
+                    {{#donate_url}}
+                    <a target="_blank" href="{{donate_url}}" class="btn btn-info">
+                        <span>Donate to Author</span>
+                    </a>
+                    {{/donate_url}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/html/include/plugin.html b/html/include/plugin.html
index e083a3bee..7e97c7e86 100644
--- a/html/include/plugin.html
+++ b/html/include/plugin.html
@@ -3,7 +3,7 @@
         {{#demo}}
         <div class="demo-plugin demo-mask" title="This plugin is for demo purposes only and shall not be used live or in a studio"></div>
         {{/demo}}
-        <img src="{{{thumbnail_href}}}">
+        <img data-src="{{{thumbnail_href}}}" height="67">
     </div>
     <span class="title">{{{label}}}</span>
     <span class="author">{{{brand}}}</span>
diff --git a/html/index.html b/html/index.html
index d9e211e3e..a479595bc 100644
--- a/html/index.html
+++ b/html/index.html
@@ -31,6 +31,7 @@
 
 <link rel="stylesheet" type="text/css" href="css/fontello/css/fontello.css?v={{version}}"/>
 <link rel="stylesheet" type="text/css" href="css/main.css?v={{version}}"/>
+<link rel="stylesheet" type="text/css" href="css/patchstorage-pedalboards.css?v={{version}}"/>
 <link rel="stylesheet" type="text/css" href="css/dashboard.css?v={{version}}"/>
 <link rel="stylesheet" type="text/css" href="css/fonts.css?v={{version}}"/>
 <link rel="stylesheet" type="text/css" href="img/icons/icons.css?v={{version}}"/>
@@ -70,13 +71,15 @@
     PATCHSTORAGE_API_URL = '{{patchstorage_api_url}}'
     PATCHSTORAGE_PLATFORM_ID = '{{patchstorage_platform_id}}'
     PATCHSTORAGE_TARGET_ID = '{{patchstorage_target_id}}'
+    PATCHSTORAGE_PEDALBOARD_PLATFORM_ID = '{{patchstorage_pedalboard_platform_id}}'
+    PATCHSTORAGE_PEDALBOARD_TAG_ID = '{{patchstorage_pedalboard_tag_id}}'
     BLOKAS_ENABLED = '{{blokas_enabled}}'
     PLUGINS_URL      = '{{plugins_url}}'
     PEDALBOARDS_URL  = '{{pedalboards_url}}'
     PEDALBOARDS_LABS_URL  = '{{pedalboards_labs_url}}'
     CONTROLCHAIN_URL = '{{controlchain_url}}'
     LV2_PLUGIN_DIR   = '{{lv2_plugin_dir}}'
-    VERSION          = '{{version}}'
+    VERSION          = '{{image_version}}'
     BIN_COMPAT       = '{{bin_compat}}'
     PLATFORM         = '{{platform}}'
     var SAMPLERATE   = {{sampleRate}}
@@ -138,7 +141,10 @@
         cloudPluginBox: $('#cloud-plugins-library'),
         cloudPluginBoxTrigger: $('#mod-cloud-plugins'),
         patchstorageBox: $('#patchstorage-library'),
-        patchstorageBoxTrigger: $('#patchstorage'),
+        patchstorageBoxTrigger: $('#main-menu #patchstorage'),
+        patchstorageHub: $('#patchstorage-hub'),
+        patchstoragePedalboardsBox: $('#patchstorage-pedalboards-library'),
+        patchstorageShareWindow: $('#patchstorage-share-window'),
         pedalboardBox: $('#pedalboards-library'),
         pedalboardBoxTrigger: $('#main-menu #mod-pedalboard'),
         bankBox: $('#bank-library'),
@@ -146,6 +152,8 @@
         bankList: $('#bank-list'),
         fileManagerBox: $('#file-manager-library'),
         fileManagerBoxTrigger: $('#main-menu #mod-file-manager'),
+        sfzBuilderBox: $('#sfzbuilder-library'),
+        sfzBuilderBoxTrigger: $('#main-menu #mod-sfzbuilder'),
         shareButton: $('#pedalboard-info .js-cloud'),
         shareWindow: $('#share-window'),
         presetSaveBox: $('#save-preset'),
@@ -160,6 +168,7 @@
         bufferSizeButton: $('#mod-buffersize'),
         xrunsButton: $('#mod-xruns'),
         cpuStatsButton: $('#mod-cpu-stats'),
+        recorderButton: $('#mod-recorder'),
     })
 
     if ('{{bundlepath}}' && '{{title}}') {
@@ -194,7 +203,9 @@
         $('#mod-bypassLeft').hide()
         $('#mod-bypassRight').hide()
         $('#mod-update').hide()
-        $('#pedalboard-info').find('.js-cloud').hide()
+        if (!{{patchstorage_enabled}}) {
+            $('#pedalboard-info').find('.js-cloud').hide()
+        }
 
         // show other stuff to make it less empty
         $('#mod-xruns').show()
@@ -370,9 +381,12 @@
 <script type="text/javascript" src="js/pedalboards.js?v={{version}}"></script>
 <script type="text/javascript" src="js/file_manager.js?v={{version}}"></script>
 <script type="text/javascript" src="js/banks.js?v={{version}}"></script>
+<script type="text/javascript" src="js/sfzbuilder.js?v={{version}}"></script>
 <script type="text/javascript" src="js/effects.js?v={{version}}"></script>
 <script type="text/javascript" src="js/cloudplugin.js?v={{version}}"></script>
 <script type="text/javascript" src="js/patchstorage.js?v={{version}}"></script>
+<script type="text/javascript" src="js/patchstorage_pedalboards.js?v={{version}}"></script>
+<script type="text/javascript" src="js/patchstorage_share.js?v={{version}}"></script>
 <script type="text/javascript" src="js/mididevices.js?v={{version}}"></script>
 <script type="text/javascript" src="js/snapshot.js?v={{version}}"></script>
 <script type="text/javascript" src="js/hardware.js?v={{version}}"></script>
@@ -729,6 +743,7 @@ <h1 class="pull-left">Control Chain Device Update</h1><span class="js-cancel clo
         <div id="mod-pedalboard" class="icon" data-message="Pedalboards Library"></div>
         <div id="mod-bank" class="icon" data-message="Banks"></div>
         <div id="mod-file-manager" class="icon" data-message="File Manager"></div>
+        <div id="mod-sfzbuilder" class="icon" data-message="Sound Bank Builder"></div>
         <div id="mod-cloud-plugins" class="icon" data-message="Plugin Store"></div>
         <div id="patchstorage" class="icon" data-message="Patchstorage"></div>
         <div id="banks-saving">Auto saving banks...</div>
@@ -751,6 +766,7 @@ <h1 class="pull-left">Control Chain Device Update</h1><span class="js-cancel clo
         </div>
         <div id="mod-cpu-stats" class="icon mod-hidden">0 GHz / 0 &deg;C</div>
         <div id="mod-xruns" class="icon mod-hidden">0 Xruns</div>
+        <div id="mod-recorder" class="icon" data-message="Record session audio">Record</div>
         <div id="mod-buffersize" class="icon">{{bufferSize}} frames</div>
         <div id="mod-bypassRight" class="icon mod-bypass">Bypass 2</div>
         <div id="mod-bypassLeft" class="icon mod-bypass">Bypass 1</div>
@@ -912,11 +928,41 @@ <h2>Filtered results</h2>
     </div>
     <!-- END CLOUD PLUGINS LIBRARY -->
 
+    <!-- PATCHSTORAGE HUB (asset type selection) -->
+    <div id="patchstorage-hub" class="mod-hidden mod-init-hidden">
+        <div>
+            <header>
+                <h1 class="bottom top">PATCHSTORAGE</h1>
+            </header>
+            <div class="ps-hub-content">
+                <p class="ps-hub-intro">Choose an asset type to browse and install from Patchstorage.</p>
+                <div class="ps-hub-assets">
+                    <button type="button" class="ps-hub-asset" data-asset="plugins">
+                        <span class="ps-hub-icon ps-hub-icon-plugins">P</span>
+                        <span class="ps-hub-text">
+                            <span class="ps-hub-label">Plugins</span>
+                            <span class="ps-hub-desc">LV2 plugins available on Patchstorage</span>
+                        </span>
+                    </button>
+                    <button type="button" class="ps-hub-asset" data-asset="pedalboards">
+                        <span class="ps-hub-icon ps-hub-icon-pedalboards">P</span>
+                        <span class="ps-hub-text">
+                            <span class="ps-hub-label">Pedalboards</span>
+                            <span class="ps-hub-desc">Pedalboards available on Patchstorage</span>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- END PATCHSTORAGE HUB -->
+
     <!-- PATCHSTORAGE -->
     <div id="patchstorage-library" class="mod-hidden mod-init-hidden">
         <div>
             <header>
-                <h1 class="bottom top">PATCHSTORAGE (Beta)</h1>
+                <button type="button" class="js-ps-back ps-back-btn" title="Back to Patchstorage">Back</button>
+                <h1 class="bottom top">PATCHSTORAGE PLUGINS</h1>
                 <button class="status icon mod-bypass" id="patchstorage_update_all">Refresh</button>
             </header>
 
@@ -987,6 +1033,124 @@ <h2>Filtered results</h2>
     </div>
     <!-- END PATCHSTORAGE -->
 
+    <!-- PATCHSTORAGE PEDALBOARDS -->
+    <div id="patchstorage-pedalboards-library" class="mod-hidden mod-init-hidden">
+        <div>
+            <header>
+                <button type="button" class="js-ps-back ps-back-btn" title="Back to Patchstorage">Back</button>
+                <h1 class="bottom top">PATCHSTORAGE PEDALBOARDS</h1>
+                <button class="status icon mod-bypass" id="patchstorage_pedalboards_update_all">Refresh</button>
+            </header>
+
+            <div class="filter clearfix">
+                <h2>Filter</h2>
+                <div class="control-group">
+                    <input type="checkbox" name="non-installed" id="patchstorage-pb-non-installed" />
+                    <label for="patchstorage-pb-non-installed">NOT INSTALLED</label>
+                </div>
+                <div class="control-group">
+                    <input type="checkbox" name="installed" id="patchstorage-pb-installed" />
+                    <label for="patchstorage-pb-installed">INSTALLED</label>
+                </div>
+                <div class="control-group">
+                    <input type="checkbox" name="outdated" id="patchstorage-pb-outdated"/>
+                    <label for="patchstorage-pb-outdated">OUTDATED</label>
+                </div>
+                <div class="">
+                    <input class="form-control" placeholder="Filter by keyword" type="search" autocomplete="off" />
+                </div>
+                <ul class="categories list list-unstyled" style="margin-bottom: 0px;">
+                    <li id="patchstorage-pedalboards-tab-All" class="selected">All</li>
+                </ul>
+            </div>
+
+            <div class="patchstorage-plugins clearfix js-patchstorage-pedalboards">
+              <div id="patchstorage-pedalboards-results-wrapper">
+                    <h2>Filtered results</h2>
+                    <div id="patch-pedalboard-content-All" class="plugins-wrapper"></div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <!-- END PATCHSTORAGE PEDALBOARDS -->
+
+    <!-- PATCHSTORAGE SHARE WINDOW -->
+    <div id="patchstorage-share-window" class="mod-hidden" tabindex="-1">
+        <div class="ps-share-box">
+            <span class="js-close close">&times;</span>
+            <h1>Share on Patchstorage</h1>
+
+            <div class="ps-share-step js-step-loading">
+                <p class="js-message"></p>
+            </div>
+
+            <form class="ps-share-step js-step-login" autocomplete="on">
+                <p>Log in with your <a href="https://patchstorage.com/" target="_blank">patchstorage.com</a> account.
+                   The pi-Stomp keeps a login token for 7 days, never your password.</p>
+                <label>Username or e-mail <input type="text" name="username" autocomplete="username"/></label>
+                <label>Password <input type="password" name="password" autocomplete="current-password"/></label>
+                <p class="ps-share-error js-error"></p>
+                <div class="ps-share-actions">
+                    <button type="button" class="js-close btn btn-danger">Cancel</button>
+                    <button type="submit" class="btn btn-success">Log in</button>
+                </div>
+            </form>
+
+            <form class="ps-share-step js-step-form">
+                <p class="ps-share-account">Logged in as <b class="js-username"></b> &middot; <a href="#" class="js-logout">Log out</a></p>
+                <div class="ps-share-mode js-mode">
+                    <label><input type="radio" name="mode" value="update"/>
+                        Publish a new revision of <a class="js-patch-link" target="_blank"></a>
+                        (now <span class="js-current-revision"></span>)</label>
+                    <label><input type="radio" name="mode" value="new"/> Share as a new pedalboard</label>
+                </div>
+                <p class="ps-share-note js-not-owned">This pedalboard came from <b class="js-author"></b> on Patchstorage,
+                   so it will be shared as a new pedalboard under your name.</p>
+                <label>Title * <input type="text" name="title" maxlength="100"/></label>
+                <label>Description * <textarea name="content" rows="5"></textarea></label>
+                <div class="ps-share-row">
+                    <label>Revision * <input type="text" name="revision" maxlength="20"/></label>
+                    <label>State * <select name="state"></select></label>
+                </div>
+                <label>Tags * <small>(comma separated)</small> <input type="text" name="tags"/></label>
+                <label>License * <select name="license"></select></label>
+                <label>Preview URL <small class="js-preview-hint"></small>
+                    <input type="text" name="preview_url" maxlength="500"
+                           placeholder="A YouTube, Vimeo or SoundCloud link to a demo"/></label>
+                <!-- only shown when the pedalboard has no screenshot.png to use as artwork -->
+                <div class="ps-share-artwork js-artwork">
+                    <img class="js-artwork-preview" alt=""/>
+                    <div>
+                        <span>Artwork *</span>
+                        <small class="js-artwork-name"></small>
+                        <input type="file" name="artwork" class="mod-hidden"
+                               accept="image/png,image/jpeg,image/gif,image/webp"/>
+                        <button type="button" class="js-artwork-choose btn btn-info btn-mini">Choose image...</button>
+                    </div>
+                </div>
+                <label class="ps-share-confirm"><input type="checkbox" name="confirm" value="1"/>
+                    I confirm that I have the necessary rights to upload and share this content, and that it does
+                    not infringe on any copyrights, trademarks or other third-party rights. *</label>
+                <p class="ps-share-required">* required</p>
+                <p class="ps-share-error js-error"></p>
+                <div class="ps-share-actions">
+                    <button type="button" class="js-close btn btn-danger">Cancel</button>
+                    <button type="submit" class="js-publish btn btn-success">Publish</button>
+                </div>
+            </form>
+
+            <div class="ps-share-step js-step-done">
+                <p>Published revision <b class="js-revision"></b> on Patchstorage.</p>
+                <div class="ps-share-actions">
+                    <a class="js-patch-link btn btn-info" target="_blank">View on Patchstorage</a>
+                    <button type="button" class="js-close btn btn-success">Done</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- END PATCHSTORAGE SHARE WINDOW -->
+
     <!-- PEDALBOARDS LIBRARY -->
     <div id="pedalboards-library" class="mod-hidden mod-init-hidden">
         <div class="box clearfix">
@@ -1115,6 +1279,13 @@ <h1 class="bottom top">File Manager</h1>
     </div></div>
     <!-- END FILE MANAGER -->
 
+    <!-- SFZ SOUND BANK BUILDER -->
+    <!-- The container is empty. html/js/app/sfzbuilder/ makes every element,
+         holds its own stylesheet and knows its own endpoints. See
+         docs/frontend-architecture.md, rule 4.3. -->
+    <div id="sfzbuilder-library" class="mod-hidden mod-init-hidden"></div>
+    <!-- END SFZ SOUND BANK BUILDER -->
+
     <!-- MOD UPDATE/UPGRADE TOOLTIP -->
     <div class="tooltip mod-hidden" style="right:102px;">
         <div class="arrow"></div>
diff --git a/html/js/app/package.json b/html/js/app/package.json
new file mode 100644
index 000000000..3dbc1ca59
--- /dev/null
+++ b/html/js/app/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/html/js/app/sfzbuilder/api.js b/html/js/app/sfzbuilder/api.js
new file mode 100644
index 000000000..1289299fe
--- /dev/null
+++ b/html/js/app/sfzbuilder/api.js
@@ -0,0 +1,160 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * The network calls of the SFZ builder.
+ * This file knows all the URLs. No other file in the island knows them.
+ * @module
+ */
+
+import { jq } from './legacy.js'
+
+/**
+ * @param {string} url
+ * @param {object} [data]
+ * @returns {Promise<any>}
+ */
+function get(url, data) {
+    return Promise.resolve(jq().ajax({
+        url: url,
+        data: data || {},
+        dataType: 'json',
+        cache: false,
+    }))
+}
+
+/**
+ * Gives the names of the banks and how many samples each one holds.
+ * @returns {Promise<{ banks: string[], counts: Record<string, number> }>}
+ */
+export function listBanks() {
+    return get('/sfzbuilder/banks').then((data) => ({
+        banks: data.banks || [],
+        counts: data.counts || {},
+    }))
+}
+
+/**
+ * Gives the base note and the pads of one bank.
+ * @param {string} name
+ * @returns {Promise<any>}
+ */
+export function loadBank(name) {
+    return get('/sfzbuilder/bank', { name: name })
+}
+
+/**
+ * Makes a bank directory.
+ * @param {string} name
+ * @returns {Promise<any>}
+ */
+export function createBank(name) {
+    return Promise.resolve(jq().ajax({
+        url: '/sfzbuilder/bank',
+        type: 'POST',
+        data: JSON.stringify({ name: name }),
+        dataType: 'json',
+        cache: false,
+    }))
+}
+
+/**
+ * Changes the name of a bank.
+ *
+ * The server moves the directory and renames the SFZ file inside it, because
+ * that file carries the name of its bank. The name it gives back is the one
+ * that reached the disk, which is not always the one that was asked for: a
+ * space becomes an underscore.
+ * @param {string} name
+ * @param {string} newName
+ * @returns {Promise<any>}
+ */
+export function renameBank(name, newName) {
+    return Promise.resolve(jq().ajax({
+        url: '/sfzbuilder/bank/rename',
+        type: 'POST',
+        data: JSON.stringify({ name: name, new_name: newName }),
+        dataType: 'json',
+        cache: false,
+    }))
+}
+
+/**
+ * Removes a bank and everything in it.
+ * @param {string} name
+ * @returns {Promise<any>}
+ */
+export function deleteBank(name) {
+    return Promise.resolve(jq().ajax({
+        url: '/sfzbuilder/bank/delete',
+        type: 'POST',
+        data: JSON.stringify({ name: name }),
+        dataType: 'json',
+        cache: false,
+    }))
+}
+
+/**
+ * Gives the audio files of one sample source.
+ * @param {string} source One of "bank", "device" or "usb".
+ * @param {string} bank The name of the current bank.
+ * @returns {Promise<any>}
+ */
+export function listSamples(source, bank) {
+    if (source === 'bank') {
+        return get('/sfzbuilder/samples', { bank: bank })
+    }
+    if (source === 'device') {
+        return get('/sfzbuilder/device', { exclude_bank: bank })
+    }
+    return get('/sfzbuilder/usb')
+}
+
+/**
+ * Sends audio files to a bank.
+ * @param {string} bank
+ * @param {File[]|FileList} files
+ * @returns {Promise<any>}
+ */
+export function uploadSamples(bank, files) {
+    const form = new FormData()
+    form.append('bank', bank)
+    for (let i = 0; i < files.length; i++) {
+        form.append('file', files[i])
+    }
+    return Promise.resolve(jq().ajax({
+        url: '/sfzbuilder/upload',
+        type: 'POST',
+        data: form,
+        processData: false,
+        contentType: false,
+        dataType: 'json',
+    }))
+}
+
+/**
+ * Gives the URL that plays one audio file.
+ * @param {string} fullname
+ * @returns {string}
+ */
+export function audioUrl(fullname) {
+    return '/sfzbuilder/audio/' + encodeURIComponent(fullname)
+}
+
+/**
+ * Writes the SFZ file of a bank.
+ * @param {string} name
+ * @param {number} baseNote
+ * @param {(object|null)[]} slots
+ * @returns {Promise<any>}
+ */
+export function buildBank(name, baseNote, slots) {
+    return Promise.resolve(jq().ajax({
+        url: '/sfzbuilder/build',
+        type: 'POST',
+        data: JSON.stringify({ name: name, base_note: baseNote, slots: slots }),
+        dataType: 'json',
+        cache: false,
+    }))
+}
diff --git a/html/js/app/sfzbuilder/dom.js b/html/js/app/sfzbuilder/dom.js
new file mode 100644
index 000000000..b78e5832d
--- /dev/null
+++ b/html/js/app/sfzbuilder/dom.js
@@ -0,0 +1,161 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * A small set of tools that make elements.
+ *
+ * The island makes its own markup (architecture rule 4.3). These functions use
+ * the browser API, and `clear` also uses jQuery to take an element down. They
+ * exist so that the view code stays short, not to replace a library.
+ * @module
+ */
+
+import { jq } from './legacy.js'
+
+/**
+ * Makes an element.
+ *
+ * The tag can hold classes after a dot. Example: `h('div.sfz-pad.sfz-pad--on')`.
+ * A property that starts with "on" becomes an event listener.
+ * A child that is a string becomes a text node, thus the text is always safe.
+ *
+ * @param {string} tag
+ * @param {object} [props]
+ * @param {(Node|string|null|false|undefined)[]} [children]
+ * @returns {HTMLElement}
+ */
+export function h(tag, props, children) {
+    const parts = tag.split('.')
+    const node = document.createElement(parts[0] || 'div')
+    for (let i = 1; i < parts.length; i++) {
+        node.classList.add(parts[i])
+    }
+    for (const key in props || {}) {
+        const value = (props || {})[key]
+        if (value === null || value === undefined || value === false) {
+            continue
+        }
+        if (key.indexOf('on') === 0) {
+            node.addEventListener(key.slice(2), value)
+        } else if (key === 'text') {
+            node.textContent = String(value)
+        } else if (key === 'html') {
+            node.innerHTML = String(value)
+        } else if (key in node && key !== 'list' && key !== 'form') {
+            // @ts-ignore - a direct property keeps the type, for example checked.
+            node[key] = value
+        } else {
+            node.setAttribute(key, String(value))
+        }
+    }
+    for (const child of children || []) {
+        if (child === null || child === undefined || child === false) {
+            continue
+        }
+        node.appendChild(typeof child === 'string' ? document.createTextNode(child) : child)
+    }
+    return node
+}
+
+/**
+ * Removes every child of an element.
+ *
+ * This uses the jQuery `empty`, not `removeChild`, whenever jQuery is there
+ * (architecture rule 4.11). jQuery UI keeps a `draggable` and a `droppable` in
+ * `$.ui.ddmanager` and in the jQuery data cache, and it takes either one out
+ * only through the `cleanData` hook of jQuery. A native `removeChild` never
+ * runs that hook, so the entries stayed after the element was gone: they held
+ * the element, which was thus never collected, and jQuery UI walks the whole
+ * list of droppables on every move of a drag. The panel draws the pads again on
+ * every click of a pad and the sample rows on every keystroke of the filter, so
+ * the two lists grew for as long as the panel was open.
+ *
+ * `empty` cleans the descendants of the element and not the element itself,
+ * which is what this function wants: the element stays and its children go.
+ *
+ * The plain path below is the one to take when jQuery is absent, so that this
+ * file can be read outside the browser.
+ *
+ * @param {HTMLElement} node
+ */
+export function clear(node) {
+    const $ = jq()
+    if ($) {
+        $(node).empty()
+        return
+    }
+    while (node.firstChild) {
+        node.removeChild(node.firstChild)
+    }
+}
+
+/**
+ * Adds or removes a class.
+ * @param {Element|null} node
+ * @param {string} name
+ * @param {boolean} on
+ */
+export function toggleClass(node, name, on) {
+    if (node) {
+        node.classList.toggle(name, !!on)
+    }
+}
+
+/**
+ * Shows or hides an element.
+ * @param {HTMLElement|null} node
+ * @param {boolean} on
+ */
+export function show(node, on) {
+    if (node) {
+        node.style.display = on ? '' : 'none'
+    }
+}
+
+/**
+ * Makes an element that is not a button act as one.
+ *
+ * The bank rows, the sample rows and the pads are a div or a li, because each
+ * one holds its own buttons and a button cannot hold a button. An element like
+ * that takes a click but the keyboard cannot reach it, so it can carry no focus
+ * ring either. This function gives it a place in the tab order, a name that a
+ * screen reader reads, and the two keys that activate a button.
+ *
+ * The keys act only when the element itself has the focus. A press on a button
+ * inside it, for example the play control of a sample row, sends a click of its
+ * own and the keydown goes up to this element as well; without the test the row
+ * would act two times.
+ *
+ * The role is given by the caller, because it is not always "button". The
+ * children of a button are presentational: a screen reader is free to flatten
+ * them away and read the button as one piece of text. That is right for an
+ * element that holds text only, and wrong for one that holds a control of its
+ * own, whose control would then be lost. Pass a role that keeps its children,
+ * such as "group", or pass null to keep the role the element already has, which
+ * for a li inside a ul is "listitem".
+ *
+ * @param {HTMLElement} node
+ * @param {(event: Event) => void} onActivate
+ * @param {string|null} [role] The ARIA role, "button" when not given.
+ * @returns {HTMLElement} The same element.
+ */
+export function clickable(node, onActivate, role) {
+    const name = role === undefined ? 'button' : role
+    node.setAttribute('tabindex', '0')
+    if (name) {
+        node.setAttribute('role', name)
+    }
+    node.addEventListener('click', onActivate)
+    node.addEventListener('keydown', (event) => {
+        if (event.target !== node) {
+            return
+        }
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            // A space would else scroll the list that holds the element.
+            event.preventDefault()
+            onActivate(event)
+        }
+    })
+    return node
+}
diff --git a/html/js/app/sfzbuilder/legacy.js b/html/js/app/sfzbuilder/legacy.js
new file mode 100644
index 000000000..fc2134a4f
--- /dev/null
+++ b/html/js/app/sfzbuilder/legacy.js
@@ -0,0 +1,19 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * The adapter to the legacy code.
+ * This is the only file in the island that reads a global name.
+ * @module
+ */
+
+/**
+ * Gives the jQuery function from the legacy code.
+ * jQuery UI adds `draggable` and `droppable` to it.
+ * @returns {any}
+ */
+export function jq() {
+    // @ts-ignore - jQuery is a global from a classic script.
+    return window.jQuery
+}
diff --git a/html/js/app/sfzbuilder/model.js b/html/js/app/sfzbuilder/model.js
new file mode 100644
index 000000000..23fba1044
--- /dev/null
+++ b/html/js/app/sfzbuilder/model.js
@@ -0,0 +1,279 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * Pure functions for the SFZ builder.
+ * This file has no DOM code and no network code.
+ * @module
+ */
+
+/**
+ * @typedef {object} Slot
+ * @property {string} sample Bank-local file name.
+ * @property {string|null} source Absolute path, if the file is outside the bank.
+ * @property {number|null} volume Gain in dB.
+ * @property {number|null} pitch Root note, or null for automatic.
+ * @property {string} loop One of "one_shot" or "no_loop".
+ */
+
+/**
+ * @typedef {object} SampleFile
+ * @property {string} basename
+ * @property {string} fullname
+ * @property {number} [size] The size in bytes, if the server gives it.
+ */
+
+export const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']
+
+/**
+ * The audio types that the server accepts.
+ * Keep this list the same as AUDIO_EXTENSIONS in mod/sfzbuilder.py.
+ * The server refuses a batch that holds one other file, so the panel removes
+ * those files before the upload.
+ */
+export const AUDIO_EXTENSIONS = [
+    '.aif', '.aifc', '.aiff', '.au', '.bwf', '.flac', '.htk', '.iff', '.mat4', '.mat5',
+    '.oga', '.ogg', '.opus', '.paf', '.pvf', '.pvf5', '.sd2', '.sf', '.snd', '.svx',
+    '.vcc', '.w64', '.wav', '.xi',
+    '.3g2', '.3gp', '.aac', '.ac3', '.amr', '.ape', '.mp2', '.mp3', '.mpc', '.wma',
+]
+
+export const DEFAULT_BASE_NOTE = 36
+export const MAX_NOTE = 127
+export const DEFAULT_PADS = 8
+export const MIN_PADS = 1
+export const MAX_PADS = 128
+export const MIN_COLS = 2
+export const MAX_COLS = 8
+export const DEFAULT_COLS = 4
+
+/**
+ * Gives the name of a MIDI note. Example: 36 gives "C2".
+ * @param {number} note
+ * @returns {string}
+ */
+export function noteName(note) {
+    return NOTE_NAMES[note % 12] + (Math.floor(note / 12) - 1)
+}
+
+/**
+ * Reads a base note from a text value.
+ * An invalid value gives the default base note.
+ * @param {string|number|null|undefined} value
+ * @returns {number} A number from 0 to 127.
+ */
+export function clampBaseNote(value) {
+    const base = parseInt(String(value), 10)
+    return isNaN(base) ? DEFAULT_BASE_NOTE : Math.max(0, Math.min(MAX_NOTE, base))
+}
+
+/**
+ * Reads a pad count from a text value.
+ * @param {string|number|null|undefined} value
+ * @returns {number} A number from 1 to 128.
+ */
+export function clampPadCount(value) {
+    return Math.max(MIN_PADS, Math.min(MAX_PADS, parseInt(String(value), 10) || MIN_PADS))
+}
+
+/**
+ * Changes the number of pads. Each pad keeps its index.
+ * @param {(Slot|null)[]} slots
+ * @param {number} count
+ * @returns {(Slot|null)[]} A new array. The input array does not change.
+ */
+export function resizePads(slots, count) {
+    /** @type {(Slot|null)[]} */
+    const next = []
+    for (let i = 0; i < count; i++) {
+        next.push(slots[i] || null)
+    }
+    return next
+}
+
+/**
+ * Gives the note number of a pad.
+ * @param {number} baseNote
+ * @param {number} index
+ * @returns {number}
+ */
+export function padNote(baseNote, index) {
+    return baseNote + index
+}
+
+/**
+ * Reads a column count from a text value.
+ * @param {string|number|null|undefined} value
+ * @returns {number} A number from 2 to 6.
+ */
+export function clampCols(value) {
+    const cols = parseInt(String(value), 10)
+    return isNaN(cols) ? DEFAULT_COLS : Math.max(MIN_COLS, Math.min(MAX_COLS, cols))
+}
+
+/**
+ * Gives the parts of the note of a pad.
+ *
+ * A bank can hold 128 pads and the base note can be more than 0. Thus the last
+ * pads can go past note 127. Such a pad gets no note and the panel shows this.
+ * @param {number} note
+ * @returns {{ note: number, name: string, inRange: boolean }}
+ */
+export function noteToken(note) {
+    const inRange = note >= 0 && note <= MAX_NOTE
+    return { note: note, name: inRange ? noteName(note) : '--', inRange: inRange }
+}
+
+/**
+ * Gives a short size for a file. Example: 412000 gives "402 KB".
+ * @param {number|null|undefined} bytes
+ * @returns {string} An empty string if the size is unknown.
+ */
+export function formatSize(bytes) {
+    if (typeof bytes !== 'number' || !isFinite(bytes) || bytes < 0) {
+        return ''
+    }
+    if (bytes < 1024) {
+        return bytes + ' B'
+    }
+    if (bytes < 1024 * 1024) {
+        return Math.round(bytes / 1024) + ' KB'
+    }
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+
+/**
+ * Changes the saved pads from the server into the pads that the panel uses.
+ * @param {any[]} saved
+ * @returns {(Slot|null)[]}
+ */
+export function alignSavedSlots(saved) {
+    /** @type {(Slot|null)[]} */
+    const aligned = []
+    for (const slot of saved) {
+        if (!slot) {
+            aligned.push(null)
+            continue
+        }
+        aligned.push({
+            sample: slot.sample,
+            source: null,
+            volume: slot.volume,
+            pitch: slot.pitch_keycenter === undefined ? null : slot.pitch_keycenter,
+            loop: slot.loop_mode || 'one_shot',
+        })
+    }
+    return aligned
+}
+
+/**
+ * Makes the data for the build request.
+ * An empty pad stays in the array as null. Thus the other pads keep their notes.
+ * @param {(Slot|null)[]} slots
+ * @returns {{ aligned: (object|null)[], filled: number }}
+ */
+export function buildPayload(slots) {
+    /** @type {(object|null)[]} */
+    const aligned = []
+    let filled = 0
+    for (const slot of slots) {
+        if (!slot) {
+            aligned.push(null)
+            continue
+        }
+        filled++
+        aligned.push({
+            sample: slot.sample,
+            source: slot.source,
+            volume: slot.volume,
+            pitch_keycenter: slot.pitch,
+            loop_mode: slot.loop,
+        })
+    }
+    return { aligned, filled }
+}
+
+/**
+ * Selects the samples that match a search term.
+ * The search ignores the case of the letters.
+ * @param {SampleFile[]} files
+ * @param {string} term
+ * @returns {SampleFile[]}
+ */
+export function filterFiles(files, term) {
+    const needle = (term || '').toLowerCase()
+    if (!needle) {
+        return files.slice()
+    }
+    return files.filter((f) => f.basename.toLowerCase().indexOf(needle) >= 0)
+}
+
+/**
+ * Makes the pad data for a sample that the user assigns.
+ * @param {SampleFile} entry
+ * @param {string} source The current sample source: "bank", "device" or "usb".
+ * @returns {Slot}
+ */
+export function slotFromSample(entry, source) {
+    return {
+        sample: entry.basename,
+        source: source === 'bank' ? null : entry.fullname,
+        volume: 0,
+        pitch: null,
+        loop: 'one_shot',
+    }
+}
+
+/**
+ * Chooses the bank that the panel opens with.
+ *
+ * The panel remembers the bank that you worked on and opens it again, because
+ * you frequently come back to the same bank. A bank that is gone, or a device
+ * that has no memory of a bank, gives the first bank instead. An empty device
+ * gives no bank and the panel then shows its empty state.
+ *
+ * @param {string[]} banks The banks that the server gives.
+ * @param {string|null|undefined} remembered The bank of the last visit.
+ * @returns {string} A name from `banks`, or an empty string.
+ */
+export function pickInitialBank(banks, remembered) {
+    if (remembered && banks.indexOf(remembered) >= 0) {
+        return remembered
+    }
+    return banks.length > 0 ? banks[0] : ''
+}
+
+/**
+ * Tells if the server accepts a file name.
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function isAudioName(name) {
+    const lower = (name || '').toLowerCase()
+    return AUDIO_EXTENSIONS.some((ext) => lower.endsWith(ext))
+}
+
+/**
+ * Divides dropped files into the files that the server accepts and the others.
+ *
+ * The upload control uses `accept="audio/*"`, but a drop from the desktop has
+ * no filter. A folder frequently holds an image or a hidden file. The server
+ * refuses the full batch in that condition, so the panel removes those files.
+ * @param {{ name: string }[]} files
+ * @returns {{ accepted: any[], rejected: any[] }}
+ */
+export function splitAudioFiles(files) {
+    /** @type {any[]} */
+    const accepted = []
+    /** @type {any[]} */
+    const rejected = []
+    for (const file of files) {
+        if (isAudioName(file.name)) {
+            accepted.push(file)
+        } else {
+            rejected.push(file)
+        }
+    }
+    return { accepted, rejected }
+}
diff --git a/html/js/app/sfzbuilder/mount.js b/html/js/app/sfzbuilder/mount.js
new file mode 100644
index 000000000..1c1c7265a
--- /dev/null
+++ b/html/js/app/sfzbuilder/mount.js
@@ -0,0 +1,811 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * The SFZ builder island.
+ * The legacy code starts the island with `mount`. This is the only seam.
+ * @module
+ */
+
+import * as api from './api.js'
+import * as model from './model.js'
+import * as view from './view.js'
+import { createStore } from './state.js'
+import { toggleClass } from './dom.js'
+
+/** Where the browser keeps the column count between visits. */
+const COLS_KEY = 'sfzbuilder.cols'
+
+/** Where the browser keeps the bank that you worked on last. */
+const BANK_KEY = 'sfzbuilder.bank'
+
+/**
+ * Adds the stylesheet of the island to the page, one time.
+ *
+ * The island holds its markup, its code and its style in one directory. Thus
+ * you can delete the directory and remove all of the feature.
+ */
+function addStylesheet() {
+    if (document.querySelector('link[data-sfzbuilder]')) {
+        return
+    }
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.type = 'text/css'
+    link.href = new URL('./sfzbuilder.css', import.meta.url).href
+    link.setAttribute('data-sfzbuilder', '1')
+    // The code can load while the stylesheet does not. The panel is then
+    // there but has no size and no place, so the screen does not change and
+    // the fault gives no other sign. Say it instead.
+    link.addEventListener('error', () => {
+        console.error('The Sound Bank Builder cannot read', link.href)
+        const root = document.getElementById('sfzbuilder-library')
+        if (root) {
+            root.setAttribute('style', 'position:absolute;top:0;bottom:45px;left:0;right:0;'
+                + 'z-index:2;background:#0a0a0a;color:#D91E36;padding:40px;font:13px monospace')
+            root.textContent = 'The Sound Bank Builder cannot read its stylesheet: ' + link.href
+        }
+    })
+    document.head.appendChild(link)
+}
+
+/**
+ * Reads one value that the last visit wrote.
+ *
+ * A browser can refuse storage: a private window, or a setting that blocks site
+ * data. Each call is thus in a try. The panel works without storage; it only
+ * forgets what the last visit did.
+ *
+ * @param {string} key
+ * @returns {string|null} Null when there is no value, or when storage fails.
+ */
+function readSetting(key) {
+    try {
+        return window.localStorage.getItem(key)
+    } catch (e) {
+        return null
+    }
+}
+
+/**
+ * Keeps one value for the next visit.
+ * @param {string} key
+ * @param {string} value
+ */
+function writeSetting(key, value) {
+    try {
+        window.localStorage.setItem(key, value)
+    } catch (e) {
+        /* The panel works without storage. */
+    }
+}
+
+/**
+ * Puts the SFZ builder in an element.
+ * @param {HTMLElement} root The panel element.
+ * @returns {{ open: () => void, close: () => void, destroy: () => void }}
+ */
+export function mount(root) {
+    addStylesheet()
+
+    const store = createStore(() => { /* the draws below are explicit */ })
+
+    // Which view of the panel the answers coming back belong to.
+    //
+    // The panel asks for the sample list, the files of the bank and the pad
+    // layout in three requests that do not wait for each other. Click bank A
+    // and then bank B and the answers for A can land after the answers for B,
+    // which drew the pads of A over the bank of B. Each request keeps the
+    // number the panel had when it went out, and an answer that comes back to
+    // a different number is dropped: the request that replaced it is already
+    // on its way.
+    let generation = 0
+
+    /** @returns {() => boolean} A test that says whether the answer still fits. */
+    function fresh() {
+        const mine = generation
+        return () => mine === generation
+    }
+
+    // One player for the full panel, so only one sample sounds at a time.
+    /** @type {HTMLAudioElement|null} */
+    let player = null
+    /** @type {HTMLElement|null} */
+    let playingButton = null
+
+    const el = view.createLayout(root, {
+        onAddBank: () => view.promptNewBank(el, createBank),
+        onSource: setSource,
+        onUpload: uploadFromInput,
+        onSearch: (term) => {
+            store.update({ search: term })
+            drawSamples()
+        },
+        onPadCount: setPadCount,
+        onCols: setCols,
+        onBaseNote: setBaseNote,
+        onSave: save,
+        onRenameBank: () => view.promptRenameBank(el, renameBank),
+        onDeleteBank: removeBank,
+    })
+
+    /**
+     * @param {string} message
+     * @param {boolean} [isError]
+     */
+    function setStatus(message, isError) {
+        store.update({ status: message, statusIsError: !!isError })
+        view.renderStatus(el, message, !!isError)
+    }
+
+    /**
+     * Says that the pads hold a change that no save wrote.
+     *
+     * Everything the sidecar keeps counts: which sample is on which pad, the
+     * gain, the root note, the loop mode, the pad count and the base note. The
+     * column count does not -- that is how you look at the bank, not what the
+     * bank is, and it lives in the browser rather than on the device.
+     */
+    function markDirty() {
+        // No bank open means no work to lose. The panel builds its first pads
+        // before it has asked the server for anything -- setPadCount below
+        // grows the empty array to eight -- and that is the panel arranging
+        // itself, not a change to a bank. Without this test the first bank the
+        // panel opened asked whether to drop work that never existed.
+        if (!store.get().currentBank) {
+            return
+        }
+        if (store.get().dirty) {
+            return
+        }
+        store.update({ dirty: true })
+        drawBankView()
+    }
+
+    /** @param {boolean} [saved] */
+    function markClean(saved) {
+        if (!store.get().dirty) {
+            return
+        }
+        store.update({ dirty: false })
+        if (saved !== false) {
+            drawBankView()
+        }
+    }
+
+    /**
+     * Asks before a step that would drop the changes the pads hold.
+     *
+     * The words are the ones the legacy panels use for the same question, so
+     * the answer means the same thing wherever you meet it.
+     * @returns {boolean} Whether to go on.
+     */
+    function confirmDiscard() {
+        if (!store.get().dirty) {
+            return true
+        }
+        return window.confirm('There are unsaved modifications that will be lost. Are you sure?')
+    }
+
+    function stopPreview() {
+        if (player) {
+            player.pause()
+            player = null
+        }
+        if (playingButton) {
+            playingButton.classList.remove('sfz-playing')
+            playingButton.innerHTML = '&#9654;'
+            playingButton = null
+        }
+    }
+
+    /**
+     * @param {HTMLElement} button
+     * @param {string} fullname
+     */
+    function playPreview(button, fullname) {
+        const wasPlaying = button.classList.contains('sfz-playing')
+        stopPreview()
+        if (wasPlaying) {
+            return
+        }
+        player = new Audio(api.audioUrl(fullname))
+        playingButton = button
+        button.classList.add('sfz-playing')
+        button.innerHTML = '&#9632;'
+        player.addEventListener('ended', stopPreview)
+        player.addEventListener('error', () => {
+            stopPreview()
+            setStatus('Cannot play that sample', true)
+        })
+        player.play()
+    }
+
+    /**
+     * Gives the URL that plays the sample of a pad.
+     *
+     * A pad that comes from another place keeps the full path. A pad that comes
+     * from the bank keeps the name only, so the name goes to the file list of
+     * the bank. A bank that you did not open yet gives no URL and the play
+     * control of the pad is off.
+     * @param {import('./model.js').Slot} slot
+     * @returns {string}
+     */
+    function previewUrl(slot) {
+        if (slot.source) {
+            return slot.source
+        }
+        for (const f of store.get().bankFiles) {
+            if (f.basename === slot.sample) {
+                return f.fullname
+            }
+        }
+        return ''
+    }
+
+    function drawSlots() {
+        view.renderSlots(el, store.get(), {
+            onAssign: assignSlot,
+            onSelect: selectSlot,
+            onClear: clearSlot,
+            onPlay: playPreview,
+            previewUrl: previewUrl,
+            onEdit: editSlot,
+        })
+    }
+
+    function drawSamples() {
+        view.renderSamples(el, store.get(), {
+            onPlay: playPreview,
+            onPick: pickSample,
+        })
+        // The old panel stopped the sound on every draw, so a filter cut the
+        // sample that played. The panel now stops only when the row goes away.
+        if (playingButton && !document.contains(playingButton)) {
+            stopPreview()
+        }
+    }
+
+    function drawBanks() {
+        view.renderBanks(el, store.get(), selectBank)
+    }
+
+    function drawBankView() {
+        view.renderBankView(el, store.get())
+    }
+
+    /** @param {number} idx */
+    function selectSlot(idx) {
+        const current = store.get().selectedSlot
+        store.update({ selectedSlot: current === idx ? -1 : idx })
+        drawSlots()
+    }
+
+    /** @param {number} idx */
+    function clearSlot(idx) {
+        const slots = store.get().slots.slice()
+        slots[idx] = null
+        store.update({ slots: slots })
+        markDirty()
+        drawSlots()
+    }
+
+    /**
+     * Changes one field of one pad.
+     *
+     * The pads are not drawn again: the change came from a control inside the
+     * pad and a redraw would take the focus out of it while you type.
+     * @param {number} idx
+     * @param {Partial<import('./model.js').Slot>} patch
+     */
+    function editSlot(idx, patch) {
+        const state = store.get()
+        const slot = state.slots[idx]
+        if (!slot) {
+            return
+        }
+        const slots = state.slots.slice()
+        slots[idx] = Object.assign({}, slot, patch)
+        store.update({ slots: slots })
+        markDirty()
+    }
+
+    /**
+     * @param {number} idx
+     * @param {import('./model.js').SampleFile} entry
+     */
+    function assignSlot(idx, entry) {
+        const state = store.get()
+        if (idx < 0 || idx >= state.slots.length) {
+            return
+        }
+        const slots = state.slots.slice()
+        slots[idx] = model.slotFromSample(entry, state.source)
+        store.update({ slots: slots, selectedSlot: -1 })
+        markDirty()
+        setStatus(entry.basename + ' put on pad ' + (idx + 1))
+        drawSlots()
+    }
+
+    /** @param {import('./model.js').SampleFile} entry */
+    function pickSample(entry) {
+        const idx = store.get().selectedSlot
+        if (idx < 0) {
+            setStatus('Click a pad first, or drag the sample onto a pad', true)
+            return
+        }
+        assignSlot(idx, entry)
+    }
+
+    /** @param {number} count */
+    function setPadCount(count) {
+        const slots = store.get().slots
+        store.update({ padCount: count })
+        if (slots.length !== count) {
+            store.update({ slots: model.resizePads(slots, count) })
+            markDirty()
+        }
+        drawSlots()
+    }
+
+    /** @param {number} cols */
+    function setCols(cols) {
+        store.update({ cols: cols })
+        writeSetting(COLS_KEY, String(cols))
+        el.grid.style.setProperty('--sfz-cols', String(cols))
+    }
+
+    /** @param {number|null} note */
+    function setBaseNote(note) {
+        const next = model.clampBaseNote(note)
+        if (next !== store.get().baseNote) {
+            store.update({ baseNote: next })
+            markDirty()
+        }
+        drawSlots()
+    }
+
+    /** @param {string} source */
+    function setSource(source) {
+        generation++
+        store.update({ source: source })
+        drawBankView()
+        refreshSamples()
+    }
+
+    function refreshSamples() {
+        const state = store.get()
+        const still = fresh()
+        api.listSamples(state.source, state.currentBank).then((resp) => {
+            if (!still()) {
+                return
+            }
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            const files = resp.files || []
+            const patch = { files: files }
+            if (store.get().source === 'bank') {
+                // @ts-ignore - the patch takes both keys.
+                patch.bankFiles = files
+            }
+            store.update(patch)
+            drawSamples()
+            drawSlots()
+        }, () => setStatus('Failed to load the samples', true))
+    }
+
+    /**
+     * Reads the files of the current bank, whatever list the panel shows.
+     * The pads need this list to play a sample that the bank holds.
+     * @returns {Promise<void>}
+     */
+    function refreshBankFiles() {
+        const bank = store.get().currentBank
+        if (!bank) {
+            store.update({ bankFiles: [] })
+            return Promise.resolve()
+        }
+        const still = fresh()
+        return api.listSamples('bank', bank).then((resp) => {
+            if (resp.ok && still()) {
+                store.update({ bankFiles: resp.files || [] })
+                drawSlots()
+            }
+        }, () => { /* The panel works without the play control of a pad. */ })
+    }
+
+    /** @returns {Promise<void>} */
+    function loadBanks() {
+        return api.listBanks().then((resp) => {
+            const banks = resp.banks
+            const current = store.get().currentBank
+            store.update({
+                banks: banks,
+                bankCounts: resp.counts || {},
+                currentBank: current && banks.indexOf(current) < 0 ? '' : current,
+            })
+            drawBanks()
+            drawBankView()
+        }, () => {
+            setStatus('Failed to load the banks', true)
+        })
+    }
+
+    // Reads the pad layout that the last save wrote, so a bank opens for edit.
+    function loadBankState() {
+        const bank = store.get().currentBank
+        if (!bank) {
+            return
+        }
+        const still = fresh()
+        api.loadBank(bank).then((resp) => {
+            if (!still()) {
+                return
+            }
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            const saved = resp.slots || []
+            if (saved.length === 0) {
+                // A bank that was never saved has no layout. The panel would
+                // else keep the pads of the bank that was open before, and the
+                // pad count and base note with them.
+                const padCount = model.DEFAULT_PADS
+                store.update({
+                    slots: model.resizePads([], padCount),
+                    padCount: padCount,
+                    baseNote: model.DEFAULT_BASE_NOTE,
+                })
+                el.padStepper.set(padCount)
+                el.baseStepper.set(model.DEFAULT_BASE_NOTE)
+                // The two lines above run the same handlers a click on the
+                // stepper runs, so they say the bank changed. The bank was
+                // read, not changed, so the flag goes down after them, never
+                // before.
+                markClean()
+                drawSlots()
+                return
+            }
+            const aligned = model.alignSavedSlots(saved)
+            const baseNote = model.clampBaseNote(resp.base_note)
+            store.update({ slots: aligned, padCount: aligned.length, baseNote: baseNote })
+            el.padStepper.set(aligned.length)
+            el.baseStepper.set(baseNote)
+            markClean()
+            drawSlots()
+        }, () => setStatus('Failed to load the bank', true))
+    }
+
+    /** @param {string} name */
+    function selectBank(name) {
+        if (store.get().currentBank === name) {
+            return
+        }
+        if (!confirmDiscard()) {
+            // The row that was clicked wears the selection for a moment before
+            // the answer comes back, so the list is drawn again from the state,
+            // which still holds the bank that stays open.
+            drawBanks()
+            return
+        }
+        stopPreview()
+        generation++
+        store.update({ currentBank: name, selectedSlot: -1, bankFiles: [], dirty: false })
+        // The next visit opens this bank again. See model.pickInitialBank.
+        writeSetting(BANK_KEY, name)
+        drawBanks()
+        drawBankView()
+        setStatus('')
+        loadBankState()
+        refreshSamples()
+        if (store.get().source !== 'bank') {
+            refreshBankFiles()
+        }
+    }
+
+    /** @param {string} name */
+    function createBank(name) {
+        if (!name) {
+            setStatus('Type a bank name first', true)
+            return
+        }
+        api.createBank(name).then((resp) => {
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            store.update({ currentBank: '' })
+            loadBanks().then(() => selectBank(resp.name))
+        }, () => setStatus('Failed to create the bank', true))
+    }
+
+    /**
+     * Changes the name of the current bank.
+     *
+     * The name that reaches the disk is not always the name that was asked
+     * for -- a space becomes an underscore -- so the panel opens the bank
+     * under the name that the server gives back, not the one it sent.
+     * @param {string} name
+     */
+    function renameBank(name) {
+        const from = store.get().currentBank
+        if (!from) {
+            return
+        }
+        // The panel opens the bank again under its new name, which reads the
+        // layout back from the disk and thus drops whatever the pads hold.
+        if (!confirmDiscard()) {
+            return
+        }
+        api.renameBank(from, name).then((resp) => {
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            // currentBank is cleared first so that selectBank does its work:
+            // it returns early when the name it is given is already open, and
+            // after a rename of "Kit" to "Kit A" the store still says "Kit".
+            store.update({ currentBank: '', dirty: false })
+            loadBanks().then(() => {
+                selectBank(resp.name)
+                setStatus('Renamed to ' + resp.name)
+            })
+        }, () => setStatus('Rename failed', true))
+    }
+
+    /**
+     * Removes the current bank and everything in it.
+     *
+     * A confirm box asks first, the same way the legacy panels ask before a
+     * change that cannot be undone. The bank holds the samples that were
+     * uploaded to it, so this is not a change you can take back.
+     */
+    function removeBank() {
+        const name = store.get().currentBank
+        if (!name) {
+            return
+        }
+        const count = store.get().bankCounts[name]
+        const held = typeof count === 'number' && count > 0
+            ? ' and the ' + count + ' sample(s) in it'
+            : ''
+        if (!window.confirm('Delete the bank ' + name + held + '? This cannot be undone.')) {
+            return
+        }
+        api.deleteBank(name).then((resp) => {
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            stopPreview()
+            // The next visit must not try to open the bank that just went
+            // away. refreshAll then falls back to the first bank there is.
+            writeSetting(BANK_KEY, '')
+            generation++
+            store.update({ currentBank: '', selectedSlot: -1, bankFiles: [], files: [], dirty: false })
+            loadBanks().then(() => {
+                const banks = store.get().banks
+                if (banks.length > 0) {
+                    selectBank(banks[0])
+                } else {
+                    drawSamples()
+                    drawSlots()
+                }
+                setStatus('Deleted ' + resp.name)
+            })
+        }, () => setStatus('Delete failed', true))
+    }
+
+    function uploadFromInput() {
+        const files = el.uploadInput.files
+        if (!files || files.length === 0) {
+            return
+        }
+        const list = Array.prototype.slice.call(files)
+        el.uploadInput.value = ''
+        upload(list)
+    }
+
+    /**
+     * Sends files to the current bank.
+     * @param {File[]} files
+     */
+    function upload(files) {
+        const bank = store.get().currentBank
+        if (!bank) {
+            setStatus('Select a bank first', true)
+            return
+        }
+        // The server refuses the full batch if one file is not audio, and it
+        // refuses it after it writes the files before that one. Thus the panel
+        // removes those files first. A drop from the desktop has no filter.
+        const split = model.splitAudioFiles(files)
+        if (split.accepted.length === 0) {
+            setStatus('No audio file in that drop', true)
+            return
+        }
+        setStatus('Uploading ' + split.accepted.length + ' file(s)…')
+        api.uploadSamples(bank, split.accepted).then((resp) => {
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            const skipped = split.rejected.length
+            setStatus(resp.files.length + ' file(s) uploaded'
+                + (skipped ? ', ' + skipped + ' not audio' : ''), skipped > 0)
+            generation++
+            store.update({ source: 'bank' })
+            drawBankView()
+            refreshSamples()
+            loadBanks()
+        }, () => setStatus('Upload failed', true))
+    }
+
+    function save() {
+        const state = store.get()
+        if (!state.currentBank) {
+            setStatus('Select a bank first', true)
+            return
+        }
+        const payload = model.buildPayload(state.slots)
+        if (payload.filled === 0) {
+            setStatus('Put a sample on a pad first', true)
+            return
+        }
+        api.buildBank(state.currentBank, state.baseNote, payload.aligned).then((resp) => {
+            if (!resp.ok) {
+                setStatus(resp.error, true)
+                return
+            }
+            markClean()
+            setStatus('Saved ' + resp.file + ' with ' + resp.count + ' sample(s)')
+            refreshBankFiles()
+        }, () => setStatus('Save failed', true))
+    }
+
+    // ---- the drop of a file from the desktop ----------------------------
+    //
+    // This is not the same as the drag of a sample onto a pad. That drag uses
+    // jQuery UI, which reads mouse events. A drop from the desktop uses the
+    // drag events of the browser and carries a `dataTransfer`. The code below
+    // acts on a drop that holds files only, so an internal drag goes through.
+
+    let dragDepth = 0
+
+    /**
+     * @param {DragEvent} e
+     * @returns {boolean}
+     */
+    function holdsFiles(e) {
+        const types = e.dataTransfer ? e.dataTransfer.types : null
+        if (!types) {
+            return false
+        }
+        return Array.prototype.indexOf.call(types, 'Files') >= 0
+    }
+
+    /** @param {boolean} on */
+    function showOverlay(on) {
+        toggleClass(el.overlay, 'sfz-overlay--on', on)
+    }
+
+    el.panel.addEventListener('dragenter', (/** @type {any} */ e) => {
+        if (!holdsFiles(e)) {
+            return
+        }
+        e.preventDefault()
+        // A drag over a child element sends a leave and then an enter. The
+        // count keeps the cover until the drag goes past the panel itself.
+        dragDepth++
+        showOverlay(true)
+    })
+
+    el.panel.addEventListener('dragover', (/** @type {any} */ e) => {
+        if (!holdsFiles(e)) {
+            return
+        }
+        e.preventDefault()
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'copy'
+        }
+    })
+
+    el.panel.addEventListener('dragleave', (/** @type {any} */ e) => {
+        if (!holdsFiles(e)) {
+            return
+        }
+        dragDepth = Math.max(0, dragDepth - 1)
+        if (dragDepth === 0) {
+            showOverlay(false)
+        }
+    })
+
+    el.panel.addEventListener('drop', (/** @type {any} */ e) => {
+        if (!holdsFiles(e)) {
+            return
+        }
+        e.preventDefault()
+        dragDepth = 0
+        showOverlay(false)
+        const files = e.dataTransfer ? Array.prototype.slice.call(e.dataTransfer.files) : []
+        if (files.length > 0) {
+            upload(files)
+        }
+    })
+
+    // A drop outside the panel must not make the browser open the file.
+    /** @param {DragEvent} e */
+    function blockOutside(e) {
+        if (holdsFiles(e) && !el.panel.contains(/** @type {Node} */ (e.target))) {
+            e.preventDefault()
+        }
+    }
+    /** @param {DragEvent} e */
+    function blockOutsideDrop(e) {
+        if (holdsFiles(e) && !el.panel.contains(/** @type {Node} */ (e.target))) {
+            e.preventDefault()
+            dragDepth = 0
+            showOverlay(false)
+        }
+    }
+    let guarded = false
+
+    function addGuards() {
+        if (!guarded) {
+            guarded = true
+            document.addEventListener('dragover', blockOutside)
+            document.addEventListener('drop', blockOutsideDrop)
+        }
+    }
+
+    function removeGuards() {
+        if (guarded) {
+            guarded = false
+            document.removeEventListener('dragover', blockOutside)
+            document.removeEventListener('drop', blockOutsideDrop)
+        }
+    }
+
+    // ---- the seam --------------------------------------------------------
+
+    function refreshAll() {
+        addGuards()
+        loadBanks().then(() => {
+            const state = store.get()
+            if (!state.currentBank) {
+                // The panel opens on the bank of the last visit. loadBanks
+                // clears the current bank when that bank is gone, so this runs
+                // on the first visit and after a bank goes away.
+                const pick = model.pickInitialBank(state.banks, readSetting(BANK_KEY))
+                if (pick) {
+                    selectBank(pick)
+                    return
+                }
+            }
+            refreshSamples()
+            drawSlots()
+        })
+    }
+
+    function onClose() {
+        stopPreview()
+        dragDepth = 0
+        showOverlay(false)
+        removeGuards()
+    }
+
+    setCols(model.clampCols(readSetting(COLS_KEY)))
+    el.colStepper.set(store.get().cols)
+    setPadCount(store.get().padCount)
+    drawBankView()
+
+    return {
+        open: refreshAll,
+        close: onClose,
+        destroy: onClose,
+    }
+}
diff --git a/html/js/app/sfzbuilder/sfzbuilder.css b/html/js/app/sfzbuilder/sfzbuilder.css
new file mode 100644
index 000000000..567820d0b
--- /dev/null
+++ b/html/js/app/sfzbuilder/sfzbuilder.css
@@ -0,0 +1,844 @@
+/* SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * The stylesheet of the SFZ builder island.
+ *
+ * mount.js adds this file to the page. No other panel reads it and it reads no
+ * other panel. Thus you can delete the island directory and remove all of the
+ * feature.
+ *
+ * Every class starts with "sfz-". A modifier ends with "--". Thus a modifier
+ * can never collide with the class of an element, which was the cause of an
+ * earlier layout fault.
+ *
+ * Each rule starts at #sfzbuilder-library. main.css holds rules for bare
+ * elements (button, input, select, h2, ul). The identifier gives these rules a
+ * higher weight, so the panel keeps its appearance.
+ */
+
+/* Design tokens. Change a value here and the full panel follows.
+ *
+ * These live on :root, not on #sfzbuilder-library. jQuery UI puts the helper of
+ * a drag on the body, outside the panel, so a token on the panel does not reach
+ * it. A var() that does not resolve makes the property invalid, and the helper
+ * was then black text on nothing. Each name starts with --sfz-, so a token at
+ * the root cannot collide with the legacy styles. */
+:root {
+  --sfz-accent: #883996;
+  /* The accent as a foreground. --sfz-accent is the brand purple and it is
+     right as a fill or a border, but as text on the near-black of the panel it
+     sits at about 2.4:1, under any reading of the contrast rule. This is the
+     same hue lifted until it reads: a note name, a play mark, the Add button.
+     Use --sfz-accent for a fill, --sfz-accent-fg for a glyph. */
+  --sfz-accent-fg: #c27bd0;
+  --sfz-bg: #0a0a0a;
+  --sfz-panel: #0f0f0f;
+  --sfz-rail: #141414;
+  --sfz-cell: #151515;
+  --sfz-line: #343434;
+  --sfz-line-soft: #262626;
+  --sfz-line-free: #2e2e2e;
+  --sfz-text: #f2f2f2;
+  --sfz-dim: #a6a6a6;
+  --sfz-dimmer: #808080;
+  --sfz-err: #ff5468;
+  /* Every font-family that names one of these two carries !important.
+     main.less holds `* { font-family: "cooper hewitt", Sans-serif !important }`,
+     which beats a plain declaration whatever its weight or its order, so the
+     panel drew in Cooper Hewitt and read nothing from these tokens at all. The
+     header was where you saw it first: a title that was meant to be monospace
+     came out in the page font and grew wide enough to push the tool row onto a
+     second line. This is the same trap as the outline rule, see .sfz-focus. */
+  --sfz-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --sfz-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  --sfz-snap: 80ms;
+  /* The least width of the note stepper value. See .sfz-tokenbox. */
+  --sfz-token-w: 76px;
+  /* The least width of a pad. See .sfz-grid: a column stretches to fill the
+     space it is given but never goes under this, and the grid scrolls sideways
+     once the chosen number of columns no longer fits. Below about this width
+     the file name of a pad shows two or three letters and the mini steppers
+     lose their digits. Tune this one value to trade legibility for columns. */
+  --sfz-pad-min: 140px;
+  /* The focus ring. A light neutral, not the accent: the ring has to be legible
+     on the accent itself, which fills a bank row and a pad while they hold the
+     selection. */
+  --sfz-focus: #e8e8e8;
+}
+
+#sfzbuilder-library {
+  position: absolute;
+  top: 0;
+  bottom: 45px;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  z-index: 2;
+  background: var(--sfz-bg);
+  color: var(--sfz-text);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The descendant half of the selector is what does the work. main.less names
+   every element one by one, so its rule lands on each child of the panel
+   directly and inheritance from the panel never reaches them. */
+#sfzbuilder-library,
+#sfzbuilder-library * {
+  font-family: var(--sfz-mono) !important;
+}
+
+#sfzbuilder-library * { box-sizing: border-box; }
+
+/* The shared header bar is the one part of the panel that is not the island's
+   own. main.less draws it for every library panel (#bank-library,
+   #file-manager-library, #patchstorage-library ...), and the bar of this panel
+   has to be indistinguishable from theirs -- the same face, the same weight,
+   the same grey, the same place on the line -- because you see two of them in a
+   row as you move between panels and anything off reads as a fault.
+
+   So the whole header opts out of the island and takes the page style back:
+
+   font-family    The mono rule above lands on the header too, and a monospace
+                  "SOUND BANK BUILDER" is both wider and plainly a different
+                  face from "USER BANKS" one panel over. The value here is the
+                  one from main.less `* { font-family: "cooper hewitt",
+                  Sans-serif !important }`, character for character, so the
+                  fallback matches as well if the web font fails to load.
+   font-smoothing The panel sets antialiased on itself and that inherits into
+                  the header, where it thins the strokes: the title came out
+                  visibly lighter than the same words on the panel next door.
+                  auto puts the header back on the rendering of the page.
+   font-variant-numeric
+                  tabular-nums is set on the panel and inherits. It changes the
+                  digits, which the title of this panel has none of today, but
+                  the other headers do not carry it. letter-spacing is normal
+                  for the same reason: an earlier pass tracked the title out by
+                  .04em, and next to an untracked "USER BANKS" it read wrong.
+   color, text-transform
+                  main.less already gives these to `#sfzbuilder-library header
+                  h1`. They are repeated so the header stands on its own if that
+                  selector list ever loses this panel; #999 is its value.
+
+   Anything you want to change about the look of this bar belongs in main.less
+   with the other panels, not here. This block only stops the island from
+   reaching in. */
+#sfzbuilder-library header,
+#sfzbuilder-library header * {
+  font-family: "cooper hewitt", Sans-serif !important;
+  -webkit-font-smoothing: auto;
+  letter-spacing: normal;
+  font-variant-numeric: normal;
+}
+#sfzbuilder-library header h1 {
+  text-transform: uppercase;
+  font-weight: normal;
+  color: #999;
+}
+
+/* The scroll bars.
+ *
+ * The panel is dark, but the browser draws a scroll bar and a form control from
+ * the setting of the system. On a system that is set to light, a white scroll
+ * bar cut through the bank list. color-scheme tells the browser which set to
+ * draw, so the panel gets the dark set on every system.
+ *
+ * scrollbar-color and scrollbar-width are the standard properties. The
+ * ::-webkit- rules give the same result on an older browser that does not
+ * have them, which the device can have. */
+#sfzbuilder-library {
+  color-scheme: dark;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sfz-line) transparent;
+}
+#sfzbuilder-library *::-webkit-scrollbar { width: 10px; height: 10px; }
+#sfzbuilder-library *::-webkit-scrollbar-track { background: transparent; }
+#sfzbuilder-library *::-webkit-scrollbar-thumb {
+  background: var(--sfz-line);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+#sfzbuilder-library *::-webkit-scrollbar-thumb:hover { background: var(--sfz-dimmer); background-clip: content-box; }
+#sfzbuilder-library *::-webkit-scrollbar-corner { background: transparent; }
+
+#sfzbuilder-library button,
+#sfzbuilder-library input,
+#sfzbuilder-library select {
+  font-family: var(--sfz-mono) !important;
+  font-variant-numeric: tabular-nums;
+  border-radius: 0;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+/* The focus ring.
+ *
+ * main.less holds `* { outline: 0 !important }`, which takes the ring that the
+ * browser draws off every element of the page, and thus off this panel. A
+ * person on the keyboard then has no sign at all of where the focus sits. The
+ * rule below puts a ring back, inside this panel only. It carries !important
+ * because nothing except !important beats an !important declaration.
+ *
+ * The offset is negative, so the ring is drawn inside the edge of the element.
+ * A ring outside the edge is cut by the list that holds a bank row or a sample
+ * row, and by the grid that holds a pad.
+ *
+ * :focus-visible draws the ring for the keyboard and not for a press, which
+ * matters wherever the page is opened by touch, a tablet or a phone: a tap on a
+ * pad would else leave a ring behind on it. The second rule is what takes the ring off a press. A
+ * browser that does not know :focus-visible drops that rule and then shows the
+ * ring for a press as well, which is the safe way for it to fail. */
+#sfzbuilder-library :focus {
+  outline: 2px solid var(--sfz-focus) !important;
+  outline-offset: -2px;
+}
+#sfzbuilder-library :focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+/* The panel is a wrapper, not the root. window.js hides and shows the root
+   with jQuery, which writes an inline display value. A grid on the root would
+   fight that. */
+/* The shared header bar is 45px high and has position: fixed, so it draws over
+   the top of the panel. The panel starts below it. */
+#sfzbuilder-library .sfz-panel {
+  position: relative;
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr) 320px;
+  margin-top: 45px;
+  height: calc(100% - 45px);
+  background: var(--sfz-panel);
+}
+
+/* ---------- shared parts ---------- */
+
+#sfzbuilder-library .sfz-lbl {
+  font-size: 10px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--sfz-dim);
+}
+
+#sfzbuilder-library .sfz-seg { display: inline-flex; border: 1px solid var(--sfz-line); }
+#sfzbuilder-library .sfz-seg button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-right: 1px solid var(--sfz-line);
+  color: var(--sfz-dim);
+  padding: 7px 13px;
+  cursor: pointer;
+  font-size: 10px;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  transition: background var(--sfz-snap) linear, color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-seg button:last-child { border-right: 0; }
+#sfzbuilder-library .sfz-seg button:hover { color: var(--sfz-text); background: var(--sfz-line-soft); }
+#sfzbuilder-library .sfz-seg button[aria-pressed="true"] { background: var(--sfz-accent); color: #fff; }
+
+#sfzbuilder-library .sfz-btn {
+  appearance: none;
+  display: inline-block;
+  border: 1px solid var(--sfz-accent);
+  background: transparent;
+  color: var(--sfz-accent-fg);
+  padding: 8px 18px;
+  margin: 0;
+  cursor: pointer;
+  font-size: 11px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  font-weight: 700;
+  text-align: center;
+  transition: background var(--sfz-snap) linear, color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-btn:hover { background: var(--sfz-accent); color: #fff; }
+#sfzbuilder-library .sfz-btn:disabled,
+#sfzbuilder-library .sfz-btn.sfz-btn--off {
+  border-color: var(--sfz-line);
+  color: var(--sfz-dimmer);
+  cursor: default;
+  background: transparent;
+}
+/* A second rank of button. Rename and Delete sit beside Save and must not read
+   as the thing to press: Save is the one the panel is for. */
+#sfzbuilder-library .sfz-btn--quiet {
+  border-color: var(--sfz-line);
+  color: var(--sfz-dim);
+  padding: 8px 13px;
+}
+#sfzbuilder-library .sfz-btn--quiet:hover {
+  background: transparent;
+  border-color: var(--sfz-dim);
+  color: var(--sfz-text);
+}
+#sfzbuilder-library .sfz-btn--danger:hover {
+  border-color: var(--sfz-err);
+  color: var(--sfz-err);
+}
+
+/* The stepper: minus, a typed value, plus.
+   The panel has no bare number box. A number box is hard to hit with a finger,
+   on a tablet or a phone, and gives no limit that you can see. */
+#sfzbuilder-library .sfz-step {
+  display: inline-flex;
+  border: 1px solid var(--sfz-line);
+  height: 26px;
+}
+#sfzbuilder-library .sfz-step button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--sfz-dim);
+  width: 26px;
+  flex: 0 0 26px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+  padding: 0;
+  transition: background var(--sfz-snap) linear, color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-step button:hover { background: var(--sfz-accent); color: #fff; }
+#sfzbuilder-library .sfz-step button:disabled { color: #565656; cursor: default; background: transparent; }
+#sfzbuilder-library .sfz-step input {
+  /* Three digits and no more: the widest value the panel takes is 128 pads.
+     The tool row holds three of these fields side by side and wraps when the
+     centre column is narrow, so the width they do not need is worth having. */
+  width: 38px;
+  height: 100%;
+  background: #000;
+  border: 0;
+  border-left: 1px solid var(--sfz-line);
+  border-right: 1px solid var(--sfz-line);
+  color: var(--sfz-text);
+  text-align: center;
+  font-size: 13px;
+  padding: 0;
+}
+#sfzbuilder-library .sfz-step input:focus { color: var(--sfz-accent-fg); }
+
+/* The small stepper of a pad. minmax(0,1fr) and width:0 keep it inside the pad
+   at six columns. A bare 1fr track has an automatic minimum of the content
+   width, which pushes the stepper past the edge. */
+#sfzbuilder-library .sfz-step--mini { height: 19px; width: 100%; min-width: 0; max-width: 100%; }
+#sfzbuilder-library .sfz-step--mini button { width: 16px; flex: 0 0 16px; font-size: 11px; }
+#sfzbuilder-library .sfz-step--mini input { flex: 1 1 0; width: 0; min-width: 0; font-size: 10px; padding: 0 2px; }
+
+/* The note token. The MIDI number and the note name have one appearance in
+   every place that shows them. */
+#sfzbuilder-library .sfz-note { display: inline-flex; align-items: baseline; gap: 7px; }
+#sfzbuilder-library .sfz-note .sfz-note-num { color: var(--sfz-dim); font-size: 15px; }
+#sfzbuilder-library .sfz-note .sfz-note-name { color: var(--sfz-accent-fg); font-size: 15px; font-weight: 700; }
+#sfzbuilder-library .sfz-note--out .sfz-note-name { color: var(--sfz-err); }
+#sfzbuilder-library .sfz-step .sfz-note {
+  height: 24px;
+  align-items: center;
+  cursor: text;
+  justify-content: center;
+}
+
+/* The value of the note stepper keeps one width whatever it shows.
+ *
+ * The number goes from "0" to "127" and the name from "C2" to "A#-1", so the
+ * content is between four and seven characters wide. A box that sizes to its
+ * content thus moves the minus and the plus under the pointer while you step
+ * through the notes, and a click, which turns the box into a field that takes a
+ * number, changed the width a third time.
+ *
+ * Each part gets a column of its own, in ch, so the columns follow the font of
+ * the device instead of a measure taken here. The number is right aligned and
+ * the name left aligned, so neither one slides when the number gains a digit.
+ * --sfz-token-w is then a floor for the box, not the width itself: the content
+ * is already constant, and a min-width cannot clip a wide font the way a fixed
+ * width can. */
+#sfzbuilder-library .sfz-step .sfz-note-num,
+#sfzbuilder-library .sfz-step .sfz-note-name { flex: 0 0 auto; display: inline-block; }
+#sfzbuilder-library .sfz-step .sfz-note-num { width: 3ch; text-align: right; }
+#sfzbuilder-library .sfz-step .sfz-note-name { width: 4ch; text-align: left; }
+
+#sfzbuilder-library .sfz-tokenbox {
+  display: inline-flex;
+  justify-content: center;
+  min-width: var(--sfz-token-w);
+  border-left: 1px solid var(--sfz-line);
+  border-right: 1px solid var(--sfz-line);
+  background: #000;
+}
+/* The field that a click opens fills the box, so the box keeps its width. */
+/* flex-basis 0 and width 0, as the small stepper of a pad does: a basis of
+   auto falls back to the intrinsic width of an input, which is about twenty
+   characters, and the box grew when you clicked it. */
+#sfzbuilder-library .sfz-step input.sfz-token-edit {
+  flex: 1 1 0;
+  width: 0;
+  min-width: 0;
+  border: 0;
+}
+
+/* ---------- the bank rail ---------- */
+
+#sfzbuilder-library .sfz-rail {
+  background: var(--sfz-rail);
+  border-right: 1px solid var(--sfz-line);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+#sfzbuilder-library .sfz-rail-head {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--sfz-line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 0 0 auto;
+}
+#sfzbuilder-library .sfz-add {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--sfz-accent-fg);
+  cursor: pointer;
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+#sfzbuilder-library .sfz-add:hover { text-decoration: underline; }
+#sfzbuilder-library .sfz-bank-list { overflow-y: auto; flex: 1; min-height: 0; }
+#sfzbuilder-library .sfz-bank {
+  padding: 11px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--sfz-dim);
+  border-left: 3px solid transparent;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  transition: background var(--sfz-snap) linear, color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-bank:hover { background: #000; color: var(--sfz-text); }
+#sfzbuilder-library .sfz-bank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+#sfzbuilder-library .sfz-bank-count { font-size: 12px; color: var(--sfz-dimmer); flex: 0 0 auto; }
+#sfzbuilder-library .sfz-bank--on { background: var(--sfz-accent); color: #fff; border-left-color: #000; font-weight: 700; }
+#sfzbuilder-library .sfz-bank--on .sfz-bank-count { color: #fff; opacity: .75; }
+#sfzbuilder-library .sfz-new-bank {
+  width: 100%;
+  background: #000;
+  border: 1px solid var(--sfz-accent);
+  color: var(--sfz-text);
+  padding: 9px 14px;
+  font-size: 14px;
+}
+
+/* ---------- the centre ---------- */
+
+#sfzbuilder-library .sfz-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+/* The head is a column with a gap, not a stack with a margin under the title
+   row. The tool row is hidden while no bank is open; a margin on the title row
+   is drawn whether or not anything follows it, and left a band of empty header
+   under the title in that state. A gap is drawn between two visible rows only. */
+#sfzbuilder-library .sfz-head {
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--sfz-line);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+#sfzbuilder-library .sfz-head-top { display: flex; align-items: baseline; gap: 16px; }
+#sfzbuilder-library .sfz-title {
+  margin: 0;
+  padding: 0;
+  font-size: 17px;
+  line-height: 1.4;
+  letter-spacing: .02em;
+  color: #fff;
+  font-weight: 700;
+  font-family: var(--sfz-mono) !important;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#sfzbuilder-library .sfz-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
+/* The field that renames the bank stands where the title stands, so the name
+   does not move when you open it. */
+#sfzbuilder-library .sfz-title-edit {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 320px;
+  background: #000;
+  border: 1px solid var(--sfz-accent);
+  color: #fff;
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: .02em;
+  padding: 1px 6px;
+}
+#sfzbuilder-library .sfz-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+#sfzbuilder-library .sfz-field { display: flex; gap: 6px; align-items: center; }
+/* The mark that says the pads hold a change no save wrote. It reads as a word,
+   not as a dot: a dot beside a name means a different thing in every program
+   that draws one. */
+#sfzbuilder-library .sfz-dirty {
+  flex: 0 0 auto;
+  border: 1px solid var(--sfz-accent);
+  color: var(--sfz-accent);
+  font-size: 9px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 2px 7px;
+  align-self: center;
+}
+
+/* The status takes what the title leaves and gives the rest back to the Save
+   button, so a long message can never push Save off the line. */
+#sfzbuilder-library .sfz-status {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--sfz-dim);
+  font-family: var(--sfz-sans) !important;
+  font-size: 13px;
+  letter-spacing: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#sfzbuilder-library .sfz-status--err { color: var(--sfz-err); }
+
+/* min-height:0 is needed. A flex child that scrolls has an automatic minimum
+   height of its content. Without this it grows past the panel and draws over
+   the page behind it. min-width:0 is the same rule on the other axis, and it is
+   what lets the grid scroll sideways instead of pushing the panel wider.
+
+   The column count is what you asked for and nothing else picks it: the grid
+   never re-flows your eight pads into six rows of four. A column stretches to
+   fill whatever space is going, down to --sfz-pad-min and no further, and once
+   the count no longer fits at that width the grid scrolls sideways. So the far
+   end of the range is a choice you can still see, not one the panel silently
+   refuses. auto-fill would have been the other reading of "min width", but it
+   takes the count away from you, which is the one thing the stepper is for. */
+#sfzbuilder-library .sfz-grid {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: auto;
+  padding: 14px 14px 18px;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(var(--sfz-cols, 4), minmax(var(--sfz-pad-min), 1fr));
+  grid-auto-rows: minmax(150px, auto);
+  align-content: start;
+}
+
+/* ---------- a pad ---------- */
+
+#sfzbuilder-library .sfz-pad {
+  background: var(--sfz-cell);
+  min-width: 0;
+  border: 1px solid var(--sfz-line-soft);
+  padding: 14px 16px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: border-color var(--sfz-snap) linear, background var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-pad:hover { border-color: var(--sfz-dimmer); }
+
+/* Two columns. Column one holds the index on row one and the play control on
+   row two, so the play control uses the same space as the number. */
+#sfzbuilder-library .sfz-pad-head {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  column-gap: 8px;
+  row-gap: 3px;
+  align-items: baseline;
+}
+#sfzbuilder-library .sfz-pad-idx { grid-area: 1 / 1 / 2 / 2; color: var(--sfz-dim); font-size: 14px; }
+#sfzbuilder-library .sfz-pad-play {
+  grid-area: 2 / 1 / 3 / 2;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--sfz-dimmer);
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  width: 20px;
+  transition: color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-pad-play:hover,
+#sfzbuilder-library .sfz-pad-play.sfz-playing { color: var(--sfz-accent-fg); }
+#sfzbuilder-library .sfz-pad-meta { grid-area: 1 / 2 / 2 / 3; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
+#sfzbuilder-library .sfz-pad-clear {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--sfz-dimmer);
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 12px;
+  transition: color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-pad-clear:hover { color: var(--sfz-err); }
+#sfzbuilder-library .sfz-pad-file {
+  grid-area: 2 / 2 / 3 / 3;
+  font-size: 14px;
+  min-width: 0;
+  color: #fff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#sfzbuilder-library .sfz-pad-free {
+  font-size: 10px;
+  color: var(--sfz-dimmer);
+  letter-spacing: .16em;
+  margin: auto;
+  text-align: center;
+}
+
+/* One property on each line. This keeps a pad legible at six columns. */
+#sfzbuilder-library .sfz-props { display: grid; gap: 4px; margin-top: auto; min-width: 0; }
+#sfzbuilder-library .sfz-prop {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 5px;
+  align-items: center;
+  min-width: 0;
+}
+#sfzbuilder-library .sfz-prop .sfz-lbl { font-size: 8px; }
+#sfzbuilder-library .sfz-select {
+  width: 100%;
+  height: 19px;
+  font-size: 10px;
+  padding: 0 3px;
+  background: #000;
+  border: 1px solid var(--sfz-line);
+  color: var(--sfz-text);
+  transition: border-color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-select:focus { border-color: var(--sfz-accent); }
+
+#sfzbuilder-library .sfz-pad--empty { border-style: solid; border-color: var(--sfz-line-free); background: transparent; }
+#sfzbuilder-library .sfz-pad--filled { border-color: var(--sfz-line); }
+/* The pad that is selected gets a ring, not an inversion. A pad holds form
+   controls, so the ground must stay dark to keep them legible. */
+#sfzbuilder-library .sfz-pad--on {
+  border-color: var(--sfz-accent);
+  box-shadow: inset 0 0 0 1px var(--sfz-accent);
+  background: rgba(136, 57, 150, .07);
+}
+/* While a drag runs, each pad says that it can take the sample. Without this
+   you cannot see where to put the sample until you are already over a pad.
+   jQuery UI adds --target to every pad and --drop to the one under the
+   pointer. */
+#sfzbuilder-library .sfz-pad--target {
+  border-color: rgba(136, 57, 150, .55);
+  border-style: dashed;
+  background: rgba(136, 57, 150, .04);
+}
+#sfzbuilder-library .sfz-pad--target .sfz-pad-free { color: var(--sfz-accent-fg); }
+#sfzbuilder-library .sfz-pad--drop {
+  border-color: var(--sfz-accent);
+  border-style: solid;
+  box-shadow: inset 0 0 0 1px var(--sfz-accent);
+  background: rgba(136, 57, 150, .14);
+}
+#sfzbuilder-library .sfz-pad--drop .sfz-pad-free { color: var(--sfz-accent-fg); font-weight: 700; }
+/* The row that you took the sample from. */
+#sfzbuilder-library .sfz-sample--dragging { background: #000; color: var(--sfz-dimmer); }
+
+/* ---------- no bank ---------- */
+
+#sfzbuilder-library .sfz-empty-state {
+  flex: 1;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 14px;
+  padding: 30px;
+}
+#sfzbuilder-library .sfz-empty-state h3 {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: var(--sfz-dim);
+  font-family: var(--sfz-mono) !important;
+}
+#sfzbuilder-library .sfz-gesture {
+  display: flex;
+  gap: 26px;
+  justify-content: center;
+  color: var(--sfz-dimmer);
+  font-size: 10px;
+  letter-spacing: .1em;
+}
+#sfzbuilder-library .sfz-gesture div { display: grid; gap: 7px; justify-items: center; }
+#sfzbuilder-library .sfz-gesture .sfz-gesture-box {
+  width: 62px;
+  height: 42px;
+  border: 1px dashed #444;
+  display: grid;
+  place-items: center;
+  color: var(--sfz-accent-fg);
+  font-size: 16px;
+}
+
+/* ---------- the sample list ---------- */
+
+#sfzbuilder-library .sfz-samples {
+  border-left: 1px solid var(--sfz-line);
+  display: flex;
+  flex-direction: column;
+  background: var(--sfz-panel);
+  min-width: 0;
+  min-height: 0;
+}
+#sfzbuilder-library .sfz-samples-head {
+  padding: 14px 14px;
+  border-bottom: 1px solid var(--sfz-line);
+  display: grid;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+#sfzbuilder-library .sfz-search {
+  background: #000;
+  border: 1px solid var(--sfz-line);
+  color: var(--sfz-text);
+  padding: 7px 10px;
+  font-size: 13px;
+  width: 100%;
+}
+#sfzbuilder-library .sfz-search:focus { border-color: var(--sfz-accent); }
+#sfzbuilder-library .sfz-upload { display: block; margin: 0; padding: 7px 10px; font-size: 10px; }
+/* display:none takes the file input out of the tab order, and the label around
+   it is not focusable either, so Upload could not be reached by the keyboard at
+   all. The input is instead put where it cannot be seen but keeps its focus,
+   and the label wears the ring for it. */
+#sfzbuilder-library .sfz-upload { position: relative; }
+#sfzbuilder-library .sfz-upload input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+}
+#sfzbuilder-library .sfz-upload:focus-within {
+  outline: 2px solid var(--sfz-focus) !important;
+  outline-offset: -2px;
+}
+#sfzbuilder-library .sfz-sample-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+#sfzbuilder-library .sfz-sample {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  cursor: grab;
+  color: var(--sfz-dim);
+  transition: background var(--sfz-snap) linear, color var(--sfz-snap) linear;
+}
+#sfzbuilder-library .sfz-sample:hover { background: #000; color: var(--sfz-text); }
+#sfzbuilder-library .sfz-sample-play {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--sfz-dimmer);
+  width: 14px;
+  flex: 0 0 14px;
+  font-size: 12px;
+  cursor: pointer;
+}
+#sfzbuilder-library .sfz-sample:hover .sfz-sample-play,
+#sfzbuilder-library .sfz-sample-play.sfz-playing { color: var(--sfz-accent-fg); }
+#sfzbuilder-library .sfz-sample-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-family: var(--sfz-sans) !important;
+}
+#sfzbuilder-library .sfz-sample-size {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--sfz-dimmer);
+  flex: 0 0 auto;
+  padding-left: 6px;
+}
+#sfzbuilder-library .sfz-sample-none { padding: 14px; color: var(--sfz-dimmer); font-size: 12px; }
+
+/* The thing that you drag.
+   jQuery UI puts it on the body, outside the panel, so this rule cannot start
+   at #sfzbuilder-library. Each var() gives a value to fall back on, because
+   this element is the one that is furthest from the panel. */
+.sfz-drag-helper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 280px;
+  background: var(--sfz-accent, #883996);
+  color: #fff;
+  border: 1px solid #000;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
+  font-family: var(--sfz-mono, Menlo, monospace) !important;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 7px 12px;
+  pointer-events: none;
+  cursor: grabbing;
+  z-index: 10000;
+}
+.sfz-drag-helper * { font-family: var(--sfz-mono, Menlo, monospace) !important; }
+.sfz-drag-helper .sfz-drag-mark { font-size: 13px; line-height: 1; flex: 0 0 auto; }
+.sfz-drag-helper .sfz-drag-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--sfz-sans, system-ui, sans-serif) !important;
+  font-weight: 600;
+}
+
+/* ---------- the drop cover ---------- */
+
+#sfzbuilder-library .sfz-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: none;
+  background: rgba(0, 0, 0, .86);
+  border: 2px dashed var(--sfz-accent);
+  place-content: center;
+  text-align: center;
+  gap: 10px;
+  pointer-events: none;
+}
+#sfzbuilder-library .sfz-overlay--on { display: grid; }
+#sfzbuilder-library .sfz-overlay-big {
+  font-size: 15px;
+  letter-spacing: .24em;
+  text-transform: uppercase;
+  color: var(--sfz-accent-fg);
+  font-weight: 700;
+}
+#sfzbuilder-library .sfz-overlay-sub { font-size: 10px; letter-spacing: .12em; color: var(--sfz-dim); }
diff --git a/html/js/app/sfzbuilder/state.js b/html/js/app/sfzbuilder/state.js
new file mode 100644
index 000000000..1efbb19d2
--- /dev/null
+++ b/html/js/app/sfzbuilder/state.js
@@ -0,0 +1,76 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * The state of the SFZ builder.
+ * The view is a function of this state.
+ * Only `update` changes the state. Thus there is one place to write log messages.
+ * @module
+ */
+import { DEFAULT_PADS } from './model.js'
+
+/**
+ * @typedef {object} SfzState
+ * @property {string[]} banks
+ * @property {Record<string, number>} bankCounts How many samples each bank holds.
+ * @property {string} currentBank
+ * @property {import('./model.js').SampleFile[]} bankFiles The files of the current bank.
+ * @property {import('./model.js').SampleFile[]} files The files that the list shows.
+ * @property {(import('./model.js').Slot|null)[]} slots
+ * @property {number} selectedSlot The index of the selected pad, or -1.
+ * @property {number} baseNote
+ * @property {number} padCount
+ * @property {number} cols How many pads on each line.
+ * @property {string} source
+ * @property {string} search
+ * @property {string} status
+ * @property {boolean} statusIsError
+ * @property {boolean} dirty Whether the pads hold a change that no save wrote.
+ */
+
+/**
+ * Makes the first state.
+ * @returns {SfzState}
+ */
+export function initialState() {
+    return {
+        banks: [],
+        bankCounts: {},
+        currentBank: '',
+        bankFiles: [],
+        files: [],
+        slots: [],
+        selectedSlot: -1,
+        baseNote: 36,
+        padCount: DEFAULT_PADS,
+        cols: 4,
+        source: 'bank',
+        search: '',
+        status: '',
+        statusIsError: false,
+        dirty: false,
+    }
+}
+
+/**
+ * Makes a store that holds the state.
+ * @param {(state: SfzState) => void} onChange Runs after each change.
+ */
+export function createStore(onChange) {
+    let state = initialState()
+    return {
+        /** @returns {SfzState} */
+        get() {
+            return state
+        },
+        /**
+         * Changes the state and then draws the panel.
+         * @param {Partial<SfzState>} patch
+         */
+        update(patch) {
+            state = Object.assign({}, state, patch)
+            onChange(state)
+        },
+    }
+}
diff --git a/html/js/app/sfzbuilder/view.js b/html/js/app/sfzbuilder/view.js
new file mode 100644
index 000000000..0d792f8bb
--- /dev/null
+++ b/html/js/app/sfzbuilder/view.js
@@ -0,0 +1,728 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// @ts-check
+
+/**
+ * The markup and the drawing code of the SFZ builder.
+ *
+ * This file makes every element of the panel (architecture rule 4.3).
+ * index.html holds an empty container only. Thus the full feature is in one
+ * directory and the legacy markup does not limit the design.
+ *
+ * The file uses jQuery for one thing only: the drag of a sample onto a pad.
+ * jQuery UI gives `draggable` and `droppable`, which the old panel used and
+ * which work with a touch screen through the same code path.
+ * @module
+ */
+
+import { jq } from './legacy.js'
+import { h, clear, toggleClass, show, clickable } from './dom.js'
+import * as model from './model.js'
+
+/** What the title says when no bank is open. */
+const NO_BANK_TITLE = 'No bank'
+
+/**
+ * Makes a stepper: a minus button, a value and a plus button.
+ *
+ * The panel has no bare number box. A number box is hard to hit with a finger,
+ * on a tablet or a phone, and shows no limit.
+ *
+ * A stepper can hold no value when `nullable` is true. The gain and the root
+ * note of a pad have no value by default, which the SFZ file needs: a pad with
+ * no root note plays its sample at the written speed. The box is then empty and
+ * shows the placeholder. A minus or a plus starts from `spec.start`.
+ *
+ * @param {object} spec
+ * @param {number} spec.min
+ * @param {number} spec.max
+ * @param {number|null} spec.value
+ * @param {(value: number|null) => void} spec.onSet Runs after each change.
+ * @param {boolean} [spec.token] True draws the value as a note token.
+ * @param {boolean} [spec.nullable] True lets the value be empty.
+ * @param {number} [spec.start] The value that a click gives to an empty box.
+ * @param {string} [spec.className]
+ * @param {string} [spec.placeholder]
+ * @param {string} [spec.title]
+ * @returns {{ node: HTMLElement, set: (value: number|null) => void, get: () => number|null }}
+ */
+export function makeStepper(spec) {
+    /** @type {number|null} */
+    let value = spec.value
+    /** @type {HTMLInputElement|null} */
+    let input = null
+    /** @type {HTMLElement} */
+    let box
+
+    const minus = h('button', { type: 'button', html: '&minus;', title: 'Less' })
+    const plus = h('button', { type: 'button', text: '+', title: 'More' })
+
+    if (spec.token) {
+        // The box is a span, so it needs the tab order and the keys of a button
+        // given to it. This happens one time here and not in drawToken, which
+        // runs again after every change and would else add a listener each time.
+        box = clickable(h('span.sfz-tokenbox'), openEditor)
+    } else {
+        input = /** @type {HTMLInputElement} */ (h('input', {
+            type: 'text',
+            inputmode: 'numeric',
+            value: value === null ? '' : String(value),
+            placeholder: spec.placeholder || '',
+        }))
+        box = input
+    }
+
+    const node = h('span.sfz-step' + (spec.className ? '.' + spec.className : ''),
+        { title: spec.title || '' }, [minus, box, plus])
+
+    /** @param {number|null} next */
+    function set(next) {
+        if (next === null || isNaN(next)) {
+            value = spec.nullable ? null : spec.min
+        } else {
+            value = Math.max(spec.min, Math.min(spec.max, next))
+        }
+        draw()
+        spec.onSet(value)
+    }
+
+    /** Gives the value that a minus or a plus starts from. */
+    function base() {
+        if (value !== null) {
+            return value
+        }
+        const start = typeof spec.start === 'number' ? spec.start : spec.min
+        return Math.max(spec.min, Math.min(spec.max, start))
+    }
+
+    function draw() {
+        if (input) {
+            input.value = value === null ? '' : String(value)
+        } else {
+            drawToken()
+        }
+        // @ts-ignore - a button has `disabled`.
+        minus.disabled = value !== null && value <= spec.min
+        // @ts-ignore
+        plus.disabled = value !== null && value >= spec.max
+    }
+
+    // The token box shows "36 C2". A click turns it into a box that takes a
+    // number, so you can go to a far note without many clicks.
+    function drawToken() {
+        clear(box)
+        // A button again: the box holds text only in this condition.
+        box.setAttribute('role', 'button')
+        box.appendChild(noteTokenNode(value === null ? spec.min : value))
+    }
+
+    /** Turns the token box into the field that takes a number. */
+    function openEditor() {
+        const edit = /** @type {HTMLInputElement} */ (h('input.sfz-token-edit', {
+            type: 'text',
+            inputmode: 'numeric',
+            value: String(value),
+        }))
+        let done = false
+        function commit() {
+            if (done) {
+                return
+            }
+            done = true
+            set(parseInt(edit.value, 10))
+        }
+        clear(box)
+        // The box now holds a field that takes a number. The children of a
+        // button are presentational, so the role goes away while the field is
+        // open, or a screen reader could say nothing of what you type.
+        box.removeAttribute('role')
+        box.appendChild(edit)
+        edit.focus()
+        edit.select()
+        edit.addEventListener('blur', commit)
+        edit.addEventListener('keydown', (/** @type {any} */ e) => {
+            if (e.key === 'Enter') {
+                commit()
+            } else if (e.key === 'Escape') {
+                done = true
+                drawToken()
+                box.focus()
+            }
+        })
+    }
+
+    minus.addEventListener('click', () => set(value === null ? base() : value - 1))
+    plus.addEventListener('click', () => set(value === null ? base() : value + 1))
+    if (input) {
+        // An empty box means "no value". Thus you can go back to the automatic
+        // condition after you give a number.
+        const read = () => {
+            const text = (input ? input.value : '').trim()
+            return text === '' ? null : parseInt(text, 10)
+        }
+        input.addEventListener('change', () => set(read()))
+        input.addEventListener('keydown', (/** @type {any} */ e) => {
+            if (e.key === 'Enter') {
+                set(read())
+            }
+        })
+    }
+
+    draw()
+    return { node: node, set: set, get: () => value }
+}
+
+/**
+ * Makes the element that shows a MIDI note.
+ * The panel shows a note in three places. All three use this element, so the
+ * idea has one appearance.
+ * @param {number} note
+ * @returns {HTMLElement}
+ */
+export function noteTokenNode(note) {
+    const token = model.noteToken(note)
+    return h('span.sfz-note' + (token.inRange ? '' : '.sfz-note--out'), {}, [
+        h('span.sfz-note-num', { text: token.inRange ? String(note) : '--' }),
+        h('span.sfz-note-name', { text: token.name }),
+    ])
+}
+
+/**
+ * Makes the full panel inside the container.
+ *
+ * @param {HTMLElement} root The element of the panel, `#sfzbuilder-library`.
+ * @param {object} handlers
+ * @param {() => void} handlers.onAddBank
+ * @param {(source: string) => void} handlers.onSource
+ * @param {() => void} handlers.onUpload
+ * @param {(term: string) => void} handlers.onSearch
+ * @param {(count: number) => void} handlers.onPadCount
+ * @param {(cols: number) => void} handlers.onCols
+ * @param {(note: number) => void} handlers.onBaseNote
+ * @param {() => void} handlers.onSave
+ * @param {() => void} handlers.onRenameBank
+ * @param {() => void} handlers.onDeleteBank
+ */
+export function createLayout(root, handlers) {
+    clear(root)
+
+    const bankList = h('div.sfz-bank-list')
+    const addBank = h('button.sfz-add', { type: 'button', text: '+ New', onclick: handlers.onAddBank })
+    const rail = h('div.sfz-rail', {}, [
+        h('div.sfz-rail-head', {}, [h('span.sfz-lbl', { text: 'Banks' }), addBank]),
+        bankList,
+    ])
+
+    // "Untitled" said that the bank had no name. A bank always has a name; what
+    // the panel means here is that no bank is open, which is a different idea.
+    const title = h('h2.sfz-title', { text: NO_BANK_TITLE })
+    const saveButton = h('button.sfz-btn.sfz-save', { type: 'button', text: 'Save', title: 'Write the SFZ file of this bank' , onclick: handlers.onSave })
+    const renameButton = h('button.sfz-btn.sfz-btn--quiet', {
+        type: 'button', text: 'Rename', title: 'Change the name of this bank',
+        onclick: handlers.onRenameBank,
+    })
+    const deleteButton = h('button.sfz-btn.sfz-btn--quiet.sfz-btn--danger', {
+        type: 'button', text: 'Delete', title: 'Remove this bank and every file in it',
+        onclick: handlers.onDeleteBank,
+    })
+    // The mark that says the pads hold a change no save wrote. It is a sibling
+    // of the title and not a character added to it, so the name of the bank
+    // stays the text of the title alone -- the ellipsis of a long name would
+    // else eat the mark, and a screen reader would read it as part of the name.
+    const dirtyMark = h('span.sfz-dirty', { text: 'Unsaved', hidden: true })
+    const status = h('span.sfz-status')
+
+    const padStepper = makeStepper({
+        min: model.MIN_PADS, max: model.MAX_PADS, value: model.DEFAULT_PADS,
+        title: 'How many pads this bank has',
+        // A stepper that is not nullable never gives null. The clamp says so
+        // to the type checker and costs nothing.
+        onSet: (v) => handlers.onPadCount(model.clampPadCount(v)),
+    })
+    const colStepper = makeStepper({
+        min: model.MIN_COLS, max: model.MAX_COLS, value: model.DEFAULT_COLS,
+        title: 'How many pads on each line',
+        onSet: (v) => handlers.onCols(model.clampCols(v)),
+    })
+    const baseStepper = makeStepper({
+        min: 0, max: model.MAX_NOTE, value: model.DEFAULT_BASE_NOTE, token: true,
+        title: 'The MIDI note of the first pad',
+        onSet: (v) => handlers.onBaseNote(model.clampBaseNote(v)),
+    })
+
+    const tools = h('div.sfz-tools', {}, [
+        h('span.sfz-field', {}, [h('span.sfz-lbl', { text: 'Pads' }), padStepper.node]),
+        h('span.sfz-field', {}, [h('span.sfz-lbl', { text: 'Cols' }), colStepper.node]),
+        h('span.sfz-field', {}, [h('span.sfz-lbl', { text: 'Base' }), baseStepper.node]),
+    ])
+
+    const grid = h('div.sfz-grid')
+    const emptyState = h('div.sfz-empty-state', {}, [
+        h('h3', { text: 'No sound bank selected' }),
+        h('div.sfz-gesture', {}, [
+            h('div', {}, [h('span.sfz-gesture-box', { text: '+' }), h('span', { text: 'New bank' })]),
+            h('div', {}, [h('span.sfz-gesture-box', { html: '&#8681;' }), h('span', { text: 'Drop audio' })]),
+            h('div', {}, [h('span.sfz-gesture-box', { html: '&#9654;' }), h('span', { text: 'Drag to a pad' })]),
+        ]),
+    ])
+
+    const center = h('div.sfz-center', {}, [
+        // The status sits on the title line, not in the tool row. The tool row
+        // is hidden while no bank is open, and that is exactly when the panel
+        // has the most to say ("Select a bank first"); the head is never
+        // hidden. In the tool row it also wrapped onto a line of its own as
+        // soon as the centre column went under about 490px, which read as an
+        // empty line under the title.
+        h('div.sfz-head', {}, [
+            h('div.sfz-head-top', {}, [title, dirtyMark, status,
+                h('div.sfz-head-right', {}, [renameButton, deleteButton, saveButton])]),
+            tools,
+        ]),
+        grid,
+        emptyState,
+    ])
+
+    /** @type {HTMLElement[]} */
+    const sourceButtons = []
+    const sourceBar = h('div.sfz-seg')
+    for (const entry of [['bank', 'Bank'], ['device', 'Device'], ['usb', 'USB']]) {
+        const button = h('button', {
+            type: 'button',
+            text: entry[1],
+            'data-source': entry[0],
+            'aria-pressed': entry[0] === 'bank' ? 'true' : 'false',
+            onclick: () => handlers.onSource(entry[0]),
+        })
+        sourceButtons.push(button)
+        sourceBar.appendChild(button)
+    }
+
+    const uploadInput = /** @type {HTMLInputElement} */ (h('input', {
+        type: 'file', multiple: true, accept: 'audio/*', onchange: handlers.onUpload,
+    }))
+    const search = /** @type {HTMLInputElement} */ (h('input.sfz-search', {
+        type: 'search', placeholder: 'FILTER…', autocomplete: 'off',
+        oninput: () => handlers.onSearch(search.value || ''),
+    }))
+    const sampleList = h('ul.sfz-sample-list')
+
+    const samples = h('div.sfz-samples', {}, [
+        h('div.sfz-samples-head', {}, [
+            h('span.sfz-lbl', { text: 'Samples' }),
+            sourceBar,
+            h('label.sfz-btn.sfz-upload', {}, ['Upload', uploadInput]),
+            search,
+        ]),
+        sampleList,
+    ])
+
+    const overlaySub = h('div.sfz-overlay-sub')
+    const overlay = h('div.sfz-overlay', {}, [
+        h('div.sfz-overlay-big', { text: 'Drop audio files' }),
+        overlaySub,
+    ])
+
+    // The shared header bar of the other panels. main.less draws it, so the
+    // classes and the structure must be the same as the other panels. The one
+    // difference is in main.less: this panel does not draw the MOD icon.
+    const header = h('header', {}, [
+        h('h1.bottom.top', { text: 'Sound Bank Builder' }),
+    ])
+
+    const panel = h('div.sfz-panel', {}, [rail, center, samples, overlay])
+    root.appendChild(header)
+    root.appendChild(panel)
+
+    return {
+        root, header, panel, rail, bankList, addBank,
+        title, saveButton, renameButton, deleteButton, tools, status, dirtyMark,
+        grid, emptyState,
+        sourceButtons, uploadInput, search, sampleList,
+        overlay, overlaySub,
+        padStepper, colStepper, baseStepper,
+    }
+}
+
+/** @typedef {ReturnType<typeof createLayout>} Elements */
+
+/**
+ * Shows the status message.
+ * @param {Elements} el
+ * @param {string} message
+ * @param {boolean} isError
+ */
+export function renderStatus(el, message, isError) {
+    el.status.textContent = message || ''
+    toggleClass(el.status, 'sfz-status--err', isError)
+}
+
+/**
+ * Keeps the title, the tools and the Save button in step with the bank.
+ * @param {Elements} el
+ * @param {import('./state.js').SfzState} state
+ */
+export function renderBankView(el, state) {
+    const bank = state.currentBank
+    el.title.textContent = bank || NO_BANK_TITLE
+    show(el.emptyState, !bank)
+    show(el.grid, !!bank)
+    show(el.tools, !!bank)
+    el.dirtyMark.hidden = !bank || !state.dirty
+    for (const button of [el.saveButton, el.renameButton, el.deleteButton]) {
+        // @ts-ignore - a button has `disabled`.
+        button.disabled = !bank
+    }
+    el.overlaySub.textContent = bank
+        ? 'WAV · FLAC · AIFF · OGG · MP3 — added to ' + bank
+        : 'Select a bank first'
+    el.grid.style.setProperty('--sfz-cols', String(state.cols))
+    for (const button of el.sourceButtons) {
+        button.setAttribute('aria-pressed', button.getAttribute('data-source') === state.source ? 'true' : 'false')
+    }
+}
+
+/**
+ * Draws the list of the banks.
+ * @param {Elements} el
+ * @param {import('./state.js').SfzState} state
+ * @param {(name: string) => void} onSelect
+ */
+export function renderBanks(el, state, onSelect) {
+    clear(el.bankList)
+    for (const name of state.banks) {
+        const row = clickable(h('div.sfz-bank' + (name === state.currentBank ? '.sfz-bank--on' : ''), {
+            title: name,
+            'aria-pressed': name === state.currentBank ? 'true' : 'false',
+        }, [
+            h('span.sfz-bank-name', { text: name }),
+            h('span.sfz-bank-count', { text: countLabel(state.bankCounts[name]) }),
+        ]), () => onSelect(name))
+        el.bankList.appendChild(row)
+    }
+}
+
+/**
+ * @param {number|undefined} count
+ * @returns {string}
+ */
+function countLabel(count) {
+    return typeof count === 'number' ? String(count) : ''
+}
+
+/**
+ * Turns the title into a field that takes a new name for the bank.
+ *
+ * The rename happens where the name is, the same way a new bank is named in
+ * the place the row will take. The panel opens no dialog of its own: the one
+ * dialog it uses is the browser confirm before a delete, which is what the
+ * legacy code does for a change that cannot be undone.
+ * @param {Elements} el
+ * @param {(name: string) => void} onCommit
+ */
+export function promptRenameBank(el, onCommit) {
+    const current = el.title.textContent || ''
+    if (el.title.parentNode === null || el.title.hidden) {
+        return
+    }
+    const input = /** @type {HTMLInputElement} */ (h('input.sfz-title-edit', {
+        type: 'text', value: current, 'aria-label': 'The name of this bank',
+    }))
+    el.title.hidden = true
+    el.title.parentNode.insertBefore(input, el.title)
+    input.focus()
+    input.select()
+
+    let done = false
+    /** @param {boolean} back Whether the focus goes to the Rename button. */
+    function close(back) {
+        done = true
+        el.title.hidden = false
+        if (input.parentNode) {
+            input.parentNode.removeChild(input)
+        }
+        if (back) {
+            el.renameButton.focus()
+        }
+    }
+    input.addEventListener('keydown', (/** @type {any} */ e) => {
+        if (e.key === 'Enter') {
+            const name = (input.value || '').trim()
+            close(true)
+            if (name && name !== current) {
+                onCommit(name)
+            }
+        } else if (e.key === 'Escape') {
+            // A stray Escape must not reach the window manager and close the
+            // panel with the field still open.
+            e.stopPropagation()
+            close(true)
+        }
+    })
+    input.addEventListener('blur', () => {
+        if (!done) {
+            close(false)
+        }
+    })
+}
+
+/**
+ * Opens the box that takes the name of a new bank.
+ * @param {Elements} el
+ * @param {(name: string) => void} onCommit
+ */
+export function promptNewBank(el, onCommit) {
+    if (el.bankList.querySelector('.sfz-new-bank')) {
+        return
+    }
+    const input = /** @type {HTMLInputElement} */ (h('input.sfz-new-bank', {
+        type: 'text', placeholder: 'Bank name',
+    }))
+    el.bankList.insertBefore(input, el.bankList.firstChild)
+    input.focus()
+    let done = false
+    function close() {
+        if (input.parentNode) {
+            input.parentNode.removeChild(input)
+        }
+    }
+    input.addEventListener('keydown', (/** @type {any} */ e) => {
+        if (e.key === 'Enter') {
+            done = true
+            const name = (input.value || '').trim()
+            close()
+            onCommit(name)
+        } else if (e.key === 'Escape') {
+            done = true
+            close()
+        }
+    })
+    input.addEventListener('blur', () => {
+        if (!done) {
+            close()
+        }
+    })
+}
+
+/**
+ * Draws the list of the samples.
+ * @param {Elements} el
+ * @param {import('./state.js').SfzState} state
+ * @param {{ onPlay: (button: HTMLElement, fullname: string) => void, onPick: (file: import('./model.js').SampleFile) => void }} handlers
+ */
+export function renderSamples(el, state, handlers) {
+    const $ = jq()
+    const files = model.filterFiles(state.files, state.search)
+    clear(el.sampleList)
+
+    if (files.length === 0) {
+        el.sampleList.appendChild(h('li.sfz-sample-none', {
+            text: state.search ? 'No sample has that name' : 'No sample here',
+        }))
+        return
+    }
+
+    for (const f of files) {
+        const play = h('button.sfz-sample-play', {
+            type: 'button',
+            html: '&#9654;',
+            title: 'Play this sample',
+            onclick: (/** @type {Event} */ e) => {
+                e.stopPropagation()
+                handlers.onPlay(play, f.fullname)
+            },
+        })
+        // A click fills the pad that is selected. This is the path for a touch
+        // screen, where a drag is awkward, and for the keyboard.
+        //
+        // The row holds a play button, so it keeps the listitem role that a li
+        // inside a ul already has. A button role would let a screen reader drop
+        // that play button.
+        const row = clickable(h('li.sfz-sample', {
+            title: f.fullname,
+            'aria-label': f.basename + ', put on the pad that is selected',
+        }, [
+            play,
+            h('span.sfz-sample-name', { text: f.basename }),
+            h('span.sfz-sample-size', { text: model.formatSize(f.size) }),
+        ]), () => handlers.onPick(f), null)
+
+        const $row = $(row)
+        $row.data('sfz-file', f)
+        $row.draggable({
+            revert: 'invalid',
+            // The helper goes on the body so that the panel, which hides what
+            // goes past its edge, does not cut it.
+            appendTo: 'body',
+            helper: () => $(h('div.sfz-drag-helper', {}, [
+                h('span.sfz-drag-mark', { html: '&#9654;' }),
+                h('span.sfz-drag-name', { text: f.basename }),
+            ])),
+            // The pointer holds the helper near its left edge, so the name is
+            // beside the pointer and the pad below stays visible.
+            cursorAt: { left: 14, top: 14 },
+            // A click puts the sample on the pad that is selected. A drag needs
+            // a longer movement, so a small movement does not eat the click.
+            distance: 6,
+            zIndex: 10000,
+            start: () => row.classList.add('sfz-sample--dragging'),
+            stop: () => row.classList.remove('sfz-sample--dragging'),
+        })
+
+        el.sampleList.appendChild(row)
+    }
+}
+
+/**
+ * Draws the pads.
+ *
+ * The gain, root and loop controls send one field each to `onEdit`. They do not
+ * draw the pads again, so the focus stays in the box while you type.
+ *
+ * @param {Elements} el
+ * @param {import('./state.js').SfzState} state
+ * @param {object} handlers
+ * @param {(index: number, file: import('./model.js').SampleFile) => void} handlers.onAssign
+ * @param {(index: number) => void} handlers.onSelect
+ * @param {(index: number) => void} handlers.onClear
+ * @param {(button: HTMLElement, fullname: string) => void} handlers.onPlay
+ * @param {(slot: import('./model.js').Slot) => string} handlers.previewUrl
+ * @param {(index: number, patch: Partial<import('./model.js').Slot>) => void} handlers.onEdit
+ */
+export function renderSlots(el, state, handlers) {
+    const $ = jq()
+    clear(el.grid)
+    el.grid.style.setProperty('--sfz-cols', String(state.cols))
+
+    state.slots.forEach((slot, idx) => {
+        const note = model.padNote(state.baseNote, idx)
+
+        const head = h('div.sfz-pad-head', {}, [
+            h('span.sfz-pad-idx', { text: padIndex(idx) }),
+            h('div.sfz-pad-meta', {}, [
+                noteTokenNode(note),
+                slot ? h('button.sfz-pad-clear', {
+                    type: 'button',
+                    html: '&times;',
+                    title: 'Clear this pad',
+                    onclick: (/** @type {Event} */ e) => {
+                        e.stopPropagation()
+                        handlers.onClear(idx)
+                    },
+                }) : null,
+            ]),
+        ])
+
+        if (slot) {
+            const preview = handlers.previewUrl(slot)
+            const play = h('button.sfz-pad-play', {
+                type: 'button',
+                html: '&#9654;',
+                title: preview ? 'Play this sample' : 'This sample is not here yet',
+                disabled: !preview,
+                onclick: (/** @type {Event} */ e) => {
+                    e.stopPropagation()
+                    if (preview) {
+                        handlers.onPlay(play, preview)
+                    }
+                },
+            })
+            head.appendChild(play)
+            head.appendChild(h('div.sfz-pad-file', { text: slot.sample, title: slot.sample }))
+        }
+
+        // A pad is a group, not a button. It holds the clear and play buttons,
+        // two steppers and the loop menu, and the children of a button are
+        // presentational: a screen reader may drop every one of them. A group
+        // keeps its children. aria-pressed belongs to a button, so the
+        // selection is said in the label instead.
+        const pad = clickable(h('div.sfz-pad'
+            + (slot ? '.sfz-pad--filled' : '.sfz-pad--empty')
+            + (idx === state.selectedSlot ? '.sfz-pad--on' : ''),
+            {
+                'aria-label': 'Pad ' + (idx + 1) + ', note ' + model.noteToken(note).name
+                    + (slot ? ', ' + slot.sample : ', free')
+                    + (idx === state.selectedSlot ? ', selected' : ''),
+            },
+            [head, slot ? padProps(slot, idx, handlers.onEdit) : h('div.sfz-pad-free', { text: '— FREE —' })]),
+            () => handlers.onSelect(idx), 'group')
+
+        // Each pad takes its own drop, so a sample lands where you put it.
+        $(pad).droppable({
+            accept: '.sfz-sample',
+            // --target marks every pad while a drag runs, so you can see where
+            // a sample can go. --drop marks the pad under the pointer.
+            activeClass: 'sfz-pad--target',
+            hoverClass: 'sfz-pad--drop',
+            tolerance: 'pointer',
+            drop: (/** @type {any} */ _e, /** @type {any} */ ui) => {
+                const entry = ui.draggable.data('sfz-file')
+                if (entry) {
+                    handlers.onAssign(idx, entry)
+                }
+            },
+        })
+
+        el.grid.appendChild(pad)
+    })
+}
+
+/**
+ * @param {number} idx
+ * @returns {string}
+ */
+function padIndex(idx) {
+    const n = idx + 1
+    return n < 10 ? '0' + n : String(n)
+}
+
+/**
+ * Makes the gain, root and loop controls of one pad.
+ * One control on each line. This keeps a pad legible at eight columns.
+ *
+ * A control sends the index of its pad and the one field it changed, never the
+ * pad object it was drawn from. The pads are not drawn again while you edit --
+ * the focus has to stay in the box you are typing in -- so a control that held
+ * the object would go on writing into a pad that the store had already
+ * replaced.
+ * @param {import('./model.js').Slot} slot The values the controls open with.
+ * @param {number} idx
+ * @param {(index: number, patch: Partial<import('./model.js').Slot>) => void} onEdit
+ * @returns {HTMLElement}
+ */
+function padProps(slot, idx, onEdit) {
+    const gain = makeStepper({
+        min: -144, max: 48, value: typeof slot.volume === 'number' ? slot.volume : null,
+        nullable: true, start: 0, placeholder: '0',
+        className: 'sfz-step--mini',
+        title: 'Gain in dB. An empty box means no change.',
+        onSet: (v) => onEdit(idx, { volume: v }),
+    })
+
+    // The root note has no value by default. sfizz then plays the sample at the
+    // written speed, which is correct for a drum hit. An empty box keeps that.
+    const root = makeStepper({
+        min: 0, max: model.MAX_NOTE,
+        value: typeof slot.pitch === 'number' ? slot.pitch : null,
+        nullable: true, start: model.DEFAULT_BASE_NOTE, placeholder: 'AUTO',
+        className: 'sfz-step--mini',
+        title: 'The note that plays the sample at the written speed. Empty is automatic.',
+        onSet: (v) => onEdit(idx, { pitch: v }),
+    })
+
+    const loop = /** @type {HTMLSelectElement} */ (h('select.sfz-select', {
+        title: 'What happens when you release the pad',
+        onchange: () => onEdit(idx, { loop: loop.value }),
+    }, [
+        h('option', { value: 'one_shot', text: 'ONE_SHOT' }),
+        h('option', { value: 'no_loop', text: 'NO_LOOP' }),
+    ]))
+    loop.value = slot.loop
+
+    const props = h('div.sfz-props', {}, [
+        h('span.sfz-prop', {}, [h('span.sfz-lbl', { text: 'Gain' }), gain.node]),
+        h('span.sfz-prop', {}, [h('span.sfz-lbl', { text: 'Root' }), root.node]),
+        loop,
+    ])
+    props.addEventListener('click', (e) => e.stopPropagation())
+    return props
+}
diff --git a/html/js/desktop.js b/html/js/desktop.js
index e0eb5f53f..1b04b4a54 100644
--- a/html/js/desktop.js
+++ b/html/js/desktop.js
@@ -36,9 +36,14 @@ function Desktop(elements) {
         cloudPluginBoxTrigger: $('<div>'),
         patchstorageBox: $('<div>'),
         patchstorageBoxTrigger: $('<div>'),
+        patchstorageHub: $('<div>'),
+        patchstoragePedalboardsBox: $('<div>'),
+        patchstorageShareWindow: $('<div>'),
         pedalboardTrigger: $('<div>'),
         fileManagerBox: $('<div>'),
         fileManagerBoxTrigger: $('<div>'),
+        sfzBuilderBox: $('<div>'),
+        sfzBuilderBoxTrigger: $('<div>'),
         pedalboardBox: $('<div>'),
         pedalboardBoxTrigger: $('<div>'),
         bankBox: $('<div>'),
@@ -202,7 +207,7 @@ function Desktop(elements) {
         pedalPresetsOverlay: elements.pedalPresetsOverlay,
         hardwareManager: self.hardwareManager,
         renamedCallback: function (name) {
-            self.titleBox.text((self.title || 'Untitled') + " - " + (name || 'Default'))
+            self.setTitleBox((self.title || 'Untitled') + " - " + (name || 'Default'))
         }
     })
 
@@ -367,6 +372,8 @@ function Desktop(elements) {
         $('#plugins-library').css('z-index', -1)
         $('#cloud-plugins-library').css('z-index', -1)
         $('#patchstorage-library').css('z-index', -1)
+        $('#patchstorage-pedalboards-library').css('z-index', -1)
+        $('#patchstorage-hub').css('z-index', -1)
         $('#pedalboards-library').css('z-index', -1)
         $('#bank-library').css('z-index', -1)
         $('#main-menu').css('z-index', -1)
@@ -728,14 +735,22 @@ function Desktop(elements) {
                                         elements.effectBoxTrigger)
     this.cloudPluginBox = self.makeCloudPluginBox(elements.cloudPluginBox,
                                                   elements.cloudPluginBoxTrigger)
+    this.patchstorageHub = self.makePatchstorageHub(elements.patchstorageHub,
+                                                    elements.patchstorageBoxTrigger)
     this.patchstorageBox = self.makePatchstorageBox(elements.patchstorageBox,
                                                   elements.patchstorageBoxTrigger)
+    this.patchstoragePedalboardsBox = self.makePatchstoragePedalboardsBox(
+                                                  elements.patchstoragePedalboardsBox,
+                                                  elements.patchstorageBoxTrigger)
+    this.patchstorageShareWindow = elements.patchstorageShareWindow.patchstorageShareBox()
     this.pedalboardBox = self.makePedalboardBox(elements.pedalboardBox,
                                                 elements.pedalboardBoxTrigger)
     this.bankBox = self.makeBankBox(elements.bankBox,
                                     elements.bankBoxTrigger)
     this.fileManagerBox = self.makeFileManagerBox(elements.fileManagerBox,
                                                   elements.fileManagerBoxTrigger)
+    this.sfzBuilderBox = self.makeSfzBuilderBox(elements.sfzBuilderBox,
+                                                elements.sfzBuilderBoxTrigger)
 
     this.getPluginsData = function (uris, callback) {
         $.ajax({
@@ -1016,7 +1031,7 @@ function Desktop(elements) {
                     self.pedalboardPresetId = resp.id
                     self.pedalboardPresetName = resp.title
                     self.pedalboardModified = true
-                    self.titleBox.text((self.title || 'Untitled') + " - " + resp.title)
+                    self.setTitleBox((self.title || 'Untitled') + " - " + resp.title)
                     new Notification('info', 'Pedalboard snapshot saved', 2000)
                 },
                 error: function () {
@@ -1099,6 +1114,53 @@ function Desktop(elements) {
         })
     })
 
+    this.recordingElapsedTimer = null
+
+    elements.recorderButton.click(function () {
+        if (elements.recorderButton.hasClass('recording')) {
+            $.ajax({
+                url: '/recording/stop',
+                cache: false,
+                dataType: 'json',
+                success: function (resp) {
+                    if (!resp.ok) {
+                        new Notification('error', "Can't stop recording: " + resp.error, 3000)
+                    }
+                    // button state itself is driven by the "recording stop" WS echo
+                },
+                error: function () {
+                    new Notification('error', "Can't stop recording. Probably a connection problem.", 3000)
+                }
+            })
+        } else {
+            $.ajax({
+                url: '/recording/start',
+                cache: false,
+                dataType: 'json',
+                success: function (resp) {
+                    if (!resp.ok) {
+                        new Notification('error', "Can't start recording: " + resp.error, 3000)
+                    }
+                    // button state itself is driven by the "recording start" WS echo
+                },
+                error: function () {
+                    new Notification('error', "Can't start recording. Probably a connection problem.", 3000)
+                }
+            })
+        }
+    })
+
+    $.ajax({
+        url: '/recording/status',
+        cache: false,
+        dataType: 'json',
+        success: function (resp) {
+            if (resp.recording) {
+                self.setRecordingState(true, resp.filename, resp.elapsed)
+            }
+        }
+    })
+
     elements.shareButton.click(function () {
         var share = function () {
             if (self.pedalboardEmpty) {
@@ -1111,9 +1173,7 @@ function Desktop(elements) {
                 return new Notification('warn', 'No plugins loaded, cannot share', 1500)
             }
 
-            self.validatePlugins(uris, function (stable) {
-                elements.shareWindow.shareBox('open', self.pedalboardBundle, self.title, stable)
-            })
+            self.sharePedalboardOnPatchstorage(self.pedalboardBundle)
         }
 
         if (self.pedalboardModified || ! (self.pedalboardEmpty || self.pedalboardBundle)) {
@@ -1125,35 +1185,11 @@ function Desktop(elements) {
         }
     })
 
+    // The share-clip record/play/download flow below is dead: the endpoints it used
+    // (/recording/start,stop,play/*,download,reset) were repurposed for session recording
+    // (see the toolbar record button and RECORDINGS_DIR). Its markup (#record-step-*) in
+    // index.html is also unreachable and left in place, unused.
     elements.shareWindow.shareBox({
-        recordStart: ajaxFactory('/recording/start', "Can't record. Probably a connection problem."),
-        recordStop: ajaxFactory('/recording/stop', "Can't stop record. Probably a connection problem. Please try stopping again"),
-        playStart: function (startCallback, stopCallback) {
-            $.ajax({
-                url: '/recording/play/start',
-                success: function (resp) {
-                    $.ajax({
-                        url: '/recording/play/wait',
-                        success: stopCallback,
-                        error: function () {
-                            new Error("Couln't check when sample playing has ended")
-                        },
-                        cache: false,
-                        dataType: 'json'
-                    })
-                    startCallback(resp)
-                },
-                error: function () {
-                    new Error("Can't play. Probably a connection problem.")
-                },
-                cache: false,
-                dataType: 'json'
-            })
-        },
-        playStop: ajaxFactory('/recording/play/stop', "Can't stop playing. Probably a connection problem. Please try stopping again"),
-        recordDownload: ajaxFactory('/recording/download', "Can't download recording. Probably a connection problem."),
-        recordReset: ajaxFactory('/recording/reset', "Can't reset your recording. Probably a connection problem."),
-
         share: function (data, callback) {
             if (! data.reauthorized) {
                 // save user data
@@ -1273,6 +1309,7 @@ function Desktop(elements) {
     elements.cloudPluginBoxTrigger.statusTooltip()
     elements.patchstorageBoxTrigger.statusTooltip()
     elements.fileManagerBoxTrigger.statusTooltip()
+    elements.sfzBuilderBoxTrigger.statusTooltip()
 
     this.upgradeWindow = elements.upgradeWindow.upgradeWindow({
         icon: elements.upgradeIcon,
@@ -1461,7 +1498,7 @@ Desktop.prototype.makePedalboard = function (el, effectBox) {
                     self.pedalboardPresetId = 0
                     self.pedalboardPresetName = ''
                     self.pedalboardDemoPluginsNotified = false
-                    self.titleBox.text('Untitled')
+                    self.setTitleBox('Untitled')
                     self.titleBox.addClass("blend")
                     self.transportControls.resetControlsEnabled()
 
@@ -1707,10 +1744,45 @@ Desktop.prototype.makeCloudPluginBox = function (el, trigger) {
     })
 }
 
-Desktop.prototype.makePatchstorageBox = function (el, trigger) {
+Desktop.prototype.makePatchstorageHub = function (el, menuTrigger) {
     var self = this
-    return el.patchstorageBox({
-        trigger: trigger,
+    if (!el || !el.length) {
+        console.error('[patchstorage] #patchstorage-hub not found in DOM')
+        return el
+    }
+
+    el.window({
+        trigger: menuTrigger,
+        windowManager: this.windowManager,
+        windowName: "Patchstorage",
+        isMainWindow: true
+    })
+
+    el.find('.ps-hub-asset').on('click', function () {
+        var asset = $(this).data('asset')
+        el.window('close')
+        if (asset === 'plugins') {
+            self.patchstorageBox.removeClass('mod-hidden')
+            self.patchstorageBox.window('open')
+        } else if (asset === 'pedalboards') {
+            self.patchstoragePedalboardsBox.removeClass('mod-hidden')
+            self.patchstoragePedalboardsBox.window('open')
+        }
+        // Keep the blue P selected while a child page is open
+        if (menuTrigger && menuTrigger.length) {
+            menuTrigger.addClass('selected')
+            $('#mod-plugins').removeClass('selected')
+        }
+    })
+
+    return el
+}
+
+Desktop.prototype.makePatchstorageBox = function (el, menuTrigger) {
+    var self = this
+    var box = el.patchstorageBox({
+        // Hub owns the menu trigger; this page is opened from the hub
+        trigger: null,
         windowManager: this.windowManager,
         removePluginBundles: function (bundles, callback) {
             if (!confirm('You are about to remove this plugin and any other in the same bundle. This may break pedalboards that depend on them.'))
@@ -1743,6 +1815,88 @@ Desktop.prototype.makePatchstorageBox = function (el, trigger) {
             self.installationQueue.installUsingURI(uri, usingLabs, callback)
         }
     })
+
+    el.data('trigger', menuTrigger)
+
+    el.find('.js-ps-back').on('click', function () {
+        el.window('close')
+        self.patchstorageHub.window('open')
+        return false
+    })
+
+    return box
+}
+
+Desktop.prototype.sharePedalboardOnPatchstorage = function (bundlepath, callback) {
+    var self = this
+    self.patchstorageShareWindow.patchstorageShareBox('open', bundlepath, function (result) {
+        self.previousPedalboardList = null
+        self.patchstoragePedalboardsBox.data('localPedalboards', null)
+        self.patchstoragePedalboardsBox.data('cloudPedalboards', null)
+        self.patchstoragePedalboardsBox.data('mergedPedalboards', null)
+        if (callback) {
+            callback(result)
+        }
+    })
+}
+
+Desktop.prototype.makePatchstoragePedalboardsBox = function (el, menuTrigger) {
+    var self = this
+
+    if (!$.fn.patchstoragePedalboardsBox) {
+        console.error('[patchstorage] patchstorage_pedalboards.js did not load ($.fn.patchstoragePedalboardsBox missing)')
+        return el
+    }
+
+    if (!el || !el.length) {
+        console.error('[patchstorage] #patchstorage-pedalboards-library not found in DOM')
+        return el
+    }
+
+    var box = el.patchstoragePedalboardsBox({
+        trigger: null,
+        windowManager: this.windowManager,
+        removePedalboard: function (bundle, callback) {
+            if (!confirm('Remove this pedalboard from the device?'))
+                return
+            $.ajax({
+                url: '/pedalboard/remove/',
+                data: {
+                    bundlepath: bundle
+                },
+                success: function (ok) {
+                    self.previousPedalboardList = null
+                    if (ok) {
+                        new Notification("info", "Pedalboard removed", 2000)
+                    }
+                    callback(ok)
+                },
+                error: function () {
+                    new Bug("Couldn't remove pedalboard")
+                },
+                cache: false,
+                dataType: 'json'
+            })
+        },
+        loadPedalboard: function (bundle, callback) {
+            self.loadPedalboard(bundle, function () {
+                callback(true)
+            })
+        },
+        sharePedalboard: function (bundle, callback) {
+            self.sharePedalboardOnPatchstorage(bundle, callback)
+        }
+    })
+
+    el.data('trigger', menuTrigger)
+
+    el.find('.js-ps-back').on('click', function () {
+        el.window('close')
+        self.patchstorageHub.window('open')
+        return false
+    })
+
+    return box
 }
 
 Desktop.prototype.makeBankBox = function (el, trigger) {
@@ -1808,6 +1962,13 @@ Desktop.prototype.makeFileManagerBox = function (el, trigger) {
     })
 }
 
+Desktop.prototype.makeSfzBuilderBox = function (el, trigger) {
+    return el.sfzBuilderBox({
+        trigger: trigger,
+        windowManager: this.windowManager,
+    })
+}
+
 Desktop.prototype.reset = function (callback, skipConfirmDialog) {
     if (this.pedalboardModified && !skipConfirmDialog && !confirm("There are unsaved modifications that will be lost. Are you sure?")) {
         return
@@ -1858,6 +2019,39 @@ Desktop.prototype.setTrueBypassButton = function (channelName, state) {
     b[(state ? "add" : "remove") + "Class"]("bypassed");
 }
 
+Desktop.prototype.setRecordingState = function (recording, filename, elapsedOrDuration) {
+    var button = $("#mod-recorder")
+
+    if (this.recordingElapsedTimer) {
+        clearInterval(this.recordingElapsedTimer)
+        this.recordingElapsedTimer = null
+    }
+
+    if (recording) {
+        var startedAt = Date.now() - (elapsedOrDuration || 0) * 1000
+
+        var updateElapsed = function () {
+            var secs = Math.floor((Date.now() - startedAt) / 1000)
+            var mm = Math.floor(secs / 60)
+            var ss = (secs % 60).toString().padStart(2, '0')
+            button.text(mm + ":" + ss)
+        }
+
+        button.addClass("recording")
+        updateElapsed()
+        this.recordingElapsedTimer = setInterval(updateElapsed, 1000)
+    } else {
+        button.removeClass("recording").text("Record")
+
+        if (filename) {
+            var url = '/recording/file/' + encodeURIComponent(filename)
+            new Notification('info',
+                "Recording saved (" + Math.round(elapsedOrDuration) + "s): " +
+                "<a href=\"" + url + "\" download>" + filename + "</a>", 8000)
+        }
+    }
+}
+
 Desktop.prototype.loadPedalboard = function (bundlepath, callback) {
     var self = this
 
@@ -1885,7 +2079,7 @@ Desktop.prototype.loadPedalboard = function (bundlepath, callback) {
                 self.pedalboardEmpty = false
                 self.pedalboardModified = false
                 self.pedalboardDemoPluginsNotified = false
-                self.titleBox.text(resp.name);
+                self.setTitleBox(resp.name);
                 self.titleBox.removeClass("blend");
 
                 callback(true)
@@ -1923,7 +2117,7 @@ Desktop.prototype.saveCurrentPedalboard = function (asNew, callback) {
             self.pedalboardBundle = errorOrPath
             self.pedalboardEmpty = false
             self.pedalboardModified = false
-            self.titleBox.text(title + " - " + self.pedalboardPresetName)
+            self.setTitleBox(title + " - " + self.pedalboardPresetName)
 
             if (self.previousPedalboardList != null) {
                 for (var i=0; i<self.previousPedalboardList.length; i++) {
@@ -1953,6 +2147,12 @@ Desktop.prototype.openPresetSaveWindow = function (windowTitle, name, callback)
         })
 }
 
+Desktop.prototype.setTitleBox = function (text) {
+    this.titleBox.text(text)
+    var base = BLOKAS_ENABLED === 'true' ? 'pi-Stomp' : 'MOD'
+    document.title = (text && text !== 'Untitled') ? base + ': ' + text : base
+}
+
 JqueryClass('saveBox', {
     init: function (options) {
         var self = $(this)
diff --git a/html/js/effects.js b/html/js/effects.js
index 81654b92c..ad95a49f5 100644
--- a/html/js/effects.js
+++ b/html/js/effects.js
@@ -142,6 +142,25 @@ JqueryClass('effectBox', {
             self.effectBox('setCategory', 'All')
         }
 
+        // IntersectionObserver with root=#plugins-results so images are only fetched
+        // when they actually enter the clipped viewport of the horizontal strip, not
+        // when they're merely present in the DOM off to the side.
+        var pluginsResults = self.find('#plugins-results')[0]
+        var thumbnailObserver = new IntersectionObserver(function (entries) {
+            for (var i = 0; i < entries.length; i++) {
+                if (entries[i].isIntersecting) {
+                    var img = entries[i].target
+                    img.src = img.getAttribute('data-src')
+                    thumbnailObserver.unobserve(img)
+                }
+            }
+        }, {
+            root: pluginsResults,
+            rootMargin: '0px 300px 0px 300px',
+            threshold: 0
+        })
+        self.data('thumbnailObserver', thumbnailObserver)
+
         // don't search just yet.
         // it's a little expensive, let init time go for loading the pedalboard first
         self.effectBox('showPlugins', [])
@@ -235,6 +254,8 @@ JqueryClass('effectBox', {
 
     showPlugins: function (plugins, callback) {
         var self = $(this)
+        // Release all observed img elements before cleanResults wipes them from the DOM.
+        self.data('thumbnailObserver').disconnect()
         self.effectBox('cleanResults')
         plugins.sort(function (a, b) {
             a = a.label.toLowerCase()
@@ -396,6 +417,9 @@ JqueryClass('effectBox', {
             container.append(rendered)
         }
 
+        var img = rendered.find('img[data-src]')[0]
+        if (img) self.data('thumbnailObserver').observe(img)
+
         var index = self.data('index')
         if (!index[plugin.uri])
             index[plugin.uri] = []
diff --git a/html/js/host.js b/html/js/host.js
index fc8637b0d..6d00d7849 100644
--- a/html/js/host.js
+++ b/html/js/host.js
@@ -5,7 +5,8 @@ var ws
 var cached_cpuLoad = null,
     cached_xruns   = null,
     timeout_xruns  = null,
-    pb_loading     = true
+    pb_loading     = true,
+    pendingPlugins = null
 
 $('document').ready(function() {
     ws = new WebSocket("ws://" + window.location.host + "/websocket")
@@ -32,6 +33,12 @@ $('document').ready(function() {
         desktop && desktop.blockUI()
     }
 
+    document.addEventListener('visibilitychange', function () {
+        if (ws.readyState === WebSocket.OPEN) {
+            ws.send(document.hidden ? 'client_hidden' : 'client_visible')
+        }
+    })
+
     ws.onmessage = function (evt) {
         var data = evt.data
         var cmd = data.split(" ",1)
@@ -185,7 +192,7 @@ $('document').ready(function() {
 
             desktop.pedalboardPresetId = index
             desktop.pedalboardPresetName = name
-            desktop.titleBox.text((desktop.title || 'Untitled') + " - " + name)
+            desktop.setTitleBox((desktop.title || 'Untitled') + " - " + name)
             return
         }
 
@@ -357,30 +364,38 @@ $('document').ready(function() {
             if (plugins[instance] == null) {
                 plugins[instance] = {} // register plugin
 
-                $.ajax({
-                    url: '/effect/get',
-                    data: {
-                        uri: uri,
-                        version: VERSION,
-                        plugin_version: pVersion,
-                    },
-                    success: function (pluginData) {
-                        var instancekey = '[mod-instance="' + instance + '"]'
-
-                        if (!$(instancekey).length) {
-                            var cb = function () {
-                                desktop.pedalboard.pedalboard('scheduleAdapt', false)
-                                desktop.pedalboard.data('wait').stopPlugin(instance, !skipModified)
-                                $('#pedalboard-dashboard').unbindArrive(instancekey, cb)
+                if (pendingPlugins !== null) {
+                    // Buffered path: collect during loading_start → loading_end window
+                    // and fetch all at once via /effect/bulk/ in the loading_end handler.
+                    pendingPlugins.push({ instance: instance, uri: uri, x: x, y: y,
+                                         bypassed: bypassed, skipModified: skipModified })
+                } else {
+                    // Live path (post-load plugin add): unchanged from original.
+                    $.ajax({
+                        url: '/effect/get',
+                        data: {
+                            uri: uri,
+                            version: VERSION,
+                            plugin_version: pVersion,
+                        },
+                        success: function (pluginData) {
+                            var instancekey = '[mod-instance="' + instance + '"]'
+
+                            if (!$(instancekey).length) {
+                                var cb = function () {
+                                    desktop.pedalboard.pedalboard('scheduleAdapt', false)
+                                    desktop.pedalboard.data('wait').stopPlugin(instance, !skipModified)
+                                    $('#pedalboard-dashboard').unbindArrive(instancekey, cb)
+                                }
+                                $('#pedalboard-dashboard').arrive(instancekey, cb)
                             }
-                            $('#pedalboard-dashboard').arrive(instancekey, cb)
-                        }
 
-                        desktop.pedalboard.pedalboard("addPlugin", pluginData, instance, bypassed, x, y, {}, null, skipModified)
-                    },
-                    cache: offBuild,
-                    dataType: 'json'
-                })
+                            desktop.pedalboard.pedalboard("addPlugin", pluginData, instance, bypassed, x, y, {}, null, skipModified)
+                        },
+                        cache: offBuild,
+                        dataType: 'json'
+                    })
+                }
             }
             return
         }
@@ -489,37 +504,92 @@ $('document').ready(function() {
             data     = data.split(" ",2)
             empty    = parseInt(data[0]) != 0
             modified = parseInt(data[1]) != 0
-            pb_loading = true
+            pb_loading     = true
+            pendingPlugins = []
+            desktop.pedalboard.data('bulkLoading', true)
             desktop.pedalboard.data('wait').start('Loading pedalboard...')
             return
         }
 
         if (cmd == "loading_end") {
-            var snapshotId = parseInt(data)
-
-            $.ajax({
-                url: '/snapshot/name',
-                type: 'GET',
-                data: {
-                    id: snapshotId,
-                },
-                success: function (resp) {
-                    desktop.pedalboard.pedalboard('scheduleAdapt', true)
-                    desktop.pedalboardEmpty    = empty && !modified
-                    desktop.pedalboardModified = modified
-                    desktop.pedalboardPresetId = snapshotId
-                    desktop.pedalboardPresetName = resp.name
-
-                    if (resp.ok) {
-                        desktop.titleBox.text((desktop.title || 'Untitled') + " - " + resp.name)
+            var parts      = data.split(" ", 2)
+            var snapshotId = parseInt(parts[0])
+            var pbName     = parts.length > 1 ? data.substr(parts[0].length + 1) : ''
+            desktop.title  = pbName
+
+            // Drain and close the buffer immediately; late `add` messages (live drops)
+            // will see pendingPlugins === null and take the per-plugin AJAX path.
+            var buffered   = pendingPlugins || []
+            pendingPlugins = null
+
+            // Collect unique URIs for a single bulk fetch.
+            var uriSet = []
+            for (var i = 0; i < buffered.length; i++) {
+                if (uriSet.indexOf(buffered[i].uri) === -1) uriSet.push(buffered[i].uri)
+            }
+
+            // Wire arrive listener + addPlugin for one buffered entry.
+            // Named function avoids loop-closure variable capture bug.
+            function schedulePluginAdd(pluginData, p) {
+                var instancekey = '[mod-instance="' + p.instance + '"]'
+                if (!$(instancekey).length) {
+                    var cb = function () {
+                        desktop.pedalboard.pedalboard('scheduleAdapt', false)
+                        desktop.pedalboard.data('wait').stopPlugin(p.instance, !p.skipModified)
+                        $('#pedalboard-dashboard').unbindArrive(instancekey, cb)
                     }
+                    $('#pedalboard-dashboard').arrive(instancekey, cb)
+                }
+                desktop.pedalboard.pedalboard("addPlugin", pluginData, p.instance, p.bypassed, p.x, p.y, {}, null, p.skipModified)
+            }
+
+            // Run once both the bulk fetch and the snapshot name request resolve.
+            function finishLoading(bulkResult, resp) {
+                for (var i = 0; i < buffered.length; i++) {
+                    schedulePluginAdd(bulkResult[buffered[i].uri], buffered[i])
+                }
+                desktop.pedalboard.pedalboard('scheduleAdapt', true)
+                desktop.pedalboardEmpty      = empty && !modified
+                desktop.pedalboardModified   = modified
+                desktop.pedalboardPresetId   = snapshotId
+                desktop.pedalboardPresetName = resp.name
+                if (resp.ok) {
+                    desktop.setTitleBox((desktop.title || 'Untitled') + " - " + resp.name)
+                }
+                pb_loading = false
+                desktop.init()
+            }
 
-                    pb_loading = false
-                    desktop.init();
-                },
-                cache: false,
-                dataType: 'json'
-            })
+            if (uriSet.length === 0) {
+                // Empty pedalboard: skip bulk call, just fetch snapshot name.
+                $.ajax({
+                    url: '/snapshot/name',
+                    type: 'GET',
+                    data: { id: snapshotId },
+                    success: function (resp) { finishLoading({}, resp) },
+                    cache: false,
+                    dataType: 'json'
+                })
+            } else {
+                // Fire bulk plugin fetch and snapshot name request in parallel.
+                var doneCount = 0, bulkResult = null, snapResp = null
+                function checkBothDone() {
+                    if (++doneCount < 2) return
+                    finishLoading(bulkResult, snapResp)
+                }
+                desktop.getPluginsData(uriSet, function (result) {
+                    bulkResult = result
+                    checkBothDone()
+                })
+                $.ajax({
+                    url: '/snapshot/name',
+                    type: 'GET',
+                    data: { id: snapshotId },
+                    success: function (resp) { snapResp = resp; checkBothDone() },
+                    cache: false,
+                    dataType: 'json'
+                })
+            }
             return
         }
 
@@ -575,5 +645,17 @@ $('document').ready(function() {
             $("#mod-buffersize").text(bufsize+" frames")
             return
         }
+
+        if (cmd == "recording") {
+            data = data.split(" ")
+            var action = data[0]
+
+            if (action == "start") {
+                desktop.setRecordingState(true, data[1])
+            } else if (action == "stop") {
+                desktop.setRecordingState(false, data[1], parseFloat(data[2]))
+            }
+            return
+        }
     }
 })
diff --git a/html/js/patchstorage_pedalboards.js b/html/js/patchstorage_pedalboards.js
new file mode 100644
index 000000000..c3de1a189
--- /dev/null
+++ b/html/js/patchstorage_pedalboards.js
@@ -0,0 +1,732 @@
+function objectEmpty(obj) {
+    for (var _ in obj) return false
+    return true
+}
+
+JqueryClass('patchstoragePedalboardsBox', {
+    init: function (options) {
+        var self = $(this)
+
+        options = $.extend({
+            resultCanvas: self.find('.js-patchstorage-pedalboards'),
+            removePedalboard: function (bundle, callback) {
+                callback(false)
+            },
+            loadPedalboard: function (bundle, callback) {
+                callback(false)
+            },
+            sharePedalboard: function (bundle, callback) {
+                callback(null)
+            },
+            windowName: "Patchstorage Pedalboards",
+            info: null,
+            isMainWindow: true,
+            localPedalboards: null,
+            cloudPedalboards: null,
+            cloudPedalboardsLoaded: false,
+            localPedalboardsLoaded: false,
+            mergedPedalboards: null,
+            xhrs: []
+        }, options)
+
+        self.data(options)
+
+        var searchbox = self.find('input[type=search]')
+        searchbox.val("")
+        self.data('searchbox', searchbox)
+        searchbox.cleanableInput()
+
+        var lastKeyTimeout = null
+        function scheduleSearch() {
+            if (lastKeyTimeout != null) {
+                clearTimeout(lastKeyTimeout)
+            }
+            lastKeyTimeout = setTimeout(function () {
+                self.patchstoragePedalboardsBox('search')
+            }, 400);
+        }
+
+        searchbox.keydown(function (e) {
+            if (e.keyCode == 13) {
+                if (lastKeyTimeout != null) {
+                    clearTimeout(lastKeyTimeout)
+                    lastKeyTimeout = null
+                }
+                self.patchstoragePedalboardsBox('search')
+                return false
+            }
+            else if (e.keyCode == 8 || e.keyCode == 46) {
+                scheduleSearch()
+            }
+        })
+        searchbox.keypress(function (e) {
+            if (e.which == 13)
+                return
+            scheduleSearch()
+        })
+        searchbox.on('paste', function () {
+            scheduleSearch()
+        })
+
+        self.find('input:checkbox[name=installed]').click(function () {
+            self.find('input:checkbox[name=non-installed]').prop('checked', false)
+            self.find('input:checkbox[name=outdated]').prop('checked', false)
+            self.patchstoragePedalboardsBox('search')
+        })
+        self.find('input:checkbox[name=non-installed]').click(function () {
+            self.find('input:checkbox[name=installed]').prop('checked', false)
+            self.find('input:checkbox[name=outdated]').prop('checked', false)
+            self.patchstoragePedalboardsBox('search')
+        })
+        self.find('input:checkbox[name=outdated]').click(function () {
+            self.find('input:checkbox[name=non-installed]').prop('checked', false)
+            self.find('input:checkbox[name=installed]').prop('checked', false)
+            self.patchstoragePedalboardsBox('search')
+        })
+
+        self.find('#patchstorage_pedalboards_update_all').click(function () {
+            self.data('cloudPedalboards', null)
+            self.data('localPedalboards', null)
+            self.data('mergedPedalboards', null)
+            self.patchstoragePedalboardsBox('search')
+        })
+
+        options.open = function () {
+            self.removeClass('mod-hidden')
+            self.css({ display: 'block', opacity: 1, 'z-index': 1000 })
+            self.patchstoragePedalboardsBox('search')
+            return false
+        }
+
+        self.removeClass('mod-hidden')
+        self.window(options)
+        return self
+    },
+
+    cleanResults: function () {
+        var self = $(this)
+        self.find('.plugins-wrapper').html('')
+    },
+
+    transformCloudPedalboard: function (p) {
+        p.psid = p.id.toString()
+        p.cloud_revision = p.revision
+        p.name = unescape(p.title)
+        p.label = unescape(p.title)
+        p.comment = (p.content) ? unescape(p.content) : unescape(p.excerpt || '')
+        p.thumbnail_href = (p.artwork && p.artwork.thumbnail_url) ? p.artwork.thumbnail_url : ''
+        p.screenshot_href = (p.artwork && p.artwork.url) ? p.artwork.url : p.thumbnail_href
+        p.state = (p.state && p.state.slug) ? p.state.slug : null
+        p.uploader = (p.author && p.author.slug) ? p.author.slug : ''
+        p.status = 'available'
+        p.uri = 'ps-pedalboard:' + p.psid
+        p.supported = true
+
+        // Prefer a .pedalboard.zip file; otherwise first file
+        p.file = null
+        if (p.files && p.files.length > 0) {
+            p.files.forEach(function (f) {
+                if (!p.file && f.filename && f.filename.indexOf('.pedalboard') >= 0) {
+                    p.file = f
+                }
+            })
+            if (!p.file) {
+                p.file = p.files[0]
+            }
+        }
+
+        var tags = []
+        if (p.categories) {
+            p.categories.forEach(function (item) {
+                var name = item.slug.replace(/-/g, '').toLowerCase()
+                if (!tags.includes(name)) tags.push(name)
+            })
+        }
+        if (p.tags) {
+            p.tags.forEach(function (item) {
+                var name = item.slug.replace(/-/g, '').toLowerCase()
+                if (!tags.includes(name)) tags.push(name)
+            })
+        }
+        p.category = tags.length ? [tags[0]] : ['Other']
+        p.tags = tags.join(', ')
+
+        delete p.id
+        delete p.artwork
+        delete p.author
+        delete p.content
+        delete p.categories
+        delete p.code
+        delete p.created_at
+        delete p.preview_url
+        delete p.title
+        delete p.updated_at
+        delete p.slug
+        delete p.platform
+        delete p.excerpt
+
+        return p
+    },
+
+    transformLocalPedalboard: function (p) {
+        p.psid = (p.patchstorage && p.patchstorage.id) ? String(p.patchstorage.id) : null
+        p.local_revision = (p.patchstorage && p.patchstorage.revision) ? p.patchstorage.revision : null
+        p.name = p.title
+        p.label = p.title
+        p.uri = p.bundle
+        p.comment = ''
+        p.status = 'installed'
+
+        var ver = p.version || 0
+        var hasThumb = true
+        p.thumbnail_href = "/pedalboard/image/thumbnail.png?bundlepath=" + escape(p.bundle) + "&v=" + ver
+        p.screenshot_href = "/pedalboard/image/screenshot.png?bundlepath=" + escape(p.bundle) + "&v=" + ver
+        // Prefer local images; cloud artwork filled in on merge if needed
+        p._hasLocalImages = hasThumb
+
+        return p
+    },
+
+    mergePedalboardsData: function (lPb, cPb) {
+        if (!cPb && !lPb) {
+            return {}
+        }
+
+        if (lPb == null || lPb == undefined || objectEmpty(lPb)) {
+            return $.extend(true, {}, cPb)
+        }
+
+        if (cPb == null || cPb == undefined || objectEmpty(cPb)) {
+            return $.extend(true, {}, lPb)
+        }
+
+        lPb.psid = cPb.psid
+        lPb.files = cPb.files
+        lPb.file = cPb.file
+        lPb.cloud_revision = cPb.cloud_revision
+        lPb.download_count = cPb.download_count
+        lPb.state = cPb.state
+        lPb.url = cPb.url
+        lPb.uploader = cPb.uploader
+        lPb.tags = cPb.tags
+        lPb.donate_url = cPb.donate_url
+        lPb.comment = cPb.comment || lPb.comment
+        lPb.name = cPb.name || lPb.name
+        lPb.label = cPb.label || lPb.label
+        lPb.uri = 'ps-pedalboard:' + cPb.psid
+
+        // Prefer cloud artwork for list cards when available (more reliable than missing thumbs)
+        if (cPb.thumbnail_href) {
+            lPb.cloud_thumbnail_href = cPb.thumbnail_href
+            lPb.cloud_screenshot_href = cPb.screenshot_href
+        }
+
+        if (lPb.local_revision && lPb.cloud_revision && lPb.cloud_revision != lPb.local_revision) {
+            lPb.status = 'outdated'
+        } else {
+            lPb.status = 'installed'
+        }
+
+        return lPb
+    },
+
+    getCloudPedalboards: function (callback) {
+        var self = $(this)
+        var base = PATCHSTORAGE_API_URL
+        var platform_id = PATCHSTORAGE_PEDALBOARD_PLATFORM_ID
+        var tag_id = PATCHSTORAGE_PEDALBOARD_TAG_ID
+        var url = `${base}?per_page=100&platforms=${platform_id}`
+        if (tag_id) {
+            url += `&tags=${tag_id}`
+        }
+        var page = 1
+        var pb_map = {}
+        var cloudPedalboards = self.data('cloudPedalboards')
+
+        self.data('cloudPedalboardsLoaded', false)
+
+        if (cloudPedalboards != null) {
+            self.data('cloudPedalboardsLoaded', true)
+            callback()
+            return
+        }
+
+        var loading = new Notification('info', 'Fetching pedalboards from Patchstorage...', 7000)
+
+        function getNextPage() {
+            var xhr = $.ajax({
+                url: url + `&page=${page}`,
+                method: 'GET',
+                async: true,
+                cache: false,
+                dataType: 'json',
+                success: function (data, status, xhr) {
+                    if (!data || data.length < 1) {
+                        self.data('cloudPedalboards', pb_map)
+                        self.data('cloudPedalboardsLoaded', true)
+                        loading.close()
+                        callback()
+                        return
+                    }
+
+                    var pages = xhr.getResponseHeader('x-wp-totalpages')
+
+                    for (var i = 0; i < data.length; i++) {
+                        var pb = self.patchstoragePedalboardsBox('transformCloudPedalboard', data[i])
+                        if (pb.supported) {
+                            pb_map[pb.psid] = pb
+                        }
+                    }
+
+                    if (pages && pages > page) {
+                        page++
+                        getNextPage()
+                    } else {
+                        self.data('cloudPedalboards', pb_map)
+                        self.data('cloudPedalboardsLoaded', true)
+                        loading.close()
+                        callback()
+                    }
+                },
+                error: function (xhr, status) {
+                    if (status == 'abort') return
+                    loading.close()
+                    new Notification('error', "Connection to Patchstorage failed!", 5000)
+                    self.data('cloudPedalboards', {})
+                    self.data('cloudPedalboardsLoaded', true)
+                    callback()
+                }
+            });
+            self.data('xhrs').push(xhr)
+        }
+
+        getNextPage()
+    },
+
+    getLocalPedalboards: function (callback) {
+        var self = $(this)
+        var pb_map = {}
+        var localPedalboards = self.data('localPedalboards')
+
+        self.data('localPedalboardsLoaded', false)
+
+        if (localPedalboards != null) {
+            self.data('localPedalboardsLoaded', true)
+            callback()
+            return
+        }
+
+        var xhr = $.ajax({
+            method: 'GET',
+            url: '/pedalboard/list',
+            success: function (pedals) {
+                for (var i in pedals) {
+                    var transformed = self.patchstoragePedalboardsBox('transformLocalPedalboard', pedals[i])
+                    if (transformed.psid) {
+                        pb_map[transformed.psid] = transformed
+                    }
+                }
+                self.data('localPedalboards', pb_map)
+                self.data('localPedalboardsLoaded', true)
+                callback()
+            },
+            error: function (xhr, status) {
+                if (status == 'abort') return
+                self.data('localPedalboards', {})
+                self.data('localPedalboardsLoaded', true)
+                callback()
+            },
+            cache: false,
+            dataType: 'json'
+        })
+        self.data('xhrs').push(xhr)
+    },
+
+    mergePedalboards: function (lPbs, cPbs) {
+        var self = $(this)
+
+        if (self.data('mergedPedalboards') != null) {
+            return self.data('mergedPedalboards')
+        }
+
+        var mPbs = {}
+        var lMap = $.extend(true, {}, lPbs)
+        var cMap = $.extend(true, {}, cPbs)
+
+        function buildIndex(data) {
+            data.index = `${data.comment} ${data.name} ${data.label} ${data.uploader} ${data.tags}`.toLowerCase()
+            return data
+        }
+
+        for (var psid in cMap) {
+            var cPb = cMap[psid]
+            if (psid in lMap) {
+                var merged = self.patchstoragePedalboardsBox('mergePedalboardsData', lMap[psid], cPb)
+                mPbs[psid] = buildIndex(merged)
+                delete lMap[psid]
+            } else {
+                cPb.status = 'available'
+                mPbs[psid] = buildIndex(cPb)
+            }
+        }
+
+        // Local pedalboards previously installed from Patchstorage but no longer listed
+        for (var psid in lMap) {
+            var lPb = lMap[psid]
+            lPb.status = 'unavailable'
+            mPbs[psid] = buildIndex(lPb)
+        }
+
+        self.data('mergedPedalboards', mPbs)
+        return mPbs
+    },
+
+    search: function () {
+        var self = $(this)
+        var query = {
+            text: self.data('searchbox').val()
+        }
+
+        var xhrs = self.data('xhrs')
+        for (var i in xhrs) {
+            if (xhrs[i].abort) xhrs[i].abort()
+            delete xhrs[i]
+        }
+        self.data('xhrs', [])
+
+        var filterAvailable = function (pb) {
+            return pb.status != 'available'
+        }
+        var filterInstalled = function (pb) {
+            return !(pb.status == 'installed' || pb.status == 'outdated')
+        }
+        var filterOutdated = function (pb) {
+            return pb.status != 'outdated'
+        }
+        var filterAll = function () {
+            return false
+        }
+
+        if (self.find('input:checkbox[name=non-installed]:checked').length)
+            return self.patchstoragePedalboardsBox('searchPedalboards', query, filterAvailable)
+
+        if (self.find('input:checkbox[name=installed]:checked').length)
+            return self.patchstoragePedalboardsBox('searchPedalboards', query, filterInstalled)
+
+        if (self.find('input:checkbox[name=outdated]:checked').length)
+            return self.patchstoragePedalboardsBox('searchPedalboards', query, filterOutdated)
+
+        return self.patchstoragePedalboardsBox('searchPedalboards', query, filterAll)
+    },
+
+    searchPedalboards: function (query, shouldSkip) {
+        var self = $(this)
+
+        var renderResultsCallback = function () {
+            if (self.data('localPedalboardsLoaded') == false || self.data('cloudPedalboardsLoaded') == false) {
+                return
+            }
+
+            var pedalboards = []
+            var mPbs = self.patchstoragePedalboardsBox('mergePedalboards',
+                self.data('localPedalboards'), self.data('cloudPedalboards'))
+
+            for (var id in mPbs) {
+                var pb = mPbs[id]
+                if (shouldSkip(pb)) {
+                    continue
+                }
+                if (query && query.text && !pb.index.includes(query.text.toLowerCase())) {
+                    continue
+                }
+                pedalboards.push(pb)
+            }
+
+            self.patchstoragePedalboardsBox('renderPedalboards', pedalboards)
+        }
+
+        self.data('localPedalboardsLoaded', false)
+        self.data('cloudPedalboardsLoaded', false)
+        self.patchstoragePedalboardsBox('getCloudPedalboards', renderResultsCallback)
+        self.patchstoragePedalboardsBox('getLocalPedalboards', renderResultsCallback)
+    },
+
+    renderPedalboards: function (pedalboards) {
+        var self = $(this)
+        self.patchstoragePedalboardsBox('cleanResults')
+
+        pedalboards.sort(function (a, b) {
+            a = a.label.toLowerCase()
+            b = b.label.toLowerCase()
+            if (a > b) return 1
+            if (a < b) return -1
+            return 0
+        })
+
+        var canvas = self.find('#patch-pedalboard-content-All')
+        for (var i in pedalboards) {
+            var render = self.patchstoragePedalboardsBox('renderPedalboardCard', pedalboards[i])
+            render.appendTo(canvas)
+        }
+
+        self.find('#patchstorage-pedalboards-tab-All').html(
+            'All <span class="plugin_count">(' + pedalboards.length + ')</span>')
+    },
+
+    renderPedalboardCard: function (pb) {
+        var self = $(this)
+        var data = self.patchstoragePedalboardsBox('getPedalboardCardData', pb, false)
+        var rendered = $(Mustache.render(TEMPLATES.patchstorage_pedalboard, data))
+        rendered.click(function () {
+            self.patchstoragePedalboardsBox('showPedalboardInfo', pb)
+        })
+        return rendered
+    },
+
+    getPedalboardCardData: function (pb, full) {
+        var data = $.extend(true, {}, pb)
+
+        // Prefer Patchstorage artwork for cards — local pedalboard screenshots are full
+        // dashboard captures that look wrong in the small plugin-style thumb slot, and
+        // may show default "tuna can" icons until a fresh screenshot is generated.
+        var thumb = data.cloud_thumbnail_href || data.thumbnail_href
+        var shot = data.cloud_screenshot_href || data.screenshot_href || thumb
+
+        // Detail modal: prefer local screenshot when installed (actual board capture)
+        if (full && data.bundle && (data.status == 'installed' || data.status == 'outdated')) {
+            shot = data.screenshot_href || shot
+            thumb = data.thumbnail_href || thumb
+        }
+
+        var basic = {
+            uri: data.uri,
+            escaped_uri: escape(data.uri),
+            comment: (data.comment) ? data.comment.trim() : "No description available",
+            has_comment: (data.comment) ? null : "no_description",
+            screenshot_href: shot,
+            thumbnail_href: thumb,
+            status: data.status,
+            brand: data.uploader,
+            label: data.label,
+            download_count: data.download_count,
+            state: data.state,
+            tags: data.tags
+        }
+
+        if (basic.status == 'available') {
+            delete basic.status
+        }
+
+        if (full === false) {
+            return basic
+        }
+
+        return $.extend(true, basic, {
+            name: data.name,
+            url: data.url,
+            category: (data.category && data.category[0]) || "None",
+            local_revision: data.local_revision,
+            cloud_revision: data.cloud_revision,
+            uploader: data.uploader,
+            donate_url: data.donate_url
+        })
+    },
+
+    ensureCloudFile: function (pb, callback) {
+        var self = $(this)
+
+        if (pb.file && pb.file.url) {
+            callback(pb)
+            return
+        }
+
+        var xhr = $.ajax({
+            url: `${PATCHSTORAGE_API_URL}/${pb.psid}`,
+            method: 'GET',
+            async: true,
+            cache: false,
+            dataType: 'json',
+            success: function (data) {
+                var detail = self.patchstoragePedalboardsBox('transformCloudPedalboard', data)
+                pb.files = detail.files
+                pb.file = detail.file
+                callback(pb)
+            },
+            error: function () {
+                callback(null)
+            }
+        })
+        self.data('xhrs').push(xhr)
+    },
+
+    installPedalboard: function (pb, callback) {
+        var self = $(this)
+
+        self.patchstoragePedalboardsBox('ensureCloudFile', pb, function (ready) {
+            if (!ready || !ready.file || !ready.file.url) {
+                alert('No downloadable pedalboard file found on Patchstorage.')
+                return
+            }
+
+            var file = ready.file
+            var notification = new Notification('warning')
+            var installationMsg = 'Downloading: ' + file.filename
+
+            notification.open()
+            notification.html(installationMsg)
+            notification.type('warning')
+            notification.bar(1)
+
+            var trans = new SimpleTransference(file.url, '/pedalboard/install',
+            { to_args: { headers:
+                { 'Patchstorage-Item' : pb.psid, 'Patchstorage-Item-Version' : pb.cloud_revision }
+            }})
+
+            trans.reportPercentageStatus = function (percentage) {
+                notification.bar(percentage * 100)
+                if (percentage == 1) {
+                    installationMsg = installationMsg.replace("Downloading", "Installing")
+                    notification.html(installationMsg)
+                }
+            }
+
+            trans.reportError = function (reason) {
+                notification.close()
+                new Notification('error', "Could not install pedalboard: " + reason, 5000)
+            }
+
+            trans.reportFinished = function (resp) {
+                var result = resp.result || resp
+                if (result.ok) {
+                    notification.html(installationMsg.replace("Installing:", "Done! Installed:"))
+                    notification.bar(0)
+                    notification.type('success')
+                    notification.closeAfter(3000)
+                    if (desktop.previousPedalboardList !== undefined) {
+                        desktop.previousPedalboardList = null
+                    }
+                } else {
+                    notification.closeAfter(1000)
+                    new Notification('error', "Could not install pedalboard: " + (result.error || 'unknown error'), 5000)
+                }
+                callback(result)
+            }
+
+            trans.start()
+        })
+    },
+
+    showPedalboardInfo: function (mPb) {
+        var self = $(this)
+
+        // Refresh cloud detail for files / latest metadata
+        var xhr = $.ajax({
+            url: `${PATCHSTORAGE_API_URL}/${mPb.psid}`,
+            method: 'GET',
+            async: true,
+            cache: false,
+            dataType: 'json',
+            success: function (data) {
+                var cloud = self.patchstoragePedalboardsBox('transformCloudPedalboard', data)
+                var local = self.data('localPedalboards')[mPb.psid] || {}
+                var pb = self.patchstoragePedalboardsBox('mergePedalboardsData', local, cloud)
+                // Preserve installed status if local missing (available)
+                if (!local || objectEmpty(local)) {
+                    pb.status = 'available'
+                }
+
+                var metadata = self.patchstoragePedalboardsBox('getPedalboardCardData', pb, true)
+                var info = self.data('info')
+                if (info) {
+                    info.remove()
+                    self.data('info', null)
+                }
+
+                info = $(Mustache.render(TEMPLATES.patchstorage_pedalboard_info, metadata))
+
+                info.find('.js-install').hide()
+                info.find('.js-upgrade').hide()
+                info.find('.js-remove').hide()
+                info.find('.js-load').hide()
+                info.find('.js-share').hide()
+
+                if (pb.status == 'available') {
+                    info.find('.js-install').show().click(function () {
+                        self.patchstoragePedalboardsBox('installPedalboard', pb, function () {
+                            info.window('close')
+                            self.data('localPedalboards', null)
+                            self.data('mergedPedalboards', null)
+                            self.patchstoragePedalboardsBox('search')
+                        })
+                    })
+                }
+
+                if (pb.status == 'outdated') {
+                    info.find('.js-upgrade').show().click(function () {
+                        self.patchstoragePedalboardsBox('installPedalboard', pb, function () {
+                            info.window('close')
+                            self.data('localPedalboards', null)
+                            self.data('mergedPedalboards', null)
+                            self.patchstoragePedalboardsBox('search')
+                        })
+                    })
+                }
+
+                if (pb.status == 'installed' || pb.status == 'outdated' || pb.status == 'unavailable') {
+                    info.find('.js-remove').show().click(function () {
+                        var bundle = pb.bundle
+                        if (!bundle) {
+                            alert('Cannot determine local pedalboard path')
+                            return
+                        }
+                        self.data('removePedalboard')(bundle, function (ok) {
+                            info.window('close')
+                            self.data('localPedalboards', null)
+                            self.data('mergedPedalboards', null)
+                            self.patchstoragePedalboardsBox('search')
+                        })
+                    })
+                    info.find('.js-load').show().click(function () {
+                        if (!pb.bundle) return
+                        self.data('loadPedalboard')(pb.bundle, function () {
+                            info.window('close')
+                        })
+                    })
+                }
+
+                // Only an up-to-date copy may become the next revision, or an older copy
+                // would replace newer work. Without a login, ownership is checked after it.
+                if (pb.status == 'installed' && pb.bundle) {
+                    $.ajax({
+                        url: '/patchstorage/share/info',
+                        data: { bundlepath: pb.bundle },
+                        cache: false,
+                        dataType: 'json',
+                        success: function (resp) {
+                            if (!resp.ok || !resp.patch || (resp.auth.logged_in && !resp.patch.owned)) {
+                                return
+                            }
+                            info.find('.js-share').show().click(function () {
+                                self.data('sharePedalboard')(pb.bundle, function () {
+                                    info.window('close')
+                                    self.patchstoragePedalboardsBox('search')
+                                })
+                            })
+                        },
+                    })
+                }
+
+                info.appendTo($('body'))
+                info.window({
+                    windowName: "Patchstorage Pedalboard Info"
+                })
+                info.window('open')
+                self.data('info', info)
+            },
+            error: function () {
+                new Notification('error', 'Failed to load pedalboard details', 4000)
+            }
+        })
+        self.data('xhrs').push(xhr)
+    }
+})
diff --git a/html/js/patchstorage_share.js b/html/js/patchstorage_share.js
new file mode 100644
index 000000000..660b51b0b
--- /dev/null
+++ b/html/js/patchstorage_share.js
@@ -0,0 +1,423 @@
+// SPDX-FileCopyrightText: 2026 pi-Stomp
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Share a user pedalboard on Patchstorage. The mod-ui server does the login and the
+// upload (see mod/patchstorage_share.py); this window collects what to publish.
+//
+//   $('#patchstorage-share-window').patchstorageShareBox('open', bundlepath, onShared)
+
+JqueryClass('patchstorageShareBox', {
+    init: function () {
+        var self = $(this)
+
+        self.data('taxonomies', null)
+
+        self.find('.js-close').click(function () {
+            if (!self.data('busy')) {
+                self.patchstorageShareBox('close')
+            }
+            return false
+        })
+        self.keydown(function (e) {
+            if (e.keyCode == 27 && !self.data('busy')) {
+                self.patchstorageShareBox('close')
+                return false
+            }
+        })
+
+        self.find('.js-step-login').submit(function () {
+            self.patchstorageShareBox('login')
+            return false
+        })
+        self.find('.js-step-form').submit(function () {
+            self.patchstorageShareBox('publish')
+            return false
+        })
+        self.find('.js-logout').click(function () {
+            $.ajax({
+                url: '/patchstorage/logout',
+                method: 'POST',
+                dataType: 'json',
+                complete: function () {
+                    self.patchstorageShareBox('showLogin', '')
+                },
+            })
+            return false
+        })
+        self.find('input[name=mode]').change(function () {
+            self.patchstorageShareBox('applyMode')
+        })
+        self.find('.js-artwork-choose').click(function () {
+            self.find('input[name=artwork]').click()
+            return false
+        })
+        self.find('input[name=artwork]').change(function () {
+            self.patchstorageShareBox('chooseArtwork', this.files[0])
+        })
+
+        return self
+    },
+
+    open: function (bundlepath, onShared) {
+        var self = $(this)
+        self.data('bundlepath', bundlepath)
+        self.data('onShared', onShared || function () {})
+        self.data('info', null)
+        self.find('.js-error').text('')
+        self.patchstorageShareBox('showStep', 'loading', 'Preparing pedalboard...')
+        self.removeClass('mod-hidden').show()
+        self.focus()
+
+        // the artwork is the pedalboard screenshot; let any pending one finish first
+        desktop.waitForScreenshot(false, bundlepath, function () {
+            self.patchstorageShareBox('loadInfo', true)
+        })
+    },
+
+    close: function () {
+        var self = $(this)
+        self.data('busy', false)
+        self.find('input[type=password]').val('')
+        self.patchstorageShareBox('clearArtwork')
+        self.addClass('mod-hidden').hide()
+    },
+
+    showStep: function (step, message) {
+        var self = $(this)
+        self.find('.ps-share-step').hide()
+        self.find('.js-step-' + step).show()
+        if (message !== undefined) {
+            self.find('.js-step-' + step + ' .js-message').text(message)
+        }
+    },
+
+    fail: function (message) {
+        var self = $(this)
+        self.patchstorageShareBox('close')
+        new Notification('error', message, 6000)
+    },
+
+    loadInfo: function (generateIfMissing) {
+        var self = $(this)
+        var bundlepath = self.data('bundlepath')
+
+        $.ajax({
+            url: '/patchstorage/share/info',
+            data: { bundlepath: bundlepath },
+            cache: false,
+            dataType: 'json',
+            success: function (info) {
+                if (!info.ok) {
+                    self.patchstorageShareBox('fail', info.error)
+                    return
+                }
+                if (!info.has_screenshot && generateIfMissing) {
+                    self.patchstorageShareBox('showStep', 'loading', 'Taking a screenshot of the pedalboard...')
+                    desktop.waitForScreenshot(true, bundlepath, function () {
+                        self.patchstorageShareBox('loadInfo', false)
+                    })
+                    return
+                }
+                self.data('info', info)
+                if (info.auth.logged_in) {
+                    self.patchstorageShareBox('showForm')
+                } else {
+                    self.patchstorageShareBox('showLogin', '')
+                }
+            },
+            error: function () {
+                self.patchstorageShareBox('fail', 'Could not read the pedalboard')
+            },
+        })
+    },
+
+    showLogin: function (error) {
+        var self = $(this)
+        self.find('.js-step-login .js-error').text(error || '')
+        self.patchstorageShareBox('showStep', 'login')
+        self.find('.js-step-login input[name=username]').focus()
+    },
+
+    login: function () {
+        var self = $(this)
+        var form = self.find('.js-step-login')
+        form.find('.js-error').text('')
+        form.find('button').prop('disabled', true)
+
+        $.ajax({
+            url: '/patchstorage/login',
+            method: 'POST',
+            data: {
+                username: form.find('input[name=username]').val(),
+                password: form.find('input[name=password]').val(),
+            },
+            dataType: 'json',
+            success: function (resp) {
+                form.find('input[name=password]').val('')
+                if (!resp.ok) {
+                    form.find('.js-error').text(resp.error)
+                    return
+                }
+                // ownership of an earlier upload depends on who is logged in
+                self.patchstorageShareBox('showStep', 'loading', 'Loading...')
+                self.patchstorageShareBox('loadInfo', false)
+            },
+            error: function () {
+                form.find('.js-error').text('Could not reach the pi-Stomp')
+            },
+            complete: function () {
+                form.find('button').prop('disabled', false)
+            },
+        })
+    },
+
+    loadTaxonomies: function (callback) {
+        var self = $(this)
+        if (self.data('taxonomies')) {
+            callback(self.data('taxonomies'))
+            return
+        }
+
+        var base = PATCHSTORAGE_API_URL.replace(/\/patches\/?$/, '')
+        var names = ['licenses', 'states']
+        var result = {}
+        var failed = false
+
+        names.forEach(function (name) {
+            $.ajax({
+                url: base + '/' + name + '?per_page=100',
+                cache: true,
+                dataType: 'json',
+                success: function (items) {
+                    result[name] = items
+                },
+                error: function () {
+                    failed = true
+                },
+                complete: function () {
+                    if (Object.keys(result).length + (failed ? 1 : 0) < names.length) {
+                        return
+                    }
+                    if (failed) {
+                        callback(null)
+                        return
+                    }
+                    self.data('taxonomies', result)
+                    callback(result)
+                },
+            })
+        })
+    },
+
+    showForm: function () {
+        var self = $(this)
+        var info = self.data('info')
+        var form = self.find('.js-step-form')
+
+        self.patchstorageShareBox('showStep', 'loading', 'Loading Patchstorage options...')
+
+        self.patchstorageShareBox('loadTaxonomies', function (taxonomies) {
+            if (!taxonomies) {
+                self.patchstorageShareBox('fail', 'Could not reach Patchstorage')
+                return
+            }
+
+            function fillSelect(name, items, placeholder) {
+                var select = form.find('select[name=' + name + ']').empty()
+                if (placeholder) {
+                    select.append($('<option value="">').text(placeholder))
+                }
+                items.forEach(function (item) {
+                    select.append($('<option>').val(item.id).text(item.name).attr('data-slug', item.slug))
+                })
+            }
+            // A license is a choice the author makes, so it is never preselected.
+            // "custom" needs a license text, which this form does not collect.
+            fillSelect('license', taxonomies.licenses.filter(function (l) { return l.slug != 'custom' }),
+                       'Choose a license...')
+            fillSelect('state', taxonomies.states)
+
+            form.find('.js-username').text(info.auth.display_name || info.auth.username)
+
+            var patch = info.patch
+            var mode = form.find('.js-mode')
+            if (patch && patch.owned) {
+                mode.show().find('.js-patch-link').attr('href', patch.url).text(patch.title)
+                mode.find('.js-current-revision').text(patch.revision)
+                form.find('input[name=mode][value=update]').prop('checked', true)
+                form.find('.js-not-owned').hide()
+            } else {
+                mode.hide()
+                form.find('input[name=mode][value=new]').prop('checked', true)
+                form.find('.js-not-owned').toggle(!!patch).find('.js-author').text(patch ? patch.author : '')
+            }
+
+            self.patchstorageShareBox('clearArtwork')
+            form.find('.js-artwork').toggle(!info.has_screenshot)
+            form.find('input[name=confirm]').prop('checked', false)
+
+            self.patchstorageShareBox('applyMode')
+            self.patchstorageShareBox('showStep', 'form')
+            form.find('input[name=title]').focus()
+        })
+    },
+
+    // Fill the fields for "publish a new revision" or "share as a new pedalboard".
+    applyMode: function () {
+        var self = $(this)
+        var info = self.data('info')
+        var form = self.find('.js-step-form')
+        var update = form.find('input[name=mode]:checked').val() == 'update'
+        var patch = update ? info.patch : null
+
+        function selectBySlug(name, slug) {
+            var option = form.find('select[name=' + name + '] option[data-slug="' + slug + '"]')
+            if (option.length) {
+                form.find('select[name=' + name + ']').val(option.val())
+            }
+        }
+
+        if (patch) {
+            form.find('input[name=title]').val(patch.title)
+            form.find('textarea[name=content]').val(htmlToText(patch.content))
+            form.find('input[name=revision]').val(patch.next_revision)
+            form.find('input[name=tags]').val(patch.tags.join(', '))
+            form.find('select[name=license]').val(String(patch.license))
+            form.find('select[name=state]').val(String(patch.state))
+            form.find('input[name=preview_url]').val(patch.preview_url || '')
+            form.find('.js-preview-hint').text('(optional)')
+            form.find('.js-publish').text('Publish revision')
+        } else {
+            var description = 'A pedalboard for pi-Stomp.'
+            if (info.plugins.length) {
+                description += '\n\nPlugins: ' + info.plugins.join(', ')
+            }
+            form.find('input[name=title]').val(info.title)
+            form.find('textarea[name=content]').val(description)
+            form.find('input[name=revision]').val('1.0')
+            form.find('input[name=tags]').val(info.default_tags.join(', '))
+            form.find('select[name=license]').val('')
+            selectBySlug('state', 'ready-to-go')
+            form.find('input[name=preview_url]').val('')
+            form.find('.js-preview-hint').text('(optional)')
+            form.find('.js-publish').text('Publish')
+        }
+    },
+
+    chooseArtwork: function (file) {
+        var self = $(this)
+        var form = self.find('.js-step-form')
+        if (!file) {
+            return
+        }
+        self.patchstorageShareBox('clearArtwork')
+        if (['image/png', 'image/jpeg', 'image/gif', 'image/webp'].indexOf(file.type) < 0) {
+            form.find('.js-error').text('The artwork must be a PNG, JPEG, GIF or WebP image.')
+            return
+        }
+        if (file.size > 5 * 1024 * 1024) {
+            form.find('.js-error').text('The artwork image is too big; the limit is 5 MB.')
+            return
+        }
+        form.find('.js-error').text('')
+        self.data('artwork', file)
+        self.data('artworkUrl', URL.createObjectURL(file))
+        form.find('.js-artwork-preview').attr('src', self.data('artworkUrl')).show()
+        form.find('.js-artwork-name').text(file.name)
+    },
+
+    clearArtwork: function () {
+        var self = $(this)
+        if (self.data('artworkUrl')) {
+            URL.revokeObjectURL(self.data('artworkUrl'))
+        }
+        self.data('artwork', null)
+        self.data('artworkUrl', null)
+        self.find('input[name=artwork]').val('')
+        self.find('.js-artwork-preview').removeAttr('src').hide()
+        self.find('.js-artwork-name').text('No screenshot found; choose an image.')
+    },
+
+    publish: function () {
+        var self = $(this)
+        var form = self.find('.js-step-form')
+        var data = {
+            bundlepath: self.data('bundlepath'),
+            mode: form.find('input[name=mode]:checked').val() || 'new',
+            title: form.find('input[name=title]').val().trim(),
+            content: form.find('textarea[name=content]').val().trim(),
+            revision: form.find('input[name=revision]').val().trim(),
+            tags: form.find('input[name=tags]').val(),
+            license: form.find('select[name=license]').val(),
+            state: form.find('select[name=state]').val(),
+            preview_url: form.find('input[name=preview_url]').val().trim(),
+            confirm: form.find('input[name=confirm]').is(':checked') ? '1' : '',
+        }
+
+        var missing = []
+        if (!data.title) missing.push('a title')
+        if (!data.content) missing.push('a description')
+        if (!data.revision) missing.push('a revision')
+        if (!data.tags.trim()) missing.push('at least one tag')
+        if (!data.license) missing.push('a license')
+        if (!self.data('info').has_screenshot && !self.data('artwork')) missing.push('an artwork image')
+        if (missing.length) {
+            form.find('.js-error').text('Please enter ' + missing.join(', ') + '.')
+            return
+        }
+        if (data.preview_url && !/^https?:\/\/\S+$/i.test(data.preview_url)) {
+            form.find('.js-error').text('The preview URL must be a link starting with https://')
+            return
+        }
+        if (!data.confirm) {
+            form.find('.js-error').text('Please confirm that you have the rights to share this content.')
+            return
+        }
+        form.find('.js-error').text('')
+
+        var body = new FormData()
+        Object.keys(data).forEach(function (key) {
+            body.append(key, data[key])
+        })
+        if (!self.data('info').has_screenshot && self.data('artwork')) {
+            body.append('artwork', self.data('artwork'))
+        }
+
+        self.data('busy', true)
+        self.patchstorageShareBox('showStep', 'loading', 'Uploading to Patchstorage...')
+
+        $.ajax({
+            url: '/patchstorage/share',
+            method: 'POST',
+            data: body,
+            processData: false,
+            contentType: false,
+            dataType: 'json',
+            success: function (resp) {
+                self.data('busy', false)
+                if (resp.ok) {
+                    self.find('.js-step-done .js-patch-link').attr('href', resp.url)
+                    self.find('.js-step-done .js-revision').text(resp.revision)
+                    self.patchstorageShareBox('showStep', 'done')
+                    self.data('onShared')(resp)
+                } else if (resp.auth_required) {
+                    self.patchstorageShareBox('showLogin', resp.error)
+                } else {
+                    self.patchstorageShareBox('showStep', 'form')
+                    form.find('.js-error').text(resp.error)
+                }
+            },
+            error: function () {
+                self.data('busy', false)
+                self.patchstorageShareBox('showStep', 'form')
+                form.find('.js-error').text('Could not reach the pi-Stomp')
+            },
+        })
+    },
+})
+
+// Patchstorage returns the description as HTML. DOMParser runs no scripts and loads no images.
+function htmlToText(html) {
+    var withBreaks = (html || '').replace(/<br\s*\/?>/gi, '\n').replace(/<\/p>\s*/gi, '\n\n')
+    return new DOMParser().parseFromString(withBreaks, 'text/html').body.textContent.trim()
+}
diff --git a/html/js/pedalboard.js b/html/js/pedalboard.js
index e44da9a40..be19e93bd 100644
--- a/html/js/pedalboard.js
+++ b/html/js/pedalboard.js
@@ -62,7 +62,11 @@ $.ui.intersect = function(draggable, droppable, toleranceMode) {
     case "pointer":
         draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left);
         draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top);
-        return isOverAxis( draggableTop, t, droppable.proportions().height ) && isOverAxis( draggableLeft, l, droppable.proportions().width );
+        // isOverAxis() is private to the jQuery UI closure, and proportions is a
+        // property here and not a function. Both are inlined below.
+        // isOverAxis(x, ref, size) is (x >= ref && x < ref + size), and b/r above
+        // are already t + height and l + width.
+        return (draggableTop >= t && draggableTop < b) && (draggableLeft >= l && draggableLeft < r);
     case "touch":
         return (
             (y1 >= t && y1 <= b) ||	// Top edge touching
@@ -243,6 +247,11 @@ JqueryClass('pedalboard', {
         // if first time to adapt
         self.data('adaptFirstTime', true)
 
+        // Gate non-forced scheduleAdapt calls until the pedalboard load completes.
+        // Re-armed on every loading_start (host.js) and cleared in the
+        // pedalboardFinishedLoading callback below, once the load truly finishes.
+        self.data('bulkLoading', true)
+
         // widgets on the arrive list
         self.data('callbacksToArrive', {})
 
@@ -1181,6 +1190,13 @@ JqueryClass('pedalboard', {
             return
         }
 
+        // During bulk pedalboard load, suppress all non-forced calls. modgui.js fires
+        // scheduleAdapt(false) for every knob widget's getAndSetSize, which saturates
+        // the drain timer to ~500 and adds ~5s of delay before pedalboardFinishedLoading.
+        if (!forcedUpdate && self.data('bulkLoading')) {
+            return
+        }
+
         if (forcedUpdate) {
             self.data('adaptForcedUpdate', true)
         }
@@ -1208,8 +1224,21 @@ JqueryClass('pedalboard', {
                 self.data('adaptForcedUpdate', false)
                 self.data('adaptTime', 0)
                 self.pedalboard('positionHardwarePorts')
+                // We've reached the proceed block, so the first drain finished and
+                // pedalboardFinishedLoading (below) fires /effect/list synchronously.
+                // Late knob bumps can no longer delay it, so the gate's job is done:
+                // clear it here, not 5s later in the post-search callback, so the user
+                // can interact the moment the spinner drops.
+                self.data('bulkLoading', false)
+                // The pedalboard itself is laid out now, so drop the loading overlay
+                // immediately. Don't chain it behind pedalboardFinishedLoading: that
+                // waits for the plugin-browser search to render ~130 plugins (several
+                // seconds). Boot-loaded plugins never populate the wait-plugins map,
+                // so stopIfNeeded() hides the spinner right away here.
+                self.data('wait').stopIfNeeded()
                 self.data('pedalboardFinishedLoading')(function () {
                     self.pedalboard('adapt', forcedUpdate)
+                    // Fallback: if anything did register a wait-plugin, clear it here.
                     self.data('wait').stopIfNeeded()
                 })
 
@@ -1227,7 +1256,9 @@ JqueryClass('pedalboard', {
 
         if (curTime == 0) {
             // first time, setup everything
-            self.data('adaptTime', firstTime ? 201 : 101)
+            // During bulk load the gate suppresses all bumps, so we only need a short
+            // settle window (21 × 200ms = ~400ms) instead of the usual 201/101.
+            self.data('adaptTime', self.data('bulkLoading') ? 21 : (firstTime ? 201 : 101))
             setTimeout(callAdaptLater, 1)
         } else if (curTime < 500) {
             // not first time, increase timer
diff --git a/html/js/sfzbuilder.js b/html/js/sfzbuilder.js
new file mode 100644
index 000000000..99173dcf7
--- /dev/null
+++ b/html/js/sfzbuilder.js
@@ -0,0 +1,75 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/*
+ * The seam between the legacy code and the SFZ builder island.
+ *
+ * This file is a classic script. `desktop.js` calls `sfzBuilderBox` and the
+ * window manager needs the registration at once. Thus this file calls
+ * `self.window(options)` without a wait, and loads the island in the
+ * background. The panel opens later, so the island is ready in time.
+ *
+ * See docs/frontend-architecture.md, rule 4.2.
+ */
+
+/*
+ * Writes why the panel is empty.
+ *
+ * index.html holds an empty container, because the island makes every element.
+ * Thus a file that the server does not give makes an empty panel and no other
+ * sign. The message below uses inline style, because the stylesheet of the
+ * island can be the file that is absent.
+ */
+function sfzBuilderShowLoadError(root, err) {
+    var text = (err && (err.message || err)) || 'unknown error'
+    root.innerHTML = ''
+    var box = document.createElement('div')
+    box.setAttribute('style', [
+        'position:absolute', 'top:0', 'bottom:45px', 'left:0', 'right:0',
+        'z-index:2', 'background:#0a0a0a', 'color:#d8d8d8', 'padding:40px',
+        'font-family:ui-monospace,Menlo,Consolas,monospace', 'font-size:13px',
+        'line-height:1.7'
+    ].join(';'))
+    box.innerHTML =
+        '<div style="color:#D91E36;font-weight:700;letter-spacing:.18em;' +
+        'text-transform:uppercase;margin-bottom:14px">Sound Bank Builder did not load</div>' +
+        '<div style="color:#6f6f6f">The panel could not read its own files from' +
+        ' <code style="color:#F29446">js/app/sfzbuilder/</code>.' +
+        ' Look in the network tab of the browser for a 404.</div>' +
+        '<div style="margin-top:14px;color:#6f6f6f">Reason:' +
+        ' <span style="color:#F29446"></span></div>'
+    box.querySelector('span').textContent = text
+    root.appendChild(box)
+}
+
+JqueryClass('sfzBuilderBox', {
+    init: function (options) {
+        var self = $(this)
+
+        options = $.extend({
+            isMainWindow: true,
+            windowName: "Sound Bank Builder"
+        }, options)
+
+        var root = self[0]
+        var island = import('./app/sfzbuilder/mount.js').then(function (module) {
+            return module.mount(root)
+        })
+        island.catch(function (err) {
+            console.error('Cannot load the Sound Bank Builder', err)
+            sfzBuilderShowLoadError(root, err)
+        })
+        self.data('sfzIsland', island)
+
+        options.open = function () {
+            island.then(function (it) { it.open() }, function () { /* the message is on the panel */ })
+        }
+        options.close = function () {
+            island.then(function (it) { it.close() }, function () { })
+        }
+
+        self.window(options)
+
+        return self
+    }
+})
diff --git a/html/js/window.js b/html/js/window.js
index bd0be8fa4..1824d6bf8 100644
--- a/html/js/window.js
+++ b/html/js/window.js
@@ -24,7 +24,8 @@ function WindowManager() {
             // Close window if not current and forced or not main and current window is not plugin info modal opened from cloud-plugins-library tab
             if (win != window && (forced || !win.data('isMainWindow')) &&
                 !(win.selector === '#cloud-plugins-library' && window && window.hasClass('plugin-info')) &&
-                !(win.selector === '#patchstorage-library' && window && window.hasClass('patchstorage-info'))
+                !(win.selector === '#patchstorage-library' && window && window.hasClass('patchstorage-info')) &&
+                !(win.selector === '#patchstorage-pedalboards-library' && window && window.hasClass('patchstorage-info'))
             ) {
                 win.window('close')
             }
diff --git a/html/resources/settings.html b/html/resources/settings.html
index 926783fee..803fcc466 100644
--- a/html/resources/settings.html
+++ b/html/resources/settings.html
@@ -49,6 +49,7 @@ <h1 class="alignleft">{{effect.name}}</h1>
             </div>
             <!-- END PRESET LIST -->
 
+            <!-- FILE SELECTORS always at top -->
             {{#effect.parameters}}
             {{#writable}}
             {{#path}}
@@ -64,6 +65,12 @@ <h1 class="alignleft">{{effect.name}}</h1>
                 </div>
             </div>
             {{/path}}
+            {{/writable}}
+            {{/effect.parameters}}
+            <!-- END FILE SELECTORS -->
+
+            {{#effect.parameters}}
+            {{#writable}}
             {{#string}}
             <div class="mod-string">
                 <span class="mod-string-title">{{label}}</span>
diff --git a/html/settings.html b/html/settings.html
index df2d0b80e..b199aa7ce 100644
--- a/html/settings.html
+++ b/html/settings.html
@@ -135,7 +135,7 @@
     {% autoescape None %}
     SITEURL          = '{{cloud_url}}'
     CONTROLCHAIN_URL = '{{controlchain_url}}'
-    VERSION          = '{{version}}'
+    VERSION          = '{{image_version}}'
     var TEMPLATES    = {}
     var NOTIFICATIONS_ENABLED = true
     var HMI_EEPROM = {{hmi_eeprom}}
@@ -1240,7 +1240,7 @@ <h2>System</h2>
                 <form class="form">
                     <b>Unit:</b> <span id="info-system-unit">---</span><br/>
                     <b>Build Date:</b> <span id="info-system-date">---</span><br/>
-                    <b>OS Version:</b> {{version}}<br/>
+                    <b>OS Version:</b> {{image_version}}<br/>
                 </form>
 
                 <hr style="border:1px solid #333;"/>
diff --git a/mod-deploy.sh b/mod-deploy.sh
deleted file mode 100755
index a705b8d68..000000000
--- a/mod-deploy.sh
+++ /dev/null
@@ -1,56 +0,0 @@
-#!/bin/bash
-
-set -e
-
-cd $(dirname ${0})
-
-if ping -c 1 -W 0.05 192.168.51.1 > /dev/null; then
-  TARGET=root@192.168.51.1
-elif ping -c 1 -W 0.2 moddwarf.local > /dev/null; then
-  TARGET=root@moddwarf.local
-elif ping -c 1 -W 0.2 modduox.local > /dev/null; then
-  TARGET=root@modduox.local
-elif ping -c 1 -W 0.2 modduo.local > /dev/null; then
-  TARGET=root@modduo.local
-else
-  echo "not connected"
-  exit 1
-fi
-
-# needed since ssh rsa deprecation/breakage
-SSH_OPTIONS="-o PubkeyAcceptedAlgorithms=+ssh-rsa"
-SCP_OPTIONS="${SSH_OPTIONS} -O"
-
-ssh ${SSH_OPTIONS} ${TARGET} mount / -o remount,rw
-
-ssh ${SSH_OPTIONS} ${TARGET} rm -rf /usr/share/mod/html/css
-ssh ${SSH_OPTIONS} ${TARGET} rm -rf /usr/share/mod/html/js
-ssh ${SSH_OPTIONS} ${TARGET} mkdir -p /usr/share/mod/html/css/fontello/{css,font} /usr/share/mod/html/js/{lib/slick/fonts,utils}
-
-ssh ${SSH_OPTIONS} ${TARGET} rm -f  /usr/lib/python3.4/site-packages/mod/*.py*
-ssh ${SSH_OPTIONS} ${TARGET} rm -f  /usr/lib/python3.4/site-packages/mod/communication/*.py*
-ssh ${SSH_OPTIONS} ${TARGET} rm -f  /usr/lib/python3.4/site-packages/modtools/*.py*
-
-scp ${SCP_OPTIONS} html/*.html                   ${TARGET}:/usr/share/mod/html/
-scp ${SCP_OPTIONS} html/include/*.html           ${TARGET}:/usr/share/mod/html/include/
-scp ${SCP_OPTIONS} html/resources/*.html         ${TARGET}:/usr/share/mod/html/resources/
-scp ${SCP_OPTIONS} html/css/*.css                ${TARGET}:/usr/share/mod/html/css/
-scp ${SCP_OPTIONS} html/css/fontello/css/*.css   ${TARGET}:/usr/share/mod/html/css/fontello/css/
-scp ${SCP_OPTIONS} html/css/fontello/font/*.*    ${TARGET}:/usr/share/mod/html/css/fontello/font/
-scp ${SCP_OPTIONS} html/js/*.js                  ${TARGET}:/usr/share/mod/html/js/
-scp ${SCP_OPTIONS} html/js/lib/*.js              ${TARGET}:/usr/share/mod/html/js/lib/
-scp ${SCP_OPTIONS} html/js/lib/slick/*.{css,gif} ${TARGET}:/usr/share/mod/html/js/lib/slick/
-scp ${SCP_OPTIONS} html/js/lib/slick/*min.js     ${TARGET}:/usr/share/mod/html/js/lib/slick/
-scp ${SCP_OPTIONS} html/js/lib/slick/fonts/*.*   ${TARGET}:/usr/share/mod/html/js/lib/slick/fonts/
-scp ${SCP_OPTIONS} html/js/utils/*.js            ${TARGET}:/usr/share/mod/html/js/utils/
-scp ${SCP_OPTIONS} html/img/*.png                ${TARGET}:/usr/share/mod/html/img/
-scp ${SCP_OPTIONS} html/img/*.svg                ${TARGET}:/usr/share/mod/html/img/
-scp ${SCP_OPTIONS} mod/*.py                      ${TARGET}:/usr/lib/python3.4/site-packages/mod/
-scp ${SCP_OPTIONS} mod/communication/*.py        ${TARGET}:/usr/lib/python3.4/site-packages/mod/communication/
-scp ${SCP_OPTIONS} modtools/*.py                 ${TARGET}:/usr/lib/python3.4/site-packages/modtools/
-
-ssh ${SSH_OPTIONS} ${TARGET} rm -rf /usr/lib/python3.4/site-packages/mod/__pycache__
-ssh ${SSH_OPTIONS} ${TARGET} rm -rf /usr/lib/python3.4/site-packages/mod/communication/__pycache__
-ssh ${SSH_OPTIONS} ${TARGET} rm -rf /usr/lib/python3.4/site-packages/modtools/__pycache__
-
-echo "all ok"
diff --git a/mod/__init__.py b/mod/__init__.py
index a76716f4f..36f982521 100644
--- a/mod/__init__.py
+++ b/mod/__init__.py
@@ -44,8 +44,7 @@ def check_environment():
                               DEFAULT_PEDALBOARD, DEFAULT_PEDALBOARD_COPY,
                               DATA_DIR, DOWNLOAD_TMP_DIR, PEDALBOARD_TMP_DIR,
                               KEYS_PATH, USER_BANKS_JSON_FILE, FAVORITES_JSON_FILE,
-                              UPDATE_CC_FIRMWARE_FILE, UPDATE_MOD_OS_FILE, UPDATE_MOD_OS_HERLPER_FILE,
-                              CAPTURE_PATH, PLAYBACK_PATH)
+                              UPDATE_CC_FIRMWARE_FILE, UPDATE_MOD_OS_FILE, UPDATE_MOD_OS_HERLPER_FILE)
 
     # create temp dirs
     if not os.path.exists(DOWNLOAD_TMP_DIR):
@@ -55,7 +54,7 @@ def check_environment():
     os.makedirs(PEDALBOARD_TMP_DIR)
 
     # remove temp files
-    for path in (CAPTURE_PATH, PLAYBACK_PATH, UPDATE_CC_FIRMWARE_FILE):
+    for path in (UPDATE_CC_FIRMWARE_FILE,):
         if os.path.exists(path):
             os.remove(path)
 
diff --git a/mod/host.py b/mod/host.py
index 289cce581..810dec5b8 100644
--- a/mod/host.py
+++ b/mod/host.py
@@ -543,9 +543,10 @@ def jack_bufsize_changed(self, bufSize):
         self.msg_callback("bufsize %i" % bufSize)
 
     def jack_port_appeared(self, name, isOutput):
-        name = charPtrToString(name)
-        isOutput = bool(isOutput)
+        # Public entry from the JACK port scan.
+        self._handle_port_appeared(charPtrToString(name), bool(isOutput), retries=6)
 
+    def _handle_port_appeared(self, name, isOutput, retries):
         if name.startswith(self.jack_slave_prefix+":"):
             name = name.replace(self.jack_slave_prefix+":","")
             if name.startswith("midi_"):
@@ -569,11 +570,18 @@ def jack_port_appeared(self, name, isOutput):
             return
 
         if self.midi_aggregated_mode:
-            # new ports are ignored under midi aggregated mode
+            # New ports are ignored in aggregated mode. The merger JACK client
+            # owns the connection to mod-midi-merger:in (its port-registration
+            # callback plus a bounded reconcile burst). The graph shows only
+            # the merged ports.
             return
 
         alias = get_jack_port_alias(name)
         if not alias:
+            # The alias is not ready. Try again after a short delay.
+            if retries > 0:
+                IOLoop.instance().call_later(
+                    0.5, self._handle_port_appeared, name, isOutput, retries - 1)
             return
         alias = midi_port_alias_to_name(alias, True)
 
@@ -1603,6 +1611,12 @@ def process_read_message_body(self, msg):
                 self.web_data_ready_ok = False
                 self.web_data_ready_counter += 1
                 self.msg_callback("data_ready %i" % self.web_data_ready_counter)
+                # If msg_callback self-acknowledged (all clients were skipped), web_data_ready_ok
+                # is already True and no timer is needed. Otherwise, set a 50ms fallback so a
+                # backgrounded Chrome tab (that hasn't sent client_hidden yet) can't stall mod-host
+                # indefinitely — Chrome's JS throttles setTimeout to ~1s when backgrounded.
+                if not self.web_data_ready_ok and self.last_data_finish_handle is None:
+                    self.last_data_finish_handle = ioloop.call_later(0.15, self.send_output_data_ready_later)
                 return
 
             now  = ioloop.time()
@@ -1881,6 +1895,7 @@ def process_read_queue(self):
     def send_output_data_ready(self, now, callback):
         ioloop = IOLoop.instance()
         self.last_data_finish_msg = ioloop.time() if now is None else now
+        self.web_data_ready_ok = True
 
         if self.last_data_finish_handle is not None:
             ioloop.remove_timeout(self.last_data_finish_handle)
@@ -2215,7 +2230,7 @@ def report_current_state(self, websocket):
 
         # TODO: restore HMI and CC addressings if crashed
 
-        websocket.write_message("loading_end %d" % self.current_pedalboard_snapshot_id)
+        websocket.write_message("loading_end %d %s" % (self.current_pedalboard_snapshot_id, self.pedalboard_name))
 
     # -----------------------------------------------------------------------------------------------------------------
     # Host stuff - add & remove bundles
@@ -2678,8 +2693,13 @@ def remove_plugin(self, instance, callback):
     # Host stuff - plugin values
 
     def bypass(self, instance, bypassed, callback):
-        instance_id = self.mapper.get_id_without_creating(instance)
-        pluginData  = self.plugins[instance_id]
+        try:
+            instance_id = self.mapper.get_id_without_creating(instance)
+            pluginData  = self.plugins[instance_id]
+        except KeyError:
+            if callback is not None:
+                callback(False)
+            return
 
         pluginData['bypassed'] = bypassed
         self.send_modified("bypass %d %d" % (instance_id, int(bypassed)), callback, datatype='boolean')
@@ -2695,7 +2715,12 @@ def bypass(self, instance, bypassed, callback):
 
     def param_set(self, port, value, callback):
         instance, symbol = port.rsplit("/", 1)
-        instance_id = self.mapper.get_id_without_creating(instance)
+        try:
+            instance_id = self.mapper.get_id_without_creating(instance)
+        except KeyError:
+            if callback is not None:
+                callback(False)
+            return
 
         try:
             pluginData = self.plugins[instance_id]
@@ -3706,6 +3731,7 @@ def load(self, bundlepath, isDefault=False, abort_catcher=None):
         if bundlepath:
             self.load_pb_snapshots(bundlepath)
             self.send_notmodified("state_load {}".format(bundlepath))
+            self.load_pb_parameters()
             self.addressings.load(bundlepath, instances, skippedPortAddressings, abort_catcher)
 
         if abort_catcher is not None and abort_catcher.get('abort', False):
@@ -3714,7 +3740,7 @@ def load(self, bundlepath, isDefault=False, abort_catcher=None):
 
         self.addressings.registerMappings(self.msg_callback, rinstances)
 
-        self.msg_callback("loading_end %d" % self.current_pedalboard_snapshot_id)
+        self.msg_callback("loading_end %d %s" % (self.current_pedalboard_snapshot_id, pb['title']))
 
         if isDefault:
             self.pedalboard_empty    = True
@@ -3774,6 +3800,43 @@ def load_pb_snapshots(self, bundlepath):
         else:
             self.snapshot_clear()
 
+    def load_pb_parameters(self):
+        # mod-host restores plugin patch parameters (NAM model files, IR paths, notes text, ...)
+        # from the bundle via "state_load", but it never tells us which values it restored.
+        # Our own cache is still holding the plugin defaults at this point, so the web UI would
+        # show an empty model until something else happens to send a patch_set (loading another
+        # snapshot and coming back, or the plugin voluntarily notifying its value).
+        # Seed the cache from the snapshot that is being loaded, which is what got saved into
+        # the plugin state files in the first place.
+        idx = self.current_pedalboard_snapshot_id
+
+        if idx < 0 or idx >= len(self.pedalboard_snapshots):
+            return
+
+        snapshot = self.pedalboard_snapshots[idx]
+        if snapshot is None:
+            return
+
+        for instance, data in snapshot['data'].items():
+            parameters = data.get('parameters', None)
+            if not parameters:
+                continue
+
+            instance = "/graph/%s" % instance
+            try:
+                instance_id = self.mapper.get_id_without_creating(instance)
+                pluginData  = self.plugins[instance_id]
+            except KeyError:
+                continue
+
+            for uri, param in parameters.items():
+                parameter = pluginData['parameters'].get(uri, None)
+                if parameter is None or parameter[0] == param[0]:
+                    continue
+
+                parameter[0] = param[0]
+                self.msg_callback("patch_set %s 1 %s %s %s" % (instance, uri, parameter[1], parameter[0]))
+
     def load_pb_plugins(self, plugins, instances, rinstances, motos):
         for p in plugins:
             extinfo = get_plugin_info_essentials(p['uri'])
@@ -4232,8 +4295,14 @@ def save_state_mainfile(self, bundlepath, title, titlesym):
         lv2:OutputPort .
 """ % (instance, port['symbol'])
 
-            # control input, save values
+            # control input, save values.
+            # use default for pprops:trigger ports (momentary; never save that)
+            triggers = dict((port['symbol'], port['ranges']['default'])
+                            for port in info['ports']['control']['input']
+                            if "trigger" in port['properties'])
+
             for symbol, value in pluginData['ports'].items():
+                value = triggers.get(symbol, value)
                 blocks += """
 <%s/%s>
     ingen:value %f ;%s
@@ -4850,6 +4919,20 @@ def address(self, instance, portsymbol, actuator_uri, label, minimum, maximum, v
         # MIDI learn is not saved until a MIDI controller is moved.
         # So we need special casing for unlearn.
         if actuator_uri == kMidiUnlearnURI:
+            old_addressing = pluginData['addressings'].pop(portsymbol, None)
+            if old_addressing is not None:
+                self.addressings.remove(old_addressing)
+                self.pedalboard_modified = True
+
+            if portsymbol == ":bypass":
+                pluginData['bypassCC'] = (-1, -1)
+            else:
+                pluginData['midiCCs'][portsymbol] = (-1, -1, 0.0, 1.0)
+
+            # Clients other than the one that unlearned have no other signal that
+            # the mapping is gone; -1:-1 is the same form mod-host reports.
+            self.msg_callback("midi_map %s %s -1 -1 0.0 1.0" % (instance, portsymbol))
+
             self.send_modified("midi_unmap %d %s" % (instance_id, portsymbol), callback, datatype='boolean')
             return
 
@@ -4871,6 +4954,11 @@ def address(self, instance, portsymbol, actuator_uri, label, minimum, maximum, v
                     else:
                         pluginData['midiCCs'][portsymbol] = (-1, -1, 0.0, 1.0)
 
+                    # Clients other than the one that removed the addressing have no
+                    # other signal that the mapping is gone; -1:-1 is the same form
+                    # mod-host reports.
+                    self.msg_callback("midi_map %s %s -1 -1 0.0 1.0" % (instance, portsymbol))
+
                 else:
                     # Changing ranges without changing MIDI CC
                     if -1 in (channel, controller):
@@ -6870,13 +6958,18 @@ def set_midi_devices_change_mode(self, midi_aggregated_mode):
 
             # Remove USB MIDI ports
             for port_symbol, port_alias, port_conns in self.midiports:
-                self.remove_port_from_connections(port_symbol)
-
+                # port_symbol can be a combined "in;out" pair. Give each half to
+                # remove_port_from_connections separately: it matches against single
+                # JACK port names, so a combined symbol never matches and leaves
+                # self.connections holding edges that mod-host has already removed.
                 if ";" in port_symbol:
                     inp, outp = port_symbol.split(";",1)
+                    self.remove_port_from_connections(inp)
+                    self.remove_port_from_connections(outp)
                     self.msg_callback("remove_hw_port /graph/%s" % (inp.split(":",1)[-1]))
                     self.msg_callback("remove_hw_port /graph/%s" % (outp.split(":",1)[-1]))
                 else:
+                    self.remove_port_from_connections(port_symbol)
                     self.msg_callback("remove_hw_port /graph/%s" % (port_symbol.split(":",1)[-1]))
 
             self.midiports = []
diff --git a/mod/patchstorage_share.py b/mod/patchstorage_share.py
new file mode 100644
index 000000000..71551ac32
--- /dev/null
+++ b/mod/patchstorage_share.py
@@ -0,0 +1,446 @@
+# SPDX-FileCopyrightText: 2026 pi-Stomp
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+# Upload (share) user pedalboards to Patchstorage, see https://patchstorage.com/docs/api/beta/
+# Everything here blocks on the network; webserver.py runs it on a worker thread.
+
+import json
+import logging
+import os
+import re
+import tempfile
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+import zipfile
+from base64 import urlsafe_b64decode
+from uuid import uuid4
+
+TOKEN_LIFETIME = 7 * 24 * 3600
+HTTP_TIMEOUT = 120
+MAX_ARTWORK_SIZE = 5 * 1024 * 1024
+
+# Leading bytes -> extension of the image formats accepted as artwork
+ARTWORK_SIGNATURES = (
+    (b'\x89PNG\r\n\x1a\n', 'png'),
+    (b'\xff\xd8\xff', 'jpg'),
+    (b'GIF87a', 'gif'),
+    (b'GIF89a', 'gif'),
+)
+
+# Local bookkeeping, never uploaded
+BUNDLE_METADATA_FILE = 'patchstorage.json'
+
+
+class PatchstorageError(Exception):
+    def __init__(self, message, auth_required=False, status=None, location=None):
+        Exception.__init__(self, message)
+        self.message = message
+        self.auth_required = auth_required
+        self.status = status
+        self.location = location
+
+
+class _NoRedirect(urllib.request.HTTPRedirectHandler):
+    # urllib turns a redirected POST into a GET and drops the body; report redirects instead
+    def redirect_request(self, req, fp, code, msg, headers, newurl):
+        return None
+
+
+_opener = urllib.request.build_opener(_NoRedirect)
+
+
+def _clean_message(message):
+    return re.sub(r'<[^>]+>', '', message or '').strip()
+
+
+def _jwt_payload(token):
+    try:
+        payload = token.split('.')[1]
+        payload += '=' * (-len(payload) % 4)
+        return json.loads(urlsafe_b64decode(payload.encode('ascii')).decode('utf-8'))
+    except Exception:
+        return {}
+
+
+def _encode_form(fields):
+    """urlencode, with list values sent as WordPress-style `key[]` repeats."""
+    pairs = []
+    for key, value in fields.items():
+        if isinstance(value, (list, tuple)):
+            pairs.extend(('%s[]' % key, str(v)) for v in value)
+        elif value is not None:
+            pairs.append((key, str(value)))
+    return urllib.parse.urlencode(pairs).encode('utf-8')
+
+
+def _encode_multipart(fields, filefield, filename, filedata):
+    boundary = uuid4().hex
+    lines = []
+    for key, value in fields.items():
+        lines.append(('--%s\r\nContent-Disposition: form-data; name="%s"\r\n\r\n%s\r\n' % (boundary, key, value)).encode('utf-8'))
+    lines.append(('--%s\r\nContent-Disposition: form-data; name="%s"; filename="%s"\r\n'
+                  'Content-Type: application/octet-stream\r\n\r\n' % (boundary, filefield, filename.replace('"', ''))).encode('utf-8'))
+    lines.append(filedata)
+    lines.append(('\r\n--%s--\r\n' % boundary).encode('utf-8'))
+    return b''.join(lines), 'multipart/form-data; boundary=%s' % boundary
+
+
+def artwork_extension(data):
+    """File extension for a PNG, JPEG, GIF or WebP image, or None for anything else."""
+    for signature, extension in ARTWORK_SIGNATURES:
+        if data.startswith(signature):
+            return extension
+    if data[:4] == b'RIFF' and data[8:12] == b'WEBP':
+        return 'webp'
+    return None
+
+
+def bump_revision(revision):
+    """'0.1' -> '0.2', '1.9' -> '1.10', 'v2' -> 'v3'; anything without a trailing number gets '.1'."""
+    match = re.match(r'^(.*?)(\d+)$', (revision or '').strip())
+    if match is None:
+        return (revision.strip() + '.1') if revision and revision.strip() else '1.0'
+    return match.group(1) + str(int(match.group(2)) + 1)
+
+
+def read_bundle_metadata(bundlepath):
+    path = os.path.join(bundlepath, BUNDLE_METADATA_FILE)
+    try:
+        with open(path, 'r', encoding='utf-8') as fh:
+            data = json.load(fh)
+        if isinstance(data, dict) and 'id' in data:
+            return data
+    except (OSError, ValueError):
+        pass
+    return None
+
+
+def write_bundle_metadata(bundlepath, patch_id, revision):
+    with open(os.path.join(bundlepath, BUNDLE_METADATA_FILE), 'w', encoding='utf-8') as fh:
+        json.dump({'id': int(patch_id), 'revision': str(revision)}, fh, ensure_ascii=False, indent=4)
+
+
+def zip_bundle(bundlepath, destfile):
+    """Zip as `<name>.pedalboard/...`, the layout the pedalboard installer expects."""
+    bundlepath = bundlepath.rstrip(os.sep)
+    topname = os.path.basename(bundlepath)
+    with zipfile.ZipFile(destfile, 'w', zipfile.ZIP_DEFLATED) as zf:
+        for root, dirs, files in os.walk(bundlepath):
+            dirs[:] = sorted(d for d in dirs if not d.startswith('.'))
+            relroot = os.path.relpath(root, bundlepath)
+            arcroot = topname if relroot == '.' else os.path.join(topname, relroot)
+            zf.write(root, arcroot)
+            for name in sorted(files):
+                if name.startswith('.') or (relroot == '.' and name == BUNDLE_METADATA_FILE):
+                    continue
+                path = os.path.join(root, name)
+                # os.path.exists follows the link, so it is False for dangling and looping links
+                if not os.path.exists(path):
+                    logging.warning('[patchstorage] not zipping broken link %s -> %s', path, os.readlink(path))
+                    continue
+                zf.write(path, os.path.join(arcroot, name))
+
+
+class PatchstorageClient(object):
+    def __init__(self, api_base, auth_file, platform_id, category_id, user_agent):
+        self.api_base = api_base.rstrip('/')
+        self.auth_file = auth_file
+        self.platform_id = int(platform_id)
+        self.category_id = int(category_id)
+        self.user_agent = user_agent
+
+    # --- auth ------------------------------------------------------------------------------
+
+    def _load_auth(self):
+        try:
+            with open(self.auth_file, 'r', encoding='utf-8') as fh:
+                auth = json.load(fh)
+        except (OSError, ValueError):
+            return None
+        if not isinstance(auth, dict) or not auth.get('token'):
+            return None
+        if auth.get('expires', 0) <= time.time() + 60:
+            self.logout()
+            return None
+        return auth
+
+    def status(self):
+        auth = self._load_auth()
+        if auth is None:
+            return {'logged_in': False}
+        return {
+            'logged_in': True,
+            'username': auth.get('username'),
+            'display_name': auth.get('display_name'),
+            'expires': auth.get('expires'),
+        }
+
+    def login(self, username, password):
+        resp = self._request('POST', '/auth/token',
+                             body=_encode_form({'username': username, 'password': password}),
+                             content_type='application/x-www-form-urlencoded',
+                             authenticated=False)
+        token = resp.get('token')
+        if not token:
+            raise PatchstorageError('Patchstorage did not return a login token')
+        payload = _jwt_payload(token)
+        user_id = payload.get('data', {}).get('user', {}).get('id')
+        auth = {
+            'token': token,
+            'username': resp.get('username') or username,
+            'display_name': resp.get('display_name') or resp.get('username') or username,
+            'user_id': int(user_id) if user_id is not None and str(user_id).isdigit() else None,
+            'expires': int(payload.get('exp') or (time.time() + TOKEN_LIFETIME)),
+        }
+        tmpfile = self.auth_file + '.tmp'
+        fd = os.open(tmpfile, os.O_WRONLY | os.O_CREAT | os.O_TRUNC, 0o600)
+        with os.fdopen(fd, 'w', encoding='utf-8') as fh:
+            json.dump(auth, fh)
+        os.replace(tmpfile, self.auth_file)
+        return self.status()
+
+    def logout(self):
+        try:
+            os.remove(self.auth_file)
+        except FileNotFoundError:
+            pass
+
+    def owns(self, patch):
+        auth = self._load_auth()
+        author = (patch or {}).get('author') or {}
+        if auth is None or not author:
+            return False
+        if auth.get('user_id') is not None and author.get('id') == auth['user_id']:
+            return True
+        names = {(auth.get('username') or '').lower(), (auth.get('display_name') or '').lower()}
+        return bool(names & {(author.get('slug') or '').lower(), (author.get('name') or '').lower()})
+
+    # --- http ------------------------------------------------------------------------------
+
+    def _request(self, method, path, body=None, content_type=None, authenticated=True):
+        headers = {'User-Agent': self.user_agent, 'Accept': 'application/json'}
+        if content_type:
+            headers['Content-Type'] = content_type
+        if authenticated:
+            auth = self._load_auth()
+            if auth is None:
+                raise PatchstorageError('Log in to Patchstorage first', auth_required=True)
+            headers['Authorization'] = 'Bearer ' + auth['token']
+
+        req = urllib.request.Request(self.api_base + path, data=body, headers=headers, method=method)
+        try:
+            with _opener.open(req, timeout=HTTP_TIMEOUT) as resp:
+                raw = resp.read()
+        except urllib.error.HTTPError as e:
+            if 300 <= e.code < 400:
+                location = e.headers.get('Location') or '(no location)'
+                logging.warning('[patchstorage] %s %s was redirected (%d) to %s', method, path, e.code, location)
+                raise PatchstorageError('Patchstorage redirected %s %s to %s' % (method, path, location),
+                                        status=e.code, location=e.headers.get('Location'))
+            raw = e.read()
+            try:
+                err = json.loads(raw.decode('utf-8'))
+            except ValueError:
+                err = {}
+            if not isinstance(err, dict):
+                err = {}
+            code = err.get('code') or ''
+            logging.warning('[patchstorage] %s %s failed (%d): %s', method, path, e.code, raw[:500])
+            message = _clean_message(err.get('message')) or 'Patchstorage error %d' % e.code
+            params = (err.get('data') or {}).get('params') if isinstance(err.get('data'), dict) else None
+            if not isinstance(params, dict):
+                params = {}
+            if params:
+                message += ' (%s)' % '; '.join('%s: %s' % (k, _clean_message(str(v))) for k, v in params.items())
+            if authenticated and (e.code == 401 or code.startswith('jwt_auth')):
+                self.logout()
+                raise PatchstorageError('Your Patchstorage login has expired, log in again', auth_required=True, status=e.code)
+            raise PatchstorageError(message, status=e.code)
+        except (urllib.error.URLError, OSError) as e:
+            raise PatchstorageError('Cannot reach Patchstorage: %s' % getattr(e, 'reason', e))
+
+        if not raw:
+            return {}
+        try:
+            return json.loads(raw.decode('utf-8'))
+        except ValueError:
+            raise PatchstorageError('Unexpected response from Patchstorage')
+
+    def get_patch(self, patch_id):
+        return self._request('GET', '/patches/%d' % int(patch_id), authenticated=False)
+
+    def _create_patch(self, patch_fields, json_body):
+        """
+        POST /patches as JSON (a form sends ids as strings, which PUT refuses). On create the
+        API has refused preview_url in a JSON body, sent or not, and its docs list only form
+        encodings for this call, so on that refusal try once more as a form. A 400 creates nothing.
+        """
+        try:
+            return self._request('POST', '/patches', body=json_body, content_type='application/json')
+        except PatchstorageError as e:
+            if e.status != 400 or 'preview_url' not in e.message:
+                raise
+            json_error = e.message
+            logging.warning('[patchstorage] create refused as JSON (%s), trying as a form', json_error)
+        try:
+            return self._request('POST', '/patches', body=_encode_form(patch_fields),
+                                 content_type='application/x-www-form-urlencoded')
+        except PatchstorageError as e:
+            if e.status is None or not 400 <= e.status < 500:
+                raise
+            raise PatchstorageError('Patchstorage refused the new pedalboard. As JSON: %s. As a form: %s'
+                                    % (json_error, e.message), status=e.status)
+
+    def _confirm_after_redirect(self, error, patch_id, file_id, artwork_id):
+        """
+        Patchstorage answers a successful PUT with a redirect to the patch (with a broken host),
+        so read the patch back and accept it if it now carries the new uploads.
+        """
+        match = re.search(r'/patches/(\d+)', error.location or '')
+        target = int(match.group(1)) if match else patch_id
+        if target is None:
+            raise error
+        patch = self._request('GET', '/patches/%d?_=%d' % (int(target), int(time.time())), authenticated=False)
+        files = {f.get('id') for f in patch.get('files') or []}
+        if file_id not in files or (patch.get('artwork') or {}).get('id') != artwork_id:
+            raise PatchstorageError('Patchstorage did not confirm the upload; check the pedalboard on patchstorage.com',
+                                    status=error.status)
+        return patch
+
+    def _upload_file(self, filename, filedata):
+        body, content_type = _encode_multipart({}, 'file', filename, filedata)
+        resp = self._request('POST', '/files', body=body, content_type=content_type)
+        if not resp.get('id'):
+            raise PatchstorageError('Patchstorage did not accept %s' % filename)
+        return int(resp['id'])
+
+    def _delete_file(self, file_id):
+        try:
+            self._request('DELETE', '/files/%d' % int(file_id))
+        except PatchstorageError as e:
+            logging.warning('[patchstorage] could not delete file %s: %s', file_id, e.message)
+
+    # --- share -----------------------------------------------------------------------------
+
+    def share(self, bundlepath, fields, patch_id=None, artwork=None):
+        """
+        Upload the bundle and create (patch_id None) or update a patch.
+        fields: title, content, revision, tags (list of str), license (int), state (int),
+        preview_url (optional; on an update empty leaves the current one).
+        artwork: image bytes, used only when the bundle has no screenshot.png.
+        Returns {'id', 'url', 'revision'} and stamps patchstorage.json into the bundle.
+        """
+        title = (fields.get('title') or '').strip()
+        content = (fields.get('content') or '').strip()
+        revision = (fields.get('revision') or '').strip()
+        tags = [t.strip() for t in fields.get('tags') or [] if t and t.strip()]
+        if not title or not content or not revision:
+            raise PatchstorageError('Title, description and revision are required')
+        if not tags:
+            raise PatchstorageError('Add at least one tag')
+        bad_tags = [t for t in tags if not 2 <= len(t) <= 25]
+        if bad_tags:
+            raise PatchstorageError('Tags must be 2 to 25 characters: %s' % ', '.join(bad_tags))
+        preview_url = (fields.get('preview_url') or '').strip()
+        if preview_url and not re.match(r'^https?://\S+$', preview_url, re.IGNORECASE):
+            raise PatchstorageError('The preview URL must be a link starting with https://')
+        try:
+            license_id, state = int(fields['license']), int(fields['state'])
+        except (KeyError, TypeError, ValueError):
+            raise PatchstorageError('Choose a license and state')
+
+        screenshot = os.path.join(bundlepath, 'screenshot.png')
+        if os.path.isfile(screenshot):
+            with open(screenshot, 'rb') as fh:
+                artwork = fh.read()
+            artwork_ext = 'png'
+        elif artwork is None:
+            raise PatchstorageError('This pedalboard has no screenshot; choose an artwork image')
+        elif len(artwork) > MAX_ARTWORK_SIZE:
+            raise PatchstorageError('The artwork image is too big; the limit is %d MB' % (MAX_ARTWORK_SIZE // (1024 * 1024)))
+        else:
+            artwork_ext = artwork_extension(artwork)
+            if artwork_ext is None:
+                raise PatchstorageError('The artwork must be a PNG, JPEG, GIF or WebP image')
+
+        if self._load_auth() is None:
+            raise PatchstorageError('Log in to Patchstorage first', auth_required=True)
+
+        old_files = []
+        if patch_id is not None:
+            existing = self.get_patch(patch_id)
+            if not self.owns(existing):
+                raise PatchstorageError('You can only publish new revisions of your own Patchstorage pedalboards')
+            old_files = [f['id'] for f in existing.get('files') or [] if f.get('id')]
+            if (existing.get('artwork') or {}).get('id'):
+                old_files.append(existing['artwork']['id'])
+
+        bundlename = os.path.basename(bundlepath.rstrip(os.sep))
+        uploaded = []
+        submitted = False
+        try:
+            artwork_id = self._upload_file('%s.%s' % (os.path.splitext(bundlename)[0], artwork_ext), artwork)
+            uploaded.append(artwork_id)
+
+            fd, zippath = tempfile.mkstemp(suffix='.zip')
+            os.close(fd)
+            try:
+                zip_bundle(bundlepath, zippath)
+                with open(zippath, 'rb') as fh:
+                    file_id = self._upload_file(bundlename + '.zip', fh.read())
+                uploaded.append(file_id)
+            finally:
+                os.remove(zippath)
+
+            # JSON, not a form: Patchstorage rejects ids that arrive as strings
+            patch_fields = {
+                'title': title,
+                'content': content,
+                'revision': revision,
+                'files': [file_id],
+                'artwork': artwork_id,
+                'tags': tags,
+                'categories': [self.category_id],
+                'license': license_id,
+                'state': state,
+                'platform': self.platform_id,
+            }
+            # An empty preview_url is refused, so a link can be set or changed but not cleared
+            if preview_url:
+                patch_fields['preview_url'] = preview_url
+            body = json.dumps(patch_fields).encode('utf-8')
+            submitted = True
+            try:
+                if patch_id is None:
+                    patch = self._create_patch(patch_fields, body)
+                else:
+                    patch = self._request('PUT', '/patches/%d' % int(patch_id), body=body, content_type='application/json')
+            except PatchstorageError as e:
+                if e.status is None or not 300 <= e.status < 400:
+                    raise
+                patch = self._confirm_after_redirect(e, patch_id, file_id, artwork_id)
+            if not patch.get('id'):
+                raise PatchstorageError('Patchstorage did not return the published pedalboard')
+        except Exception as e:
+            # A 4xx means the patch was refused; after a redirect, 5xx or lost connection it may
+            # exist and point at these uploads, so they are left in place.
+            status = getattr(e, 'status', None)
+            if not submitted or (status is not None and 400 <= status < 500):
+                for orphan in uploaded:
+                    self._delete_file(orphan)
+            else:
+                logging.warning('[patchstorage] outcome of the patch submit is unknown, keeping uploads %s', uploaded)
+            raise
+
+        # Only drop the old uploads once the patch is confirmed to point at the new ones.
+        now_attached = {f.get('id') for f in patch.get('files') or []}
+        now_attached.add((patch.get('artwork') or {}).get('id'))
+        if file_id in now_attached and artwork_id in now_attached:
+            for old in old_files:
+                if old not in now_attached:
+                    self._delete_file(old)
+
+        write_bundle_metadata(bundlepath, patch['id'], patch.get('revision') or revision)
+        return {'id': int(patch['id']), 'url': patch.get('url'), 'revision': patch.get('revision') or revision}
diff --git a/mod/recorder.py b/mod/recorder.py
index 0cf765801..96fe63fa8 100644
--- a/mod/recorder.py
+++ b/mod/recorder.py
@@ -4,77 +4,80 @@
 
 import os, subprocess, time
 from signal import SIGINT
-from tornado.ioloop import IOLoop
-from mod.settings import CAPTURE_PATH, PLAYBACK_PATH, DEVICE_KEY
+from tornado.ioloop import PeriodicCallback
+from mod.settings import RECORDINGS_DIR, DEVICE_KEY
 
 class Recorder(object):
     def __init__(self):
         self.recording = False
         self.tstamp = None
+        self.filename = None
         self.proc = None
+        self.crash_watch = None
+        self.crash_callback = None
 
-    def start(self):
+    def start(self, name_suffix=None):
         if self.recording:
-            self.stop(False)
+            self.stop()
+
+        os.makedirs(RECORDINGS_DIR, exist_ok=True)
+
         self.tstamp = time.time()
-        cmd = ['jack_capture', '-f', 'ogg', '-V', '-dc', '-d', '180', '--port', 'mod-monitor:out_1',
-                                                                      '--port', 'mod-monitor:out_2', CAPTURE_PATH]
+        filename = time.strftime('%Y-%m-%d_%H%M%S', time.localtime(self.tstamp))
+        if name_suffix:
+            filename += '_' + name_suffix
+        filename += '.wav'
+        self.filename = filename
+
+        # --no-stdin: without it jack_capture reads console input to detect a
+        # "press Return to stop" keypress; under Popen (no controlling tty) it
+        # hits EOF on stdin immediately and treats that as the stop signal,
+        # ending the recording within a second of starting.
+        #
+        # No -b (bitdepth) flag: omitting it is what selects jack_capture's
+        # default 32-bit IEEE float sample format. Passing "-b 32" instead
+        # gives 32-bit *integer* PCM, which still clips at +/-1.0 same as any
+        # fixed-point format -- only the float default preserves samples that
+        # exceed unity (e.g. from a hot gain stage) without truncating them.
+        cmd = ['jack_capture', '-f', 'wav', '-V', '-dc', '--no-stdin',
+               '--port', 'mod-monitor:out_1', '--port', 'mod-monitor:out_2',
+               os.path.join(RECORDINGS_DIR, filename)]
         if DEVICE_KEY: # if using a real MOD, setup niceness
             cmd = ["/usr/bin/nice", "-n", "+1"] + cmd
         self.proc = subprocess.Popen(cmd)
         self.recording = True
+        return filename
 
-    def stop(self, returnFileHandle):
-        if not self.recording:
-            return None
-        self.proc.send_signal(SIGINT)
-        self.proc.wait()
-        self.recording = False
-        fhandle = open(CAPTURE_PATH, 'rb') if returnFileHandle else None
-        os.remove(CAPTURE_PATH)
-        return fhandle
-
-class Player(object):
-    def __init__(self):
-        self.proc = None
-        self.fhandle = None
-        self.stop_callback = None
-
-    def play(self, fhandle, stop_callback):
-        self.stop()
-        fhandle.seek(0)
-        with open(PLAYBACK_PATH, 'wb') as fh:
-            fh.write(fhandle.read())
-        cmd = ['sndfile-jackplay', PLAYBACK_PATH]
-        if DEVICE_KEY: # if using a real MOD, setup niceness
-            cmd = ["/usr/bin/nice", "-n", "+1"] + cmd
-        self.proc = subprocess.Popen(cmd, stdout=subprocess.PIPE)
-        self.fhandle = fhandle
-        self.stop_callback = stop_callback
-        IOLoop.instance().add_handler(self.proc.stdout.fileno(), self.end_callback, 16)
+    # Poll jack_capture so a crash (disk full, JACK gone) still ends the
+    # recording state and gets broadcast, instead of leaving clients stuck
+    # thinking a recording is still active.
+    def watch_for_crash(self, callback):
+        self.crash_callback = callback
+        if self.crash_watch is not None:
+            return
+        self.crash_watch = PeriodicCallback(self._poll_crash, 1000)
+        self.crash_watch.start()
 
-    def end_callback(self, fileno, _):
-        self.proc.stdout.read() # just to flush memory
+    def _poll_crash(self):
+        if not self.recording or self.proc is None:
+            return
         if self.proc.poll() is None:
             return
-        IOLoop.instance().remove_handler(fileno)
-        self.fhandle.seek(0)
-        self.callback()
+        filename, duration = self._finish()
+        if self.crash_callback is not None:
+            self.crash_callback(filename, duration)
 
     def stop(self):
-        if self.proc is None:
-            return
-        IOLoop.instance().remove_handler(self.proc.stdout.fileno())
-        if self.proc.poll() is None:
-            self.proc.send_signal(SIGINT)
-            self.proc.wait()
-        self.proc = None
-        self.fhandle.seek(0)
-        self.callback()
+        if not self.recording:
+            return None
+        self.proc.send_signal(SIGINT)
+        self.proc.wait()
+        return self._finish()
 
-    def callback(self):
-        if self.stop_callback is None:
-            return
-        cb = self.stop_callback
-        self.stop_callback = None
-        cb()
+    def _finish(self):
+        filename = self.filename
+        duration = time.time() - self.tstamp
+        self.recording = False
+        self.filename = None
+        self.proc = None
+        return filename, duration
diff --git a/mod/session.py b/mod/session.py
index cd45ea9dc..0f39be4be 100644
--- a/mod/session.py
+++ b/mod/session.py
@@ -2,7 +2,7 @@
 # SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
 # SPDX-License-Identifier: AGPL-3.0-or-later
 
-import os, time, logging, json
+import os, shutil, time, logging, json
 
 from datetime import timedelta
 from tornado import iostream, gen
@@ -11,13 +11,16 @@
 from mod import safe_json_load, TextFileFlusher
 from mod.development import FakeHost, FakeHMI
 from mod.hmi import HMI
-from mod.recorder import Recorder, Player
+from mod.recorder import Recorder
 from mod.screenshot import ScreenshotGenerator
-from mod.settings import (LOG,
+from mod.settings import (LOG, RECORDINGS_DIR,
                           DEV_ENVIRONMENT, DEV_HMI, DEV_HOST,
                           HMI_SERIAL_PORT, HMI_BAUD_RATE, HMI_TIMEOUT,
                           PREFERENCES_JSON_FILE, DEFAULT_SNAPSHOT_NAME, UNTITLED_PEDALBOARD_NAME)
 
+# Refuse to start a new recording below this much free space at RECORDINGS_DIR.
+RECORDING_MIN_FREE_BYTES = 500 * 1024 * 1024
+
 if DEV_HOST:
     Host = FakeHost
 else:
@@ -64,9 +67,8 @@ def __init__(self):
         logging.basicConfig(level=(logging.DEBUG if LOG else logging.WARNING))
 
         self.prefs = UserPreferences()
-        self.player = Player()
         self.recorder = Recorder()
-        self.recordhandle = None
+        self.recorder.watch_for_crash(self._recording_crashed)
         self.external_ui_timer = None
 
         self.screenshot_generator = ScreenshotGenerator()
@@ -236,9 +238,16 @@ def web_cv_addressing_plugin_port_remove(self, uri, callback):
     # A new webbrowser page has been open
     # We need to cache its socket address and send any msg callbacks to it
     def websocket_opened(self, ws, callback):
+        # Pi-stomp connects from localhost; browsers come from LAN IPs.
+        # Local clients don't need real-time audio meters or data_ready flow control.
+        if ws.request.remote_ip in ('127.0.0.1', '::1'):
+            ws._is_local = True
+
         def ready(_):
             self.websockets.append(ws)
             self.host.open_connection_if_needed(ws)
+            if self.recorder.recording:
+                ws.write_message("recording start %s" % self.recorder.filename)
             callback(True)
 
         # if this is the 1st socket, start ui session
@@ -262,51 +271,38 @@ def websocket_closed(self, ws, callback):
 
     # -----------------------------------------------------------------------------------------------------------------
 
-    # Start recording
+    # Start recording. Returns (ok, filename_or_error).
     def web_recording_start(self):
-        self.player.stop()
-        self.recorder.start()
-
-    # Stop recording
-    def web_recording_stop(self):
-        if self.recordhandle is not None:
-            self.recordhandle.close()
-        self.recordhandle = self.recorder.stop(True)
-
-    # Delete previous recording, if any
-    def web_recording_delete(self):
-        self.player.stop()
-
-        if self.recordhandle is not None:
-            self.recordhandle.close()
-            self.recordhandle = None
-
-    # Return recording data
-    def web_recording_download(self):
-        if self.recordhandle is None:
-            return ""
+        if self.recorder.recording:
+            return False, "already recording"
 
-        self.recordhandle.seek(0)
-        return self.recordhandle.read()
+        os.makedirs(RECORDINGS_DIR, exist_ok=True)
+        free = shutil.disk_usage(RECORDINGS_DIR).free
+        if free < RECORDING_MIN_FREE_BYTES:
+            return False, "not enough free disk space"
 
-    # Playback of previous recording started
-    def web_playing_start(self, callback):
-        if self.recordhandle is None:
-            self.recordhandle = self.recorder.stop(True)
+        filename = self.recorder.start()
+        self.msg_callback("recording start %s" % filename)
+        return True, filename
 
-        def stop():
-            self.host.unmute()
-            callback()
-
-        def schedule_stop():
-            IOLoop.instance().add_timeout(timedelta(seconds=0.5), stop)
-
-        self.host.mute()
-        self.player.play(self.recordhandle, schedule_stop)
-
-    # Playback stopped
-    def web_playing_stop(self):
-        self.player.stop()
+    # Stop recording. Returns (filename, duration_seconds), or (None, None) if not recording.
+    def web_recording_stop(self):
+        result = self.recorder.stop()
+        if result is None:
+            return None, None
+        filename, duration = result
+        self.msg_callback("recording stop %s %.1f" % (filename, duration))
+        return filename, duration
+
+    # Recorder process died unexpectedly (disk full, JACK gone, ...)
+    def _recording_crashed(self, filename, duration):
+        self.msg_callback("recording stop %s %.1f" % (filename, duration))
+
+    # Current recording state, for a client to resync on page load / reconnect
+    def web_recording_status(self):
+        if not self.recorder.recording:
+            return False, None, 0
+        return True, self.recorder.filename, time.time() - self.recorder.tstamp
 
     # -----------------------------------------------------------------------------------------------------------------
     # Websocket funtions, called when receiving messages from socket (see webserver.py)
@@ -314,8 +310,11 @@ def web_playing_stop(self):
 
     # Receive data ready, with matching counter value
     # This indicates web browser side is ready to receive more events
-    def ws_data_ready(self, counter):
-        if self.host.web_data_ready_counter == counter:
+    def ws_data_ready(self, counter, ws):
+        ws._meter_ready = True
+        # Guard: if the timer already fired and sent output_data_ready, web_data_ready_ok
+        # is True — don't send a second one to mod-host.
+        if self.host.web_data_ready_counter == counter and not self.host.web_data_ready_ok:
             self.host.web_data_ready_ok = True
             self.host.send_output_data_ready(None, None)
 
@@ -412,9 +411,36 @@ def readdress_presets(self, instance, callback):
     # TODO
     # Everything after this line is yet to be documented
 
+    # See docs/output-data-flow.md for the full data_finish / output_data_ready
+    # handshake and the _is_local local-client optimization.
     def msg_callback(self, msg):
+        is_output_set = msg.startswith("output_set ")
+        is_data_ready = msg.startswith("data_ready ")
+        any_non_local_received = False
         for ws in self.websockets:
+            if getattr(ws, '_is_local', False):
+                if is_output_set or is_data_ready:
+                    continue
+            elif is_output_set:
+                if getattr(ws, '_is_background', False) or not getattr(ws, '_meter_ready', True):
+                    continue
+            elif is_data_ready:
+                # Skip backgrounded or slow clients so they can't stall mod-host.
+                # For backgrounded tabs the browser sends client_hidden which sets
+                # _is_background; the self-acknowledge below then fires immediately.
+                if getattr(ws, '_is_background', False) or not getattr(ws, '_meter_ready', True):
+                    continue
+                ws._meter_ready = False
             ws.write_message(msg)
+            if is_data_ready:
+                any_non_local_received = True
+
+        # If data_ready was suppressed for every connected client (all are local/privileged),
+        # mirror what ws_data_ready does: acknowledge and send output_data_ready back to
+        # mod-host so its feedback loop stays unblocked.
+        if is_data_ready and not any_non_local_received:
+            self.host.web_data_ready_ok = True
+            self.host.send_output_data_ready(None, None)
 
     def msg_callback_broadcast(self, msg, ws2):
         for ws in self.websockets:
diff --git a/mod/settings.py b/mod/settings.py
index b574f01d7..00088d5d3 100644
--- a/mod/settings.py
+++ b/mod/settings.py
@@ -106,8 +106,7 @@
 UNTITLED_PEDALBOARD_NAME="Untitled Pedalboard"
 DEFAULT_SNAPSHOT_NAME="Default"
 
-CAPTURE_PATH='/tmp/capture.ogg'
-PLAYBACK_PATH='/tmp/playback.ogg'
+RECORDINGS_DIR = os.path.join(USER_FILES_DIR, 'Audio Recordings')
 
 UPDATE_MOD_OS_FILE='/data/{}'.format(os.environ.get('MOD_UPDATE_MOD_OS_FILE', 'modduo.tar').replace('*','cloud'))
 UPDATE_MOD_OS_HERLPER_FILE='/data/boot-restore'
@@ -119,6 +118,13 @@
 PATCHSTORAGE_API_URL=os.environ.get('PATCHSTORAGE_API_URL', 'http://localhost/api/beta/patches')
 PATCHSTORAGE_PLATFORM_ID=os.environ.get('PATCHSTORAGE_PLATFORM_ID', 5027)
 PATCHSTORAGE_TARGET_ID=os.environ.get('PATCHSTORAGE_TARGET_ID', 5037)
+# Pedalboards on Patchstorage live on the "pi-Stomp" platform; an optional tag narrows the list further
+PATCHSTORAGE_PEDALBOARD_PLATFORM_ID=os.environ.get('PATCHSTORAGE_PEDALBOARD_PLATFORM_ID', 12520)  # "pi-stomp"
+PATCHSTORAGE_PEDALBOARD_TAG_ID=os.environ.get('PATCHSTORAGE_PEDALBOARD_TAG_ID', '')
+# Sharing pedalboards: login token (never the password) is kept here, mode 0600
+PATCHSTORAGE_AUTH_FILE=os.environ.get('PATCHSTORAGE_AUTH_FILE', join(DATA_DIR, 'patchstorage-auth.json'))
+PATCHSTORAGE_SHARE_CATEGORY_ID=os.environ.get('PATCHSTORAGE_SHARE_CATEGORY_ID', 372)  # "Sound"
+PATCHSTORAGE_SHARE_DEFAULT_TAGS=os.environ.get('PATCHSTORAGE_SHARE_DEFAULT_TAGS', 'pedalboard, pi-stomp')
 BLOKAS_ENABLED=bool(int(os.environ.get('BLOKAS_ENABLED', True)))
 BLOKAS_APT_PACKAGE=os.environ.get('BLOKAS_APT_PACKAGE', 'modep-mod-ui')
 BLOKAS_UPDATE_CHECK_URL=os.environ.get('BLOKAS_UPDATE_CHECK_URL', 'https://blokas.io/modep/version/v1/')
diff --git a/mod/sfzbuilder.py b/mod/sfzbuilder.py
new file mode 100755
index 000000000..8763edbdc
--- /dev/null
+++ b/mod/sfzbuilder.py
@@ -0,0 +1,420 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+import os
+import re
+import shutil
+import json
+
+from mod import TextFileFlusher, safe_json_load
+from mod.settings import USER_FILES_DIR
+
+# Audio extensions accepted as samples. Same set as FilesList.complete_audiofile_exts.
+AUDIO_EXTENSIONS = (
+    # through libsndfile
+    ".aif", ".aifc", ".aiff", ".au", ".bwf", ".flac", ".htk", ".iff", ".mat4", ".mat5", ".oga", ".ogg", ".opus",
+    ".paf", ".pvf", ".pvf5", ".sd2", ".sf", ".snd", ".svx", ".vcc", ".w64", ".wav", ".xi",
+    # extra through ffmpeg
+    ".3g2", ".3gp", ".aac", ".ac3", ".amr", ".ape", ".mp2", ".mp3", ".mpc", ".wma",
+)
+
+LOOP_MODES = ("one_shot", "no_loop")
+
+# The sidecar is internal and never shown, so it keeps one name. The SFZ file is
+# shown: the file selector of a plugin lists it by its basename alone, so every
+# bank writing "bank.sfz" gave a list of identical rows and you could not tell
+# which bank you were choosing. The SFZ file thus carries the name of its bank.
+SIDECAR_NAME = "bank.json"
+MAX_NOTES = 128
+
+
+def sfz_instruments_dir():
+    return os.path.join(USER_FILES_DIR, "SFZ Instruments")
+
+
+def is_audio_file(path):
+    return os.path.isfile(path) and path.lower().endswith(AUDIO_EXTENSIONS)
+
+
+def sanitize_filename(name):
+    # Keep only safe characters. A space is one of them: generate_sfz puts
+    # sample= last on its line, where the value runs to the end of the line, so
+    # a space in the name cannot be read as the start of another opcode.
+    # The characters = < # are still removed: they break the SFZ parser.
+    name = os.path.basename(name or "")
+    stem, ext = os.path.splitext(name)
+    if not ext and name.startswith("."):
+        # Name like ".wav": treat the whole name as the extension.
+        stem, ext = "sample", name
+    stem = re.sub(r"[^A-Za-z0-9._ -]+", "_", stem).strip("._ ")
+    ext = re.sub(r"[^A-Za-z0-9.]", "", ext)
+    if not stem:
+        stem = "sample"
+    return stem + ext
+
+
+def sanitize_bank_name(name):
+    if not name:
+        raise ValueError("bank name is empty")
+    name = os.path.basename(name)
+    name = re.sub(r"[^A-Za-z0-9._-]+", "_", name).strip(".")
+    if len(name) == 0:
+        raise ValueError("bank name is empty")
+    if name == "." or name == "..":
+        raise ValueError("invalid bank name")
+    return name
+
+
+def unique_filename(name, used):
+    if name not in used:
+        return name
+    stem, ext = os.path.splitext(name)
+    i = 1
+    while True:
+        candidate = "%s_%d%s" % (stem, i, ext)
+        if candidate not in used:
+            return candidate
+        i += 1
+
+
+def list_audio_files(root, exclude=None):
+    if not os.path.isdir(root):
+        return []
+    excludepath = os.path.realpath(exclude) if exclude else None
+    result = []
+    for dirpath, dirnames, filenames in os.walk(root):
+        realdir = os.path.realpath(dirpath)
+        if excludepath and (realdir == excludepath or realdir.startswith(excludepath + os.sep)):
+            dirnames[:] = []
+            continue
+        for name in filenames:
+            if is_audio_file(os.path.join(dirpath, name)):
+                result.append(os.path.join(dirpath, name))
+    result.sort()
+    return result
+
+
+def list_banks():
+    root = sfz_instruments_dir()
+    if not os.path.isdir(root):
+        return []
+    return sorted(name for name in os.listdir(root) if os.path.isdir(os.path.join(root, name)))
+
+
+def bank_dir(name):
+    return os.path.join(sfz_instruments_dir(), sanitize_bank_name(name))
+
+
+def sfz_filename(name):
+    # The name a plugin's file selector shows for this bank.
+    return sanitize_bank_name(name) + ".sfz"
+
+
+def find_sfz_files(path):
+    # Every .sfz directly in a bank directory. A rename leaves the old one
+    # behind, so a build removes what it did not write.
+    try:
+        return [n for n in os.listdir(path) if n.lower().endswith(".sfz")]
+    except OSError:
+        return []
+
+
+def create_bank(name):
+    path = bank_dir(name)
+    if not os.path.isdir(path):
+        os.makedirs(path)
+    return path
+
+
+def _existing_bank_dir(name):
+    # A bank directory that is there, resolved and checked against its root.
+    # sanitize_bank_name already drops a separator, so this guards the case
+    # where the name is a symbolic link that points out of the instruments
+    # directory: os.path.isdir follows a link and rmtree would then delete
+    # whatever it found.
+    root = sfz_instruments_dir()
+    path = safe_resolve(root, sanitize_bank_name(name))
+    if path == os.path.realpath(root):
+        raise ValueError("invalid bank name")
+    if not os.path.isdir(path):
+        raise ValueError("no such bank: %s" % sanitize_bank_name(name))
+    return path
+
+
+def rename_bank(name, new_name):
+    # The .sfz file inside carries the name of the bank (see sfz_filename), so
+    # a rename has to rename that file too. Without it a plugin's file selector
+    # would go on showing the old name until the next build.
+    old_path = _existing_bank_dir(name)
+    new_clean = sanitize_bank_name(new_name)
+    new_path = os.path.join(sfz_instruments_dir(), new_clean)
+
+    if os.path.realpath(new_path) == old_path:
+        # The same bank. A name that sanitizes to what it already is, or a
+        # change of nothing at all, is not an error.
+        return new_clean
+    if os.path.exists(new_path):
+        raise ValueError("a bank named %s is already there" % new_clean)
+
+    os.rename(old_path, new_path)
+
+    # The sidecar is not touched: it holds the pad layout and the absolute
+    # paths that samples were copied from, and neither depends on the name.
+    sfz_name = sfz_filename(new_clean)
+    for stale in find_sfz_files(new_path):
+        if stale == sfz_name:
+            continue
+        os.rename(os.path.join(new_path, stale), os.path.join(new_path, sfz_name))
+        break
+    for stale in find_sfz_files(new_path):
+        if stale != sfz_name:
+            os.remove(os.path.join(new_path, stale))
+    return new_clean
+
+
+def delete_bank(name):
+    # The whole directory goes: the .sfz, the sidecar, and every sample that
+    # was uploaded to or copied into the bank. A sample that a pad points at
+    # outside the bank is not touched, because it was never in here.
+    shutil.rmtree(_existing_bank_dir(name))
+    return sanitize_bank_name(name)
+
+
+def list_bank_samples(name):
+    return list_audio_files(bank_dir(name))
+
+
+def list_device_samples(exclude_bank=None):
+    exclude = bank_dir(exclude_bank) if exclude_bank else None
+    return list_audio_files(USER_FILES_DIR, exclude=exclude)
+
+
+def list_usb_samples():
+    result = []
+    if not os.path.isdir("/media"):
+        return result
+    for label in sorted(os.listdir("/media")):
+        root = os.path.join("/media", label)
+        if os.path.isdir(root):
+            result.extend(list_audio_files(root))
+    result.sort()
+    return result
+
+
+def sample_roots():
+    # The places the panel lists samples from. An external sample can only come
+    # from one of these, because they are the only ones it shows.
+    roots = [USER_FILES_DIR]
+    if os.path.isdir("/media"):
+        roots.append("/media")
+    return [os.path.realpath(r) for r in roots]
+
+
+def is_allowed_source(path):
+    # The path of an external sample arrives from the browser, so it is not
+    # checked by anything before this. Without the test below a bank could copy
+    # any readable file on the device whose name ends in an audio extension.
+    for root in sample_roots():
+        if path == root or path.startswith(root + os.sep):
+            return True
+    return False
+
+
+def safe_resolve(root, name):
+    root = os.path.realpath(root)
+    path = os.path.realpath(os.path.join(root, name))
+    if path != root and not path.startswith(root + os.sep):
+        raise ValueError("path escapes its root")
+    return path
+
+
+def fmt_db(value):
+    if value is None:
+        return None
+    value = round(float(value), 2)
+    if value == int(value):
+        return str(int(value))
+    return str(value)
+
+
+def generate_sfz(regions):
+    # regions: list of dicts with key, sample, volume, pitch_keycenter, loop_mode
+    #
+    # sample= is written last on each line. The value of an SFZ opcode runs to
+    # the next opcode or to the end of the line, so a name that holds a space is
+    # read whole only in the last position. Every other opcode here is a number
+    # or a word from a fixed set.
+    lines = []
+    for region in regions:
+        line = "<region> key=%d" % int(region["key"])
+        if region.get("pitch_keycenter") is not None:
+            line += " pitch_keycenter=%d" % int(region["pitch_keycenter"])
+        volume = fmt_db(region.get("volume"))
+        if volume is not None:
+            line += " volume=%s" % volume
+        line += " loop_mode=%s" % region["loop_mode"]
+        line += " sample=%s" % region["sample"]
+        lines.append(line)
+    return "\n".join(lines) + "\n"
+
+
+def validate_slot(slot):
+    if "sample" not in slot or not slot["sample"]:
+        raise ValueError("slot has no sample")
+    volume = slot.get("volume")
+    if volume is not None:
+        volume = float(volume)
+        if volume < -144 or volume > 48:
+            raise ValueError("volume out of range")
+        slot["volume"] = volume
+    pitch = slot.get("pitch_keycenter")
+    if pitch is not None:
+        pitch = int(pitch)
+        if pitch < 0 or pitch > 127:
+            raise ValueError("pitch_keycenter out of range")
+        slot["pitch_keycenter"] = pitch
+    loop_mode = slot.get("loop_mode", "one_shot")
+    if loop_mode not in LOOP_MODES:
+        raise ValueError("invalid loop_mode")
+    slot["loop_mode"] = loop_mode
+    return slot
+
+
+def load_bank(name):
+    # Returns the saved pad layout so the UI can open a bank again for edit.
+    path = os.path.join(bank_dir(name), SIDECAR_NAME)
+    data = safe_json_load(path, dict)
+    slots = data.get("slots")
+    if not isinstance(slots, list):
+        slots = []
+    base_note = data.get("base_note")
+    try:
+        base_note = int(base_note)
+    except (TypeError, ValueError):
+        base_note = 36
+    if base_note < 0 or base_note > 127:
+        base_note = 36
+    return {
+        "base_note": base_note,
+        "slots": [slot if isinstance(slot, dict) else None for slot in slots],
+    }
+
+
+def build_bank(name, base_note, slots):
+    # The bank folder is the source of truth.
+    # Uploads land there directly. External files (device, USB) are copied
+    # there. The sidecar tracks the copies so a rebuild can remove stale ones.
+    name = sanitize_bank_name(name)
+    if base_note is None:
+        raise ValueError("base note is missing")
+    base_note = int(base_note)
+    if base_note < 0 or base_note > 127:
+        raise ValueError("base note out of range")
+    if not slots:
+        raise ValueError("no slots")
+    # slots is pad-aligned: a None entry is a free pad and keeps its note number.
+    if not any(slot for slot in slots):
+        raise ValueError("no slots")
+    # Only a pad that holds a sample needs a note. A bank of eight pads with a
+    # sample on the first one is a bank the panel offers at any base note, and
+    # refusing it because seven empty pads run past 127 was refusing to save
+    # work that is there.
+    last_filled = max(i for i, slot in enumerate(slots) if slot)
+    if base_note + last_filled >= MAX_NOTES:
+        raise ValueError("pad %d would need note %d, and the last note is %d"
+                         % (last_filled + 1, base_note + last_filled, MAX_NOTES - 1))
+
+    path = create_bank(name)
+    sidecar_path = os.path.join(path, SIDECAR_NAME)
+    old_copied = safe_json_load(sidecar_path, dict).get("copied", {})
+
+    used = set(os.listdir(path))
+    claimed = set()
+    new_copied = {}
+    regions = []
+
+    layout = []
+    for i, slot in enumerate(slots):
+        if not slot:
+            layout.append(None)
+            continue
+        key = base_note + i
+        validate_slot(slot)
+        source = slot.get("source")
+        if source:
+            src = os.path.realpath(source)
+            if not is_allowed_source(src):
+                raise ValueError("sample is not in a place the panel reads: %s" % source)
+            if not is_audio_file(src):
+                raise ValueError("source is not an audio file: %s" % src)
+            dest = old_copied.get(src)
+            if not dest or dest in claimed or not is_audio_file(os.path.join(path, dest)):
+                dest = unique_filename(sanitize_filename(os.path.basename(src)), used)
+            shutil.copy2(src, os.path.join(path, dest))
+            new_copied[src] = dest
+            claimed.add(dest)
+            used.add(dest)
+        else:
+            # The name is already the name of a file in the bank, so it is used
+            # as it is. Running it through sanitize_filename again renamed the
+            # file that the panel had just listed -- "My Kick.wav" was looked up
+            # as "My_Kick.wav" -- and no sample that came from anywhere but this
+            # panel's own upload could be saved.
+            dest = slot["sample"]
+            if dest != os.path.basename(dest):
+                raise ValueError("sample name holds a path: %s" % dest)
+            resolved = safe_resolve(path, dest)
+            if dest in claimed:
+                raise ValueError("sample name conflict: %s" % dest)
+            if not is_audio_file(resolved):
+                raise ValueError("sample not found in bank: %s" % dest)
+
+        regions.append({
+            "key": key,
+            "sample": dest,
+            "volume": slot.get("volume"),
+            "pitch_keycenter": slot.get("pitch_keycenter"),
+            "loop_mode": slot["loop_mode"],
+        })
+        # The layout keeps the bank-local name, so a reload needs no source path.
+        layout.append({
+            "sample": dest,
+            "volume": slot.get("volume"),
+            "pitch_keycenter": slot.get("pitch_keycenter"),
+            "loop_mode": slot["loop_mode"],
+        })
+
+    # Remove stale copies. Untracked uploads stay untouched.
+    for src, dest in old_copied.items():
+        if src not in new_copied:
+            stale = os.path.join(path, dest)
+            if is_audio_file(stale):
+                os.remove(stale)
+                used.discard(dest)
+
+    sfz_name = sfz_filename(name)
+    sfz_path = os.path.join(path, sfz_name)
+    with TextFileFlusher(sfz_path) as fh:
+        fh.write(generate_sfz(regions))
+
+    # An .sfz under an earlier name would else stay in the file selector of a
+    # plugin next to the one this build wrote.
+    for stale in find_sfz_files(path):
+        if stale != sfz_name:
+            os.remove(os.path.join(path, stale))
+
+    with TextFileFlusher(sidecar_path) as fh:
+        json.dump({
+            "copied": new_copied,
+            "base_note": base_note,
+            "slots": layout,
+        }, fh, indent=2)
+
+    return {
+        "ok": True,
+        "name": name,
+        "path": sfz_path,
+        "file": sfz_name,
+        "count": len(regions),
+    }
diff --git a/mod/webserver.py b/mod/webserver.py
index a7962bc90..a91890ee8 100644
--- a/mod/webserver.py
+++ b/mod/webserver.py
@@ -11,6 +11,7 @@
 import sys
 import time
 import tarfile
+import zipfile
 
 try:
     sys.modules['tornado'] = __import__('tornado')
@@ -18,6 +19,7 @@
     pass
 
 from base64 import b64decode, b64encode
+from concurrent.futures import ThreadPoolExecutor
 from datetime import timedelta
 from random import randint
 from signal import signal, SIGUSR1, SIGUSR2
@@ -38,10 +40,13 @@
                           LV2_PLUGIN_DIR, LV2_PEDALBOARDS_DIR, IMAGE_VERSION,
                           UPDATE_CC_FIRMWARE_FILE, UPDATE_MOD_OS_FILE, UPDATE_MOD_OS_HERLPER_FILE, USING_256_FRAMES_FILE,
                           DEFAULT_ICON_TEMPLATE, DEFAULT_SETTINGS_TEMPLATE, DEFAULT_ICON_IMAGE,
-                          DEFAULT_PEDALBOARD, DEFAULT_SNAPSHOT_NAME, DATA_DIR, KEYS_PATH, USER_FILES_DIR,
+                          DEFAULT_PEDALBOARD, DEFAULT_SNAPSHOT_NAME, DATA_DIR, KEYS_PATH, USER_FILES_DIR, RECORDINGS_DIR,
                           FAVORITES_JSON_FILE, PREFERENCES_JSON_FILE, USER_ID_JSON_FILE,
                           DEV_HOST, UNTITLED_PEDALBOARD_NAME, MODEL_CPU, MODEL_TYPE, PEDALBOARDS_LABS_HTTP_ADDRESS,
-                          PATCHSTORAGE_ENABLED, PATCHSTORAGE_API_URL, PATCHSTORAGE_PLATFORM_ID, PATCHSTORAGE_TARGET_ID, BLOKAS_ENABLED,
+                          PATCHSTORAGE_ENABLED, PATCHSTORAGE_API_URL, PATCHSTORAGE_PLATFORM_ID, PATCHSTORAGE_TARGET_ID,
+                          PATCHSTORAGE_PEDALBOARD_PLATFORM_ID, PATCHSTORAGE_PEDALBOARD_TAG_ID,
+                          PATCHSTORAGE_AUTH_FILE, PATCHSTORAGE_SHARE_CATEGORY_ID, PATCHSTORAGE_SHARE_DEFAULT_TAGS,
+                          BLOKAS_ENABLED,
                           BLOKAS_APT_PACKAGE, BLOKAS_UPDATE_CHECK_URL)
 
 from mod import (
@@ -50,6 +55,13 @@
     get_hardware_descriptor, get_unique_name, symbolify,
 )
 from mod.bank import list_banks, save_banks, remove_pedalboard_from_banks
+from mod.patchstorage_share import PatchstorageClient, PatchstorageError, bump_revision, read_bundle_metadata
+from mod.sfzbuilder import (
+    AUDIO_EXTENSIONS, SIDECAR_NAME,
+    sanitize_filename, unique_filename, list_banks as sfz_list_banks,
+    list_bank_samples, list_device_samples, list_usb_samples, create_bank, build_bank,
+    load_bank, rename_bank, delete_bank,
+)
 from mod.session import SESSION
 from modtools.utils import (
     kPedalboardInfoUserOnly, kPedalboardInfoFactoryOnly, kPedalboardInfoBoth,
@@ -76,6 +88,9 @@ class GlobalWebServerState(object):
 gState = GlobalWebServerState()
 gState.favorites = []
 
+# Cached result of get_all_plugins() / EffectList. Invalidated on plugin install or removal.
+_plugins_list_cache = None
+
 @gen.coroutine
 def install_bundles_in_tmp_dir(options, callback):
     error     = ""
@@ -159,6 +174,8 @@ def install_bundles_in_tmp_dir(options, callback):
         }
 
     os.sync()
+    global _plugins_list_cache
+    _plugins_list_cache = None
     callback(resp)
 
 def run_command(args, cwd, callback):
@@ -240,6 +257,120 @@ def reset_get_all_pedalboards_cache_with_refresh(ptype):
     reset_get_all_pedalboards_cache(ptype)
     IOLoop.instance().add_callback(_reset_get_all_pedalboards_cache_with_refresh_2)
 
+def _read_pedalboard_patchstorage(bundlepath):
+    if not bundlepath:
+        return None
+    path = os.path.join(bundlepath, 'patchstorage.json')
+    if not os.path.isfile(path):
+        return None
+    try:
+        with open(path, 'r', encoding='utf-8') as fh:
+            data = json.load(fh)
+        if isinstance(data, dict) and 'id' in data:
+            return data
+    except Exception as e:
+        logging.warning('Failed to read pedalboard patchstorage.json: %s', e)
+    return None
+
+def _install_pedalboard_zip(filename, options, callback):
+    """Extract a pedalboard zip into LV2_PEDALBOARDS_DIR and stamp patchstorage.json."""
+    extract_dir = os.path.join(DOWNLOAD_TMP_DIR, 'pb-install-' + str(uuid4()))
+    os.makedirs(extract_dir, exist_ok=True)
+
+    try:
+        with zipfile.ZipFile(filename, 'r') as zf:
+            zf.extractall(extract_dir)
+    except zipfile.BadZipFile as e:
+        logging.warning('Bad pedalboard zip: %s', e)
+        shutil.rmtree(extract_dir, ignore_errors=True)
+        if os.path.exists(filename):
+            os.remove(filename)
+        callback({'ok': False, 'error': 'Invalid pedalboard zip file'})
+        return
+
+    # Find the .pedalboard directory (may be nested one level)
+    src_bundle = None
+    for root, dirs, files in os.walk(extract_dir):
+        for d in dirs:
+            if d.endswith('.pedalboard'):
+                src_bundle = os.path.join(root, d)
+                break
+        if src_bundle:
+            break
+
+    if src_bundle is None:
+        # fallback: single top-level dir with manifest.ttl
+        entries = [e for e in os.listdir(extract_dir) if not e.startswith('.')]
+        if len(entries) == 1:
+            candidate = os.path.join(extract_dir, entries[0])
+            if os.path.isdir(candidate) and os.path.isfile(os.path.join(candidate, 'manifest.ttl')):
+                src_bundle = candidate
+
+    if src_bundle is None or not os.path.isdir(src_bundle):
+        shutil.rmtree(extract_dir, ignore_errors=True)
+        if os.path.exists(filename):
+            os.remove(filename)
+        callback({'ok': False, 'error': 'No pedalboard found in zip'})
+        return
+
+    if not os.path.exists(LV2_PEDALBOARDS_DIR):
+        os.makedirs(LV2_PEDALBOARDS_DIR)
+
+    bundlename = os.path.basename(src_bundle)
+    if not bundlename.endswith('.pedalboard'):
+        bundlename = bundlename + '.pedalboard'
+
+    dest_bundle = os.path.join(LV2_PEDALBOARDS_DIR, bundlename)
+
+    # If updating an existing Patchstorage install, replace that bundle
+    psid = options.get('psid')
+    if psid is not None:
+        for pedal in get_all_pedalboards(kPedalboardInfoUserOnly):
+            ps = _read_pedalboard_patchstorage(pedal.get('bundle'))
+            if ps and str(ps.get('id')) == str(psid):
+                dest_bundle = pedal['bundle']
+                break
+
+    if os.path.exists(dest_bundle):
+        # avoid clobbering unrelated local pedalboards with the same folder name
+        existing_ps = _read_pedalboard_patchstorage(dest_bundle)
+        if existing_ps is None or (psid is not None and str(existing_ps.get('id')) != str(psid)):
+            titlesym = symbolify(os.path.splitext(bundlename)[0])[:16]
+            dest_bundle = os.path.join(LV2_PEDALBOARDS_DIR, "%s.pedalboard" % titlesym)
+            while os.path.exists(dest_bundle):
+                dest_bundle = os.path.join(LV2_PEDALBOARDS_DIR, "%s-%i.pedalboard" % (titlesym, randint(1, 99999)))
+        else:
+            shutil.rmtree(dest_bundle)
+
+    shutil.move(src_bundle, dest_bundle)
+
+    if psid is not None:
+        psversion = options.get('psversion', '0.0')
+        config = {'id': int(psid), 'revision': str(psversion)}
+        json_path = os.path.join(dest_bundle, 'patchstorage.json')
+        with open(json_path, 'w', encoding='utf-8') as fh:
+            json.dump(config, fh, ensure_ascii=False, indent=4)
+
+    # Prefer thumbnail.png; fall back to copying screenshot if present
+    thumb = os.path.join(dest_bundle, 'thumbnail.png')
+    shot = os.path.join(dest_bundle, 'screenshot.png')
+    if not os.path.isfile(thumb) and os.path.isfile(shot):
+        try:
+            shutil.copyfile(shot, thumb)
+        except Exception:
+            pass
+
+    shutil.rmtree(extract_dir, ignore_errors=True)
+    if os.path.exists(filename):
+        os.remove(filename)
+
+    reset_get_all_pedalboards_cache_with_refresh(kPedalboardInfoUserOnly)
+    callback({
+        'ok': True,
+        'bundle': dest_bundle,
+        'bundles': [dest_bundle],
+    })
+
 class TimelessRequestHandler(web.RequestHandler):
     def compute_etag(self):
         return None
@@ -250,6 +381,24 @@ def set_default_headers(self):
     def should_return_304(self):
         return False
 
+def _html_fingerprint():
+    """
+    Newest modification time under HTML_DIR, in hex. Static files are cached for a year and
+    keyed on "?v=", so this makes the key change whenever the web files do, not only with a
+    new OS image.
+    """
+    newest = 0
+    for root, dirs, files in os.walk(HTML_DIR):
+        dirs[:] = [d for d in dirs if not d.startswith('.') and d != 'node_modules']
+        for name in files:
+            try:
+                newest = max(newest, os.path.getmtime(os.path.join(root, name)))
+            except OSError:
+                pass
+    return '%x' % int(newest)
+
+HTML_FINGERPRINT = _html_fingerprint()
+
 class TimelessStaticFileHandler(web.StaticFileHandler):
     def compute_etag(self):
         return None
@@ -268,6 +417,29 @@ def get_cache_time(self, path, modified, mime_type):
     def get_modified_time(self):
         return None
 
+class IslandStaticFileHandler(web.StaticFileHandler):
+    """
+    Serves html/js/app/, the directory of the islands.
+
+    index.html gives each of its own files a "?v=" query and the server gives
+    every static file a cache of one year. An island is different: it loads its
+    files with import() and with a <link> that it makes itself, so those files
+    carry no query. With a cache of one year the browser keeps an old file --
+    or keeps a 404 from a build before the file was there -- and the panel is
+    then empty and gives no other sign.
+
+    This handler asks the browser to check each time. The server answers 304 if
+    the file did not change, so the cost is one small request for each file.
+    """
+    def compute_etag(self):
+        # The default ETag of Tornado. The browser sends it back and the server
+        # answers 304 when the file is the same.
+        return web.StaticFileHandler.compute_etag(self)
+
+    def set_extra_headers(self, path):
+        # set_extra_headers runs after set_headers, so this value stays.
+        self.set_header("Cache-Control", "no-cache")
+
 class JsonRequestHandler(TimelessRequestHandler):
     def write(self, data):
         # FIXME: something is sending strings out, need to investigate what later..
@@ -860,8 +1032,10 @@ def post(self):
 
 class EffectList(JsonRequestHandler):
     def get(self):
-        data = get_all_plugins()
-        self.write(data)
+        global _plugins_list_cache
+        if _plugins_list_cache is None:
+            _plugins_list_cache = get_all_plugins()
+        self.write(_plugins_list_cache)
 
 class SDKEffectInstaller(EffectInstaller):
     def set_default_headers(self):
@@ -1317,7 +1491,18 @@ def on_message(self, message):
 
         if cmd == "data_ready":
             counter = int(data[1])
-            SESSION.ws_data_ready(counter)
+            SESSION.ws_data_ready(counter, self)
+            return
+
+        elif cmd == "client_hidden":
+            print("[ws] client_hidden from %s" % self.request.remote_ip, flush=True)
+            self._is_background = True
+            return
+
+        elif cmd == "client_visible":
+            print("[ws] client_visible from %s" % self.request.remote_ip, flush=True)
+            self._is_background = False
+            self._meter_ready = True
             return
 
         elif cmd == "param_set":
@@ -1447,6 +1632,8 @@ def post(self):
             if len(broken) > 0:
                 list_banks(broken)
                 reset_get_all_pedalboards_cache(kPedalboardInfoBoth)
+            global _plugins_list_cache
+            _plugins_list_cache = None
 
         self.write(resp)
 
@@ -1458,6 +1645,10 @@ def get(self):
         if default_pb:
             default_pb['title'] = "Default"
             default_pb['broken'] = False
+        for pedal in allpedals:
+            ps = _read_pedalboard_patchstorage(pedal.get('bundle'))
+            if ps:
+                pedal['patchstorage'] = ps
         self.write(allpedals)
 
 class PedalboardCurrent(JsonRequestHandler):
@@ -1498,9 +1689,7 @@ def get(self):
         bundlename = os.path.basename(bundlepath)
         # /tmp/*
         tmpdir   = "/tmp"
-        tmpaudio = os.path.join(tmpdir, "audio.ogg")
         tmpstep1 = os.path.join(tmpdir, "pedalboard.tar.gz")
-        tmpstep2 = os.path.join(tmpdir, "pedalboard+audio.tar.gz")
 
         # local usage
         ioloop = IOLoop.instance()
@@ -1515,37 +1704,12 @@ def end_procs(tmpfile):
             self.finish()
             os.remove(tmpfile)
 
-        # callback for audio + pedalboard.tar.gz packing
-        def end_proc2(fileno, event):
-            if self.proc.poll() is None:
-                return
-            ioloop.remove_handler(fileno)
-
-            os.remove(tmpaudio)
-            os.remove(tmpstep1)
-            end_procs(tmpstep2)
-
         # callback for pedalboard packing
         def end_proc1(fileno, event):
             if self.proc.poll() is None:
                 return
             ioloop.remove_handler(fileno)
-
-            # stop now if no audio available
-            if SESSION.recordhandle is None:
-                end_procs(tmpstep1)
-                return
-
-            # dump audio to disk
-            SESSION.recordhandle.seek(0)
-            with open(tmpaudio, 'wb') as fh:
-                fh.write(SESSION.recordhandle.read())
-
-            # pack audio + pedalboard.tar.gz
-            self.proc = subprocess.Popen(['tar', 'chzf', tmpstep2, "audio.ogg", "pedalboard.tar.gz"],
-                                        cwd=tmpdir,
-                                        stdout=subprocess.PIPE)
-            ioloop.add_handler(self.proc.stdout.fileno(), end_proc2, 16)
+            end_procs(tmpstep1)
 
         # start packing pedalboard
         self.proc = subprocess.Popen(['tar', 'chzf', tmpstep1, bundlename],
@@ -1617,6 +1781,174 @@ def process_file(self, basename, callback=lambda:None):
         os.remove(filename)
         callback()
 
+class PedalboardInstaller(SimpleFileReceiver):
+    destination_dir = DOWNLOAD_TMP_DIR
+
+    @web.asynchronous
+    @gen.engine
+    def process_file(self, basename, headers, callback=lambda:None):
+        options = {}
+
+        psids = self.request.headers.get_list("Patchstorage-Item")
+        if psids and len(psids) > 0:
+            options["psid"] = psids[0]
+
+        psvers = self.request.headers.get_list("Patchstorage-Item-Version")
+        if psvers and len(psvers) > 0:
+            options["psversion"] = psvers[0]
+
+        def on_finish(resp):
+            self.result = resp
+            callback()
+
+        _install_pedalboard_zip(os.path.join(DOWNLOAD_TMP_DIR, basename), options, on_finish)
+
+PATCHSTORAGE_EXECUTOR = ThreadPoolExecutor(max_workers=2)
+PATCHSTORAGE_CLIENT = PatchstorageClient(
+    re.sub(r'/patches/?$', '', PATCHSTORAGE_API_URL),
+    PATCHSTORAGE_AUTH_FILE,
+    PATCHSTORAGE_PEDALBOARD_PLATFORM_ID,
+    PATCHSTORAGE_SHARE_CATEGORY_ID,
+    'pi-Stomp mod-ui/%s' % (IMAGE_VERSION or 'dev'),
+)
+
+def _shareable_bundle(bundlepath):
+    """Only user pedalboards can be shared; returns the real path or None."""
+    userdir = os.path.realpath(LV2_PEDALBOARDS_DIR)
+    bundlepath = os.path.realpath(bundlepath)
+    if not bundlepath.startswith(userdir + os.sep) or not os.path.isfile(os.path.join(bundlepath, 'manifest.ttl')):
+        return None
+    return bundlepath
+
+class PatchstorageAuth(JsonRequestHandler):
+    def get(self):
+        self.write(PATCHSTORAGE_CLIENT.status())
+
+class PatchstorageLogin(JsonRequestHandler):
+    @gen.coroutine
+    def post(self):
+        username = self.get_argument('username', '').strip()
+        password = self.get_argument('password', '')
+        if not username or not password:
+            self.write({'ok': False, 'error': 'Enter your Patchstorage username and password'})
+            return
+        try:
+            status = yield PATCHSTORAGE_EXECUTOR.submit(PATCHSTORAGE_CLIENT.login, username, password)
+        except PatchstorageError as e:
+            self.write({'ok': False, 'error': e.message})
+            return
+        status['ok'] = True
+        self.write(status)
+
+class PatchstorageLogout(JsonRequestHandler):
+    def post(self):
+        PATCHSTORAGE_CLIENT.logout()
+        self.write({'ok': True})
+
+class PatchstorageShareInfo(JsonRequestHandler):
+    @gen.coroutine
+    def get(self):
+        bundlepath = _shareable_bundle(self.get_argument('bundlepath'))
+        if bundlepath is None:
+            self.write({'ok': False, 'error': 'Only your own saved pedalboards can be shared'})
+            return
+
+        try:
+            info = get_pedalboard_info(bundlepath)
+        except Exception:
+            self.write({'ok': False, 'error': 'Cannot read this pedalboard'})
+            return
+
+        plugins = []
+        for plugin in info.get('plugins', []):
+            try:
+                name = get_plugin_info(plugin['uri'])['name']
+            except Exception:
+                name = plugin['uri']
+            if name not in plugins:
+                plugins.append(name)
+
+        resp = {
+            'ok': True,
+            'auth': PATCHSTORAGE_CLIENT.status(),
+            'title': info.get('title') or os.path.splitext(os.path.basename(bundlepath))[0],
+            'plugins': plugins,
+            'default_tags': [t.strip() for t in PATCHSTORAGE_SHARE_DEFAULT_TAGS.split(',') if t.strip()],
+            'has_screenshot': os.path.isfile(os.path.join(bundlepath, 'screenshot.png')),
+            'patch': None,
+        }
+
+        meta = read_bundle_metadata(bundlepath)
+        if meta is not None:
+            try:
+                patch = yield PATCHSTORAGE_EXECUTOR.submit(PATCHSTORAGE_CLIENT.get_patch, meta['id'])
+            except PatchstorageError as e:
+                logging.warning('[patchstorage] pedalboard %s points at patch %s: %s', bundlepath, meta['id'], e.message)
+                patch = None
+            if patch and patch.get('id'):
+                resp['patch'] = {
+                    'id': patch['id'],
+                    'url': patch.get('url'),
+                    'title': patch.get('title'),
+                    'content': patch.get('content'),
+                    'revision': patch.get('revision'),
+                    'next_revision': bump_revision(patch.get('revision')),
+                    'tags': [t['name'] for t in patch.get('tags') or []],
+                    'preview_url': patch.get('preview_url') or '',
+                    'license': (patch.get('license') or {}).get('id'),
+                    'state': (patch.get('state') or {}).get('id'),
+                    'author': (patch.get('author') or {}).get('name'),
+                    'owned': PATCHSTORAGE_CLIENT.owns(patch),
+                }
+
+        self.write(resp)
+
+class PatchstorageShare(JsonRequestHandler):
+    @gen.coroutine
+    def post(self):
+        bundlepath = _shareable_bundle(self.get_argument('bundlepath'))
+        if bundlepath is None:
+            self.write({'ok': False, 'error': 'Only your own saved pedalboards can be shared'})
+            return
+
+        if self.get_argument('confirm', '') != '1':
+            self.write({'ok': False, 'error': 'Please confirm that you have the rights to share this content'})
+            return
+
+        patch_id = None
+        if self.get_argument('mode', 'new') == 'update':
+            meta = read_bundle_metadata(bundlepath)
+            if meta is None:
+                self.write({'ok': False, 'error': 'This pedalboard has not been shared before'})
+                return
+            patch_id = int(meta['id'])
+
+        fields = {
+            'title': self.get_argument('title', ''),
+            'content': self.get_argument('content', ''),
+            'revision': self.get_argument('revision', ''),
+            'tags': self.get_argument('tags', '').split(','),
+            'preview_url': self.get_argument('preview_url', ''),
+            'license': self.get_argument('license', None),
+            'state': self.get_argument('state', None),
+        }
+        artwork = self.request.files.get('artwork')
+        artwork = artwork[0]['body'] if artwork else None
+
+        try:
+            result = yield PATCHSTORAGE_EXECUTOR.submit(PATCHSTORAGE_CLIENT.share, bundlepath, fields, patch_id, artwork)
+        except PatchstorageError as e:
+            self.write({'ok': False, 'error': e.message, 'auth_required': e.auth_required})
+            return
+        except Exception as e:
+            logging.exception('[patchstorage] share failed')
+            self.write({'ok': False, 'error': 'Sharing failed: %s' % e})
+            return
+
+        reset_get_all_pedalboards_cache_with_refresh(kPedalboardInfoUserOnly)
+        result['ok'] = True
+        self.write(result)
+
 class PedalboardFactoryCopy(JsonRequestHandler):
     def get(self):
         bundlepath = os.path.abspath(self.get_argument('bundlepath'))
@@ -1914,9 +2246,15 @@ def get_version(self):
         if IMAGE_VERSION is not None and len(IMAGE_VERSION) > 1:
             # strip initial 'v' from version if present
             version = IMAGE_VERSION[1:] if IMAGE_VERSION[0] == "v" else IMAGE_VERSION
-            return url_escape(version)
+            return url_escape('%s-%s' % (version, HTML_FINGERPRINT))
         return str(int(time.time()))
 
+    def get_image_version(self):
+        # "?v=" without the HTML_FINGERPRINT suffix; pages expose it as VERSION
+        version = self.get_argument('v')
+        suffix = '-' + HTML_FINGERPRINT
+        return version[:-len(suffix)] if version.endswith(suffix) else version
+
     def index(self):
         user_id = safe_json_load(USER_ID_JSON_FILE, dict)
 
@@ -1947,6 +2285,7 @@ def index(self):
             'controlchain_url': CONTROLCHAIN_HTTP_ADDRESS,
             'hardware_profile': b64encode(json.dumps(SESSION.get_hardware_actuators()).encode("utf-8")),
             'version': self.get_argument('v'),
+            'image_version': self.get_image_version(),
             'bin_compat': hwdesc.get('bin-compat', "Unknown"),
             'codec_truebypass': 'true' if hwdesc.get('codec_truebypass', False) else 'false',
             'factory_pedalboards': hwdesc.get('factory_pedalboards', False),
@@ -1971,6 +2310,8 @@ def index(self):
             'patchstorage_api_url': PATCHSTORAGE_API_URL,
             'patchstorage_platform_id': PATCHSTORAGE_PLATFORM_ID,
             'patchstorage_target_id': PATCHSTORAGE_TARGET_ID,
+            'patchstorage_pedalboard_platform_id': PATCHSTORAGE_PEDALBOARD_PLATFORM_ID,
+            'patchstorage_pedalboard_tag_id': PATCHSTORAGE_PEDALBOARD_TAG_ID,
             'blokas_enabled': 'true' if BLOKAS_ENABLED else 'false'
         }
         return context
@@ -2008,6 +2349,7 @@ def pedalboard(self):
     def allguis(self):
         context = {
             'version': self.get_argument('v'),
+            'image_version': self.get_image_version(),
         }
         return context
 
@@ -2019,6 +2361,7 @@ def settings(self):
             'cloud_url': CLOUD_HTTP_ADDRESS,
             'controlchain_url': CONTROLCHAIN_HTTP_ADDRESS,
             'version': self.get_argument('v'),
+            'image_version': self.get_image_version(),
             'hmi_eeprom': 'true' if hwdesc.get('hmi_eeprom', False) else 'false',
             'preferences': json.dumps(prefs),
             'bufferSize': get_jack_buffer_size(),
@@ -2249,57 +2592,24 @@ def post(self):
 
 class RecordingStart(JsonRequestHandler):
     def get(self):
-        SESSION.web_recording_start()
-        self.write(True)
+        ok, result = SESSION.web_recording_start()
+        if ok:
+            self.write({'ok': True, 'filename': result})
+        else:
+            self.write({'ok': False, 'error': result})
 
 class RecordingStop(JsonRequestHandler):
     def get(self):
-        SESSION.web_recording_stop()
-        self.write(True)
-
-class RecordingReset(JsonRequestHandler):
-    def get(self):
-        SESSION.web_recording_delete()
-        self.write(True)
-
-class RecordingPlay(JsonRequestHandler):
-    waiting_request = None
-
-    @web.asynchronous
-    def get(self, action):
-        if action == 'start':
-            SESSION.web_playing_start(RecordingPlay.stop_callback)
-            self.write(True)
-            return
-
-        if action == 'wait':
-            if RecordingPlay.waiting_request is not None:
-                RecordingPlay.stop_callback()
-            RecordingPlay.waiting_request = self
-            return
-
-        if action == 'stop':
-            SESSION.web_playing_stop()
-            self.write(True)
-            return
-
-        raise web.HTTPError(404)
-
-    @classmethod
-    def stop_callback(cls):
-        if cls.waiting_request is None:
-            return
-        cls.waiting_request.write(True)
-        cls.waiting_request = None
+        filename, duration = SESSION.web_recording_stop()
+        if filename is None:
+            self.write({'ok': False, 'error': "not recording"})
+        else:
+            self.write({'ok': True, 'filename': filename, 'duration': duration})
 
-class RecordingDownload(JsonRequestHandler):
+class RecordingStatus(JsonRequestHandler):
     def get(self):
-        recd = SESSION.web_recording_download()
-        data = {
-            'ok'   : bool(recd),
-            'audio': b64encode(recd).decode("utf-8") if recd else ""
-        }
-        self.write(data)
+        recording, filename, elapsed = SESSION.web_recording_status()
+        self.write({'recording': recording, 'filename': filename, 'elapsed': elapsed})
 
 class TokensDelete(JsonRequestHandler):
     def get(self):
@@ -2340,14 +2650,185 @@ def post(self):
 
         self.write(True)
 
+def _audio_file_size(path):
+    # A file can go away between the walk and this call. The panel then shows
+    # no size, which is not an error.
+    try:
+        return os.path.getsize(path)
+    except OSError:
+        return None
+
+def _audio_file_entries(files):
+    return [
+        {'fullname': f, 'basename': os.path.basename(f), 'size': _audio_file_size(f)}
+        for f in files
+    ]
+
+class SfzBuilderBanks(JsonRequestHandler):
+    def get(self):
+        banks = sfz_list_banks()
+        # The bank list shows how many samples each bank holds. The count comes
+        # from the same walk that the sample list uses.
+        counts = {}
+        for name in banks:
+            try:
+                counts[name] = len(list_bank_samples(name))
+            except (ValueError, OSError):
+                pass
+        self.write({'ok': True, 'banks': banks, 'counts': counts})
+
+class SfzBuilderBank(JsonRequestHandler):
+    def get(self):
+        try:
+            state = load_bank(self.get_argument('name', ''))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        state['ok'] = True
+        self.write(state)
+
+    @jsoncall
+    def post(self):
+        try:
+            path = create_bank(self.request.body.get('name'))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write({'ok': True, 'name': os.path.basename(path)})
+
+class SfzBuilderBankRename(JsonRequestHandler):
+    @jsoncall
+    def post(self):
+        body = self.request.body
+        try:
+            name = rename_bank(body.get('name'), body.get('new_name'))
+        except (ValueError, OSError) as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write({'ok': True, 'name': name})
+
+class SfzBuilderBankDelete(JsonRequestHandler):
+    @jsoncall
+    def post(self):
+        try:
+            name = delete_bank(self.request.body.get('name'))
+        except (ValueError, OSError) as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write({'ok': True, 'name': name})
+
+class SfzBuilderSamples(JsonRequestHandler):
+    def get(self):
+        try:
+            files = list_bank_samples(self.get_argument('bank', ''))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write({'ok': True, 'files': _audio_file_entries(files)})
+
+class SfzBuilderDevice(JsonRequestHandler):
+    def get(self):
+        try:
+            files = list_device_samples(self.get_argument('exclude_bank', None))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write({'ok': True, 'files': _audio_file_entries(files)})
+
+class SfzBuilderUsb(JsonRequestHandler):
+    def get(self):
+        self.write({'ok': True, 'files': _audio_file_entries(list_usb_samples())})
+
+# The most one upload may carry, for each file and for the batch together.
+#
+# The number is under Tornado's own max_buffer_size, which is 100 MB and which
+# this application does not change. That limit is the real ceiling: Tornado
+# holds the whole request body in memory and drops the connection when the body
+# goes past it, which reaches the panel as a failed request and no reason. The
+# cap below is hit first, so the panel can say what happened instead.
+MAX_UPLOAD_BYTES = 64 * 1024 * 1024
+
+class SfzBuilderUpload(JsonRequestHandler):
+    def post(self):
+        try:
+            path = create_bank(self.get_argument('bank', ''))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+
+        # Every file is checked before any file is written. The first version
+        # wrote as it went and returned on the first name that was not audio,
+        # which left the files before it in the bank and told the panel the
+        # upload had failed. A batch now lands whole or not at all.
+        entries = []
+        total = 0
+        for upload in self.request.files.values():
+            for entry in upload:
+                filename = sanitize_filename(entry['filename'])
+                if not filename.lower().endswith(AUDIO_EXTENSIONS):
+                    self.write({'ok': False, 'error': 'not an audio file: %s' % entry['filename']})
+                    return
+                if len(entry['body']) > MAX_UPLOAD_BYTES:
+                    self.write({'ok': False, 'error': '%s is larger than %d MB'
+                                % (entry['filename'], MAX_UPLOAD_BYTES // (1024 * 1024))})
+                    return
+                total += len(entry['body'])
+                if total > MAX_UPLOAD_BYTES:
+                    self.write({'ok': False, 'error': 'that upload is larger than %d MB'
+                                % (MAX_UPLOAD_BYTES // (1024 * 1024))})
+                    return
+                entries.append((filename, entry['body']))
+
+        used = set(os.listdir(path))
+        saved = []
+        for filename, body in entries:
+            filename = unique_filename(filename, used)
+            with open(os.path.join(path, filename), 'wb') as fh:
+                fh.write(body)
+            used.add(filename)
+            saved.append(filename)
+
+        self.write({'ok': True, 'files': saved})
+
+class SfzBuilderBuild(JsonRequestHandler):
+    @jsoncall
+    def post(self):
+        body = self.request.body
+        try:
+            result = build_bank(body.get('name'), body.get('base_note', 36), body.get('slots', []))
+        except ValueError as e:
+            self.write({'ok': False, 'error': str(e)})
+            return
+        self.write(result)
+
+class SfzBuilderAudio(web.StaticFileHandler):
+    def initialize(self):
+        web.StaticFileHandler.initialize(self, path='/')
+
+    @classmethod
+    def get_absolute_path(cls, root, path):
+        return path
+
+    # Tornado calls this with (root, absolute_path). The root is unused here,
+    # because get_absolute_path() above passes the full path straight through.
+    def validate_absolute_path(self, root, absolute_path):
+        absolute_path = os.path.realpath(absolute_path)
+
+        allowed = (os.path.realpath(USER_FILES_DIR), os.path.realpath('/media'))
+        if not any(absolute_path.startswith(base + os.sep) for base in allowed):
+            raise web.HTTPError(403, 'Access denied')
+
+        # This endpoint previews samples. It must not serve any other file.
+        if not absolute_path.lower().endswith(AUDIO_EXTENSIONS):
+            raise web.HTTPError(403, 'Not an audio file')
+
+        if not os.path.isfile(absolute_path):
+            raise web.HTTPError(404)
+
+        return absolute_path
+
 class FilesList(JsonRequestHandler):
-    complete_audiofile_exts = (
-        # through libsndfile
-        ".aif", ".aifc", ".aiff", ".au", ".bwf", ".flac", ".htk", ".iff", ".mat4", ".mat5", ".oga", ".ogg", ".opus",
-        ".paf", ".pvf", ".pvf5", ".sd2", ".sf", ".snd", ".svx", ".vcc", ".w64", ".wav", ".xi",
-        # extra through ffmpeg
-        ".3g2", ".3gp", ".aac", ".ac3", ".amr", ".ape", ".mp2", ".mp3", ".mpc", ".wma",
-    )
+    complete_audiofile_exts = AUDIO_EXTENSIONS
 
     hq_audiofile_exts = (
         ".aif", ".aifc", ".aiff", ".flac", ".w64", ".wav",
@@ -2438,7 +2919,14 @@ def get(self):
 
 application = web.Application(
         EffectInstaller.urls('effect/install') +
+        PedalboardInstaller.urls('pedalboard/install') +
         [
+            (r"/patchstorage/auth", PatchstorageAuth),
+            (r"/patchstorage/login", PatchstorageLogin),
+            (r"/patchstorage/logout", PatchstorageLogout),
+            (r"/patchstorage/share/info", PatchstorageShareInfo),
+            (r"/patchstorage/share", PatchstorageShare),
+
             (r"/system/info", SystemInfo),
             (r"/system/prefs", SystemPreferences),
             (r"/system/exechange", SystemExeChange),
@@ -2522,9 +3010,8 @@ def get(self):
 
             (r"/recording/start", RecordingStart),
             (r"/recording/stop", RecordingStop),
-            (r"/recording/play/(start|wait|stop)", RecordingPlay),
-            (r"/recording/download", RecordingDownload),
-            (r"/recording/reset", RecordingReset),
+            (r"/recording/status", RecordingStatus),
+            (r"/recording/file/(.*)", web.StaticFileHandler, {"path": RECORDINGS_DIR}),
 
             (r"/tokens/delete", TokensDelete),
             (r"/tokens/get", TokensGet),
@@ -2533,6 +3020,18 @@ def get(self):
             # file listing etc
             (r"/files/list/?", FilesList),
 
+            # sfz sound-bank builder
+            (r"/sfzbuilder/banks/?", SfzBuilderBanks),
+            (r"/sfzbuilder/bank/?", SfzBuilderBank),
+            (r"/sfzbuilder/bank/rename/?", SfzBuilderBankRename),
+            (r"/sfzbuilder/bank/delete/?", SfzBuilderBankDelete),
+            (r"/sfzbuilder/samples/?", SfzBuilderSamples),
+            (r"/sfzbuilder/device/?", SfzBuilderDevice),
+            (r"/sfzbuilder/usb/?", SfzBuilderUsb),
+            (r"/sfzbuilder/upload/?", SfzBuilderUpload),
+            (r"/sfzbuilder/audio/(.*)", SfzBuilderAudio),
+            (r"/sfzbuilder/build/?", SfzBuilderBuild),
+
             (r"/reset/?", DashboardClean),
 
             (r"/sdk/install/?", SDKEffectInstaller),
@@ -2562,6 +3061,9 @@ def get(self):
             (r"/([a-z]+\.html)$", TemplateHandler),
             (r"/(allguis|sdk|settings)$", TemplateHandler),
             (r"/load_template/([a-z_]+\.html)$", TemplateLoader),
+            # This route must come before the catch-all below. The islands
+            # need a different cache policy. See IslandStaticFileHandler.
+            (r"/js/app/(.*)", IslandStaticFileHandler, {"path": os.path.join(HTML_DIR, "js", "app")}),
             (r"/js/templates.js$", BulkTemplateLoader),
 
             (r"/websocket/?$", ServerWebSocket),
diff --git a/modtools/pedalboard.py b/modtools/pedalboard.py
index 7316ccc04..ac30dca2e 100644
--- a/modtools/pedalboard.py
+++ b/modtools/pedalboard.py
@@ -33,9 +33,9 @@ def resize_image(img):
     if height > MAX_THUMB_HEIGHT:
         width = width * MAX_THUMB_HEIGHT / height
         height = MAX_THUMB_HEIGHT
-    # ANTIALIAS is deprecated and will be removed in Pillow 10 (2023-07-01).
-    # Use Resampling.LANCZOS instead.
-    img.thumbnail((width, height), Image.ANTIALIAS)
+    # ANTIALIAS was removed in Pillow 10; LANCZOS is its direct replacement
+    # (kept as a top-level alias, so this works on old and new Pillow alike).
+    img.thumbnail((width, height), Image.LANCZOS)
 
 
 class Anchor(Enum):
diff --git a/setup.py b/setup.py
index 8b6dd3e38..96b30cf61 100644
--- a/setup.py
+++ b/setup.py
@@ -111,6 +111,11 @@ def run(self):
                     (('share/mod/html/img/social'), glob('html/img/social/*.png')),
                     (('share/mod/html/include'), glob('html/include/*.html')),
                     (('share/mod/html/js'), glob('html/js/*.js')),
+                    # pi-Stomp: the SFZ builder island. Each island keeps its
+                    # code and its stylesheet in one directory, so a new island
+                    # needs two lines here. The globs below are not recursive.
+                    (('share/mod/html/js/app/sfzbuilder'), glob('html/js/app/sfzbuilder/*.js')),
+                    (('share/mod/html/js/app/sfzbuilder'), glob('html/js/app/sfzbuilder/*.css')),
                     (('share/mod/html/js/utils'), glob('html/js/utils/*.js')),
                     (('share/mod/html/js/lib'), glob('html/js/lib/*.js')),
                     (('share/mod/html/js/lib/slick'), glob('html/js/lib/slick/*.js')),
diff --git a/test/browser/run.sh b/test/browser/run.sh
new file mode 100755
index 000000000..1199865ba
--- /dev/null
+++ b/test/browser/run.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+# Runs the browser smoke test of the SFZ builder island.
+#
+# serve.py gives /_smoke.html from test/browser/ and every other path from
+# html/. Nothing is written into html/, because html/ is what deploy.sh sends
+# to the device: an earlier version copied the page there and raced with rsync.
+#
+# The test needs headless Chrome. Without Chrome the script says so and stops
+# with 0, so `make test` still passes on a machine that has no browser.
+set -u
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+PORT="${SMOKE_PORT:-8899}"
+
+CHROME=""
+for candidate in \
+    "${CHROME_BIN:-}" \
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
+    "/Applications/Chromium.app/Contents/MacOS/Chromium" \
+    "$(command -v google-chrome-stable 2>/dev/null)" \
+    "$(command -v google-chrome 2>/dev/null)" \
+    "$(command -v chromium 2>/dev/null)" \
+    "$(command -v chromium-browser 2>/dev/null)"; do
+    if [ -n "$candidate" ] && [ -x "$candidate" ]; then CHROME="$candidate"; break; fi
+done
+
+if [ -z "$CHROME" ]; then
+    echo "smoke: no headless Chrome on this machine, so the test did not run."
+    echo "smoke: set CHROME_BIN to run it."
+    exit 0
+fi
+
+cleanup() {
+    [ -n "${SERVER_PID:-}" ] && kill "$SERVER_PID" 2>/dev/null
+    return 0
+}
+trap cleanup EXIT
+
+python3 "$ROOT/test/browser/serve.py" "$PORT" &
+SERVER_PID=$!
+
+# Wait for the server to answer.
+for _ in $(seq 1 40); do
+    if curl -fsS -o /dev/null "http://127.0.0.1:$PORT/_smoke.html" 2>/dev/null; then break; fi
+    sleep 0.1
+done
+
+OUT="$("$CHROME" --headless --disable-gpu --no-sandbox \
+        --virtual-time-budget=12000 \
+        --dump-dom "http://127.0.0.1:$PORT/_smoke.html" 2>/dev/null \
+      | python3 -c "
+import sys, html, re
+d = sys.stdin.read()
+m = re.search(r'SMOKE_START(.*?)SMOKE_END', d, re.S)
+print(html.unescape(m.group(1)).strip() if m else 'FAIL  the page did not run to the end')
+")"
+
+echo "$OUT"
+if echo "$OUT" | grep -q '^FAIL'; then
+    echo
+    echo "smoke: FAILED"
+    exit 1
+fi
+echo
+echo "smoke: all checks passed"
diff --git a/test/browser/serve.py b/test/browser/serve.py
new file mode 100755
index 000000000..ff023d9fb
--- /dev/null
+++ b/test/browser/serve.py
@@ -0,0 +1,46 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+"""
+Serves html/ for the browser smoke test.
+
+The test page must come from the same place that gives the browser the rest of
+the files, because the island reads its own files with a relative path. An
+earlier version of this test copied the page into html/. That was wrong: html/
+is the directory that deploy.sh sends to the device, and the copy and the
+deletion of the page raced with rsync.
+
+This server writes nothing. It gives one path, /_smoke.html, from
+test/browser/smoke.html, and every other path from html/.
+"""
+
+import functools
+import http.server
+import os
+import sys
+
+ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+HTML_DIR = os.path.join(ROOT, "html")
+SMOKE_PAGE = os.path.join(ROOT, "test", "browser", "smoke.html")
+
+
+class Handler(http.server.SimpleHTTPRequestHandler):
+    def translate_path(self, path):
+        if path.split("?")[0].split("#")[0] == "/_smoke.html":
+            return SMOKE_PAGE
+        return super().translate_path(path)
+
+    def log_message(self, fmt, *args):
+        pass
+
+
+def main():
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 8899
+    handler = functools.partial(Handler, directory=HTML_DIR)
+    with http.server.ThreadingHTTPServer(("127.0.0.1", port), handler) as httpd:
+        httpd.serve_forever()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/test/browser/smoke.html b/test/browser/smoke.html
new file mode 100644
index 000000000..93ae14ec2
--- /dev/null
+++ b/test/browser/smoke.html
@@ -0,0 +1,588 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>SFZ builder browser smoke test</title>
+<!--
+  A smoke test for the SFZ builder island.
+
+  Run it with `make smoke`. That target copies this file into html/, serves
+  html/ and reads the result with headless Chrome. It needs no device and no
+  mod-ui server: the $.ajax below answers each request that the island makes.
+
+  What it proves:
+    * the island loads and draws its markup
+    * the stylesheet loads and reaches the panel
+    * a drag makes a helper that you can see, on the body, outside the panel
+    * a drag marks each pad that can take the sample
+    * a drop puts the sample on the pad
+
+  One rule for a new check: --virtual-time-budget does not advance a CSS
+  transition, so a property that transitions reads as the value that it started
+  from. The style element below stops the transitions for that reason. Read a
+  computed style only while that element is in the page.
+-->
+<link rel="stylesheet" href="css/main.css">
+<style id="no-transitions">#sfzbuilder-library, #sfzbuilder-library * { transition: none !important; }</style>
+<script src="js/lib/jquery-1.9.1.min.js"></script>
+<script src="js/lib/jquery-ui-1.10.1.custom.min.js"></script>
+</head>
+<body>
+<div id="wrapper"><div><div>
+  <div id="sfzbuilder-library" class="mod-hidden mod-init-hidden"></div>
+</div></div></div>
+<pre id="out"></pre>
+
+<script>
+var CHECKS = [], NOTES = [];
+function check(name, ok, detail) {
+  CHECKS.push((ok ? 'PASS  ' : 'FAIL  ') + name + (detail === undefined ? '' : '  [' + detail + ']'));
+}
+function note(){ NOTES.push([].join.call(arguments, ' ')); }
+
+// The accent is a design token (architecture rule 4.5), so the checks below
+// read it instead of naming a colour. A probe on the body also proves that the
+// token reaches outside the panel, which is what the drag helper needs.
+function accentRgb() {
+  var probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;left:-9999px;background:var(--sfz-accent)';
+  document.body.appendChild(probe);
+  var colour = getComputedStyle(probe).backgroundColor;
+  probe.parentNode.removeChild(probe);
+  return colour;
+}
+// The same idea for a font token. main.less holds
+// `* { font-family: "cooper hewitt", Sans-serif !important }`, which lands on
+// every element of the panel one by one and beats a plain declaration, so the
+// panel drew in the page font and read nothing from --sfz-mono at all.
+function tokenValue(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function firstFamily(value) {
+  return (value.split(',')[0] || '').trim().replace(/^["']|["']$/g, '').toLowerCase();
+}
+function accentRgba(alpha) {
+  var parts = accentRgb().match(/\d+/g) || [];
+  return 'rgba(' + parts.slice(0, 3).join(', ') + ', ' + alpha + ')';
+}
+// A confirm box stops a headless browser dead, so the page answers its own.
+// CONFIRM_ANSWER is what it says and CONFIRM_ASKED is the last question, so a
+// check can read both. The panel asks before it drops unsaved pads and before
+// it deletes a bank.
+var CONFIRM_ANSWER = true, CONFIRM_ASKED = '';
+// The bank whose sample list the miniature server answers late. See the race
+// check at the end of the test.
+var SLOW_BANK = '';
+window.confirm = function (message) { CONFIRM_ASKED = message; return CONFIRM_ANSWER; };
+
+window.onerror = function (m, s, l, c, e) { check('no script error', false, m + ' ' + ((e && e.stack) || '')); };
+window.addEventListener('unhandledrejection', function (e) {
+  check('no rejected promise', false, (e.reason && (e.reason.stack || e.reason.message)) || e.reason);
+});
+
+// The server, in miniature.
+$.ajax = function (o) {
+  var d = $.Deferred(), u = o.url;
+  setTimeout(function () {
+    if (u.indexOf('/sfzbuilder/banks') === 0) {
+      d.resolve({ ok: true, banks: ['Drumkit A', 'Foley'], counts: { 'Drumkit A': 6, 'Foley': 12 } });
+    } else if (u.indexOf('/sfzbuilder/bank/rename') === 0) {
+      // The server gives back the name that reached the disk, not the one it
+      // was sent: a space becomes an underscore.
+      d.resolve({ ok: true, name: JSON.parse(o.data).new_name.replace(/ /g, '_') });
+    } else if (u.indexOf('/sfzbuilder/bank/delete') === 0) {
+      d.resolve({ ok: true, name: JSON.parse(o.data).name });
+    } else if (u.indexOf('/sfzbuilder/bank') === 0) {
+      d.resolve({ ok: true, base_note: 36, slots: [] });
+    } else if (u.indexOf('/sfzbuilder/samples') === 0 && o.data.bank === SLOW_BANK) {
+      // The answer for this bank comes back late, after the answer for the
+      // bank that was clicked next. It must not reach the panel.
+      setTimeout(function () {
+        d.resolve({ ok: true, files: [
+          { basename: 'STALE.wav', fullname: '/a/STALE.wav', size: 1 }] });
+      }, 250);
+      return;
+    } else if (u.indexOf('/sfzbuilder/samples') === 0) {
+      d.resolve({ ok: true, files: [
+        { basename: 'Kick_01.wav', fullname: '/a/Kick_01.wav', size: 412000 },
+        { basename: 'Snare_Rim.wav', fullname: '/a/Snare_Rim.wav', size: 204000 }] });
+    } else {
+      d.resolve({ ok: true, files: [] });
+    }
+  }, 0);
+  return d.promise();
+};
+
+// The part of the legacy code that the seam needs.
+function JqueryClass(name, methods) {
+  $.fn[name] = function (m) {
+    if (typeof m === 'string' && methods[m]) { return methods[m].apply(this, [].slice.call(arguments, 1)); }
+    return methods.init.apply(this, arguments);
+  };
+}
+</script>
+<script src="js/window.js"></script>
+<script src="js/sfzbuilder.js"></script>
+<script>
+function fire(el, type, x, y) {
+  $(el).trigger($.Event(type, { which: 1, pageX: x, pageY: y, clientX: x, clientY: y }));
+}
+function finish() {
+  document.getElementById('out').textContent =
+    'SMOKE_START\n' + CHECKS.join('\n')
+    + (NOTES.length ? '\n--\n' + NOTES.join('\n') : '') + '\nSMOKE_END';
+}
+
+new WindowManager();
+$('#sfzbuilder-library').sfzBuilderBox({ trigger: null });
+
+setTimeout(function () {
+  var root = document.getElementById('sfzbuilder-library');
+  $(root).window('open');
+
+  setTimeout(function () {
+    // Opening the panel asks nothing. There is no bank open yet and thus no
+    // work to lose, so any question here is the panel asking about itself.
+    check('opening the panel asks no question', CONFIRM_ASKED === '',
+          JSON.stringify(CONFIRM_ASKED));
+
+    var link = document.querySelector('link[data-sfzbuilder]');
+    check('the island adds its stylesheet', !!link);
+    var sheet = link && link.sheet;
+    check('the stylesheet loads', !!sheet && sheet.cssRules.length > 0,
+          sheet ? sheet.cssRules.length + ' rules' : 'no sheet');
+
+    var cs = getComputedStyle(root);
+    check('the panel fills the window', cs.position === 'absolute', cs.position);
+    check('the panel has its own ground', cs.backgroundColor === 'rgb(10, 10, 10)', cs.backgroundColor);
+
+    var header = root.querySelector('header');
+    check('the shared header bar is there', !!header);
+    if (header) {
+      var hs = getComputedStyle(header);
+      check('the header does not draw the MOD icon', hs.backgroundImage === 'none', hs.backgroundImage);
+      check('the header is 45px high', hs.height === '45px', hs.height);
+    }
+
+    check('the bank list has the banks', root.querySelectorAll('.sfz-bank').length === 2);
+    check('the sample list has the samples', root.querySelectorAll('.sfz-sample').length === 2);
+
+    var bank = root.querySelector('.sfz-bank');
+    if (bank) { bank.click(); }
+
+    setTimeout(function () {
+      var pads = root.querySelectorAll('.sfz-pad');
+      check('the pads are drawn', pads.length === 8, pads.length + ' pads');
+
+      var row = root.querySelector('.sfz-sample');
+      var pad = pads[1];
+      if (!row || !pad) { check('a row and a pad to drag between', false); finish(); return; }
+
+      var rr = row.getBoundingClientRect(), pr = pad.getBoundingClientRect();
+      fire(row, 'mousedown', rr.left + 10, rr.top + 8);
+      fire(document, 'mousemove', rr.left + 30, rr.top + 30);
+      fire(document, 'mousemove', pr.left + pr.width / 2, pr.top + pr.height / 2);
+
+      // The helper must be one that you can see. It goes on the body, where the
+      // tokens of the panel do not reach, so a var() without a value there made
+      // it black text on nothing.
+      var helper = document.querySelector('.sfz-drag-helper');
+      check('a drag makes a helper', !!helper);
+      if (helper) {
+        var hs2 = getComputedStyle(helper);
+        var box = helper.getBoundingClientRect();
+        check('the helper is on the body', helper.parentNode.tagName === 'BODY', helper.parentNode.tagName);
+        check('the accent token resolves on the body',
+              /^rgb\(/.test(accentRgb()), accentRgb());
+        check('the helper has a ground you can see',
+              hs2.backgroundColor === accentRgb(), hs2.backgroundColor);
+        check('the helper has a size you can see', box.width > 60 && box.height > 20,
+              Math.round(box.width) + 'x' + Math.round(box.height));
+        check('the helper names the sample', helper.textContent.indexOf('Kick_01.wav') >= 0,
+              JSON.stringify(helper.textContent));
+      }
+
+      check('the row you drag from is marked', row.classList.contains('sfz-sample--dragging'));
+      check('every pad says it can take the sample',
+            root.querySelectorAll('.sfz-pad--target').length === 8,
+            root.querySelectorAll('.sfz-pad--target').length + ' marked');
+      check('the pad under the pointer is marked',
+            root.querySelectorAll('.sfz-pad--drop').length === 1);
+
+      var target = root.querySelector('.sfz-pad--target');
+      if (target) {
+        var ts = getComputedStyle(target);
+        check('a pad that can take the sample is drawn in the accent',
+              ts.borderTopColor === accentRgba('0.55'), ts.borderTopColor);
+      }
+
+      fire(document, 'mouseup', pr.left + pr.width / 2, pr.top + pr.height / 2);
+      setTimeout(function () {
+        check('the drop puts the sample on the pad',
+              root.querySelectorAll('.sfz-pad--filled').length === 1);
+        check('the helper goes away', !document.querySelector('.sfz-drag-helper'));
+        // Unsaved work. The drop above put a sample on a pad, which is a
+        // change the sidecar keeps, so the panel has to say so.
+        var mark = root.querySelector('.sfz-dirty');
+        check('the panel says the pads hold an unsaved change', mark && !mark.hidden);
+
+        // A gain, a root note or a loop mode is a change too, and none of the
+        // three draws the pads again: the focus has to stay in the box you are
+        // typing in.
+        var padStep = root.querySelector('.sfz-pad--filled .sfz-step--mini input');
+        if (padStep) {
+          padStep.focus();
+          padStep.value = '-6';
+          padStep.dispatchEvent(new Event('change', { bubbles: true }));
+          check('an edit inside a pad keeps the focus where it was',
+                document.activeElement === padStep);
+        }
+
+        // A bank that is not the open one asks before it drops the work.
+        CONFIRM_ANSWER = false;
+        CONFIRM_ASKED = '';
+        var other = root.querySelectorAll('.sfz-bank')[1];
+        other.click();
+        check('another bank asks before it drops the work',
+              CONFIRM_ASKED.indexOf('unsaved modifications') > 0, JSON.stringify(CONFIRM_ASKED));
+        check('a refused confirm keeps the bank that is open',
+              root.querySelector('.sfz-title').textContent === 'Drumkit A',
+              root.querySelector('.sfz-title').textContent);
+        check('a refused confirm leaves the selection where it was',
+              root.querySelectorAll('.sfz-bank')[0].classList.contains('sfz-bank--on'));
+        CONFIRM_ANSWER = true;
+
+        // The note stepper must keep one width. Its content goes from four to
+        // seven characters, so a box that sizes to its content moves the minus
+        // and the plus under the pointer while you step through the notes.
+        // These are the widest and the narrowest values, and the field that a
+        // click opens, which was a third width of its own.
+        var tokenbox = root.querySelector('.sfz-step .sfz-tokenbox');
+        check('the note stepper is there', !!tokenbox);
+        if (tokenbox) {
+          var widths = {};
+          var record = function (name) { widths[name] = tokenbox.offsetWidth; };
+          var setNote = function (value) {
+            tokenbox.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            var edit = tokenbox.querySelector('input.sfz-token-edit');
+            if (!edit) { return null; }
+            record('editing');
+            edit.value = String(value);
+            edit.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            return edit;
+          };
+          record('36 C2');
+          check('a click opens the field that takes a number', !!setNote(127));
+          record('127 G9');
+          setNote(10);
+          record('10 A#-1');
+          setNote(0);
+          record('0 C-1');
+          var seen = Object.keys(widths).map(function (k) { return widths[k]; });
+          var same = seen.every(function (w) { return w === seen[0] && w > 0; });
+          check('the note stepper keeps one width', same,
+                Object.keys(widths).map(function (k) {
+                  return k + '=' + widths[k] + 'px';
+                }).join(' '));
+          setNote(36);
+        }
+
+        // The panel draws in its own font. The title is checked because that
+        // is where the wrong font showed first, and .sfz-lbl because a nested
+        // element is what the `*` rule of main.less reaches: the panel had the
+        // right family on itself and the page font on everything inside it.
+        var wantMono = firstFamily(tokenValue('--sfz-mono'));
+        var titleFamily = firstFamily(getComputedStyle(root.querySelector('.sfz-title')).fontFamily);
+        var lblFamily = firstFamily(getComputedStyle(root.querySelector('.sfz-lbl')).fontFamily);
+        check('the title draws in the font of the panel', titleFamily === wantMono,
+              titleFamily + ' vs ' + wantMono);
+        check('an element inside the panel draws in the font of the panel',
+              lblFamily === wantMono, lblFamily + ' vs ' + wantMono);
+
+        // The head holds no empty row. The tool row is hidden while no bank is
+        // open, so the space under the title row has to come from a gap, which
+        // is drawn between two visible rows, and never from a margin, which is
+        // drawn whether or not a row follows.
+        var headStyle = getComputedStyle(root.querySelector('.sfz-head'));
+        var topStyle = getComputedStyle(root.querySelector('.sfz-head-top'));
+        check('the head spaces its rows with a gap', headStyle.display === 'flex' &&
+              parseFloat(headStyle.rowGap) > 0, headStyle.display + ' gap=' + headStyle.rowGap);
+        check('the title row carries no margin under it',
+              parseFloat(topStyle.marginBottom) === 0, topStyle.marginBottom);
+        check('the status sits on the title row, which is never hidden',
+              root.querySelector('.sfz-head-top > .sfz-status') !== null);
+
+        // The focus ring. main.less has `* { outline: 0 !important }`, so the
+        // panel has to put a ring back with a rule of its own. These checks say
+        // that it does, and that each control the mouse can reach the keyboard
+        // can reach as well: a div with an onclick and no tabindex takes no
+        // focus and thus can carry no ring.
+        var reach = [
+          ['the new bank button', '.sfz-add'],
+          ['the save button', '.sfz-save'],
+          ['the rename button', '.sfz-btn--quiet'],
+          ['the delete button', '.sfz-btn--danger'],
+          ['a source button', '.sfz-seg button'],
+          ['the upload control', '.sfz-upload input'],
+          ['the filter box', '.sfz-search'],
+          ['a stepper button', '.sfz-step button'],
+          ['a stepper box', '.sfz-step input'],
+          ['the note stepper value', '.sfz-tokenbox'],
+          ['a bank row', '.sfz-bank'],
+          ['a sample row', '.sfz-sample'],
+          ['a sample play button', '.sfz-sample-play'],
+          ['a pad', '.sfz-pad']
+        ];
+        var unreachable = [];
+        var unringed = [];
+        reach.forEach(function (entry) {
+          var node = root.querySelector(entry[1]);
+          if (!node) { unreachable.push(entry[0] + ' (absent)'); return; }
+          node.focus();
+          if (document.activeElement !== node) { unreachable.push(entry[0]); return; }
+          // The ring is on :focus-visible. focus() from script counts as
+          // keyboard focus in Chrome, so the computed outline is the real one.
+          // The label wears the ring for the file input it hides.
+          var ringed = node.matches('.sfz-upload input') ? node.closest('.sfz-upload') : node;
+          var os = getComputedStyle(ringed);
+          if (parseFloat(os.outlineWidth) < 1 || os.outlineStyle === 'none') {
+            unringed.push(entry[0] + '=' + os.outlineStyle + ' ' + os.outlineWidth);
+          }
+        });
+        check('every control the mouse reaches the keyboard reaches',
+              unreachable.length === 0, unreachable.join(', ') || 'all ' + reach.length);
+        check('every control that has the focus shows a ring',
+              unringed.length === 0, unringed.join(', ') || 'all ' + reach.length);
+
+        // A tap must not leave a ring behind on the touch screen, which is what
+        // the :focus-visible guard is for. The behaviour cannot be driven from
+        // here: the browser decides :focus-visible from the last real input,
+        // and an event that a script sends is not one. So this check asks that
+        // the rule is present, and it is the rule going missing that the check
+        // is meant to catch.
+        var guard = false;
+        for (var r = 0; sheet && r < sheet.cssRules.length; r++) {
+          if ((sheet.cssRules[r].selectorText || '').indexOf(':focus:not(:focus-visible)') >= 0) {
+            guard = true;
+          }
+        }
+        check('a press leaves no ring behind', guard,
+              guard ? ':focus-visible guard present' : 'guard rule is gone');
+        root.querySelector('.sfz-pad').blur();
+
+        // The tab order is the order of the document, whatever the pad count.
+        // Nothing carries a positive tabindex, which would pull an element out
+        // of that order and put it in front of the whole page; every control is
+        // simply reached in the order it is drawn. This is checked at a pad
+        // count well above the default, because the pads and the controls they
+        // hold are what make the order long.
+        var padBox = root.querySelectorAll('.sfz-tools .sfz-step input')[0];
+        check('the pad count control is there', !!padBox);
+        if (padBox) {
+          padBox.value = '24';
+          padBox.dispatchEvent(new Event('change', { bubbles: true }));
+          check('the pad count follows the control',
+                root.querySelectorAll('.sfz-pad').length === 24,
+                root.querySelectorAll('.sfz-pad').length + ' pads');
+
+          var focusables = root.querySelectorAll(
+            'a[href], button, input, select, textarea, [tabindex]');
+          var positive = [], skipped = [];
+          for (var f = 0; f < focusables.length; f++) {
+            var node = focusables[f];
+            var attr = node.getAttribute('tabindex');
+            if (attr !== null && parseInt(attr, 10) > 0) { positive.push(node.className); }
+            if (attr !== null && parseInt(attr, 10) < 0) { skipped.push(node.className); }
+          }
+          check('nothing pulls itself out of the document order',
+                positive.length === 0, positive.join(', ') || 'no positive tabindex');
+          check('nothing takes itself out of the tab order',
+                skipped.length === 0, skipped.join(', ') || 'no negative tabindex');
+
+          // Every stop between one pad and the next belongs to that pad. This
+          // is what "the order of the document" means here: you reach a pad,
+          // then the controls it holds, then the pad after it. An empty pad
+          // holds none and is followed at once by the next, which is correct.
+          var pads = root.querySelectorAll('.sfz-pad');
+          // Only the stops inside the grid, so the last pad ends at the end of
+          // the grid and not at the end of the panel.
+          var grid = root.querySelector('.sfz-grid');
+          var list = [].filter.call(focusables, function (n) { return grid.contains(n); });
+          var strays = [], inner = {};
+          for (var i = 0; i < pads.length; i++) {
+            var from = list.indexOf(pads[i]);
+            var to = i + 1 < pads.length ? list.indexOf(pads[i + 1]) : list.length;
+            inner[i] = to - from - 1;
+            for (var j = from + 1; j < to; j++) {
+              if (!pads[i].contains(list[j])) { strays.push(i + ':' + list[j].className); }
+            }
+          }
+          check('every stop between two pads belongs to the pad before it',
+                strays.length === 0, strays.join(', ') || pads.length + ' pads walked');
+
+          // A pad that holds a sample adds its own controls to the order: the
+          // clear and play buttons, the gain and root steppers, the loop menu.
+          var filled = root.querySelector('.sfz-pad--filled');
+          var at = [].indexOf.call(pads, filled);
+          check('a pad that holds a sample puts its controls in the order',
+                filled && inner[at] >= 8, filled ? inner[at] + ' stops inside' : 'no filled pad');
+
+          padBox.value = '8';
+          padBox.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+
+        // The panel must not leak a jQuery UI widget when it draws again.
+        //
+        // jQuery UI keeps a droppable in $.ui.ddmanager and a draggable in the
+        // jQuery data cache, and takes either one out only through the cleanData
+        // hook of jQuery. A native removeChild never runs that hook, so a draw
+        // that removes the elements natively leaves the entries behind. They
+        // hold the element, so it is never collected, and jQuery UI walks the
+        // whole list of droppables on every move of a drag.
+        //
+        // The pads are drawn again on each change of the pad count, and the
+        // sample rows on each keystroke of the filter.
+        function droppableCount() {
+          var all = $.ui && $.ui.ddmanager && $.ui.ddmanager.droppables;
+          var n = 0;
+          for (var scope in all) { n += all[scope].length; }
+          return n;
+        }
+        function dataCount() { return Object.keys($.cache || {}).length; }
+
+        var search = root.querySelector('.sfz-search');
+        function redraw(times) {
+          for (var t = 0; t < times; t++) {
+            padBox.value = String(8 + (t % 2) * 4);
+            padBox.dispatchEvent(new Event('change', { bubbles: true }));
+            search.value = t % 2 ? 'a' : '';
+            search.dispatchEvent(new Event('input', { bubbles: true }));
+          }
+        }
+
+        redraw(2);
+        var dropBefore = droppableCount(), dataBefore = dataCount();
+        redraw(8);
+        var dropAfter = droppableCount(), dataAfter = dataCount();
+        check('a redraw leaks no droppable', dropAfter <= dropBefore,
+              dropBefore + ' -> ' + dropAfter);
+        check('a redraw leaks no jQuery data', dataAfter <= dataBefore,
+              dataBefore + ' -> ' + dataAfter);
+        padBox.value = '8';
+        padBox.dispatchEvent(new Event('change', { bubbles: true }));
+        search.value = '';
+        search.dispatchEvent(new Event('input', { bubbles: true }));
+
+        // No control may sit inside a role that flattens its children. The
+        // children of a button, an option, a tab and the rest below are
+        // presentational: a screen reader is free to read the element as one
+        // piece of text and drop what is inside it. A pad holds nine controls
+        // and a sample row holds a play button, so neither can wear one.
+        var FLATTENS = ['button', 'option', 'tab', 'menuitem',
+                        'menuitemcheckbox', 'menuitemradio',
+                        'checkbox', 'radio', 'switch', 'progressbar', 'slider'];
+        var swallowed = [];
+        var roled = root.querySelectorAll('[role]');
+        for (var k = 0; k < roled.length; k++) {
+          if (FLATTENS.indexOf(roled[k].getAttribute('role')) < 0) { continue; }
+          var held = roled[k].querySelectorAll(
+            'a[href], button, input, select, textarea, [tabindex]');
+          if (held.length > 0) {
+            swallowed.push(roled[k].getAttribute('role') + '.' +
+                           (roled[k].className || roled[k].tagName) +
+                           ' holds ' + held.length);
+          }
+        }
+        check('no control sits inside a role that drops its children',
+              swallowed.length === 0,
+              swallowed.join(', ') || roled.length + ' roles checked');
+
+        // Rename and delete. The confirm box is answered by the stub below,
+        // because a headless browser answers it with false and the delete
+        // would never run.
+        var bankNames = function () {
+          return [].map.call(root.querySelectorAll('.sfz-bank-name'), function (n) {
+            return n.textContent;
+          });
+        };
+        // A save writes what the pads hold, so the mark goes.
+        root.querySelector('.sfz-save').click();
+
+        check('the panel lists the banks it was given',
+              bankNames().join() === 'Drumkit A,Foley', bankNames().join());
+
+        setTimeout(function () {
+        check('a save takes the unsaved mark away',
+              root.querySelector('.sfz-dirty').hidden);
+
+        var renameButton = root.querySelector('.sfz-btn--quiet');
+        renameButton.click();
+        var titleEdit = root.querySelector('.sfz-title-edit');
+        check('rename opens a field where the title is', !!titleEdit);
+        if (titleEdit) {
+          check('the field starts at the name of the bank',
+                titleEdit.value === 'Drumkit A', titleEdit.value);
+          check('the title steps aside while the field is open',
+                root.querySelector('.sfz-title').hidden);
+          check('the field has the focus', document.activeElement === titleEdit);
+
+          // Escape gives the name back and the focus with it.
+          titleEdit.value = 'Something else';
+          titleEdit.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+          check('escape puts the title back', !root.querySelector('.sfz-title-edit') &&
+                root.querySelector('.sfz-title').textContent === 'Drumkit A' &&
+                !root.querySelector('.sfz-title').hidden);
+          check('escape gives the focus back to the button',
+                document.activeElement === renameButton);
+        }
+
+        renameButton.click();
+        var edit2 = root.querySelector('.sfz-title-edit');
+        edit2.value = 'Kit A';
+        edit2.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+        setTimeout(function () {
+          // The panel opens the name the server gives back, not the one it
+          // sent: "Kit A" reached the disk as "Kit_A".
+          check('a rename opens the name the server gives back',
+                root.querySelector('.sfz-title').textContent === 'Kit_A',
+                root.querySelector('.sfz-title').textContent);
+
+          CONFIRM_ANSWER = false;
+          CONFIRM_ASKED = '';
+          root.querySelector('.sfz-btn--danger').click();
+          check('delete asks before it removes anything',
+                CONFIRM_ASKED.indexOf('cannot be undone') > 0, JSON.stringify(CONFIRM_ASKED));
+          check('a refused confirm removes nothing',
+                root.querySelector('.sfz-title').textContent === 'Kit_A');
+          CONFIRM_ANSWER = true;
+
+          // A slow answer for a bank you left must not draw over the bank
+          // you are on. Click the slow bank, then the next one, and wait past
+          // the slow answer.
+          SLOW_BANK = 'Drumkit A';
+          var rows = root.querySelectorAll('.sfz-bank');
+          rows[0].click();
+          rows[1].click();
+          setTimeout(function () {
+            var names = [].map.call(root.querySelectorAll('.sfz-sample-name'),
+                                    function (n) { return n.textContent; });
+            check('the open bank is the one that was clicked last',
+                  root.querySelector('.sfz-title').textContent === 'Foley',
+                  root.querySelector('.sfz-title').textContent);
+            check('a late answer for a bank you left is dropped',
+                  names.indexOf('STALE.wav') < 0, names.join());
+            SLOW_BANK = '';
+
+            var panel = root.querySelector('.sfz-panel');
+            note('panel columns:', getComputedStyle(panel).gridTemplateColumns);
+            note('colour scheme:', getComputedStyle(root).colorScheme);
+            finish();
+          }, 500);
+        }, 200);
+        }, 200);
+      }, 200);
+    }, 400);
+  }, 700);
+}, 300);
+</script>
+</body></html>
diff --git a/test/js/model.test.js b/test/js/model.test.js
new file mode 100644
index 000000000..3fbc10284
--- /dev/null
+++ b/test/js/model.test.js
@@ -0,0 +1,178 @@
+// SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import * as model from '../../html/js/app/sfzbuilder/model.js'
+
+test('noteName gives the name of a MIDI note', () => {
+    assert.equal(model.noteName(0), 'C-1')
+    assert.equal(model.noteName(36), 'C2')
+    assert.equal(model.noteName(37), 'C#2')
+    assert.equal(model.noteName(60), 'C4')
+    assert.equal(model.noteName(127), 'G9')
+})
+
+test('clampBaseNote keeps the value between 0 and 127', () => {
+    assert.equal(model.clampBaseNote('36'), 36)
+    assert.equal(model.clampBaseNote(-5), 0)
+    assert.equal(model.clampBaseNote(200), 127)
+})
+
+test('clampBaseNote gives the default value for bad input', () => {
+    assert.equal(model.clampBaseNote(''), 36)
+    assert.equal(model.clampBaseNote('abc'), 36)
+    assert.equal(model.clampBaseNote(null), 36)
+})
+
+test('clampPadCount keeps the value between 1 and 128', () => {
+    assert.equal(model.clampPadCount('8'), 8)
+    assert.equal(model.clampPadCount(0), 1)
+    assert.equal(model.clampPadCount(999), 128)
+    assert.equal(model.clampPadCount('abc'), 1)
+})
+
+test('resizePads keeps each pad at its index', () => {
+    const kick = { sample: 'kick.wav', source: null, volume: 0, pitch: null, loop: 'one_shot' }
+    const slots = [null, kick, null]
+    assert.deepEqual(model.resizePads(slots, 2), [null, kick])
+})
+
+test('resizePads adds empty pads at the end', () => {
+    assert.deepEqual(model.resizePads([], 3), [null, null, null])
+})
+
+test('resizePads does not change the input array', () => {
+    const slots = [null, null]
+    model.resizePads(slots, 5)
+    assert.equal(slots.length, 2)
+})
+
+test('noteToken gives the number and the name', () => {
+    assert.deepEqual(model.noteToken(36), { note: 36, name: 'C2', inRange: true })
+})
+
+test('noteToken marks a note above 127 as out of range', () => {
+    assert.deepEqual(model.noteToken(128), { note: 128, name: '--', inRange: false })
+})
+
+test('clampCols keeps the count from 2 to 8', () => {
+    assert.equal(model.clampCols('4'), 4)
+    assert.equal(model.clampCols(1), 2)
+    assert.equal(model.clampCols(8), 8)
+    assert.equal(model.clampCols(99), 8)
+    assert.equal(model.clampCols(null), model.DEFAULT_COLS)
+    assert.equal(model.clampCols('abc'), model.DEFAULT_COLS)
+})
+
+test('formatSize gives a short size', () => {
+    assert.equal(model.formatSize(0), '0 B')
+    assert.equal(model.formatSize(512), '512 B')
+    assert.equal(model.formatSize(412000), '402 KB')
+    assert.equal(model.formatSize(1258291), '1.2 MB')
+})
+
+test('formatSize gives nothing for an unknown size', () => {
+    assert.equal(model.formatSize(null), '')
+    assert.equal(model.formatSize(undefined), '')
+    assert.equal(model.formatSize(-1), '')
+})
+
+test('isAudioName accepts the types that the server accepts', () => {
+    assert.equal(model.isAudioName('Kick_01.wav'), true)
+    assert.equal(model.isAudioName('LOUD.WAV'), true)
+    assert.equal(model.isAudioName('pad.flac'), true)
+    assert.equal(model.isAudioName('take.aiff'), true)
+    assert.equal(model.isAudioName('notes.txt'), false)
+    assert.equal(model.isAudioName('cover.png'), false)
+    assert.equal(model.isAudioName('wav'), false)
+    assert.equal(model.isAudioName(''), false)
+})
+
+// The server refuses the full batch if one file is not audio, and it refuses it
+// after it writes the files before that one. Thus the panel divides the files
+// first. A drop from the desktop has no filter.
+test('splitAudioFiles divides a drop into audio and the rest', () => {
+    const files = [
+        { name: 'Kick.wav' },
+        { name: '.DS_Store' },
+        { name: 'Snare.FLAC' },
+        { name: 'cover.jpg' },
+    ]
+    const split = model.splitAudioFiles(files)
+    assert.deepEqual(split.accepted.map((f) => f.name), ['Kick.wav', 'Snare.FLAC'])
+    assert.deepEqual(split.rejected.map((f) => f.name), ['.DS_Store', 'cover.jpg'])
+})
+
+test('splitAudioFiles gives two empty lists for an empty drop', () => {
+    const split = model.splitAudioFiles([])
+    assert.deepEqual(split.accepted, [])
+    assert.deepEqual(split.rejected, [])
+})
+
+test('alignSavedSlots keeps the empty pads', () => {
+    const saved = [null, { sample: 'snare.wav', volume: -3, pitch_keycenter: 40, loop_mode: 'no_loop' }]
+    const aligned = model.alignSavedSlots(saved)
+    assert.equal(aligned[0], null)
+    assert.deepEqual(aligned[1], {
+        sample: 'snare.wav', source: null, volume: -3, pitch: 40, loop: 'no_loop',
+    })
+})
+
+test('alignSavedSlots gives the default values for missing fields', () => {
+    const aligned = model.alignSavedSlots([{ sample: 'hat.wav', volume: 0 }])
+    assert.equal(aligned[0].pitch, null)
+    assert.equal(aligned[0].loop, 'one_shot')
+})
+
+test('buildPayload sends null for an empty pad', () => {
+    const slots = [
+        null,
+        { sample: 'kick.wav', source: null, volume: 0, pitch: null, loop: 'one_shot' },
+    ]
+    const payload = model.buildPayload(slots)
+    assert.equal(payload.filled, 1)
+    assert.equal(payload.aligned[0], null)
+    assert.deepEqual(payload.aligned[1], {
+        sample: 'kick.wav', source: null, volume: 0, pitch_keycenter: null, loop_mode: 'one_shot',
+    })
+})
+
+test('buildPayload counts no full pads in an empty bank', () => {
+    assert.equal(model.buildPayload([null, null]).filled, 0)
+})
+
+test('filterFiles ignores the case of the letters', () => {
+    const files = [{ basename: 'Kick.wav', fullname: '/a/Kick.wav' }, { basename: 'snare.wav', fullname: '/a/snare.wav' }]
+    assert.deepEqual(model.filterFiles(files, 'KICK'), [files[0]])
+})
+
+test('filterFiles gives every file for an empty term', () => {
+    const files = [{ basename: 'a.wav', fullname: '/a.wav' }]
+    assert.equal(model.filterFiles(files, '').length, 1)
+})
+
+test('slotFromSample keeps the path for a file outside the bank', () => {
+    const file = { basename: 'kick.wav', fullname: '/media/usb/kick.wav' }
+    assert.equal(model.slotFromSample(file, 'usb').source, '/media/usb/kick.wav')
+    assert.equal(model.slotFromSample(file, 'bank').source, null)
+})
+
+test('pickInitialBank opens the bank of the last visit', () => {
+    assert.equal(model.pickInitialBank(['Drums', 'Keys'], 'Keys'), 'Keys')
+})
+
+test('pickInitialBank gives the first bank when the last one is gone', () => {
+    assert.equal(model.pickInitialBank(['Drums', 'Keys'], 'Deleted'), 'Drums')
+})
+
+test('pickInitialBank gives the first bank when nothing is remembered', () => {
+    assert.equal(model.pickInitialBank(['Drums', 'Keys'], null), 'Drums')
+    assert.equal(model.pickInitialBank(['Drums'], ''), 'Drums')
+    assert.equal(model.pickInitialBank(['Drums'], undefined), 'Drums')
+})
+
+test('pickInitialBank gives no bank when the device has none', () => {
+    assert.equal(model.pickInitialBank([], 'Keys'), '')
+    assert.equal(model.pickInitialBank([], null), '')
+})
diff --git a/test/js/package.json b/test/js/package.json
new file mode 100644
index 000000000..3dbc1ca59
--- /dev/null
+++ b/test/js/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/test/test_patchstorage_share.py b/test/test_patchstorage_share.py
new file mode 100644
index 000000000..6ecdd5e06
--- /dev/null
+++ b/test/test_patchstorage_share.py
@@ -0,0 +1,467 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: 2026 pi-Stomp
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+"""
+Sharing pedalboards to Patchstorage, against a local stand-in for its API.
+
+The stand-in records every request, so the tests can check what would reach
+patchstorage.com without touching it.
+"""
+
+import base64
+import email.policy
+import io
+import json
+import os
+import shutil
+import stat
+import tempfile
+import threading
+import time
+import unittest
+import urllib.parse
+import zipfile
+from collections import namedtuple
+from email.parser import BytesParser
+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
+
+from mod.patchstorage_share import PatchstorageClient, PatchstorageError, bump_revision
+
+USER_ID = 19718
+
+UploadedFile = namedtuple('UploadedFile', 'filename value')
+JPEG = b'\xff\xd8\xff\xe0' + b'jpeg'
+
+
+def make_token(user_id=USER_ID, exp=None):
+    def part(obj):
+        return base64.urlsafe_b64encode(json.dumps(obj).encode()).decode().rstrip('=')
+    exp = exp or int(time.time()) + 7 * 24 * 3600
+    return '%s.%s.sig' % (part({'alg': 'HS256'}), part({'exp': exp, 'data': {'user': {'id': str(user_id)}}}))
+
+
+class FakePatchstorage(object):
+    def __init__(self):
+        self.requests = []
+        self.files = {}
+        self.patches = {}
+        self.next_id = 1000
+        self.reject_token = False
+        self.fail_patch = False
+        self.redirect_after_write = False
+        self.json_create_broken = False
+        self.password = 'secret'
+
+    def new_id(self):
+        self.next_id += 1
+        return self.next_id
+
+    def patch_response(self, pid):
+        p = self.patches[pid]
+        return dict(p, id=pid, url='https://patchstorage.com/%d/' % pid,
+                    files=[{'id': f} for f in p['files']], artwork={'id': p['artwork']})
+
+
+class Handler(BaseHTTPRequestHandler):
+    def log_message(self, *args):
+        pass
+
+    def reply(self, code, obj):
+        body = json.dumps(obj).encode()
+        self.send_response(code)
+        self.send_header('Content-Type', 'application/json')
+        self.send_header('Content-Length', str(len(body)))
+        self.end_headers()
+        self.wfile.write(body)
+
+    def form(self):
+        length = int(self.headers.get('Content-Length') or 0)
+        raw = self.rfile.read(length)
+        ctype = self.headers.get('Content-Type', '')
+        if ctype.startswith('multipart/form-data'):
+            msg = BytesParser(policy=email.policy.HTTP).parsebytes(b'Content-Type: ' + ctype.encode() + b'\r\n\r\n' + raw)
+            return {part.get_param('name', header='content-disposition'):
+                    UploadedFile(part.get_filename(), part.get_payload(decode=True)) for part in msg.iter_parts()}
+        if ctype.startswith('application/json'):
+            return json.loads(raw.decode())
+        return urllib.parse.parse_qs(raw.decode())
+
+    def handle_any(self, method):
+        api = self.server.api
+        path = self.path.split('?')[0].rstrip('/')
+        form = self.form() if method in ('POST', 'PUT') else {}
+        auth = self.headers.get('Authorization')
+        api.requests.append({'method': method, 'path': path, 'form': form, 'auth': auth,
+                             'agent': self.headers.get('User-Agent')})
+
+        if path == '/auth/token':
+            if form.get('password') != [api.password]:
+                return self.reply(403, {'code': 'incorrect_password',
+                                        'message': '<strong>Error:</strong> The password is incorrect.'})
+            return self.reply(200, {'token': make_token(), 'username': form['username'][0], 'display_name': 'TFS'})
+
+        if path.startswith('/patches/') and method == 'GET':
+            pid = int(path.split('/')[2])
+            if pid not in api.patches:
+                return self.reply(404, {'code': 'rest_post_invalid_id', 'message': 'Invalid post ID.'})
+            return self.reply(200, api.patch_response(pid))
+
+        if not auth or api.reject_token:
+            return self.reply(403, {'code': 'jwt_auth_invalid_token', 'message': 'Expired token'})
+
+        if path == '/files' and method == 'POST':
+            fid = api.new_id()
+            api.files[fid] = (form['file'].filename, form['file'].value)
+            return self.reply(201, {'id': fid, 'filename': form['file'].filename})
+
+        if path.startswith('/files/') and method == 'DELETE':
+            api.files.pop(int(path.split('/')[2]), None)
+            return self.reply(200, {'deleted': True})
+
+        if path == '/patches' and method == 'POST' or path.startswith('/patches/') and method == 'PUT':
+            is_json = self.headers.get('Content-Type', '').startswith('application/json')
+            if method == 'POST' and api.json_create_broken:
+                # what patchstorage.com did on create: preview_url refused in JSON, a form accepted
+                if is_json:
+                    return self.reply(400, {'code': 'rest_invalid_param', 'message': 'Invalid parameter(s): preview_url',
+                                            'data': {'params': {'preview_url': 'preview_url is not of type string or empty.'}}})
+                form = {k.rstrip('[]'): [int(x) if x.isdigit() else x for x in v] if k.endswith('[]')
+                        else (int(v[0]) if v[0].isdigit() else v[0]) for k, v in form.items()}
+            # Like the real API: id fields must arrive as JSON integers, not strings
+            def is_int(v):
+                return isinstance(v, int) and not isinstance(v, bool)
+            invalid = [k for k in ('files', 'artwork', 'categories', 'license', 'platform', 'state')
+                       if not (all(map(is_int, form.get(k))) if isinstance(form.get(k), list) else is_int(form.get(k)))]
+            if form.get('preview_url', 'missing') in ('', None):
+                invalid.append('preview_url')
+            if invalid:
+                return self.reply(400, {'code': 'rest_invalid_param', 'message': 'Invalid parameter(s): ' + ', '.join(invalid),
+                                        'data': {'status': 400, 'params': {k: '%s is not valid.' % k for k in invalid}}})
+            if api.fail_patch == 302:
+                self.send_response(302)
+                self.send_header('Location', 'https://patchstorage.com/elsewhere/')
+                self.send_header('Content-Length', '0')
+                self.end_headers()
+                return
+            if api.fail_patch:
+                return self.reply(api.fail_patch, {'code': 'broken', 'message': 'Something broke'})
+            pid = api.new_id() if method == 'POST' else int(path.split('/')[2])
+            if method == 'PUT' and api.patches[pid]['author']['id'] != USER_ID:
+                return self.reply(403, {'code': 'rest_cannot_edit', 'message': 'Sorry, you are not allowed to edit this post.'})
+            api.patches[pid] = {
+                'title': form['title'], 'content': form['content'], 'revision': form['revision'],
+                'files': form['files'], 'artwork': form['artwork'], 'categories': form['categories'],
+                'license': form['license'], 'state': form['state'], 'preview_url': form.get('preview_url', api.patches.get(pid, {}).get('preview_url')),
+                'tags': [{'name': t} for t in form.get('tags', [])], 'platform': form['platform'],
+                'author': {'id': USER_ID, 'slug': 'treefallsound', 'name': 'treefallsound'},
+            }
+            if api.redirect_after_write:
+                # what patchstorage.com does: apply the write, then redirect to a host without ".com"
+                self.send_response(302)
+                self.send_header('Location', 'https://patchstorage/api/beta/patches/%d' % pid)
+                self.send_header('Content-Length', '0')
+                self.end_headers()
+                return
+            return self.reply(201 if method == 'POST' else 200, api.patch_response(pid))
+
+        self.reply(404, {'code': 'rest_no_route', 'message': 'No route'})
+
+    def do_GET(self):
+        self.handle_any('GET')
+
+    def do_POST(self):
+        self.handle_any('POST')
+
+    def do_PUT(self):
+        self.handle_any('PUT')
+
+    def do_DELETE(self):
+        self.handle_any('DELETE')
+
+
+class ShareTestCase(unittest.TestCase):
+    def setUp(self):
+        self.api = FakePatchstorage()
+        self.server = ThreadingHTTPServer(('127.0.0.1', 0), Handler)
+        self.server.api = self.api
+        threading.Thread(target=self.server.serve_forever, daemon=True).start()
+
+        self.tmp = tempfile.mkdtemp()
+        self.bundle = os.path.join(self.tmp, 'pedalboards', 'Crunch.pedalboard')
+        os.makedirs(os.path.join(self.bundle, 'effect-1'))
+        for name, data in (('manifest.ttl', b'@prefix'), ('Crunch.ttl', b'board'), ('screenshot.png', b'PNG'),
+                           ('effect-1/model.nam', b'nam'), ('.DS_Store', b'junk')):
+            with open(os.path.join(self.bundle, name), 'wb') as fh:
+                fh.write(data)
+
+        self.client = PatchstorageClient('http://127.0.0.1:%d' % self.server.server_port,
+                                         os.path.join(self.tmp, 'auth.json'), 12520, 372, 'pi-Stomp mod-ui/test')
+        self.fields = {'title': 'Crunch', 'content': 'A crunchy board', 'revision': '1.0',
+                       'tags': ['pedalboard', ' pi-stomp ', ''], 'license': '4181', 'state': '151',
+                       'preview_url': 'https://youtu.be/crunch'}
+
+    def tearDown(self):
+        self.server.shutdown()
+        self.server.server_close()
+        shutil.rmtree(self.tmp)
+
+    def login(self):
+        return self.client.login('treefallsound', 'secret')
+
+
+class TestAuth(ShareTestCase):
+    def test_login_keeps_token_not_password(self):
+        status = self.login()
+        self.assertTrue(status['logged_in'])
+        self.assertEqual(status['username'], 'treefallsound')
+        with open(self.client.auth_file) as fh:
+            saved = fh.read()
+        self.assertNotIn('secret', saved)
+        self.assertEqual(json.loads(saved)['user_id'], USER_ID)
+        self.assertEqual(stat.S_IMODE(os.stat(self.client.auth_file).st_mode), 0o600)
+
+    def test_wrong_password_message_has_no_html(self):
+        self.api.password = 'other'
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.login()
+        self.assertEqual(ctx.exception.message, 'Error: The password is incorrect.')
+        self.assertFalse(self.client.status()['logged_in'])
+
+    def test_expired_token_is_dropped(self):
+        with open(self.client.auth_file, 'w') as fh:
+            json.dump({'token': make_token(exp=int(time.time()) - 5), 'expires': int(time.time()) - 5}, fh)
+        self.assertFalse(self.client.status()['logged_in'])
+        self.assertFalse(os.path.exists(self.client.auth_file))
+
+    def test_logout(self):
+        self.login()
+        self.client.logout()
+        self.assertFalse(self.client.status()['logged_in'])
+
+    def test_user_agent_sent(self):
+        self.login()
+        self.assertEqual(self.api.requests[0]['agent'], 'pi-Stomp mod-ui/test')
+
+
+class TestShare(ShareTestCase):
+    def test_new_share(self):
+        self.login()
+        result = self.client.share(self.bundle, self.fields)
+
+        patch = self.api.patches[result['id']]
+        self.assertEqual(patch['platform'], 12520)
+        self.assertEqual(patch['categories'], [372])
+        self.assertEqual((patch['license'], patch['state']), (4181, 151))
+        self.assertEqual([t['name'] for t in patch['tags']], ['pedalboard', 'pi-stomp'])
+        self.assertEqual(self.api.files[patch['artwork']], ('Crunch.png', b'PNG'))
+        self.assertTrue(all(r['auth'].startswith('Bearer ') for r in self.api.requests[1:]))
+
+        name, data = self.api.files[patch['files'][0]]
+        self.assertEqual(name, 'Crunch.pedalboard.zip')
+        names = zipfile.ZipFile(io.BytesIO(data)).namelist()
+        self.assertIn('Crunch.pedalboard/manifest.ttl', names)
+        self.assertIn('Crunch.pedalboard/effect-1/model.nam', names)
+        self.assertNotIn('Crunch.pedalboard/.DS_Store', names)
+
+        with open(os.path.join(self.bundle, 'patchstorage.json')) as fh:
+            self.assertEqual(json.load(fh), {'id': result['id'], 'revision': '1.0'})
+
+    def test_preview_url(self):
+        self.login()
+        body = json.dumps({'preview_url': '', 'files': [1], 'artwork': 1, 'categories': [1], 'license': 1,
+                           'platform': 1, 'state': 1, 'title': 't', 'content': 'c', 'revision': '1'}).encode()
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client._request('POST', '/patches', body=body, content_type='application/json')
+        self.assertEqual(ctx.exception.message,
+                         'Invalid parameter(s): preview_url (preview_url: preview_url is not valid.)')
+
+        first = self.client.share(self.bundle, dict(self.fields, preview_url=' https://youtu.be/abc '))
+        self.assertEqual(self.api.patches[first['id']]['preview_url'], 'https://youtu.be/abc')
+        self.client.share(self.bundle, dict(self.fields, revision='1.1', preview_url=''), patch_id=first['id'])
+        self.assertEqual(self.api.patches[first['id']]['preview_url'], 'https://youtu.be/abc',
+                         'an empty field leaves the existing link')
+
+    def test_new_share_without_preview_url(self):
+        self.login()
+        result = self.client.share(self.bundle, dict(self.fields, preview_url=' '))
+        self.assertIsNone(self.api.patches[result['id']]['preview_url'])
+
+    def test_create_falls_back_to_form(self):
+        self.login()
+        self.api.json_create_broken = True
+        result = self.client.share(self.bundle, dict(self.fields, preview_url=''))
+        patch = self.api.patches[result['id']]
+        self.assertEqual((patch['license'], patch['categories'], patch['platform']), (4181, [372], 12520))
+        posts = [r for r in self.api.requests if r['path'] == '/patches']
+        self.assertEqual(len(posts), 2)
+        self.assertIn('files[]', posts[1]['form'], 'the retry is a WordPress-style form')
+
+        # and a revision still goes out as JSON
+        self.client.share(self.bundle, dict(self.fields, revision='1.1'), patch_id=result['id'])
+        self.assertEqual(self.api.patches[result['id']]['revision'], '1.1')
+
+    def test_create_refused_both_ways(self):
+        self.login()
+        self.api.json_create_broken = True
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client._create_patch({'title': 'T', 'files': ['bad']}, b'{}')
+        self.assertIn('As JSON: Invalid parameter(s): preview_url', ctx.exception.message)
+        self.assertIn('As a form:', ctx.exception.message)
+
+    def test_broken_links_are_left_out(self):
+        self.login()
+        os.symlink('@greenback', os.path.join(self.bundle, 'effect-1', '@greenback'))
+        os.symlink('missing.wav', os.path.join(self.bundle, 'gone.wav'))
+        os.symlink('Crunch.ttl', os.path.join(self.bundle, 'alias.ttl'))
+        result = self.client.share(self.bundle, self.fields)
+        name, data = self.api.files[self.api.patches[result['id']]['files'][0]]
+        names = zipfile.ZipFile(io.BytesIO(data)).namelist()
+        self.assertNotIn('Crunch.pedalboard/effect-1/@greenback', names)
+        self.assertNotIn('Crunch.pedalboard/gone.wav', names)
+        self.assertIn('Crunch.pedalboard/alias.ttl', names)
+        self.assertIn('Crunch.pedalboard/effect-1/model.nam', names)
+
+    def test_bookkeeping_file_not_uploaded(self):
+        self.login()
+        first = self.client.share(self.bundle, self.fields)
+        second = self.client.share(self.bundle, dict(self.fields, revision='1.1'), patch_id=first['id'])
+        name, data = self.api.files[self.api.patches[second['id']]['files'][0]]
+        self.assertNotIn('Crunch.pedalboard/patchstorage.json', zipfile.ZipFile(io.BytesIO(data)).namelist())
+
+    def test_update_replaces_files_and_cleans_old_ones(self):
+        self.login()
+        first = self.client.share(self.bundle, self.fields)
+        old = set(self.api.files)
+        with open(os.path.join(self.bundle, 'screenshot.png'), 'wb') as fh:
+            fh.write(b'PNG2')
+
+        second = self.client.share(self.bundle, dict(self.fields, revision='1.1'), patch_id=first['id'])
+
+        self.assertEqual(second['id'], first['id'])
+        patch = self.api.patches[first['id']]
+        self.assertEqual(patch['revision'], '1.1')
+        self.assertEqual(self.api.files[patch['artwork']], ('Crunch.png', b'PNG2'))
+        self.assertFalse(old & set(self.api.files), 'old zip and artwork should be deleted')
+        self.assertEqual(len(self.api.files), 2)
+        with open(os.path.join(self.bundle, 'patchstorage.json')) as fh:
+            self.assertEqual(json.load(fh)['revision'], '1.1')
+
+    def test_screenshot_wins_over_chosen_artwork(self):
+        self.login()
+        result = self.client.share(self.bundle, self.fields, artwork=JPEG)
+        self.assertEqual(self.api.files[self.api.patches[result['id']]['artwork']], ('Crunch.png', b'PNG'))
+
+    def test_chosen_artwork_without_screenshot(self):
+        self.login()
+        os.remove(os.path.join(self.bundle, 'screenshot.png'))
+        result = self.client.share(self.bundle, self.fields, artwork=JPEG)
+        self.assertEqual(self.api.files[self.api.patches[result['id']]['artwork']], ('Crunch.jpg', JPEG))
+
+    def test_bad_artwork_is_rejected_before_upload(self):
+        self.login()
+        os.remove(os.path.join(self.bundle, 'screenshot.png'))
+        for bad in (b'<svg/>', JPEG + b'0' * (5 * 1024 * 1024)):
+            with self.assertRaises(PatchstorageError):
+                self.client.share(self.bundle, self.fields, artwork=bad)
+        self.assertEqual(len(self.api.requests), 1, 'only the login should have reached the server')
+
+    def test_refused_publish_removes_uploads(self):
+        self.login()
+        self.api.fail_patch = 400
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields)
+        self.assertEqual(ctx.exception.message, 'Something broke')
+        self.assertFalse(self.api.files, 'uploaded zip and artwork should be deleted')
+        self.assertFalse(os.path.exists(os.path.join(self.bundle, 'patchstorage.json')))
+
+    def test_uncertain_publish_keeps_uploads(self):
+        self.login()
+        for status in (500, 302):
+            self.api.fail_patch = status
+            with self.assertRaises(PatchstorageError):
+                self.client.share(self.bundle, self.fields)
+        self.assertEqual(len(self.api.files), 4, 'the patch may exist, so its uploads stay')
+
+    def test_redirect_after_successful_write_is_success(self):
+        self.login()
+        self.api.redirect_after_write = True
+        first = self.client.share(self.bundle, self.fields)
+        old = set(self.api.files)
+
+        second = self.client.share(self.bundle, dict(self.fields, revision='0.3'), patch_id=first['id'])
+
+        self.assertEqual(second['id'], first['id'])
+        self.assertEqual(second['revision'], '0.3')
+        self.assertFalse(old & set(self.api.files), 'old zip and artwork should be deleted')
+        with open(os.path.join(self.bundle, 'patchstorage.json')) as fh:
+            self.assertEqual(json.load(fh), {'id': first['id'], 'revision': '0.3'})
+        self.assertNotIn('patchstorage/api', ' '.join(r['path'] for r in self.api.requests),
+                         'the broken redirect target must not be requested')
+
+    def test_redirect_is_reported_not_followed(self):
+        self.login()
+        self.api.fail_patch = 302
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields)
+        self.assertEqual(ctx.exception.message,
+                         'Patchstorage redirected POST /patches to https://patchstorage.com/elsewhere/')
+        self.assertEqual([r['method'] for r in self.api.requests[-1:]], ['POST'], 'the redirect must not be followed')
+
+    def test_cannot_update_someone_elses_patch(self):
+        self.login()
+        self.api.patches[555] = {'title': 'x', 'content': 'x', 'revision': '1', 'files': [], 'artwork': 0,
+                                 'tags': [], 'platform': 12520, 'author': {'id': 1, 'slug': 'crosenau', 'name': 'crosenau'}}
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields, patch_id=555)
+        self.assertIn('your own', ctx.exception.message)
+        self.assertFalse(self.api.files, 'nothing should be uploaded')
+
+    def test_requires_login(self):
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields)
+        self.assertTrue(ctx.exception.auth_required)
+        self.assertFalse(self.api.requests)
+
+    def test_rejected_token_logs_out(self):
+        self.login()
+        self.api.reject_token = True
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields)
+        self.assertTrue(ctx.exception.auth_required)
+        self.assertFalse(self.client.status()['logged_in'])
+
+    def test_missing_screenshot(self):
+        self.login()
+        os.remove(os.path.join(self.bundle, 'screenshot.png'))
+        with self.assertRaises(PatchstorageError) as ctx:
+            self.client.share(self.bundle, self.fields)
+        self.assertIn('screenshot', ctx.exception.message)
+
+    def test_validation(self):
+        self.login()
+        for bad in ({'title': ' '}, {'revision': ''}, {'license': None}, {'state': 'x'}, {'tags': ['x']},
+                    {'tags': [' ', '']}, {'preview_url': 'youtube.com/watch?v=1'}, {'preview_url': 'javascript:alert(1)'}):
+            with self.assertRaises(PatchstorageError):
+                self.client.share(self.bundle, dict(self.fields, **bad))
+        self.assertEqual(len(self.api.requests), 1, 'only the login should have reached the server')
+
+    def test_owns(self):
+        self.login()
+        self.assertTrue(self.client.owns({'author': {'id': USER_ID}}))
+        self.assertTrue(self.client.owns({'author': {'id': 1, 'slug': 'treefallsound'}}))
+        self.assertFalse(self.client.owns({'author': {'id': 1, 'slug': 'crosenau', 'name': 'crosenau'}}))
+
+
+class TestRevision(unittest.TestCase):
+    def test_bump(self):
+        self.assertEqual(bump_revision('0.1'), '0.2')
+        self.assertEqual(bump_revision('1.9'), '1.10')
+        self.assertEqual(bump_revision('v2'), 'v3')
+        self.assertEqual(bump_revision('beta'), 'beta.1')
+        self.assertEqual(bump_revision(''), '1.0')
+        self.assertEqual(bump_revision(None), '1.0')
+
+
+if __name__ == '__main__':
+    unittest.main()
diff --git a/test/test_setup_data_files.py b/test/test_setup_data_files.py
new file mode 100644
index 000000000..f769c66cb
--- /dev/null
+++ b/test/test_setup_data_files.py
@@ -0,0 +1,75 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+"""
+Guards the install list of setup.py.
+
+setup.py names each directory of html/ with a glob that is not recursive. Thus a
+new directory is absent from the package and the browser reads nothing. The
+panel of that feature is then empty and gives no other sign.
+
+An island keeps its code and its stylesheet in html/js/app/<feature>/. This test
+reads the globs of setup.py and asks that each of those files is in one of them.
+"""
+
+import ast
+import glob as globmodule
+import os
+import unittest
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+ISLAND_ROOT = os.path.join(ROOT, "html", "js", "app")
+
+
+def installed_files():
+    """Gives every file that the data_files list of setup.py installs.
+
+    The test runs the same glob() calls that setup.py runs. fnmatch is not
+    correct here, because its * goes past a / and thus 'html/js/*.js' would
+    appear to hold a file in a directory below.
+    """
+    with open(os.path.join(ROOT, "setup.py")) as fh:
+        tree = ast.parse(fh.read())
+
+    patterns = []
+    for node in ast.walk(tree):
+        # Each entry looks like glob('html/js/app/sfzbuilder/*.js').
+        if not isinstance(node, ast.Call):
+            continue
+        if not isinstance(node.func, ast.Name) or node.func.id != "glob":
+            continue
+        if len(node.args) != 1 or not isinstance(node.args[0], ast.Constant):
+            continue
+        patterns.append(node.args[0].value)
+
+    found = set()
+    for pattern in patterns:
+        for path in globmodule.glob(os.path.join(ROOT, pattern)):
+            found.add(os.path.relpath(path, ROOT))
+    return patterns, found
+
+
+class TestSetupDataFiles(unittest.TestCase):
+    def test_island_files_are_installed(self):
+        patterns, installed = installed_files()
+        self.assertTrue(patterns, "setup.py holds no glob() call")
+
+        missing = []
+        for dirpath, dirnames, filenames in os.walk(ISLAND_ROOT):
+            dirnames[:] = [d for d in dirnames if d != "node_modules"]
+            for name in filenames:
+                if not name.endswith((".js", ".css")):
+                    continue
+                path = os.path.relpath(os.path.join(dirpath, name), ROOT)
+                if path not in installed:
+                    missing.append(path)
+
+        self.assertEqual(
+            missing, [],
+            "these island files are not in the data_files list of setup.py, so "
+            "the device does not get them:\n  " + "\n  ".join(missing))
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/test/test_sfzbuilder.py b/test/test_sfzbuilder.py
new file mode 100755
index 000000000..620da2c9b
--- /dev/null
+++ b/test/test_sfzbuilder.py
@@ -0,0 +1,510 @@
+#!/usr/bin/env python3
+# SPDX-FileCopyrightText: 2012-2023 MOD Audio UG
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+import os
+import shutil
+import tempfile
+import unittest
+
+from mod import sfzbuilder
+
+
+def make_wav(path):
+    os.makedirs(os.path.dirname(path), exist_ok=True)
+    with open(path, 'wb') as fh:
+        fh.write(b'RIFF----WAVEfmt ')
+
+
+class TestSanitize(unittest.TestCase):
+    def test_spaces_are_kept(self):
+        # generate_sfz writes sample= last, where the value runs to the end of
+        # the line, so a space in a name is safe.
+        self.assertEqual(sfzbuilder.sanitize_filename("kick drum.wav"), "kick drum.wav")
+
+    def test_surrounding_spaces_are_dropped(self):
+        self.assertEqual(sfzbuilder.sanitize_filename("  kick  .wav"), "kick.wav")
+
+    def test_sfz_breaking_chars_removed(self):
+        self.assertEqual(sfzbuilder.sanitize_filename("kick=1<2#3.wav"), "kick_1_2_3.wav")
+
+    def test_basename_only(self):
+        self.assertEqual(sfzbuilder.sanitize_filename("/a/b/x.wav"), "x.wav")
+
+    def test_empty_stem(self):
+        self.assertEqual(sfzbuilder.sanitize_filename(".wav"), "sample.wav")
+
+    def test_case_kept(self):
+        self.assertEqual(sfzbuilder.sanitize_filename("Snare.WAV"), "Snare.WAV")
+
+    def test_none_input(self):
+        self.assertEqual(sfzbuilder.sanitize_filename(None), "sample")
+
+    def test_unique_filename(self):
+        used = {"a.wav"}
+        self.assertEqual(sfzbuilder.unique_filename("a.wav", used), "a_1.wav")
+        used.add("a_1.wav")
+        self.assertEqual(sfzbuilder.unique_filename("a.wav", used), "a_2.wav")
+
+    def test_bank_name(self):
+        self.assertEqual(sfzbuilder.sanitize_bank_name("My Bank"), "My_Bank")
+        with self.assertRaises(ValueError):
+            sfzbuilder.sanitize_bank_name("")
+        with self.assertRaises(ValueError):
+            sfzbuilder.sanitize_bank_name("..")
+
+
+class TestGenerateSfz(unittest.TestCase):
+    def test_golden_output(self):
+        regions = [
+            {"key": 36, "sample": "01_kick.wav", "volume": -3, "pitch_keycenter": None, "loop_mode": "one_shot"},
+            {"key": 37, "sample": "02_snare.wav", "volume": None, "pitch_keycenter": 60, "loop_mode": "no_loop"},
+        ]
+        expected = (
+            "<region> key=36 volume=-3 loop_mode=one_shot sample=01_kick.wav\n"
+            "<region> key=37 pitch_keycenter=60 loop_mode=no_loop sample=02_snare.wav\n"
+        )
+        self.assertEqual(sfzbuilder.generate_sfz(regions), expected)
+
+    def test_volume_formatting(self):
+        self.assertEqual(sfzbuilder.fmt_db(-3), "-3")
+        self.assertEqual(sfzbuilder.fmt_db(2.5), "2.5")
+        self.assertIsNone(sfzbuilder.fmt_db(None))
+
+
+class TestBuildBank(unittest.TestCase):
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self.orig_user_files_dir = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self.orig_user_files_dir
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def test_build_with_upload_and_external(self):
+        # Simulate an upload: file already in the bank folder.
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        # Device source outside the bank folder.
+        external = os.path.join(self.tmp, "Audio Samples", "loop.wav")
+        make_wav(external)
+
+        slots = [
+            {"sample": "kick.wav", "source": None, "volume": -6, "loop_mode": "one_shot"},
+            {"sample": "loop.wav", "source": external, "volume": None, "loop_mode": "no_loop"},
+        ]
+        result = sfzbuilder.build_bank("Kit", 36, slots)
+
+        self.assertTrue(result["ok"])
+        self.assertEqual(result["count"], 2)
+        bank_dir = os.path.join(self.tmp, "SFZ Instruments", "Kit")
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "Kit.sfz")))
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "loop.wav")))
+
+        with open(os.path.join(bank_dir, "Kit.sfz")) as fh:
+            text = fh.read()
+        self.assertIn("key=36 volume=-6 loop_mode=one_shot sample=kick.wav", text)
+        self.assertIn("key=37 loop_mode=no_loop sample=loop.wav", text)
+
+        # Sidecar tracks the copy.
+        with open(os.path.join(bank_dir, "bank.json")) as fh:
+            import json
+            sidecar = json.load(fh)
+        self.assertEqual(sidecar["copied"], {os.path.realpath(external): "loop.wav"})
+
+    def test_rebuild_removes_stale_copy_keeps_upload(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        external = os.path.join(self.tmp, "Audio Samples", "loop.wav")
+        make_wav(external)
+        bank_dir = os.path.join(self.tmp, "SFZ Instruments", "Kit")
+
+        sfzbuilder.build_bank("Kit", 36, [
+            {"sample": "kick.wav", "source": None, "loop_mode": "one_shot"},
+            {"sample": "loop.wav", "source": external, "loop_mode": "one_shot"},
+        ])
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "loop.wav")))
+
+        # Rebuild without the external sample.
+        sfzbuilder.build_bank("Kit", 36, [
+            {"sample": "kick.wav", "source": None, "loop_mode": "one_shot"},
+        ])
+        self.assertFalse(os.path.isfile(os.path.join(bank_dir, "loop.wav")))
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "kick.wav")))
+
+    def test_duplicate_basenames_get_suffix(self):
+        d1 = os.path.join(self.tmp, "Audio Samples", "A")
+        d2 = os.path.join(self.tmp, "Audio Samples", "B")
+        make_wav(os.path.join(d1, "hit.wav"))
+        make_wav(os.path.join(d2, "hit.wav"))
+
+        result = sfzbuilder.build_bank("Kit", 36, [
+            {"sample": "hit.wav", "source": os.path.join(d1, "hit.wav"), "loop_mode": "one_shot"},
+            {"sample": "hit_1.wav", "source": os.path.join(d2, "hit.wav"), "loop_mode": "one_shot"},
+        ])
+        bank_dir = os.path.join(self.tmp, "SFZ Instruments", "Kit")
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "hit.wav")))
+        self.assertTrue(os.path.isfile(os.path.join(bank_dir, "hit_1.wav")))
+        with open(os.path.join(bank_dir, "Kit.sfz")) as fh:
+            text = fh.read()
+        self.assertIn("sample=hit.wav", text)
+        self.assertIn("sample=hit_1.wav", text)
+        self.assertEqual(result["count"], 2)
+
+    def test_errors(self):
+        make_wav(os.path.join(self.tmp, "Audio Samples", "a.wav"))
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 36, [])
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 128, [{"sample": "a.wav", "source": os.path.join(self.tmp, "Audio Samples", "a.wav")}])
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 120, [{"sample": "a.wav", "source": os.path.join(self.tmp, "Audio Samples", "a.wav")}] * 9)
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 36, [{"sample": "a.wav", "source": os.path.join(self.tmp, "Audio Samples", "a.wav"), "volume": 100}])
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 36, [{"sample": "missing.wav", "source": None, "loop_mode": "one_shot"}])
+
+    def test_device_list_excludes_current_bank(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        make_wav(os.path.join(self.tmp, "Audio Samples", "loop.wav"))
+        files = sfzbuilder.list_device_samples(exclude_bank="Kit")
+        self.assertEqual(files, [os.path.join(self.tmp, "Audio Samples", "loop.wav")])
+
+    def test_bank_roundtrip_listing(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        self.assertEqual(sfzbuilder.list_banks(), ["Kit"])
+        self.assertEqual(len(sfzbuilder.list_bank_samples("Kit")), 1)
+        self.assertEqual(sfzbuilder.list_usb_samples(), [])
+
+    def test_free_pad_keeps_its_note_number(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "snare.wav"))
+
+        # Pad 2 is free. The sample on pad 3 must keep key 38, not key 37.
+        result = sfzbuilder.build_bank("Kit", 36, [
+            {"sample": "kick.wav", "source": None, "loop_mode": "one_shot"},
+            None,
+            {"sample": "snare.wav", "source": None, "loop_mode": "one_shot"},
+        ])
+        self.assertEqual(result["count"], 2)
+
+        with open(os.path.join(self.tmp, "SFZ Instruments", "Kit", "Kit.sfz")) as fh:
+            text = fh.read()
+        self.assertIn("key=36 loop_mode=one_shot sample=kick.wav", text)
+        self.assertIn("key=38 loop_mode=one_shot sample=snare.wav", text)
+        self.assertNotIn("key=37", text)
+
+    def test_build_rejects_only_free_pads(self):
+        sfzbuilder.create_bank("Kit")
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 36, [None, None])
+
+
+class TestLoadBank(unittest.TestCase):
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self.orig_user_files_dir = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self.orig_user_files_dir
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def test_layout_survives_a_build(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        external = os.path.join(self.tmp, "Audio Samples", "loop.wav")
+        make_wav(external)
+
+        sfzbuilder.build_bank("Kit", 40, [
+            {"sample": "kick.wav", "source": None, "volume": -6, "loop_mode": "one_shot"},
+            None,
+            {"sample": "loop.wav", "source": external, "loop_mode": "no_loop"},
+        ])
+
+        state = sfzbuilder.load_bank("Kit")
+        self.assertEqual(state["base_note"], 40)
+        self.assertEqual(len(state["slots"]), 3)
+        self.assertEqual(state["slots"][0]["sample"], "kick.wav")
+        self.assertEqual(state["slots"][0]["volume"], -6)
+        self.assertIsNone(state["slots"][1])
+        # The external file is copied into the bank, so the layout is bank-local.
+        self.assertEqual(state["slots"][2]["sample"], "loop.wav")
+        self.assertEqual(state["slots"][2]["loop_mode"], "no_loop")
+
+    def test_bank_without_a_sidecar(self):
+        make_wav(os.path.join(self.tmp, "SFZ Instruments", "Kit", "kick.wav"))
+        state = sfzbuilder.load_bank("Kit")
+        self.assertEqual(state["base_note"], 36)
+        self.assertEqual(state["slots"], [])
+
+    def test_unsafe_name_stays_inside_the_root(self):
+        # sanitize_bank_name() contains a traversal instead of rejecting it.
+        # The lookup must stay under the SFZ Instruments folder.
+        state = sfzbuilder.load_bank("../escape")
+        self.assertEqual(state["slots"], [])
+        self.assertTrue(sfzbuilder.bank_dir("../escape").startswith(
+            sfzbuilder.sfz_instruments_dir() + os.sep))
+
+    def test_empty_name_is_rejected(self):
+        with self.assertRaises(ValueError):
+            sfzbuilder.load_bank("")
+
+
+if __name__ == "__main__":
+    unittest.main()
+
+
+class TestBankFilename(unittest.TestCase):
+    # The file selector of a plugin lists an SFZ file by its basename alone, so
+    # every bank writing "bank.sfz" gave a column of identical rows.
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self._real = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self._real
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def _build(self, bank, sample="kick.wav"):
+        path = sfzbuilder.create_bank(bank)
+        make_wav(os.path.join(path, sample))
+        return sfzbuilder.build_bank(bank, 36, [
+            {"sample": sample, "source": None, "loop_mode": "one_shot"},
+        ])
+
+    def test_the_sfz_carries_the_name_of_its_bank(self):
+        self.assertEqual(self._build("Drumkit A")["file"], "Drumkit_A.sfz")
+        self.assertEqual(self._build("Foley")["file"], "Foley.sfz")
+
+    def test_two_banks_do_not_share_a_filename(self):
+        first = self._build("Drumkit A")["file"]
+        second = self._build("Foley")["file"]
+        self.assertNotEqual(first, second)
+
+    def test_a_build_removes_an_sfz_it_did_not_write(self):
+        path = sfzbuilder.create_bank("Kit")
+        with open(os.path.join(path, "OldName.sfz"), "w") as fh:
+            fh.write("<region> key=36 sample=gone.wav\n")
+        self._build("Kit")
+        self.assertEqual(sorted(sfzbuilder.find_sfz_files(path)), ["Kit.sfz"])
+
+
+class TestSampleNamesWithSpaces(unittest.TestCase):
+    # A file that reached the bank by any road but this panel's own upload --
+    # the file manager, scp, an unzip -- keeps its name, and could not be saved
+    # while build_bank ran that name through sanitize_filename a second time.
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self._real = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self._real
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def test_a_sample_with_a_space_can_be_saved(self):
+        path = sfzbuilder.create_bank("Kit")
+        make_wav(os.path.join(path, "My Kick.wav"))
+        listed = [os.path.basename(f) for f in sfzbuilder.list_bank_samples("Kit")]
+        self.assertEqual(listed, ["My Kick.wav"])
+
+        result = sfzbuilder.build_bank("Kit", 36, [
+            {"sample": "My Kick.wav", "source": None, "loop_mode": "one_shot"},
+        ])
+        self.assertEqual(result["count"], 1)
+        with open(os.path.join(path, "Kit.sfz")) as fh:
+            self.assertIn("sample=My Kick.wav", fh.read())
+
+    def test_the_name_is_last_so_the_space_reads_whole(self):
+        # Everything after "sample=" to the end of the line is the name.
+        text = sfzbuilder.generate_sfz([
+            {"key": 36, "sample": "My Kick.wav", "volume": -6,
+             "pitch_keycenter": 60, "loop_mode": "one_shot"},
+        ])
+        self.assertTrue(text.rstrip("\n").endswith("sample=My Kick.wav"))
+
+    def test_a_name_that_holds_a_path_is_refused(self):
+        path = sfzbuilder.create_bank("Kit")
+        make_wav(os.path.join(path, "kick.wav"))
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 36, [
+                {"sample": "../../kick.wav", "source": None, "loop_mode": "one_shot"},
+            ])
+
+
+class TestRenameAndDelete(unittest.TestCase):
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self._real = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self._real
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def _build(self, bank, sample="kick.wav"):
+        path = sfzbuilder.create_bank(bank)
+        make_wav(os.path.join(path, sample))
+        sfzbuilder.build_bank(bank, 36, [
+            {"sample": sample, "source": None, "loop_mode": "one_shot"},
+        ])
+        return path
+
+    def test_rename_moves_the_directory(self):
+        self._build("Kit")
+        self.assertEqual(sfzbuilder.rename_bank("Kit", "Drumkit A"), "Drumkit_A")
+        self.assertEqual(sfzbuilder.list_banks(), ["Drumkit_A"])
+
+    def test_rename_renames_the_sfz_with_it(self):
+        # A plugin's file selector shows the basename, so an .sfz left under
+        # the old name would keep showing the old name until the next build.
+        self._build("Kit")
+        sfzbuilder.rename_bank("Kit", "Drumkit A")
+        path = sfzbuilder.bank_dir("Drumkit A")
+        self.assertEqual(sfzbuilder.find_sfz_files(path), ["Drumkit_A.sfz"])
+
+    def test_rename_keeps_the_samples_and_the_layout(self):
+        self._build("Kit")
+        sfzbuilder.rename_bank("Kit", "Foley")
+        state = sfzbuilder.load_bank("Foley")
+        self.assertEqual(state["base_note"], 36)
+        self.assertEqual(state["slots"][0]["sample"], "kick.wav")
+        listed = [os.path.basename(f) for f in sfzbuilder.list_bank_samples("Foley")]
+        self.assertEqual(listed, ["kick.wav"])
+
+    def test_rename_onto_an_existing_bank_is_refused(self):
+        self._build("Kit")
+        self._build("Foley")
+        with self.assertRaises(ValueError):
+            sfzbuilder.rename_bank("Kit", "Foley")
+        self.assertEqual(sfzbuilder.list_banks(), ["Foley", "Kit"])
+
+    def test_rename_to_the_same_name_is_not_an_error(self):
+        # "Kit A" and "Kit_A" sanitize to the same directory, so this is the
+        # path a rename that only changes a space takes.
+        self._build("Kit_A")
+        self.assertEqual(sfzbuilder.rename_bank("Kit_A", "Kit A"), "Kit_A")
+        self.assertEqual(sfzbuilder.list_banks(), ["Kit_A"])
+
+    def test_rename_of_a_bank_that_is_not_there(self):
+        with self.assertRaises(ValueError):
+            sfzbuilder.rename_bank("Gone", "Kit")
+
+    def test_rename_to_an_empty_name_is_refused(self):
+        self._build("Kit")
+        with self.assertRaises(ValueError):
+            sfzbuilder.rename_bank("Kit", "...")
+        self.assertEqual(sfzbuilder.list_banks(), ["Kit"])
+
+    def test_delete_removes_the_bank(self):
+        self._build("Kit")
+        self._build("Foley")
+        self.assertEqual(sfzbuilder.delete_bank("Kit"), "Kit")
+        self.assertEqual(sfzbuilder.list_banks(), ["Foley"])
+
+    def test_delete_of_a_bank_that_is_not_there(self):
+        with self.assertRaises(ValueError):
+            sfzbuilder.delete_bank("Gone")
+
+    def test_delete_does_not_follow_a_link_out_of_the_root(self):
+        # rmtree on a name that resolves outside the instruments directory
+        # would take the target with it.
+        outside = os.path.join(self.tmp, "keep")
+        make_wav(os.path.join(outside, "precious.wav"))
+        root = sfzbuilder.sfz_instruments_dir()
+        os.makedirs(root, exist_ok=True)
+        os.symlink(outside, os.path.join(root, "Escape"))
+        with self.assertRaises(ValueError):
+            sfzbuilder.delete_bank("Escape")
+        self.assertTrue(os.path.isfile(os.path.join(outside, "precious.wav")))
+
+
+class TestNoteCeiling(unittest.TestCase):
+    # A free pad needs no note, so free pads at the end must not stop a save.
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self._real = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.tmp
+        path = sfzbuilder.create_bank("Kit")
+        make_wav(os.path.join(path, "kick.wav"))
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self._real
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def _slot(self):
+        return {"sample": "kick.wav", "source": None, "loop_mode": "one_shot"}
+
+    def test_free_pads_past_the_last_note_are_allowed(self):
+        # Base 120 with 8 pads runs to note 127 on the last pad. Only the first
+        # holds a sample, so the other seven need nothing.
+        slots = [self._slot()] + [None] * 7
+        self.assertEqual(sfzbuilder.build_bank("Kit", 126, slots)["count"], 1)
+
+    def test_a_filled_pad_past_the_last_note_is_refused(self):
+        slots = [None] * 7 + [self._slot()]
+        with self.assertRaises(ValueError):
+            sfzbuilder.build_bank("Kit", 126, slots)
+
+    def test_the_last_note_itself_is_allowed(self):
+        slots = [None, self._slot()]
+        self.assertEqual(sfzbuilder.build_bank("Kit", 126, slots)["count"], 1)
+
+
+class TestExternalSource(unittest.TestCase):
+    # The path of an external sample comes from the browser. Nothing else checks
+    # it, so build_bank must, or a bank could copy any readable audio file.
+    def setUp(self):
+        self.tmp = tempfile.mkdtemp()
+        self.files = os.path.join(self.tmp, "user-files")
+        os.makedirs(self.files)
+        self._real = sfzbuilder.USER_FILES_DIR
+        sfzbuilder.USER_FILES_DIR = self.files
+        sfzbuilder.create_bank("Kit")
+
+    def tearDown(self):
+        sfzbuilder.USER_FILES_DIR = self._real
+        shutil.rmtree(self.tmp, ignore_errors=True)
+
+    def _build(self, source):
+        return sfzbuilder.build_bank("Kit", 36, [
+            {"sample": os.path.basename(source), "source": source,
+             "loop_mode": "one_shot"},
+        ])
+
+    def test_a_sample_under_user_files_is_copied(self):
+        source = os.path.join(self.files, "Loops", "kick.wav")
+        make_wav(source)
+        self.assertEqual(self._build(source)["count"], 1)
+        self.assertTrue(os.path.isfile(
+            os.path.join(sfzbuilder.bank_dir("Kit"), "kick.wav")))
+
+    def test_a_sample_from_anywhere_else_is_refused(self):
+        source = os.path.join(self.tmp, "elsewhere", "secret.wav")
+        make_wav(source)
+        with self.assertRaises(ValueError):
+            self._build(source)
+
+    def test_a_link_that_points_out_is_refused(self):
+        outside = os.path.join(self.tmp, "elsewhere", "secret.wav")
+        make_wav(outside)
+        link = os.path.join(self.files, "kick.wav")
+        os.symlink(outside, link)
+        with self.assertRaises(ValueError):
+            self._build(link)
+
+
+class TestExtensionsAgree(unittest.TestCase):
+    # model.js keeps its own copy of the list, because the panel removes the
+    # files the server would refuse before it sends a batch. The two lists have
+    # to say the same thing or the panel drops a file the server accepts.
+    def test_the_panel_knows_the_same_audio_types(self):
+        import re
+        here = os.path.dirname(os.path.abspath(__file__))
+        js = os.path.join(here, "..", "html", "js", "app", "sfzbuilder", "model.js")
+        with open(js) as fh:
+            text = fh.read()
+        body = re.search(r"export const AUDIO_EXTENSIONS = \[(.*?)\]", text, re.S)
+        self.assertIsNotNone(body, "AUDIO_EXTENSIONS is not in model.js any more")
+        found = tuple(re.findall(r"'([^']+)'", body.group(1)))
+        self.assertEqual(found, sfzbuilder.AUDIO_EXTENSIONS)
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..5e421a889
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "//": "Type checking only. See docs/frontend-architecture.md rule 4.4. No build output.",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true
+  },
+  "include": ["html/js/app/**/*.js"]
+}
diff --git a/utils/utils_lilv.cpp b/utils/utils_lilv.cpp
index 938cf96cb..541be19fa 100644
--- a/utils/utils_lilv.cpp
+++ b/utils/utils_lilv.cpp
@@ -2152,7 +2152,7 @@ const PluginInfo& _get_plugin_info(LilvWorld* const w,
     {
         if (LilvNode* const mntnr = lilv_world_get(w, lilv_nodes_get_first(nodes2), ns.doap_maintainer, nullptr))
         {
-            if (LilvNode* const hmpg = lilv_world_get(w, lilv_nodes_get_first(mntnr), ns.foaf_homepage, nullptr))
+            if (LilvNode* const hmpg = lilv_world_get(w, mntnr, ns.foaf_homepage, nullptr))
             {
                 info.author.homepage = strdup(lilv_node_as_string(hmpg));
                 lilv_node_free(hmpg);