From 97dae88860f07061f32e00df27ce0abaf892c8ca Mon Sep 17 00:00:00 2001
From: ChrisBeWithYou <christian.a.cowan@gmail.com>
Date: Fri, 26 Jun 2026 04:05:31 -0500
Subject: [PATCH] =?UTF-8?q?feat(highway=5F3d):=20colour=20theming=20?=
 =?UTF-8?q?=E2=80=94=20string=20presets=20+=20Background/Highway=20scene?=
 =?UTF-8?q?=20themes=20(#596)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(highway_3d): add one-click string-color presets

Adds 12 named string-color presets (Warm→Cool, Vivid, Colorblind-friendly,
Neon, Accessible, Warm Ember, Tape Deck, CRT Green/Amber, Pitch Ramp, Sunrise)
selectable from the 3D Highway settings panel.

Extends the existing core HWC (highway-color) subsystem in static/app.js with
HWC_PRESETS + applyHighwayStringPreset(), exposed on the existing facade as
window.feedBack.highwayColors.{presets, applyPreset}. The plugin settings page
renders the preset buttons from that core list and refreshes the per-string
pickers on apply. Purely additive — stock behavior is unchanged.

Scope: core static/app.js (the shared HWC facade both highways consume) plus the
highway_3d plugin's settings.html / screen.js / CLAUDE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Q9BpGYqUaga9ZJyS3dDPq

* fix(highway_3d): address review of colour-theming PR

- Rebuild assets/plugin.css so the new `flex-wrap` (preset row) and
  `text-[10px]` (theme-dropdown helper) Tailwind classes are actually
  compiled, and bump plugin.json 3.26.0 -> 3.27.0 so the <link>'s ?v=
  cache-buster fetches the fresh CSS (per the plugin's build rule).
- Replace the mirror-at-every-read hwTheme migration with a one-time
  backfill (persist hwTheme := bgTheme on first load, no emit). The two
  scene-color axes are now genuinely independent: changing the Background
  dropdown no longer silently retints the Highway surface/lane, and the
  rendered highway can't disagree with the Highway dropdown value.
- Collapse the duplicated theme id-set in settings.html (two identical
  <option> lists + VALID_BG_THEMES) into a single SCENE_THEMES source the
  dropdowns and validator are generated from; sync points 4 -> 2.
- Update CLAUDE.md to document the backfill + reduced sync contract.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: byrongamatos <xasiklas@gmail.com>
---
 plugins/highway_3d/CLAUDE.md         |  14 +-
 plugins/highway_3d/assets/plugin.css |   2 +-
 plugins/highway_3d/plugin.json       |   2 +-
 plugins/highway_3d/screen.js         | 191 ++++++++++++++++++++++++++-
 plugins/highway_3d/settings.html     | 119 ++++++++++++++++-
 static/app.js                        |  98 ++++++++++++++
 6 files changed, 415 insertions(+), 11 deletions(-)

diff --git a/plugins/highway_3d/CLAUDE.md b/plugins/highway_3d/CLAUDE.md
index 9a9b824..de8c6d4 100644
--- a/plugins/highway_3d/CLAUDE.md
+++ b/plugins/highway_3d/CLAUDE.md
@@ -108,9 +108,19 @@ Each entry names the function or banner you should grep for, plus key sub-blocks
 - **Beat lines** (downbeats highlighted) → `update()`, `// ── Beat lines ──` block. `mBeatM` (full opacity 0.25) for measure starts, `mBeatQ` (0.07) for other beats.
 - **Section labels** → `update()`, `// ── Section labels ──` block. Cyan (`#00cccc`) sprite at fret 12, above the highest string.
 
+### Scene colors (two independent axes: Background + Highway)
+- **Scene-color themes** → `BG_THEMES` table near the top of `createFactory()`. One combined table is the single source of truth, but it drives **two independent axes that share the same id-set**:
+  - **Background axis** — setting key `bgTheme`, setter `window.h3dBgSetBgTheme`, state `bgThemeId`. Owns `clear` (WebGL clear color) + `fog`.
+  - **Highway axis** — setting key `hwTheme`, setter `window.h3dBgSetHwTheme`, state `hwThemeId`. Owns `board` (fretboard/highway-surface plane) + optional `lane`/`laneDim` (the lit lane strip).
+  Any background id can mix with any highway id; picking the same id in both gives the original "matched" look. Per-axis accessors are `_bgBackgroundColors(id)` / `_bgHighwayColors(id)` (both alias `_bgThemeColors`). Both axes default to `'default'` (byte-identical to the original look).
+- **Applying a theme** → `_applyBgTheme()`. Background half sets clear+fog from `bgThemeId` (skipped under the venue scene); highway half sets the board plane + lane materials (`mLaneOdd`/`mLaneEven`) from `hwThemeId`. Re-run on init, `buildBoard()`, and the settings listener (which fires for **both** `bgTheme` and `hwTheme`), so changing either dropdown retints only its half live.
+- **Backward-compat migration** → `_bgLoadSettings()`: the first time it loads with no stored `hwTheme` (`_bgHasStored` false), it seeds `hwThemeId` from `bgThemeId` **and persists `hwTheme` once** (a one-time backfill, written without `_bgEmitChange`). So a pre-split single-`bgTheme` pick is byte-identical right after the upgrade, and from then on the two axes are fully independent — changing the Background dropdown never drags the Highway surface, and the settings UI's Highway value can't disagree with what's rendered. settings.html shows the same first-load value via `storedHwTheme == null ? bgTheme : coerceHwTheme(...)`.
+- **Adding/removing a theme** → edit `BG_THEMES` (the colors) AND `settings.html`'s `SCENE_THEMES` array (the `{id,label}` list — the single source the two dropdowns' `<option>`s and the `VALID_BG_THEMES` validator are both generated from). Keep the two id-sets aligned.
+
 ### Highway lane (the highlighted strip under active frets)
 - **Lane drawing** → `update()`, `// ── Dynamic highway lane ──` block. `pLane` is a single quad on the fretboard plane; `pLaneDivider` is thin vertical lines at each fret inside the lane. Width keys off the active-fret range; min width ≈ 4 frets.
-- **Lane intensity** → `highwayIntensity` accumulated from upcoming notes (further notes dim it, near notes light it). `_laneTargetColor = 0x4488ff` (set in `initScene()`) is the "lit" color, blended toward from `0x112233`.
+- **Lane intensity** → `highwayIntensity` accumulated from upcoming notes (further notes dim it, near notes light it).
+- **Lane color** → the lit quad color is `mLaneOdd.color` (stock `HWY_LANE_STRIPE_ODD_HEX = 0x103B5C`), the dimmer alternating row `mLaneEven.color` (`HWY_LANE_STRIPE_EVEN_HEX = 0x08283C`). These are now **theme-aware**: `_applyBgTheme()` recolors them from the active HIGHWAY theme's optional `lane`/`laneDim` fields, falling back to the stock hexes when a highway theme omits them. (`_laneTargetColor`, set in `initScene()`, is kept in sync with the lit color but has no live consumer today.)
 
 ### Lyrics & overlays
 - **Lyrics overlay** → `drawLyrics()`. 2D canvas, top centre, semi-transparent rounded background, syllable-level highlighting (current syllable in white, played in muted, upcoming in dim).
@@ -201,7 +211,7 @@ The eight-color palette `S_COL` is the single source of truth for per-string col
 
 If a planned color-palette feature lands (issue #10), expect it to swap the palette source array but keep this single-array indirection. Anything that hardcodes color today will break that swap; flag it during review.
 
-Non-string colors (lane target `0x4488ff`, fret-row label colors `#ffe84d` / `#9ab8cc`, fret-dot color `0x556677`, lyrics box rgba, chord-name gold `#e8d080`, etc.) are scattered as literals — that's intentional for now, since they're scene-wide accents rather than per-string. Pulling them into named constants is fine if you're already in that area.
+Non-string colors (the stock lane hexes `HWY_LANE_STRIPE_ODD_HEX`/`_EVEN_HEX` — now overridable per Highway theme, see "Scene colors" above; fret-row label colors `#ffe84d` / `#9ab8cc`, fret-dot color `0x556677`, lyrics box rgba, chord-name gold `#e8d080`, etc.) are scattered as literals — that's intentional for now, since they're scene-wide accents rather than per-string. Pulling them into named constants is fine if you're already in that area.
 
 ## Tweaking text-sprite styling
 
diff --git a/plugins/highway_3d/assets/plugin.css b/plugins/highway_3d/assets/plugin.css
index 69e6893..e217cc5 100644
--- a/plugins/highway_3d/assets/plugin.css
+++ b/plugins/highway_3d/assets/plugin.css
@@ -1 +1 @@
-.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-6{margin-left:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-9{height:2.25rem}.w-24{width:6rem}.w-full{width:100%}.max-w-\[12rem\]{max-width:12rem}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-accent{--tw-border-opacity:1;border-color:rgb(64 128 224/var(--tw-border-opacity,1))}.border-accent-dark{--tw-border-opacity:1;border-color:rgb(32 96 176/var(--tw-border-opacity,1))}.border-accent-dark\/0{border-color:rgba(32,96,176,0)}.border-accent-dark\/10{border-color:rgba(32,96,176,.1)}.border-accent-dark\/100{border-color:#2060b0}.border-accent-dark\/15{border-color:rgba(32,96,176,.15)}.border-accent-dark\/20{border-color:rgba(32,96,176,.2)}.border-accent-dark\/25{border-color:rgba(32,96,176,.25)}.border-accent-dark\/30{border-color:rgba(32,96,176,.3)}.border-accent-dark\/35{border-color:rgba(32,96,176,.35)}.border-accent-dark\/40{border-color:rgba(32,96,176,.4)}.border-accent-dark\/45{border-color:rgba(32,96,176,.45)}.border-accent-dark\/5{border-color:rgba(32,96,176,.05)}.border-accent-dark\/50{border-color:rgba(32,96,176,.5)}.border-accent-dark\/55{border-color:rgba(32,96,176,.55)}.border-accent-dark\/60{border-color:rgba(32,96,176,.6)}.border-accent-dark\/65{border-color:rgba(32,96,176,.65)}.border-accent-dark\/70{border-color:rgba(32,96,176,.7)}.border-accent-dark\/75{border-color:rgba(32,96,176,.75)}.border-accent-dark\/80{border-color:rgba(32,96,176,.8)}.border-accent-dark\/85{border-color:rgba(32,96,176,.85)}.border-accent-dark\/90{border-color:rgba(32,96,176,.9)}.border-accent-dark\/95{border-color:rgba(32,96,176,.95)}.border-accent-light{--tw-border-opacity:1;border-color:rgb(96 160 255/var(--tw-border-opacity,1))}.border-accent-light\/0{border-color:rgba(96,160,255,0)}.border-accent-light\/10{border-color:rgba(96,160,255,.1)}.border-accent-light\/100{border-color:#60a0ff}.border-accent-light\/15{border-color:rgba(96,160,255,.15)}.border-accent-light\/20{border-color:rgba(96,160,255,.2)}.border-accent-light\/25{border-color:rgba(96,160,255,.25)}.border-accent-light\/30{border-color:rgba(96,160,255,.3)}.border-accent-light\/35{border-color:rgba(96,160,255,.35)}.border-accent-light\/40{border-color:rgba(96,160,255,.4)}.border-accent-light\/45{border-color:rgba(96,160,255,.45)}.border-accent-light\/5{border-color:rgba(96,160,255,.05)}.border-accent-light\/50{border-color:rgba(96,160,255,.5)}.border-accent-light\/55{border-color:rgba(96,160,255,.55)}.border-accent-light\/60{border-color:rgba(96,160,255,.6)}.border-accent-light\/65{border-color:rgba(96,160,255,.65)}.border-accent-light\/70{border-color:rgba(96,160,255,.7)}.border-accent-light\/75{border-color:rgba(96,160,255,.75)}.border-accent-light\/80{border-color:rgba(96,160,255,.8)}.border-accent-light\/85{border-color:rgba(96,160,255,.85)}.border-accent-light\/90{border-color:rgba(96,160,255,.9)}.border-accent-light\/95{border-color:rgba(96,160,255,.95)}.border-dark-500{--tw-border-opacity:1;border-color:rgb(30 30 58/var(--tw-border-opacity,1))}.border-dark-500\/0{border-color:rgba(30,30,58,0)}.border-dark-500\/10{border-color:rgba(30,30,58,.1)}.border-dark-500\/100{border-color:#1e1e3a}.border-dark-500\/15{border-color:rgba(30,30,58,.15)}.border-dark-500\/20{border-color:rgba(30,30,58,.2)}.border-dark-500\/25{border-color:rgba(30,30,58,.25)}.border-dark-500\/30{border-color:rgba(30,30,58,.3)}.border-dark-500\/35{border-color:rgba(30,30,58,.35)}.border-dark-500\/40{border-color:rgba(30,30,58,.4)}.border-dark-500\/45{border-color:rgba(30,30,58,.45)}.border-dark-500\/5{border-color:rgba(30,30,58,.05)}.border-dark-500\/50{border-color:rgba(30,30,58,.5)}.border-dark-500\/55{border-color:rgba(30,30,58,.55)}.border-dark-500\/60{border-color:rgba(30,30,58,.6)}.border-dark-500\/65{border-color:rgba(30,30,58,.65)}.border-dark-500\/70{border-color:rgba(30,30,58,.7)}.border-dark-500\/75{border-color:rgba(30,30,58,.75)}.border-dark-500\/80{border-color:rgba(30,30,58,.8)}.border-dark-500\/85{border-color:rgba(30,30,58,.85)}.border-dark-500\/90{border-color:rgba(30,30,58,.9)}.border-dark-500\/95{border-color:rgba(30,30,58,.95)}.border-dark-600{--tw-border-opacity:1;border-color:rgb(24 24 48/var(--tw-border-opacity,1))}.border-dark-600\/0{border-color:rgba(24,24,48,0)}.border-dark-600\/10{border-color:rgba(24,24,48,.1)}.border-dark-600\/100{border-color:#181830}.border-dark-600\/15{border-color:rgba(24,24,48,.15)}.border-dark-600\/20{border-color:rgba(24,24,48,.2)}.border-dark-600\/25{border-color:rgba(24,24,48,.25)}.border-dark-600\/30{border-color:rgba(24,24,48,.3)}.border-dark-600\/35{border-color:rgba(24,24,48,.35)}.border-dark-600\/40{border-color:rgba(24,24,48,.4)}.border-dark-600\/45{border-color:rgba(24,24,48,.45)}.border-dark-600\/5{border-color:rgba(24,24,48,.05)}.border-dark-600\/50{border-color:rgba(24,24,48,.5)}.border-dark-600\/55{border-color:rgba(24,24,48,.55)}.border-dark-600\/60{border-color:rgba(24,24,48,.6)}.border-dark-600\/65{border-color:rgba(24,24,48,.65)}.border-dark-600\/70{border-color:rgba(24,24,48,.7)}.border-dark-600\/75{border-color:rgba(24,24,48,.75)}.border-dark-600\/80{border-color:rgba(24,24,48,.8)}.border-dark-600\/85{border-color:rgba(24,24,48,.85)}.border-dark-600\/90{border-color:rgba(24,24,48,.9)}.border-dark-600\/95{border-color:rgba(24,24,48,.95)}.border-dark-700{--tw-border-opacity:1;border-color:rgb(16 16 30/var(--tw-border-opacity,1))}.border-dark-700\/0{border-color:rgba(16,16,30,0)}.border-dark-700\/10{border-color:rgba(16,16,30,.1)}.border-dark-700\/100{border-color:#10101e}.border-dark-700\/15{border-color:rgba(16,16,30,.15)}.border-dark-700\/20{border-color:rgba(16,16,30,.2)}.border-dark-700\/25{border-color:rgba(16,16,30,.25)}.border-dark-700\/30{border-color:rgba(16,16,30,.3)}.border-dark-700\/35{border-color:rgba(16,16,30,.35)}.border-dark-700\/40{border-color:rgba(16,16,30,.4)}.border-dark-700\/45{border-color:rgba(16,16,30,.45)}.border-dark-700\/5{border-color:rgba(16,16,30,.05)}.border-dark-700\/50{border-color:rgba(16,16,30,.5)}.border-dark-700\/55{border-color:rgba(16,16,30,.55)}.border-dark-700\/60{border-color:rgba(16,16,30,.6)}.border-dark-700\/65{border-color:rgba(16,16,30,.65)}.border-dark-700\/70{border-color:rgba(16,16,30,.7)}.border-dark-700\/75{border-color:rgba(16,16,30,.75)}.border-dark-700\/80{border-color:rgba(16,16,30,.8)}.border-dark-700\/85{border-color:rgba(16,16,30,.85)}.border-dark-700\/90{border-color:rgba(16,16,30,.9)}.border-dark-700\/95{border-color:rgba(16,16,30,.95)}.border-dark-800{--tw-border-opacity:1;border-color:rgb(10 10 18/var(--tw-border-opacity,1))}.border-dark-800\/0{border-color:rgba(10,10,18,0)}.border-dark-800\/10{border-color:rgba(10,10,18,.1)}.border-dark-800\/100{border-color:#0a0a12}.border-dark-800\/15{border-color:rgba(10,10,18,.15)}.border-dark-800\/20{border-color:rgba(10,10,18,.2)}.border-dark-800\/25{border-color:rgba(10,10,18,.25)}.border-dark-800\/30{border-color:rgba(10,10,18,.3)}.border-dark-800\/35{border-color:rgba(10,10,18,.35)}.border-dark-800\/40{border-color:rgba(10,10,18,.4)}.border-dark-800\/45{border-color:rgba(10,10,18,.45)}.border-dark-800\/5{border-color:rgba(10,10,18,.05)}.border-dark-800\/50{border-color:rgba(10,10,18,.5)}.border-dark-800\/55{border-color:rgba(10,10,18,.55)}.border-dark-800\/60{border-color:rgba(10,10,18,.6)}.border-dark-800\/65{border-color:rgba(10,10,18,.65)}.border-dark-800\/70{border-color:rgba(10,10,18,.7)}.border-dark-800\/75{border-color:rgba(10,10,18,.75)}.border-dark-800\/80{border-color:rgba(10,10,18,.8)}.border-dark-800\/85{border-color:rgba(10,10,18,.85)}.border-dark-800\/90{border-color:rgba(10,10,18,.9)}.border-dark-800\/95{border-color:rgba(10,10,18,.95)}.border-dark-900{--tw-border-opacity:1;border-color:rgb(5 5 8/var(--tw-border-opacity,1))}.border-dark-900\/0{border-color:rgba(5,5,8,0)}.border-dark-900\/10{border-color:rgba(5,5,8,.1)}.border-dark-900\/100{border-color:#050508}.border-dark-900\/15{border-color:rgba(5,5,8,.15)}.border-dark-900\/20{border-color:rgba(5,5,8,.2)}.border-dark-900\/25{border-color:rgba(5,5,8,.25)}.border-dark-900\/30{border-color:rgba(5,5,8,.3)}.border-dark-900\/35{border-color:rgba(5,5,8,.35)}.border-dark-900\/40{border-color:rgba(5,5,8,.4)}.border-dark-900\/45{border-color:rgba(5,5,8,.45)}.border-dark-900\/5{border-color:rgba(5,5,8,.05)}.border-dark-900\/50{border-color:rgba(5,5,8,.5)}.border-dark-900\/55{border-color:rgba(5,5,8,.55)}.border-dark-900\/60{border-color:rgba(5,5,8,.6)}.border-dark-900\/65{border-color:rgba(5,5,8,.65)}.border-dark-900\/70{border-color:rgba(5,5,8,.7)}.border-dark-900\/75{border-color:rgba(5,5,8,.75)}.border-dark-900\/80{border-color:rgba(5,5,8,.8)}.border-dark-900\/85{border-color:rgba(5,5,8,.85)}.border-dark-900\/90{border-color:rgba(5,5,8,.9)}.border-dark-900\/95{border-color:rgba(5,5,8,.95)}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(64 128 224/var(--tw-bg-opacity,1))}.bg-accent-dark{--tw-bg-opacity:1;background-color:rgb(32 96 176/var(--tw-bg-opacity,1))}.bg-accent-dark\/0{background-color:rgba(32,96,176,0)}.bg-accent-dark\/10{background-color:rgba(32,96,176,.1)}.bg-accent-dark\/100{background-color:#2060b0}.bg-accent-dark\/15{background-color:rgba(32,96,176,.15)}.bg-accent-dark\/20{background-color:rgba(32,96,176,.2)}.bg-accent-dark\/25{background-color:rgba(32,96,176,.25)}.bg-accent-dark\/30{background-color:rgba(32,96,176,.3)}.bg-accent-dark\/35{background-color:rgba(32,96,176,.35)}.bg-accent-dark\/40{background-color:rgba(32,96,176,.4)}.bg-accent-dark\/45{background-color:rgba(32,96,176,.45)}.bg-accent-dark\/5{background-color:rgba(32,96,176,.05)}.bg-accent-dark\/50{background-color:rgba(32,96,176,.5)}.bg-accent-dark\/55{background-color:rgba(32,96,176,.55)}.bg-accent-dark\/60{background-color:rgba(32,96,176,.6)}.bg-accent-dark\/65{background-color:rgba(32,96,176,.65)}.bg-accent-dark\/70{background-color:rgba(32,96,176,.7)}.bg-accent-dark\/75{background-color:rgba(32,96,176,.75)}.bg-accent-dark\/80{background-color:rgba(32,96,176,.8)}.bg-accent-dark\/85{background-color:rgba(32,96,176,.85)}.bg-accent-dark\/90{background-color:rgba(32,96,176,.9)}.bg-accent-dark\/95{background-color:rgba(32,96,176,.95)}.bg-accent-light{--tw-bg-opacity:1;background-color:rgb(96 160 255/var(--tw-bg-opacity,1))}.bg-accent-light\/0{background-color:rgba(96,160,255,0)}.bg-accent-light\/10{background-color:rgba(96,160,255,.1)}.bg-accent-light\/100{background-color:#60a0ff}.bg-accent-light\/15{background-color:rgba(96,160,255,.15)}.bg-accent-light\/20{background-color:rgba(96,160,255,.2)}.bg-accent-light\/25{background-color:rgba(96,160,255,.25)}.bg-accent-light\/30{background-color:rgba(96,160,255,.3)}.bg-accent-light\/35{background-color:rgba(96,160,255,.35)}.bg-accent-light\/40{background-color:rgba(96,160,255,.4)}.bg-accent-light\/45{background-color:rgba(96,160,255,.45)}.bg-accent-light\/5{background-color:rgba(96,160,255,.05)}.bg-accent-light\/50{background-color:rgba(96,160,255,.5)}.bg-accent-light\/55{background-color:rgba(96,160,255,.55)}.bg-accent-light\/60{background-color:rgba(96,160,255,.6)}.bg-accent-light\/65{background-color:rgba(96,160,255,.65)}.bg-accent-light\/70{background-color:rgba(96,160,255,.7)}.bg-accent-light\/75{background-color:rgba(96,160,255,.75)}.bg-accent-light\/80{background-color:rgba(96,160,255,.8)}.bg-accent-light\/85{background-color:rgba(96,160,255,.85)}.bg-accent-light\/90{background-color:rgba(96,160,255,.9)}.bg-accent-light\/95{background-color:rgba(96,160,255,.95)}.bg-dark-500{--tw-bg-opacity:1;background-color:rgb(30 30 58/var(--tw-bg-opacity,1))}.bg-dark-500\/0{background-color:rgba(30,30,58,0)}.bg-dark-500\/10{background-color:rgba(30,30,58,.1)}.bg-dark-500\/100{background-color:#1e1e3a}.bg-dark-500\/15{background-color:rgba(30,30,58,.15)}.bg-dark-500\/20{background-color:rgba(30,30,58,.2)}.bg-dark-500\/25{background-color:rgba(30,30,58,.25)}.bg-dark-500\/30{background-color:rgba(30,30,58,.3)}.bg-dark-500\/35{background-color:rgba(30,30,58,.35)}.bg-dark-500\/40{background-color:rgba(30,30,58,.4)}.bg-dark-500\/45{background-color:rgba(30,30,58,.45)}.bg-dark-500\/5{background-color:rgba(30,30,58,.05)}.bg-dark-500\/50{background-color:rgba(30,30,58,.5)}.bg-dark-500\/55{background-color:rgba(30,30,58,.55)}.bg-dark-500\/60{background-color:rgba(30,30,58,.6)}.bg-dark-500\/65{background-color:rgba(30,30,58,.65)}.bg-dark-500\/70{background-color:rgba(30,30,58,.7)}.bg-dark-500\/75{background-color:rgba(30,30,58,.75)}.bg-dark-500\/80{background-color:rgba(30,30,58,.8)}.bg-dark-500\/85{background-color:rgba(30,30,58,.85)}.bg-dark-500\/90{background-color:rgba(30,30,58,.9)}.bg-dark-500\/95{background-color:rgba(30,30,58,.95)}.bg-dark-600{--tw-bg-opacity:1;background-color:rgb(24 24 48/var(--tw-bg-opacity,1))}.bg-dark-600\/0{background-color:rgba(24,24,48,0)}.bg-dark-600\/10{background-color:rgba(24,24,48,.1)}.bg-dark-600\/100{background-color:#181830}.bg-dark-600\/15{background-color:rgba(24,24,48,.15)}.bg-dark-600\/20{background-color:rgba(24,24,48,.2)}.bg-dark-600\/25{background-color:rgba(24,24,48,.25)}.bg-dark-600\/30{background-color:rgba(24,24,48,.3)}.bg-dark-600\/35{background-color:rgba(24,24,48,.35)}.bg-dark-600\/40{background-color:rgba(24,24,48,.4)}.bg-dark-600\/45{background-color:rgba(24,24,48,.45)}.bg-dark-600\/5{background-color:rgba(24,24,48,.05)}.bg-dark-600\/50{background-color:rgba(24,24,48,.5)}.bg-dark-600\/55{background-color:rgba(24,24,48,.55)}.bg-dark-600\/60{background-color:rgba(24,24,48,.6)}.bg-dark-600\/65{background-color:rgba(24,24,48,.65)}.bg-dark-600\/70{background-color:rgba(24,24,48,.7)}.bg-dark-600\/75{background-color:rgba(24,24,48,.75)}.bg-dark-600\/80{background-color:rgba(24,24,48,.8)}.bg-dark-600\/85{background-color:rgba(24,24,48,.85)}.bg-dark-600\/90{background-color:rgba(24,24,48,.9)}.bg-dark-600\/95{background-color:rgba(24,24,48,.95)}.bg-dark-700{--tw-bg-opacity:1;background-color:rgb(16 16 30/var(--tw-bg-opacity,1))}.bg-dark-700\/0{background-color:rgba(16,16,30,0)}.bg-dark-700\/10{background-color:rgba(16,16,30,.1)}.bg-dark-700\/100{background-color:#10101e}.bg-dark-700\/15{background-color:rgba(16,16,30,.15)}.bg-dark-700\/20{background-color:rgba(16,16,30,.2)}.bg-dark-700\/25{background-color:rgba(16,16,30,.25)}.bg-dark-700\/30{background-color:rgba(16,16,30,.3)}.bg-dark-700\/35{background-color:rgba(16,16,30,.35)}.bg-dark-700\/40{background-color:rgba(16,16,30,.4)}.bg-dark-700\/45{background-color:rgba(16,16,30,.45)}.bg-dark-700\/5{background-color:rgba(16,16,30,.05)}.bg-dark-700\/50{background-color:rgba(16,16,30,.5)}.bg-dark-700\/55{background-color:rgba(16,16,30,.55)}.bg-dark-700\/60{background-color:rgba(16,16,30,.6)}.bg-dark-700\/65{background-color:rgba(16,16,30,.65)}.bg-dark-700\/70{background-color:rgba(16,16,30,.7)}.bg-dark-700\/75{background-color:rgba(16,16,30,.75)}.bg-dark-700\/80{background-color:rgba(16,16,30,.8)}.bg-dark-700\/85{background-color:rgba(16,16,30,.85)}.bg-dark-700\/90{background-color:rgba(16,16,30,.9)}.bg-dark-700\/95{background-color:rgba(16,16,30,.95)}.bg-dark-800{--tw-bg-opacity:1;background-color:rgb(10 10 18/var(--tw-bg-opacity,1))}.bg-dark-800\/0{background-color:rgba(10,10,18,0)}.bg-dark-800\/10{background-color:rgba(10,10,18,.1)}.bg-dark-800\/100{background-color:#0a0a12}.bg-dark-800\/15{background-color:rgba(10,10,18,.15)}.bg-dark-800\/20{background-color:rgba(10,10,18,.2)}.bg-dark-800\/25{background-color:rgba(10,10,18,.25)}.bg-dark-800\/30{background-color:rgba(10,10,18,.3)}.bg-dark-800\/35{background-color:rgba(10,10,18,.35)}.bg-dark-800\/40{background-color:rgba(10,10,18,.4)}.bg-dark-800\/45{background-color:rgba(10,10,18,.45)}.bg-dark-800\/5{background-color:rgba(10,10,18,.05)}.bg-dark-800\/50{background-color:rgba(10,10,18,.5)}.bg-dark-800\/55{background-color:rgba(10,10,18,.55)}.bg-dark-800\/60{background-color:rgba(10,10,18,.6)}.bg-dark-800\/65{background-color:rgba(10,10,18,.65)}.bg-dark-800\/70{background-color:rgba(10,10,18,.7)}.bg-dark-800\/75{background-color:rgba(10,10,18,.75)}.bg-dark-800\/80{background-color:rgba(10,10,18,.8)}.bg-dark-800\/85{background-color:rgba(10,10,18,.85)}.bg-dark-800\/90{background-color:rgba(10,10,18,.9)}.bg-dark-800\/95{background-color:rgba(10,10,18,.95)}.bg-dark-900{--tw-bg-opacity:1;background-color:rgb(5 5 8/var(--tw-bg-opacity,1))}.bg-dark-900\/0{background-color:rgba(5,5,8,0)}.bg-dark-900\/10{background-color:rgba(5,5,8,.1)}.bg-dark-900\/100{background-color:#050508}.bg-dark-900\/15{background-color:rgba(5,5,8,.15)}.bg-dark-900\/20{background-color:rgba(5,5,8,.2)}.bg-dark-900\/25{background-color:rgba(5,5,8,.25)}.bg-dark-900\/30{background-color:rgba(5,5,8,.3)}.bg-dark-900\/35{background-color:rgba(5,5,8,.35)}.bg-dark-900\/40{background-color:rgba(5,5,8,.4)}.bg-dark-900\/45{background-color:rgba(5,5,8,.45)}.bg-dark-900\/5{background-color:rgba(5,5,8,.05)}.bg-dark-900\/50{background-color:rgba(5,5,8,.5)}.bg-dark-900\/55{background-color:rgba(5,5,8,.55)}.bg-dark-900\/60{background-color:rgba(5,5,8,.6)}.bg-dark-900\/65{background-color:rgba(5,5,8,.65)}.bg-dark-900\/70{background-color:rgba(5,5,8,.7)}.bg-dark-900\/75{background-color:rgba(5,5,8,.75)}.bg-dark-900\/80{background-color:rgba(5,5,8,.8)}.bg-dark-900\/85{background-color:rgba(5,5,8,.85)}.bg-dark-900\/90{background-color:rgba(5,5,8,.9)}.bg-dark-900\/95{background-color:rgba(5,5,8,.95)}.p-0\.5{padding:.125rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.text-\[10px\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.lowercase{text-transform:lowercase}.italic{font-style:italic}.text-accent{--tw-text-opacity:1;color:rgb(64 128 224/var(--tw-text-opacity,1))}.text-accent-dark{--tw-text-opacity:1;color:rgb(32 96 176/var(--tw-text-opacity,1))}.text-accent-dark\/0{color:rgba(32,96,176,0)}.text-accent-dark\/10{color:rgba(32,96,176,.1)}.text-accent-dark\/100{color:#2060b0}.text-accent-dark\/15{color:rgba(32,96,176,.15)}.text-accent-dark\/20{color:rgba(32,96,176,.2)}.text-accent-dark\/25{color:rgba(32,96,176,.25)}.text-accent-dark\/30{color:rgba(32,96,176,.3)}.text-accent-dark\/35{color:rgba(32,96,176,.35)}.text-accent-dark\/40{color:rgba(32,96,176,.4)}.text-accent-dark\/45{color:rgba(32,96,176,.45)}.text-accent-dark\/5{color:rgba(32,96,176,.05)}.text-accent-dark\/50{color:rgba(32,96,176,.5)}.text-accent-dark\/55{color:rgba(32,96,176,.55)}.text-accent-dark\/60{color:rgba(32,96,176,.6)}.text-accent-dark\/65{color:rgba(32,96,176,.65)}.text-accent-dark\/70{color:rgba(32,96,176,.7)}.text-accent-dark\/75{color:rgba(32,96,176,.75)}.text-accent-dark\/80{color:rgba(32,96,176,.8)}.text-accent-dark\/85{color:rgba(32,96,176,.85)}.text-accent-dark\/90{color:rgba(32,96,176,.9)}.text-accent-dark\/95{color:rgba(32,96,176,.95)}.text-accent-light{--tw-text-opacity:1;color:rgb(96 160 255/var(--tw-text-opacity,1))}.text-accent-light\/0{color:rgba(96,160,255,0)}.text-accent-light\/10{color:rgba(96,160,255,.1)}.text-accent-light\/100{color:#60a0ff}.text-accent-light\/15{color:rgba(96,160,255,.15)}.text-accent-light\/20{color:rgba(96,160,255,.2)}.text-accent-light\/25{color:rgba(96,160,255,.25)}.text-accent-light\/30{color:rgba(96,160,255,.3)}.text-accent-light\/35{color:rgba(96,160,255,.35)}.text-accent-light\/40{color:rgba(96,160,255,.4)}.text-accent-light\/45{color:rgba(96,160,255,.45)}.text-accent-light\/5{color:rgba(96,160,255,.05)}.text-accent-light\/50{color:rgba(96,160,255,.5)}.text-accent-light\/55{color:rgba(96,160,255,.55)}.text-accent-light\/60{color:rgba(96,160,255,.6)}.text-accent-light\/65{color:rgba(96,160,255,.65)}.text-accent-light\/70{color:rgba(96,160,255,.7)}.text-accent-light\/75{color:rgba(96,160,255,.75)}.text-accent-light\/80{color:rgba(96,160,255,.8)}.text-accent-light\/85{color:rgba(96,160,255,.85)}.text-accent-light\/90{color:rgba(96,160,255,.9)}.text-accent-light\/95{color:rgba(96,160,255,.95)}.text-dark-500{--tw-text-opacity:1;color:rgb(30 30 58/var(--tw-text-opacity,1))}.text-dark-500\/0{color:rgba(30,30,58,0)}.text-dark-500\/10{color:rgba(30,30,58,.1)}.text-dark-500\/100{color:#1e1e3a}.text-dark-500\/15{color:rgba(30,30,58,.15)}.text-dark-500\/20{color:rgba(30,30,58,.2)}.text-dark-500\/25{color:rgba(30,30,58,.25)}.text-dark-500\/30{color:rgba(30,30,58,.3)}.text-dark-500\/35{color:rgba(30,30,58,.35)}.text-dark-500\/40{color:rgba(30,30,58,.4)}.text-dark-500\/45{color:rgba(30,30,58,.45)}.text-dark-500\/5{color:rgba(30,30,58,.05)}.text-dark-500\/50{color:rgba(30,30,58,.5)}.text-dark-500\/55{color:rgba(30,30,58,.55)}.text-dark-500\/60{color:rgba(30,30,58,.6)}.text-dark-500\/65{color:rgba(30,30,58,.65)}.text-dark-500\/70{color:rgba(30,30,58,.7)}.text-dark-500\/75{color:rgba(30,30,58,.75)}.text-dark-500\/80{color:rgba(30,30,58,.8)}.text-dark-500\/85{color:rgba(30,30,58,.85)}.text-dark-500\/90{color:rgba(30,30,58,.9)}.text-dark-500\/95{color:rgba(30,30,58,.95)}.text-dark-600{--tw-text-opacity:1;color:rgb(24 24 48/var(--tw-text-opacity,1))}.text-dark-600\/0{color:rgba(24,24,48,0)}.text-dark-600\/10{color:rgba(24,24,48,.1)}.text-dark-600\/100{color:#181830}.text-dark-600\/15{color:rgba(24,24,48,.15)}.text-dark-600\/20{color:rgba(24,24,48,.2)}.text-dark-600\/25{color:rgba(24,24,48,.25)}.text-dark-600\/30{color:rgba(24,24,48,.3)}.text-dark-600\/35{color:rgba(24,24,48,.35)}.text-dark-600\/40{color:rgba(24,24,48,.4)}.text-dark-600\/45{color:rgba(24,24,48,.45)}.text-dark-600\/5{color:rgba(24,24,48,.05)}.text-dark-600\/50{color:rgba(24,24,48,.5)}.text-dark-600\/55{color:rgba(24,24,48,.55)}.text-dark-600\/60{color:rgba(24,24,48,.6)}.text-dark-600\/65{color:rgba(24,24,48,.65)}.text-dark-600\/70{color:rgba(24,24,48,.7)}.text-dark-600\/75{color:rgba(24,24,48,.75)}.text-dark-600\/80{color:rgba(24,24,48,.8)}.text-dark-600\/85{color:rgba(24,24,48,.85)}.text-dark-600\/90{color:rgba(24,24,48,.9)}.text-dark-600\/95{color:rgba(24,24,48,.95)}.text-dark-700{--tw-text-opacity:1;color:rgb(16 16 30/var(--tw-text-opacity,1))}.text-dark-700\/0{color:rgba(16,16,30,0)}.text-dark-700\/10{color:rgba(16,16,30,.1)}.text-dark-700\/100{color:#10101e}.text-dark-700\/15{color:rgba(16,16,30,.15)}.text-dark-700\/20{color:rgba(16,16,30,.2)}.text-dark-700\/25{color:rgba(16,16,30,.25)}.text-dark-700\/30{color:rgba(16,16,30,.3)}.text-dark-700\/35{color:rgba(16,16,30,.35)}.text-dark-700\/40{color:rgba(16,16,30,.4)}.text-dark-700\/45{color:rgba(16,16,30,.45)}.text-dark-700\/5{color:rgba(16,16,30,.05)}.text-dark-700\/50{color:rgba(16,16,30,.5)}.text-dark-700\/55{color:rgba(16,16,30,.55)}.text-dark-700\/60{color:rgba(16,16,30,.6)}.text-dark-700\/65{color:rgba(16,16,30,.65)}.text-dark-700\/70{color:rgba(16,16,30,.7)}.text-dark-700\/75{color:rgba(16,16,30,.75)}.text-dark-700\/80{color:rgba(16,16,30,.8)}.text-dark-700\/85{color:rgba(16,16,30,.85)}.text-dark-700\/90{color:rgba(16,16,30,.9)}.text-dark-700\/95{color:rgba(16,16,30,.95)}.text-dark-800{--tw-text-opacity:1;color:rgb(10 10 18/var(--tw-text-opacity,1))}.text-dark-800\/0{color:rgba(10,10,18,0)}.text-dark-800\/10{color:rgba(10,10,18,.1)}.text-dark-800\/100{color:#0a0a12}.text-dark-800\/15{color:rgba(10,10,18,.15)}.text-dark-800\/20{color:rgba(10,10,18,.2)}.text-dark-800\/25{color:rgba(10,10,18,.25)}.text-dark-800\/30{color:rgba(10,10,18,.3)}.text-dark-800\/35{color:rgba(10,10,18,.35)}.text-dark-800\/40{color:rgba(10,10,18,.4)}.text-dark-800\/45{color:rgba(10,10,18,.45)}.text-dark-800\/5{color:rgba(10,10,18,.05)}.text-dark-800\/50{color:rgba(10,10,18,.5)}.text-dark-800\/55{color:rgba(10,10,18,.55)}.text-dark-800\/60{color:rgba(10,10,18,.6)}.text-dark-800\/65{color:rgba(10,10,18,.65)}.text-dark-800\/70{color:rgba(10,10,18,.7)}.text-dark-800\/75{color:rgba(10,10,18,.75)}.text-dark-800\/80{color:rgba(10,10,18,.8)}.text-dark-800\/85{color:rgba(10,10,18,.85)}.text-dark-800\/90{color:rgba(10,10,18,.9)}.text-dark-800\/95{color:rgba(10,10,18,.95)}.text-dark-900{--tw-text-opacity:1;color:rgb(5 5 8/var(--tw-text-opacity,1))}.text-dark-900\/0{color:rgba(5,5,8,0)}.text-dark-900\/10{color:rgba(5,5,8,.1)}.text-dark-900\/100{color:#050508}.text-dark-900\/15{color:rgba(5,5,8,.15)}.text-dark-900\/20{color:rgba(5,5,8,.2)}.text-dark-900\/25{color:rgba(5,5,8,.25)}.text-dark-900\/30{color:rgba(5,5,8,.3)}.text-dark-900\/35{color:rgba(5,5,8,.35)}.text-dark-900\/40{color:rgba(5,5,8,.4)}.text-dark-900\/45{color:rgba(5,5,8,.45)}.text-dark-900\/5{color:rgba(5,5,8,.05)}.text-dark-900\/50{color:rgba(5,5,8,.5)}.text-dark-900\/55{color:rgba(5,5,8,.55)}.text-dark-900\/60{color:rgba(5,5,8,.6)}.text-dark-900\/65{color:rgba(5,5,8,.65)}.text-dark-900\/70{color:rgba(5,5,8,.7)}.text-dark-900\/75{color:rgba(5,5,8,.75)}.text-dark-900\/80{color:rgba(5,5,8,.8)}.text-dark-900\/85{color:rgba(5,5,8,.85)}.text-dark-900\/90{color:rgba(5,5,8,.9)}.text-dark-900\/95{color:rgba(5,5,8,.95)}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.accent-accent{accent-color:#4080e0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.file\:mr-2::file-selector-button{margin-right:.5rem}.file\:rounded::file-selector-button{border-radius:.25rem}.file\:border-0::file-selector-button{border-width:0}.file\:bg-dark-600::file-selector-button{--tw-bg-opacity:1;background-color:rgb(24 24 48/var(--tw-bg-opacity,1))}.file\:px-2::file-selector-button{padding-left:.5rem;padding-right:.5rem}.file\:py-1::file-selector-button{padding-top:.25rem;padding-bottom:.25rem}.file\:text-gray-300::file-selector-button{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
\ No newline at end of file
+.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-6{margin-left:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-9{height:2.25rem}.w-24{width:6rem}.w-full{width:100%}.max-w-\[12rem\]{max-width:12rem}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-accent{--tw-border-opacity:1;border-color:rgb(64 128 224/var(--tw-border-opacity,1))}.border-accent-dark{--tw-border-opacity:1;border-color:rgb(32 96 176/var(--tw-border-opacity,1))}.border-accent-dark\/0{border-color:rgba(32,96,176,0)}.border-accent-dark\/10{border-color:rgba(32,96,176,.1)}.border-accent-dark\/100{border-color:#2060b0}.border-accent-dark\/15{border-color:rgba(32,96,176,.15)}.border-accent-dark\/20{border-color:rgba(32,96,176,.2)}.border-accent-dark\/25{border-color:rgba(32,96,176,.25)}.border-accent-dark\/30{border-color:rgba(32,96,176,.3)}.border-accent-dark\/35{border-color:rgba(32,96,176,.35)}.border-accent-dark\/40{border-color:rgba(32,96,176,.4)}.border-accent-dark\/45{border-color:rgba(32,96,176,.45)}.border-accent-dark\/5{border-color:rgba(32,96,176,.05)}.border-accent-dark\/50{border-color:rgba(32,96,176,.5)}.border-accent-dark\/55{border-color:rgba(32,96,176,.55)}.border-accent-dark\/60{border-color:rgba(32,96,176,.6)}.border-accent-dark\/65{border-color:rgba(32,96,176,.65)}.border-accent-dark\/70{border-color:rgba(32,96,176,.7)}.border-accent-dark\/75{border-color:rgba(32,96,176,.75)}.border-accent-dark\/80{border-color:rgba(32,96,176,.8)}.border-accent-dark\/85{border-color:rgba(32,96,176,.85)}.border-accent-dark\/90{border-color:rgba(32,96,176,.9)}.border-accent-dark\/95{border-color:rgba(32,96,176,.95)}.border-accent-light{--tw-border-opacity:1;border-color:rgb(96 160 255/var(--tw-border-opacity,1))}.border-accent-light\/0{border-color:rgba(96,160,255,0)}.border-accent-light\/10{border-color:rgba(96,160,255,.1)}.border-accent-light\/100{border-color:#60a0ff}.border-accent-light\/15{border-color:rgba(96,160,255,.15)}.border-accent-light\/20{border-color:rgba(96,160,255,.2)}.border-accent-light\/25{border-color:rgba(96,160,255,.25)}.border-accent-light\/30{border-color:rgba(96,160,255,.3)}.border-accent-light\/35{border-color:rgba(96,160,255,.35)}.border-accent-light\/40{border-color:rgba(96,160,255,.4)}.border-accent-light\/45{border-color:rgba(96,160,255,.45)}.border-accent-light\/5{border-color:rgba(96,160,255,.05)}.border-accent-light\/50{border-color:rgba(96,160,255,.5)}.border-accent-light\/55{border-color:rgba(96,160,255,.55)}.border-accent-light\/60{border-color:rgba(96,160,255,.6)}.border-accent-light\/65{border-color:rgba(96,160,255,.65)}.border-accent-light\/70{border-color:rgba(96,160,255,.7)}.border-accent-light\/75{border-color:rgba(96,160,255,.75)}.border-accent-light\/80{border-color:rgba(96,160,255,.8)}.border-accent-light\/85{border-color:rgba(96,160,255,.85)}.border-accent-light\/90{border-color:rgba(96,160,255,.9)}.border-accent-light\/95{border-color:rgba(96,160,255,.95)}.border-dark-500{--tw-border-opacity:1;border-color:rgb(30 30 58/var(--tw-border-opacity,1))}.border-dark-500\/0{border-color:rgba(30,30,58,0)}.border-dark-500\/10{border-color:rgba(30,30,58,.1)}.border-dark-500\/100{border-color:#1e1e3a}.border-dark-500\/15{border-color:rgba(30,30,58,.15)}.border-dark-500\/20{border-color:rgba(30,30,58,.2)}.border-dark-500\/25{border-color:rgba(30,30,58,.25)}.border-dark-500\/30{border-color:rgba(30,30,58,.3)}.border-dark-500\/35{border-color:rgba(30,30,58,.35)}.border-dark-500\/40{border-color:rgba(30,30,58,.4)}.border-dark-500\/45{border-color:rgba(30,30,58,.45)}.border-dark-500\/5{border-color:rgba(30,30,58,.05)}.border-dark-500\/50{border-color:rgba(30,30,58,.5)}.border-dark-500\/55{border-color:rgba(30,30,58,.55)}.border-dark-500\/60{border-color:rgba(30,30,58,.6)}.border-dark-500\/65{border-color:rgba(30,30,58,.65)}.border-dark-500\/70{border-color:rgba(30,30,58,.7)}.border-dark-500\/75{border-color:rgba(30,30,58,.75)}.border-dark-500\/80{border-color:rgba(30,30,58,.8)}.border-dark-500\/85{border-color:rgba(30,30,58,.85)}.border-dark-500\/90{border-color:rgba(30,30,58,.9)}.border-dark-500\/95{border-color:rgba(30,30,58,.95)}.border-dark-600{--tw-border-opacity:1;border-color:rgb(24 24 48/var(--tw-border-opacity,1))}.border-dark-600\/0{border-color:rgba(24,24,48,0)}.border-dark-600\/10{border-color:rgba(24,24,48,.1)}.border-dark-600\/100{border-color:#181830}.border-dark-600\/15{border-color:rgba(24,24,48,.15)}.border-dark-600\/20{border-color:rgba(24,24,48,.2)}.border-dark-600\/25{border-color:rgba(24,24,48,.25)}.border-dark-600\/30{border-color:rgba(24,24,48,.3)}.border-dark-600\/35{border-color:rgba(24,24,48,.35)}.border-dark-600\/40{border-color:rgba(24,24,48,.4)}.border-dark-600\/45{border-color:rgba(24,24,48,.45)}.border-dark-600\/5{border-color:rgba(24,24,48,.05)}.border-dark-600\/50{border-color:rgba(24,24,48,.5)}.border-dark-600\/55{border-color:rgba(24,24,48,.55)}.border-dark-600\/60{border-color:rgba(24,24,48,.6)}.border-dark-600\/65{border-color:rgba(24,24,48,.65)}.border-dark-600\/70{border-color:rgba(24,24,48,.7)}.border-dark-600\/75{border-color:rgba(24,24,48,.75)}.border-dark-600\/80{border-color:rgba(24,24,48,.8)}.border-dark-600\/85{border-color:rgba(24,24,48,.85)}.border-dark-600\/90{border-color:rgba(24,24,48,.9)}.border-dark-600\/95{border-color:rgba(24,24,48,.95)}.border-dark-700{--tw-border-opacity:1;border-color:rgb(16 16 30/var(--tw-border-opacity,1))}.border-dark-700\/0{border-color:rgba(16,16,30,0)}.border-dark-700\/10{border-color:rgba(16,16,30,.1)}.border-dark-700\/100{border-color:#10101e}.border-dark-700\/15{border-color:rgba(16,16,30,.15)}.border-dark-700\/20{border-color:rgba(16,16,30,.2)}.border-dark-700\/25{border-color:rgba(16,16,30,.25)}.border-dark-700\/30{border-color:rgba(16,16,30,.3)}.border-dark-700\/35{border-color:rgba(16,16,30,.35)}.border-dark-700\/40{border-color:rgba(16,16,30,.4)}.border-dark-700\/45{border-color:rgba(16,16,30,.45)}.border-dark-700\/5{border-color:rgba(16,16,30,.05)}.border-dark-700\/50{border-color:rgba(16,16,30,.5)}.border-dark-700\/55{border-color:rgba(16,16,30,.55)}.border-dark-700\/60{border-color:rgba(16,16,30,.6)}.border-dark-700\/65{border-color:rgba(16,16,30,.65)}.border-dark-700\/70{border-color:rgba(16,16,30,.7)}.border-dark-700\/75{border-color:rgba(16,16,30,.75)}.border-dark-700\/80{border-color:rgba(16,16,30,.8)}.border-dark-700\/85{border-color:rgba(16,16,30,.85)}.border-dark-700\/90{border-color:rgba(16,16,30,.9)}.border-dark-700\/95{border-color:rgba(16,16,30,.95)}.border-dark-800{--tw-border-opacity:1;border-color:rgb(10 10 18/var(--tw-border-opacity,1))}.border-dark-800\/0{border-color:rgba(10,10,18,0)}.border-dark-800\/10{border-color:rgba(10,10,18,.1)}.border-dark-800\/100{border-color:#0a0a12}.border-dark-800\/15{border-color:rgba(10,10,18,.15)}.border-dark-800\/20{border-color:rgba(10,10,18,.2)}.border-dark-800\/25{border-color:rgba(10,10,18,.25)}.border-dark-800\/30{border-color:rgba(10,10,18,.3)}.border-dark-800\/35{border-color:rgba(10,10,18,.35)}.border-dark-800\/40{border-color:rgba(10,10,18,.4)}.border-dark-800\/45{border-color:rgba(10,10,18,.45)}.border-dark-800\/5{border-color:rgba(10,10,18,.05)}.border-dark-800\/50{border-color:rgba(10,10,18,.5)}.border-dark-800\/55{border-color:rgba(10,10,18,.55)}.border-dark-800\/60{border-color:rgba(10,10,18,.6)}.border-dark-800\/65{border-color:rgba(10,10,18,.65)}.border-dark-800\/70{border-color:rgba(10,10,18,.7)}.border-dark-800\/75{border-color:rgba(10,10,18,.75)}.border-dark-800\/80{border-color:rgba(10,10,18,.8)}.border-dark-800\/85{border-color:rgba(10,10,18,.85)}.border-dark-800\/90{border-color:rgba(10,10,18,.9)}.border-dark-800\/95{border-color:rgba(10,10,18,.95)}.border-dark-900{--tw-border-opacity:1;border-color:rgb(5 5 8/var(--tw-border-opacity,1))}.border-dark-900\/0{border-color:rgba(5,5,8,0)}.border-dark-900\/10{border-color:rgba(5,5,8,.1)}.border-dark-900\/100{border-color:#050508}.border-dark-900\/15{border-color:rgba(5,5,8,.15)}.border-dark-900\/20{border-color:rgba(5,5,8,.2)}.border-dark-900\/25{border-color:rgba(5,5,8,.25)}.border-dark-900\/30{border-color:rgba(5,5,8,.3)}.border-dark-900\/35{border-color:rgba(5,5,8,.35)}.border-dark-900\/40{border-color:rgba(5,5,8,.4)}.border-dark-900\/45{border-color:rgba(5,5,8,.45)}.border-dark-900\/5{border-color:rgba(5,5,8,.05)}.border-dark-900\/50{border-color:rgba(5,5,8,.5)}.border-dark-900\/55{border-color:rgba(5,5,8,.55)}.border-dark-900\/60{border-color:rgba(5,5,8,.6)}.border-dark-900\/65{border-color:rgba(5,5,8,.65)}.border-dark-900\/70{border-color:rgba(5,5,8,.7)}.border-dark-900\/75{border-color:rgba(5,5,8,.75)}.border-dark-900\/80{border-color:rgba(5,5,8,.8)}.border-dark-900\/85{border-color:rgba(5,5,8,.85)}.border-dark-900\/90{border-color:rgba(5,5,8,.9)}.border-dark-900\/95{border-color:rgba(5,5,8,.95)}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-accent{--tw-bg-opacity:1;background-color:rgb(64 128 224/var(--tw-bg-opacity,1))}.bg-accent-dark{--tw-bg-opacity:1;background-color:rgb(32 96 176/var(--tw-bg-opacity,1))}.bg-accent-dark\/0{background-color:rgba(32,96,176,0)}.bg-accent-dark\/10{background-color:rgba(32,96,176,.1)}.bg-accent-dark\/100{background-color:#2060b0}.bg-accent-dark\/15{background-color:rgba(32,96,176,.15)}.bg-accent-dark\/20{background-color:rgba(32,96,176,.2)}.bg-accent-dark\/25{background-color:rgba(32,96,176,.25)}.bg-accent-dark\/30{background-color:rgba(32,96,176,.3)}.bg-accent-dark\/35{background-color:rgba(32,96,176,.35)}.bg-accent-dark\/40{background-color:rgba(32,96,176,.4)}.bg-accent-dark\/45{background-color:rgba(32,96,176,.45)}.bg-accent-dark\/5{background-color:rgba(32,96,176,.05)}.bg-accent-dark\/50{background-color:rgba(32,96,176,.5)}.bg-accent-dark\/55{background-color:rgba(32,96,176,.55)}.bg-accent-dark\/60{background-color:rgba(32,96,176,.6)}.bg-accent-dark\/65{background-color:rgba(32,96,176,.65)}.bg-accent-dark\/70{background-color:rgba(32,96,176,.7)}.bg-accent-dark\/75{background-color:rgba(32,96,176,.75)}.bg-accent-dark\/80{background-color:rgba(32,96,176,.8)}.bg-accent-dark\/85{background-color:rgba(32,96,176,.85)}.bg-accent-dark\/90{background-color:rgba(32,96,176,.9)}.bg-accent-dark\/95{background-color:rgba(32,96,176,.95)}.bg-accent-light{--tw-bg-opacity:1;background-color:rgb(96 160 255/var(--tw-bg-opacity,1))}.bg-accent-light\/0{background-color:rgba(96,160,255,0)}.bg-accent-light\/10{background-color:rgba(96,160,255,.1)}.bg-accent-light\/100{background-color:#60a0ff}.bg-accent-light\/15{background-color:rgba(96,160,255,.15)}.bg-accent-light\/20{background-color:rgba(96,160,255,.2)}.bg-accent-light\/25{background-color:rgba(96,160,255,.25)}.bg-accent-light\/30{background-color:rgba(96,160,255,.3)}.bg-accent-light\/35{background-color:rgba(96,160,255,.35)}.bg-accent-light\/40{background-color:rgba(96,160,255,.4)}.bg-accent-light\/45{background-color:rgba(96,160,255,.45)}.bg-accent-light\/5{background-color:rgba(96,160,255,.05)}.bg-accent-light\/50{background-color:rgba(96,160,255,.5)}.bg-accent-light\/55{background-color:rgba(96,160,255,.55)}.bg-accent-light\/60{background-color:rgba(96,160,255,.6)}.bg-accent-light\/65{background-color:rgba(96,160,255,.65)}.bg-accent-light\/70{background-color:rgba(96,160,255,.7)}.bg-accent-light\/75{background-color:rgba(96,160,255,.75)}.bg-accent-light\/80{background-color:rgba(96,160,255,.8)}.bg-accent-light\/85{background-color:rgba(96,160,255,.85)}.bg-accent-light\/90{background-color:rgba(96,160,255,.9)}.bg-accent-light\/95{background-color:rgba(96,160,255,.95)}.bg-dark-500{--tw-bg-opacity:1;background-color:rgb(30 30 58/var(--tw-bg-opacity,1))}.bg-dark-500\/0{background-color:rgba(30,30,58,0)}.bg-dark-500\/10{background-color:rgba(30,30,58,.1)}.bg-dark-500\/100{background-color:#1e1e3a}.bg-dark-500\/15{background-color:rgba(30,30,58,.15)}.bg-dark-500\/20{background-color:rgba(30,30,58,.2)}.bg-dark-500\/25{background-color:rgba(30,30,58,.25)}.bg-dark-500\/30{background-color:rgba(30,30,58,.3)}.bg-dark-500\/35{background-color:rgba(30,30,58,.35)}.bg-dark-500\/40{background-color:rgba(30,30,58,.4)}.bg-dark-500\/45{background-color:rgba(30,30,58,.45)}.bg-dark-500\/5{background-color:rgba(30,30,58,.05)}.bg-dark-500\/50{background-color:rgba(30,30,58,.5)}.bg-dark-500\/55{background-color:rgba(30,30,58,.55)}.bg-dark-500\/60{background-color:rgba(30,30,58,.6)}.bg-dark-500\/65{background-color:rgba(30,30,58,.65)}.bg-dark-500\/70{background-color:rgba(30,30,58,.7)}.bg-dark-500\/75{background-color:rgba(30,30,58,.75)}.bg-dark-500\/80{background-color:rgba(30,30,58,.8)}.bg-dark-500\/85{background-color:rgba(30,30,58,.85)}.bg-dark-500\/90{background-color:rgba(30,30,58,.9)}.bg-dark-500\/95{background-color:rgba(30,30,58,.95)}.bg-dark-600{--tw-bg-opacity:1;background-color:rgb(24 24 48/var(--tw-bg-opacity,1))}.bg-dark-600\/0{background-color:rgba(24,24,48,0)}.bg-dark-600\/10{background-color:rgba(24,24,48,.1)}.bg-dark-600\/100{background-color:#181830}.bg-dark-600\/15{background-color:rgba(24,24,48,.15)}.bg-dark-600\/20{background-color:rgba(24,24,48,.2)}.bg-dark-600\/25{background-color:rgba(24,24,48,.25)}.bg-dark-600\/30{background-color:rgba(24,24,48,.3)}.bg-dark-600\/35{background-color:rgba(24,24,48,.35)}.bg-dark-600\/40{background-color:rgba(24,24,48,.4)}.bg-dark-600\/45{background-color:rgba(24,24,48,.45)}.bg-dark-600\/5{background-color:rgba(24,24,48,.05)}.bg-dark-600\/50{background-color:rgba(24,24,48,.5)}.bg-dark-600\/55{background-color:rgba(24,24,48,.55)}.bg-dark-600\/60{background-color:rgba(24,24,48,.6)}.bg-dark-600\/65{background-color:rgba(24,24,48,.65)}.bg-dark-600\/70{background-color:rgba(24,24,48,.7)}.bg-dark-600\/75{background-color:rgba(24,24,48,.75)}.bg-dark-600\/80{background-color:rgba(24,24,48,.8)}.bg-dark-600\/85{background-color:rgba(24,24,48,.85)}.bg-dark-600\/90{background-color:rgba(24,24,48,.9)}.bg-dark-600\/95{background-color:rgba(24,24,48,.95)}.bg-dark-700{--tw-bg-opacity:1;background-color:rgb(16 16 30/var(--tw-bg-opacity,1))}.bg-dark-700\/0{background-color:rgba(16,16,30,0)}.bg-dark-700\/10{background-color:rgba(16,16,30,.1)}.bg-dark-700\/100{background-color:#10101e}.bg-dark-700\/15{background-color:rgba(16,16,30,.15)}.bg-dark-700\/20{background-color:rgba(16,16,30,.2)}.bg-dark-700\/25{background-color:rgba(16,16,30,.25)}.bg-dark-700\/30{background-color:rgba(16,16,30,.3)}.bg-dark-700\/35{background-color:rgba(16,16,30,.35)}.bg-dark-700\/40{background-color:rgba(16,16,30,.4)}.bg-dark-700\/45{background-color:rgba(16,16,30,.45)}.bg-dark-700\/5{background-color:rgba(16,16,30,.05)}.bg-dark-700\/50{background-color:rgba(16,16,30,.5)}.bg-dark-700\/55{background-color:rgba(16,16,30,.55)}.bg-dark-700\/60{background-color:rgba(16,16,30,.6)}.bg-dark-700\/65{background-color:rgba(16,16,30,.65)}.bg-dark-700\/70{background-color:rgba(16,16,30,.7)}.bg-dark-700\/75{background-color:rgba(16,16,30,.75)}.bg-dark-700\/80{background-color:rgba(16,16,30,.8)}.bg-dark-700\/85{background-color:rgba(16,16,30,.85)}.bg-dark-700\/90{background-color:rgba(16,16,30,.9)}.bg-dark-700\/95{background-color:rgba(16,16,30,.95)}.bg-dark-800{--tw-bg-opacity:1;background-color:rgb(10 10 18/var(--tw-bg-opacity,1))}.bg-dark-800\/0{background-color:rgba(10,10,18,0)}.bg-dark-800\/10{background-color:rgba(10,10,18,.1)}.bg-dark-800\/100{background-color:#0a0a12}.bg-dark-800\/15{background-color:rgba(10,10,18,.15)}.bg-dark-800\/20{background-color:rgba(10,10,18,.2)}.bg-dark-800\/25{background-color:rgba(10,10,18,.25)}.bg-dark-800\/30{background-color:rgba(10,10,18,.3)}.bg-dark-800\/35{background-color:rgba(10,10,18,.35)}.bg-dark-800\/40{background-color:rgba(10,10,18,.4)}.bg-dark-800\/45{background-color:rgba(10,10,18,.45)}.bg-dark-800\/5{background-color:rgba(10,10,18,.05)}.bg-dark-800\/50{background-color:rgba(10,10,18,.5)}.bg-dark-800\/55{background-color:rgba(10,10,18,.55)}.bg-dark-800\/60{background-color:rgba(10,10,18,.6)}.bg-dark-800\/65{background-color:rgba(10,10,18,.65)}.bg-dark-800\/70{background-color:rgba(10,10,18,.7)}.bg-dark-800\/75{background-color:rgba(10,10,18,.75)}.bg-dark-800\/80{background-color:rgba(10,10,18,.8)}.bg-dark-800\/85{background-color:rgba(10,10,18,.85)}.bg-dark-800\/90{background-color:rgba(10,10,18,.9)}.bg-dark-800\/95{background-color:rgba(10,10,18,.95)}.bg-dark-900{--tw-bg-opacity:1;background-color:rgb(5 5 8/var(--tw-bg-opacity,1))}.bg-dark-900\/0{background-color:rgba(5,5,8,0)}.bg-dark-900\/10{background-color:rgba(5,5,8,.1)}.bg-dark-900\/100{background-color:#050508}.bg-dark-900\/15{background-color:rgba(5,5,8,.15)}.bg-dark-900\/20{background-color:rgba(5,5,8,.2)}.bg-dark-900\/25{background-color:rgba(5,5,8,.25)}.bg-dark-900\/30{background-color:rgba(5,5,8,.3)}.bg-dark-900\/35{background-color:rgba(5,5,8,.35)}.bg-dark-900\/40{background-color:rgba(5,5,8,.4)}.bg-dark-900\/45{background-color:rgba(5,5,8,.45)}.bg-dark-900\/5{background-color:rgba(5,5,8,.05)}.bg-dark-900\/50{background-color:rgba(5,5,8,.5)}.bg-dark-900\/55{background-color:rgba(5,5,8,.55)}.bg-dark-900\/60{background-color:rgba(5,5,8,.6)}.bg-dark-900\/65{background-color:rgba(5,5,8,.65)}.bg-dark-900\/70{background-color:rgba(5,5,8,.7)}.bg-dark-900\/75{background-color:rgba(5,5,8,.75)}.bg-dark-900\/80{background-color:rgba(5,5,8,.8)}.bg-dark-900\/85{background-color:rgba(5,5,8,.85)}.bg-dark-900\/90{background-color:rgba(5,5,8,.9)}.bg-dark-900\/95{background-color:rgba(5,5,8,.95)}.p-0\.5{padding:.125rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.pt-1{padding-top:.25rem}.pt-4{padding-top:1rem}.text-\[10px\]{font-size:10px}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.lowercase{text-transform:lowercase}.italic{font-style:italic}.text-accent{--tw-text-opacity:1;color:rgb(64 128 224/var(--tw-text-opacity,1))}.text-accent-dark{--tw-text-opacity:1;color:rgb(32 96 176/var(--tw-text-opacity,1))}.text-accent-dark\/0{color:rgba(32,96,176,0)}.text-accent-dark\/10{color:rgba(32,96,176,.1)}.text-accent-dark\/100{color:#2060b0}.text-accent-dark\/15{color:rgba(32,96,176,.15)}.text-accent-dark\/20{color:rgba(32,96,176,.2)}.text-accent-dark\/25{color:rgba(32,96,176,.25)}.text-accent-dark\/30{color:rgba(32,96,176,.3)}.text-accent-dark\/35{color:rgba(32,96,176,.35)}.text-accent-dark\/40{color:rgba(32,96,176,.4)}.text-accent-dark\/45{color:rgba(32,96,176,.45)}.text-accent-dark\/5{color:rgba(32,96,176,.05)}.text-accent-dark\/50{color:rgba(32,96,176,.5)}.text-accent-dark\/55{color:rgba(32,96,176,.55)}.text-accent-dark\/60{color:rgba(32,96,176,.6)}.text-accent-dark\/65{color:rgba(32,96,176,.65)}.text-accent-dark\/70{color:rgba(32,96,176,.7)}.text-accent-dark\/75{color:rgba(32,96,176,.75)}.text-accent-dark\/80{color:rgba(32,96,176,.8)}.text-accent-dark\/85{color:rgba(32,96,176,.85)}.text-accent-dark\/90{color:rgba(32,96,176,.9)}.text-accent-dark\/95{color:rgba(32,96,176,.95)}.text-accent-light{--tw-text-opacity:1;color:rgb(96 160 255/var(--tw-text-opacity,1))}.text-accent-light\/0{color:rgba(96,160,255,0)}.text-accent-light\/10{color:rgba(96,160,255,.1)}.text-accent-light\/100{color:#60a0ff}.text-accent-light\/15{color:rgba(96,160,255,.15)}.text-accent-light\/20{color:rgba(96,160,255,.2)}.text-accent-light\/25{color:rgba(96,160,255,.25)}.text-accent-light\/30{color:rgba(96,160,255,.3)}.text-accent-light\/35{color:rgba(96,160,255,.35)}.text-accent-light\/40{color:rgba(96,160,255,.4)}.text-accent-light\/45{color:rgba(96,160,255,.45)}.text-accent-light\/5{color:rgba(96,160,255,.05)}.text-accent-light\/50{color:rgba(96,160,255,.5)}.text-accent-light\/55{color:rgba(96,160,255,.55)}.text-accent-light\/60{color:rgba(96,160,255,.6)}.text-accent-light\/65{color:rgba(96,160,255,.65)}.text-accent-light\/70{color:rgba(96,160,255,.7)}.text-accent-light\/75{color:rgba(96,160,255,.75)}.text-accent-light\/80{color:rgba(96,160,255,.8)}.text-accent-light\/85{color:rgba(96,160,255,.85)}.text-accent-light\/90{color:rgba(96,160,255,.9)}.text-accent-light\/95{color:rgba(96,160,255,.95)}.text-dark-500{--tw-text-opacity:1;color:rgb(30 30 58/var(--tw-text-opacity,1))}.text-dark-500\/0{color:rgba(30,30,58,0)}.text-dark-500\/10{color:rgba(30,30,58,.1)}.text-dark-500\/100{color:#1e1e3a}.text-dark-500\/15{color:rgba(30,30,58,.15)}.text-dark-500\/20{color:rgba(30,30,58,.2)}.text-dark-500\/25{color:rgba(30,30,58,.25)}.text-dark-500\/30{color:rgba(30,30,58,.3)}.text-dark-500\/35{color:rgba(30,30,58,.35)}.text-dark-500\/40{color:rgba(30,30,58,.4)}.text-dark-500\/45{color:rgba(30,30,58,.45)}.text-dark-500\/5{color:rgba(30,30,58,.05)}.text-dark-500\/50{color:rgba(30,30,58,.5)}.text-dark-500\/55{color:rgba(30,30,58,.55)}.text-dark-500\/60{color:rgba(30,30,58,.6)}.text-dark-500\/65{color:rgba(30,30,58,.65)}.text-dark-500\/70{color:rgba(30,30,58,.7)}.text-dark-500\/75{color:rgba(30,30,58,.75)}.text-dark-500\/80{color:rgba(30,30,58,.8)}.text-dark-500\/85{color:rgba(30,30,58,.85)}.text-dark-500\/90{color:rgba(30,30,58,.9)}.text-dark-500\/95{color:rgba(30,30,58,.95)}.text-dark-600{--tw-text-opacity:1;color:rgb(24 24 48/var(--tw-text-opacity,1))}.text-dark-600\/0{color:rgba(24,24,48,0)}.text-dark-600\/10{color:rgba(24,24,48,.1)}.text-dark-600\/100{color:#181830}.text-dark-600\/15{color:rgba(24,24,48,.15)}.text-dark-600\/20{color:rgba(24,24,48,.2)}.text-dark-600\/25{color:rgba(24,24,48,.25)}.text-dark-600\/30{color:rgba(24,24,48,.3)}.text-dark-600\/35{color:rgba(24,24,48,.35)}.text-dark-600\/40{color:rgba(24,24,48,.4)}.text-dark-600\/45{color:rgba(24,24,48,.45)}.text-dark-600\/5{color:rgba(24,24,48,.05)}.text-dark-600\/50{color:rgba(24,24,48,.5)}.text-dark-600\/55{color:rgba(24,24,48,.55)}.text-dark-600\/60{color:rgba(24,24,48,.6)}.text-dark-600\/65{color:rgba(24,24,48,.65)}.text-dark-600\/70{color:rgba(24,24,48,.7)}.text-dark-600\/75{color:rgba(24,24,48,.75)}.text-dark-600\/80{color:rgba(24,24,48,.8)}.text-dark-600\/85{color:rgba(24,24,48,.85)}.text-dark-600\/90{color:rgba(24,24,48,.9)}.text-dark-600\/95{color:rgba(24,24,48,.95)}.text-dark-700{--tw-text-opacity:1;color:rgb(16 16 30/var(--tw-text-opacity,1))}.text-dark-700\/0{color:rgba(16,16,30,0)}.text-dark-700\/10{color:rgba(16,16,30,.1)}.text-dark-700\/100{color:#10101e}.text-dark-700\/15{color:rgba(16,16,30,.15)}.text-dark-700\/20{color:rgba(16,16,30,.2)}.text-dark-700\/25{color:rgba(16,16,30,.25)}.text-dark-700\/30{color:rgba(16,16,30,.3)}.text-dark-700\/35{color:rgba(16,16,30,.35)}.text-dark-700\/40{color:rgba(16,16,30,.4)}.text-dark-700\/45{color:rgba(16,16,30,.45)}.text-dark-700\/5{color:rgba(16,16,30,.05)}.text-dark-700\/50{color:rgba(16,16,30,.5)}.text-dark-700\/55{color:rgba(16,16,30,.55)}.text-dark-700\/60{color:rgba(16,16,30,.6)}.text-dark-700\/65{color:rgba(16,16,30,.65)}.text-dark-700\/70{color:rgba(16,16,30,.7)}.text-dark-700\/75{color:rgba(16,16,30,.75)}.text-dark-700\/80{color:rgba(16,16,30,.8)}.text-dark-700\/85{color:rgba(16,16,30,.85)}.text-dark-700\/90{color:rgba(16,16,30,.9)}.text-dark-700\/95{color:rgba(16,16,30,.95)}.text-dark-800{--tw-text-opacity:1;color:rgb(10 10 18/var(--tw-text-opacity,1))}.text-dark-800\/0{color:rgba(10,10,18,0)}.text-dark-800\/10{color:rgba(10,10,18,.1)}.text-dark-800\/100{color:#0a0a12}.text-dark-800\/15{color:rgba(10,10,18,.15)}.text-dark-800\/20{color:rgba(10,10,18,.2)}.text-dark-800\/25{color:rgba(10,10,18,.25)}.text-dark-800\/30{color:rgba(10,10,18,.3)}.text-dark-800\/35{color:rgba(10,10,18,.35)}.text-dark-800\/40{color:rgba(10,10,18,.4)}.text-dark-800\/45{color:rgba(10,10,18,.45)}.text-dark-800\/5{color:rgba(10,10,18,.05)}.text-dark-800\/50{color:rgba(10,10,18,.5)}.text-dark-800\/55{color:rgba(10,10,18,.55)}.text-dark-800\/60{color:rgba(10,10,18,.6)}.text-dark-800\/65{color:rgba(10,10,18,.65)}.text-dark-800\/70{color:rgba(10,10,18,.7)}.text-dark-800\/75{color:rgba(10,10,18,.75)}.text-dark-800\/80{color:rgba(10,10,18,.8)}.text-dark-800\/85{color:rgba(10,10,18,.85)}.text-dark-800\/90{color:rgba(10,10,18,.9)}.text-dark-800\/95{color:rgba(10,10,18,.95)}.text-dark-900{--tw-text-opacity:1;color:rgb(5 5 8/var(--tw-text-opacity,1))}.text-dark-900\/0{color:rgba(5,5,8,0)}.text-dark-900\/10{color:rgba(5,5,8,.1)}.text-dark-900\/100{color:#050508}.text-dark-900\/15{color:rgba(5,5,8,.15)}.text-dark-900\/20{color:rgba(5,5,8,.2)}.text-dark-900\/25{color:rgba(5,5,8,.25)}.text-dark-900\/30{color:rgba(5,5,8,.3)}.text-dark-900\/35{color:rgba(5,5,8,.35)}.text-dark-900\/40{color:rgba(5,5,8,.4)}.text-dark-900\/45{color:rgba(5,5,8,.45)}.text-dark-900\/5{color:rgba(5,5,8,.05)}.text-dark-900\/50{color:rgba(5,5,8,.5)}.text-dark-900\/55{color:rgba(5,5,8,.55)}.text-dark-900\/60{color:rgba(5,5,8,.6)}.text-dark-900\/65{color:rgba(5,5,8,.65)}.text-dark-900\/70{color:rgba(5,5,8,.7)}.text-dark-900\/75{color:rgba(5,5,8,.75)}.text-dark-900\/80{color:rgba(5,5,8,.8)}.text-dark-900\/85{color:rgba(5,5,8,.85)}.text-dark-900\/90{color:rgba(5,5,8,.9)}.text-dark-900\/95{color:rgba(5,5,8,.95)}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.accent-accent{accent-color:#4080e0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.file\:mr-2::file-selector-button{margin-right:.5rem}.file\:rounded::file-selector-button{border-radius:.25rem}.file\:border-0::file-selector-button{border-width:0}.file\:bg-dark-600::file-selector-button{--tw-bg-opacity:1;background-color:rgb(24 24 48/var(--tw-bg-opacity,1))}.file\:px-2::file-selector-button{padding-left:.5rem;padding-right:.5rem}.file\:py-1::file-selector-button{padding-top:.25rem;padding-bottom:.25rem}.file\:text-gray-300::file-selector-button{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hover\:text-gray-200:hover{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
\ No newline at end of file
diff --git a/plugins/highway_3d/plugin.json b/plugins/highway_3d/plugin.json
index d24e70b..0ddd9f6 100644
--- a/plugins/highway_3d/plugin.json
+++ b/plugins/highway_3d/plugin.json
@@ -1,7 +1,7 @@
 {
     "id": "highway_3d",
     "name": "3D Highway",
-    "version": "3.26.0",
+    "version": "3.27.0",
     "type": "visualization",
     "bundled": true,
     "script": "screen.js",
diff --git a/plugins/highway_3d/screen.js b/plugins/highway_3d/screen.js
index 3fa8a77..a21efa5 100644
--- a/plugins/highway_3d/screen.js
+++ b/plugins/highway_3d/screen.js
@@ -1123,7 +1123,7 @@
         return _bgBandsCache;
     }
 
-    const BG_DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
+    const BG_DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', bgTheme: 'default', hwTheme: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
     // User-selectable, persistable bg styles — must mirror settings.html's
     // VALID_STYLES. 'venue' is deliberately NOT here: it is an internal effective
     // style reached only via _venueSceneOverride (the viz-picker Venue flow), so
@@ -1131,6 +1131,83 @@
     // mount outside that flow and settings.html (which can't represent 'venue')
     // would be unable to switch back. BG_STYLES still has a 'venue' renderer entry.
     const BG_STYLE_IDS = ['off', 'particles', 'silhouettes', 'lights', 'geometric', 'image', 'video'];
+    // Scene color themes — TWO INDEPENDENT AXES sharing one palette family.
+    // The combined `BG_THEMES` table below is the single source of truth; each
+    // entry carries the colors for BOTH axes, but the two axes are selected and
+    // applied SEPARATELY (two dropdowns, two settings keys):
+    //   • BACKGROUND axis (setting key `bgTheme`) owns:
+    //       clear — WebGL clear color (the empty background behind everything)
+    //       fog   — distance fog tint (kept === clear so the horizon dissolves
+    //               cleanly instead of showing a seam)
+    //   • HIGHWAY axis (setting key `hwTheme`) owns:
+    //       board   — the fretboard / highway-surface plane color
+    //       lane    — the lit highway lane strip under the gems (optional)
+    //       laneDim — the lane's dimmer alternating row (optional)
+    // Because both axes read from the SAME id-set (the keys of this table), ANY
+    // background id can mix with ANY highway id (e.g. Deep Focus background +
+    // Cathode Green highway); picking the SAME id in both gives the original
+    // "matched" combined look. _bgBackgroundColors()/_bgHighwayColors() below
+    // are the per-axis accessors; both fall back to 'default' for unknown ids.
+    // 'default' reproduces the original look byte-for-byte on BOTH axes, so
+    // existing users (and anyone who never touches either setting) see no
+    // change. A migration in _bgLoadSettings() makes an existing single-`bgTheme`
+    // pick drive BOTH axes until the user diverges them, so upgrades are
+    // visually identical too. All themes keep the board very dark and the
+    // background dark so the bright per-string note gems, lane, and labels
+    // retain contrast. NOTE: settings.html mirrors these ids in its
+    // VALID_BG_THEMES set (shared by both dropdowns) — keep them in sync.
+    // Optional `lane` / `laneDim` fields retint the lit highway lane strip + its
+    // dimmer alternating row. A theme that omits them falls back to the stock
+    // blue lane (HWY_LANE_STRIPE_ODD_HEX / _EVEN_HEX); only 'default' relies on
+    // that fallback (so its output stays byte-identical). Every other theme sets
+    // its own lane so the Highway axis is visibly distinct entry-to-entry — the
+    // near-black neutral boards alone aren't separable, so the lane carries it.
+    // See _applyBgTheme().
+    const BG_THEMES = {
+        default:    { clear: 0x101820, fog: 0x101820, board: 0x08080e },
+        // Cool navy surface + a brighter pure-blue lane, so it reads distinct
+        // from 'default' (neutral board + stock teal-blue lane) on the Highway axis.
+        midnight:   { clear: 0x0a0e1a, fog: 0x0a0e1a, board: 0x080d1c, lane: 0x244fae, laneDim: 0x122a5e },
+        // Lighter NEUTRAL-grey surface + a steel-grey lane — the only mid-dark
+        // neutral board, so the surface itself is visibly different from the
+        // near-black neutrals around it (board kept dark enough for gem contrast).
+        charcoal:   { clear: 0x16181c, fog: 0x16181c, board: 0x141417, lane: 0x525a66, laneDim: 0x282d34 },
+        deeppurple: { clear: 0x140a1e, fog: 0x140a1e, board: 0x0b0610, lane: 0x3a1f6e, laneDim: 0x1f1040 },
+        forest:     { clear: 0x0a1614, fog: 0x0a1614, board: 0x06100c, lane: 0x15602a, laneDim: 0x0a3318 },
+        // Warm dark neutral (espresso/umber) — the first non-cool scene.
+        warmslate:  { clear: 0x1c130b, fog: 0x1c130b, board: 0x0e0805, lane: 0x5e3a12, laneDim: 0x341f0a },
+        // Recessive near-black neutral (a hair above #000000, ~zero chroma) —
+        // maximizes gem-vs-board contrast; a clean stage/stream look. Purest-dark
+        // board + a clean steel-cyan lane (brighter/cooler than 'default's muted
+        // teal-blue) so the Highway axis reads clearly distinct from default.
+        deepfocus:  { clear: 0x0c0c0d, fog: 0x0c0c0d, board: 0x060606, lane: 0x2f7fa0, laneDim: 0x163c4e },
+        // Calm dark teal — blue-dominant so it reads distinct from the navy
+        // 'midnight' and the green 'forest'.
+        deepsea:    { clear: 0x06222b, fog: 0x06222b, board: 0x03141a, lane: 0x0e5a63, laneDim: 0x063338 },
+        // Retro CRT glow — a warm AMBER phosphor cast (the classic amber
+        // terminal). Amber rather than green so a phosphor board can't crush
+        // green/teal gems, and so it stays clearly distinct from 'forest' and
+        // 'deepsea'. Board stays very dark / low-chroma to keep gems popping.
+        cathode:    { clear: 0x140b03, fog: 0x140b03, board: 0x0c0702, lane: 0x6e4a0e, laneDim: 0x3a2806 },
+        // Retro CRT GREEN phosphor — leaned more saturated / cyan-green than
+        // 'forest' so it reads as a terminal, not woodland (dRGB 35 vs forest,
+        // 32 vs deepsea). Phosphor-green board + green lane. Verified to keep
+        // green/teal gems legible (green-on-green floor CR ~2.2).
+        cathodegreen: { clear: 0x07301a, fog: 0x07301a, board: 0x031a0c, lane: 0x0e6e2a, laneDim: 0x073a18 },
+        // Warm hearth — the first warm-RED scene, pairs with the Ember/Sunrise
+        // strings. Deep red, pushed away from the amber 'cathode'/'warmslate'
+        // (dRGB ~26 from cathode). Ember-red lane.
+        hearth:     { clear: 0x280806, fog: 0x280806, board: 0x1a0606, lane: 0x7a2410, laneDim: 0x3f1409 },
+    };
+    const BG_THEME_IDS = Object.keys(BG_THEMES);
+    // Shared lookup for the combined entry (both axes are keyed by the same id
+    // set, so a single id list / coerce check validates either axis).
+    function _bgThemeColors(id) { return BG_THEMES[id] || BG_THEMES.default; }
+    // Per-axis accessors. Background reads clear/fog; highway reads
+    // board/lane/laneDim. They alias the same table — splitting at read-time
+    // keeps one source of truth while letting the two dropdowns pick freely.
+    function _bgBackgroundColors(id) { return _bgThemeColors(id); }
+    function _bgHighwayColors(id) { return _bgThemeColors(id); }
     const VENUE_SCENE_ASSET_BASE = '/static/assets/venue/themes/small-club/';
     const VENUE_BG_PLATE_PNG = 'bg-plate.png';
     const VENUE_BG_PLATE_WEBP = 'bg-plate.webp';
@@ -1412,6 +1489,9 @@
         if (_BG_BOOL_KEYS.has(key)) return _bgCoerceBool(val, BG_DEFAULTS[key]);
         if (key === 'style') return BG_STYLE_IDS.includes(val) ? val : BG_DEFAULTS.style;
         if (key === 'palette') return (PALETTE_IDS.includes(val) || val === 'custom') ? val : BG_DEFAULTS.palette;
+        if (key === 'bgTheme') return BG_THEME_IDS.includes(val) ? val : BG_DEFAULTS.bgTheme;
+        // Highway axis shares the same id-set as the background axis.
+        if (key === 'hwTheme') return BG_THEME_IDS.includes(val) ? val : BG_DEFAULTS.hwTheme;
         if (key === 'chordDiagramPosition')
             return CHORD_DIAG_POSITION_IDS.includes(val) ? val : BG_DEFAULTS.chordDiagramPosition;
         if (key === 'sectionHudPosition')
@@ -1483,6 +1563,20 @@
     window.h3dBgSetIntensity = (v) => _bgWriteGlobal('intensity', v);
     window.h3dBgSetReactive = (v) => _bgWriteGlobal('reactive', !!v);
     window.h3dBgSetPalette = (v) => _bgWriteGlobal('palette', v);
+    // BACKGROUND scene-color axis (clear + fog only). Validated against
+    // BG_THEME_IDS in _bgCoerce; the listener re-applies clear/fog live and
+    // independently of the highway axis.
+    window.h3dBgSetBgTheme = (v) => {
+        const s = String(v);
+        _bgWriteGlobal('bgTheme', BG_THEME_IDS.includes(s) ? s : BG_DEFAULTS.bgTheme);
+    };
+    // HIGHWAY scene-color axis (board + lane + laneDim). Same id-set as the
+    // background axis, so any highway can mix with any background. The listener
+    // re-applies the board plane + lane live and independently.
+    window.h3dBgSetHwTheme = (v) => {
+        const s = String(v);
+        _bgWriteGlobal('hwTheme', BG_THEME_IDS.includes(s) ? s : BG_DEFAULTS.hwTheme);
+    };
     // Apply a user-defined per-string color set (core theming UI). `hexArray`
     // is up to 8 hex strings; invalid/missing entries fall back to the default
     // palette per index. Writes the colors, then flips the palette to 'custom'
@@ -2738,6 +2832,13 @@
         let bgGroup = null, bgStage = null, bgState = null;
         let bgMountedStyleId = null;
         let bgStyleId = 'particles', bgIntensity = 0.5, bgReactive = true;
+        // Active scene color theme (background + highway surface). Read in
+        // _bgLoadSettings, applied by _applyBgTheme (clear + fog + board plane).
+        let bgThemeId = 'default';   // BACKGROUND axis (clear + fog)
+        let hwThemeId = 'default';   // HIGHWAY axis (board + lane + laneDim)
+        // Board (fretboard/highway-surface) plane material — kept so the theme
+        // can recolor it live without rebuilding the board. Set in buildBoard().
+        let _boardPlaneMat = null;
         // Per-render opt-out for plugins borrowing the highway as a viz: when the
         // mount bundle sets bgReactive === false, suppress the audio-reactive
         // background for THIS instance only (no shared h3d_bg_* write). Captured
@@ -6220,6 +6321,11 @@
 
             _bgLoadSettings();
             buildBoard();
+            // Apply the scene color theme now that settings + board exist. Sets
+            // the clear color + fog tint (board plane was themed in buildBoard).
+            // For the default theme this is identical to the hardcoded values
+            // initScene seeded above, so nothing changes for existing users.
+            _applyBgTheme();
 
             // Background animations (#13). Read settings keyed by this
             // panel and mount the active style's meshes. Subscribe to
@@ -6337,6 +6443,17 @@
                     if (bgStyleId === 'lights') _bgRebuild();
                     return;
                 }
+                if (changedKey === 'bgTheme' || changedKey === 'hwTheme') {
+                    // A scene-color axis changed (background = bgTheme:
+                    // clear+fog; highway = hwTheme: board plane + lane). Recolor
+                    // in place — no mesh rebuild needed (the board plane material
+                    // is mutated via _boardPlaneMat, the lane via mLaneOdd/Even).
+                    // _applyBgTheme reapplies both axes from their own keys, so
+                    // changing one dropdown retints only its half.
+                    _bgLoadSettings();
+                    _applyBgTheme();
+                    return;
+                }
                 if (changedKey === 'customImageDataUrl') {
                     // Asset bytes changed. Rebuild only when the image
                     // style is active — otherwise the new bytes will
@@ -6543,6 +6660,25 @@
                 _bgPaletteSig = newSig;
                 _applyPaletteToMaterials();
             }
+            bgThemeId = _bgReadSetting(panelKey, 'bgTheme');
+            // Highway axis. ONE-TIME BACKWARD-COMPAT BACKFILL: the first time we
+            // load with no stored hwTheme (pre-split installs, or anyone who only
+            // ever touched the old single "Scene colors" control), seed hwTheme
+            // FROM the background pick AND PERSIST it, so an existing 'cathode'
+            // selection looks byte-identical right after the upgrade. Persisting
+            // immediately (rather than re-inheriting on every read) is what keeps
+            // the two axes truly INDEPENDENT thereafter: once hwTheme is stored,
+            // changing the Background dropdown no longer drags the Highway
+            // surface along, and the settings UI's Highway value can never
+            // disagree with what's rendered. Written without _bgEmitChange so the
+            // backfill can't re-enter the change listener.
+            if (_bgHasStored(panelKey, 'hwTheme')) {
+                hwThemeId = _bgReadSetting(panelKey, 'hwTheme');
+            } else {
+                hwThemeId = bgThemeId;
+                _bgMemFallback.hwTheme = String(bgThemeId);
+                try { localStorage.setItem('h3d_bg_hwTheme', String(bgThemeId)); } catch (_) { /* storage blocked — mem fallback still seeds the read */ }
+            }
             showFretOnNote = _bgReadSetting(panelKey, 'showFretOnNote');
             fretNumberGhostScope = _bgReadSetting(panelKey, 'fretNumberGhostScope');
             cameraSmoothing = _bgReadSetting(panelKey, 'cameraSmoothing');
@@ -6916,14 +7052,54 @@
                 if (ren) ren.setClearColor(0x080c12);
                 if (ambLight) ambLight.intensity = 0.68;
             } else {
-                scene.fog.color.setHex(0x101820);
+                // Restore the user's scene-color theme (clear + fog) rather than
+                // the old hardcoded gray, so deactivating venue doesn't wipe a
+                // chosen background theme. _applyBgTheme reads the current theme.
                 scene.fog.near = FOG_START * 0.8;
                 scene.fog.far = FOG_END * 1.2;
-                if (ren) ren.setClearColor(0x101820);
                 if (ambLight) ambLight.intensity = 0.85;
+                _applyBgTheme();
             }
         }
 
+        // Apply BOTH scene-color axes, each from its own setting key:
+        //   • BACKGROUND (bgThemeId): the WebGL clear color + the distance-fog
+        //     tint. Skipped while the venue scene is active (venue owns those —
+        //     see _bgApplyVenueSceneFog).
+        //   • HIGHWAY (hwThemeId): the fretboard/highway-surface plane + the lit
+        //     highway lane strip (the bright quad under the gems) + its dimmer
+        //     alternating row. Always themed; venue doesn't touch them.
+        // The two axes are independent, so picking a different id in each mixes
+        // freely. Safe to call any time; called from initScene, buildBoard, and
+        // the scene-theme listener (so a live switch of EITHER dropdown retints
+        // only its half immediately).
+        //
+        // The lane fields are OPTIONAL on a highway theme: one that omits `lane`
+        // / `laneDim` falls back to the stock lit/dim lane hexes, so every
+        // existing/neutral highway theme stays byte-identical (default blue lane
+        // unchanged). Only colored highway themes opt into a coordinated lane.
+        function _applyBgTheme() {
+            // --- Background axis: clear + fog ---
+            const bg = _bgBackgroundColors(bgThemeId);
+            if (!_venueSceneOverride) {
+                if (scene && scene.fog) scene.fog.color.setHex(bg.fog);
+                if (ren) ren.setClearColor(bg.clear);
+            }
+            // --- Highway axis: board plane + lane ---
+            const hw = _bgHighwayColors(hwThemeId);
+            if (_boardPlaneMat) _boardPlaneMat.color.setHex(hw.board);
+            // Lit lane strip + its dimmer alternating row. Fall back to the
+            // hardcoded stock lane colors when the highway theme omits them.
+            const laneLit = (typeof hw.lane === 'number') ? hw.lane : HWY_LANE_STRIPE_ODD_HEX;
+            const laneDim = (typeof hw.laneDim === 'number') ? hw.laneDim : HWY_LANE_STRIPE_EVEN_HEX;
+            if (mLaneOdd) mLaneOdd.color.setHex(laneLit);
+            if (mLaneEven) mLaneEven.color.setHex(laneDim);
+            // Keep the (otherwise vestigial) lane target color in sync with the
+            // lit lane so any future lane-blend consumer reads the themed value.
+            if (_laneTargetColor) _laneTargetColor.setHex(laneLit);
+            else _laneTargetColor = new T.Color(laneLit);
+        }
+
         /* ── Fretboard (static geometry) ────────────────────────────────── */
         function _h3dHexOrDefault(hexStr, defHex) {
             const d = defHex || BG_DEFAULTS.nutColor;
@@ -6967,7 +7143,12 @@
             // spawn horizon (-AHEAD * TS), so the far edge aligns with AHEAD.
             const blAhead = TS * AHEAD;
             const pg = new T.PlaneGeometry(bw, blAhead);
-            const pm = new T.MeshLambertMaterial({ color: 0x08080e, transparent: true, opacity: 0.6 });
+            // Board (highway-surface) color comes from the active HIGHWAY scene
+            // theme (default theme = the original 0x08080e). Kept on
+            // _boardPlaneMat so _applyBgTheme can recolor it live without
+            // rebuilding the board.
+            const pm = new T.MeshLambertMaterial({ color: _bgHighwayColors(hwThemeId).board, transparent: true, opacity: 0.6 });
+            _boardPlaneMat = pm;
             const p = new T.Mesh(pg, pm);
             p.rotation.x = -Math.PI / 2;
             p.position.set(board.center, S_BASE - NH / 2 - 2 * K, -blAhead / 2);
@@ -13156,7 +13337,7 @@
             if (ren) { ren.dispose(); ren = null; }
             scene = cam = noteG = beatG = lblG = fretG = tuningLblG = null;
             ambLight = dirLight = null;
-            mStr = []; mGlow = []; mSus = []; mStrHitOutline = []; mAccentOutline = []; mAccentCore = []; mAccentHaloNear = []; mAccentHaloMid = []; mAccentHaloFar = []; _accentShellsByString = []; mWhiteOutline = mSusOutline = null; mMissOutline = null; mHitSusOutline = null; stringLines = []; stringLineGlows = []; fretWireMats = []; fretTubeGeo?.dispose?.(); fretTubeGeo = null;
+            mStr = []; mGlow = []; mSus = []; mStrHitOutline = []; mAccentOutline = []; mAccentCore = []; mAccentHaloNear = []; mAccentHaloMid = []; mAccentHaloFar = []; _accentShellsByString = []; mWhiteOutline = mSusOutline = null; mMissOutline = null; mHitSusOutline = null; stringLines = []; stringLineGlows = []; _boardPlaneMat = null; fretWireMats = []; fretTubeGeo?.dispose?.(); fretTubeGeo = null;
             for (const m of _inlayMats) m?.dispose?.(); _inlayMats = []; _inlayLabels = [];
             // mTapChevron: dispose explicitly — if no tap marker ever
             // spawned a pooled mesh, the scene.traverse() pass above never
diff --git a/plugins/highway_3d/settings.html b/plugins/highway_3d/settings.html
index 210eb19..e6178f7 100644
--- a/plugins/highway_3d/settings.html
+++ b/plugins/highway_3d/settings.html
@@ -14,6 +14,15 @@
         <button type="button" onclick="window.hwcSaveTheme?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300">Save as…</button>
         <button type="button" onclick="window.hwcDeleteTheme?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-400">Delete</button>
     </div>
+    <!-- One-click presets: apply a whole named palette to every string at once.
+         Buttons are generated from window.feedBack.highwayColors.presets so the
+         list stays in sync with core (app.js HWC_PRESETS). Each calls
+         applyPreset(id), which persists + applies to both highways and refreshes
+         the pickers below. Older core without the presets API leaves this empty. -->
+    <div class="mb-3">
+        <span class="text-xs text-gray-500 mb-1 block">Quick presets</span>
+        <div id="hwc-presets" class="flex flex-wrap gap-2"></div>
+    </div>
     <div id="hwc-pickers" class="mb-3" style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;"></div>
     <div class="flex items-center gap-2 mb-2">
         <button type="button" onclick="window.hwcReset?.()" class="bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300">Reset to defaults</button>
@@ -36,6 +45,33 @@
             if (typeof window.hwcInitSettingsUI === 'function') {
                 try { window.hwcInitSettingsUI(); } catch (e) { console.warn('[3D-Hwy] hwcInitSettingsUI failed', e); }
             }
+            // Render the one-click preset buttons from core's preset list.
+            try {
+                const api = window.feedBack && window.feedBack.highwayColors;
+                const host = document.getElementById('hwc-presets');
+                if (api && Array.isArray(api.presets) && host) {
+                    host.innerHTML = '';
+                    // Slot order low → high for the preview swatch (bass-side first).
+                    const order = ['lowE', 'A', 'D', 'G', 'B', 'highE'];
+                    for (const p of api.presets) {
+                        const btn = document.createElement('button');
+                        btn.type = 'button';
+                        btn.className = 'flex items-center gap-2 bg-dark-700 border border-gray-800 rounded-lg px-2 py-1 text-xs text-gray-300';
+                        const sw = document.createElement('span');
+                        const stops = order.map((k) => p.colors[k]).filter(Boolean).join(',');
+                        sw.style.cssText = 'width:2.5rem;height:0.85rem;border-radius:3px;border:1px solid #0006;'
+                            + 'background:linear-gradient(90deg,' + stops + ');';
+                        btn.appendChild(sw);
+                        const txt = document.createElement('span');
+                        txt.textContent = p.label;
+                        btn.appendChild(txt);
+                        btn.addEventListener('click', function () {
+                            try { api.applyPreset(p.id); } catch (e) { console.warn('[3D-Hwy] applyPreset failed', e); }
+                        });
+                        host.appendChild(btn);
+                    }
+                }
+            } catch (e) { console.warn('[3D-Hwy] preset render failed', e); }
         })();
     </script>
 </div>
@@ -93,6 +129,36 @@
         </select>
     </div>
 
+    <!-- Scene colors — TWO independent axes sharing one palette family:
+         Background (clear + fog) and Highway (board surface + lit lane). Same
+         id-set in both, so any background can mix with any highway; picking the
+         same in both gives the original "matched" look. "Default" is the
+         original look on both. -->
+    <div class="mt-3">
+        <label for="h3d-bg-theme" class="text-xs font-medium text-gray-400 mb-1 block">Background</label>
+        <!-- Options are populated from SCENE_THEMES (the single id+label source)
+             in the hydration script below, so the two dropdowns can't drift. -->
+        <select id="h3d-bg-theme"
+            onchange="window.h3dBgSetBgTheme && window.h3dBgSetBgTheme(this.value)"
+            class="w-full bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300 outline-none">
+        </select>
+        <p class="text-[10px] text-gray-500 mt-1">
+            Tints the background + distance fog. Applies to the 3D highway immediately.
+        </p>
+    </div>
+    <div class="mt-3">
+        <label for="h3d-hw-theme" class="text-xs font-medium text-gray-400 mb-1 block">Highway (surface + lane)</label>
+        <!-- Options populated from SCENE_THEMES (see below), same source as the
+             Background dropdown so the two stay in lockstep. -->
+        <select id="h3d-hw-theme"
+            onchange="window.h3dBgSetHwTheme && window.h3dBgSetHwTheme(this.value)"
+            class="w-full bg-dark-700 border border-gray-800 rounded-lg px-3 py-2 text-xs text-gray-300 outline-none">
+        </select>
+        <p class="text-[10px] text-gray-500 mt-1">
+            Tints the fretboard surface + the lit lane. Applies to the 3D highway immediately.
+        </p>
+    </div>
+
     <!-- Intensity -->
     <div class="mt-3">
         <label for="h3d-bg-intensity" class="text-xs font-medium text-gray-400 mb-1 block">
@@ -712,8 +778,27 @@
          no-selection / NaN state. -->
     <script>
         (function () {
-            const DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
+            const DEFAULTS = { style: 'particles', intensity: 0.5, reactive: true, palette: 'default', bgTheme: 'default', hwTheme: 'default', showFretOnNote: true, fretNumberGhostScope: 'chords', cameraSmoothing: 0.5, zoomSmoothing: 0.5, tiltSmoothing: 0.5, cameraLockLow: false, cameraLockZoom: 0.5, cameraMode: 'lookahead', nutHeadstockVisible: true, tuningLabelsVisible: true, nutColor: '#f5f3f0', headstockColor: '#d4b48a', textSize: 0.5, vibrancy: 0.85, glow: 0.25, customImageDataUrl: '', customImageName: '', customVideoName: '', chordDiagramVisible: true, chordDiagramSize: 0.5, chordDiagramPosition: 'tl', fretColumnMarkerCadence: 1, projectionVisible: true, inlayLabelsVisible: false, sectionLabelsOnHighway: false, sectionHudVisible: false, sectionHudPosition: 'tr', sectionHudSize: 0.5, toneHudVisible: false, toneHudPosition: 'tl', toneHudSize: 0.5, fpsVisible: false, fretDividersVisible: true, slideArrowApproachVisible: true, slideArrowNeckVisible: true, slideArrowChainPreviewVisible: true };
             const VALID_STYLES = new Set(['off', 'particles', 'silhouettes', 'lights', 'geometric', 'image', 'video']);
+            // Scene color themes — the single id+label source for BOTH the
+            // Background and Highway dropdowns AND the validator below. The
+            // <option>s are generated from this list (see hydration), so the two
+            // dropdowns can't drift from each other or from VALID_BG_THEMES.
+            // Mirror these ids with screen.js BG_THEMES (the color table).
+            const SCENE_THEMES = [
+                { id: 'default',      label: 'Default (blue-black)' },
+                { id: 'midnight',     label: 'Midnight (deep blue)' },
+                { id: 'charcoal',     label: 'Charcoal (neutral gray)' },
+                { id: 'deeppurple',   label: 'Deep purple' },
+                { id: 'forest',       label: 'Forest (dark green)' },
+                { id: 'warmslate',    label: 'Warm Slate (espresso)' },
+                { id: 'deepfocus',    label: 'Deep Focus (near-black)' },
+                { id: 'deepsea',      label: 'Deep Sea (dark teal)' },
+                { id: 'cathode',      label: 'Cathode (amber CRT)' },
+                { id: 'cathodegreen', label: 'Cathode Green (green CRT)' },
+                { id: 'hearth',       label: 'Hearth (warm red)' },
+            ];
+            const VALID_BG_THEMES = new Set(SCENE_THEMES.map((t) => t.id));
             const VALID_CAMERA_MODES = new Set(['steady', 'lookahead']);
             // Chord diagram is top-only (bl/br removed).
             const VALID_CHORD_DIAG_POSITIONS = new Set(['tl', 'tr']);
@@ -771,6 +856,9 @@
             const VIDEO_UPLOAD_URL = '/api/plugins/highway_3d/files';
 
             function coerceStyle(v) { return VALID_STYLES.has(v) ? v : DEFAULTS.style; }
+            function coerceBgTheme(v) { return VALID_BG_THEMES.has(v) ? v : DEFAULTS.bgTheme; }
+            // Highway axis shares the same valid id-set as the background axis.
+            function coerceHwTheme(v) { return VALID_BG_THEMES.has(v) ? v : DEFAULTS.hwTheme; }
             function coerceCameraMode(v) {
                 if (v === 'classic') v = 'steady';
                 return VALID_CAMERA_MODES.has(v) ? v : DEFAULTS.cameraMode;
@@ -812,7 +900,7 @@
                 return fallback;
             }
 
-            let storedStyle = null, storedI = null, storedR = null, storedFretOnNote = null, storedFretNumberGhostScope = null;
+            let storedStyle = null, storedBgTheme = null, storedHwTheme = null, storedI = null, storedR = null, storedFretOnNote = null, storedFretNumberGhostScope = null;
             let storedCameraSmoothing = null;
             let storedCameraMode = null;
             let storedCustomImageDataUrl = null, storedCustomImageName = null;
@@ -848,6 +936,8 @@
             let storedSlideArrowChainPreviewVisible = null;
             try {
                 storedStyle = localStorage.getItem('h3d_bg_style');
+                storedBgTheme = localStorage.getItem('h3d_bg_bgTheme');
+                storedHwTheme = localStorage.getItem('h3d_bg_hwTheme');
                 storedI = localStorage.getItem('h3d_bg_intensity');
                 storedR = localStorage.getItem('h3d_bg_reactive');
                 storedFretOnNote = localStorage.getItem('h3d_bg_showFretOnNote');
@@ -889,6 +979,15 @@
             } catch (_) { /* storage blocked */ }
 
             const style = coerceStyle(storedStyle);
+            const bgTheme = coerceBgTheme(storedBgTheme);
+            // Highway axis. BACKWARD-COMPAT: when hwTheme was never written
+            // (pre-split installs, or the panel opened before the highway has
+            // mounted and run its one-time backfill), show the background pick —
+            // exactly the value screen.js will persist on first load — so the
+            // dropdown matches what's rendered. Once hwTheme is stored (which the
+            // renderer's backfill or any explicit pick does) it reads
+            // independently and the two axes no longer track each other.
+            const hwTheme = (storedHwTheme == null) ? bgTheme : coerceHwTheme(storedHwTheme);
             const intensity = coerceIntensity(storedI);
             const reactive = coerceBool(storedR, DEFAULTS.reactive);
             const showFretOnNote = coerceBool(storedFretOnNote, DEFAULTS.showFretOnNote);
@@ -959,6 +1058,20 @@
             const customVideoName    = (typeof storedCustomVideoName === 'string')    ? storedCustomVideoName    : DEFAULTS.customVideoName;
 
             const sel = document.getElementById('h3d-bg-style');
+            const bgThemeSel = document.getElementById('h3d-bg-theme');
+            const hwThemeSel = document.getElementById('h3d-hw-theme');
+            // Populate both scene-theme dropdowns from the single SCENE_THEMES
+            // source so they can't drift. (Values are selected further below.)
+            for (const selEl of [bgThemeSel, hwThemeSel]) {
+                if (!selEl) continue;
+                selEl.innerHTML = '';
+                for (const t of SCENE_THEMES) {
+                    const opt = document.createElement('option');
+                    opt.value = t.id;
+                    opt.textContent = t.label;
+                    selEl.appendChild(opt);
+                }
+            }
             const sli = document.getElementById('h3d-bg-intensity');
             const lbl = document.getElementById('h3d-bg-intensity-label');
             const rea = document.getElementById('h3d-bg-reactive');
@@ -1200,6 +1313,8 @@
                     sel.value = style;
                 }
             }
+            if (bgThemeSel) bgThemeSel.value = bgTheme;
+            if (hwThemeSel) hwThemeSel.value = hwTheme;
 
             if (fileInput) {
                 fileInput.addEventListener('change', function () {
diff --git a/static/app.js b/static/app.js
index 8b38566..0cbeebf 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2795,6 +2795,88 @@ const HWC_SLOT_KEYS = HWC_SLOTS.map((s) => s.key);
 // is queryable.
 const HWC_DEFAULT_FALLBACK = { lowE: '#cc0000', A: '#cca800', D: '#0066cc', G: '#cc6600', B: '#00cc66', highE: '#9900cc', low7: '#cc00aa', low8: '#00cccc' };
 
+// One-click string-color presets. Each is a full named-slot → hex map (every
+// slot, so 7/8-string charts get a sensible color too) keyed by the same slot
+// names as HWC_SLOTS, so "Low E" always lands on the lowE slot regardless of
+// string count. Hues are chosen for the dark scene (~#080810): each color is
+// bright enough to read on black and distinct from its neighbours.
+//   - warmcool: an ordered low→high spectrum (warm reds at the bass end →
+//     cool blues/violet at the treble end) so pitch reads as color temperature.
+//   - vivid: punchier, higher-saturation take on the classic mapping for a
+//     stage-bright look.
+//   - colorblind: the Okabe–Ito accessible qualitative palette (vermillion,
+//     orange, yellow, bluish-green, sky-blue, blue, reddish-purple), the most
+//     distinguishable option for deuteranopia/protanopia.
+//   - neon: electric, max-saturation hues whose LIGHTNESS deliberately zig-zags
+//     between neighbours (bright→bright→brightest→dark blue→bright green→dark
+//     violet) so adjacent strings separate harder than vivid — a stage/stream
+//     "pop" set, not a vivid duplicate.
+//   - accessible: a CVD-safe set ORDERED by ascending lightness low→high (deep
+//     blue → vermilion → azure → orange → yellow → cream). Unlike the unordered
+//     Okabe–Ito 'colorblind' set, the value ramp teaches pitch low→high AND
+//     survives grayscale/colorblindness; no red/green pair carries meaning.
+//   - ember: a warm, lower-intensity family for long sessions, luminance-stepped
+//     from rust/ember at the bass through warm gold to cream at the treble. The
+//     bass embers stay light enough to clear the near-black scene.
+//   - tapedeck: a vintage-print, slightly desaturated ochre-tinted family
+//     (rust-red → mustard → avocado → teal → faded denim → dusty plum). Muted
+//     hues collapse, so neighbour LIGHTNESS deliberately zig-zags to keep the
+//     dusty mid-strings (avocado/teal/denim) distinct on the dark board.
+//   - crtgreen / crtamber: monochrome CRT-phosphor families (green / amber)
+//     stepped by STRICT ASCENDING LIGHTNESS low→high. Mono sets collapse on hue,
+//     so lightness alone carries the ordering. Verified to stay legible even on
+//     the matching phosphor scene board (green-on-green / amber-on-amber).
+//   - pitchramp: a smooth low→high hue sweep (violet → blue → teal → green →
+//     yellow → warm-white) with rising lightness — memorable + teaches order.
+//   - sunrise: a soft dawn gradient (plum → rose → coral → amber → gold → cream),
+//     warm and lower-intensity, lightness-stepped low→high.
+const HWC_PRESETS = [
+    {
+        id: 'warmcool', label: 'Warm → Cool',
+        colors: { lowE: '#ff3b30', A: '#ff7a18', D: '#ffc400', G: '#36c46a', B: '#2196f3', highE: '#9b5cff', low7: '#ff2d78', low8: '#00c2c7' },
+    },
+    {
+        id: 'vivid', label: 'Vivid',
+        colors: { lowE: '#ff2222', A: '#ffd000', D: '#1e8bff', G: '#ff7a00', B: '#16d65a', highE: '#b24bff', low7: '#ff3cc0', low8: '#15d8d8' },
+    },
+    {
+        id: 'colorblind', label: 'Colorblind-friendly',
+        colors: { lowE: '#d55e00', A: '#e69f00', D: '#f0e442', G: '#009e73', B: '#56b4e9', highE: '#cc79a7', low7: '#0072b2', low8: '#999999' },
+    },
+    {
+        id: 'neon', label: 'Neon',
+        colors: { lowE: '#ff1f4e', A: '#ff9d00', D: '#e9ff00', G: '#1844ff', B: '#00ff84', highE: '#d000ff', low7: '#ff00aa', low8: '#00f0ff' },
+    },
+    {
+        id: 'accessible', label: 'Accessible (ordered)',
+        colors: { lowE: '#2453c0', A: '#c44a00', D: '#3f93cf', G: '#ec9a1e', B: '#f2d43c', highE: '#f5eecb', low7: '#173f96', low8: '#0f2c6b' },
+    },
+    {
+        id: 'ember', label: 'Warm Ember',
+        colors: { lowE: '#c0392b', A: '#e0552a', D: '#ef7d2e', G: '#f6a13a', B: '#f4c95d', highE: '#f7e3a8', low7: '#9e2f23', low8: '#7d2418' },
+    },
+    {
+        id: 'tapedeck', label: 'Tape Deck',
+        colors: { lowE: '#b04632', A: '#d8ad42', D: '#5f7a34', G: '#54b3a6', B: '#5e83ad', highE: '#b98abb', low7: '#8f3526', low8: '#6f2a1e' },
+    },
+    {
+        id: 'crtgreen', label: 'CRT Green',
+        colors: { lowE: '#0a5a23', A: '#108a30', D: '#1fb53f', G: '#3ad94f', B: '#74f06a', highE: '#c7ffb0', low7: '#08491c', low8: '#063514' },
+    },
+    {
+        id: 'crtamber', label: 'CRT Amber',
+        colors: { lowE: '#7a3a02', A: '#a85f06', D: '#cf8410', G: '#e8a82a', B: '#f4cf5e', highE: '#ffeeb8', low7: '#5f2d01', low8: '#471f00' },
+    },
+    {
+        id: 'pitchramp', label: 'Pitch Ramp',
+        colors: { lowE: '#7a2390', A: '#2f5ad8', D: '#1f9bc4', G: '#2fb84a', B: '#cfd22a', highE: '#f3e0c0', low7: '#5e1a78', low8: '#440f5e' },
+    },
+    {
+        id: 'sunrise', label: 'Sunrise',
+        colors: { lowE: '#8a3a6e', A: '#bf4a5e', D: '#e0664f', G: '#f29a55', B: '#f7c873', highE: '#fce8b8', low7: '#6e2c5c', low8: '#54214a' },
+    },
+];
+
 // Translation table: chart string index → named slot, for a given string count
 // and bass/guitar family. Mirrors the 3D highway's _baseOpenStringMidis: bass
 // shares the low strings (E A D G), 7/8-string guitars prepend lower strings,
@@ -2891,6 +2973,18 @@ function applyHighwayStringColors(slotMap, opts) {
     reapplyHighwayStringColors();
 }
 
+// Apply a named one-click string-color preset (see HWC_PRESETS) to all strings.
+// Persists + applies to both highways (via applyHighwayStringColors), then —
+// when the Settings UI is mounted — refreshes the per-string pickers so their
+// swatches show the preset's colors. Unknown id is a no-op.
+function applyHighwayStringPreset(id) {
+    const preset = HWC_PRESETS.find((p) => p.id === id);
+    if (!preset) return false;
+    applyHighwayStringColors(preset.colors);
+    try { if (typeof hwcRenderPickers === 'function') hwcRenderPickers(); } catch (_) {}
+    return true;
+}
+
 // Apply colors by NAMED string to both highways for the current arrangement.
 // Colors follow the string name regardless of count: Low E stays Low E's color
 // on a 6-, 7-, or 8-string. Defaults map identically to the stock order for
@@ -3062,6 +3156,10 @@ function _hwcInstallFacade() {
         // Set colors programmatically (persists + applies to both highways).
         // Pass a named slot map, or null/{} to revert to defaults.
         apply(slotMap) { return applyHighwayStringColors(slotMap); },
+        // One-click presets: [{ id, label, colors }] (full named-slot maps).
+        presets: HWC_PRESETS.map((p) => ({ id: p.id, label: p.label, colors: { ...p.colors } })),
+        // Apply a preset by id (persists + applies to both highways).
+        applyPreset(id) { return applyHighwayStringPreset(id); },
         // Share-code interop (the "SLOPHWY2." copy/paste format).
         encodeShare(name, slotMap) { return encodeHighwayColorShare(name, slotMap); },
         decodeShare(code) { return decodeHighwayColorShare(code); },