From 3e9740e8a38b40f2c7ce419843d9968dec25d0d2 Mon Sep 17 00:00:00 2001
From: Shreyan Chaubey <shreyan.chaubey@gmail.com>
Date: Thu, 17 Sep 2026 20:23:59 +0530
Subject: [PATCH] chore: remove dead code, and two facts that were stated twice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An audit for unreachable code and duplication. -595 lines of app source,
with every removal verified rather than assumed: 1947/1947 tests pass and
the bundle builds.

What went, and how each was established dead — no caller in js/, tests/,
index.html, or any `on*=` attribute string the app builds at runtime,
which is the half a scan of index.html alone understates:

  34 functions          -266   3 constants             -3
  38 import bindings      -5   4 bridge.js entries     -4
  16 CSS class families -137   2 CSS custom properties -70

Two of those are worth naming. `simNDTMLegacy` was a superseded NDTM
search, dead since `simNDTM` replaced it — and it still carried the
`Math.max(0, nh)` head clamp that js/tape.js exists to remove, the one
that reports a machine scanning off the front of its input as a clean
rejection. `--accent2` and `--minimap-viewport` were declared once per
theme, 35 times each, and read by nothing: the minimap is a 2D canvas and
takes its frame colour from the `Themes` registry, as the note at the top
of tests/themes.test.js already says. That test's guard on the dead token
is not dropped but repointed at `export.viewportStroke`, which is the
value that actually paints; it holds on all 21 themes.

Several removed functions carried comments claiming a caller they no
longer had — "the tests' way in", "what the tests exercise". A comment is
not a reference, and neither is an export.

Then two facts that were each written out many times:

`buildFormalDefLatex` (227 -> 159) was twenty branches each spelling out
the four rows they agree on. Every definition is the same list — the
tuple, a row per component, then δ — so that shape is stated once and a
branch supplies only what is particular to it. The four tape machines
shared a branch for the same reason. All 30 machines' LaTeX was snapshotted
before and after: 28 are byte-identical, and the two that differ are 2DFA
and 2NFA, which carried a trailing `\\` on their δ row that no other
machine has. KaTeX renders that as an empty row, so the box had a blank
line under δ on exactly those two.

`zoomIn`/`zoomOut`/`setZoomFromInput` (72 -> 58) were three copies of
"zoom about the centre of the viewport" plus four of the eased repaint.
The copies had drifted: two clamped by hand where `clampZoom` is meant to
be the single answer for every zoom path, one of them only at the
maximum, and they disagreed about how to measure the box —
`getBoundingClientRect` against `clientWidth`, which are the same number
here only because `.canvas-area` has no border, no padding and
`overflow: hidden`.

Every live CSS selector was diffed rule by rule against the previous
revision, with selector lists flattened to one entry each and duplicates
kept in source order: no surviving declaration changed. That check is
what caught the first two attempts at this, which orphaned the live
members of a list whose last selector was dead — `.algo-output` is the
last of eleven selectors on one rule, not a rule of its own.

Deliberately untouched: the 16,495 comment lines in js/, which record
which bug each rule prevents and are the only place that is written down;
and the per-theme alphas in css/variables.css, which are hand-tuned and
so cannot be collapsed into color-mix() without changing what is painted.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 css/mobile.css          |   31 +-
 css/modals.css          |   23 -
 css/variables.css       | 5457 +++++++++++++++++++--------------------
 css/views.css           |   88 +-
 js/algorithms-fa.js     |   80 -
 js/blocks-ui.js         |   11 -
 js/blocks.js            |    6 -
 js/bridge.js            |   12 +-
 js/canvas.js            |    2 +-
 js/dividers.js          |    8 +-
 js/export-ui.js         |    4 -
 js/file-host.js         |  Bin 7698 -> 7637 bytes
 js/glyphs.js            |    7 -
 js/grammar/analysis.js  |    8 +-
 js/grammar/model.js     |   17 -
 js/machine-guide.js     |    5 +-
 js/machines/index.js    |    5 -
 js/machines/registry.js |    3 -
 js/machines/run.js      |    4 -
 js/machines/twoway.js   |    4 -
 js/notes.js             |   22 -
 js/panel-list.js        |    6 -
 js/panel-sections-ui.js |    5 -
 js/persistence.js       |    4 +-
 js/render.js            |  306 +--
 js/simulation.js        |   23 +-
 js/statemate-agent.js   |   23 +-
 js/statemate-prompt.js  |    4 -
 js/statemate-spec.js    |   18 -
 js/statemate.js         |   22 +-
 js/store.js             |    7 -
 js/ui.js                |   98 +-
 js/utils.js             |    1 -
 js/view-graph.js        |    1 -
 js/viewport.js          |    3 -
 js/wizard.js            |   11 -
 js/workspace.js         |    1 -
 tests/themes.test.js    |   16 +-
 38 files changed, 2883 insertions(+), 3463 deletions(-)

diff --git a/css/mobile.css b/css/mobile.css
index 9b92052..b8e9d15 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -15,7 +15,6 @@
    what keeps a phone-shaped control from appearing on a desktop the moment
    somebody adds a rule that forgets the query. */
 .mobile-bar,
-.mobile-panel-bar,
 .mobile-panel-scrim,
 .mobile-more-menu,
 .mobile-sheet-head,
@@ -388,8 +387,6 @@
      floats over a phone's canvas. */
   .minimap-container,
   #minimap-toggle-btn,
-  .canvas-hint,
-  .zoom-indicator,
   .toolbox-kbd {
     display: none !important;
   }
@@ -404,16 +401,12 @@
   }
 
   .algo-content .card,
-  .pump-section,
-  .hierarchy-section,
   .ref-card,
   .info-box {
     overflow-x: auto;
   }
 
   .card,
-  .pump-section,
-  .hierarchy-section,
   .ref-card {
     padding: 14px;
   }
@@ -434,7 +427,6 @@
   .row,
   .sim-row,
   .regex-input-wrap,
-  .pump-row,
   .modal-row,
   .modal-foot {
     flex-wrap: wrap;
@@ -502,22 +494,13 @@
     font-size: 1rem;
   }
 
-  .ref-section-sub,
-  .tc-sub {
+  .ref-section-sub {
     line-height: 1.5;
   }
-
-  .closure-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .pump-lbl,
   .modal-lbl {
     min-width: 0;
     width: 100%;
   }
-
-  .pump-row .inp,
   .modal-row .inp,
   .modal-row .sel {
     flex: 1 1 140px;
@@ -530,8 +513,6 @@
   .help-table td,
   .result-table th,
   .result-table td,
-  .dec-table th,
-  .dec-table td,
   .gram-table th,
   .gram-table td,
   .gram-cyk th,
@@ -542,7 +523,6 @@
   }
 
   .result-table,
-  .dec-table,
   .help-table,
   .gram-cyk,
   .gram-table,
@@ -586,10 +566,6 @@
     padding: 5px 8px;
   }
 
-  .closure-grid {
-    grid-template-columns: 1fr;
-  }
-
   /* Retunes the tokens rather than the padding, so the sticky title's and
      footer's negative bleed margins in css/modals.css track the new value
      instead of overhanging by the desktop one. */
@@ -1134,11 +1110,6 @@
     transition-delay: 0s, 0s;
   }
 
-  /* The old bar's three buttons are one cell now; the ids are gone with it. */
-  .mobile-panel-bar {
-    display: none !important;
-  }
-
   /* The bar is hidden while an auxiliary view is up — the aux bar takes the
      same slot, at the same height — so the Fit button and the info pill move
      down to the canvas's own edge with it. Measured in JS rather than
diff --git a/css/modals.css b/css/modals.css
index ea14f8d..040f1e3 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -3209,29 +3209,6 @@ button.sm-stat:disabled {
   opacity: 1;
 }
 
-/* ── Computation tree ── */
-.ct-node {
-  font-family: var(--mono);
-  font-size: .68rem;
-  padding: 4px 8px;
-  border-radius: 5px;
-  border: 1px solid var(--border2);
-  background: var(--surface);
-  display: inline-block;
-}
-
-.ct-node.accept {
-  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
-  color: var(--gold);
-  background: color-mix(in srgb, var(--gold) 8%, transparent);
-}
-
-.ct-node.reject {
-  border-color: var(--red-border);
-  color: var(--red);
-  background: color-mix(in srgb, var(--red) 5%, transparent);
-}
-
 /* ── Help modal ── */
 
 .help-table {
diff --git a/css/variables.css b/css/variables.css
index 05908de..ebd99fc 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -1,2769 +1,2698 @@
-:root {
-  color-scheme: dark;
-  --bg: #080c18;
-  --bg2: #0d1220;
-  --bg3: #131928;
-  --surface: #161d2e;
-  --surface2: #1c2438;
-  --surface3: #222c42;
-  --border: rgba(100, 130, 200, 0.12);
-  --border2: rgba(100, 130, 200, 0.22);
-  --sb-thumb: rgba(100, 130, 200, 0.26);
-  --sb-thumb-hover: rgba(120, 150, 220, 0.44);
-  --sb-thumb-active: rgba(140, 170, 240, 0.62);
-  --text: #c8d4f0;
-  --text2: #7a8ab0;
-  --text3: #4a5878;
-  --accent: #4fc3f7;
-  --accent2: #7c4dff;
-  --violet: #b388ff;
-  --indigo: #7c4dff;
-  --blue: #4fc3f7;
-  --gold: #ffd54f;
-  --green: #69f0ae;
-  --red: #ff6b6b;
-  --orange: #ffb74d;
-  --purple: #ce93d8;
-  --on-accent: #08111f;
-  --mono: 'JetBrains Mono', monospace;
-  --sans: 'DM Sans', sans-serif;
-  --serif: 'Crimson Pro', serif;
-  --r: 8px;
-  /* Single unified header bar; there is no longer a second toolbar row. */
-  --hdr: 48px;
-  /* The header and both sidebars are one unbroken --bg2 surface, and the canvas
-     is a well cut into it. This is the radius of that cutout — so the curve
-     belongs to the canvas, and what each panel shows at its inner corners is
-     the concave outside of it. mobile.css zeroes it where the panels stop
-     being rails and the well stops having chrome beside it. */
+:root {
+  color-scheme: dark;
+  --bg: #080c18;
+  --bg2: #0d1220;
+  --bg3: #131928;
+  --surface: #161d2e;
+  --surface2: #1c2438;
+  --surface3: #222c42;
+  --border: rgba(100, 130, 200, 0.12);
+  --border2: rgba(100, 130, 200, 0.22);
+  --sb-thumb: rgba(100, 130, 200, 0.26);
+  --sb-thumb-hover: rgba(120, 150, 220, 0.44);
+  --sb-thumb-active: rgba(140, 170, 240, 0.62);
+  --text: #c8d4f0;
+  --text2: #7a8ab0;
+  --text3: #4a5878;
+  --accent: #4fc3f7;
+  --violet: #b388ff;
+  --indigo: #7c4dff;
+  --blue: #4fc3f7;
+  --gold: #ffd54f;
+  --green: #69f0ae;
+  --red: #ff6b6b;
+  --orange: #ffb74d;
+  --purple: #ce93d8;
+  --on-accent: #08111f;
+  --mono: 'JetBrains Mono', monospace;
+  --sans: 'DM Sans', sans-serif;
+  --serif: 'Crimson Pro', serif;
+  --r: 8px;
+  /* Single unified header bar; there is no longer a second toolbar row. */
+  --hdr: 48px;
+  /* The header and both sidebars are one unbroken --bg2 surface, and the canvas
+     is a well cut into it. This is the radius of that cutout — so the curve
+     belongs to the canvas, and what each panel shows at its inner corners is
+     the concave outside of it. mobile.css zeroes it where the panels stop
+     being rails and the well stops having chrome beside it. */
   --canvas-radius: 14px;
-  /* The well had chrome on three sides only — header above, a sidebar either
-     side, and nothing under it, which left the bottom corners curving into a
-     window edge instead of into a frame. This is the sill that closes it: the
-     canvas stops short by this much and the panels carry --bg2 across the gap,
-     so the frame runs all the way round. */
+  /* The well had chrome on three sides only — header above, a sidebar either
+     side, and nothing under it, which left the bottom corners curving into a
+     window edge instead of into a frame. This is the sill that closes it: the
+     canvas stops short by this much and the panels carry --bg2 across the gap,
+     so the frame runs all the way round. */
   --canvas-sill: 14px;
   --overlay: rgba(2, 8, 20, .68);
   --overlay-blur: 3px;
   --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(79, 195, 247, .08);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .16);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .16);
-  --accent-soft: rgba(79, 195, 247, .1);
-  --accent-soft-strong: rgba(79, 195, 247, .18);
-  --accent-border: rgba(79, 195, 247, .25);
-  --accent-border-strong: rgba(79, 195, 247, .4);
-  --accent-glow: 0 0 14px rgba(79, 195, 247, .35);
-  --tab-hover-bg: rgba(255, 255, 255, .035);
-  --tab-active-bg: rgba(79, 195, 247, .11);
-  --tab-active-border: rgba(79, 195, 247, .28);
-  --tab-active-line: rgba(79, 195, 247, .95);
-  --tab-overflow-shadow: rgba(2, 7, 16, .62);
-  --violet-soft: rgba(179, 136, 255, .14);
-  --violet-border: rgba(179, 136, 255, .32);
-  --indigo-soft: rgba(124, 77, 255, .13);
-  --indigo-border: rgba(124, 77, 255, .3);
-  --blue-soft: rgba(79, 195, 247, .11);
-  --blue-border: rgba(79, 195, 247, .3);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(206, 147, 216, .14);
-  --purple-border: rgba(206, 147, 216, .3);
-  --green-soft: rgba(105, 240, 174, .1);
-  --green-border: rgba(105, 240, 174, .3);
-  --gold-soft: rgba(255, 213, 79, .12);
-  --gold-border: rgba(255, 213, 79, .3);
-  --note-yellow: #fff176;
-  --note-yellow-soft: rgba(255, 241, 118, .18);
-  --note-yellow-border: rgba(255, 241, 118, .42);
-  --orange-soft: rgba(255, 183, 77, .1);
-  --orange-border: rgba(255, 183, 77, .3);
-  --red-soft: rgba(255, 107, 107, .1);
-  --red-border: rgba(255, 107, 107, .3);
-  --canvas-glow-a: rgba(79, 195, 247, .035);
-  --canvas-glow-b: rgba(124, 77, 255, .03);
-  --state-active-fill: rgba(79, 195, 247, .18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(79, 195, 247, .45));
-  --state-reject-fill: rgba(255, 107, 107, .1);
-  --marquee-fill: rgba(79, 195, 247, .1);
-  --minimap-viewport: rgba(79, 195, 247, .6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
-  --transition-fast: 0.12s ease;
-  --transition-base: 0.18s ease;
-}
-
-:root[data-theme="light"] {
-  color-scheme: light;
-  --bg: #eef4fb;
-  --bg2: #f8fbff;
-  --bg3: #e8f0f8;
-  --surface: #ffffff;
-  --surface2: #f4f8fd;
-  --surface3: #e1eaf5;
-  --border: rgba(41, 73, 109, 0.12);
-  --border2: rgba(41, 73, 109, 0.2);
-  --sb-thumb: rgba(41, 73, 109, 0.24);
-  --sb-thumb-hover: rgba(41, 73, 109, 0.4);
-  --sb-thumb-active: rgba(41, 73, 109, 0.56);
-  --text: #16324a;
-  --text2: #496277;
-  --text3: #7d92a6;
-  --accent: #178ed8;
-  --accent2: #6858e8;
-  --violet: #8458cf;
-  --indigo: #4f46c8;
-  --blue: #178ed8;
-  --gold: #b7791f;
-  --green: #198b63;
-  --red: #cb4545;
-  --orange: #d97706;
-  --purple: #8458cf;
-  --on-accent: #f8fbff;
-  --overlay: rgba(24, 45, 70, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(23, 142, 216, .14);
-  --panel-shadow-left: 2px 0 18px rgba(34, 58, 86, .12);
-  --panel-shadow-right: -2px 0 18px rgba(34, 58, 86, .12);
-  --accent-soft: rgba(23, 142, 216, .1);
-  --accent-soft-strong: rgba(23, 142, 216, .16);
-  --accent-border: rgba(23, 142, 216, .22);
-  --accent-border-strong: rgba(23, 142, 216, .34);
-  --accent-glow: 0 10px 24px rgba(23, 142, 216, .18);
-  --tab-hover-bg: rgba(22, 50, 74, .05);
-  --tab-active-bg: rgba(23, 142, 216, .095);
-  --tab-active-border: rgba(23, 142, 216, .28);
-  --tab-active-line: rgba(23, 142, 216, .92);
-  --tab-overflow-shadow: rgba(113, 136, 167, .36);
-  --violet-soft: rgba(132, 88, 207, .12);
-  --violet-border: rgba(132, 88, 207, .24);
-  --indigo-soft: rgba(79, 70, 200, .1);
-  --indigo-border: rgba(79, 70, 200, .24);
-  --blue-soft: rgba(23, 142, 216, .1);
-  --blue-border: rgba(23, 142, 216, .24);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .96);
-  --white-note-border: rgba(41, 73, 109, .22);
-  --purple-soft: rgba(132, 88, 207, .12);
-  --purple-border: rgba(132, 88, 207, .24);
-  --green-soft: rgba(25, 139, 99, .1);
-  --green-border: rgba(25, 139, 99, .24);
-  --gold-soft: rgba(183, 121, 31, .11);
-  --gold-border: rgba(183, 121, 31, .24);
-  --note-yellow: #f5d742;
-  --note-yellow-soft: rgba(245, 215, 66, .22);
-  --note-yellow-border: rgba(153, 125, 12, .3);
-  --orange-soft: rgba(217, 119, 6, .1);
-  --orange-border: rgba(217, 119, 6, .24);
-  --red-soft: rgba(203, 69, 69, .09);
-  --red-border: rgba(203, 69, 69, .24);
-  --canvas-glow-a: rgba(23, 142, 216, .055);
-  --canvas-glow-b: rgba(104, 88, 232, .04);
-  --state-active-fill: rgba(23, 142, 216, .12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(23, 142, 216, .14));
-  --state-reject-fill: rgba(203, 69, 69, .08);
-  --marquee-fill: rgba(23, 142, 216, .08);
-  --minimap-viewport: rgba(23, 142, 216, .45);
-  --shadow-sm: 0 2px 10px rgba(31, 53, 80, .08);
-  --shadow-md: 0 10px 28px rgba(31, 53, 80, .12);
-  --shadow-lg: 0 20px 56px rgba(31, 53, 80, .16);
-}
-
-:root[data-theme="nord"] {
-  color-scheme: dark;
-  --bg: #2e3440;
-  --bg2: #272c36;
-  --bg3: #3b4252;
-  --surface: #3b4252;
-  --surface2: #434c5e;
-  --surface3: #4c566a;
-  --border: rgba(136, 192, 208, 0.12);
-  --border2: rgba(136, 192, 208, 0.22);
-  --sb-thumb: rgba(136, 192, 208, 0.26);
-  --sb-thumb-hover: rgba(136, 192, 208, 0.42);
-  --sb-thumb-active: rgba(136, 192, 208, 0.6);
-  --text: #eceff4;
-  --text2: #c3cad9;
-  --text3: #8b96ad;
-  --accent: #88c0d0;
-  --accent2: #81a1c1;
-  --violet: #b48ead;
-  --indigo: #5e81ac;
-  --blue: #88c0d0;
-  --gold: #ebcb8b;
-  --green: #a3be8c;
-  --red: #bf616a;
-  --orange: #d08770;
-  --purple: #b48ead;
-  --on-accent: #20242c;
-  --overlay: rgba(46, 52, 64, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(136, 192, 208, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(136, 192, 208, 0.1);
-  --accent-soft-strong: rgba(136, 192, 208, 0.18);
-  --accent-border: rgba(136, 192, 208, 0.26);
-  --accent-border-strong: rgba(136, 192, 208, 0.4);
-  --accent-glow: 0 0 14px rgba(136, 192, 208, 0.32);
-  --tab-hover-bg: rgba(236, 239, 244, 0.04);
-  --tab-active-bg: rgba(136, 192, 208, 0.13);
-  --tab-active-border: rgba(136, 192, 208, 0.28);
-  --tab-active-line: rgba(136, 192, 208, 0.95);
-  --tab-overflow-shadow: rgba(46, 52, 64, 0.62);
-  --violet-soft: rgba(180, 142, 173, 0.13);
-  --violet-border: rgba(180, 142, 173, 0.28);
-  --indigo-soft: rgba(94, 129, 172, 0.12);
-  --indigo-border: rgba(94, 129, 172, 0.26);
-  --blue-soft: rgba(136, 192, 208, 0.1);
-  --blue-border: rgba(136, 192, 208, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(180, 142, 173, 0.13);
-  --purple-border: rgba(180, 142, 173, 0.28);
-  --green-soft: rgba(163, 190, 140, 0.11);
-  --green-border: rgba(163, 190, 140, 0.27);
-  --gold-soft: rgba(235, 203, 139, 0.12);
-  --gold-border: rgba(235, 203, 139, 0.28);
-  --note-yellow: #ebcb8b;
-  --note-yellow-soft: rgba(235, 203, 139, 0.18);
-  --note-yellow-border: rgba(235, 203, 139, 0.4);
-  --orange-soft: rgba(208, 135, 112, 0.11);
-  --orange-border: rgba(208, 135, 112, 0.27);
-  --red-soft: rgba(191, 97, 106, 0.1);
-  --red-border: rgba(191, 97, 106, 0.27);
-  --canvas-glow-a: rgba(136, 192, 208, 0.045);
-  --canvas-glow-b: rgba(180, 142, 173, 0.035);
-  --state-active-fill: rgba(136, 192, 208, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(136, 192, 208, 0.42));
-  --state-reject-fill: rgba(191, 97, 106, 0.1);
-  --marquee-fill: rgba(136, 192, 208, 0.1);
-  --minimap-viewport: rgba(136, 192, 208, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="solarized-light"] {
-  color-scheme: light;
-  --bg: #fdf6e3;
-  --bg2: #f7f0da;
-  --bg3: #eee8d5;
-  --surface: #ffffff;
-  --surface2: #f7f2e3;
-  --surface3: #eee8d5;
-  --border: rgba(101, 123, 131, 0.14);
-  --border2: rgba(101, 123, 131, 0.24);
-  --sb-thumb: rgba(101, 123, 131, 0.26);
-  --sb-thumb-hover: rgba(101, 123, 131, 0.4);
-  --sb-thumb-active: rgba(101, 123, 131, 0.56);
-  --text: #073642;
-  --text2: #586e75;
-  --text3: #93a1a1;
-  --accent: #b58900;
-  --accent2: #268bd2;
-  --violet: #6c71c4;
-  --indigo: #6c71c4;
-  --blue: #268bd2;
-  --gold: #b58900;
-  --green: #859900;
-  --red: #dc322f;
-  --orange: #cb4b16;
-  --purple: #d33682;
-  --on-accent: #fdf6e3;
-  --overlay: rgba(101, 123, 131, 0.26);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(181, 137, 0, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
-  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
-  --accent-soft: rgba(181, 137, 0, 0.1);
-  --accent-soft-strong: rgba(181, 137, 0, 0.18);
-  --accent-border: rgba(181, 137, 0, 0.24);
-  --accent-border-strong: rgba(181, 137, 0, 0.36);
-  --accent-glow: 0 10px 24px rgba(181, 137, 0, 0.16);
-  --tab-hover-bg: rgba(101, 123, 131, 0.05);
-  --tab-active-bg: rgba(181, 137, 0, 0.095);
-  --tab-active-border: rgba(181, 137, 0, 0.28);
-  --tab-active-line: rgba(181, 137, 0, 0.9);
-  --tab-overflow-shadow: rgba(101, 123, 131, 0.36);
-  --violet-soft: rgba(108, 113, 196, 0.13);
-  --violet-border: rgba(108, 113, 196, 0.28);
-  --indigo-soft: rgba(108, 113, 196, 0.12);
-  --indigo-border: rgba(108, 113, 196, 0.26);
-  --blue-soft: rgba(38, 139, 210, 0.1);
-  --blue-border: rgba(38, 139, 210, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(101, 123, 131, 0.22);
-  --purple-soft: rgba(211, 54, 130, 0.13);
-  --purple-border: rgba(211, 54, 130, 0.28);
-  --green-soft: rgba(133, 153, 0, 0.11);
-  --green-border: rgba(133, 153, 0, 0.27);
-  --gold-soft: rgba(181, 137, 0, 0.12);
-  --gold-border: rgba(181, 137, 0, 0.28);
-  --note-yellow: #b58900;
-  --note-yellow-soft: rgba(181, 137, 0, 0.2);
-  --note-yellow-border: rgba(181, 137, 0, 0.32);
-  --orange-soft: rgba(203, 75, 22, 0.11);
-  --orange-border: rgba(203, 75, 22, 0.27);
-  --red-soft: rgba(220, 50, 47, 0.1);
-  --red-border: rgba(220, 50, 47, 0.27);
-  --canvas-glow-a: rgba(181, 137, 0, 0.05);
-  --canvas-glow-b: rgba(108, 113, 196, 0.04);
-  --state-active-fill: rgba(181, 137, 0, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(181, 137, 0, 0.14));
-  --state-reject-fill: rgba(220, 50, 47, 0.09);
-  --marquee-fill: rgba(181, 137, 0, 0.08);
-  --minimap-viewport: rgba(181, 137, 0, 0.45);
-  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
-  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
-  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
-}
-
-:root[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --bg: #002b36;
-  --bg2: #012933;
-  --bg3: #073642;
-  --surface: #073642;
-  --surface2: #0a4757;
-  --surface3: #0e5468;
-  --border: rgba(42, 161, 152, 0.12);
-  --border2: rgba(42, 161, 152, 0.22);
-  --sb-thumb: rgba(42, 161, 152, 0.26);
-  --sb-thumb-hover: rgba(42, 161, 152, 0.42);
-  --sb-thumb-active: rgba(42, 161, 152, 0.6);
-  --text: #eee8d5;
-  --text2: #93a1a1;
-  --text3: #657b83;
-  --accent: #2aa198;
-  --accent2: #268bd2;
-  --violet: #6c71c4;
-  --indigo: #268bd2;
-  --blue: #268bd2;
-  --gold: #b58900;
-  --green: #859900;
-  --red: #dc322f;
-  --orange: #cb4b16;
-  --purple: #d33682;
-  --on-accent: #002b36;
-  --overlay: rgba(0, 43, 54, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(42, 161, 152, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(42, 161, 152, 0.1);
-  --accent-soft-strong: rgba(42, 161, 152, 0.18);
-  --accent-border: rgba(42, 161, 152, 0.26);
-  --accent-border-strong: rgba(42, 161, 152, 0.4);
-  --accent-glow: 0 0 14px rgba(42, 161, 152, 0.32);
-  --tab-hover-bg: rgba(238, 232, 213, 0.04);
-  --tab-active-bg: rgba(42, 161, 152, 0.13);
-  --tab-active-border: rgba(42, 161, 152, 0.28);
-  --tab-active-line: rgba(42, 161, 152, 0.95);
-  --tab-overflow-shadow: rgba(0, 43, 54, 0.62);
-  --violet-soft: rgba(108, 113, 196, 0.13);
-  --violet-border: rgba(108, 113, 196, 0.28);
-  --indigo-soft: rgba(38, 139, 210, 0.12);
-  --indigo-border: rgba(38, 139, 210, 0.26);
-  --blue-soft: rgba(38, 139, 210, 0.1);
-  --blue-border: rgba(38, 139, 210, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(211, 54, 130, 0.13);
-  --purple-border: rgba(211, 54, 130, 0.28);
-  --green-soft: rgba(133, 153, 0, 0.11);
-  --green-border: rgba(133, 153, 0, 0.27);
-  --gold-soft: rgba(181, 137, 0, 0.12);
-  --gold-border: rgba(181, 137, 0, 0.28);
-  --note-yellow: #b58900;
-  --note-yellow-soft: rgba(181, 137, 0, 0.18);
-  --note-yellow-border: rgba(181, 137, 0, 0.4);
-  --orange-soft: rgba(203, 75, 22, 0.11);
-  --orange-border: rgba(203, 75, 22, 0.27);
-  --red-soft: rgba(220, 50, 47, 0.1);
-  --red-border: rgba(220, 50, 47, 0.27);
-  --canvas-glow-a: rgba(42, 161, 152, 0.045);
-  --canvas-glow-b: rgba(108, 113, 196, 0.035);
-  --state-active-fill: rgba(42, 161, 152, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(42, 161, 152, 0.42));
-  --state-reject-fill: rgba(220, 50, 47, 0.1);
-  --marquee-fill: rgba(42, 161, 152, 0.1);
-  --minimap-viewport: rgba(42, 161, 152, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="dracula"] {
-  color-scheme: dark;
-  --bg: #282a36;
-  --bg2: #21222c;
-  --bg3: #343746;
-  --surface: #343746;
-  --surface2: #3d4052;
-  --surface3: #44475a;
-  --border: rgba(189, 147, 249, 0.12);
-  --border2: rgba(189, 147, 249, 0.22);
-  --sb-thumb: rgba(189, 147, 249, 0.26);
-  --sb-thumb-hover: rgba(189, 147, 249, 0.42);
-  --sb-thumb-active: rgba(189, 147, 249, 0.6);
-  --text: #f8f8f2;
-  --text2: #bfc1cc;
-  --text3: #7b7f9e;
-  --accent: #bd93f9;
-  --accent2: #ff79c6;
-  --violet: #bd93f9;
-  --indigo: #6272a4;
-  --blue: #8be9fd;
-  --gold: #f1fa8c;
-  --green: #50fa7b;
-  --red: #ff5555;
-  --orange: #ffb86c;
-  --purple: #ff79c6;
-  --on-accent: #1e1f29;
-  --overlay: rgba(40, 42, 54, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(189, 147, 249, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(189, 147, 249, 0.1);
-  --accent-soft-strong: rgba(189, 147, 249, 0.18);
-  --accent-border: rgba(189, 147, 249, 0.26);
-  --accent-border-strong: rgba(189, 147, 249, 0.4);
-  --accent-glow: 0 0 14px rgba(189, 147, 249, 0.32);
-  --tab-hover-bg: rgba(248, 248, 242, 0.04);
-  --tab-active-bg: rgba(189, 147, 249, 0.13);
-  --tab-active-border: rgba(189, 147, 249, 0.28);
-  --tab-active-line: rgba(189, 147, 249, 0.95);
-  --tab-overflow-shadow: rgba(40, 42, 54, 0.62);
-  --violet-soft: rgba(189, 147, 249, 0.13);
-  --violet-border: rgba(189, 147, 249, 0.28);
-  --indigo-soft: rgba(98, 114, 164, 0.12);
-  --indigo-border: rgba(98, 114, 164, 0.26);
-  --blue-soft: rgba(139, 233, 253, 0.1);
-  --blue-border: rgba(139, 233, 253, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(255, 121, 198, 0.13);
-  --purple-border: rgba(255, 121, 198, 0.28);
-  --green-soft: rgba(80, 250, 123, 0.11);
-  --green-border: rgba(80, 250, 123, 0.27);
-  --gold-soft: rgba(241, 250, 140, 0.12);
-  --gold-border: rgba(241, 250, 140, 0.28);
-  --note-yellow: #f1fa8c;
-  --note-yellow-soft: rgba(241, 250, 140, 0.18);
-  --note-yellow-border: rgba(241, 250, 140, 0.4);
-  --orange-soft: rgba(255, 184, 108, 0.11);
-  --orange-border: rgba(255, 184, 108, 0.27);
-  --red-soft: rgba(255, 85, 85, 0.1);
-  --red-border: rgba(255, 85, 85, 0.27);
-  --canvas-glow-a: rgba(189, 147, 249, 0.045);
-  --canvas-glow-b: rgba(189, 147, 249, 0.035);
-  --state-active-fill: rgba(189, 147, 249, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(189, 147, 249, 0.42));
-  --state-reject-fill: rgba(255, 85, 85, 0.1);
-  --marquee-fill: rgba(189, 147, 249, 0.1);
-  --minimap-viewport: rgba(189, 147, 249, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="gruvbox"] {
-  color-scheme: dark;
-  --bg: #282828;
-  --bg2: #1d2021;
-  --bg3: #3c3836;
-  --surface: #3c3836;
-  --surface2: #504945;
-  --surface3: #665c54;
-  --border: rgba(254, 128, 25, 0.12);
-  --border2: rgba(254, 128, 25, 0.22);
-  --sb-thumb: rgba(254, 128, 25, 0.26);
-  --sb-thumb-hover: rgba(254, 128, 25, 0.42);
-  --sb-thumb-active: rgba(254, 128, 25, 0.6);
-  --text: #ebdbb2;
-  --text2: #bdae93;
-  --text3: #a89984;
-  --accent: #fe8019;
-  --accent2: #fabd2f;
-  --violet: #d3869b;
-  --indigo: #83a598;
-  --blue: #83a598;
-  --gold: #fabd2f;
-  --green: #b8bb26;
-  --red: #fb4934;
-  --orange: #fe8019;
-  --purple: #d3869b;
-  --on-accent: #1d2021;
-  --overlay: rgba(40, 40, 40, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(254, 128, 25, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(254, 128, 25, 0.1);
-  --accent-soft-strong: rgba(254, 128, 25, 0.18);
-  --accent-border: rgba(254, 128, 25, 0.26);
-  --accent-border-strong: rgba(254, 128, 25, 0.4);
-  --accent-glow: 0 0 14px rgba(254, 128, 25, 0.32);
-  --tab-hover-bg: rgba(235, 219, 178, 0.04);
-  --tab-active-bg: rgba(254, 128, 25, 0.13);
-  --tab-active-border: rgba(254, 128, 25, 0.28);
-  --tab-active-line: rgba(254, 128, 25, 0.95);
-  --tab-overflow-shadow: rgba(40, 40, 40, 0.62);
-  --violet-soft: rgba(211, 134, 155, 0.13);
-  --violet-border: rgba(211, 134, 155, 0.28);
-  --indigo-soft: rgba(131, 165, 152, 0.12);
-  --indigo-border: rgba(131, 165, 152, 0.26);
-  --blue-soft: rgba(131, 165, 152, 0.1);
-  --blue-border: rgba(131, 165, 152, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(211, 134, 155, 0.13);
-  --purple-border: rgba(211, 134, 155, 0.28);
-  --green-soft: rgba(184, 187, 38, 0.11);
-  --green-border: rgba(184, 187, 38, 0.27);
-  --gold-soft: rgba(250, 189, 47, 0.12);
-  --gold-border: rgba(250, 189, 47, 0.28);
-  --note-yellow: #fabd2f;
-  --note-yellow-soft: rgba(250, 189, 47, 0.18);
-  --note-yellow-border: rgba(250, 189, 47, 0.4);
-  --orange-soft: rgba(254, 128, 25, 0.11);
-  --orange-border: rgba(254, 128, 25, 0.27);
-  --red-soft: rgba(251, 73, 52, 0.1);
-  --red-border: rgba(251, 73, 52, 0.27);
-  --canvas-glow-a: rgba(254, 128, 25, 0.045);
-  --canvas-glow-b: rgba(211, 134, 155, 0.035);
-  --state-active-fill: rgba(254, 128, 25, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(254, 128, 25, 0.42));
-  --state-reject-fill: rgba(251, 73, 52, 0.1);
-  --marquee-fill: rgba(254, 128, 25, 0.1);
-  --minimap-viewport: rgba(254, 128, 25, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="gruvbox-light"] {
-  color-scheme: light;
-  --bg: #fbf1c7;
-  --bg2: #f9f5d7;
-  --bg3: #ebdbb2;
-  --surface: #f9f5d7;
-  --surface2: #f5eecd;
-  --surface3: #ebdbb2;
-  --border: rgba(80, 73, 69, 0.16);
-  --border2: rgba(80, 73, 69, 0.26);
-  --sb-thumb: rgba(80, 73, 69, 0.26);
-  --sb-thumb-hover: rgba(80, 73, 69, 0.4);
-  --sb-thumb-active: rgba(80, 73, 69, 0.56);
-  --text: #3c3836;
-  --text2: #504945;
-  --text3: #7c6f64;
-  --accent: #076678;
-  --accent2: #8f3f71;
-  --violet: #8f3f71;
-  --indigo: #076678;
-  --blue: #076678;
-  --gold: #b57614;
-  --green: #79740e;
-  --red: #9d0006;
-  --orange: #af3a03;
-  --purple: #8f3f71;
-  --on-accent: #f9f5d7;
-  --overlay: rgba(80, 73, 69, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(7, 102, 120, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(60, 56, 54, .1);
-  --panel-shadow-right: -2px 0 18px rgba(60, 56, 54, .1);
-  --accent-soft: rgba(7, 102, 120, 0.1);
-  --accent-soft-strong: rgba(7, 102, 120, 0.18);
-  --accent-border: rgba(7, 102, 120, 0.24);
-  --accent-border-strong: rgba(7, 102, 120, 0.36);
-  --accent-glow: 0 10px 24px rgba(7, 102, 120, 0.16);
-  --tab-hover-bg: rgba(80, 73, 69, 0.05);
-  --tab-active-bg: rgba(7, 102, 120, 0.095);
-  --tab-active-border: rgba(7, 102, 120, 0.28);
-  --tab-active-line: rgba(7, 102, 120, 0.9);
-  --tab-overflow-shadow: rgba(80, 73, 69, 0.36);
-  --violet-soft: rgba(143, 63, 113, 0.13);
-  --violet-border: rgba(143, 63, 113, 0.28);
-  --indigo-soft: rgba(7, 102, 120, 0.12);
-  --indigo-border: rgba(7, 102, 120, 0.26);
-  --blue-soft: rgba(7, 102, 120, 0.1);
-  --blue-border: rgba(7, 102, 120, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(80, 73, 69, 0.22);
-  --purple-soft: rgba(143, 63, 113, 0.13);
-  --purple-border: rgba(143, 63, 113, 0.28);
-  --green-soft: rgba(121, 116, 14, 0.11);
-  --green-border: rgba(121, 116, 14, 0.27);
-  --gold-soft: rgba(181, 118, 20, 0.12);
-  --gold-border: rgba(181, 118, 20, 0.28);
-  --note-yellow: #b57614;
-  --note-yellow-soft: rgba(181, 118, 20, 0.2);
-  --note-yellow-border: rgba(181, 118, 20, 0.32);
-  --orange-soft: rgba(175, 58, 3, 0.11);
-  --orange-border: rgba(175, 58, 3, 0.27);
-  --red-soft: rgba(157, 0, 6, 0.1);
-  --red-border: rgba(157, 0, 6, 0.27);
-  --canvas-glow-a: rgba(7, 102, 120, 0.05);
-  --canvas-glow-b: rgba(143, 63, 113, 0.04);
-  --state-active-fill: rgba(7, 102, 120, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(7, 102, 120, 0.14));
-  --state-reject-fill: rgba(157, 0, 6, 0.09);
-  --marquee-fill: rgba(7, 102, 120, 0.08);
-  --minimap-viewport: rgba(7, 102, 120, 0.45);
-  --shadow-sm: 0 2px 10px rgba(60, 56, 54, .09);
-  --shadow-md: 0 10px 28px rgba(60, 56, 54, .13);
-  --shadow-lg: 0 20px 56px rgba(60, 56, 54, .17);
-}
-
-:root[data-theme="one-dark"] {
-  color-scheme: dark;
-  --bg: #282c34;
-  --bg2: #21252b;
-  --bg3: #2c313a;
-  --surface: #2c313a;
-  --surface2: #333842;
-  --surface3: #3e4451;
-  --border: rgba(97, 175, 239, 0.12);
-  --border2: rgba(97, 175, 239, 0.22);
-  --sb-thumb: rgba(97, 175, 239, 0.26);
-  --sb-thumb-hover: rgba(97, 175, 239, 0.42);
-  --sb-thumb-active: rgba(97, 175, 239, 0.6);
-  --text: #abb2bf;
-  --text2: #828997;
-  --text3: #5c6370;
-  --accent: #61afef;
-  --accent2: #c678dd;
-  --violet: #c678dd;
-  --indigo: #61afef;
-  --blue: #61afef;
-  --gold: #e5c07b;
-  --green: #98c379;
-  --red: #e06c75;
-  --orange: #d19a66;
-  --purple: #c678dd;
-  --on-accent: #1a1c20;
-  --overlay: rgba(40, 44, 52, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(97, 175, 239, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(97, 175, 239, 0.1);
-  --accent-soft-strong: rgba(97, 175, 239, 0.18);
-  --accent-border: rgba(97, 175, 239, 0.26);
-  --accent-border-strong: rgba(97, 175, 239, 0.4);
-  --accent-glow: 0 0 14px rgba(97, 175, 239, 0.32);
-  --tab-hover-bg: rgba(171, 178, 191, 0.04);
-  --tab-active-bg: rgba(97, 175, 239, 0.13);
-  --tab-active-border: rgba(97, 175, 239, 0.28);
-  --tab-active-line: rgba(97, 175, 239, 0.95);
-  --tab-overflow-shadow: rgba(40, 44, 52, 0.62);
-  --violet-soft: rgba(198, 120, 221, 0.13);
-  --violet-border: rgba(198, 120, 221, 0.28);
-  --indigo-soft: rgba(97, 175, 239, 0.12);
-  --indigo-border: rgba(97, 175, 239, 0.26);
-  --blue-soft: rgba(97, 175, 239, 0.1);
-  --blue-border: rgba(97, 175, 239, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(198, 120, 221, 0.13);
-  --purple-border: rgba(198, 120, 221, 0.28);
-  --green-soft: rgba(152, 195, 121, 0.11);
-  --green-border: rgba(152, 195, 121, 0.27);
-  --gold-soft: rgba(229, 192, 123, 0.12);
-  --gold-border: rgba(229, 192, 123, 0.28);
-  --note-yellow: #e5c07b;
-  --note-yellow-soft: rgba(229, 192, 123, 0.18);
-  --note-yellow-border: rgba(229, 192, 123, 0.4);
-  --orange-soft: rgba(209, 154, 102, 0.11);
-  --orange-border: rgba(209, 154, 102, 0.27);
-  --red-soft: rgba(224, 108, 117, 0.1);
-  --red-border: rgba(224, 108, 117, 0.27);
-  --canvas-glow-a: rgba(97, 175, 239, 0.045);
-  --canvas-glow-b: rgba(198, 120, 221, 0.035);
-  --state-active-fill: rgba(97, 175, 239, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(97, 175, 239, 0.42));
-  --state-reject-fill: rgba(224, 108, 117, 0.1);
-  --marquee-fill: rgba(97, 175, 239, 0.1);
-  --minimap-viewport: rgba(97, 175, 239, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="tokyo-night"] {
-  color-scheme: dark;
-  --bg: #1a1b26;
-  --bg2: #16161e;
-  --bg3: #232433;
-  --surface: #232433;
-  --surface2: #292e42;
-  --surface3: #343a52;
-  --border: rgba(122, 162, 247, 0.12);
-  --border2: rgba(122, 162, 247, 0.22);
-  --sb-thumb: rgba(122, 162, 247, 0.26);
-  --sb-thumb-hover: rgba(122, 162, 247, 0.42);
-  --sb-thumb-active: rgba(122, 162, 247, 0.6);
-  --text: #c0caf5;
-  --text2: #9099c4;
-  --text3: #565f89;
-  --accent: #7aa2f7;
-  --accent2: #bb9af7;
-  --violet: #bb9af7;
-  --indigo: #7aa2f7;
-  --blue: #7dcfff;
-  --gold: #e0af68;
-  --green: #9ece6a;
-  --red: #f7768e;
-  --orange: #ff9e64;
-  --purple: #bb9af7;
-  --on-accent: #161620;
-  --overlay: rgba(26, 27, 38, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(122, 162, 247, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(122, 162, 247, 0.1);
-  --accent-soft-strong: rgba(122, 162, 247, 0.18);
-  --accent-border: rgba(122, 162, 247, 0.26);
-  --accent-border-strong: rgba(122, 162, 247, 0.4);
-  --accent-glow: 0 0 14px rgba(122, 162, 247, 0.32);
-  --tab-hover-bg: rgba(192, 202, 245, 0.04);
-  --tab-active-bg: rgba(122, 162, 247, 0.13);
-  --tab-active-border: rgba(122, 162, 247, 0.28);
-  --tab-active-line: rgba(122, 162, 247, 0.95);
-  --tab-overflow-shadow: rgba(26, 27, 38, 0.62);
-  --violet-soft: rgba(187, 154, 247, 0.13);
-  --violet-border: rgba(187, 154, 247, 0.28);
-  --indigo-soft: rgba(122, 162, 247, 0.12);
-  --indigo-border: rgba(122, 162, 247, 0.26);
-  --blue-soft: rgba(125, 207, 255, 0.1);
-  --blue-border: rgba(125, 207, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(187, 154, 247, 0.13);
-  --purple-border: rgba(187, 154, 247, 0.28);
-  --green-soft: rgba(158, 206, 106, 0.11);
-  --green-border: rgba(158, 206, 106, 0.27);
-  --gold-soft: rgba(224, 175, 104, 0.12);
-  --gold-border: rgba(224, 175, 104, 0.28);
-  --note-yellow: #e0af68;
-  --note-yellow-soft: rgba(224, 175, 104, 0.18);
-  --note-yellow-border: rgba(224, 175, 104, 0.4);
-  --orange-soft: rgba(255, 158, 100, 0.11);
-  --orange-border: rgba(255, 158, 100, 0.27);
-  --red-soft: rgba(247, 118, 142, 0.1);
-  --red-border: rgba(247, 118, 142, 0.27);
-  --canvas-glow-a: rgba(122, 162, 247, 0.045);
-  --canvas-glow-b: rgba(187, 154, 247, 0.035);
-  --state-active-fill: rgba(122, 162, 247, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(122, 162, 247, 0.42));
-  --state-reject-fill: rgba(247, 118, 142, 0.1);
-  --marquee-fill: rgba(122, 162, 247, 0.1);
-  --minimap-viewport: rgba(122, 162, 247, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="catppuccin"] {
-  color-scheme: dark;
-  --bg: #1e1e2e;
-  --bg2: #181825;
-  --bg3: #292c3c;
-  --surface: #292c3c;
-  --surface2: #313244;
-  --surface3: #45475a;
-  --border: rgba(137, 180, 250, 0.12);
-  --border2: rgba(137, 180, 250, 0.22);
-  --sb-thumb: rgba(137, 180, 250, 0.26);
-  --sb-thumb-hover: rgba(137, 180, 250, 0.42);
-  --sb-thumb-active: rgba(137, 180, 250, 0.6);
-  --text: #cdd6f4;
-  --text2: #a6adc8;
-  --text3: #6c7086;
-  --accent: #89b4fa;
-  --accent2: #cba6f7;
-  --violet: #cba6f7;
-  --indigo: #b4befe;
-  --blue: #89b4fa;
-  --gold: #f9e2af;
-  --green: #a6e3a1;
-  --red: #f38ba8;
-  --orange: #fab387;
-  --purple: #cba6f7;
-  --on-accent: #181825;
-  --overlay: rgba(30, 30, 46, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(137, 180, 250, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(137, 180, 250, 0.1);
-  --accent-soft-strong: rgba(137, 180, 250, 0.18);
-  --accent-border: rgba(137, 180, 250, 0.26);
-  --accent-border-strong: rgba(137, 180, 250, 0.4);
-  --accent-glow: 0 0 14px rgba(137, 180, 250, 0.32);
-  --tab-hover-bg: rgba(205, 214, 244, 0.04);
-  --tab-active-bg: rgba(137, 180, 250, 0.13);
-  --tab-active-border: rgba(137, 180, 250, 0.28);
-  --tab-active-line: rgba(137, 180, 250, 0.95);
-  --tab-overflow-shadow: rgba(30, 30, 46, 0.62);
-  --violet-soft: rgba(203, 166, 247, 0.13);
-  --violet-border: rgba(203, 166, 247, 0.28);
-  --indigo-soft: rgba(180, 190, 254, 0.12);
-  --indigo-border: rgba(180, 190, 254, 0.26);
-  --blue-soft: rgba(137, 180, 250, 0.1);
-  --blue-border: rgba(137, 180, 250, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(203, 166, 247, 0.13);
-  --purple-border: rgba(203, 166, 247, 0.28);
-  --green-soft: rgba(166, 227, 161, 0.11);
-  --green-border: rgba(166, 227, 161, 0.27);
-  --gold-soft: rgba(249, 226, 175, 0.12);
-  --gold-border: rgba(249, 226, 175, 0.28);
-  --note-yellow: #f9e2af;
-  --note-yellow-soft: rgba(249, 226, 175, 0.18);
-  --note-yellow-border: rgba(249, 226, 175, 0.4);
-  --orange-soft: rgba(250, 179, 135, 0.11);
-  --orange-border: rgba(250, 179, 135, 0.27);
-  --red-soft: rgba(243, 139, 168, 0.1);
-  --red-border: rgba(243, 139, 168, 0.27);
-  --canvas-glow-a: rgba(137, 180, 250, 0.045);
-  --canvas-glow-b: rgba(203, 166, 247, 0.035);
-  --state-active-fill: rgba(137, 180, 250, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(137, 180, 250, 0.42));
-  --state-reject-fill: rgba(243, 139, 168, 0.1);
-  --marquee-fill: rgba(137, 180, 250, 0.1);
-  --minimap-viewport: rgba(137, 180, 250, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="rose-pine"] {
-  color-scheme: dark;
-  --bg: #191724;
-  --bg2: #14121f;
-  --bg3: #1f1d2e;
-  --surface: #1f1d2e;
-  --surface2: #26233a;
-  --surface3: #403d52;
-  --border: rgba(156, 207, 216, 0.12);
-  --border2: rgba(156, 207, 216, 0.22);
-  --sb-thumb: rgba(156, 207, 216, 0.26);
-  --sb-thumb-hover: rgba(156, 207, 216, 0.42);
-  --sb-thumb-active: rgba(156, 207, 216, 0.6);
-  --text: #e0def4;
-  --text2: #a8a4c5;
-  --text3: #6e6a86;
-  --accent: #9ccfd8;
-  --accent2: #c4a7e7;
-  --violet: #c4a7e7;
-  --indigo: #31748f;
-  --blue: #9ccfd8;
-  --gold: #f6c177;
-  --green: #31748f;
-  --red: #eb6f92;
-  --orange: #ebbcba;
-  --purple: #c4a7e7;
-  --on-accent: #161320;
-  --overlay: rgba(25, 23, 36, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(156, 207, 216, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(156, 207, 216, 0.1);
-  --accent-soft-strong: rgba(156, 207, 216, 0.18);
-  --accent-border: rgba(156, 207, 216, 0.26);
-  --accent-border-strong: rgba(156, 207, 216, 0.4);
-  --accent-glow: 0 0 14px rgba(156, 207, 216, 0.32);
-  --tab-hover-bg: rgba(224, 222, 244, 0.04);
-  --tab-active-bg: rgba(156, 207, 216, 0.13);
-  --tab-active-border: rgba(156, 207, 216, 0.28);
-  --tab-active-line: rgba(156, 207, 216, 0.95);
-  --tab-overflow-shadow: rgba(25, 23, 36, 0.62);
-  --violet-soft: rgba(196, 167, 231, 0.13);
-  --violet-border: rgba(196, 167, 231, 0.28);
-  --indigo-soft: rgba(49, 116, 143, 0.12);
-  --indigo-border: rgba(49, 116, 143, 0.26);
-  --blue-soft: rgba(156, 207, 216, 0.1);
-  --blue-border: rgba(156, 207, 216, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(196, 167, 231, 0.13);
-  --purple-border: rgba(196, 167, 231, 0.28);
-  --green-soft: rgba(49, 116, 143, 0.11);
-  --green-border: rgba(49, 116, 143, 0.27);
-  --gold-soft: rgba(246, 193, 119, 0.12);
-  --gold-border: rgba(246, 193, 119, 0.28);
-  --note-yellow: #f6c177;
-  --note-yellow-soft: rgba(246, 193, 119, 0.18);
-  --note-yellow-border: rgba(246, 193, 119, 0.4);
-  --orange-soft: rgba(235, 188, 186, 0.11);
-  --orange-border: rgba(235, 188, 186, 0.27);
-  --red-soft: rgba(235, 111, 146, 0.1);
-  --red-border: rgba(235, 111, 146, 0.27);
-  --canvas-glow-a: rgba(156, 207, 216, 0.045);
-  --canvas-glow-b: rgba(196, 167, 231, 0.035);
-  --state-active-fill: rgba(156, 207, 216, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(156, 207, 216, 0.42));
-  --state-reject-fill: rgba(235, 111, 146, 0.1);
-  --marquee-fill: rgba(156, 207, 216, 0.1);
-  --minimap-viewport: rgba(156, 207, 216, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="github-light"] {
-  color-scheme: light;
-  --bg: #ffffff;
-  --bg2: #f6f8fa;
-  --bg3: #eaeef2;
-  --surface: #ffffff;
-  --surface2: #f6f8fa;
-  --surface3: #eaeef2;
-  --border: rgba(89, 99, 110, 0.14);
-  --border2: rgba(89, 99, 110, 0.24);
-  --sb-thumb: rgba(89, 99, 110, 0.26);
-  --sb-thumb-hover: rgba(89, 99, 110, 0.4);
-  --sb-thumb-active: rgba(89, 99, 110, 0.56);
-  --text: #1f2328;
-  --text2: #59636e;
-  --text3: #8c959f;
-  --accent: #0969da;
-  --accent2: #8250df;
-  --violet: #8250df;
-  --indigo: #0969da;
-  --blue: #0969da;
-  --gold: #9a6700;
-  --green: #1a7f37;
-  --red: #d1242f;
-  --orange: #bc4c00;
-  --purple: #8250df;
-  --on-accent: #ffffff;
-  --overlay: rgba(89, 99, 110, 0.26);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(9, 105, 218, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
-  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
-  --accent-soft: rgba(9, 105, 218, 0.1);
-  --accent-soft-strong: rgba(9, 105, 218, 0.18);
-  --accent-border: rgba(9, 105, 218, 0.24);
-  --accent-border-strong: rgba(9, 105, 218, 0.36);
-  --accent-glow: 0 10px 24px rgba(9, 105, 218, 0.16);
-  --tab-hover-bg: rgba(89, 99, 110, 0.05);
-  --tab-active-bg: rgba(9, 105, 218, 0.095);
-  --tab-active-border: rgba(9, 105, 218, 0.28);
-  --tab-active-line: rgba(9, 105, 218, 0.9);
-  --tab-overflow-shadow: rgba(89, 99, 110, 0.36);
-  --violet-soft: rgba(130, 80, 223, 0.13);
-  --violet-border: rgba(130, 80, 223, 0.28);
-  --indigo-soft: rgba(9, 105, 218, 0.12);
-  --indigo-border: rgba(9, 105, 218, 0.26);
-  --blue-soft: rgba(9, 105, 218, 0.1);
-  --blue-border: rgba(9, 105, 218, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(89, 99, 110, 0.22);
-  --purple-soft: rgba(130, 80, 223, 0.13);
-  --purple-border: rgba(130, 80, 223, 0.28);
-  --green-soft: rgba(26, 127, 55, 0.11);
-  --green-border: rgba(26, 127, 55, 0.27);
-  --gold-soft: rgba(154, 103, 0, 0.12);
-  --gold-border: rgba(154, 103, 0, 0.28);
-  --note-yellow: #9a6700;
-  --note-yellow-soft: rgba(154, 103, 0, 0.2);
-  --note-yellow-border: rgba(154, 103, 0, 0.32);
-  --orange-soft: rgba(188, 76, 0, 0.11);
-  --orange-border: rgba(188, 76, 0, 0.27);
-  --red-soft: rgba(209, 36, 47, 0.1);
-  --red-border: rgba(209, 36, 47, 0.27);
-  --canvas-glow-a: rgba(9, 105, 218, 0.05);
-  --canvas-glow-b: rgba(130, 80, 223, 0.04);
-  --state-active-fill: rgba(9, 105, 218, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(9, 105, 218, 0.14));
-  --state-reject-fill: rgba(209, 36, 47, 0.09);
-  --marquee-fill: rgba(9, 105, 218, 0.08);
-  --minimap-viewport: rgba(9, 105, 218, 0.45);
-  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
-  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
-  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
-}
-
-:root[data-theme="github-dark"] {
-  color-scheme: dark;
-  --bg: #0d1117;
-  --bg2: #010409;
-  --bg3: #161b22;
-  --surface: #161b22;
-  --surface2: #1c2128;
-  --surface3: #282e36;
-  --border: rgba(88, 166, 255, 0.12);
-  --border2: rgba(88, 166, 255, 0.22);
-  --sb-thumb: rgba(88, 166, 255, 0.26);
-  --sb-thumb-hover: rgba(88, 166, 255, 0.42);
-  --sb-thumb-active: rgba(88, 166, 255, 0.6);
-  --text: #e6edf3;
-  --text2: #9198a1;
-  --text3: #6e7681;
-  --accent: #58a6ff;
-  --accent2: #bc8cff;
-  --violet: #bc8cff;
-  --indigo: #58a6ff;
-  --blue: #58a6ff;
-  --gold: #d29922;
-  --green: #3fb950;
-  --red: #f85149;
-  --orange: #db6d28;
-  --purple: #bc8cff;
-  --on-accent: #0d1117;
-  --overlay: rgba(13, 17, 23, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(88, 166, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(88, 166, 255, 0.1);
-  --accent-soft-strong: rgba(88, 166, 255, 0.18);
-  --accent-border: rgba(88, 166, 255, 0.26);
-  --accent-border-strong: rgba(88, 166, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(88, 166, 255, 0.32);
-  --tab-hover-bg: rgba(230, 237, 243, 0.04);
-  --tab-active-bg: rgba(88, 166, 255, 0.13);
-  --tab-active-border: rgba(88, 166, 255, 0.28);
-  --tab-active-line: rgba(88, 166, 255, 0.95);
-  --tab-overflow-shadow: rgba(13, 17, 23, 0.62);
-  --violet-soft: rgba(188, 140, 255, 0.13);
-  --violet-border: rgba(188, 140, 255, 0.28);
-  --indigo-soft: rgba(88, 166, 255, 0.12);
-  --indigo-border: rgba(88, 166, 255, 0.26);
-  --blue-soft: rgba(88, 166, 255, 0.1);
-  --blue-border: rgba(88, 166, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(188, 140, 255, 0.13);
-  --purple-border: rgba(188, 140, 255, 0.28);
-  --green-soft: rgba(63, 185, 80, 0.11);
-  --green-border: rgba(63, 185, 80, 0.27);
-  --gold-soft: rgba(210, 153, 34, 0.12);
-  --gold-border: rgba(210, 153, 34, 0.28);
-  --note-yellow: #d29922;
-  --note-yellow-soft: rgba(210, 153, 34, 0.18);
-  --note-yellow-border: rgba(210, 153, 34, 0.4);
-  --orange-soft: rgba(219, 109, 40, 0.11);
-  --orange-border: rgba(219, 109, 40, 0.27);
-  --red-soft: rgba(248, 81, 73, 0.1);
-  --red-border: rgba(248, 81, 73, 0.27);
-  --canvas-glow-a: rgba(88, 166, 255, 0.045);
-  --canvas-glow-b: rgba(188, 140, 255, 0.035);
-  --state-active-fill: rgba(88, 166, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(88, 166, 255, 0.42));
-  --state-reject-fill: rgba(248, 81, 73, 0.1);
-  --marquee-fill: rgba(88, 166, 255, 0.1);
-  --minimap-viewport: rgba(88, 166, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-:root[data-theme="sepia"] {
-  color-scheme: light;
-  --bg: #f4ecd8;
-  --bg2: #efe4c8;
-  --bg3: #e8dab8;
-  --surface: #fbf5e6;
-  --surface2: #f2e8d0;
-  --surface3: #e8dab8;
-  --border: rgba(122, 105, 82, 0.14);
-  --border2: rgba(122, 105, 82, 0.24);
-  --sb-thumb: rgba(122, 105, 82, 0.26);
-  --sb-thumb-hover: rgba(122, 105, 82, 0.4);
-  --sb-thumb-active: rgba(122, 105, 82, 0.56);
-  --text: #4b3621;
-  --text2: #7a6952;
-  --text3: #a08f72;
-  --accent: #a0522d;
-  --accent2: #b5651d;
-  --violet: #8a6d9b;
-  --indigo: #6b7d99;
-  --blue: #5b7d9a;
-  --gold: #b8860b;
-  --green: #6b8e4e;
-  --red: #b5453f;
-  --orange: #c1732f;
-  --purple: #8a6d9b;
-  --on-accent: #fbf5e6;
-  --overlay: rgba(122, 105, 82, 0.26);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(160, 82, 45, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
-  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
-  --accent-soft: rgba(160, 82, 45, 0.1);
-  --accent-soft-strong: rgba(160, 82, 45, 0.18);
-  --accent-border: rgba(160, 82, 45, 0.24);
-  --accent-border-strong: rgba(160, 82, 45, 0.36);
-  --accent-glow: 0 10px 24px rgba(160, 82, 45, 0.16);
-  --tab-hover-bg: rgba(122, 105, 82, 0.05);
-  --tab-active-bg: rgba(160, 82, 45, 0.095);
-  --tab-active-border: rgba(160, 82, 45, 0.28);
-  --tab-active-line: rgba(160, 82, 45, 0.9);
-  --tab-overflow-shadow: rgba(122, 105, 82, 0.36);
-  --violet-soft: rgba(138, 109, 155, 0.13);
-  --violet-border: rgba(138, 109, 155, 0.28);
-  --indigo-soft: rgba(107, 125, 153, 0.12);
-  --indigo-border: rgba(107, 125, 153, 0.26);
-  --blue-soft: rgba(91, 125, 154, 0.1);
-  --blue-border: rgba(91, 125, 154, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(122, 105, 82, 0.22);
-  --purple-soft: rgba(138, 109, 155, 0.13);
-  --purple-border: rgba(138, 109, 155, 0.28);
-  --green-soft: rgba(107, 142, 78, 0.11);
-  --green-border: rgba(107, 142, 78, 0.27);
-  --gold-soft: rgba(184, 134, 11, 0.12);
-  --gold-border: rgba(184, 134, 11, 0.28);
-  --note-yellow: #b8860b;
-  --note-yellow-soft: rgba(184, 134, 11, 0.2);
-  --note-yellow-border: rgba(184, 134, 11, 0.32);
-  --orange-soft: rgba(193, 115, 47, 0.11);
-  --orange-border: rgba(193, 115, 47, 0.27);
-  --red-soft: rgba(181, 69, 63, 0.1);
-  --red-border: rgba(181, 69, 63, 0.27);
-  --canvas-glow-a: rgba(160, 82, 45, 0.05);
-  --canvas-glow-b: rgba(138, 109, 155, 0.04);
-  --state-active-fill: rgba(160, 82, 45, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(160, 82, 45, 0.14));
-  --state-reject-fill: rgba(181, 69, 63, 0.09);
-  --marquee-fill: rgba(160, 82, 45, 0.08);
-  --minimap-viewport: rgba(160, 82, 45, 0.45);
-  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
-  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
-  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
-}
-
-:root[data-theme="high-contrast"] {
-  color-scheme: dark;
-  --bg: #000000;
-  --bg2: #0a0a0a;
-  --bg3: #141414;
-  --surface: #0d0d0d;
-  --surface2: #1a1a1a;
-  --surface3: #262626;
-  --border: rgba(0, 217, 255, 0.12);
-  --border2: rgba(0, 217, 255, 0.22);
-  --sb-thumb: rgba(0, 217, 255, 0.26);
-  --sb-thumb-hover: rgba(0, 217, 255, 0.42);
-  --sb-thumb-active: rgba(0, 217, 255, 0.6);
-  --text: #ffffff;
-  --text2: #e0e0e0;
-  --text3: #a0a0a0;
-  --accent: #00d9ff;
-  --accent2: #ffd60a;
-  --violet: #d896ff;
-  --indigo: #5e9eff;
-  --blue: #00d9ff;
-  --gold: #ffd60a;
-  --green: #00ff9c;
-  --red: #ff4d4d;
-  --orange: #ff9f1c;
-  --purple: #d896ff;
-  --on-accent: #000000;
-  --overlay: rgba(0, 0, 0, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(0, 217, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(0, 217, 255, 0.1);
-  --accent-soft-strong: rgba(0, 217, 255, 0.18);
-  --accent-border: rgba(0, 217, 255, 0.26);
-  --accent-border-strong: rgba(0, 217, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(0, 217, 255, 0.32);
-  --tab-hover-bg: rgba(255, 255, 255, 0.04);
-  --tab-active-bg: rgba(0, 217, 255, 0.13);
-  --tab-active-border: rgba(0, 217, 255, 0.28);
-  --tab-active-line: rgba(0, 217, 255, 0.95);
-  --tab-overflow-shadow: rgba(0, 0, 0, 0.62);
-  --violet-soft: rgba(216, 150, 255, 0.13);
-  --violet-border: rgba(216, 150, 255, 0.28);
-  --indigo-soft: rgba(94, 158, 255, 0.12);
-  --indigo-border: rgba(94, 158, 255, 0.26);
-  --blue-soft: rgba(0, 217, 255, 0.1);
-  --blue-border: rgba(0, 217, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(216, 150, 255, 0.13);
-  --purple-border: rgba(216, 150, 255, 0.28);
-  --green-soft: rgba(0, 255, 156, 0.11);
-  --green-border: rgba(0, 255, 156, 0.27);
-  --gold-soft: rgba(255, 214, 10, 0.12);
-  --gold-border: rgba(255, 214, 10, 0.28);
-  --note-yellow: #ffd60a;
-  --note-yellow-soft: rgba(255, 214, 10, 0.18);
-  --note-yellow-border: rgba(255, 214, 10, 0.4);
-  --orange-soft: rgba(255, 159, 28, 0.11);
-  --orange-border: rgba(255, 159, 28, 0.27);
-  --red-soft: rgba(255, 77, 77, 0.1);
-  --red-border: rgba(255, 77, 77, 0.27);
-  --canvas-glow-a: rgba(0, 217, 255, 0.045);
-  --canvas-glow-b: rgba(216, 150, 255, 0.035);
-  --state-active-fill: rgba(0, 217, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 217, 255, 0.42));
-  --state-reject-fill: rgba(255, 77, 77, 0.1);
-  --marquee-fill: rgba(0, 217, 255, 0.1);
-  --minimap-viewport: rgba(0, 217, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="ayu-light"] {
-  color-scheme: light;
-  --bg: #fafafa;
-  --bg2: #f3f3f3;
-  --bg3: #e7e8e9;
-  --surface: #ffffff;
-  --surface2: #f3f3f3;
-  --surface3: #e7e8e9;
-  --border: rgba(120, 123, 128, 0.14);
-  --border2: rgba(120, 123, 128, 0.24);
-  --sb-thumb: rgba(120, 123, 128, 0.26);
-  --sb-thumb-hover: rgba(120, 123, 128, 0.4);
-  --sb-thumb-active: rgba(120, 123, 128, 0.56);
-  --text: #5c6166;
-  --text2: #787b80;
-  --text3: #a3a6a6;
-  --accent: #ff9940;
-  --accent2: #399ee6;
-  --violet: #a37acc;
-  --indigo: #399ee6;
-  --blue: #399ee6;
-  --gold: #bf7e00;
-  --green: #6a8f00;
-  --red: #f51818;
-  --orange: #fa8d3e;
-  --purple: #a37acc;
-  --on-accent: #fafafa;
-  --overlay: rgba(120, 123, 128, 0.26);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(255, 153, 64, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
-  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
-  --accent-soft: rgba(255, 153, 64, 0.1);
-  --accent-soft-strong: rgba(255, 153, 64, 0.18);
-  --accent-border: rgba(255, 153, 64, 0.24);
-  --accent-border-strong: rgba(255, 153, 64, 0.36);
-  --accent-glow: 0 10px 24px rgba(255, 153, 64, 0.16);
-  --tab-hover-bg: rgba(120, 123, 128, 0.05);
-  --tab-active-bg: rgba(255, 153, 64, 0.095);
-  --tab-active-border: rgba(255, 153, 64, 0.28);
-  --tab-active-line: rgba(255, 153, 64, 0.9);
-  --tab-overflow-shadow: rgba(120, 123, 128, 0.36);
-  --violet-soft: rgba(163, 122, 204, 0.13);
-  --violet-border: rgba(163, 122, 204, 0.28);
-  --indigo-soft: rgba(57, 158, 230, 0.12);
-  --indigo-border: rgba(57, 158, 230, 0.26);
-  --blue-soft: rgba(57, 158, 230, 0.1);
-  --blue-border: rgba(57, 158, 230, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(120, 123, 128, 0.22);
-  --purple-soft: rgba(163, 122, 204, 0.13);
-  --purple-border: rgba(163, 122, 204, 0.28);
-  --green-soft: rgba(106, 143, 0, 0.11);
-  --green-border: rgba(106, 143, 0, 0.27);
-  --gold-soft: rgba(191, 126, 0, 0.12);
-  --gold-border: rgba(191, 126, 0, 0.28);
-  --note-yellow: #f2ae49;
-  --note-yellow-soft: rgba(242, 174, 73, 0.2);
-  --note-yellow-border: rgba(242, 174, 73, 0.32);
-  --orange-soft: rgba(250, 141, 62, 0.11);
-  --orange-border: rgba(250, 141, 62, 0.27);
-  --red-soft: rgba(245, 24, 24, 0.1);
-  --red-border: rgba(245, 24, 24, 0.27);
-  --canvas-glow-a: rgba(255, 153, 64, 0.05);
-  --canvas-glow-b: rgba(163, 122, 204, 0.04);
-  --state-active-fill: rgba(255, 153, 64, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(255, 153, 64, 0.14));
-  --state-reject-fill: rgba(245, 24, 24, 0.09);
-  --marquee-fill: rgba(255, 153, 64, 0.08);
-  --minimap-viewport: rgba(255, 153, 64, 0.45);
-  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
-  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
-  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
-}
-
-:root[data-theme="ayu-dark"] {
-  color-scheme: dark;
-  --bg: #0a0e14;
-  --bg2: #060a10;
-  --bg3: #0d1219;
-  --surface: #0d1219;
-  --surface2: #131721;
-  --surface3: #1b202b;
-  --border: rgba(89, 194, 255, 0.12);
-  --border2: rgba(89, 194, 255, 0.22);
-  --sb-thumb: rgba(89, 194, 255, 0.26);
-  --sb-thumb-hover: rgba(89, 194, 255, 0.42);
-  --sb-thumb-active: rgba(89, 194, 255, 0.6);
-  --text: #b3b1ad;
-  --text2: #828c99;
-  --text3: #4d5566;
-  --accent: #ffb454;
-  --accent2: #59c2ff;
-  --violet: #d2a6ff;
-  --indigo: #59c2ff;
-  --blue: #59c2ff;
-  --gold: #e6b450;
-  --green: #c2d94c;
-  --red: #ff3333;
-  --orange: #ff8f40;
-  --purple: #d2a6ff;
-  --on-accent: #0a0e14;
-  --overlay: rgba(10, 14, 20, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(255, 180, 84, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(255, 180, 84, 0.1);
-  --accent-soft-strong: rgba(255, 180, 84, 0.18);
-  --accent-border: rgba(255, 180, 84, 0.26);
-  --accent-border-strong: rgba(255, 180, 84, 0.4);
-  --accent-glow: 0 0 14px rgba(255, 180, 84, 0.32);
-  --tab-hover-bg: rgba(179, 177, 173, 0.04);
-  --tab-active-bg: rgba(255, 180, 84, 0.13);
-  --tab-active-border: rgba(255, 180, 84, 0.28);
-  --tab-active-line: rgba(255, 180, 84, 0.95);
-  --tab-overflow-shadow: rgba(10, 14, 20, 0.62);
-  --violet-soft: rgba(210, 166, 255, 0.13);
-  --violet-border: rgba(210, 166, 255, 0.28);
-  --indigo-soft: rgba(89, 194, 255, 0.12);
-  --indigo-border: rgba(89, 194, 255, 0.26);
-  --blue-soft: rgba(89, 194, 255, 0.1);
-  --blue-border: rgba(89, 194, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(210, 166, 255, 0.13);
-  --purple-border: rgba(210, 166, 255, 0.28);
-  --green-soft: rgba(194, 217, 76, 0.11);
-  --green-border: rgba(194, 217, 76, 0.27);
-  --gold-soft: rgba(230, 180, 80, 0.12);
-  --gold-border: rgba(230, 180, 80, 0.28);
-  --note-yellow: #e6b450;
-  --note-yellow-soft: rgba(230, 180, 80, 0.18);
-  --note-yellow-border: rgba(230, 180, 80, 0.4);
-  --orange-soft: rgba(255, 143, 64, 0.11);
-  --orange-border: rgba(255, 143, 64, 0.27);
-  --red-soft: rgba(255, 51, 51, 0.1);
-  --red-border: rgba(255, 51, 51, 0.27);
-  --canvas-glow-a: rgba(255, 180, 84, 0.045);
-  --canvas-glow-b: rgba(210, 166, 255, 0.035);
-  --state-active-fill: rgba(255, 180, 84, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(255, 180, 84, 0.42));
-  --state-reject-fill: rgba(255, 51, 51, 0.1);
-  --marquee-fill: rgba(255, 180, 84, 0.1);
-  --minimap-viewport: rgba(255, 180, 84, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="ayu-mirage"] {
-  color-scheme: dark;
-  --bg: #1f2430;
-  --bg2: #191e2a;
-  --bg3: #232834;
-  --surface: #232834;
-  --surface2: #2a2f3b;
-  --surface3: #333947;
-  --border: rgba(92, 207, 230, 0.12);
-  --border2: rgba(92, 207, 230, 0.22);
-  --sb-thumb: rgba(92, 207, 230, 0.26);
-  --sb-thumb-hover: rgba(92, 207, 230, 0.42);
-  --sb-thumb-active: rgba(92, 207, 230, 0.6);
-  --text: #cbccc6;
-  --text2: #8a9199;
-  --text3: #5c6773;
-  --accent: #ffcc66;
-  --accent2: #5ccfe6;
-  --violet: #dfbfff;
-  --indigo: #5ccfe6;
-  --blue: #5ccfe6;
-  --gold: #ffd173;
-  --green: #bae67e;
-  --red: #f28779;
-  --orange: #ffa759;
-  --purple: #dfbfff;
-  --on-accent: #1f2430;
-  --overlay: rgba(31, 36, 48, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(255, 204, 102, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(255, 204, 102, 0.1);
-  --accent-soft-strong: rgba(255, 204, 102, 0.18);
-  --accent-border: rgba(255, 204, 102, 0.26);
-  --accent-border-strong: rgba(255, 204, 102, 0.4);
-  --accent-glow: 0 0 14px rgba(255, 204, 102, 0.32);
-  --tab-hover-bg: rgba(203, 204, 198, 0.04);
-  --tab-active-bg: rgba(255, 204, 102, 0.13);
-  --tab-active-border: rgba(255, 204, 102, 0.28);
-  --tab-active-line: rgba(255, 204, 102, 0.95);
-  --tab-overflow-shadow: rgba(31, 36, 48, 0.62);
-  --violet-soft: rgba(223, 191, 255, 0.13);
-  --violet-border: rgba(223, 191, 255, 0.28);
-  --indigo-soft: rgba(92, 207, 230, 0.12);
-  --indigo-border: rgba(92, 207, 230, 0.26);
-  --blue-soft: rgba(92, 207, 230, 0.1);
-  --blue-border: rgba(92, 207, 230, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(223, 191, 255, 0.13);
-  --purple-border: rgba(223, 191, 255, 0.28);
-  --green-soft: rgba(186, 230, 126, 0.11);
-  --green-border: rgba(186, 230, 126, 0.27);
-  --gold-soft: rgba(255, 209, 115, 0.12);
-  --gold-border: rgba(255, 209, 115, 0.28);
-  --note-yellow: #ffd173;
-  --note-yellow-soft: rgba(255, 209, 115, 0.18);
-  --note-yellow-border: rgba(255, 209, 115, 0.4);
-  --orange-soft: rgba(255, 167, 89, 0.11);
-  --orange-border: rgba(255, 167, 89, 0.27);
-  --red-soft: rgba(242, 135, 121, 0.1);
-  --red-border: rgba(242, 135, 121, 0.27);
-  --canvas-glow-a: rgba(255, 204, 102, 0.045);
-  --canvas-glow-b: rgba(223, 191, 255, 0.035);
-  --state-active-fill: rgba(255, 204, 102, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(255, 204, 102, 0.42));
-  --state-reject-fill: rgba(242, 135, 121, 0.1);
-  --marquee-fill: rgba(255, 204, 102, 0.1);
-  --minimap-viewport: rgba(255, 204, 102, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="everforest"] {
-  color-scheme: dark;
-  --bg: #2d353b;
-  --bg2: #272e33;
-  --bg3: #343f44;
-  --surface: #343f44;
-  --surface2: #3d484d;
-  --surface3: #475258;
-  --border: rgba(167, 192, 128, 0.12);
-  --border2: rgba(167, 192, 128, 0.22);
-  --sb-thumb: rgba(167, 192, 128, 0.26);
-  --sb-thumb-hover: rgba(167, 192, 128, 0.42);
-  --sb-thumb-active: rgba(167, 192, 128, 0.6);
-  --text: #d3c6aa;
-  --text2: #9da9a0;
-  --text3: #7a8478;
-  --accent: #a7c080;
-  --accent2: #83c092;
-  --violet: #d699b6;
-  --indigo: #7fbbb3;
-  --blue: #7fbbb3;
-  --gold: #dbbc7f;
-  --green: #a7c080;
-  --red: #e67e80;
-  --orange: #e69875;
-  --purple: #d699b6;
-  --on-accent: #2d353b;
-  --overlay: rgba(45, 53, 59, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(167, 192, 128, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(167, 192, 128, 0.1);
-  --accent-soft-strong: rgba(167, 192, 128, 0.18);
-  --accent-border: rgba(167, 192, 128, 0.26);
-  --accent-border-strong: rgba(167, 192, 128, 0.4);
-  --accent-glow: 0 0 14px rgba(167, 192, 128, 0.32);
-  --tab-hover-bg: rgba(211, 198, 170, 0.04);
-  --tab-active-bg: rgba(167, 192, 128, 0.13);
-  --tab-active-border: rgba(167, 192, 128, 0.28);
-  --tab-active-line: rgba(167, 192, 128, 0.95);
-  --tab-overflow-shadow: rgba(45, 53, 59, 0.62);
-  --violet-soft: rgba(214, 153, 182, 0.13);
-  --violet-border: rgba(214, 153, 182, 0.28);
-  --indigo-soft: rgba(127, 187, 179, 0.12);
-  --indigo-border: rgba(127, 187, 179, 0.26);
-  --blue-soft: rgba(127, 187, 179, 0.1);
-  --blue-border: rgba(127, 187, 179, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(248, 251, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(214, 153, 182, 0.13);
-  --purple-border: rgba(214, 153, 182, 0.28);
-  --green-soft: rgba(167, 192, 128, 0.11);
-  --green-border: rgba(167, 192, 128, 0.27);
-  --gold-soft: rgba(219, 188, 127, 0.12);
-  --gold-border: rgba(219, 188, 127, 0.28);
-  --note-yellow: #dbbc7f;
-  --note-yellow-soft: rgba(219, 188, 127, 0.18);
-  --note-yellow-border: rgba(219, 188, 127, 0.4);
-  --orange-soft: rgba(230, 152, 117, 0.11);
-  --orange-border: rgba(230, 152, 117, 0.27);
-  --red-soft: rgba(230, 126, 128, 0.1);
-  --red-border: rgba(230, 126, 128, 0.27);
-  --canvas-glow-a: rgba(167, 192, 128, 0.045);
-  --canvas-glow-b: rgba(214, 153, 182, 0.035);
-  --state-active-fill: rgba(167, 192, 128, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(167, 192, 128, 0.42));
-  --state-reject-fill: rgba(230, 126, 128, 0.1);
-  --marquee-fill: rgba(167, 192, 128, 0.1);
-  --minimap-viewport: rgba(167, 192, 128, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-:root[data-theme="kanagawa"] {
-  color-scheme: dark;
-  --bg: #1f1f28;
-  --bg2: #16161d;
-  --bg3: #2a2a37;
-  --surface: #2a2a37;
-  --surface2: #30303f;
-  --surface3: #363646;
-  --border: rgba(126, 156, 216, 0.12);
-  --border2: rgba(126, 156, 216, 0.22);
-  --sb-thumb: rgba(126, 156, 216, 0.26);
-  --sb-thumb-hover: rgba(126, 156, 216, 0.42);
-  --sb-thumb-active: rgba(126, 156, 216, 0.6);
-  --text: #dcd7ba;
-  --text2: #c8c093;
-  --text3: #727169;
-  --accent: #7e9cd8;
-  --accent2: #957fb8;
-  --violet: #957fb8;
-  --indigo: #7e9cd8;
-  --blue: #7e9cd8;
-  --gold: #e6c384;
-  --green: #98bb6c;
-  --red: #e46876;
-  --orange: #ffa066;
-  --purple: #957fb8;
-  --on-accent: #16161d;
-  --overlay: rgba(31, 31, 40, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(126, 156, 216, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(126, 156, 216, 0.1);
-  --accent-soft-strong: rgba(126, 156, 216, 0.18);
-  --accent-border: rgba(126, 156, 216, 0.26);
-  --accent-border-strong: rgba(126, 156, 216, 0.4);
-  --accent-glow: 0 0 14px rgba(126, 156, 216, 0.32);
-  --tab-hover-bg: rgba(220, 215, 186, 0.04);
-  --tab-active-bg: rgba(126, 156, 216, 0.13);
-  --tab-active-border: rgba(126, 156, 216, 0.28);
-  --tab-active-line: rgba(126, 156, 216, 0.95);
-  --tab-overflow-shadow: rgba(31, 31, 40, 0.62);
-  --violet-soft: rgba(149, 127, 184, 0.13);
-  --violet-border: rgba(149, 127, 184, 0.28);
-  --indigo-soft: rgba(126, 156, 216, 0.12);
-  --indigo-border: rgba(126, 156, 216, 0.26);
-  --blue-soft: rgba(126, 156, 216, 0.1);
-  --blue-border: rgba(126, 156, 216, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(149, 127, 184, 0.13);
-  --purple-border: rgba(149, 127, 184, 0.28);
-  --green-soft: rgba(152, 187, 108, 0.11);
-  --green-border: rgba(152, 187, 108, 0.27);
-  --gold-soft: rgba(230, 195, 132, 0.12);
-  --gold-border: rgba(230, 195, 132, 0.28);
-  --note-yellow: #e6c384;
-  --note-yellow-soft: rgba(230, 195, 132, 0.18);
-  --note-yellow-border: rgba(230, 195, 132, 0.4);
-  --orange-soft: rgba(255, 160, 102, 0.11);
-  --orange-border: rgba(255, 160, 102, 0.27);
-  --red-soft: rgba(228, 104, 118, 0.1);
-  --red-border: rgba(228, 104, 118, 0.27);
-  --canvas-glow-a: rgba(126, 156, 216, 0.045);
-  --canvas-glow-b: rgba(149, 127, 184, 0.035);
-  --state-active-fill: rgba(126, 156, 216, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(126, 156, 216, 0.42));
-  --state-reject-fill: rgba(228, 104, 118, 0.1);
-  --marquee-fill: rgba(126, 156, 216, 0.1);
-  --minimap-viewport: rgba(126, 156, 216, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="melange"] {
-  color-scheme: dark;
-  --bg: #292522;
-  --bg2: #1f1c1a;
-  --bg3: #34302c;
-  --surface: #34302c;
-  --surface2: #3a3531;
-  --surface3: #403a36;
-  --border: rgba(137, 179, 182, 0.12);
-  --border2: rgba(137, 179, 182, 0.22);
-  --sb-thumb: rgba(137, 179, 182, 0.26);
-  --sb-thumb-hover: rgba(137, 179, 182, 0.42);
-  --sb-thumb-active: rgba(137, 179, 182, 0.6);
-  --text: #ece1d7;
-  --text2: #c1a78e;
-  --text3: #867462;
-  --accent: #89b3b6;
-  --accent2: #cf9bc2;
-  --violet: #cf9bc2;
-  --indigo: #89b3b6;
-  --blue: #89b3b6;
-  --gold: #ebc06d;
-  --green: #85b695;
-  --red: #d47766;
-  --orange: #e49b5d;
-  --purple: #cf9bc2;
-  --on-accent: #171413;
-  --overlay: rgba(41, 37, 34, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(137, 179, 182, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(137, 179, 182, 0.1);
-  --accent-soft-strong: rgba(137, 179, 182, 0.18);
-  --accent-border: rgba(137, 179, 182, 0.26);
-  --accent-border-strong: rgba(137, 179, 182, 0.4);
-  --accent-glow: 0 0 14px rgba(137, 179, 182, 0.32);
-  --tab-hover-bg: rgba(236, 225, 215, 0.04);
-  --tab-active-bg: rgba(137, 179, 182, 0.13);
-  --tab-active-border: rgba(137, 179, 182, 0.28);
-  --tab-active-line: rgba(137, 179, 182, 0.95);
-  --tab-overflow-shadow: rgba(41, 37, 34, 0.62);
-  --violet-soft: rgba(207, 155, 194, 0.13);
-  --violet-border: rgba(207, 155, 194, 0.28);
-  --indigo-soft: rgba(137, 179, 182, 0.12);
-  --indigo-border: rgba(137, 179, 182, 0.26);
-  --blue-soft: rgba(137, 179, 182, 0.1);
-  --blue-border: rgba(137, 179, 182, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(207, 155, 194, 0.13);
-  --purple-border: rgba(207, 155, 194, 0.28);
-  --green-soft: rgba(133, 182, 149, 0.11);
-  --green-border: rgba(133, 182, 149, 0.27);
-  --gold-soft: rgba(235, 192, 109, 0.12);
-  --gold-border: rgba(235, 192, 109, 0.28);
-  --note-yellow: #ebc06d;
-  --note-yellow-soft: rgba(235, 192, 109, 0.18);
-  --note-yellow-border: rgba(235, 192, 109, 0.4);
-  --orange-soft: rgba(228, 155, 93, 0.11);
-  --orange-border: rgba(228, 155, 93, 0.27);
-  --red-soft: rgba(212, 119, 102, 0.1);
-  --red-border: rgba(212, 119, 102, 0.27);
-  --canvas-glow-a: rgba(137, 179, 182, 0.045);
-  --canvas-glow-b: rgba(207, 155, 194, 0.035);
-  --state-active-fill: rgba(137, 179, 182, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(137, 179, 182, 0.42));
-  --state-reject-fill: rgba(212, 119, 102, 0.1);
-  --marquee-fill: rgba(137, 179, 182, 0.1);
-  --minimap-viewport: rgba(137, 179, 182, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="melange-light"] {
-  color-scheme: light;
-  --bg: #f1f1f1;
-  --bg2: #fafafa;
-  --bg3: #e9e1db;
-  --surface: #fafafa;
-  --surface2: #f5f3f1;
-  --surface3: #d9d3ce;
-  --border: rgba(125, 102, 88, 0.16);
-  --border2: rgba(125, 102, 88, 0.26);
-  --sb-thumb: rgba(125, 102, 88, 0.26);
-  --sb-thumb-hover: rgba(125, 102, 88, 0.4);
-  --sb-thumb-active: rgba(125, 102, 88, 0.56);
-  --text: #54433a;
-  --text2: #7d6658;
-  --text3: #a98a78;
-  --accent: #3d6568;
-  --accent2: #904180;
-  --violet: #904180;
-  --indigo: #3d6568;
-  --blue: #3d6568;
-  --gold: #a06d00;
-  --green: #3a684a;
-  --red: #bf0021;
-  --orange: #bc5c00;
-  --purple: #904180;
-  --on-accent: #fafafa;
-  --overlay: rgba(125, 102, 88, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(61, 101, 104, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(84, 67, 58, .1);
-  --panel-shadow-right: -2px 0 18px rgba(84, 67, 58, .1);
-  --accent-soft: rgba(61, 101, 104, 0.1);
-  --accent-soft-strong: rgba(61, 101, 104, 0.18);
-  --accent-border: rgba(61, 101, 104, 0.24);
-  --accent-border-strong: rgba(61, 101, 104, 0.36);
-  --accent-glow: 0 10px 24px rgba(61, 101, 104, 0.16);
-  --tab-hover-bg: rgba(125, 102, 88, 0.05);
-  --tab-active-bg: rgba(61, 101, 104, 0.095);
-  --tab-active-border: rgba(61, 101, 104, 0.28);
-  --tab-active-line: rgba(61, 101, 104, 0.9);
-  --tab-overflow-shadow: rgba(125, 102, 88, 0.36);
-  --violet-soft: rgba(144, 65, 128, 0.13);
-  --violet-border: rgba(144, 65, 128, 0.28);
-  --indigo-soft: rgba(61, 101, 104, 0.12);
-  --indigo-border: rgba(61, 101, 104, 0.26);
-  --blue-soft: rgba(61, 101, 104, 0.1);
-  --blue-border: rgba(61, 101, 104, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(125, 102, 88, 0.22);
-  --purple-soft: rgba(144, 65, 128, 0.13);
-  --purple-border: rgba(144, 65, 128, 0.28);
-  --green-soft: rgba(58, 104, 74, 0.11);
-  --green-border: rgba(58, 104, 74, 0.27);
-  --gold-soft: rgba(160, 109, 0, 0.12);
-  --gold-border: rgba(160, 109, 0, 0.28);
-  --note-yellow: #a06d00;
-  --note-yellow-soft: rgba(160, 109, 0, 0.2);
-  --note-yellow-border: rgba(160, 109, 0, 0.32);
-  --orange-soft: rgba(188, 92, 0, 0.11);
-  --orange-border: rgba(188, 92, 0, 0.27);
-  --red-soft: rgba(191, 0, 33, 0.1);
-  --red-border: rgba(191, 0, 33, 0.27);
-  --canvas-glow-a: rgba(61, 101, 104, 0.05);
-  --canvas-glow-b: rgba(144, 65, 128, 0.04);
-  --state-active-fill: rgba(61, 101, 104, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(61, 101, 104, 0.14));
-  --state-reject-fill: rgba(191, 0, 33, 0.09);
-  --marquee-fill: rgba(61, 101, 104, 0.08);
-  --minimap-viewport: rgba(61, 101, 104, 0.45);
-  --shadow-sm: 0 2px 10px rgba(84, 67, 58, .09);
-  --shadow-md: 0 10px 28px rgba(84, 67, 58, .13);
-  --shadow-lg: 0 20px 56px rgba(84, 67, 58, .17);
-}
-
-:root[data-theme="nightfox"] {
-  color-scheme: dark;
-  --bg: #192330;
-  --bg2: #131a24;
-  --bg3: #212e3f;
-  --surface: #212e3f;
-  --surface2: #29394f;
-  --surface3: #39506d;
-  --border: rgba(113, 156, 214, 0.12);
-  --border2: rgba(113, 156, 214, 0.22);
-  --sb-thumb: rgba(113, 156, 214, 0.26);
-  --sb-thumb-hover: rgba(113, 156, 214, 0.42);
-  --sb-thumb-active: rgba(113, 156, 214, 0.6);
-  --text: #cdcecf;
-  --text2: #aeafb0;
-  --text3: #71839b;
-  --accent: #719cd6;
-  --accent2: #9d79d6;
-  --violet: #9d79d6;
-  --indigo: #719cd6;
-  --blue: #719cd6;
-  --gold: #dbc074;
-  --green: #81b29a;
-  --red: #c94f6d;
-  --orange: #f4a261;
-  --purple: #9d79d6;
-  --on-accent: #131a24;
-  --overlay: rgba(25, 35, 48, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(113, 156, 214, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(113, 156, 214, 0.1);
-  --accent-soft-strong: rgba(113, 156, 214, 0.18);
-  --accent-border: rgba(113, 156, 214, 0.26);
-  --accent-border-strong: rgba(113, 156, 214, 0.4);
-  --accent-glow: 0 0 14px rgba(113, 156, 214, 0.32);
-  --tab-hover-bg: rgba(205, 206, 207, 0.04);
-  --tab-active-bg: rgba(113, 156, 214, 0.13);
-  --tab-active-border: rgba(113, 156, 214, 0.28);
-  --tab-active-line: rgba(113, 156, 214, 0.95);
-  --tab-overflow-shadow: rgba(25, 35, 48, 0.62);
-  --violet-soft: rgba(157, 121, 214, 0.13);
-  --violet-border: rgba(157, 121, 214, 0.28);
-  --indigo-soft: rgba(113, 156, 214, 0.12);
-  --indigo-border: rgba(113, 156, 214, 0.26);
-  --blue-soft: rgba(113, 156, 214, 0.1);
-  --blue-border: rgba(113, 156, 214, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(157, 121, 214, 0.13);
-  --purple-border: rgba(157, 121, 214, 0.28);
-  --green-soft: rgba(129, 178, 154, 0.11);
-  --green-border: rgba(129, 178, 154, 0.27);
-  --gold-soft: rgba(219, 192, 116, 0.12);
-  --gold-border: rgba(219, 192, 116, 0.28);
-  --note-yellow: #dbc074;
-  --note-yellow-soft: rgba(219, 192, 116, 0.18);
-  --note-yellow-border: rgba(219, 192, 116, 0.4);
-  --orange-soft: rgba(244, 162, 97, 0.11);
-  --orange-border: rgba(244, 162, 97, 0.27);
-  --red-soft: rgba(201, 79, 109, 0.1);
-  --red-border: rgba(201, 79, 109, 0.27);
-  --canvas-glow-a: rgba(113, 156, 214, 0.045);
-  --canvas-glow-b: rgba(157, 121, 214, 0.035);
-  --state-active-fill: rgba(113, 156, 214, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(113, 156, 214, 0.42));
-  --state-reject-fill: rgba(201, 79, 109, 0.1);
-  --marquee-fill: rgba(113, 156, 214, 0.1);
-  --minimap-viewport: rgba(113, 156, 214, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="dayfox"] {
-  color-scheme: light;
-  --bg: #f6f2ee;
-  --bg2: #fffdfb;
-  --bg3: #e4dcd4;
-  --surface: #fffdfb;
-  --surface2: #f7f3ef;
-  --surface3: #d3c7bb;
-  --border: rgba(100, 63, 97, 0.16);
-  --border2: rgba(100, 63, 97, 0.26);
-  --sb-thumb: rgba(100, 63, 97, 0.26);
-  --sb-thumb-hover: rgba(100, 63, 97, 0.4);
-  --sb-thumb-active: rgba(100, 63, 97, 0.56);
-  --text: #3d2b5a;
-  --text2: #643f61;
-  --text3: #837a72;
-  --accent: #2848a9;
-  --accent2: #6e33ce;
-  --violet: #6e33ce;
-  --indigo: #2848a9;
-  --blue: #2848a9;
-  --gold: #ac5402;
-  --green: #396847;
-  --red: #a5222f;
-  --orange: #955f61;
-  --purple: #6e33ce;
-  --on-accent: #fffdfb;
-  --overlay: rgba(100, 63, 97, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(40, 72, 169, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(61, 43, 90, .1);
-  --panel-shadow-right: -2px 0 18px rgba(61, 43, 90, .1);
-  --accent-soft: rgba(40, 72, 169, 0.1);
-  --accent-soft-strong: rgba(40, 72, 169, 0.18);
-  --accent-border: rgba(40, 72, 169, 0.24);
-  --accent-border-strong: rgba(40, 72, 169, 0.36);
-  --accent-glow: 0 10px 24px rgba(40, 72, 169, 0.16);
-  --tab-hover-bg: rgba(100, 63, 97, 0.05);
-  --tab-active-bg: rgba(40, 72, 169, 0.095);
-  --tab-active-border: rgba(40, 72, 169, 0.28);
-  --tab-active-line: rgba(40, 72, 169, 0.9);
-  --tab-overflow-shadow: rgba(100, 63, 97, 0.36);
-  --violet-soft: rgba(110, 51, 206, 0.13);
-  --violet-border: rgba(110, 51, 206, 0.28);
-  --indigo-soft: rgba(40, 72, 169, 0.12);
-  --indigo-border: rgba(40, 72, 169, 0.26);
-  --blue-soft: rgba(40, 72, 169, 0.1);
-  --blue-border: rgba(40, 72, 169, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(100, 63, 97, 0.22);
-  --purple-soft: rgba(110, 51, 206, 0.13);
-  --purple-border: rgba(110, 51, 206, 0.28);
-  --green-soft: rgba(57, 104, 71, 0.11);
-  --green-border: rgba(57, 104, 71, 0.27);
-  --gold-soft: rgba(172, 84, 2, 0.12);
-  --gold-border: rgba(172, 84, 2, 0.28);
-  --note-yellow: #ac5402;
-  --note-yellow-soft: rgba(172, 84, 2, 0.2);
-  --note-yellow-border: rgba(172, 84, 2, 0.32);
-  --orange-soft: rgba(149, 95, 97, 0.11);
-  --orange-border: rgba(149, 95, 97, 0.27);
-  --red-soft: rgba(165, 34, 47, 0.1);
-  --red-border: rgba(165, 34, 47, 0.27);
-  --canvas-glow-a: rgba(40, 72, 169, 0.05);
-  --canvas-glow-b: rgba(110, 51, 206, 0.04);
-  --state-active-fill: rgba(40, 72, 169, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(40, 72, 169, 0.14));
-  --state-reject-fill: rgba(165, 34, 47, 0.09);
-  --marquee-fill: rgba(40, 72, 169, 0.08);
-  --minimap-viewport: rgba(40, 72, 169, 0.45);
-  --shadow-sm: 0 2px 10px rgba(61, 43, 90, .09);
-  --shadow-md: 0 10px 28px rgba(61, 43, 90, .13);
-  --shadow-lg: 0 20px 56px rgba(61, 43, 90, .17);
-}
-:root[data-theme="cyberpunk"] {
-  color-scheme: dark;
-  --bg: #1a0a10;
-  --bg2: #110609;
-  --bg3: #26121a;
-  --surface: #26121a;
-  --surface2: #331b26;
-  --surface3: #432433;
-  --border: rgba(0, 191, 255, 0.12);
-  --border2: rgba(0, 191, 255, 0.22);
-  --sb-thumb: rgba(0, 191, 255, 0.26);
-  --sb-thumb-hover: rgba(0, 191, 255, 0.42);
-  --sb-thumb-active: rgba(0, 191, 255, 0.6);
-  --text: #f6ecf0;
-  --text2: #c9b0bb;
-  --text3: #8d7280;
-  --accent: #00bfff;
-  --accent2: #b14aff;
-  --violet: #b14aff;
-  --indigo: #b14aff;
-  --blue: #00bfff;
-  --gold: #ffea00;
-  --green: #39ff6a;
-  --red: #ff007a;
-  --orange: #ff5c00;
-  --purple: #b14aff;
-  --on-accent: #0d0407;
-  --overlay: rgba(26, 10, 16, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(0, 191, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(0, 191, 255, 0.1);
-  --accent-soft-strong: rgba(0, 191, 255, 0.18);
-  --accent-border: rgba(0, 191, 255, 0.26);
-  --accent-border-strong: rgba(0, 191, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(0, 191, 255, 0.32);
-  --tab-hover-bg: rgba(246, 236, 240, 0.04);
-  --tab-active-bg: rgba(0, 191, 255, 0.13);
-  --tab-active-border: rgba(0, 191, 255, 0.28);
-  --tab-active-line: rgba(0, 191, 255, 0.95);
-  --tab-overflow-shadow: rgba(26, 10, 16, 0.62);
-  --violet-soft: rgba(177, 74, 255, 0.13);
-  --violet-border: rgba(177, 74, 255, 0.28);
-  --indigo-soft: rgba(177, 74, 255, 0.12);
-  --indigo-border: rgba(177, 74, 255, 0.26);
-  --blue-soft: rgba(0, 191, 255, 0.1);
-  --blue-border: rgba(0, 191, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(177, 74, 255, 0.13);
-  --purple-border: rgba(177, 74, 255, 0.28);
-  --green-soft: rgba(57, 255, 106, 0.11);
-  --green-border: rgba(57, 255, 106, 0.27);
-  --gold-soft: rgba(255, 234, 0, 0.12);
-  --gold-border: rgba(255, 234, 0, 0.28);
-  --note-yellow: #ffea00;
-  --note-yellow-soft: rgba(255, 234, 0, 0.18);
-  --note-yellow-border: rgba(255, 234, 0, 0.4);
-  --orange-soft: rgba(255, 92, 0, 0.11);
-  --orange-border: rgba(255, 92, 0, 0.27);
-  --red-soft: rgba(255, 0, 122, 0.1);
-  --red-border: rgba(255, 0, 122, 0.27);
-  --canvas-glow-a: rgba(0, 191, 255, 0.045);
-  --canvas-glow-b: rgba(177, 74, 255, 0.035);
-  --state-active-fill: rgba(0, 191, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 191, 255, 0.42));
-  --state-reject-fill: rgba(255, 0, 122, 0.1);
-  --marquee-fill: rgba(0, 191, 255, 0.1);
-  --minimap-viewport: rgba(0, 191, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="marathon"] {
-  color-scheme: dark;
-  --bg: #08080a;
-  --bg2: #050506;
-  --bg3: #16161a;
-  --surface: #16161a;
-  --surface2: #202026;
-  --surface3: #2c2c34;
-  --border: rgba(111, 111, 255, 0.12);
-  --border2: rgba(111, 111, 255, 0.22);
-  --sb-thumb: rgba(111, 111, 255, 0.26);
-  --sb-thumb-hover: rgba(111, 111, 255, 0.42);
-  --sb-thumb-active: rgba(111, 111, 255, 0.6);
-  --text: #f4f4f6;
-  --text2: #b6b6c0;
-  --text3: #78788a;
-  --accent: #6f6fff;
-  --accent2: #9d4dff;
-  --violet: #9d4dff;
-  --indigo: #9d4dff;
-  --blue: #6f6fff;
-  --gold: #ccff00;
-  --green: #00e5ff;
-  --red: #ff2d9b;
-  --orange: #ff5c1f;
-  --purple: #9d4dff;
-  --on-accent: #08080a;
-  --overlay: rgba(8, 8, 10, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(111, 111, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(111, 111, 255, 0.1);
-  --accent-soft-strong: rgba(111, 111, 255, 0.18);
-  --accent-border: rgba(111, 111, 255, 0.26);
-  --accent-border-strong: rgba(111, 111, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(111, 111, 255, 0.32);
-  --tab-hover-bg: rgba(244, 244, 246, 0.04);
-  --tab-active-bg: rgba(111, 111, 255, 0.13);
-  --tab-active-border: rgba(111, 111, 255, 0.28);
-  --tab-active-line: rgba(111, 111, 255, 0.95);
-  --tab-overflow-shadow: rgba(8, 8, 10, 0.62);
-  --violet-soft: rgba(157, 77, 255, 0.13);
-  --violet-border: rgba(157, 77, 255, 0.28);
-  --indigo-soft: rgba(157, 77, 255, 0.12);
-  --indigo-border: rgba(157, 77, 255, 0.26);
-  --blue-soft: rgba(111, 111, 255, 0.1);
-  --blue-border: rgba(111, 111, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(157, 77, 255, 0.13);
-  --purple-border: rgba(157, 77, 255, 0.28);
-  --green-soft: rgba(0, 229, 255, 0.11);
-  --green-border: rgba(0, 229, 255, 0.27);
-  --gold-soft: rgba(204, 255, 0, 0.12);
-  --gold-border: rgba(204, 255, 0, 0.28);
-  --note-yellow: #ccff00;
-  --note-yellow-soft: rgba(204, 255, 0, 0.18);
-  --note-yellow-border: rgba(204, 255, 0, 0.4);
-  --orange-soft: rgba(255, 92, 31, 0.11);
-  --orange-border: rgba(255, 92, 31, 0.27);
-  --red-soft: rgba(255, 45, 155, 0.1);
-  --red-border: rgba(255, 45, 155, 0.27);
-  --canvas-glow-a: rgba(111, 111, 255, 0.045);
-  --canvas-glow-b: rgba(157, 77, 255, 0.035);
-  --state-active-fill: rgba(111, 111, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(111, 111, 255, 0.42));
-  --state-reject-fill: rgba(255, 45, 155, 0.1);
-  --marquee-fill: rgba(111, 111, 255, 0.1);
-  --minimap-viewport: rgba(111, 111, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="japan-day"] {
-  color-scheme: light;
-  --bg: #fdf4f4;
-  --bg2: #fffafa;
-  --bg3: #f5e4e4;
-  --surface: #fffafa;
-  --surface2: #f9eeee;
-  --surface3: #ecd9da;
-  --border: rgba(107, 90, 96, 0.16);
-  --border2: rgba(107, 90, 96, 0.26);
-  --sb-thumb: rgba(107, 90, 96, 0.26);
-  --sb-thumb-hover: rgba(107, 90, 96, 0.4);
-  --sb-thumb-active: rgba(107, 90, 96, 0.56);
-  --text: #241d20;
-  --text2: #6b5a60;
-  --text3: #a08f96;
-  --accent: #235d8b;
-  --accent2: #7d5aa0;
-  --violet: #7d5aa0;
-  --indigo: #7d5aa0;
-  --blue: #235d8b;
-  --gold: #b07d0a;
-  --green: #4f7a42;
-  --red: #c74375;
-  --orange: #d34b1f;
-  --purple: #7d5aa0;
-  --on-accent: #fffafa;
-  --overlay: rgba(107, 90, 96, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(35, 93, 139, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(36, 29, 32, .1);
-  --panel-shadow-right: -2px 0 18px rgba(36, 29, 32, .1);
-  --accent-soft: rgba(35, 93, 139, 0.1);
-  --accent-soft-strong: rgba(35, 93, 139, 0.18);
-  --accent-border: rgba(35, 93, 139, 0.24);
-  --accent-border-strong: rgba(35, 93, 139, 0.36);
-  --accent-glow: 0 10px 24px rgba(35, 93, 139, 0.16);
-  --tab-hover-bg: rgba(107, 90, 96, 0.05);
-  --tab-active-bg: rgba(35, 93, 139, 0.095);
-  --tab-active-border: rgba(35, 93, 139, 0.28);
-  --tab-active-line: rgba(35, 93, 139, 0.9);
-  --tab-overflow-shadow: rgba(107, 90, 96, 0.36);
-  --violet-soft: rgba(125, 90, 160, 0.13);
-  --violet-border: rgba(125, 90, 160, 0.28);
-  --indigo-soft: rgba(125, 90, 160, 0.12);
-  --indigo-border: rgba(125, 90, 160, 0.26);
-  --blue-soft: rgba(35, 93, 139, 0.1);
-  --blue-border: rgba(35, 93, 139, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(107, 90, 96, 0.22);
-  --purple-soft: rgba(125, 90, 160, 0.13);
-  --purple-border: rgba(125, 90, 160, 0.28);
-  --green-soft: rgba(79, 122, 66, 0.11);
-  --green-border: rgba(79, 122, 66, 0.27);
-  --gold-soft: rgba(176, 125, 10, 0.12);
-  --gold-border: rgba(176, 125, 10, 0.28);
-  --note-yellow: #b07d0a;
-  --note-yellow-soft: rgba(176, 125, 10, 0.2);
-  --note-yellow-border: rgba(176, 125, 10, 0.32);
-  --orange-soft: rgba(211, 75, 31, 0.11);
-  --orange-border: rgba(211, 75, 31, 0.27);
-  --red-soft: rgba(199, 67, 117, 0.1);
-  --red-border: rgba(199, 67, 117, 0.27);
-  --canvas-glow-a: rgba(35, 93, 139, 0.05);
-  --canvas-glow-b: rgba(125, 90, 160, 0.04);
-  --state-active-fill: rgba(35, 93, 139, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(35, 93, 139, 0.14));
-  --state-reject-fill: rgba(199, 67, 117, 0.09);
-  --marquee-fill: rgba(35, 93, 139, 0.08);
-  --minimap-viewport: rgba(35, 93, 139, 0.45);
-  --shadow-sm: 0 2px 10px rgba(36, 29, 32, .09);
-  --shadow-md: 0 10px 28px rgba(36, 29, 32, .13);
-  --shadow-lg: 0 20px 56px rgba(36, 29, 32, .17);
-}
-
-:root[data-theme="japan-night"] {
-  color-scheme: dark;
-  --bg: #0d1020;
-  --bg2: #080a16;
-  --bg3: #171b30;
-  --surface: #171b30;
-  --surface2: #212640;
-  --surface3: #2e3454;
-  --border: rgba(180, 77, 255, 0.12);
-  --border2: rgba(180, 77, 255, 0.22);
-  --sb-thumb: rgba(180, 77, 255, 0.26);
-  --sb-thumb-hover: rgba(180, 77, 255, 0.42);
-  --sb-thumb-active: rgba(180, 77, 255, 0.6);
-  --text: #eef0ff;
-  --text2: #b6bcdd;
-  --text3: #7e85ab;
-  --accent: #b44dff;
-  --accent2: #c77dff;
-  --violet: #c77dff;
-  --indigo: #c77dff;
-  --blue: #4dd2ff;
-  --gold: #ffc24d;
-  --green: #3fffa8;
-  --red: #ff3d7a;
-  --orange: #ff7a3d;
-  --purple: #c77dff;
-  --on-accent: #080a16;
-  --overlay: rgba(13, 16, 32, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(180, 77, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(180, 77, 255, 0.1);
-  --accent-soft-strong: rgba(180, 77, 255, 0.18);
-  --accent-border: rgba(180, 77, 255, 0.26);
-  --accent-border-strong: rgba(180, 77, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(180, 77, 255, 0.32);
-  --tab-hover-bg: rgba(238, 240, 255, 0.04);
-  --tab-active-bg: rgba(180, 77, 255, 0.13);
-  --tab-active-border: rgba(180, 77, 255, 0.28);
-  --tab-active-line: rgba(180, 77, 255, 0.95);
-  --tab-overflow-shadow: rgba(13, 16, 32, 0.62);
-  --violet-soft: rgba(199, 125, 255, 0.13);
-  --violet-border: rgba(199, 125, 255, 0.28);
-  --indigo-soft: rgba(199, 125, 255, 0.12);
-  --indigo-border: rgba(199, 125, 255, 0.26);
-  --blue-soft: rgba(77, 210, 255, 0.1);
-  --blue-border: rgba(77, 210, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(199, 125, 255, 0.13);
-  --purple-border: rgba(199, 125, 255, 0.28);
-  --green-soft: rgba(63, 255, 168, 0.11);
-  --green-border: rgba(63, 255, 168, 0.27);
-  --gold-soft: rgba(255, 194, 77, 0.12);
-  --gold-border: rgba(255, 194, 77, 0.28);
-  --note-yellow: #ffc24d;
-  --note-yellow-soft: rgba(255, 194, 77, 0.18);
-  --note-yellow-border: rgba(255, 194, 77, 0.4);
-  --orange-soft: rgba(255, 122, 61, 0.11);
-  --orange-border: rgba(255, 122, 61, 0.27);
-  --red-soft: rgba(255, 61, 122, 0.1);
-  --red-border: rgba(255, 61, 122, 0.27);
-  --canvas-glow-a: rgba(180, 77, 255, 0.045);
-  --canvas-glow-b: rgba(199, 125, 255, 0.035);
-  --state-active-fill: rgba(180, 77, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(180, 77, 255, 0.42));
-  --state-reject-fill: rgba(255, 61, 122, 0.1);
-  --marquee-fill: rgba(180, 77, 255, 0.1);
-  --minimap-viewport: rgba(180, 77, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="yumekawa"] {
-  color-scheme: light;
-  --bg: #fcf4fb;
-  --bg2: #fffbfe;
-  --bg3: #f3e4f2;
-  --surface: #fffbfe;
-  --surface2: #faeff9;
-  --surface3: #eeddee;
-  --border: rgba(122, 92, 128, 0.16);
-  --border2: rgba(122, 92, 128, 0.26);
-  --sb-thumb: rgba(122, 92, 128, 0.26);
-  --sb-thumb-hover: rgba(122, 92, 128, 0.4);
-  --sb-thumb-active: rgba(122, 92, 128, 0.56);
-  --text: #3d2a44;
-  --text2: #7a5c80;
-  --text3: #a289a8;
-  --accent: #9d3fc4;
-  --accent2: #c77ae0;
-  --violet: #c77ae0;
-  --indigo: #c77ae0;
-  --blue: #3d9fd6;
-  --gold: #a8780c;
-  --green: #1f8a6d;
-  --red: #e0335f;
-  --orange: #d96a2a;
-  --purple: #c77ae0;
-  --on-accent: #fffbfe;
-  --overlay: rgba(122, 92, 128, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(157, 63, 196, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(61, 42, 68, .1);
-  --panel-shadow-right: -2px 0 18px rgba(61, 42, 68, .1);
-  --accent-soft: rgba(157, 63, 196, 0.1);
-  --accent-soft-strong: rgba(157, 63, 196, 0.18);
-  --accent-border: rgba(157, 63, 196, 0.24);
-  --accent-border-strong: rgba(157, 63, 196, 0.36);
-  --accent-glow: 0 10px 24px rgba(157, 63, 196, 0.16);
-  --tab-hover-bg: rgba(122, 92, 128, 0.05);
-  --tab-active-bg: rgba(157, 63, 196, 0.095);
-  --tab-active-border: rgba(157, 63, 196, 0.28);
-  --tab-active-line: rgba(157, 63, 196, 0.9);
-  --tab-overflow-shadow: rgba(122, 92, 128, 0.36);
-  --violet-soft: rgba(199, 122, 224, 0.13);
-  --violet-border: rgba(199, 122, 224, 0.28);
-  --indigo-soft: rgba(199, 122, 224, 0.12);
-  --indigo-border: rgba(199, 122, 224, 0.26);
-  --blue-soft: rgba(61, 159, 214, 0.1);
-  --blue-border: rgba(61, 159, 214, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(122, 92, 128, 0.22);
-  --purple-soft: rgba(199, 122, 224, 0.13);
-  --purple-border: rgba(199, 122, 224, 0.28);
-  --green-soft: rgba(31, 138, 109, 0.11);
-  --green-border: rgba(31, 138, 109, 0.27);
-  --gold-soft: rgba(168, 120, 12, 0.12);
-  --gold-border: rgba(168, 120, 12, 0.28);
-  --note-yellow: #a8780c;
-  --note-yellow-soft: rgba(168, 120, 12, 0.2);
-  --note-yellow-border: rgba(168, 120, 12, 0.32);
-  --orange-soft: rgba(217, 106, 42, 0.11);
-  --orange-border: rgba(217, 106, 42, 0.27);
-  --red-soft: rgba(224, 51, 95, 0.1);
-  --red-border: rgba(224, 51, 95, 0.27);
-  --canvas-glow-a: rgba(157, 63, 196, 0.05);
-  --canvas-glow-b: rgba(199, 122, 224, 0.04);
-  --state-active-fill: rgba(157, 63, 196, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(157, 63, 196, 0.14));
-  --state-reject-fill: rgba(224, 51, 95, 0.09);
-  --marquee-fill: rgba(157, 63, 196, 0.08);
-  --minimap-viewport: rgba(157, 63, 196, 0.45);
-  --shadow-sm: 0 2px 10px rgba(61, 42, 68, .09);
-  --shadow-md: 0 10px 28px rgba(61, 42, 68, .13);
-  --shadow-lg: 0 20px 56px rgba(61, 42, 68, .17);
-}
-
-:root[data-theme="india"] {
-  color-scheme: dark;
-  --bg: #12132a;
-  --bg2: #0c0d1e;
-  --bg3: #1e2042;
-  --surface: #1e2042;
-  --surface2: #282b52;
-  --surface3: #363a68;
-  --border: rgba(0, 179, 164, 0.12);
-  --border2: rgba(0, 179, 164, 0.22);
-  --sb-thumb: rgba(0, 179, 164, 0.26);
-  --sb-thumb-hover: rgba(0, 179, 164, 0.42);
-  --sb-thumb-active: rgba(0, 179, 164, 0.6);
-  --text: #f5ecd9;
-  --text2: #c9bfa8;
-  --text3: #8e86a8;
-  --accent: #00b3a4;
-  --accent2: #b565d8;
-  --violet: #b565d8;
-  --indigo: #b565d8;
-  --blue: #00b3a4;
-  --gold: #f0b429;
-  --green: #7cb342;
-  --red: #e0374a;
-  --orange: #f2711c;
-  --purple: #b565d8;
-  --on-accent: #0c0d1e;
-  --overlay: rgba(18, 19, 42, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(0, 179, 164, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(0, 179, 164, 0.1);
-  --accent-soft-strong: rgba(0, 179, 164, 0.18);
-  --accent-border: rgba(0, 179, 164, 0.26);
-  --accent-border-strong: rgba(0, 179, 164, 0.4);
-  --accent-glow: 0 0 14px rgba(0, 179, 164, 0.32);
-  --tab-hover-bg: rgba(245, 236, 217, 0.04);
-  --tab-active-bg: rgba(0, 179, 164, 0.13);
-  --tab-active-border: rgba(0, 179, 164, 0.28);
-  --tab-active-line: rgba(0, 179, 164, 0.95);
-  --tab-overflow-shadow: rgba(18, 19, 42, 0.62);
-  --violet-soft: rgba(181, 101, 216, 0.13);
-  --violet-border: rgba(181, 101, 216, 0.28);
-  --indigo-soft: rgba(181, 101, 216, 0.12);
-  --indigo-border: rgba(181, 101, 216, 0.26);
-  --blue-soft: rgba(0, 179, 164, 0.1);
-  --blue-border: rgba(0, 179, 164, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(181, 101, 216, 0.13);
-  --purple-border: rgba(181, 101, 216, 0.28);
-  --green-soft: rgba(124, 179, 66, 0.11);
-  --green-border: rgba(124, 179, 66, 0.27);
-  --gold-soft: rgba(240, 180, 41, 0.12);
-  --gold-border: rgba(240, 180, 41, 0.28);
-  --note-yellow: #f0b429;
-  --note-yellow-soft: rgba(240, 180, 41, 0.18);
-  --note-yellow-border: rgba(240, 180, 41, 0.4);
-  --orange-soft: rgba(242, 113, 28, 0.11);
-  --orange-border: rgba(242, 113, 28, 0.27);
-  --red-soft: rgba(224, 55, 74, 0.1);
-  --red-border: rgba(224, 55, 74, 0.27);
-  --canvas-glow-a: rgba(0, 179, 164, 0.045);
-  --canvas-glow-b: rgba(181, 101, 216, 0.035);
-  --state-active-fill: rgba(0, 179, 164, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 179, 164, 0.42));
-  --state-reject-fill: rgba(224, 55, 74, 0.1);
-  --marquee-fill: rgba(0, 179, 164, 0.1);
-  --minimap-viewport: rgba(0, 179, 164, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="forest"] {
-  color-scheme: dark;
-  --bg: #101a14;
-  --bg2: #0a120d;
-  --bg3: #1a2a20;
-  --surface: #1a2a20;
-  --surface2: #24382b;
-  --surface3: #31493a;
-  --border: rgba(108, 194, 161, 0.12);
-  --border2: rgba(108, 194, 161, 0.22);
-  --sb-thumb: rgba(108, 194, 161, 0.26);
-  --sb-thumb-hover: rgba(108, 194, 161, 0.42);
-  --sb-thumb-active: rgba(108, 194, 161, 0.6);
-  --text: #dfe8dc;
-  --text2: #a8bda6;
-  --text3: #6f8a72;
-  --accent: #6cc2a1;
-  --accent2: #a98bc9;
-  --violet: #a98bc9;
-  --indigo: #a98bc9;
-  --blue: #6cc2a1;
-  --gold: #ddb14a;
-  --green: #8fbc4a;
-  --red: #d4605c;
-  --orange: #cf7043;
-  --purple: #a98bc9;
-  --on-accent: #08100b;
-  --overlay: rgba(16, 26, 20, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(108, 194, 161, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(108, 194, 161, 0.1);
-  --accent-soft-strong: rgba(108, 194, 161, 0.18);
-  --accent-border: rgba(108, 194, 161, 0.26);
-  --accent-border-strong: rgba(108, 194, 161, 0.4);
-  --accent-glow: 0 0 14px rgba(108, 194, 161, 0.32);
-  --tab-hover-bg: rgba(223, 232, 220, 0.04);
-  --tab-active-bg: rgba(108, 194, 161, 0.13);
-  --tab-active-border: rgba(108, 194, 161, 0.28);
-  --tab-active-line: rgba(108, 194, 161, 0.95);
-  --tab-overflow-shadow: rgba(16, 26, 20, 0.62);
-  --violet-soft: rgba(169, 139, 201, 0.13);
-  --violet-border: rgba(169, 139, 201, 0.28);
-  --indigo-soft: rgba(169, 139, 201, 0.12);
-  --indigo-border: rgba(169, 139, 201, 0.26);
-  --blue-soft: rgba(108, 194, 161, 0.1);
-  --blue-border: rgba(108, 194, 161, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(169, 139, 201, 0.13);
-  --purple-border: rgba(169, 139, 201, 0.28);
-  --green-soft: rgba(143, 188, 74, 0.11);
-  --green-border: rgba(143, 188, 74, 0.27);
-  --gold-soft: rgba(221, 177, 74, 0.12);
-  --gold-border: rgba(221, 177, 74, 0.28);
-  --note-yellow: #ddb14a;
-  --note-yellow-soft: rgba(221, 177, 74, 0.18);
-  --note-yellow-border: rgba(221, 177, 74, 0.4);
-  --orange-soft: rgba(207, 112, 67, 0.11);
-  --orange-border: rgba(207, 112, 67, 0.27);
-  --red-soft: rgba(212, 96, 92, 0.1);
-  --red-border: rgba(212, 96, 92, 0.27);
-  --canvas-glow-a: rgba(108, 194, 161, 0.045);
-  --canvas-glow-b: rgba(169, 139, 201, 0.035);
-  --state-active-fill: rgba(108, 194, 161, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(108, 194, 161, 0.42));
-  --state-reject-fill: rgba(212, 96, 92, 0.1);
-  --marquee-fill: rgba(108, 194, 161, 0.1);
-  --minimap-viewport: rgba(108, 194, 161, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="rivers"] {
-  color-scheme: light;
-  --bg: #edf1f1;
-  --bg2: #f9fcfc;
-  --bg3: #dce5e6;
-  --surface: #f9fcfc;
-  --surface2: #eaf0f0;
-  --surface3: #d2dcdd;
-  --border: rgba(77, 102, 111, 0.16);
-  --border2: rgba(77, 102, 111, 0.26);
-  --sb-thumb: rgba(77, 102, 111, 0.26);
-  --sb-thumb-hover: rgba(77, 102, 111, 0.4);
-  --sb-thumb-active: rgba(77, 102, 111, 0.56);
-  --text: #1e2f36;
-  --text2: #4d666f;
-  --text3: #7f959c;
-  --accent: #0f7a8c;
-  --accent2: #6a5a9c;
-  --violet: #6a5a9c;
-  --indigo: #6a5a9c;
-  --blue: #0f7a8c;
-  --gold: #96701a;
-  --green: #3d7a4f;
-  --red: #a83a3a;
-  --orange: #b56a2a;
-  --purple: #6a5a9c;
-  --on-accent: #f9fcfc;
-  --overlay: rgba(77, 102, 111, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(15, 122, 140, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(30, 47, 54, .1);
-  --panel-shadow-right: -2px 0 18px rgba(30, 47, 54, .1);
-  --accent-soft: rgba(15, 122, 140, 0.1);
-  --accent-soft-strong: rgba(15, 122, 140, 0.18);
-  --accent-border: rgba(15, 122, 140, 0.24);
-  --accent-border-strong: rgba(15, 122, 140, 0.36);
-  --accent-glow: 0 10px 24px rgba(15, 122, 140, 0.16);
-  --tab-hover-bg: rgba(77, 102, 111, 0.05);
-  --tab-active-bg: rgba(15, 122, 140, 0.095);
-  --tab-active-border: rgba(15, 122, 140, 0.28);
-  --tab-active-line: rgba(15, 122, 140, 0.9);
-  --tab-overflow-shadow: rgba(77, 102, 111, 0.36);
-  --violet-soft: rgba(106, 90, 156, 0.13);
-  --violet-border: rgba(106, 90, 156, 0.28);
-  --indigo-soft: rgba(106, 90, 156, 0.12);
-  --indigo-border: rgba(106, 90, 156, 0.26);
-  --blue-soft: rgba(15, 122, 140, 0.1);
-  --blue-border: rgba(15, 122, 140, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(77, 102, 111, 0.22);
-  --purple-soft: rgba(106, 90, 156, 0.13);
-  --purple-border: rgba(106, 90, 156, 0.28);
-  --green-soft: rgba(61, 122, 79, 0.11);
-  --green-border: rgba(61, 122, 79, 0.27);
-  --gold-soft: rgba(150, 112, 26, 0.12);
-  --gold-border: rgba(150, 112, 26, 0.28);
-  --note-yellow: #96701a;
-  --note-yellow-soft: rgba(150, 112, 26, 0.2);
-  --note-yellow-border: rgba(150, 112, 26, 0.32);
-  --orange-soft: rgba(181, 106, 42, 0.11);
-  --orange-border: rgba(181, 106, 42, 0.27);
-  --red-soft: rgba(168, 58, 58, 0.1);
-  --red-border: rgba(168, 58, 58, 0.27);
-  --canvas-glow-a: rgba(15, 122, 140, 0.05);
-  --canvas-glow-b: rgba(106, 90, 156, 0.04);
-  --state-active-fill: rgba(15, 122, 140, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(15, 122, 140, 0.14));
-  --state-reject-fill: rgba(168, 58, 58, 0.09);
-  --marquee-fill: rgba(15, 122, 140, 0.08);
-  --minimap-viewport: rgba(15, 122, 140, 0.45);
-  --shadow-sm: 0 2px 10px rgba(30, 47, 54, .09);
-  --shadow-md: 0 10px 28px rgba(30, 47, 54, .13);
-  --shadow-lg: 0 20px 56px rgba(30, 47, 54, .17);
-}
-
-:root[data-theme="space"] {
-  color-scheme: dark;
-  --bg: #060814;
-  --bg2: #03040c;
-  --bg3: #101430;
-  --surface: #101430;
-  --surface2: #1a1f42;
-  --surface3: #262c58;
-  --border: rgba(111, 168, 255, 0.12);
-  --border2: rgba(111, 168, 255, 0.22);
-  --sb-thumb: rgba(111, 168, 255, 0.26);
-  --sb-thumb-hover: rgba(111, 168, 255, 0.42);
-  --sb-thumb-active: rgba(111, 168, 255, 0.6);
-  --text: #e8ebff;
-  --text2: #b0b6dd;
-  --text3: #7178a8;
-  --accent: #6fa8ff;
-  --accent2: #b088ff;
-  --violet: #b088ff;
-  --indigo: #b088ff;
-  --blue: #6fa8ff;
-  --gold: #ffc857;
-  --green: #4fd6a8;
-  --red: #ff5d73;
-  --orange: #ff9a52;
-  --purple: #b088ff;
-  --on-accent: #03040c;
-  --overlay: rgba(6, 8, 20, 0.72);
-  --overlay-ring: rgba(255, 255, 255, .025);
-  --focus-ring: rgba(111, 168, 255, 0.12);
-  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
-  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
-  --accent-soft: rgba(111, 168, 255, 0.1);
-  --accent-soft-strong: rgba(111, 168, 255, 0.18);
-  --accent-border: rgba(111, 168, 255, 0.26);
-  --accent-border-strong: rgba(111, 168, 255, 0.4);
-  --accent-glow: 0 0 14px rgba(111, 168, 255, 0.32);
-  --tab-hover-bg: rgba(232, 235, 255, 0.04);
-  --tab-active-bg: rgba(111, 168, 255, 0.13);
-  --tab-active-border: rgba(111, 168, 255, 0.28);
-  --tab-active-line: rgba(111, 168, 255, 0.95);
-  --tab-overflow-shadow: rgba(6, 8, 20, 0.62);
-  --violet-soft: rgba(176, 136, 255, 0.13);
-  --violet-border: rgba(176, 136, 255, 0.28);
-  --indigo-soft: rgba(176, 136, 255, 0.12);
-  --indigo-border: rgba(176, 136, 255, 0.26);
-  --blue-soft: rgba(111, 168, 255, 0.1);
-  --blue-border: rgba(111, 168, 255, 0.26);
-  --white-note: #f8fbff;
-  --white-note-soft: rgba(255, 255, 255, .92);
-  --white-note-border: rgba(248, 251, 255, .72);
-  --purple-soft: rgba(176, 136, 255, 0.13);
-  --purple-border: rgba(176, 136, 255, 0.28);
-  --green-soft: rgba(79, 214, 168, 0.11);
-  --green-border: rgba(79, 214, 168, 0.27);
-  --gold-soft: rgba(255, 200, 87, 0.12);
-  --gold-border: rgba(255, 200, 87, 0.28);
-  --note-yellow: #ffc857;
-  --note-yellow-soft: rgba(255, 200, 87, 0.18);
-  --note-yellow-border: rgba(255, 200, 87, 0.4);
-  --orange-soft: rgba(255, 154, 82, 0.11);
-  --orange-border: rgba(255, 154, 82, 0.27);
-  --red-soft: rgba(255, 93, 115, 0.1);
-  --red-border: rgba(255, 93, 115, 0.27);
-  --canvas-glow-a: rgba(111, 168, 255, 0.045);
-  --canvas-glow-b: rgba(176, 136, 255, 0.035);
-  --state-active-fill: rgba(111, 168, 255, 0.18);
-  --state-active-shadow: drop-shadow(0 0 7px rgba(111, 168, 255, 0.42));
-  --state-reject-fill: rgba(255, 93, 115, 0.1);
-  --marquee-fill: rgba(111, 168, 255, 0.1);
-  --minimap-viewport: rgba(111, 168, 255, 0.6);
-  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
-  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
-}
-
-:root[data-theme="himalaya"] {
-  color-scheme: light;
-  --bg: #eef3f7;
-  --bg2: #fbfdff;
-  --bg3: #dde6ee;
-  --surface: #fbfdff;
-  --surface2: #eaf1f6;
-  --surface3: #d2dee8;
-  --border: rgba(74, 98, 116, 0.16);
-  --border2: rgba(74, 98, 116, 0.26);
-  --sb-thumb: rgba(74, 98, 116, 0.26);
-  --sb-thumb-hover: rgba(74, 98, 116, 0.4);
-  --sb-thumb-active: rgba(74, 98, 116, 0.56);
-  --text: #1b2a38;
-  --text2: #4a6274;
-  --text3: #7d94a6;
-  --accent: #1f7a9c;
-  --accent2: #6b5b9e;
-  --violet: #6b5b9e;
-  --indigo: #6b5b9e;
-  --blue: #1f7a9c;
-  --gold: #9a6f12;
-  --green: #3f7a3a;
-  --red: #b03a48;
-  --orange: #c2601f;
-  --purple: #6b5b9e;
-  --on-accent: #fbfdff;
-  --overlay: rgba(74, 98, 116, 0.28);
-  --overlay-ring: rgba(255, 255, 255, .75);
-  --focus-ring: rgba(31, 122, 156, 0.12);
-  --panel-shadow-left: 2px 0 18px rgba(27, 42, 56, .1);
-  --panel-shadow-right: -2px 0 18px rgba(27, 42, 56, .1);
-  --accent-soft: rgba(31, 122, 156, 0.1);
-  --accent-soft-strong: rgba(31, 122, 156, 0.18);
-  --accent-border: rgba(31, 122, 156, 0.24);
-  --accent-border-strong: rgba(31, 122, 156, 0.36);
-  --accent-glow: 0 10px 24px rgba(31, 122, 156, 0.16);
-  --tab-hover-bg: rgba(74, 98, 116, 0.05);
-  --tab-active-bg: rgba(31, 122, 156, 0.095);
-  --tab-active-border: rgba(31, 122, 156, 0.28);
-  --tab-active-line: rgba(31, 122, 156, 0.9);
-  --tab-overflow-shadow: rgba(74, 98, 116, 0.36);
-  --violet-soft: rgba(107, 91, 158, 0.13);
-  --violet-border: rgba(107, 91, 158, 0.28);
-  --indigo-soft: rgba(107, 91, 158, 0.12);
-  --indigo-border: rgba(107, 91, 158, 0.26);
-  --blue-soft: rgba(31, 122, 156, 0.1);
-  --blue-border: rgba(31, 122, 156, 0.26);
-  --white-note: #ffffff;
-  --white-note-soft: rgba(255, 255, 255, .94);
-  --white-note-border: rgba(74, 98, 116, 0.22);
-  --purple-soft: rgba(107, 91, 158, 0.13);
-  --purple-border: rgba(107, 91, 158, 0.28);
-  --green-soft: rgba(63, 122, 58, 0.11);
-  --green-border: rgba(63, 122, 58, 0.27);
-  --gold-soft: rgba(154, 111, 18, 0.12);
-  --gold-border: rgba(154, 111, 18, 0.28);
-  --note-yellow: #9a6f12;
-  --note-yellow-soft: rgba(154, 111, 18, 0.2);
-  --note-yellow-border: rgba(154, 111, 18, 0.32);
-  --orange-soft: rgba(194, 96, 31, 0.11);
-  --orange-border: rgba(194, 96, 31, 0.27);
-  --red-soft: rgba(176, 58, 72, 0.1);
-  --red-border: rgba(176, 58, 72, 0.27);
-  --canvas-glow-a: rgba(31, 122, 156, 0.05);
-  --canvas-glow-b: rgba(107, 91, 158, 0.04);
-  --state-active-fill: rgba(31, 122, 156, 0.12);
-  --state-active-shadow: drop-shadow(0 8px 18px rgba(31, 122, 156, 0.14));
-  --state-reject-fill: rgba(176, 58, 72, 0.09);
-  --marquee-fill: rgba(31, 122, 156, 0.08);
-  --minimap-viewport: rgba(31, 122, 156, 0.45);
-  --shadow-sm: 0 2px 10px rgba(27, 42, 56, .09);
-  --shadow-md: 0 10px 28px rgba(27, 42, 56, .13);
-  --shadow-lg: 0 20px 56px rgba(27, 42, 56, .17);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-}
-
-body {
-  font-family: var(--mono);
-  background: var(--bg);
-  color: var(--text);
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-}
-
-/* Re-enable selection only where it makes sense */
-input,
-textarea,
-select,
-.lang-claim,
-.def-box,
-.slist,
-.gram-result,
-.gram-rules,
-.rp-section-body,
-.algo-output {
-  user-select: text;
-}
-
-/* ─── SCROLLBARS ───
-   The app draws its own scrollbars everywhere rather than inheriting the OS
-   ones, which differ per platform and ignore the theme. Deliberately thin:
-   a 7px thumb on a transparent track, so scrollable regions lose almost no
-   usable width and the bar reads as part of the surface it sits on.
-
-   Firefox only supports the two `scrollbar-*` properties (no pseudo-elements,
-   no hover state), so it gets `thin` + matching colours; WebKit/Blink gets the
-   pseudo-element rules below with hover and active feedback. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--sb-thumb) transparent;
-}
-
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--sb-thumb);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--sb-thumb-hover);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--sb-thumb-active);
-}
-
-/* Where both axes scroll, the corner would otherwise render as an opaque
-   system-grey square. */
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* Scrollbars are a pointing-device affordance; touch surfaces scroll by drag
-   and the bar only covers content. */
-@media (pointer: coarse) {
-  * {
-    scrollbar-width: none;
-  }
-
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-}
+  --focus-ring: rgba(79, 195, 247, .08);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .16);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .16);
+  --accent-soft: rgba(79, 195, 247, .1);
+  --accent-soft-strong: rgba(79, 195, 247, .18);
+  --accent-border: rgba(79, 195, 247, .25);
+  --accent-border-strong: rgba(79, 195, 247, .4);
+  --accent-glow: 0 0 14px rgba(79, 195, 247, .35);
+  --tab-hover-bg: rgba(255, 255, 255, .035);
+  --tab-active-bg: rgba(79, 195, 247, .11);
+  --tab-active-border: rgba(79, 195, 247, .28);
+  --tab-active-line: rgba(79, 195, 247, .95);
+  --tab-overflow-shadow: rgba(2, 7, 16, .62);
+  --violet-soft: rgba(179, 136, 255, .14);
+  --violet-border: rgba(179, 136, 255, .32);
+  --indigo-soft: rgba(124, 77, 255, .13);
+  --indigo-border: rgba(124, 77, 255, .3);
+  --blue-soft: rgba(79, 195, 247, .11);
+  --blue-border: rgba(79, 195, 247, .3);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(206, 147, 216, .14);
+  --purple-border: rgba(206, 147, 216, .3);
+  --green-soft: rgba(105, 240, 174, .1);
+  --green-border: rgba(105, 240, 174, .3);
+  --gold-soft: rgba(255, 213, 79, .12);
+  --gold-border: rgba(255, 213, 79, .3);
+  --note-yellow: #fff176;
+  --note-yellow-soft: rgba(255, 241, 118, .18);
+  --note-yellow-border: rgba(255, 241, 118, .42);
+  --orange-soft: rgba(255, 183, 77, .1);
+  --orange-border: rgba(255, 183, 77, .3);
+  --red-soft: rgba(255, 107, 107, .1);
+  --red-border: rgba(255, 107, 107, .3);
+  --canvas-glow-a: rgba(79, 195, 247, .035);
+  --canvas-glow-b: rgba(124, 77, 255, .03);
+  --state-active-fill: rgba(79, 195, 247, .18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(79, 195, 247, .45));
+  --state-reject-fill: rgba(255, 107, 107, .1);
+  --marquee-fill: rgba(79, 195, 247, .1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6);
+  --transition-fast: 0.12s ease;
+  --transition-base: 0.18s ease;
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+  --bg: #eef4fb;
+  --bg2: #f8fbff;
+  --bg3: #e8f0f8;
+  --surface: #ffffff;
+  --surface2: #f4f8fd;
+  --surface3: #e1eaf5;
+  --border: rgba(41, 73, 109, 0.12);
+  --border2: rgba(41, 73, 109, 0.2);
+  --sb-thumb: rgba(41, 73, 109, 0.24);
+  --sb-thumb-hover: rgba(41, 73, 109, 0.4);
+  --sb-thumb-active: rgba(41, 73, 109, 0.56);
+  --text: #16324a;
+  --text2: #496277;
+  --text3: #7d92a6;
+  --accent: #178ed8;
+  --violet: #8458cf;
+  --indigo: #4f46c8;
+  --blue: #178ed8;
+  --gold: #b7791f;
+  --green: #198b63;
+  --red: #cb4545;
+  --orange: #d97706;
+  --purple: #8458cf;
+  --on-accent: #f8fbff;
+  --overlay: rgba(24, 45, 70, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(23, 142, 216, .14);
+  --panel-shadow-left: 2px 0 18px rgba(34, 58, 86, .12);
+  --panel-shadow-right: -2px 0 18px rgba(34, 58, 86, .12);
+  --accent-soft: rgba(23, 142, 216, .1);
+  --accent-soft-strong: rgba(23, 142, 216, .16);
+  --accent-border: rgba(23, 142, 216, .22);
+  --accent-border-strong: rgba(23, 142, 216, .34);
+  --accent-glow: 0 10px 24px rgba(23, 142, 216, .18);
+  --tab-hover-bg: rgba(22, 50, 74, .05);
+  --tab-active-bg: rgba(23, 142, 216, .095);
+  --tab-active-border: rgba(23, 142, 216, .28);
+  --tab-active-line: rgba(23, 142, 216, .92);
+  --tab-overflow-shadow: rgba(113, 136, 167, .36);
+  --violet-soft: rgba(132, 88, 207, .12);
+  --violet-border: rgba(132, 88, 207, .24);
+  --indigo-soft: rgba(79, 70, 200, .1);
+  --indigo-border: rgba(79, 70, 200, .24);
+  --blue-soft: rgba(23, 142, 216, .1);
+  --blue-border: rgba(23, 142, 216, .24);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .96);
+  --white-note-border: rgba(41, 73, 109, .22);
+  --purple-soft: rgba(132, 88, 207, .12);
+  --purple-border: rgba(132, 88, 207, .24);
+  --green-soft: rgba(25, 139, 99, .1);
+  --green-border: rgba(25, 139, 99, .24);
+  --gold-soft: rgba(183, 121, 31, .11);
+  --gold-border: rgba(183, 121, 31, .24);
+  --note-yellow: #f5d742;
+  --note-yellow-soft: rgba(245, 215, 66, .22);
+  --note-yellow-border: rgba(153, 125, 12, .3);
+  --orange-soft: rgba(217, 119, 6, .1);
+  --orange-border: rgba(217, 119, 6, .24);
+  --red-soft: rgba(203, 69, 69, .09);
+  --red-border: rgba(203, 69, 69, .24);
+  --canvas-glow-a: rgba(23, 142, 216, .055);
+  --canvas-glow-b: rgba(104, 88, 232, .04);
+  --state-active-fill: rgba(23, 142, 216, .12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(23, 142, 216, .14));
+  --state-reject-fill: rgba(203, 69, 69, .08);
+  --marquee-fill: rgba(23, 142, 216, .08);
+  --shadow-sm: 0 2px 10px rgba(31, 53, 80, .08);
+  --shadow-md: 0 10px 28px rgba(31, 53, 80, .12);
+  --shadow-lg: 0 20px 56px rgba(31, 53, 80, .16);
+}
+
+:root[data-theme="nord"] {
+  color-scheme: dark;
+  --bg: #2e3440;
+  --bg2: #272c36;
+  --bg3: #3b4252;
+  --surface: #3b4252;
+  --surface2: #434c5e;
+  --surface3: #4c566a;
+  --border: rgba(136, 192, 208, 0.12);
+  --border2: rgba(136, 192, 208, 0.22);
+  --sb-thumb: rgba(136, 192, 208, 0.26);
+  --sb-thumb-hover: rgba(136, 192, 208, 0.42);
+  --sb-thumb-active: rgba(136, 192, 208, 0.6);
+  --text: #eceff4;
+  --text2: #c3cad9;
+  --text3: #8b96ad;
+  --accent: #88c0d0;
+  --violet: #b48ead;
+  --indigo: #5e81ac;
+  --blue: #88c0d0;
+  --gold: #ebcb8b;
+  --green: #a3be8c;
+  --red: #bf616a;
+  --orange: #d08770;
+  --purple: #b48ead;
+  --on-accent: #20242c;
+  --overlay: rgba(46, 52, 64, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(136, 192, 208, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(136, 192, 208, 0.1);
+  --accent-soft-strong: rgba(136, 192, 208, 0.18);
+  --accent-border: rgba(136, 192, 208, 0.26);
+  --accent-border-strong: rgba(136, 192, 208, 0.4);
+  --accent-glow: 0 0 14px rgba(136, 192, 208, 0.32);
+  --tab-hover-bg: rgba(236, 239, 244, 0.04);
+  --tab-active-bg: rgba(136, 192, 208, 0.13);
+  --tab-active-border: rgba(136, 192, 208, 0.28);
+  --tab-active-line: rgba(136, 192, 208, 0.95);
+  --tab-overflow-shadow: rgba(46, 52, 64, 0.62);
+  --violet-soft: rgba(180, 142, 173, 0.13);
+  --violet-border: rgba(180, 142, 173, 0.28);
+  --indigo-soft: rgba(94, 129, 172, 0.12);
+  --indigo-border: rgba(94, 129, 172, 0.26);
+  --blue-soft: rgba(136, 192, 208, 0.1);
+  --blue-border: rgba(136, 192, 208, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(180, 142, 173, 0.13);
+  --purple-border: rgba(180, 142, 173, 0.28);
+  --green-soft: rgba(163, 190, 140, 0.11);
+  --green-border: rgba(163, 190, 140, 0.27);
+  --gold-soft: rgba(235, 203, 139, 0.12);
+  --gold-border: rgba(235, 203, 139, 0.28);
+  --note-yellow: #ebcb8b;
+  --note-yellow-soft: rgba(235, 203, 139, 0.18);
+  --note-yellow-border: rgba(235, 203, 139, 0.4);
+  --orange-soft: rgba(208, 135, 112, 0.11);
+  --orange-border: rgba(208, 135, 112, 0.27);
+  --red-soft: rgba(191, 97, 106, 0.1);
+  --red-border: rgba(191, 97, 106, 0.27);
+  --canvas-glow-a: rgba(136, 192, 208, 0.045);
+  --canvas-glow-b: rgba(180, 142, 173, 0.035);
+  --state-active-fill: rgba(136, 192, 208, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(136, 192, 208, 0.42));
+  --state-reject-fill: rgba(191, 97, 106, 0.1);
+  --marquee-fill: rgba(136, 192, 208, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="solarized-light"] {
+  color-scheme: light;
+  --bg: #fdf6e3;
+  --bg2: #f7f0da;
+  --bg3: #eee8d5;
+  --surface: #ffffff;
+  --surface2: #f7f2e3;
+  --surface3: #eee8d5;
+  --border: rgba(101, 123, 131, 0.14);
+  --border2: rgba(101, 123, 131, 0.24);
+  --sb-thumb: rgba(101, 123, 131, 0.26);
+  --sb-thumb-hover: rgba(101, 123, 131, 0.4);
+  --sb-thumb-active: rgba(101, 123, 131, 0.56);
+  --text: #073642;
+  --text2: #586e75;
+  --text3: #93a1a1;
+  --accent: #b58900;
+  --violet: #6c71c4;
+  --indigo: #6c71c4;
+  --blue: #268bd2;
+  --gold: #b58900;
+  --green: #859900;
+  --red: #dc322f;
+  --orange: #cb4b16;
+  --purple: #d33682;
+  --on-accent: #fdf6e3;
+  --overlay: rgba(101, 123, 131, 0.26);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(181, 137, 0, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
+  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
+  --accent-soft: rgba(181, 137, 0, 0.1);
+  --accent-soft-strong: rgba(181, 137, 0, 0.18);
+  --accent-border: rgba(181, 137, 0, 0.24);
+  --accent-border-strong: rgba(181, 137, 0, 0.36);
+  --accent-glow: 0 10px 24px rgba(181, 137, 0, 0.16);
+  --tab-hover-bg: rgba(101, 123, 131, 0.05);
+  --tab-active-bg: rgba(181, 137, 0, 0.095);
+  --tab-active-border: rgba(181, 137, 0, 0.28);
+  --tab-active-line: rgba(181, 137, 0, 0.9);
+  --tab-overflow-shadow: rgba(101, 123, 131, 0.36);
+  --violet-soft: rgba(108, 113, 196, 0.13);
+  --violet-border: rgba(108, 113, 196, 0.28);
+  --indigo-soft: rgba(108, 113, 196, 0.12);
+  --indigo-border: rgba(108, 113, 196, 0.26);
+  --blue-soft: rgba(38, 139, 210, 0.1);
+  --blue-border: rgba(38, 139, 210, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(101, 123, 131, 0.22);
+  --purple-soft: rgba(211, 54, 130, 0.13);
+  --purple-border: rgba(211, 54, 130, 0.28);
+  --green-soft: rgba(133, 153, 0, 0.11);
+  --green-border: rgba(133, 153, 0, 0.27);
+  --gold-soft: rgba(181, 137, 0, 0.12);
+  --gold-border: rgba(181, 137, 0, 0.28);
+  --note-yellow: #b58900;
+  --note-yellow-soft: rgba(181, 137, 0, 0.2);
+  --note-yellow-border: rgba(181, 137, 0, 0.32);
+  --orange-soft: rgba(203, 75, 22, 0.11);
+  --orange-border: rgba(203, 75, 22, 0.27);
+  --red-soft: rgba(220, 50, 47, 0.1);
+  --red-border: rgba(220, 50, 47, 0.27);
+  --canvas-glow-a: rgba(181, 137, 0, 0.05);
+  --canvas-glow-b: rgba(108, 113, 196, 0.04);
+  --state-active-fill: rgba(181, 137, 0, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(181, 137, 0, 0.14));
+  --state-reject-fill: rgba(220, 50, 47, 0.09);
+  --marquee-fill: rgba(181, 137, 0, 0.08);
+  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
+  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
+  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
+}
+
+:root[data-theme="solarized-dark"] {
+  color-scheme: dark;
+  --bg: #002b36;
+  --bg2: #012933;
+  --bg3: #073642;
+  --surface: #073642;
+  --surface2: #0a4757;
+  --surface3: #0e5468;
+  --border: rgba(42, 161, 152, 0.12);
+  --border2: rgba(42, 161, 152, 0.22);
+  --sb-thumb: rgba(42, 161, 152, 0.26);
+  --sb-thumb-hover: rgba(42, 161, 152, 0.42);
+  --sb-thumb-active: rgba(42, 161, 152, 0.6);
+  --text: #eee8d5;
+  --text2: #93a1a1;
+  --text3: #657b83;
+  --accent: #2aa198;
+  --violet: #6c71c4;
+  --indigo: #268bd2;
+  --blue: #268bd2;
+  --gold: #b58900;
+  --green: #859900;
+  --red: #dc322f;
+  --orange: #cb4b16;
+  --purple: #d33682;
+  --on-accent: #002b36;
+  --overlay: rgba(0, 43, 54, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(42, 161, 152, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(42, 161, 152, 0.1);
+  --accent-soft-strong: rgba(42, 161, 152, 0.18);
+  --accent-border: rgba(42, 161, 152, 0.26);
+  --accent-border-strong: rgba(42, 161, 152, 0.4);
+  --accent-glow: 0 0 14px rgba(42, 161, 152, 0.32);
+  --tab-hover-bg: rgba(238, 232, 213, 0.04);
+  --tab-active-bg: rgba(42, 161, 152, 0.13);
+  --tab-active-border: rgba(42, 161, 152, 0.28);
+  --tab-active-line: rgba(42, 161, 152, 0.95);
+  --tab-overflow-shadow: rgba(0, 43, 54, 0.62);
+  --violet-soft: rgba(108, 113, 196, 0.13);
+  --violet-border: rgba(108, 113, 196, 0.28);
+  --indigo-soft: rgba(38, 139, 210, 0.12);
+  --indigo-border: rgba(38, 139, 210, 0.26);
+  --blue-soft: rgba(38, 139, 210, 0.1);
+  --blue-border: rgba(38, 139, 210, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(211, 54, 130, 0.13);
+  --purple-border: rgba(211, 54, 130, 0.28);
+  --green-soft: rgba(133, 153, 0, 0.11);
+  --green-border: rgba(133, 153, 0, 0.27);
+  --gold-soft: rgba(181, 137, 0, 0.12);
+  --gold-border: rgba(181, 137, 0, 0.28);
+  --note-yellow: #b58900;
+  --note-yellow-soft: rgba(181, 137, 0, 0.18);
+  --note-yellow-border: rgba(181, 137, 0, 0.4);
+  --orange-soft: rgba(203, 75, 22, 0.11);
+  --orange-border: rgba(203, 75, 22, 0.27);
+  --red-soft: rgba(220, 50, 47, 0.1);
+  --red-border: rgba(220, 50, 47, 0.27);
+  --canvas-glow-a: rgba(42, 161, 152, 0.045);
+  --canvas-glow-b: rgba(108, 113, 196, 0.035);
+  --state-active-fill: rgba(42, 161, 152, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(42, 161, 152, 0.42));
+  --state-reject-fill: rgba(220, 50, 47, 0.1);
+  --marquee-fill: rgba(42, 161, 152, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="dracula"] {
+  color-scheme: dark;
+  --bg: #282a36;
+  --bg2: #21222c;
+  --bg3: #343746;
+  --surface: #343746;
+  --surface2: #3d4052;
+  --surface3: #44475a;
+  --border: rgba(189, 147, 249, 0.12);
+  --border2: rgba(189, 147, 249, 0.22);
+  --sb-thumb: rgba(189, 147, 249, 0.26);
+  --sb-thumb-hover: rgba(189, 147, 249, 0.42);
+  --sb-thumb-active: rgba(189, 147, 249, 0.6);
+  --text: #f8f8f2;
+  --text2: #bfc1cc;
+  --text3: #7b7f9e;
+  --accent: #bd93f9;
+  --violet: #bd93f9;
+  --indigo: #6272a4;
+  --blue: #8be9fd;
+  --gold: #f1fa8c;
+  --green: #50fa7b;
+  --red: #ff5555;
+  --orange: #ffb86c;
+  --purple: #ff79c6;
+  --on-accent: #1e1f29;
+  --overlay: rgba(40, 42, 54, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(189, 147, 249, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(189, 147, 249, 0.1);
+  --accent-soft-strong: rgba(189, 147, 249, 0.18);
+  --accent-border: rgba(189, 147, 249, 0.26);
+  --accent-border-strong: rgba(189, 147, 249, 0.4);
+  --accent-glow: 0 0 14px rgba(189, 147, 249, 0.32);
+  --tab-hover-bg: rgba(248, 248, 242, 0.04);
+  --tab-active-bg: rgba(189, 147, 249, 0.13);
+  --tab-active-border: rgba(189, 147, 249, 0.28);
+  --tab-active-line: rgba(189, 147, 249, 0.95);
+  --tab-overflow-shadow: rgba(40, 42, 54, 0.62);
+  --violet-soft: rgba(189, 147, 249, 0.13);
+  --violet-border: rgba(189, 147, 249, 0.28);
+  --indigo-soft: rgba(98, 114, 164, 0.12);
+  --indigo-border: rgba(98, 114, 164, 0.26);
+  --blue-soft: rgba(139, 233, 253, 0.1);
+  --blue-border: rgba(139, 233, 253, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(255, 121, 198, 0.13);
+  --purple-border: rgba(255, 121, 198, 0.28);
+  --green-soft: rgba(80, 250, 123, 0.11);
+  --green-border: rgba(80, 250, 123, 0.27);
+  --gold-soft: rgba(241, 250, 140, 0.12);
+  --gold-border: rgba(241, 250, 140, 0.28);
+  --note-yellow: #f1fa8c;
+  --note-yellow-soft: rgba(241, 250, 140, 0.18);
+  --note-yellow-border: rgba(241, 250, 140, 0.4);
+  --orange-soft: rgba(255, 184, 108, 0.11);
+  --orange-border: rgba(255, 184, 108, 0.27);
+  --red-soft: rgba(255, 85, 85, 0.1);
+  --red-border: rgba(255, 85, 85, 0.27);
+  --canvas-glow-a: rgba(189, 147, 249, 0.045);
+  --canvas-glow-b: rgba(189, 147, 249, 0.035);
+  --state-active-fill: rgba(189, 147, 249, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(189, 147, 249, 0.42));
+  --state-reject-fill: rgba(255, 85, 85, 0.1);
+  --marquee-fill: rgba(189, 147, 249, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="gruvbox"] {
+  color-scheme: dark;
+  --bg: #282828;
+  --bg2: #1d2021;
+  --bg3: #3c3836;
+  --surface: #3c3836;
+  --surface2: #504945;
+  --surface3: #665c54;
+  --border: rgba(254, 128, 25, 0.12);
+  --border2: rgba(254, 128, 25, 0.22);
+  --sb-thumb: rgba(254, 128, 25, 0.26);
+  --sb-thumb-hover: rgba(254, 128, 25, 0.42);
+  --sb-thumb-active: rgba(254, 128, 25, 0.6);
+  --text: #ebdbb2;
+  --text2: #bdae93;
+  --text3: #a89984;
+  --accent: #fe8019;
+  --violet: #d3869b;
+  --indigo: #83a598;
+  --blue: #83a598;
+  --gold: #fabd2f;
+  --green: #b8bb26;
+  --red: #fb4934;
+  --orange: #fe8019;
+  --purple: #d3869b;
+  --on-accent: #1d2021;
+  --overlay: rgba(40, 40, 40, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(254, 128, 25, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(254, 128, 25, 0.1);
+  --accent-soft-strong: rgba(254, 128, 25, 0.18);
+  --accent-border: rgba(254, 128, 25, 0.26);
+  --accent-border-strong: rgba(254, 128, 25, 0.4);
+  --accent-glow: 0 0 14px rgba(254, 128, 25, 0.32);
+  --tab-hover-bg: rgba(235, 219, 178, 0.04);
+  --tab-active-bg: rgba(254, 128, 25, 0.13);
+  --tab-active-border: rgba(254, 128, 25, 0.28);
+  --tab-active-line: rgba(254, 128, 25, 0.95);
+  --tab-overflow-shadow: rgba(40, 40, 40, 0.62);
+  --violet-soft: rgba(211, 134, 155, 0.13);
+  --violet-border: rgba(211, 134, 155, 0.28);
+  --indigo-soft: rgba(131, 165, 152, 0.12);
+  --indigo-border: rgba(131, 165, 152, 0.26);
+  --blue-soft: rgba(131, 165, 152, 0.1);
+  --blue-border: rgba(131, 165, 152, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(211, 134, 155, 0.13);
+  --purple-border: rgba(211, 134, 155, 0.28);
+  --green-soft: rgba(184, 187, 38, 0.11);
+  --green-border: rgba(184, 187, 38, 0.27);
+  --gold-soft: rgba(250, 189, 47, 0.12);
+  --gold-border: rgba(250, 189, 47, 0.28);
+  --note-yellow: #fabd2f;
+  --note-yellow-soft: rgba(250, 189, 47, 0.18);
+  --note-yellow-border: rgba(250, 189, 47, 0.4);
+  --orange-soft: rgba(254, 128, 25, 0.11);
+  --orange-border: rgba(254, 128, 25, 0.27);
+  --red-soft: rgba(251, 73, 52, 0.1);
+  --red-border: rgba(251, 73, 52, 0.27);
+  --canvas-glow-a: rgba(254, 128, 25, 0.045);
+  --canvas-glow-b: rgba(211, 134, 155, 0.035);
+  --state-active-fill: rgba(254, 128, 25, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(254, 128, 25, 0.42));
+  --state-reject-fill: rgba(251, 73, 52, 0.1);
+  --marquee-fill: rgba(254, 128, 25, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="gruvbox-light"] {
+  color-scheme: light;
+  --bg: #fbf1c7;
+  --bg2: #f9f5d7;
+  --bg3: #ebdbb2;
+  --surface: #f9f5d7;
+  --surface2: #f5eecd;
+  --surface3: #ebdbb2;
+  --border: rgba(80, 73, 69, 0.16);
+  --border2: rgba(80, 73, 69, 0.26);
+  --sb-thumb: rgba(80, 73, 69, 0.26);
+  --sb-thumb-hover: rgba(80, 73, 69, 0.4);
+  --sb-thumb-active: rgba(80, 73, 69, 0.56);
+  --text: #3c3836;
+  --text2: #504945;
+  --text3: #7c6f64;
+  --accent: #076678;
+  --violet: #8f3f71;
+  --indigo: #076678;
+  --blue: #076678;
+  --gold: #b57614;
+  --green: #79740e;
+  --red: #9d0006;
+  --orange: #af3a03;
+  --purple: #8f3f71;
+  --on-accent: #f9f5d7;
+  --overlay: rgba(80, 73, 69, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(7, 102, 120, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(60, 56, 54, .1);
+  --panel-shadow-right: -2px 0 18px rgba(60, 56, 54, .1);
+  --accent-soft: rgba(7, 102, 120, 0.1);
+  --accent-soft-strong: rgba(7, 102, 120, 0.18);
+  --accent-border: rgba(7, 102, 120, 0.24);
+  --accent-border-strong: rgba(7, 102, 120, 0.36);
+  --accent-glow: 0 10px 24px rgba(7, 102, 120, 0.16);
+  --tab-hover-bg: rgba(80, 73, 69, 0.05);
+  --tab-active-bg: rgba(7, 102, 120, 0.095);
+  --tab-active-border: rgba(7, 102, 120, 0.28);
+  --tab-active-line: rgba(7, 102, 120, 0.9);
+  --tab-overflow-shadow: rgba(80, 73, 69, 0.36);
+  --violet-soft: rgba(143, 63, 113, 0.13);
+  --violet-border: rgba(143, 63, 113, 0.28);
+  --indigo-soft: rgba(7, 102, 120, 0.12);
+  --indigo-border: rgba(7, 102, 120, 0.26);
+  --blue-soft: rgba(7, 102, 120, 0.1);
+  --blue-border: rgba(7, 102, 120, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(80, 73, 69, 0.22);
+  --purple-soft: rgba(143, 63, 113, 0.13);
+  --purple-border: rgba(143, 63, 113, 0.28);
+  --green-soft: rgba(121, 116, 14, 0.11);
+  --green-border: rgba(121, 116, 14, 0.27);
+  --gold-soft: rgba(181, 118, 20, 0.12);
+  --gold-border: rgba(181, 118, 20, 0.28);
+  --note-yellow: #b57614;
+  --note-yellow-soft: rgba(181, 118, 20, 0.2);
+  --note-yellow-border: rgba(181, 118, 20, 0.32);
+  --orange-soft: rgba(175, 58, 3, 0.11);
+  --orange-border: rgba(175, 58, 3, 0.27);
+  --red-soft: rgba(157, 0, 6, 0.1);
+  --red-border: rgba(157, 0, 6, 0.27);
+  --canvas-glow-a: rgba(7, 102, 120, 0.05);
+  --canvas-glow-b: rgba(143, 63, 113, 0.04);
+  --state-active-fill: rgba(7, 102, 120, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(7, 102, 120, 0.14));
+  --state-reject-fill: rgba(157, 0, 6, 0.09);
+  --marquee-fill: rgba(7, 102, 120, 0.08);
+  --shadow-sm: 0 2px 10px rgba(60, 56, 54, .09);
+  --shadow-md: 0 10px 28px rgba(60, 56, 54, .13);
+  --shadow-lg: 0 20px 56px rgba(60, 56, 54, .17);
+}
+
+:root[data-theme="one-dark"] {
+  color-scheme: dark;
+  --bg: #282c34;
+  --bg2: #21252b;
+  --bg3: #2c313a;
+  --surface: #2c313a;
+  --surface2: #333842;
+  --surface3: #3e4451;
+  --border: rgba(97, 175, 239, 0.12);
+  --border2: rgba(97, 175, 239, 0.22);
+  --sb-thumb: rgba(97, 175, 239, 0.26);
+  --sb-thumb-hover: rgba(97, 175, 239, 0.42);
+  --sb-thumb-active: rgba(97, 175, 239, 0.6);
+  --text: #abb2bf;
+  --text2: #828997;
+  --text3: #5c6370;
+  --accent: #61afef;
+  --violet: #c678dd;
+  --indigo: #61afef;
+  --blue: #61afef;
+  --gold: #e5c07b;
+  --green: #98c379;
+  --red: #e06c75;
+  --orange: #d19a66;
+  --purple: #c678dd;
+  --on-accent: #1a1c20;
+  --overlay: rgba(40, 44, 52, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(97, 175, 239, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(97, 175, 239, 0.1);
+  --accent-soft-strong: rgba(97, 175, 239, 0.18);
+  --accent-border: rgba(97, 175, 239, 0.26);
+  --accent-border-strong: rgba(97, 175, 239, 0.4);
+  --accent-glow: 0 0 14px rgba(97, 175, 239, 0.32);
+  --tab-hover-bg: rgba(171, 178, 191, 0.04);
+  --tab-active-bg: rgba(97, 175, 239, 0.13);
+  --tab-active-border: rgba(97, 175, 239, 0.28);
+  --tab-active-line: rgba(97, 175, 239, 0.95);
+  --tab-overflow-shadow: rgba(40, 44, 52, 0.62);
+  --violet-soft: rgba(198, 120, 221, 0.13);
+  --violet-border: rgba(198, 120, 221, 0.28);
+  --indigo-soft: rgba(97, 175, 239, 0.12);
+  --indigo-border: rgba(97, 175, 239, 0.26);
+  --blue-soft: rgba(97, 175, 239, 0.1);
+  --blue-border: rgba(97, 175, 239, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(198, 120, 221, 0.13);
+  --purple-border: rgba(198, 120, 221, 0.28);
+  --green-soft: rgba(152, 195, 121, 0.11);
+  --green-border: rgba(152, 195, 121, 0.27);
+  --gold-soft: rgba(229, 192, 123, 0.12);
+  --gold-border: rgba(229, 192, 123, 0.28);
+  --note-yellow: #e5c07b;
+  --note-yellow-soft: rgba(229, 192, 123, 0.18);
+  --note-yellow-border: rgba(229, 192, 123, 0.4);
+  --orange-soft: rgba(209, 154, 102, 0.11);
+  --orange-border: rgba(209, 154, 102, 0.27);
+  --red-soft: rgba(224, 108, 117, 0.1);
+  --red-border: rgba(224, 108, 117, 0.27);
+  --canvas-glow-a: rgba(97, 175, 239, 0.045);
+  --canvas-glow-b: rgba(198, 120, 221, 0.035);
+  --state-active-fill: rgba(97, 175, 239, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(97, 175, 239, 0.42));
+  --state-reject-fill: rgba(224, 108, 117, 0.1);
+  --marquee-fill: rgba(97, 175, 239, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="tokyo-night"] {
+  color-scheme: dark;
+  --bg: #1a1b26;
+  --bg2: #16161e;
+  --bg3: #232433;
+  --surface: #232433;
+  --surface2: #292e42;
+  --surface3: #343a52;
+  --border: rgba(122, 162, 247, 0.12);
+  --border2: rgba(122, 162, 247, 0.22);
+  --sb-thumb: rgba(122, 162, 247, 0.26);
+  --sb-thumb-hover: rgba(122, 162, 247, 0.42);
+  --sb-thumb-active: rgba(122, 162, 247, 0.6);
+  --text: #c0caf5;
+  --text2: #9099c4;
+  --text3: #565f89;
+  --accent: #7aa2f7;
+  --violet: #bb9af7;
+  --indigo: #7aa2f7;
+  --blue: #7dcfff;
+  --gold: #e0af68;
+  --green: #9ece6a;
+  --red: #f7768e;
+  --orange: #ff9e64;
+  --purple: #bb9af7;
+  --on-accent: #161620;
+  --overlay: rgba(26, 27, 38, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(122, 162, 247, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(122, 162, 247, 0.1);
+  --accent-soft-strong: rgba(122, 162, 247, 0.18);
+  --accent-border: rgba(122, 162, 247, 0.26);
+  --accent-border-strong: rgba(122, 162, 247, 0.4);
+  --accent-glow: 0 0 14px rgba(122, 162, 247, 0.32);
+  --tab-hover-bg: rgba(192, 202, 245, 0.04);
+  --tab-active-bg: rgba(122, 162, 247, 0.13);
+  --tab-active-border: rgba(122, 162, 247, 0.28);
+  --tab-active-line: rgba(122, 162, 247, 0.95);
+  --tab-overflow-shadow: rgba(26, 27, 38, 0.62);
+  --violet-soft: rgba(187, 154, 247, 0.13);
+  --violet-border: rgba(187, 154, 247, 0.28);
+  --indigo-soft: rgba(122, 162, 247, 0.12);
+  --indigo-border: rgba(122, 162, 247, 0.26);
+  --blue-soft: rgba(125, 207, 255, 0.1);
+  --blue-border: rgba(125, 207, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(187, 154, 247, 0.13);
+  --purple-border: rgba(187, 154, 247, 0.28);
+  --green-soft: rgba(158, 206, 106, 0.11);
+  --green-border: rgba(158, 206, 106, 0.27);
+  --gold-soft: rgba(224, 175, 104, 0.12);
+  --gold-border: rgba(224, 175, 104, 0.28);
+  --note-yellow: #e0af68;
+  --note-yellow-soft: rgba(224, 175, 104, 0.18);
+  --note-yellow-border: rgba(224, 175, 104, 0.4);
+  --orange-soft: rgba(255, 158, 100, 0.11);
+  --orange-border: rgba(255, 158, 100, 0.27);
+  --red-soft: rgba(247, 118, 142, 0.1);
+  --red-border: rgba(247, 118, 142, 0.27);
+  --canvas-glow-a: rgba(122, 162, 247, 0.045);
+  --canvas-glow-b: rgba(187, 154, 247, 0.035);
+  --state-active-fill: rgba(122, 162, 247, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(122, 162, 247, 0.42));
+  --state-reject-fill: rgba(247, 118, 142, 0.1);
+  --marquee-fill: rgba(122, 162, 247, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="catppuccin"] {
+  color-scheme: dark;
+  --bg: #1e1e2e;
+  --bg2: #181825;
+  --bg3: #292c3c;
+  --surface: #292c3c;
+  --surface2: #313244;
+  --surface3: #45475a;
+  --border: rgba(137, 180, 250, 0.12);
+  --border2: rgba(137, 180, 250, 0.22);
+  --sb-thumb: rgba(137, 180, 250, 0.26);
+  --sb-thumb-hover: rgba(137, 180, 250, 0.42);
+  --sb-thumb-active: rgba(137, 180, 250, 0.6);
+  --text: #cdd6f4;
+  --text2: #a6adc8;
+  --text3: #6c7086;
+  --accent: #89b4fa;
+  --violet: #cba6f7;
+  --indigo: #b4befe;
+  --blue: #89b4fa;
+  --gold: #f9e2af;
+  --green: #a6e3a1;
+  --red: #f38ba8;
+  --orange: #fab387;
+  --purple: #cba6f7;
+  --on-accent: #181825;
+  --overlay: rgba(30, 30, 46, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(137, 180, 250, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(137, 180, 250, 0.1);
+  --accent-soft-strong: rgba(137, 180, 250, 0.18);
+  --accent-border: rgba(137, 180, 250, 0.26);
+  --accent-border-strong: rgba(137, 180, 250, 0.4);
+  --accent-glow: 0 0 14px rgba(137, 180, 250, 0.32);
+  --tab-hover-bg: rgba(205, 214, 244, 0.04);
+  --tab-active-bg: rgba(137, 180, 250, 0.13);
+  --tab-active-border: rgba(137, 180, 250, 0.28);
+  --tab-active-line: rgba(137, 180, 250, 0.95);
+  --tab-overflow-shadow: rgba(30, 30, 46, 0.62);
+  --violet-soft: rgba(203, 166, 247, 0.13);
+  --violet-border: rgba(203, 166, 247, 0.28);
+  --indigo-soft: rgba(180, 190, 254, 0.12);
+  --indigo-border: rgba(180, 190, 254, 0.26);
+  --blue-soft: rgba(137, 180, 250, 0.1);
+  --blue-border: rgba(137, 180, 250, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(203, 166, 247, 0.13);
+  --purple-border: rgba(203, 166, 247, 0.28);
+  --green-soft: rgba(166, 227, 161, 0.11);
+  --green-border: rgba(166, 227, 161, 0.27);
+  --gold-soft: rgba(249, 226, 175, 0.12);
+  --gold-border: rgba(249, 226, 175, 0.28);
+  --note-yellow: #f9e2af;
+  --note-yellow-soft: rgba(249, 226, 175, 0.18);
+  --note-yellow-border: rgba(249, 226, 175, 0.4);
+  --orange-soft: rgba(250, 179, 135, 0.11);
+  --orange-border: rgba(250, 179, 135, 0.27);
+  --red-soft: rgba(243, 139, 168, 0.1);
+  --red-border: rgba(243, 139, 168, 0.27);
+  --canvas-glow-a: rgba(137, 180, 250, 0.045);
+  --canvas-glow-b: rgba(203, 166, 247, 0.035);
+  --state-active-fill: rgba(137, 180, 250, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(137, 180, 250, 0.42));
+  --state-reject-fill: rgba(243, 139, 168, 0.1);
+  --marquee-fill: rgba(137, 180, 250, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="rose-pine"] {
+  color-scheme: dark;
+  --bg: #191724;
+  --bg2: #14121f;
+  --bg3: #1f1d2e;
+  --surface: #1f1d2e;
+  --surface2: #26233a;
+  --surface3: #403d52;
+  --border: rgba(156, 207, 216, 0.12);
+  --border2: rgba(156, 207, 216, 0.22);
+  --sb-thumb: rgba(156, 207, 216, 0.26);
+  --sb-thumb-hover: rgba(156, 207, 216, 0.42);
+  --sb-thumb-active: rgba(156, 207, 216, 0.6);
+  --text: #e0def4;
+  --text2: #a8a4c5;
+  --text3: #6e6a86;
+  --accent: #9ccfd8;
+  --violet: #c4a7e7;
+  --indigo: #31748f;
+  --blue: #9ccfd8;
+  --gold: #f6c177;
+  --green: #31748f;
+  --red: #eb6f92;
+  --orange: #ebbcba;
+  --purple: #c4a7e7;
+  --on-accent: #161320;
+  --overlay: rgba(25, 23, 36, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(156, 207, 216, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(156, 207, 216, 0.1);
+  --accent-soft-strong: rgba(156, 207, 216, 0.18);
+  --accent-border: rgba(156, 207, 216, 0.26);
+  --accent-border-strong: rgba(156, 207, 216, 0.4);
+  --accent-glow: 0 0 14px rgba(156, 207, 216, 0.32);
+  --tab-hover-bg: rgba(224, 222, 244, 0.04);
+  --tab-active-bg: rgba(156, 207, 216, 0.13);
+  --tab-active-border: rgba(156, 207, 216, 0.28);
+  --tab-active-line: rgba(156, 207, 216, 0.95);
+  --tab-overflow-shadow: rgba(25, 23, 36, 0.62);
+  --violet-soft: rgba(196, 167, 231, 0.13);
+  --violet-border: rgba(196, 167, 231, 0.28);
+  --indigo-soft: rgba(49, 116, 143, 0.12);
+  --indigo-border: rgba(49, 116, 143, 0.26);
+  --blue-soft: rgba(156, 207, 216, 0.1);
+  --blue-border: rgba(156, 207, 216, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(196, 167, 231, 0.13);
+  --purple-border: rgba(196, 167, 231, 0.28);
+  --green-soft: rgba(49, 116, 143, 0.11);
+  --green-border: rgba(49, 116, 143, 0.27);
+  --gold-soft: rgba(246, 193, 119, 0.12);
+  --gold-border: rgba(246, 193, 119, 0.28);
+  --note-yellow: #f6c177;
+  --note-yellow-soft: rgba(246, 193, 119, 0.18);
+  --note-yellow-border: rgba(246, 193, 119, 0.4);
+  --orange-soft: rgba(235, 188, 186, 0.11);
+  --orange-border: rgba(235, 188, 186, 0.27);
+  --red-soft: rgba(235, 111, 146, 0.1);
+  --red-border: rgba(235, 111, 146, 0.27);
+  --canvas-glow-a: rgba(156, 207, 216, 0.045);
+  --canvas-glow-b: rgba(196, 167, 231, 0.035);
+  --state-active-fill: rgba(156, 207, 216, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(156, 207, 216, 0.42));
+  --state-reject-fill: rgba(235, 111, 146, 0.1);
+  --marquee-fill: rgba(156, 207, 216, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="github-light"] {
+  color-scheme: light;
+  --bg: #ffffff;
+  --bg2: #f6f8fa;
+  --bg3: #eaeef2;
+  --surface: #ffffff;
+  --surface2: #f6f8fa;
+  --surface3: #eaeef2;
+  --border: rgba(89, 99, 110, 0.14);
+  --border2: rgba(89, 99, 110, 0.24);
+  --sb-thumb: rgba(89, 99, 110, 0.26);
+  --sb-thumb-hover: rgba(89, 99, 110, 0.4);
+  --sb-thumb-active: rgba(89, 99, 110, 0.56);
+  --text: #1f2328;
+  --text2: #59636e;
+  --text3: #8c959f;
+  --accent: #0969da;
+  --violet: #8250df;
+  --indigo: #0969da;
+  --blue: #0969da;
+  --gold: #9a6700;
+  --green: #1a7f37;
+  --red: #d1242f;
+  --orange: #bc4c00;
+  --purple: #8250df;
+  --on-accent: #ffffff;
+  --overlay: rgba(89, 99, 110, 0.26);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(9, 105, 218, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
+  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
+  --accent-soft: rgba(9, 105, 218, 0.1);
+  --accent-soft-strong: rgba(9, 105, 218, 0.18);
+  --accent-border: rgba(9, 105, 218, 0.24);
+  --accent-border-strong: rgba(9, 105, 218, 0.36);
+  --accent-glow: 0 10px 24px rgba(9, 105, 218, 0.16);
+  --tab-hover-bg: rgba(89, 99, 110, 0.05);
+  --tab-active-bg: rgba(9, 105, 218, 0.095);
+  --tab-active-border: rgba(9, 105, 218, 0.28);
+  --tab-active-line: rgba(9, 105, 218, 0.9);
+  --tab-overflow-shadow: rgba(89, 99, 110, 0.36);
+  --violet-soft: rgba(130, 80, 223, 0.13);
+  --violet-border: rgba(130, 80, 223, 0.28);
+  --indigo-soft: rgba(9, 105, 218, 0.12);
+  --indigo-border: rgba(9, 105, 218, 0.26);
+  --blue-soft: rgba(9, 105, 218, 0.1);
+  --blue-border: rgba(9, 105, 218, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(89, 99, 110, 0.22);
+  --purple-soft: rgba(130, 80, 223, 0.13);
+  --purple-border: rgba(130, 80, 223, 0.28);
+  --green-soft: rgba(26, 127, 55, 0.11);
+  --green-border: rgba(26, 127, 55, 0.27);
+  --gold-soft: rgba(154, 103, 0, 0.12);
+  --gold-border: rgba(154, 103, 0, 0.28);
+  --note-yellow: #9a6700;
+  --note-yellow-soft: rgba(154, 103, 0, 0.2);
+  --note-yellow-border: rgba(154, 103, 0, 0.32);
+  --orange-soft: rgba(188, 76, 0, 0.11);
+  --orange-border: rgba(188, 76, 0, 0.27);
+  --red-soft: rgba(209, 36, 47, 0.1);
+  --red-border: rgba(209, 36, 47, 0.27);
+  --canvas-glow-a: rgba(9, 105, 218, 0.05);
+  --canvas-glow-b: rgba(130, 80, 223, 0.04);
+  --state-active-fill: rgba(9, 105, 218, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(9, 105, 218, 0.14));
+  --state-reject-fill: rgba(209, 36, 47, 0.09);
+  --marquee-fill: rgba(9, 105, 218, 0.08);
+  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
+  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
+  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
+}
+
+:root[data-theme="github-dark"] {
+  color-scheme: dark;
+  --bg: #0d1117;
+  --bg2: #010409;
+  --bg3: #161b22;
+  --surface: #161b22;
+  --surface2: #1c2128;
+  --surface3: #282e36;
+  --border: rgba(88, 166, 255, 0.12);
+  --border2: rgba(88, 166, 255, 0.22);
+  --sb-thumb: rgba(88, 166, 255, 0.26);
+  --sb-thumb-hover: rgba(88, 166, 255, 0.42);
+  --sb-thumb-active: rgba(88, 166, 255, 0.6);
+  --text: #e6edf3;
+  --text2: #9198a1;
+  --text3: #6e7681;
+  --accent: #58a6ff;
+  --violet: #bc8cff;
+  --indigo: #58a6ff;
+  --blue: #58a6ff;
+  --gold: #d29922;
+  --green: #3fb950;
+  --red: #f85149;
+  --orange: #db6d28;
+  --purple: #bc8cff;
+  --on-accent: #0d1117;
+  --overlay: rgba(13, 17, 23, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(88, 166, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(88, 166, 255, 0.1);
+  --accent-soft-strong: rgba(88, 166, 255, 0.18);
+  --accent-border: rgba(88, 166, 255, 0.26);
+  --accent-border-strong: rgba(88, 166, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(88, 166, 255, 0.32);
+  --tab-hover-bg: rgba(230, 237, 243, 0.04);
+  --tab-active-bg: rgba(88, 166, 255, 0.13);
+  --tab-active-border: rgba(88, 166, 255, 0.28);
+  --tab-active-line: rgba(88, 166, 255, 0.95);
+  --tab-overflow-shadow: rgba(13, 17, 23, 0.62);
+  --violet-soft: rgba(188, 140, 255, 0.13);
+  --violet-border: rgba(188, 140, 255, 0.28);
+  --indigo-soft: rgba(88, 166, 255, 0.12);
+  --indigo-border: rgba(88, 166, 255, 0.26);
+  --blue-soft: rgba(88, 166, 255, 0.1);
+  --blue-border: rgba(88, 166, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(188, 140, 255, 0.13);
+  --purple-border: rgba(188, 140, 255, 0.28);
+  --green-soft: rgba(63, 185, 80, 0.11);
+  --green-border: rgba(63, 185, 80, 0.27);
+  --gold-soft: rgba(210, 153, 34, 0.12);
+  --gold-border: rgba(210, 153, 34, 0.28);
+  --note-yellow: #d29922;
+  --note-yellow-soft: rgba(210, 153, 34, 0.18);
+  --note-yellow-border: rgba(210, 153, 34, 0.4);
+  --orange-soft: rgba(219, 109, 40, 0.11);
+  --orange-border: rgba(219, 109, 40, 0.27);
+  --red-soft: rgba(248, 81, 73, 0.1);
+  --red-border: rgba(248, 81, 73, 0.27);
+  --canvas-glow-a: rgba(88, 166, 255, 0.045);
+  --canvas-glow-b: rgba(188, 140, 255, 0.035);
+  --state-active-fill: rgba(88, 166, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(88, 166, 255, 0.42));
+  --state-reject-fill: rgba(248, 81, 73, 0.1);
+  --marquee-fill: rgba(88, 166, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+:root[data-theme="sepia"] {
+  color-scheme: light;
+  --bg: #f4ecd8;
+  --bg2: #efe4c8;
+  --bg3: #e8dab8;
+  --surface: #fbf5e6;
+  --surface2: #f2e8d0;
+  --surface3: #e8dab8;
+  --border: rgba(122, 105, 82, 0.14);
+  --border2: rgba(122, 105, 82, 0.24);
+  --sb-thumb: rgba(122, 105, 82, 0.26);
+  --sb-thumb-hover: rgba(122, 105, 82, 0.4);
+  --sb-thumb-active: rgba(122, 105, 82, 0.56);
+  --text: #4b3621;
+  --text2: #7a6952;
+  --text3: #a08f72;
+  --accent: #a0522d;
+  --violet: #8a6d9b;
+  --indigo: #6b7d99;
+  --blue: #5b7d9a;
+  --gold: #b8860b;
+  --green: #6b8e4e;
+  --red: #b5453f;
+  --orange: #c1732f;
+  --purple: #8a6d9b;
+  --on-accent: #fbf5e6;
+  --overlay: rgba(122, 105, 82, 0.26);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(160, 82, 45, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
+  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
+  --accent-soft: rgba(160, 82, 45, 0.1);
+  --accent-soft-strong: rgba(160, 82, 45, 0.18);
+  --accent-border: rgba(160, 82, 45, 0.24);
+  --accent-border-strong: rgba(160, 82, 45, 0.36);
+  --accent-glow: 0 10px 24px rgba(160, 82, 45, 0.16);
+  --tab-hover-bg: rgba(122, 105, 82, 0.05);
+  --tab-active-bg: rgba(160, 82, 45, 0.095);
+  --tab-active-border: rgba(160, 82, 45, 0.28);
+  --tab-active-line: rgba(160, 82, 45, 0.9);
+  --tab-overflow-shadow: rgba(122, 105, 82, 0.36);
+  --violet-soft: rgba(138, 109, 155, 0.13);
+  --violet-border: rgba(138, 109, 155, 0.28);
+  --indigo-soft: rgba(107, 125, 153, 0.12);
+  --indigo-border: rgba(107, 125, 153, 0.26);
+  --blue-soft: rgba(91, 125, 154, 0.1);
+  --blue-border: rgba(91, 125, 154, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(122, 105, 82, 0.22);
+  --purple-soft: rgba(138, 109, 155, 0.13);
+  --purple-border: rgba(138, 109, 155, 0.28);
+  --green-soft: rgba(107, 142, 78, 0.11);
+  --green-border: rgba(107, 142, 78, 0.27);
+  --gold-soft: rgba(184, 134, 11, 0.12);
+  --gold-border: rgba(184, 134, 11, 0.28);
+  --note-yellow: #b8860b;
+  --note-yellow-soft: rgba(184, 134, 11, 0.2);
+  --note-yellow-border: rgba(184, 134, 11, 0.32);
+  --orange-soft: rgba(193, 115, 47, 0.11);
+  --orange-border: rgba(193, 115, 47, 0.27);
+  --red-soft: rgba(181, 69, 63, 0.1);
+  --red-border: rgba(181, 69, 63, 0.27);
+  --canvas-glow-a: rgba(160, 82, 45, 0.05);
+  --canvas-glow-b: rgba(138, 109, 155, 0.04);
+  --state-active-fill: rgba(160, 82, 45, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(160, 82, 45, 0.14));
+  --state-reject-fill: rgba(181, 69, 63, 0.09);
+  --marquee-fill: rgba(160, 82, 45, 0.08);
+  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
+  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
+  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
+}
+
+:root[data-theme="high-contrast"] {
+  color-scheme: dark;
+  --bg: #000000;
+  --bg2: #0a0a0a;
+  --bg3: #141414;
+  --surface: #0d0d0d;
+  --surface2: #1a1a1a;
+  --surface3: #262626;
+  --border: rgba(0, 217, 255, 0.12);
+  --border2: rgba(0, 217, 255, 0.22);
+  --sb-thumb: rgba(0, 217, 255, 0.26);
+  --sb-thumb-hover: rgba(0, 217, 255, 0.42);
+  --sb-thumb-active: rgba(0, 217, 255, 0.6);
+  --text: #ffffff;
+  --text2: #e0e0e0;
+  --text3: #a0a0a0;
+  --accent: #00d9ff;
+  --violet: #d896ff;
+  --indigo: #5e9eff;
+  --blue: #00d9ff;
+  --gold: #ffd60a;
+  --green: #00ff9c;
+  --red: #ff4d4d;
+  --orange: #ff9f1c;
+  --purple: #d896ff;
+  --on-accent: #000000;
+  --overlay: rgba(0, 0, 0, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(0, 217, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(0, 217, 255, 0.1);
+  --accent-soft-strong: rgba(0, 217, 255, 0.18);
+  --accent-border: rgba(0, 217, 255, 0.26);
+  --accent-border-strong: rgba(0, 217, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(0, 217, 255, 0.32);
+  --tab-hover-bg: rgba(255, 255, 255, 0.04);
+  --tab-active-bg: rgba(0, 217, 255, 0.13);
+  --tab-active-border: rgba(0, 217, 255, 0.28);
+  --tab-active-line: rgba(0, 217, 255, 0.95);
+  --tab-overflow-shadow: rgba(0, 0, 0, 0.62);
+  --violet-soft: rgba(216, 150, 255, 0.13);
+  --violet-border: rgba(216, 150, 255, 0.28);
+  --indigo-soft: rgba(94, 158, 255, 0.12);
+  --indigo-border: rgba(94, 158, 255, 0.26);
+  --blue-soft: rgba(0, 217, 255, 0.1);
+  --blue-border: rgba(0, 217, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(216, 150, 255, 0.13);
+  --purple-border: rgba(216, 150, 255, 0.28);
+  --green-soft: rgba(0, 255, 156, 0.11);
+  --green-border: rgba(0, 255, 156, 0.27);
+  --gold-soft: rgba(255, 214, 10, 0.12);
+  --gold-border: rgba(255, 214, 10, 0.28);
+  --note-yellow: #ffd60a;
+  --note-yellow-soft: rgba(255, 214, 10, 0.18);
+  --note-yellow-border: rgba(255, 214, 10, 0.4);
+  --orange-soft: rgba(255, 159, 28, 0.11);
+  --orange-border: rgba(255, 159, 28, 0.27);
+  --red-soft: rgba(255, 77, 77, 0.1);
+  --red-border: rgba(255, 77, 77, 0.27);
+  --canvas-glow-a: rgba(0, 217, 255, 0.045);
+  --canvas-glow-b: rgba(216, 150, 255, 0.035);
+  --state-active-fill: rgba(0, 217, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 217, 255, 0.42));
+  --state-reject-fill: rgba(255, 77, 77, 0.1);
+  --marquee-fill: rgba(0, 217, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="ayu-light"] {
+  color-scheme: light;
+  --bg: #fafafa;
+  --bg2: #f3f3f3;
+  --bg3: #e7e8e9;
+  --surface: #ffffff;
+  --surface2: #f3f3f3;
+  --surface3: #e7e8e9;
+  --border: rgba(120, 123, 128, 0.14);
+  --border2: rgba(120, 123, 128, 0.24);
+  --sb-thumb: rgba(120, 123, 128, 0.26);
+  --sb-thumb-hover: rgba(120, 123, 128, 0.4);
+  --sb-thumb-active: rgba(120, 123, 128, 0.56);
+  --text: #5c6166;
+  --text2: #787b80;
+  --text3: #a3a6a6;
+  --accent: #ff9940;
+  --violet: #a37acc;
+  --indigo: #399ee6;
+  --blue: #399ee6;
+  --gold: #bf7e00;
+  --green: #6a8f00;
+  --red: #f51818;
+  --orange: #fa8d3e;
+  --purple: #a37acc;
+  --on-accent: #fafafa;
+  --overlay: rgba(120, 123, 128, 0.26);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(255, 153, 64, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(31, 30, 20, .1);
+  --panel-shadow-right: -2px 0 18px rgba(31, 30, 20, .1);
+  --accent-soft: rgba(255, 153, 64, 0.1);
+  --accent-soft-strong: rgba(255, 153, 64, 0.18);
+  --accent-border: rgba(255, 153, 64, 0.24);
+  --accent-border-strong: rgba(255, 153, 64, 0.36);
+  --accent-glow: 0 10px 24px rgba(255, 153, 64, 0.16);
+  --tab-hover-bg: rgba(120, 123, 128, 0.05);
+  --tab-active-bg: rgba(255, 153, 64, 0.095);
+  --tab-active-border: rgba(255, 153, 64, 0.28);
+  --tab-active-line: rgba(255, 153, 64, 0.9);
+  --tab-overflow-shadow: rgba(120, 123, 128, 0.36);
+  --violet-soft: rgba(163, 122, 204, 0.13);
+  --violet-border: rgba(163, 122, 204, 0.28);
+  --indigo-soft: rgba(57, 158, 230, 0.12);
+  --indigo-border: rgba(57, 158, 230, 0.26);
+  --blue-soft: rgba(57, 158, 230, 0.1);
+  --blue-border: rgba(57, 158, 230, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(120, 123, 128, 0.22);
+  --purple-soft: rgba(163, 122, 204, 0.13);
+  --purple-border: rgba(163, 122, 204, 0.28);
+  --green-soft: rgba(106, 143, 0, 0.11);
+  --green-border: rgba(106, 143, 0, 0.27);
+  --gold-soft: rgba(191, 126, 0, 0.12);
+  --gold-border: rgba(191, 126, 0, 0.28);
+  --note-yellow: #f2ae49;
+  --note-yellow-soft: rgba(242, 174, 73, 0.2);
+  --note-yellow-border: rgba(242, 174, 73, 0.32);
+  --orange-soft: rgba(250, 141, 62, 0.11);
+  --orange-border: rgba(250, 141, 62, 0.27);
+  --red-soft: rgba(245, 24, 24, 0.1);
+  --red-border: rgba(245, 24, 24, 0.27);
+  --canvas-glow-a: rgba(255, 153, 64, 0.05);
+  --canvas-glow-b: rgba(163, 122, 204, 0.04);
+  --state-active-fill: rgba(255, 153, 64, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(255, 153, 64, 0.14));
+  --state-reject-fill: rgba(245, 24, 24, 0.09);
+  --marquee-fill: rgba(255, 153, 64, 0.08);
+  --shadow-sm: 0 2px 10px rgba(31, 30, 20, .09);
+  --shadow-md: 0 10px 28px rgba(31, 30, 20, .13);
+  --shadow-lg: 0 20px 56px rgba(31, 30, 20, .17);
+}
+
+:root[data-theme="ayu-dark"] {
+  color-scheme: dark;
+  --bg: #0a0e14;
+  --bg2: #060a10;
+  --bg3: #0d1219;
+  --surface: #0d1219;
+  --surface2: #131721;
+  --surface3: #1b202b;
+  --border: rgba(89, 194, 255, 0.12);
+  --border2: rgba(89, 194, 255, 0.22);
+  --sb-thumb: rgba(89, 194, 255, 0.26);
+  --sb-thumb-hover: rgba(89, 194, 255, 0.42);
+  --sb-thumb-active: rgba(89, 194, 255, 0.6);
+  --text: #b3b1ad;
+  --text2: #828c99;
+  --text3: #4d5566;
+  --accent: #ffb454;
+  --violet: #d2a6ff;
+  --indigo: #59c2ff;
+  --blue: #59c2ff;
+  --gold: #e6b450;
+  --green: #c2d94c;
+  --red: #ff3333;
+  --orange: #ff8f40;
+  --purple: #d2a6ff;
+  --on-accent: #0a0e14;
+  --overlay: rgba(10, 14, 20, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(255, 180, 84, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(255, 180, 84, 0.1);
+  --accent-soft-strong: rgba(255, 180, 84, 0.18);
+  --accent-border: rgba(255, 180, 84, 0.26);
+  --accent-border-strong: rgba(255, 180, 84, 0.4);
+  --accent-glow: 0 0 14px rgba(255, 180, 84, 0.32);
+  --tab-hover-bg: rgba(179, 177, 173, 0.04);
+  --tab-active-bg: rgba(255, 180, 84, 0.13);
+  --tab-active-border: rgba(255, 180, 84, 0.28);
+  --tab-active-line: rgba(255, 180, 84, 0.95);
+  --tab-overflow-shadow: rgba(10, 14, 20, 0.62);
+  --violet-soft: rgba(210, 166, 255, 0.13);
+  --violet-border: rgba(210, 166, 255, 0.28);
+  --indigo-soft: rgba(89, 194, 255, 0.12);
+  --indigo-border: rgba(89, 194, 255, 0.26);
+  --blue-soft: rgba(89, 194, 255, 0.1);
+  --blue-border: rgba(89, 194, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(210, 166, 255, 0.13);
+  --purple-border: rgba(210, 166, 255, 0.28);
+  --green-soft: rgba(194, 217, 76, 0.11);
+  --green-border: rgba(194, 217, 76, 0.27);
+  --gold-soft: rgba(230, 180, 80, 0.12);
+  --gold-border: rgba(230, 180, 80, 0.28);
+  --note-yellow: #e6b450;
+  --note-yellow-soft: rgba(230, 180, 80, 0.18);
+  --note-yellow-border: rgba(230, 180, 80, 0.4);
+  --orange-soft: rgba(255, 143, 64, 0.11);
+  --orange-border: rgba(255, 143, 64, 0.27);
+  --red-soft: rgba(255, 51, 51, 0.1);
+  --red-border: rgba(255, 51, 51, 0.27);
+  --canvas-glow-a: rgba(255, 180, 84, 0.045);
+  --canvas-glow-b: rgba(210, 166, 255, 0.035);
+  --state-active-fill: rgba(255, 180, 84, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(255, 180, 84, 0.42));
+  --state-reject-fill: rgba(255, 51, 51, 0.1);
+  --marquee-fill: rgba(255, 180, 84, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="ayu-mirage"] {
+  color-scheme: dark;
+  --bg: #1f2430;
+  --bg2: #191e2a;
+  --bg3: #232834;
+  --surface: #232834;
+  --surface2: #2a2f3b;
+  --surface3: #333947;
+  --border: rgba(92, 207, 230, 0.12);
+  --border2: rgba(92, 207, 230, 0.22);
+  --sb-thumb: rgba(92, 207, 230, 0.26);
+  --sb-thumb-hover: rgba(92, 207, 230, 0.42);
+  --sb-thumb-active: rgba(92, 207, 230, 0.6);
+  --text: #cbccc6;
+  --text2: #8a9199;
+  --text3: #5c6773;
+  --accent: #ffcc66;
+  --violet: #dfbfff;
+  --indigo: #5ccfe6;
+  --blue: #5ccfe6;
+  --gold: #ffd173;
+  --green: #bae67e;
+  --red: #f28779;
+  --orange: #ffa759;
+  --purple: #dfbfff;
+  --on-accent: #1f2430;
+  --overlay: rgba(31, 36, 48, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(255, 204, 102, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(255, 204, 102, 0.1);
+  --accent-soft-strong: rgba(255, 204, 102, 0.18);
+  --accent-border: rgba(255, 204, 102, 0.26);
+  --accent-border-strong: rgba(255, 204, 102, 0.4);
+  --accent-glow: 0 0 14px rgba(255, 204, 102, 0.32);
+  --tab-hover-bg: rgba(203, 204, 198, 0.04);
+  --tab-active-bg: rgba(255, 204, 102, 0.13);
+  --tab-active-border: rgba(255, 204, 102, 0.28);
+  --tab-active-line: rgba(255, 204, 102, 0.95);
+  --tab-overflow-shadow: rgba(31, 36, 48, 0.62);
+  --violet-soft: rgba(223, 191, 255, 0.13);
+  --violet-border: rgba(223, 191, 255, 0.28);
+  --indigo-soft: rgba(92, 207, 230, 0.12);
+  --indigo-border: rgba(92, 207, 230, 0.26);
+  --blue-soft: rgba(92, 207, 230, 0.1);
+  --blue-border: rgba(92, 207, 230, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(223, 191, 255, 0.13);
+  --purple-border: rgba(223, 191, 255, 0.28);
+  --green-soft: rgba(186, 230, 126, 0.11);
+  --green-border: rgba(186, 230, 126, 0.27);
+  --gold-soft: rgba(255, 209, 115, 0.12);
+  --gold-border: rgba(255, 209, 115, 0.28);
+  --note-yellow: #ffd173;
+  --note-yellow-soft: rgba(255, 209, 115, 0.18);
+  --note-yellow-border: rgba(255, 209, 115, 0.4);
+  --orange-soft: rgba(255, 167, 89, 0.11);
+  --orange-border: rgba(255, 167, 89, 0.27);
+  --red-soft: rgba(242, 135, 121, 0.1);
+  --red-border: rgba(242, 135, 121, 0.27);
+  --canvas-glow-a: rgba(255, 204, 102, 0.045);
+  --canvas-glow-b: rgba(223, 191, 255, 0.035);
+  --state-active-fill: rgba(255, 204, 102, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(255, 204, 102, 0.42));
+  --state-reject-fill: rgba(242, 135, 121, 0.1);
+  --marquee-fill: rgba(255, 204, 102, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="everforest"] {
+  color-scheme: dark;
+  --bg: #2d353b;
+  --bg2: #272e33;
+  --bg3: #343f44;
+  --surface: #343f44;
+  --surface2: #3d484d;
+  --surface3: #475258;
+  --border: rgba(167, 192, 128, 0.12);
+  --border2: rgba(167, 192, 128, 0.22);
+  --sb-thumb: rgba(167, 192, 128, 0.26);
+  --sb-thumb-hover: rgba(167, 192, 128, 0.42);
+  --sb-thumb-active: rgba(167, 192, 128, 0.6);
+  --text: #d3c6aa;
+  --text2: #9da9a0;
+  --text3: #7a8478;
+  --accent: #a7c080;
+  --violet: #d699b6;
+  --indigo: #7fbbb3;
+  --blue: #7fbbb3;
+  --gold: #dbbc7f;
+  --green: #a7c080;
+  --red: #e67e80;
+  --orange: #e69875;
+  --purple: #d699b6;
+  --on-accent: #2d353b;
+  --overlay: rgba(45, 53, 59, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(167, 192, 128, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(167, 192, 128, 0.1);
+  --accent-soft-strong: rgba(167, 192, 128, 0.18);
+  --accent-border: rgba(167, 192, 128, 0.26);
+  --accent-border-strong: rgba(167, 192, 128, 0.4);
+  --accent-glow: 0 0 14px rgba(167, 192, 128, 0.32);
+  --tab-hover-bg: rgba(211, 198, 170, 0.04);
+  --tab-active-bg: rgba(167, 192, 128, 0.13);
+  --tab-active-border: rgba(167, 192, 128, 0.28);
+  --tab-active-line: rgba(167, 192, 128, 0.95);
+  --tab-overflow-shadow: rgba(45, 53, 59, 0.62);
+  --violet-soft: rgba(214, 153, 182, 0.13);
+  --violet-border: rgba(214, 153, 182, 0.28);
+  --indigo-soft: rgba(127, 187, 179, 0.12);
+  --indigo-border: rgba(127, 187, 179, 0.26);
+  --blue-soft: rgba(127, 187, 179, 0.1);
+  --blue-border: rgba(127, 187, 179, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(248, 251, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(214, 153, 182, 0.13);
+  --purple-border: rgba(214, 153, 182, 0.28);
+  --green-soft: rgba(167, 192, 128, 0.11);
+  --green-border: rgba(167, 192, 128, 0.27);
+  --gold-soft: rgba(219, 188, 127, 0.12);
+  --gold-border: rgba(219, 188, 127, 0.28);
+  --note-yellow: #dbbc7f;
+  --note-yellow-soft: rgba(219, 188, 127, 0.18);
+  --note-yellow-border: rgba(219, 188, 127, 0.4);
+  --orange-soft: rgba(230, 152, 117, 0.11);
+  --orange-border: rgba(230, 152, 117, 0.27);
+  --red-soft: rgba(230, 126, 128, 0.1);
+  --red-border: rgba(230, 126, 128, 0.27);
+  --canvas-glow-a: rgba(167, 192, 128, 0.045);
+  --canvas-glow-b: rgba(214, 153, 182, 0.035);
+  --state-active-fill: rgba(167, 192, 128, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(167, 192, 128, 0.42));
+  --state-reject-fill: rgba(230, 126, 128, 0.1);
+  --marquee-fill: rgba(167, 192, 128, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+:root[data-theme="kanagawa"] {
+  color-scheme: dark;
+  --bg: #1f1f28;
+  --bg2: #16161d;
+  --bg3: #2a2a37;
+  --surface: #2a2a37;
+  --surface2: #30303f;
+  --surface3: #363646;
+  --border: rgba(126, 156, 216, 0.12);
+  --border2: rgba(126, 156, 216, 0.22);
+  --sb-thumb: rgba(126, 156, 216, 0.26);
+  --sb-thumb-hover: rgba(126, 156, 216, 0.42);
+  --sb-thumb-active: rgba(126, 156, 216, 0.6);
+  --text: #dcd7ba;
+  --text2: #c8c093;
+  --text3: #727169;
+  --accent: #7e9cd8;
+  --violet: #957fb8;
+  --indigo: #7e9cd8;
+  --blue: #7e9cd8;
+  --gold: #e6c384;
+  --green: #98bb6c;
+  --red: #e46876;
+  --orange: #ffa066;
+  --purple: #957fb8;
+  --on-accent: #16161d;
+  --overlay: rgba(31, 31, 40, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(126, 156, 216, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(126, 156, 216, 0.1);
+  --accent-soft-strong: rgba(126, 156, 216, 0.18);
+  --accent-border: rgba(126, 156, 216, 0.26);
+  --accent-border-strong: rgba(126, 156, 216, 0.4);
+  --accent-glow: 0 0 14px rgba(126, 156, 216, 0.32);
+  --tab-hover-bg: rgba(220, 215, 186, 0.04);
+  --tab-active-bg: rgba(126, 156, 216, 0.13);
+  --tab-active-border: rgba(126, 156, 216, 0.28);
+  --tab-active-line: rgba(126, 156, 216, 0.95);
+  --tab-overflow-shadow: rgba(31, 31, 40, 0.62);
+  --violet-soft: rgba(149, 127, 184, 0.13);
+  --violet-border: rgba(149, 127, 184, 0.28);
+  --indigo-soft: rgba(126, 156, 216, 0.12);
+  --indigo-border: rgba(126, 156, 216, 0.26);
+  --blue-soft: rgba(126, 156, 216, 0.1);
+  --blue-border: rgba(126, 156, 216, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(149, 127, 184, 0.13);
+  --purple-border: rgba(149, 127, 184, 0.28);
+  --green-soft: rgba(152, 187, 108, 0.11);
+  --green-border: rgba(152, 187, 108, 0.27);
+  --gold-soft: rgba(230, 195, 132, 0.12);
+  --gold-border: rgba(230, 195, 132, 0.28);
+  --note-yellow: #e6c384;
+  --note-yellow-soft: rgba(230, 195, 132, 0.18);
+  --note-yellow-border: rgba(230, 195, 132, 0.4);
+  --orange-soft: rgba(255, 160, 102, 0.11);
+  --orange-border: rgba(255, 160, 102, 0.27);
+  --red-soft: rgba(228, 104, 118, 0.1);
+  --red-border: rgba(228, 104, 118, 0.27);
+  --canvas-glow-a: rgba(126, 156, 216, 0.045);
+  --canvas-glow-b: rgba(149, 127, 184, 0.035);
+  --state-active-fill: rgba(126, 156, 216, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(126, 156, 216, 0.42));
+  --state-reject-fill: rgba(228, 104, 118, 0.1);
+  --marquee-fill: rgba(126, 156, 216, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="melange"] {
+  color-scheme: dark;
+  --bg: #292522;
+  --bg2: #1f1c1a;
+  --bg3: #34302c;
+  --surface: #34302c;
+  --surface2: #3a3531;
+  --surface3: #403a36;
+  --border: rgba(137, 179, 182, 0.12);
+  --border2: rgba(137, 179, 182, 0.22);
+  --sb-thumb: rgba(137, 179, 182, 0.26);
+  --sb-thumb-hover: rgba(137, 179, 182, 0.42);
+  --sb-thumb-active: rgba(137, 179, 182, 0.6);
+  --text: #ece1d7;
+  --text2: #c1a78e;
+  --text3: #867462;
+  --accent: #89b3b6;
+  --violet: #cf9bc2;
+  --indigo: #89b3b6;
+  --blue: #89b3b6;
+  --gold: #ebc06d;
+  --green: #85b695;
+  --red: #d47766;
+  --orange: #e49b5d;
+  --purple: #cf9bc2;
+  --on-accent: #171413;
+  --overlay: rgba(41, 37, 34, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(137, 179, 182, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(137, 179, 182, 0.1);
+  --accent-soft-strong: rgba(137, 179, 182, 0.18);
+  --accent-border: rgba(137, 179, 182, 0.26);
+  --accent-border-strong: rgba(137, 179, 182, 0.4);
+  --accent-glow: 0 0 14px rgba(137, 179, 182, 0.32);
+  --tab-hover-bg: rgba(236, 225, 215, 0.04);
+  --tab-active-bg: rgba(137, 179, 182, 0.13);
+  --tab-active-border: rgba(137, 179, 182, 0.28);
+  --tab-active-line: rgba(137, 179, 182, 0.95);
+  --tab-overflow-shadow: rgba(41, 37, 34, 0.62);
+  --violet-soft: rgba(207, 155, 194, 0.13);
+  --violet-border: rgba(207, 155, 194, 0.28);
+  --indigo-soft: rgba(137, 179, 182, 0.12);
+  --indigo-border: rgba(137, 179, 182, 0.26);
+  --blue-soft: rgba(137, 179, 182, 0.1);
+  --blue-border: rgba(137, 179, 182, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(207, 155, 194, 0.13);
+  --purple-border: rgba(207, 155, 194, 0.28);
+  --green-soft: rgba(133, 182, 149, 0.11);
+  --green-border: rgba(133, 182, 149, 0.27);
+  --gold-soft: rgba(235, 192, 109, 0.12);
+  --gold-border: rgba(235, 192, 109, 0.28);
+  --note-yellow: #ebc06d;
+  --note-yellow-soft: rgba(235, 192, 109, 0.18);
+  --note-yellow-border: rgba(235, 192, 109, 0.4);
+  --orange-soft: rgba(228, 155, 93, 0.11);
+  --orange-border: rgba(228, 155, 93, 0.27);
+  --red-soft: rgba(212, 119, 102, 0.1);
+  --red-border: rgba(212, 119, 102, 0.27);
+  --canvas-glow-a: rgba(137, 179, 182, 0.045);
+  --canvas-glow-b: rgba(207, 155, 194, 0.035);
+  --state-active-fill: rgba(137, 179, 182, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(137, 179, 182, 0.42));
+  --state-reject-fill: rgba(212, 119, 102, 0.1);
+  --marquee-fill: rgba(137, 179, 182, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="melange-light"] {
+  color-scheme: light;
+  --bg: #f1f1f1;
+  --bg2: #fafafa;
+  --bg3: #e9e1db;
+  --surface: #fafafa;
+  --surface2: #f5f3f1;
+  --surface3: #d9d3ce;
+  --border: rgba(125, 102, 88, 0.16);
+  --border2: rgba(125, 102, 88, 0.26);
+  --sb-thumb: rgba(125, 102, 88, 0.26);
+  --sb-thumb-hover: rgba(125, 102, 88, 0.4);
+  --sb-thumb-active: rgba(125, 102, 88, 0.56);
+  --text: #54433a;
+  --text2: #7d6658;
+  --text3: #a98a78;
+  --accent: #3d6568;
+  --violet: #904180;
+  --indigo: #3d6568;
+  --blue: #3d6568;
+  --gold: #a06d00;
+  --green: #3a684a;
+  --red: #bf0021;
+  --orange: #bc5c00;
+  --purple: #904180;
+  --on-accent: #fafafa;
+  --overlay: rgba(125, 102, 88, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(61, 101, 104, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(84, 67, 58, .1);
+  --panel-shadow-right: -2px 0 18px rgba(84, 67, 58, .1);
+  --accent-soft: rgba(61, 101, 104, 0.1);
+  --accent-soft-strong: rgba(61, 101, 104, 0.18);
+  --accent-border: rgba(61, 101, 104, 0.24);
+  --accent-border-strong: rgba(61, 101, 104, 0.36);
+  --accent-glow: 0 10px 24px rgba(61, 101, 104, 0.16);
+  --tab-hover-bg: rgba(125, 102, 88, 0.05);
+  --tab-active-bg: rgba(61, 101, 104, 0.095);
+  --tab-active-border: rgba(61, 101, 104, 0.28);
+  --tab-active-line: rgba(61, 101, 104, 0.9);
+  --tab-overflow-shadow: rgba(125, 102, 88, 0.36);
+  --violet-soft: rgba(144, 65, 128, 0.13);
+  --violet-border: rgba(144, 65, 128, 0.28);
+  --indigo-soft: rgba(61, 101, 104, 0.12);
+  --indigo-border: rgba(61, 101, 104, 0.26);
+  --blue-soft: rgba(61, 101, 104, 0.1);
+  --blue-border: rgba(61, 101, 104, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(125, 102, 88, 0.22);
+  --purple-soft: rgba(144, 65, 128, 0.13);
+  --purple-border: rgba(144, 65, 128, 0.28);
+  --green-soft: rgba(58, 104, 74, 0.11);
+  --green-border: rgba(58, 104, 74, 0.27);
+  --gold-soft: rgba(160, 109, 0, 0.12);
+  --gold-border: rgba(160, 109, 0, 0.28);
+  --note-yellow: #a06d00;
+  --note-yellow-soft: rgba(160, 109, 0, 0.2);
+  --note-yellow-border: rgba(160, 109, 0, 0.32);
+  --orange-soft: rgba(188, 92, 0, 0.11);
+  --orange-border: rgba(188, 92, 0, 0.27);
+  --red-soft: rgba(191, 0, 33, 0.1);
+  --red-border: rgba(191, 0, 33, 0.27);
+  --canvas-glow-a: rgba(61, 101, 104, 0.05);
+  --canvas-glow-b: rgba(144, 65, 128, 0.04);
+  --state-active-fill: rgba(61, 101, 104, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(61, 101, 104, 0.14));
+  --state-reject-fill: rgba(191, 0, 33, 0.09);
+  --marquee-fill: rgba(61, 101, 104, 0.08);
+  --shadow-sm: 0 2px 10px rgba(84, 67, 58, .09);
+  --shadow-md: 0 10px 28px rgba(84, 67, 58, .13);
+  --shadow-lg: 0 20px 56px rgba(84, 67, 58, .17);
+}
+
+:root[data-theme="nightfox"] {
+  color-scheme: dark;
+  --bg: #192330;
+  --bg2: #131a24;
+  --bg3: #212e3f;
+  --surface: #212e3f;
+  --surface2: #29394f;
+  --surface3: #39506d;
+  --border: rgba(113, 156, 214, 0.12);
+  --border2: rgba(113, 156, 214, 0.22);
+  --sb-thumb: rgba(113, 156, 214, 0.26);
+  --sb-thumb-hover: rgba(113, 156, 214, 0.42);
+  --sb-thumb-active: rgba(113, 156, 214, 0.6);
+  --text: #cdcecf;
+  --text2: #aeafb0;
+  --text3: #71839b;
+  --accent: #719cd6;
+  --violet: #9d79d6;
+  --indigo: #719cd6;
+  --blue: #719cd6;
+  --gold: #dbc074;
+  --green: #81b29a;
+  --red: #c94f6d;
+  --orange: #f4a261;
+  --purple: #9d79d6;
+  --on-accent: #131a24;
+  --overlay: rgba(25, 35, 48, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(113, 156, 214, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(113, 156, 214, 0.1);
+  --accent-soft-strong: rgba(113, 156, 214, 0.18);
+  --accent-border: rgba(113, 156, 214, 0.26);
+  --accent-border-strong: rgba(113, 156, 214, 0.4);
+  --accent-glow: 0 0 14px rgba(113, 156, 214, 0.32);
+  --tab-hover-bg: rgba(205, 206, 207, 0.04);
+  --tab-active-bg: rgba(113, 156, 214, 0.13);
+  --tab-active-border: rgba(113, 156, 214, 0.28);
+  --tab-active-line: rgba(113, 156, 214, 0.95);
+  --tab-overflow-shadow: rgba(25, 35, 48, 0.62);
+  --violet-soft: rgba(157, 121, 214, 0.13);
+  --violet-border: rgba(157, 121, 214, 0.28);
+  --indigo-soft: rgba(113, 156, 214, 0.12);
+  --indigo-border: rgba(113, 156, 214, 0.26);
+  --blue-soft: rgba(113, 156, 214, 0.1);
+  --blue-border: rgba(113, 156, 214, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(157, 121, 214, 0.13);
+  --purple-border: rgba(157, 121, 214, 0.28);
+  --green-soft: rgba(129, 178, 154, 0.11);
+  --green-border: rgba(129, 178, 154, 0.27);
+  --gold-soft: rgba(219, 192, 116, 0.12);
+  --gold-border: rgba(219, 192, 116, 0.28);
+  --note-yellow: #dbc074;
+  --note-yellow-soft: rgba(219, 192, 116, 0.18);
+  --note-yellow-border: rgba(219, 192, 116, 0.4);
+  --orange-soft: rgba(244, 162, 97, 0.11);
+  --orange-border: rgba(244, 162, 97, 0.27);
+  --red-soft: rgba(201, 79, 109, 0.1);
+  --red-border: rgba(201, 79, 109, 0.27);
+  --canvas-glow-a: rgba(113, 156, 214, 0.045);
+  --canvas-glow-b: rgba(157, 121, 214, 0.035);
+  --state-active-fill: rgba(113, 156, 214, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(113, 156, 214, 0.42));
+  --state-reject-fill: rgba(201, 79, 109, 0.1);
+  --marquee-fill: rgba(113, 156, 214, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="dayfox"] {
+  color-scheme: light;
+  --bg: #f6f2ee;
+  --bg2: #fffdfb;
+  --bg3: #e4dcd4;
+  --surface: #fffdfb;
+  --surface2: #f7f3ef;
+  --surface3: #d3c7bb;
+  --border: rgba(100, 63, 97, 0.16);
+  --border2: rgba(100, 63, 97, 0.26);
+  --sb-thumb: rgba(100, 63, 97, 0.26);
+  --sb-thumb-hover: rgba(100, 63, 97, 0.4);
+  --sb-thumb-active: rgba(100, 63, 97, 0.56);
+  --text: #3d2b5a;
+  --text2: #643f61;
+  --text3: #837a72;
+  --accent: #2848a9;
+  --violet: #6e33ce;
+  --indigo: #2848a9;
+  --blue: #2848a9;
+  --gold: #ac5402;
+  --green: #396847;
+  --red: #a5222f;
+  --orange: #955f61;
+  --purple: #6e33ce;
+  --on-accent: #fffdfb;
+  --overlay: rgba(100, 63, 97, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(40, 72, 169, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(61, 43, 90, .1);
+  --panel-shadow-right: -2px 0 18px rgba(61, 43, 90, .1);
+  --accent-soft: rgba(40, 72, 169, 0.1);
+  --accent-soft-strong: rgba(40, 72, 169, 0.18);
+  --accent-border: rgba(40, 72, 169, 0.24);
+  --accent-border-strong: rgba(40, 72, 169, 0.36);
+  --accent-glow: 0 10px 24px rgba(40, 72, 169, 0.16);
+  --tab-hover-bg: rgba(100, 63, 97, 0.05);
+  --tab-active-bg: rgba(40, 72, 169, 0.095);
+  --tab-active-border: rgba(40, 72, 169, 0.28);
+  --tab-active-line: rgba(40, 72, 169, 0.9);
+  --tab-overflow-shadow: rgba(100, 63, 97, 0.36);
+  --violet-soft: rgba(110, 51, 206, 0.13);
+  --violet-border: rgba(110, 51, 206, 0.28);
+  --indigo-soft: rgba(40, 72, 169, 0.12);
+  --indigo-border: rgba(40, 72, 169, 0.26);
+  --blue-soft: rgba(40, 72, 169, 0.1);
+  --blue-border: rgba(40, 72, 169, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(100, 63, 97, 0.22);
+  --purple-soft: rgba(110, 51, 206, 0.13);
+  --purple-border: rgba(110, 51, 206, 0.28);
+  --green-soft: rgba(57, 104, 71, 0.11);
+  --green-border: rgba(57, 104, 71, 0.27);
+  --gold-soft: rgba(172, 84, 2, 0.12);
+  --gold-border: rgba(172, 84, 2, 0.28);
+  --note-yellow: #ac5402;
+  --note-yellow-soft: rgba(172, 84, 2, 0.2);
+  --note-yellow-border: rgba(172, 84, 2, 0.32);
+  --orange-soft: rgba(149, 95, 97, 0.11);
+  --orange-border: rgba(149, 95, 97, 0.27);
+  --red-soft: rgba(165, 34, 47, 0.1);
+  --red-border: rgba(165, 34, 47, 0.27);
+  --canvas-glow-a: rgba(40, 72, 169, 0.05);
+  --canvas-glow-b: rgba(110, 51, 206, 0.04);
+  --state-active-fill: rgba(40, 72, 169, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(40, 72, 169, 0.14));
+  --state-reject-fill: rgba(165, 34, 47, 0.09);
+  --marquee-fill: rgba(40, 72, 169, 0.08);
+  --shadow-sm: 0 2px 10px rgba(61, 43, 90, .09);
+  --shadow-md: 0 10px 28px rgba(61, 43, 90, .13);
+  --shadow-lg: 0 20px 56px rgba(61, 43, 90, .17);
+}
+:root[data-theme="cyberpunk"] {
+  color-scheme: dark;
+  --bg: #1a0a10;
+  --bg2: #110609;
+  --bg3: #26121a;
+  --surface: #26121a;
+  --surface2: #331b26;
+  --surface3: #432433;
+  --border: rgba(0, 191, 255, 0.12);
+  --border2: rgba(0, 191, 255, 0.22);
+  --sb-thumb: rgba(0, 191, 255, 0.26);
+  --sb-thumb-hover: rgba(0, 191, 255, 0.42);
+  --sb-thumb-active: rgba(0, 191, 255, 0.6);
+  --text: #f6ecf0;
+  --text2: #c9b0bb;
+  --text3: #8d7280;
+  --accent: #00bfff;
+  --violet: #b14aff;
+  --indigo: #b14aff;
+  --blue: #00bfff;
+  --gold: #ffea00;
+  --green: #39ff6a;
+  --red: #ff007a;
+  --orange: #ff5c00;
+  --purple: #b14aff;
+  --on-accent: #0d0407;
+  --overlay: rgba(26, 10, 16, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(0, 191, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(0, 191, 255, 0.1);
+  --accent-soft-strong: rgba(0, 191, 255, 0.18);
+  --accent-border: rgba(0, 191, 255, 0.26);
+  --accent-border-strong: rgba(0, 191, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(0, 191, 255, 0.32);
+  --tab-hover-bg: rgba(246, 236, 240, 0.04);
+  --tab-active-bg: rgba(0, 191, 255, 0.13);
+  --tab-active-border: rgba(0, 191, 255, 0.28);
+  --tab-active-line: rgba(0, 191, 255, 0.95);
+  --tab-overflow-shadow: rgba(26, 10, 16, 0.62);
+  --violet-soft: rgba(177, 74, 255, 0.13);
+  --violet-border: rgba(177, 74, 255, 0.28);
+  --indigo-soft: rgba(177, 74, 255, 0.12);
+  --indigo-border: rgba(177, 74, 255, 0.26);
+  --blue-soft: rgba(0, 191, 255, 0.1);
+  --blue-border: rgba(0, 191, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(177, 74, 255, 0.13);
+  --purple-border: rgba(177, 74, 255, 0.28);
+  --green-soft: rgba(57, 255, 106, 0.11);
+  --green-border: rgba(57, 255, 106, 0.27);
+  --gold-soft: rgba(255, 234, 0, 0.12);
+  --gold-border: rgba(255, 234, 0, 0.28);
+  --note-yellow: #ffea00;
+  --note-yellow-soft: rgba(255, 234, 0, 0.18);
+  --note-yellow-border: rgba(255, 234, 0, 0.4);
+  --orange-soft: rgba(255, 92, 0, 0.11);
+  --orange-border: rgba(255, 92, 0, 0.27);
+  --red-soft: rgba(255, 0, 122, 0.1);
+  --red-border: rgba(255, 0, 122, 0.27);
+  --canvas-glow-a: rgba(0, 191, 255, 0.045);
+  --canvas-glow-b: rgba(177, 74, 255, 0.035);
+  --state-active-fill: rgba(0, 191, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 191, 255, 0.42));
+  --state-reject-fill: rgba(255, 0, 122, 0.1);
+  --marquee-fill: rgba(0, 191, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="marathon"] {
+  color-scheme: dark;
+  --bg: #08080a;
+  --bg2: #050506;
+  --bg3: #16161a;
+  --surface: #16161a;
+  --surface2: #202026;
+  --surface3: #2c2c34;
+  --border: rgba(111, 111, 255, 0.12);
+  --border2: rgba(111, 111, 255, 0.22);
+  --sb-thumb: rgba(111, 111, 255, 0.26);
+  --sb-thumb-hover: rgba(111, 111, 255, 0.42);
+  --sb-thumb-active: rgba(111, 111, 255, 0.6);
+  --text: #f4f4f6;
+  --text2: #b6b6c0;
+  --text3: #78788a;
+  --accent: #6f6fff;
+  --violet: #9d4dff;
+  --indigo: #9d4dff;
+  --blue: #6f6fff;
+  --gold: #ccff00;
+  --green: #00e5ff;
+  --red: #ff2d9b;
+  --orange: #ff5c1f;
+  --purple: #9d4dff;
+  --on-accent: #08080a;
+  --overlay: rgba(8, 8, 10, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(111, 111, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(111, 111, 255, 0.1);
+  --accent-soft-strong: rgba(111, 111, 255, 0.18);
+  --accent-border: rgba(111, 111, 255, 0.26);
+  --accent-border-strong: rgba(111, 111, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(111, 111, 255, 0.32);
+  --tab-hover-bg: rgba(244, 244, 246, 0.04);
+  --tab-active-bg: rgba(111, 111, 255, 0.13);
+  --tab-active-border: rgba(111, 111, 255, 0.28);
+  --tab-active-line: rgba(111, 111, 255, 0.95);
+  --tab-overflow-shadow: rgba(8, 8, 10, 0.62);
+  --violet-soft: rgba(157, 77, 255, 0.13);
+  --violet-border: rgba(157, 77, 255, 0.28);
+  --indigo-soft: rgba(157, 77, 255, 0.12);
+  --indigo-border: rgba(157, 77, 255, 0.26);
+  --blue-soft: rgba(111, 111, 255, 0.1);
+  --blue-border: rgba(111, 111, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(157, 77, 255, 0.13);
+  --purple-border: rgba(157, 77, 255, 0.28);
+  --green-soft: rgba(0, 229, 255, 0.11);
+  --green-border: rgba(0, 229, 255, 0.27);
+  --gold-soft: rgba(204, 255, 0, 0.12);
+  --gold-border: rgba(204, 255, 0, 0.28);
+  --note-yellow: #ccff00;
+  --note-yellow-soft: rgba(204, 255, 0, 0.18);
+  --note-yellow-border: rgba(204, 255, 0, 0.4);
+  --orange-soft: rgba(255, 92, 31, 0.11);
+  --orange-border: rgba(255, 92, 31, 0.27);
+  --red-soft: rgba(255, 45, 155, 0.1);
+  --red-border: rgba(255, 45, 155, 0.27);
+  --canvas-glow-a: rgba(111, 111, 255, 0.045);
+  --canvas-glow-b: rgba(157, 77, 255, 0.035);
+  --state-active-fill: rgba(111, 111, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(111, 111, 255, 0.42));
+  --state-reject-fill: rgba(255, 45, 155, 0.1);
+  --marquee-fill: rgba(111, 111, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="japan-day"] {
+  color-scheme: light;
+  --bg: #fdf4f4;
+  --bg2: #fffafa;
+  --bg3: #f5e4e4;
+  --surface: #fffafa;
+  --surface2: #f9eeee;
+  --surface3: #ecd9da;
+  --border: rgba(107, 90, 96, 0.16);
+  --border2: rgba(107, 90, 96, 0.26);
+  --sb-thumb: rgba(107, 90, 96, 0.26);
+  --sb-thumb-hover: rgba(107, 90, 96, 0.4);
+  --sb-thumb-active: rgba(107, 90, 96, 0.56);
+  --text: #241d20;
+  --text2: #6b5a60;
+  --text3: #a08f96;
+  --accent: #235d8b;
+  --violet: #7d5aa0;
+  --indigo: #7d5aa0;
+  --blue: #235d8b;
+  --gold: #b07d0a;
+  --green: #4f7a42;
+  --red: #c74375;
+  --orange: #d34b1f;
+  --purple: #7d5aa0;
+  --on-accent: #fffafa;
+  --overlay: rgba(107, 90, 96, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(35, 93, 139, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(36, 29, 32, .1);
+  --panel-shadow-right: -2px 0 18px rgba(36, 29, 32, .1);
+  --accent-soft: rgba(35, 93, 139, 0.1);
+  --accent-soft-strong: rgba(35, 93, 139, 0.18);
+  --accent-border: rgba(35, 93, 139, 0.24);
+  --accent-border-strong: rgba(35, 93, 139, 0.36);
+  --accent-glow: 0 10px 24px rgba(35, 93, 139, 0.16);
+  --tab-hover-bg: rgba(107, 90, 96, 0.05);
+  --tab-active-bg: rgba(35, 93, 139, 0.095);
+  --tab-active-border: rgba(35, 93, 139, 0.28);
+  --tab-active-line: rgba(35, 93, 139, 0.9);
+  --tab-overflow-shadow: rgba(107, 90, 96, 0.36);
+  --violet-soft: rgba(125, 90, 160, 0.13);
+  --violet-border: rgba(125, 90, 160, 0.28);
+  --indigo-soft: rgba(125, 90, 160, 0.12);
+  --indigo-border: rgba(125, 90, 160, 0.26);
+  --blue-soft: rgba(35, 93, 139, 0.1);
+  --blue-border: rgba(35, 93, 139, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(107, 90, 96, 0.22);
+  --purple-soft: rgba(125, 90, 160, 0.13);
+  --purple-border: rgba(125, 90, 160, 0.28);
+  --green-soft: rgba(79, 122, 66, 0.11);
+  --green-border: rgba(79, 122, 66, 0.27);
+  --gold-soft: rgba(176, 125, 10, 0.12);
+  --gold-border: rgba(176, 125, 10, 0.28);
+  --note-yellow: #b07d0a;
+  --note-yellow-soft: rgba(176, 125, 10, 0.2);
+  --note-yellow-border: rgba(176, 125, 10, 0.32);
+  --orange-soft: rgba(211, 75, 31, 0.11);
+  --orange-border: rgba(211, 75, 31, 0.27);
+  --red-soft: rgba(199, 67, 117, 0.1);
+  --red-border: rgba(199, 67, 117, 0.27);
+  --canvas-glow-a: rgba(35, 93, 139, 0.05);
+  --canvas-glow-b: rgba(125, 90, 160, 0.04);
+  --state-active-fill: rgba(35, 93, 139, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(35, 93, 139, 0.14));
+  --state-reject-fill: rgba(199, 67, 117, 0.09);
+  --marquee-fill: rgba(35, 93, 139, 0.08);
+  --shadow-sm: 0 2px 10px rgba(36, 29, 32, .09);
+  --shadow-md: 0 10px 28px rgba(36, 29, 32, .13);
+  --shadow-lg: 0 20px 56px rgba(36, 29, 32, .17);
+}
+
+:root[data-theme="japan-night"] {
+  color-scheme: dark;
+  --bg: #0d1020;
+  --bg2: #080a16;
+  --bg3: #171b30;
+  --surface: #171b30;
+  --surface2: #212640;
+  --surface3: #2e3454;
+  --border: rgba(180, 77, 255, 0.12);
+  --border2: rgba(180, 77, 255, 0.22);
+  --sb-thumb: rgba(180, 77, 255, 0.26);
+  --sb-thumb-hover: rgba(180, 77, 255, 0.42);
+  --sb-thumb-active: rgba(180, 77, 255, 0.6);
+  --text: #eef0ff;
+  --text2: #b6bcdd;
+  --text3: #7e85ab;
+  --accent: #b44dff;
+  --violet: #c77dff;
+  --indigo: #c77dff;
+  --blue: #4dd2ff;
+  --gold: #ffc24d;
+  --green: #3fffa8;
+  --red: #ff3d7a;
+  --orange: #ff7a3d;
+  --purple: #c77dff;
+  --on-accent: #080a16;
+  --overlay: rgba(13, 16, 32, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(180, 77, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(180, 77, 255, 0.1);
+  --accent-soft-strong: rgba(180, 77, 255, 0.18);
+  --accent-border: rgba(180, 77, 255, 0.26);
+  --accent-border-strong: rgba(180, 77, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(180, 77, 255, 0.32);
+  --tab-hover-bg: rgba(238, 240, 255, 0.04);
+  --tab-active-bg: rgba(180, 77, 255, 0.13);
+  --tab-active-border: rgba(180, 77, 255, 0.28);
+  --tab-active-line: rgba(180, 77, 255, 0.95);
+  --tab-overflow-shadow: rgba(13, 16, 32, 0.62);
+  --violet-soft: rgba(199, 125, 255, 0.13);
+  --violet-border: rgba(199, 125, 255, 0.28);
+  --indigo-soft: rgba(199, 125, 255, 0.12);
+  --indigo-border: rgba(199, 125, 255, 0.26);
+  --blue-soft: rgba(77, 210, 255, 0.1);
+  --blue-border: rgba(77, 210, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(199, 125, 255, 0.13);
+  --purple-border: rgba(199, 125, 255, 0.28);
+  --green-soft: rgba(63, 255, 168, 0.11);
+  --green-border: rgba(63, 255, 168, 0.27);
+  --gold-soft: rgba(255, 194, 77, 0.12);
+  --gold-border: rgba(255, 194, 77, 0.28);
+  --note-yellow: #ffc24d;
+  --note-yellow-soft: rgba(255, 194, 77, 0.18);
+  --note-yellow-border: rgba(255, 194, 77, 0.4);
+  --orange-soft: rgba(255, 122, 61, 0.11);
+  --orange-border: rgba(255, 122, 61, 0.27);
+  --red-soft: rgba(255, 61, 122, 0.1);
+  --red-border: rgba(255, 61, 122, 0.27);
+  --canvas-glow-a: rgba(180, 77, 255, 0.045);
+  --canvas-glow-b: rgba(199, 125, 255, 0.035);
+  --state-active-fill: rgba(180, 77, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(180, 77, 255, 0.42));
+  --state-reject-fill: rgba(255, 61, 122, 0.1);
+  --marquee-fill: rgba(180, 77, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="yumekawa"] {
+  color-scheme: light;
+  --bg: #fcf4fb;
+  --bg2: #fffbfe;
+  --bg3: #f3e4f2;
+  --surface: #fffbfe;
+  --surface2: #faeff9;
+  --surface3: #eeddee;
+  --border: rgba(122, 92, 128, 0.16);
+  --border2: rgba(122, 92, 128, 0.26);
+  --sb-thumb: rgba(122, 92, 128, 0.26);
+  --sb-thumb-hover: rgba(122, 92, 128, 0.4);
+  --sb-thumb-active: rgba(122, 92, 128, 0.56);
+  --text: #3d2a44;
+  --text2: #7a5c80;
+  --text3: #a289a8;
+  --accent: #9d3fc4;
+  --violet: #c77ae0;
+  --indigo: #c77ae0;
+  --blue: #3d9fd6;
+  --gold: #a8780c;
+  --green: #1f8a6d;
+  --red: #e0335f;
+  --orange: #d96a2a;
+  --purple: #c77ae0;
+  --on-accent: #fffbfe;
+  --overlay: rgba(122, 92, 128, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(157, 63, 196, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(61, 42, 68, .1);
+  --panel-shadow-right: -2px 0 18px rgba(61, 42, 68, .1);
+  --accent-soft: rgba(157, 63, 196, 0.1);
+  --accent-soft-strong: rgba(157, 63, 196, 0.18);
+  --accent-border: rgba(157, 63, 196, 0.24);
+  --accent-border-strong: rgba(157, 63, 196, 0.36);
+  --accent-glow: 0 10px 24px rgba(157, 63, 196, 0.16);
+  --tab-hover-bg: rgba(122, 92, 128, 0.05);
+  --tab-active-bg: rgba(157, 63, 196, 0.095);
+  --tab-active-border: rgba(157, 63, 196, 0.28);
+  --tab-active-line: rgba(157, 63, 196, 0.9);
+  --tab-overflow-shadow: rgba(122, 92, 128, 0.36);
+  --violet-soft: rgba(199, 122, 224, 0.13);
+  --violet-border: rgba(199, 122, 224, 0.28);
+  --indigo-soft: rgba(199, 122, 224, 0.12);
+  --indigo-border: rgba(199, 122, 224, 0.26);
+  --blue-soft: rgba(61, 159, 214, 0.1);
+  --blue-border: rgba(61, 159, 214, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(122, 92, 128, 0.22);
+  --purple-soft: rgba(199, 122, 224, 0.13);
+  --purple-border: rgba(199, 122, 224, 0.28);
+  --green-soft: rgba(31, 138, 109, 0.11);
+  --green-border: rgba(31, 138, 109, 0.27);
+  --gold-soft: rgba(168, 120, 12, 0.12);
+  --gold-border: rgba(168, 120, 12, 0.28);
+  --note-yellow: #a8780c;
+  --note-yellow-soft: rgba(168, 120, 12, 0.2);
+  --note-yellow-border: rgba(168, 120, 12, 0.32);
+  --orange-soft: rgba(217, 106, 42, 0.11);
+  --orange-border: rgba(217, 106, 42, 0.27);
+  --red-soft: rgba(224, 51, 95, 0.1);
+  --red-border: rgba(224, 51, 95, 0.27);
+  --canvas-glow-a: rgba(157, 63, 196, 0.05);
+  --canvas-glow-b: rgba(199, 122, 224, 0.04);
+  --state-active-fill: rgba(157, 63, 196, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(157, 63, 196, 0.14));
+  --state-reject-fill: rgba(224, 51, 95, 0.09);
+  --marquee-fill: rgba(157, 63, 196, 0.08);
+  --shadow-sm: 0 2px 10px rgba(61, 42, 68, .09);
+  --shadow-md: 0 10px 28px rgba(61, 42, 68, .13);
+  --shadow-lg: 0 20px 56px rgba(61, 42, 68, .17);
+}
+
+:root[data-theme="india"] {
+  color-scheme: dark;
+  --bg: #12132a;
+  --bg2: #0c0d1e;
+  --bg3: #1e2042;
+  --surface: #1e2042;
+  --surface2: #282b52;
+  --surface3: #363a68;
+  --border: rgba(0, 179, 164, 0.12);
+  --border2: rgba(0, 179, 164, 0.22);
+  --sb-thumb: rgba(0, 179, 164, 0.26);
+  --sb-thumb-hover: rgba(0, 179, 164, 0.42);
+  --sb-thumb-active: rgba(0, 179, 164, 0.6);
+  --text: #f5ecd9;
+  --text2: #c9bfa8;
+  --text3: #8e86a8;
+  --accent: #00b3a4;
+  --violet: #b565d8;
+  --indigo: #b565d8;
+  --blue: #00b3a4;
+  --gold: #f0b429;
+  --green: #7cb342;
+  --red: #e0374a;
+  --orange: #f2711c;
+  --purple: #b565d8;
+  --on-accent: #0c0d1e;
+  --overlay: rgba(18, 19, 42, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(0, 179, 164, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(0, 179, 164, 0.1);
+  --accent-soft-strong: rgba(0, 179, 164, 0.18);
+  --accent-border: rgba(0, 179, 164, 0.26);
+  --accent-border-strong: rgba(0, 179, 164, 0.4);
+  --accent-glow: 0 0 14px rgba(0, 179, 164, 0.32);
+  --tab-hover-bg: rgba(245, 236, 217, 0.04);
+  --tab-active-bg: rgba(0, 179, 164, 0.13);
+  --tab-active-border: rgba(0, 179, 164, 0.28);
+  --tab-active-line: rgba(0, 179, 164, 0.95);
+  --tab-overflow-shadow: rgba(18, 19, 42, 0.62);
+  --violet-soft: rgba(181, 101, 216, 0.13);
+  --violet-border: rgba(181, 101, 216, 0.28);
+  --indigo-soft: rgba(181, 101, 216, 0.12);
+  --indigo-border: rgba(181, 101, 216, 0.26);
+  --blue-soft: rgba(0, 179, 164, 0.1);
+  --blue-border: rgba(0, 179, 164, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(181, 101, 216, 0.13);
+  --purple-border: rgba(181, 101, 216, 0.28);
+  --green-soft: rgba(124, 179, 66, 0.11);
+  --green-border: rgba(124, 179, 66, 0.27);
+  --gold-soft: rgba(240, 180, 41, 0.12);
+  --gold-border: rgba(240, 180, 41, 0.28);
+  --note-yellow: #f0b429;
+  --note-yellow-soft: rgba(240, 180, 41, 0.18);
+  --note-yellow-border: rgba(240, 180, 41, 0.4);
+  --orange-soft: rgba(242, 113, 28, 0.11);
+  --orange-border: rgba(242, 113, 28, 0.27);
+  --red-soft: rgba(224, 55, 74, 0.1);
+  --red-border: rgba(224, 55, 74, 0.27);
+  --canvas-glow-a: rgba(0, 179, 164, 0.045);
+  --canvas-glow-b: rgba(181, 101, 216, 0.035);
+  --state-active-fill: rgba(0, 179, 164, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(0, 179, 164, 0.42));
+  --state-reject-fill: rgba(224, 55, 74, 0.1);
+  --marquee-fill: rgba(0, 179, 164, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="forest"] {
+  color-scheme: dark;
+  --bg: #101a14;
+  --bg2: #0a120d;
+  --bg3: #1a2a20;
+  --surface: #1a2a20;
+  --surface2: #24382b;
+  --surface3: #31493a;
+  --border: rgba(108, 194, 161, 0.12);
+  --border2: rgba(108, 194, 161, 0.22);
+  --sb-thumb: rgba(108, 194, 161, 0.26);
+  --sb-thumb-hover: rgba(108, 194, 161, 0.42);
+  --sb-thumb-active: rgba(108, 194, 161, 0.6);
+  --text: #dfe8dc;
+  --text2: #a8bda6;
+  --text3: #6f8a72;
+  --accent: #6cc2a1;
+  --violet: #a98bc9;
+  --indigo: #a98bc9;
+  --blue: #6cc2a1;
+  --gold: #ddb14a;
+  --green: #8fbc4a;
+  --red: #d4605c;
+  --orange: #cf7043;
+  --purple: #a98bc9;
+  --on-accent: #08100b;
+  --overlay: rgba(16, 26, 20, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(108, 194, 161, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(108, 194, 161, 0.1);
+  --accent-soft-strong: rgba(108, 194, 161, 0.18);
+  --accent-border: rgba(108, 194, 161, 0.26);
+  --accent-border-strong: rgba(108, 194, 161, 0.4);
+  --accent-glow: 0 0 14px rgba(108, 194, 161, 0.32);
+  --tab-hover-bg: rgba(223, 232, 220, 0.04);
+  --tab-active-bg: rgba(108, 194, 161, 0.13);
+  --tab-active-border: rgba(108, 194, 161, 0.28);
+  --tab-active-line: rgba(108, 194, 161, 0.95);
+  --tab-overflow-shadow: rgba(16, 26, 20, 0.62);
+  --violet-soft: rgba(169, 139, 201, 0.13);
+  --violet-border: rgba(169, 139, 201, 0.28);
+  --indigo-soft: rgba(169, 139, 201, 0.12);
+  --indigo-border: rgba(169, 139, 201, 0.26);
+  --blue-soft: rgba(108, 194, 161, 0.1);
+  --blue-border: rgba(108, 194, 161, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(169, 139, 201, 0.13);
+  --purple-border: rgba(169, 139, 201, 0.28);
+  --green-soft: rgba(143, 188, 74, 0.11);
+  --green-border: rgba(143, 188, 74, 0.27);
+  --gold-soft: rgba(221, 177, 74, 0.12);
+  --gold-border: rgba(221, 177, 74, 0.28);
+  --note-yellow: #ddb14a;
+  --note-yellow-soft: rgba(221, 177, 74, 0.18);
+  --note-yellow-border: rgba(221, 177, 74, 0.4);
+  --orange-soft: rgba(207, 112, 67, 0.11);
+  --orange-border: rgba(207, 112, 67, 0.27);
+  --red-soft: rgba(212, 96, 92, 0.1);
+  --red-border: rgba(212, 96, 92, 0.27);
+  --canvas-glow-a: rgba(108, 194, 161, 0.045);
+  --canvas-glow-b: rgba(169, 139, 201, 0.035);
+  --state-active-fill: rgba(108, 194, 161, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(108, 194, 161, 0.42));
+  --state-reject-fill: rgba(212, 96, 92, 0.1);
+  --marquee-fill: rgba(108, 194, 161, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="rivers"] {
+  color-scheme: light;
+  --bg: #edf1f1;
+  --bg2: #f9fcfc;
+  --bg3: #dce5e6;
+  --surface: #f9fcfc;
+  --surface2: #eaf0f0;
+  --surface3: #d2dcdd;
+  --border: rgba(77, 102, 111, 0.16);
+  --border2: rgba(77, 102, 111, 0.26);
+  --sb-thumb: rgba(77, 102, 111, 0.26);
+  --sb-thumb-hover: rgba(77, 102, 111, 0.4);
+  --sb-thumb-active: rgba(77, 102, 111, 0.56);
+  --text: #1e2f36;
+  --text2: #4d666f;
+  --text3: #7f959c;
+  --accent: #0f7a8c;
+  --violet: #6a5a9c;
+  --indigo: #6a5a9c;
+  --blue: #0f7a8c;
+  --gold: #96701a;
+  --green: #3d7a4f;
+  --red: #a83a3a;
+  --orange: #b56a2a;
+  --purple: #6a5a9c;
+  --on-accent: #f9fcfc;
+  --overlay: rgba(77, 102, 111, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(15, 122, 140, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(30, 47, 54, .1);
+  --panel-shadow-right: -2px 0 18px rgba(30, 47, 54, .1);
+  --accent-soft: rgba(15, 122, 140, 0.1);
+  --accent-soft-strong: rgba(15, 122, 140, 0.18);
+  --accent-border: rgba(15, 122, 140, 0.24);
+  --accent-border-strong: rgba(15, 122, 140, 0.36);
+  --accent-glow: 0 10px 24px rgba(15, 122, 140, 0.16);
+  --tab-hover-bg: rgba(77, 102, 111, 0.05);
+  --tab-active-bg: rgba(15, 122, 140, 0.095);
+  --tab-active-border: rgba(15, 122, 140, 0.28);
+  --tab-active-line: rgba(15, 122, 140, 0.9);
+  --tab-overflow-shadow: rgba(77, 102, 111, 0.36);
+  --violet-soft: rgba(106, 90, 156, 0.13);
+  --violet-border: rgba(106, 90, 156, 0.28);
+  --indigo-soft: rgba(106, 90, 156, 0.12);
+  --indigo-border: rgba(106, 90, 156, 0.26);
+  --blue-soft: rgba(15, 122, 140, 0.1);
+  --blue-border: rgba(15, 122, 140, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(77, 102, 111, 0.22);
+  --purple-soft: rgba(106, 90, 156, 0.13);
+  --purple-border: rgba(106, 90, 156, 0.28);
+  --green-soft: rgba(61, 122, 79, 0.11);
+  --green-border: rgba(61, 122, 79, 0.27);
+  --gold-soft: rgba(150, 112, 26, 0.12);
+  --gold-border: rgba(150, 112, 26, 0.28);
+  --note-yellow: #96701a;
+  --note-yellow-soft: rgba(150, 112, 26, 0.2);
+  --note-yellow-border: rgba(150, 112, 26, 0.32);
+  --orange-soft: rgba(181, 106, 42, 0.11);
+  --orange-border: rgba(181, 106, 42, 0.27);
+  --red-soft: rgba(168, 58, 58, 0.1);
+  --red-border: rgba(168, 58, 58, 0.27);
+  --canvas-glow-a: rgba(15, 122, 140, 0.05);
+  --canvas-glow-b: rgba(106, 90, 156, 0.04);
+  --state-active-fill: rgba(15, 122, 140, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(15, 122, 140, 0.14));
+  --state-reject-fill: rgba(168, 58, 58, 0.09);
+  --marquee-fill: rgba(15, 122, 140, 0.08);
+  --shadow-sm: 0 2px 10px rgba(30, 47, 54, .09);
+  --shadow-md: 0 10px 28px rgba(30, 47, 54, .13);
+  --shadow-lg: 0 20px 56px rgba(30, 47, 54, .17);
+}
+
+:root[data-theme="space"] {
+  color-scheme: dark;
+  --bg: #060814;
+  --bg2: #03040c;
+  --bg3: #101430;
+  --surface: #101430;
+  --surface2: #1a1f42;
+  --surface3: #262c58;
+  --border: rgba(111, 168, 255, 0.12);
+  --border2: rgba(111, 168, 255, 0.22);
+  --sb-thumb: rgba(111, 168, 255, 0.26);
+  --sb-thumb-hover: rgba(111, 168, 255, 0.42);
+  --sb-thumb-active: rgba(111, 168, 255, 0.6);
+  --text: #e8ebff;
+  --text2: #b0b6dd;
+  --text3: #7178a8;
+  --accent: #6fa8ff;
+  --violet: #b088ff;
+  --indigo: #b088ff;
+  --blue: #6fa8ff;
+  --gold: #ffc857;
+  --green: #4fd6a8;
+  --red: #ff5d73;
+  --orange: #ff9a52;
+  --purple: #b088ff;
+  --on-accent: #03040c;
+  --overlay: rgba(6, 8, 20, 0.72);
+  --overlay-ring: rgba(255, 255, 255, .025);
+  --focus-ring: rgba(111, 168, 255, 0.12);
+  --panel-shadow-left: 2px 0 12px rgba(0, 0, 0, .25);
+  --panel-shadow-right: -2px 0 12px rgba(0, 0, 0, .25);
+  --accent-soft: rgba(111, 168, 255, 0.1);
+  --accent-soft-strong: rgba(111, 168, 255, 0.18);
+  --accent-border: rgba(111, 168, 255, 0.26);
+  --accent-border-strong: rgba(111, 168, 255, 0.4);
+  --accent-glow: 0 0 14px rgba(111, 168, 255, 0.32);
+  --tab-hover-bg: rgba(232, 235, 255, 0.04);
+  --tab-active-bg: rgba(111, 168, 255, 0.13);
+  --tab-active-border: rgba(111, 168, 255, 0.28);
+  --tab-active-line: rgba(111, 168, 255, 0.95);
+  --tab-overflow-shadow: rgba(6, 8, 20, 0.62);
+  --violet-soft: rgba(176, 136, 255, 0.13);
+  --violet-border: rgba(176, 136, 255, 0.28);
+  --indigo-soft: rgba(176, 136, 255, 0.12);
+  --indigo-border: rgba(176, 136, 255, 0.26);
+  --blue-soft: rgba(111, 168, 255, 0.1);
+  --blue-border: rgba(111, 168, 255, 0.26);
+  --white-note: #f8fbff;
+  --white-note-soft: rgba(255, 255, 255, .92);
+  --white-note-border: rgba(248, 251, 255, .72);
+  --purple-soft: rgba(176, 136, 255, 0.13);
+  --purple-border: rgba(176, 136, 255, 0.28);
+  --green-soft: rgba(79, 214, 168, 0.11);
+  --green-border: rgba(79, 214, 168, 0.27);
+  --gold-soft: rgba(255, 200, 87, 0.12);
+  --gold-border: rgba(255, 200, 87, 0.28);
+  --note-yellow: #ffc857;
+  --note-yellow-soft: rgba(255, 200, 87, 0.18);
+  --note-yellow-border: rgba(255, 200, 87, 0.4);
+  --orange-soft: rgba(255, 154, 82, 0.11);
+  --orange-border: rgba(255, 154, 82, 0.27);
+  --red-soft: rgba(255, 93, 115, 0.1);
+  --red-border: rgba(255, 93, 115, 0.27);
+  --canvas-glow-a: rgba(111, 168, 255, 0.045);
+  --canvas-glow-b: rgba(176, 136, 255, 0.035);
+  --state-active-fill: rgba(111, 168, 255, 0.18);
+  --state-active-shadow: drop-shadow(0 0 7px rgba(111, 168, 255, 0.42));
+  --state-reject-fill: rgba(255, 93, 115, 0.1);
+  --marquee-fill: rgba(111, 168, 255, 0.1);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
+  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
+  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .65);
+}
+
+:root[data-theme="himalaya"] {
+  color-scheme: light;
+  --bg: #eef3f7;
+  --bg2: #fbfdff;
+  --bg3: #dde6ee;
+  --surface: #fbfdff;
+  --surface2: #eaf1f6;
+  --surface3: #d2dee8;
+  --border: rgba(74, 98, 116, 0.16);
+  --border2: rgba(74, 98, 116, 0.26);
+  --sb-thumb: rgba(74, 98, 116, 0.26);
+  --sb-thumb-hover: rgba(74, 98, 116, 0.4);
+  --sb-thumb-active: rgba(74, 98, 116, 0.56);
+  --text: #1b2a38;
+  --text2: #4a6274;
+  --text3: #7d94a6;
+  --accent: #1f7a9c;
+  --violet: #6b5b9e;
+  --indigo: #6b5b9e;
+  --blue: #1f7a9c;
+  --gold: #9a6f12;
+  --green: #3f7a3a;
+  --red: #b03a48;
+  --orange: #c2601f;
+  --purple: #6b5b9e;
+  --on-accent: #fbfdff;
+  --overlay: rgba(74, 98, 116, 0.28);
+  --overlay-ring: rgba(255, 255, 255, .75);
+  --focus-ring: rgba(31, 122, 156, 0.12);
+  --panel-shadow-left: 2px 0 18px rgba(27, 42, 56, .1);
+  --panel-shadow-right: -2px 0 18px rgba(27, 42, 56, .1);
+  --accent-soft: rgba(31, 122, 156, 0.1);
+  --accent-soft-strong: rgba(31, 122, 156, 0.18);
+  --accent-border: rgba(31, 122, 156, 0.24);
+  --accent-border-strong: rgba(31, 122, 156, 0.36);
+  --accent-glow: 0 10px 24px rgba(31, 122, 156, 0.16);
+  --tab-hover-bg: rgba(74, 98, 116, 0.05);
+  --tab-active-bg: rgba(31, 122, 156, 0.095);
+  --tab-active-border: rgba(31, 122, 156, 0.28);
+  --tab-active-line: rgba(31, 122, 156, 0.9);
+  --tab-overflow-shadow: rgba(74, 98, 116, 0.36);
+  --violet-soft: rgba(107, 91, 158, 0.13);
+  --violet-border: rgba(107, 91, 158, 0.28);
+  --indigo-soft: rgba(107, 91, 158, 0.12);
+  --indigo-border: rgba(107, 91, 158, 0.26);
+  --blue-soft: rgba(31, 122, 156, 0.1);
+  --blue-border: rgba(31, 122, 156, 0.26);
+  --white-note: #ffffff;
+  --white-note-soft: rgba(255, 255, 255, .94);
+  --white-note-border: rgba(74, 98, 116, 0.22);
+  --purple-soft: rgba(107, 91, 158, 0.13);
+  --purple-border: rgba(107, 91, 158, 0.28);
+  --green-soft: rgba(63, 122, 58, 0.11);
+  --green-border: rgba(63, 122, 58, 0.27);
+  --gold-soft: rgba(154, 111, 18, 0.12);
+  --gold-border: rgba(154, 111, 18, 0.28);
+  --note-yellow: #9a6f12;
+  --note-yellow-soft: rgba(154, 111, 18, 0.2);
+  --note-yellow-border: rgba(154, 111, 18, 0.32);
+  --orange-soft: rgba(194, 96, 31, 0.11);
+  --orange-border: rgba(194, 96, 31, 0.27);
+  --red-soft: rgba(176, 58, 72, 0.1);
+  --red-border: rgba(176, 58, 72, 0.27);
+  --canvas-glow-a: rgba(31, 122, 156, 0.05);
+  --canvas-glow-b: rgba(107, 91, 158, 0.04);
+  --state-active-fill: rgba(31, 122, 156, 0.12);
+  --state-active-shadow: drop-shadow(0 8px 18px rgba(31, 122, 156, 0.14));
+  --state-reject-fill: rgba(176, 58, 72, 0.09);
+  --marquee-fill: rgba(31, 122, 156, 0.08);
+  --shadow-sm: 0 2px 10px rgba(27, 42, 56, .09);
+  --shadow-md: 0 10px 28px rgba(27, 42, 56, .13);
+  --shadow-lg: 0 20px 56px rgba(27, 42, 56, .17);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--mono);
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+/* Re-enable selection only where it makes sense */
+input,
+textarea,
+select,
+.lang-claim,
+.def-box,
+.slist,
+.gram-result,
+.gram-rules,
+.rp-section-body {
+  user-select: text;
+}
+
+/* ─── SCROLLBARS ───
+   The app draws its own scrollbars everywhere rather than inheriting the OS
+   ones, which differ per platform and ignore the theme. Deliberately thin:
+   a 7px thumb on a transparent track, so scrollable regions lose almost no
+   usable width and the bar reads as part of the surface it sits on.
+
+   Firefox only supports the two `scrollbar-*` properties (no pseudo-elements,
+   no hover state), so it gets `thin` + matching colours; WebKit/Blink gets the
+   pseudo-element rules below with hover and active feedback. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sb-thumb) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--sb-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--sb-thumb-active);
+}
+
+/* Where both axes scroll, the corner would otherwise render as an opaque
+   system-grey square. */
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Scrollbars are a pointing-device affordance; touch surfaces scroll by drag
+   and the bar only covers content. */
+@media (pointer: coarse) {
+  * {
+    scrollbar-width: none;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
diff --git a/css/views.css b/css/views.css
index 1d84a27..e1fb5df 100644
--- a/css/views.css
+++ b/css/views.css
@@ -394,48 +394,6 @@
   left: 0;
 }
 
-.canvas-hint {
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-family: var(--mono);
-  font-size: .6rem;
-  color: var(--text3);
-  pointer-events: none;
-  white-space: nowrap;
-  letter-spacing: .07em;
-}
-
-.zoom-indicator {
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
-  font-family: var(--mono);
-  font-size: .62rem;
-  color: var(--text3);
-  padding: 3px 8px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 5px;
-}
-
-.rp-sec {
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.rp-title {
-  font-family: var(--sans);
-  font-size: .95rem;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .badge {
   font-family: var(--sans);
   font-size: .65rem;
@@ -469,12 +427,6 @@
   border: 1px solid var(--purple-border);
 }
 
-.bd-pda {
-  background: var(--green-soft);
-  color: var(--green);
-  border: 1px solid var(--green-border);
-}
-
 .bd-npda {
   background: color-mix(in srgb, var(--accent) 12%, transparent);
   color: var(--accent);
@@ -1502,31 +1454,6 @@
   height: 13px;
 }
 
-.curr-char-hl {
-  background: var(--accent-soft-strong);
-  color: var(--accent);
-  border-radius: 4px;
-  padding: 0 4px;
-  margin: 0 -2px;
-  border: 1px solid var(--accent-border);
-  box-shadow: var(--accent-glow);
-  transition: all var(--transition-base);
-}
-
-.curr-char-hl.accept {
-  background: var(--green-soft);
-  color: var(--green);
-  border-color: var(--green-border);
-  box-shadow: 0 0 12px var(--green-border);
-}
-
-.curr-char-hl.reject {
-  background: var(--red-soft);
-  color: var(--red);
-  border-color: var(--red-border);
-  box-shadow: 0 0 12px var(--red-border);
-}
-
 .def-box {
   padding: 8px 30px 8px 10px;
   background: var(--bg3);
@@ -4555,16 +4482,10 @@
   }
 
   .card,
-  .ref-card,
-  .pump-section,
-  .hierarchy-section {
+  .ref-card {
     padding: 14px;
   }
 
-  .closure-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .ref-section {
     margin-bottom: 24px;
   }
@@ -4574,8 +4495,7 @@
     gap: 8px;
   }
 
-  .ref-section-sub,
-  .tc-sub {
+  .ref-section-sub {
     line-height: 1.5;
   }
 }
@@ -4591,8 +4511,4 @@
   .ref-nav {
     max-height: 32vh;
   }
-
-  .closure-grid {
-    grid-template-columns: 1fr;
-  }
 }
diff --git a/js/algorithms-fa.js b/js/algorithms-fa.js
index 3f56776..a4f7e74 100644
--- a/js/algorithms-fa.js
+++ b/js/algorithms-fa.js
@@ -1,4 +1,3 @@
-import { renderSigma } from './alphabet.js';
 import { snapshot } from './history.js';
 import { langVerdict } from './language.js';
 import { deriveRegex, renderAll, updateLPanel, updateRPanel } from './render.js';
@@ -236,7 +235,6 @@ export function subsetConstruction() {
   return { states, trans, steps };
 }
 
-export let _subsetData = null;
 export function loadSubsetAsDFA() {
   const r = App._lastSubset; if (!r) return;
   snapshot();
@@ -1672,83 +1670,6 @@ ${result.accepted ? 'ACCEPTED ✓' : 'REJECTED ✗'} — ${result.branches} bran
 </div>`;
 }
 
-export function simNDTMLegacy(tokens) {
-  // BFS over configurations {state, tape, head}
-  const init = { state: App.startId, tape: tokens.length ? [...tokens] : [], head: 0 };
-  const queue = [init];
-  let branches = 0, maxDepth = 0, accepted = false;
-  const log = [];
-  while (queue.length && branches < 2000) {
-    const cfg = queue.shift();
-    const { state, tape, head } = cfg;
-    branches++;
-    const t = [...tape]; while (t.length <= head) t.push(App.config.sym.blank);
-    const sym = t[head];
-    const depth = cfg.depth || 0;
-    maxDepth = Math.max(maxDepth, depth);
-    const stateName = getState(state)?.name || state;
-    const idStr = `${t.slice(0, head).join('')}[${stateName}]${t.slice(head).join('')}`;
-
-    if (App.accepts.has(state)) {
-      accepted = true;
-      let main = `<span class="step-acc">Branch ${branches}: ACCEPT ✓</span>`;
-      const subs = [];
-      subs.push(`State "${stateName}" is an accept state — computation halts`);
-      subs.push(`Reached at depth ${depth} · ID: ${idStr}`);
-      log.push(main + `<span class="step-sub">${subs.join('<br>')}</span>`);
-      break;
-    }
-
-    if (depth >= 150) {
-      let main = `Branch ${branches}: <span class="step-dead">cut off (depth limit)</span>`;
-      const subs = [];
-      subs.push(`Depth ${depth} ≥ 150 — pruning this branch to prevent infinite exploration`);
-      subs.push(`ID: ${idStr}`);
-      log.push(main + `<span class="step-sub">${subs.join('<br>')}</span>`);
-      continue;
-    }
-
-    const matching = App.transitions.filter(tr => tr.from === state && (tr.symbol === sym || tr.symbol === App.config.sym.any));
-
-    if (!matching.length) {
-      let main = `Branch ${branches}: <span class="step-dead">stuck (no transition)</span>`;
-      const subs = [];
-      subs.push(`State "${stateName}", read '${sym}' — no matching δ(${stateName}, '${sym}')`);
-      subs.push(`This branch is a dead end · depth ${depth} · ID: ${idStr}`);
-      log.push(main + `<span class="step-sub">${subs.join('<br>')}</span>`);
-      continue;
-    }
-
-    matching.forEach(tr => {
-      const nt = [...t];
-      nt[head] = (!tr.write || tr.write === App.config.sym.any) ? sym : tr.write;
-      const move = tr.dir === 'R' ? 1 : (tr.dir === 'L' ? -1 : 0);
-      const nh = head + move;
-      queue.push({ state: tr.to, tape: nt, head: Math.max(0, nh), depth: depth + 1 });
-    });
-
-    let main = `Branch ${branches}: exploring state <em>${stateName}</em>`;
-    const subs = [];
-    subs.push(`Read '${sym}' at head position ${head} · depth ${depth}`);
-    if (matching.length > 1) {
-      subs.push(`<em>Nondeterministic choice:</em> ${matching.length} transitions match — spawning ${matching.length} child branches`);
-      matching.forEach((tr, i) => {
-        const toName = getState(tr.to)?.name || tr.to;
-        const writeStr = (!tr.write || tr.write === App.config.sym.any) ? sym : tr.write;
-        subs.push(`  Choice ${i + 1}: write '${writeStr}', move ${tr.dir}, → ${toName}`);
-      });
-    } else {
-      const tr = matching[0], toName = getState(tr.to)?.name || tr.to;
-      const writeStr = (!tr.write || tr.write === App.config.sym.any) ? sym : tr.write;
-      subs.push(`Deterministic: write '${writeStr}', move ${tr.dir}, → ${toName}`);
-    }
-    subs.push(`ID: ${idStr}`);
-    log.push(main + `<span class="step-sub">${subs.join('<br>')}</span>`);
-  }
-  return { accepted, branches, maxDepth, log };
-}
-
-
 
 // ══════════════════════════════════════════════════════════════════
 //  UTM SIMULATOR
@@ -2183,7 +2104,6 @@ export function utmToggleAuto() {
 }
 
 
-
 // ══════════════════════════════════════════════════════════════════
 //  MOORE MACHINE ALGORITHMS
 // ══════════════════════════════════════════════════════════════════
diff --git a/js/blocks-ui.js b/js/blocks-ui.js
index affdaca..6716ba2 100644
--- a/js/blocks-ui.js
+++ b/js/blocks-ui.js
@@ -225,17 +225,6 @@ export async function listBlockLibrary() {
   }
 }
 
-export async function readBlockDefinition(key) {
-  try {
-    return await withStore('readonly', (store, resolve) => {
-      const req = store.get(key);
-      req.onsuccess = () => resolve(req.result || null);
-    });
-  } catch (e) {
-    return null;
-  }
-}
-
 /**
  * Keep a definition under `key`, refusing one that would contain itself.
  *
diff --git a/js/blocks.js b/js/blocks.js
index c12ff82..ef97bbc 100644
--- a/js/blocks.js
+++ b/js/blocks.js
@@ -150,12 +150,6 @@ export function blockSubtree(id) {
   return out;
 }
 
-/** Every state in `id`'s subtree, however deep. */
-export function blockSubtreeStates(id) {
-  const ids = new Set(blockSubtree(id));
-  return (App.states || []).filter(s => s.blockId && ids.has(s.blockId));
-}
-
 /** The chain of containing blocks, outermost first. */
 export function blockAncestry(id) {
   const out = [];
diff --git a/js/bridge.js b/js/bridge.js
index e441fa0..6d42ffe 100644
--- a/js/bridge.js
+++ b/js/bridge.js
@@ -5,9 +5,9 @@
 // global-scope code and cannot see module bindings. The functions they name
 // are re-exposed on window here.
 //
-// 226 names across 23 modules — 225 functions plus App — reached from 461
+// 217 names across 25 modules — 216 functions plus App — reached from 442
 // attributes:
-//    337  static, in index.html
+//    320  static, in index.html
 //    122  in markup the app builds at runtime (algorithm cards,
 //         export dialogs, alphabet chips, context menus)
 //
@@ -64,7 +64,7 @@ import {
   applyNoteFormat, clearNoteFormatting, confirmNote, ctxAddNoteEdge, ctxAddNoteState,
   ctxAnchorNoteToSelection, ctxCanvasAddNote, ctxDeleteNote, ctxDetachNote,
   ctxEditNote, ctxResetNoteSize, ctxSetNoteColor, deleteNoteFromModal,
-  handleNoteEditorKeydown, insertNoteNewline, setNoteModalColor, updateNoteCharCount, updateNoteEditor,
+  handleNoteEditorKeydown, insertNoteNewline, setNoteModalColor, updateNoteEditor,
 } from './notes.js';
 import {
   confirmDivider, ctxDeleteDivider, ctxEditDivider, ctxSetDividerColor,
@@ -85,7 +85,7 @@ import {
 } from './suggest.js';
 import {
   copyShareableLink, ctxCanvasDescribe, hideSaveMenu, loadJSON, onFileLoad,
-  saveDocument, saveDocumentAs, saveJSON, saveNow, saveWorkspace, toggleSaveMenu,
+  saveDocumentAs, saveNow, toggleSaveMenu,
 } from './persistence.js';
 // The whole StateMate feature adds exactly one name here. Everything else in
 // js/statemate-ui.js wires its listeners at creation, the way reference.js
@@ -172,7 +172,7 @@ Object.assign(window, {
    applyNoteFormat, clearNoteFormatting, confirmNote, ctxAddNoteEdge, ctxAddNoteState,
    ctxAnchorNoteToSelection, ctxCanvasAddNote, ctxDeleteNote, ctxDetachNote,
    ctxEditNote, ctxResetNoteSize, ctxSetNoteColor, deleteNoteFromModal,
-   handleNoteEditorKeydown, insertNoteNewline, setNoteModalColor, updateNoteCharCount, updateNoteEditor,
+   handleNoteEditorKeydown, insertNoteNewline, setNoteModalColor, updateNoteEditor,
   // dividers.js
    confirmDivider, ctxDeleteDivider, ctxEditDivider, ctxSetDividerColor,
    ctxSetDividerStyle, ctxStraightenDivider, deleteDividerFromModal,
@@ -190,7 +190,7 @@ Object.assign(window, {
    trySymSuggestKeydown,
   // persistence.js
    copyShareableLink, hideSaveMenu, loadJSON, onFileLoad,
-   ctxCanvasDescribe, saveDocument, saveDocumentAs, saveJSON, saveNow, saveWorkspace, toggleSaveMenu,
+   ctxCanvasDescribe, saveDocumentAs, saveNow, toggleSaveMenu,
   // wizard-ui.js — the whole wizard, in one name. Everything else inside it
   // is wired at creation, so nothing else needs to be here.
    openMachineWizard,
diff --git a/js/canvas.js b/js/canvas.js
index 4628bd5..3f5015b 100644
--- a/js/canvas.js
+++ b/js/canvas.js
@@ -10,7 +10,7 @@ import { getNode, invalidateViewGraph, isPortNode, scopeId, viewStates, viewTran
 import { markDirty, snapshot } from './history.js';
 import { clearActiveNoteHighlight, dragSelectedNotesTo, endNoteResize, getNote, includeNoteBounds, resizeNoteTo, resolveNotePos, syncNoteSelectionClasses, visibleNotes } from './notes.js';
 import { getWorkspaceData } from './persistence.js';
-import { currentLayoutContext, drawnEdgeEl, drawnStateEl, makeSVG, renderAll, repaintForCamera, scheduleFastDOM, updateFastDOM, updateLPanel, updateRPanel, withFullRender } from './render.js';
+import { currentLayoutContext, drawnEdgeEl, drawnStateEl, makeSVG, renderAll, repaintForCamera, scheduleFastDOM, updateFastDOM, withFullRender } from './render.js';
 import { $, App } from './state.js';
 import { createState, deleteState, getState, hideContextMenu, newId, newTId, openTransModal } from './states-transitions.js';
 import { Change, emit } from './store.js';
diff --git a/js/dividers.js b/js/dividers.js
index 36c5084..5f74b43 100644
--- a/js/dividers.js
+++ b/js/dividers.js
@@ -5,7 +5,7 @@ import { hideSaveMenu } from './persistence.js';
 import { makeSVG, renderAll } from './render.js';
 import { $, App } from './state.js';
 import { hideContextMenu, showContextMenu } from './states-transitions.js';
-import { setTool, toggleTool } from './ui.js';
+import { setTool } from './ui.js';
 import { showStatus } from './utils.js';
 
 // ══════════════════════════════════════════════════════════════════
@@ -645,12 +645,6 @@ export function updateShapeToolButton(tool) {
   if (btn) btn.dataset.tip = `Shape — drag to draw a Divider line or Region box (last used: ${SHAPE_TOOL_LABELS[kind]}); right-click to switch; L = line, R = rectangle; click again to return to Pointer`;
 }
 
-// Click activates the remembered kind; toggleTool's existing "click the
-// active tool again to return to Pointer" rule applies unchanged.
-export function clickShapeTool() {
-  toggleTool(App.lastShapeTool);
-}
-
 export function showShapeToolMenu(e) {
   e.preventDefault();
   e.stopPropagation();
diff --git a/js/export-ui.js b/js/export-ui.js
index 627f36f..398e332 100644
--- a/js/export-ui.js
+++ b/js/export-ui.js
@@ -535,10 +535,6 @@ export function exportCodeDownload() {
   showStatus(`Exported ${spec.label}`);
 }
 
-// ── shortcuts used from the panels ────────────────────────────────
-// The Language and Batch panels each open the dialog already pointed at
-// the format that panel produces, so the common path is one click.
-export function exportOpenSamples() { openExportCodeModal('samples'); }
 export function exportOpenBatch() {
   if (!App.lastBatch) { showStatus('Run a batch test first'); return; }
   openExportCodeModal('batch');
diff --git a/js/file-host.js b/js/file-host.js
index 8eb1ec527a49d5414d2d690dce67bb06d364ca77..3d0e7e5707a990b0e85b064768f50c2de097941b 100644
GIT binary patch
delta 12
TcmbPabJco-4%g;Pu9d<7A#(($

delta 52
zcmca=J;`Q+4%g(roZ`xEo<6Se-kyFg3bqRBj-@5}xrrr-!6l_BnfVI7iOCt6d8wN<
Ixz-2+0N?l$4*&oF

diff --git a/js/glyphs.js b/js/glyphs.js
index d07850c..de468c5 100644
--- a/js/glyphs.js
+++ b/js/glyphs.js
@@ -234,13 +234,6 @@ export function applyOutlines(plan, tables, clone) {
   return result;
 }
 
-// The three composed, which is what a caller with nothing to do in between
-// wants — and what the tests exercise.
-export async function outlineText(live, clone) {
-  const plan = planOutlines(live, clone);
-  return applyOutlines(plan, await loadGlyphTables(plan), clone);
-}
-
 // Reads everything about one <text> that the conversion needs, without touching
 // either tree. Returns null when the element is not convertible at all.
 function planText(liveEl, cloneEl) {
diff --git a/js/grammar/analysis.js b/js/grammar/analysis.js
index 6193518..1e67f2c 100644
--- a/js/grammar/analysis.js
+++ b/js/grammar/analysis.js
@@ -1,4 +1,4 @@
-import { eps, isContextFree, rulesFor, terminalsOf } from './model.js';
+import { eps, isContextFree, terminalsOf } from './model.js';
 
 // ══════════════════════════════════════════════════════════════════
 //  ANALYSIS
@@ -362,9 +362,3 @@ export function properties(g) {
   };
 }
 
-/** Rules whose left-hand side has no definition at all — never possible from
- *  the parser (an LHS defines its own variable) but reachable from a `.json`
- *  that names a start symbol nothing derives. */
-export function undefinedVars(g) {
-  return [...g.vars].filter(v => rulesFor(g, v).length === 0);
-}
diff --git a/js/grammar/model.js b/js/grammar/model.js
index d7c762f..de1fdc3 100644
--- a/js/grammar/model.js
+++ b/js/grammar/model.js
@@ -23,10 +23,6 @@ import { DEFAULT_EPS, deriveVars, formatRules, parseGrammarText, tokenizeSymbols
 /** ε as the reader has it configured. Read live — Settings can change it. */
 export const eps = () => App.config?.sym?.eps || DEFAULT_EPS;
 
-export function emptyGrammar() {
-  return { vars: new Set(), start: '', rules: [] };
-}
-
 export function cloneGrammar(g) {
   return {
     vars: new Set(g.vars),
@@ -109,17 +105,6 @@ export function isContextFree(g) {
   return g.rules.every(r => r.lhsArr.length === 1 && g.vars.has(r.lhsArr[0]));
 }
 
-/**
- * Changes when the grammar changes and at no other time. Used to key the
- * derived panels, the same job `_regexCacheKey()` does for the Language panel
- * — and, for the same reason, it is deliberately not memoised: it exists to
- * notice edits nobody announced.
- */
-export function grammarSignature(g) {
-  return `${g.start}|${[...g.vars].sort().join(',')}|`
-    + g.rules.map(r => `${r.lhsArr.join(' ')}>${r.rhsArr.join(' ')}`).sort().join(';');
-}
-
 export function grammarText(g) {
   return formatRules(g.rules, g.start, eps());
 }
@@ -221,5 +206,3 @@ export function tokenizeWord(raw, g) {
   return { ok: true, raw: s, tokens };
 }
 
-/** The textarea, when the view is mounted. Kept here so tools never touch it. */
-export const grammarSourceEl = () => $('gram-source');
diff --git a/js/machine-guide.js b/js/machine-guide.js
index 5469a67..081e0b8 100644
--- a/js/machine-guide.js
+++ b/js/machine-guide.js
@@ -1,4 +1,4 @@
-import { math, mathLines, note, p, sec, ul } from './guide-blocks.js';
+import { math, mathLines, p, sec, ul } from './guide-blocks.js';
 
 // ══════════════════════════════════════════════════════════════════
 //  MACHINE GUIDE — CONTENT
@@ -1251,6 +1251,3 @@ export const MachineGuides = {
   ...TRANSDUCER_GUIDES
 };
 
-export function guideFor(machine) {
-  return MachineGuides[machine] || null;
-}
diff --git a/js/machines/index.js b/js/machines/index.js
index 6cad267..89bf8bb 100644
--- a/js/machines/index.js
+++ b/js/machines/index.js
@@ -39,11 +39,6 @@ export {
   machineDef, machineDefs, machineFamily, machineIds, requireMachineDef
 } from './registry.js';
 
-/** Is there an implementation for this type in this build? */
-export function machineImplemented(m = App.machine) {
-  return machineDef(m) !== null;
-}
-
 /**
  * The run box's text → whatever this machine's simulate/decide take.
  *
diff --git a/js/machines/registry.js b/js/machines/registry.js
index 77e2799..04de120 100644
--- a/js/machines/registry.js
+++ b/js/machines/registry.js
@@ -132,6 +132,3 @@ export function familyMembers(family) {
   return machineDefs().filter(d => d.family === family).map(d => d.id);
 }
 
-// Test-only. Definitions are registered at module scope and modules are
-// singletons, so nothing in the app ever needs to unregister one.
-export function _resetMachineRegistry() { defs.clear(); }
diff --git a/js/machines/run.js b/js/machines/run.js
index a9bda6f..9304978 100644
--- a/js/machines/run.js
+++ b/js/machines/run.js
@@ -103,7 +103,3 @@ export function makeRun(source) {
   };
 }
 
-/** The run a player holds before anything has been run. */
-export function emptyRun() {
-  return makeRun([]);
-}
diff --git a/js/machines/twoway.js b/js/machines/twoway.js
index 8f84005..dde0bd4 100644
--- a/js/machines/twoway.js
+++ b/js/machines/twoway.js
@@ -29,10 +29,6 @@ export function headMoveDelta(dir) {
   return dir === 'R' ? 1 : (dir === 'L' ? -1 : 0);
 }
 
-export function isHeadOutOfInput(tokens, head) {
-  return head < 0 || head >= tokens.length;
-}
-
 export function twoWayDisplayTape(tokens) {
   return buildMarkedInputTape(tokens);
 }
diff --git a/js/notes.js b/js/notes.js
index 8de7885..ccab2ea 100644
--- a/js/notes.js
+++ b/js/notes.js
@@ -245,7 +245,6 @@ export const NOTE_CHARS_PER_LINE = noteCharsPerLine(NOTE_WIDTH);
 // constantly in this domain — `a*b*`, `Σ*`, `(0|1)*` would silently italicize,
 // and `q_start to q_end` would silently underline. Those now render literally;
 // the trade-off is that markers can only wrap whole words, not word interiors.
-export const NOTE_MARKUP_RE = /(^|[\s([{"'])(\*\*|__|\*)(?=\S)(.*?\S)\2(?=$|[\s)\]}"'.,;:!?])/g;
 export function parseNoteRuns(line) {
   const runs = [], active = { bold: 0, italic: 0, underline: 0 };
   const markerStyles = { '**': ['bold'], '***': ['bold', 'italic'], '*': ['italic'], '__': ['underline'] };
@@ -332,12 +331,6 @@ export function layoutNoteText(text, charsPerLine) {
   return out.length ? out : [[]];
 }
 
-// Back-compat helper: plain-text lines only (used by bounds/export math that
-// doesn't need per-run styling).
-export function wrapNoteText(text) {
-  return layoutNoteText(text, NOTE_CHARS_PER_LINE).map(runs => runs.map(r => r.text).join(''));
-}
-
 // How many characters fit per line for a note of the given pixel width.
 // Hoisted above its use in NOTE_CHARS_PER_LINE by function declaration.
 export function noteCharsPerLine(widthPx) {
@@ -935,21 +928,6 @@ export function insertNoteNewline() {
   updateNoteEditor();
 }
 
-// Commits an edit to the note textarea, rejecting it whole if it would exceed
-// the character cap. Returns whether the value was applied.
-export function setNoteTextareaValue(editor, next) {
-  if (next.length > NOTE_MAX_CHARS) {
-    showStatus(`Note is at the ${NOTE_MAX_CHARS}-character limit`);
-    editor.focus();
-    return false;
-  }
-  setNoteEditorMarkdown(editor, next);
-  _noteEditorLastValid = next;
-  editor.focus();
-  updateNoteCharCount();
-  return true;
-}
-
 export function updateNoteCharCount() {
   const ta = $('note-text');
   const counter = $('note-char-count');
diff --git a/js/panel-list.js b/js/panel-list.js
index e13792a..e23e06d 100644
--- a/js/panel-list.js
+++ b/js/panel-list.js
@@ -84,12 +84,6 @@ export function setListItems(host, items, opts = {}) {
   draw(rec, true);
 }
 
-/** The rows a windowed list is currently holding, filter included. */
-export function listItems(host) {
-  const rec = host && lists.get(host.id);
-  return rec ? visible(rec) : [];
-}
-
 /**
  * Narrows a declared list to the rows whose text contains `query`. Redrawing
  * from the top is deliberate: a filter result is a new list, and holding the
diff --git a/js/panel-sections-ui.js b/js/panel-sections-ui.js
index ac57d0a..ec8c7a4 100644
--- a/js/panel-sections-ui.js
+++ b/js/panel-sections-ui.js
@@ -495,11 +495,6 @@ export function initPanelSectionReorder() {
  */
 export const _dropTests = { outsideBy, panelIsOpen };
 
-/** Whether a reorder gesture is in flight — the tests' way in. */
-export function isReorderingSections() {
-  return !!(drag && drag.active);
-}
-
 /**
  * Drops a half-finished gesture. Module state survives `resetApp`, and a drag
  * left in flight would have the next test moving a section from the last one.
diff --git a/js/persistence.js b/js/persistence.js
index beb63f6..4b4d00e 100644
--- a/js/persistence.js
+++ b/js/persistence.js
@@ -5,14 +5,12 @@ import { snapshot } from './history.js';
 import { importJFLAPData, readJFLAPText } from './import-jflap.js';
 import { closeModal, showOverlay } from './modal.js';
 import { refreshQuickSettings } from './quick-settings.js';
-import { renderAll, updateLPanel, updateRPanel } from './render.js';
 import { showExampleCard } from './machine-card.js';
 import { isMultiTape, machineSupportsBlocks } from './machines/index.js';
 import { $, APP_VERSION, App, MachineExamples, MachineTypes, Workspaces, activeWorkspaceId, exportWorkspaceState, getMachineConfig, largeMachineProfile, normalizeBoundarySymbolsForMachine, setActiveWorkspaceId, setR, setWorkspaces } from './state.js';
 import { WORKSPACE_EXT, fileStem, hasFileHost, noteOpenDocument, openFileDialog, saveFileAs, suggestedFileName, writeFile } from './file-host.js';
-import { hideContextMenu } from './states-transitions.js';
 import { Change, emit } from './store.js';
-import { autoFitLoadedMachine, createTab, fitToScreen, hideTabContextMenu, hideTabOverflowMenu, initTabs, markActiveWorkspaceSaved, renderTabs, setSaveState, switchTab } from './ui.js';
+import { autoFitLoadedMachine, createTab, fitToScreen, initTabs, markActiveWorkspaceSaved, renderTabs, setSaveState, switchTab } from './ui.js';
 import { hasPdaNondeterminism, hasSingleTapeNondeterminism, isAnyPDA, performClear, resetIds, showStatus } from './utils.js';
 import { applyMachineSwitch } from './view.js';
 
diff --git a/js/render.js b/js/render.js
index 974cce0..782b58d 100644
--- a/js/render.js
+++ b/js/render.js
@@ -8,7 +8,7 @@ import { cullNeedsRepaint, cullViewport, cullingActive, edgeLabelLOD, invalidate
 import { scheduleMinimap } from './minimap.js';
 import { renderLanguagePanel } from './language.js';
 import { highlightNoteAnchors, pruneNoteAnchors, renderNotes, updateNotesDOM } from './notes.js';
-import { $, App, OmegaAcceptance, R, SVG_NS, edgeLabelsHidden, getMachineConfig, isDeterministicOmega, omegaAcceptanceOf, previewNodeBudget, statePriority, usesParityPriorities, wrapStateLabelsOn } from './state.js';
+import { $, App, R, SVG_NS, edgeLabelsHidden, getMachineConfig, isDeterministicOmega, omegaAcceptanceOf, previewNodeBudget, statePriority, usesParityPriorities, wrapStateLabelsOn } from './state.js';
 import { BLOCK_STRIP_H, blockPreviewGraph, blockPreviewKey, getNode, viewEdgeGroup, viewEdgeKeyFor, viewStates, visibleNodeIdFor } from './view-graph.js';
 import { machineSupportsBlocks } from './machines/index.js';
 import { allBlocks } from './blocks-ui.js';
@@ -744,14 +744,6 @@ export function scheduleFastDOM({ statesMoved = true } = {}) {
   else run();
 }
 
-/** Paints now, dropping any frame this scheduler was holding. */
-export function flushFastDOM() {
-  fastDOMPending = false;
-  const moved = fastDOMStatesMoved;
-  fastDOMStatesMoved = false;
-  updateFastDOM({ statesMoved: moved });
-}
-
 export function updateFastDOM({ statesMoved = true } = {}) {
   const dt = beginPass();
   // The drag path, so the minimap tracks a state while it is being moved
@@ -2079,29 +2071,43 @@ function buildFormalDefLatex() {
   const q0_name = getState(App.startId)?.name;
   const q0_str = q0_name ? formatStateName(q0_name) : '\\text{—}';
   const F_str = formatSet(App.states.filter(s => App.accepts.has(s.id)).map(s => s.name));
-  
-  let txt = `$$ \\begin{aligned} `;
-  
+  const G_str = formatSet([...App.stackAlpha]);
+  const D_str = formatSet([...App.outputAlpha]);
+  const eps = '\\varepsilon';
+
+  // Every definition is the same list of rows in the same order: the tuple,
+  // then one row per component it has, then δ and whatever else it needs to
+  // say. `def()` is that shape — `mid` is the components between Σ and q₀,
+  // `tail` everything from F onward — so a branch writes only what is
+  // particular to it. It was twenty branches each spelling out the four rows
+  // they agree on, which is where `2DFA` picked up a trailing `\\` that none
+  // of its neighbours has.
+  const def = (tuple, mid, tail) => [
+    `M &= (${tuple})`,
+    `Q &= ${Q_str}`,
+    `\\Sigma &= ${S_str}`,
+    ...mid,
+    `q_0 &= ${q0_str}`,
+    ...tail,
+  ];
+  const Frow = `F &= ${F_str}`;
+  let rows;
+
   if (m === 'DFA' || m === 'NFA' || m === 'ε-NFA') {
     const codomain = m === 'DFA' ? 'Q' : '\\mathcal{P}(Q)';
-    const eps = (m === 'ε-NFA') ? '\\cup \\{\\varepsilon\\}' : '';
-    const mapDom = (m === 'ε-NFA') ? `\\Sigma ${eps}` : '\\Sigma';
-    txt += `M &= (Q, \\Sigma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times ${mapDom} \\to ${codomain}`;
+    const mapDom = (m === 'ε-NFA') ? `\\Sigma \\cup \\{\\varepsilon\\}` : '\\Sigma';
+    rows = def('Q, \\Sigma, \\delta, q_0, F', [], [
+      Frow,
+      `\\delta &: Q \\times ${mapDom} \\to ${codomain}`,
+    ]);
   } else if (m === 'PFA') {
-    txt += `M &= (Q, \\Sigma, \\delta, q_0, F, \\lambda) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\lambda &= ${App.config.pfaCutPoint} \\quad \\text{(cut-point)} \\\\`;
-    txt += `\\delta &: Q \\times \\Sigma \\times Q \\to [0, 1] \\\\`;
-    txt += `&\\textstyle\\sum_{q'} \\delta(q, a, q') = 1 \\quad \\forall q \\in Q, a \\in \\Sigma \\\\`;
-    txt += `L(M) &= \\{ w : P_M(w) > \\lambda \\}`;
+    rows = def('Q, \\Sigma, \\delta, q_0, F, \\lambda', [], [
+      Frow,
+      `\\lambda &= ${App.config.pfaCutPoint} \\quad \\text{(cut-point)}`,
+      `\\delta &: Q \\times \\Sigma \\times Q \\to [0, 1]`,
+      `&\\textstyle\\sum_{q'} \\delta(q, a, q') = 1 \\quad \\forall q \\in Q, a \\in \\Sigma`,
+      `L(M) &= \\{ w : P_M(w) > \\lambda \\}`,
+    ]);
   } else if (getMachineConfig(m).isOmega) {
     // Two independent axes meet here. Determinism decides whether δ is a
     // function and whether the language quantifies over runs; the acceptance
@@ -2113,191 +2119,109 @@ function buildFormalDefLatex() {
     const pred = cond === 'cobuchi' ? `${inf} \\cap F = \\emptyset`
       : cond === 'parity' ? `\\min \\Omega(${inf}) \\equiv 0 \\pmod 2`
         : `${inf} \\cap F \\neq \\emptyset`;
-    txt += `M &= (Q, \\Sigma, \\delta, q_0, ${alpha}) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += cond === 'parity'
-      ? `\\Omega &: Q \\to \\mathbb{N} \\\\`
-      : `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Sigma \\to ${det ? 'Q' : '\\mathcal{P}(Q)'} \\\\`;
-    if (cond === 'weak') {
-      txt += `&\\forall\\, C \\in \\mathrm{SCC}(M):\\ C \\subseteq F \\ \\text{or}\\ C \\cap F = \\emptyset \\\\`;
-    }
-    txt += det
-      ? `L(M) &= \\{ w \\in \\Sigma^\\omega : ${pred} \\}`
-      : `L(M) &= \\{ w \\in \\Sigma^\\omega : \\exists \\rho,\\ ${pred} \\}`;
+    rows = def(`Q, \\Sigma, \\delta, q_0, ${alpha}`, [], [
+      cond === 'parity' ? `\\Omega &: Q \\to \\mathbb{N}` : Frow,
+      `\\delta &: Q \\times \\Sigma \\to ${det ? 'Q' : '\\mathcal{P}(Q)'}`,
+      ...(cond === 'weak'
+        ? [`&\\forall\\, C \\in \\mathrm{SCC}(M):\\ C \\subseteq F \\ \\text{or}\\ C \\cap F = \\emptyset`]
+        : []),
+      det
+        ? `L(M) &= \\{ w \\in \\Sigma^\\omega : ${pred} \\}`
+        : `L(M) &= \\{ w \\in \\Sigma^\\omega : \\exists \\rho,\\ ${pred} \\}`,
+    ]);
   } else if (m === 'PDT') {
-    const G_str = formatSet([...App.stackAlpha]);
-    const D_str = formatSet([...App.outputAlpha]);
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\Delta, \\delta, \\lambda, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `\\Delta &= ${D_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{\\varepsilon\\}) \\times \\Gamma \\to \\mathcal{P}(Q \\times \\Gamma^* \\times \\Delta^*)`;
+    rows = def('Q, \\Sigma, \\Gamma, \\Delta, \\delta, \\lambda, q_0, F',
+      [`\\Gamma &= ${G_str}`, `\\Delta &= ${D_str}`], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{\\varepsilon\\}) \\times \\Gamma \\to \\mathcal{P}(Q \\times \\Gamma^* \\times \\Delta^*)`,
+    ]);
   } else if (m === '2DFT') {
-    const D_str = formatSet([...App.outputAlpha]);
     const left = App.config.sym.leftMarker;
     const right = App.config.sym.rightMarker;
-    txt += `M &= (Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Delta &= ${D_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to Q \\times \\{L, R, S\\} \\\\`;
-    txt += `\\lambda &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to \\Delta^*`;
+    rows = def('Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0, F',
+      [`\\Delta &= ${D_str}`], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to Q \\times \\{L, R, S\\}`,
+      `\\lambda &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to \\Delta^*`,
+    ]);
   } else if (m === '2DFA' || m === '2NFA') {
     const left = App.config.sym.leftMarker;
     const right = App.config.sym.rightMarker;
     const codomain = m === '2DFA' ? 'Q \\times \\{L, R, S\\}' : '\\mathcal{P}(Q \\times \\{L, R, S\\})';
-    txt += `M &= (Q, \\Sigma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to ${codomain} \\\\`;
+    rows = def('Q, \\Sigma, \\delta, q_0, F', [], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${left}, ${right}\\}) \\to ${codomain}`,
+    ]);
   } else if (m === 'QA') {
-    const G_str = formatSet([...App.stackAlpha]);
-    const eps = '\\varepsilon';
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q \\times \\Gamma^*)`;
+    rows = def('Q, \\Sigma, \\Gamma, \\delta, q_0, F', [`\\Gamma &= ${G_str}`], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q \\times \\Gamma^*)`,
+    ]);
   } else if (m === 'Counter') {
     const bottom = formatStateName(App.config.sym.stackBottom);
     const counterSym = formatStateName([...App.stackAlpha].find(sym => sym !== App.config.sym.stackBottom) || '1');
-    const eps = '\\varepsilon';
-    txt += `M &= (Q, \\Sigma, \\{${counterSym}, ${bottom}\\}, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times \\{${counterSym}, ${bottom}, ${eps}\\} \\to \\mathcal{P}(Q \\times \\{${counterSym}, ${bottom}, ${eps}\\}^*)`;
+    rows = def(`Q, \\Sigma, \\{${counterSym}, ${bottom}\\}, \\delta, q_0, F`, [], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times \\{${counterSym}, ${bottom}, ${eps}\\} \\to \\mathcal{P}(Q \\times \\{${counterSym}, ${bottom}, ${eps}\\}^*)`,
+    ]);
   } else if (m === '2PDA') {
-    const G_str = formatSet([...App.stackAlpha]);
-    const eps = '\\varepsilon';
-    txt += `M &= (Q, \\Sigma, \\Gamma_1, \\Gamma_2, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma_1 = \\Gamma_2 &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma_1 \\cup \\{${eps}\\}) \\times (\\Gamma_2 \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q \\times \\Gamma_1^* \\times \\Gamma_2^*)`;
+    rows = def('Q, \\Sigma, \\Gamma_1, \\Gamma_2, \\delta, q_0, F',
+      [`\\Gamma_1 = \\Gamma_2 &= ${G_str}`], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma_1 \\cup \\{${eps}\\}) \\times (\\Gamma_2 \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q \\times \\Gamma_1^* \\times \\Gamma_2^*)`,
+    ]);
   } else if (isAnyPDA(m)) {
-    const G_str = formatSet([...App.stackAlpha]);
     const stackBottomStr = formatStateName(App.config.sym.stackBottom);
-    const eps = '\\varepsilon';
     const codomain = m === 'NPDA' ? '\\mathcal{P}(Q \\times \\Gamma^*)' : 'Q \\times \\Gamma^*';
     const emptyCodomain = m === 'NPDA' ? `\\mathcal{P}(Q \\times (\\Gamma \\cup \\{${eps}\\})^*)` : `Q \\times (\\Gamma \\cup \\{${eps}\\})^*`;
-    
-    if (App.config.pdaParadigm === 'explicit') {
-      txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, Z_0, F) \\\\`;
-      txt += `Q &= ${Q_str} \\\\`;
-      txt += `\\Sigma &= ${S_str} \\\\`;
-      txt += `\\Gamma &= ${G_str} \\\\`;
-      txt += `q_0 &= ${q0_str} \\\\`;
-      txt += `Z_0 &= ${stackBottomStr} \\\\`;
-      txt += `F &= ${F_str} \\\\`;
-      txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times \\Gamma \\to ${codomain}`;
-    } else {
-      txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0) \\\\`;
-      txt += `Q &= ${Q_str} \\\\`;
-      txt += `\\Sigma &= ${S_str} \\\\`;
-      txt += `\\Gamma &= ${G_str} \\\\`;
-      txt += `q_0 &= ${q0_str} \\\\`;
-      txt += `\\text{Acc} &= \\text{empty stack} \\\\`;
-      txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma \\cup \\{${eps}\\}) \\to ${emptyCodomain}`;
-    }
+    // The two acceptance paradigms are different tuples, not a different δ:
+    // by empty stack there is no F and no Z_0 to name.
+    rows = App.config.pdaParadigm === 'explicit'
+      ? def('Q, \\Sigma, \\Gamma, \\delta, q_0, Z_0, F', [`\\Gamma &= ${G_str}`], [
+        `Z_0 &= ${stackBottomStr}`,
+        Frow,
+        `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times \\Gamma \\to ${codomain}`,
+      ])
+      : def('Q, \\Sigma, \\Gamma, \\delta, q_0', [`\\Gamma &= ${G_str}`], [
+        `\\text{Acc} &= \\text{empty stack}`,
+        `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times (\\Gamma \\cup \\{${eps}\\}) \\to ${emptyCodomain}`,
+      ]);
   } else if (m === 'Moore') {
-    const D_str = formatSet([...App.outputAlpha]);
-    const lambda = '\\lambda';
-    txt += `M &= (Q, \\Sigma, \\Delta, \\delta, ${lambda}, q_0) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Delta &= ${D_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Sigma \\to Q \\\\`;
-    txt += `${lambda} &: Q \\to \\Delta`;
+    rows = def('Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0', [`\\Delta &= ${D_str}`], [
+      `\\delta &: Q \\times \\Sigma \\to Q`,
+      `\\lambda &: Q \\to \\Delta`,
+    ]);
   } else if (m === 'Mealy') {
-    const D_str = formatSet([...App.outputAlpha]);
-    const lambda = '\\lambda';
-    txt += `M &= (Q, \\Sigma, \\Delta, \\delta, ${lambda}, q_0) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Delta &= ${D_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Sigma \\to Q \\\\`;
-    txt += `${lambda} &: Q \\times \\Sigma \\to \\Delta`;
+    rows = def('Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0', [`\\Delta &= ${D_str}`], [
+      `\\delta &: Q \\times \\Sigma \\to Q`,
+      `\\lambda &: Q \\times \\Sigma \\to \\Delta`,
+    ]);
   } else if (m === 'FST') {
-    const D_str = formatSet([...App.outputAlpha]);
-    const eps = '\\varepsilon';
-    txt += `M &= (Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Delta &= ${D_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q) \\\\`;
-    txt += `\\lambda &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times Q \\to \\Delta^*`;
-  } else if (m === 'NDTM') {
-    const G_str = formatSet([...App.stackAlpha]);
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Gamma \\to \\mathcal{P}(Q \\times \\Gamma \\times \\{L, R, S\\})`;
-  } else if (m === 'MTM') {
-    const G_str = formatSet([...App.stackAlpha]);
-    const k = App.tapeCount || 2;
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Gamma^{${k}} \\to Q \\times \\Gamma^{${k}} \\times \\{L, R, S\\}^{${k}}`;
-  } else if (m === 'LBA') {
-    const G_str = formatSet([...App.stackAlpha]);
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Gamma \\to Q \\times \\Gamma \\times \\{L, R, S\\} \\\\`;
-    txt += `\\text{Tape bound} &: |\\text{tape}| \\le |w|`;
-  } else if (m === 'ITM') {
-    const G_str = formatSet([...App.stackAlpha]);
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Gamma \\to Q \\times \\Gamma \\times \\{L, R, S\\} \\\\`;
-    txt += `\\text{Tape index set} &: \\mathbb{Z}`;
+    rows = def('Q, \\Sigma, \\Delta, \\delta, \\lambda, q_0, F', [`\\Delta &= ${D_str}`], [
+      Frow,
+      `\\delta &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\to \\mathcal{P}(Q)`,
+      `\\lambda &: Q \\times (\\Sigma \\cup \\{${eps}\\}) \\times Q \\to \\Delta^*`,
+    ]);
   } else {
-    const G_str = formatSet([...App.stackAlpha]);
-    txt += `M &= (Q, \\Sigma, \\Gamma, \\delta, q_0, F) \\\\`;
-    txt += `Q &= ${Q_str} \\\\`;
-    txt += `\\Sigma &= ${S_str} \\\\`;
-    txt += `\\Gamma &= ${G_str} \\\\`;
-    txt += `q_0 &= ${q0_str} \\\\`;
-    txt += `F &= ${F_str} \\\\`;
-    txt += `\\delta &: Q \\times \\Gamma \\to Q \\times \\Gamma \\times \\{L, R, S\\}`;
+    // Every tape machine: one Γ, one head, one δ into {L, R, S}. What each
+    // adds is its own last line — the arity it runs at, or the bound its tape
+    // is under — so the shared rows are stated once here rather than four
+    // times over. NDTM branches, so its δ lands in P(...).
+    const k = App.tapeCount || 2;
+    const tapeDelta = m === 'NDTM'
+      ? `\\delta &: Q \\times \\Gamma \\to \\mathcal{P}(Q \\times \\Gamma \\times \\{L, R, S\\})`
+      : m === 'MTM'
+        ? `\\delta &: Q \\times \\Gamma^{${k}} \\to Q \\times \\Gamma^{${k}} \\times \\{L, R, S\\}^{${k}}`
+        : `\\delta &: Q \\times \\Gamma \\to Q \\times \\Gamma \\times \\{L, R, S\\}`;
+    const extra = m === 'LBA' ? [`\\text{Tape bound} &: |\\text{tape}| \\le |w|`]
+      : m === 'ITM' ? [`\\text{Tape index set} &: \\mathbb{Z}`]
+        : [];
+    rows = def('Q, \\Sigma, \\Gamma, \\delta, q_0, F', [`\\Gamma &= ${G_str}`], [
+      Frow, tapeDelta, ...extra,
+    ]);
   }
-  txt += ` \\end{aligned} $$`;
 
-  return txt;
+  return `$$ \\begin{aligned} ${rows.join(' \\\\')} \\end{aligned} $$`;
 }
 
 // The formal definition, memoised on the structural change kinds and on the
diff --git a/js/simulation.js b/js/simulation.js
index 0b4bffc..4e2ce1a 100644
--- a/js/simulation.js
+++ b/js/simulation.js
@@ -18,16 +18,16 @@ import { $, App, INPUT_LENGTH_NOTICE, R, detectsLoops, execMode, getMachineConfi
 import { getState, getTransition } from './states-transitions.js';
 import { dismissSymSuggest, trySymSuggestKeydown } from './suggest.js';
 import { escapeHtml, isAnyPDA, isQueueAutomaton, isSingleTapeTM, isTwoStackPDA, parseEps, showStatus } from './utils.js';
-import { decideMachine, machineGuards, parseMachineInput, simulateMachine, streamMachine } from './machines/index.js';
-import { langStepBudget, stateNames } from './machines/runtime.js';
+import { machineGuards, parseMachineInput, streamMachine } from './machines/index.js';
+import { stateNames } from './machines/runtime.js';
 import { computeBatchResults, decideBatchRows, summarizeBatch } from './machines/batch.js';
 import { poolSize, runParallel, shouldParallelize } from './parallel/pool.js';
 import { renderTracker, resetTracker } from './tape-view.js';
 import { isPainterSuppressed, setSimStepPainter, withPainterSuppressed } from './machines/paint.js';
 import { makeRun } from './machines/run.js';
-import { nodeIdAtScope, viewEdgeKeyFor, viewGraph, visibleNodeIdFor } from './view-graph.js';
+import { nodeIdAtScope, viewGraph, visibleNodeIdFor } from './view-graph.js';
 import { boundaryAt, breakScope, resetRunBounds, runSubject } from './run-scope.js';
-import { getBlock, localStateName } from './blocks.js';
+import { getBlock } from './blocks.js';
 
 export function runSim() {
   resetSim();
@@ -670,11 +670,6 @@ export function findSimEdgeGroup(key) {
 // rather than guessed at: an edge *wholly inside* a block is not on screen, and
 // the box standing in for it is already lit by the state half below.
 
-/** The drawn edge a real transition is part of, or null when it is not drawn. */
-function drawnEdgeKey(t) {
-  return t ? viewEdgeKeyFor(t.id) : null;
-}
-
 /** The drawn node a real state is shown by — itself, or the box it is inside. */
 function drawnNodeId(stateId) {
   return visibleNodeIdFor(stateId) || null;
@@ -718,16 +713,6 @@ function simStepTransitions(idx) {
   return [];
 }
 
-export function getNfaSimStepEdgeKeys(idx) {
-  const keyOf = viewGraph().keyOf;
-  const keys = new Set();
-  for (const t of nfaStepTransitions(idx)) {
-    const key = keyOf.get(t.id);
-    if (key) keys.add(key);
-  }
-  return [...keys];
-}
-
 function nfaStepTransitions(idx) {
   const eps = App.config.sym.eps, any = App.config.sym.any;
   const out = [];
diff --git a/js/statemate-agent.js b/js/statemate-agent.js
index b07f214..754b831 100644
--- a/js/statemate-agent.js
+++ b/js/statemate-agent.js
@@ -15,10 +15,7 @@ import {
   isOmegaAutomaton, MIN_TAPES, TAPE_LIMIT } from './state.js';
 import { compileSpec, computeDiff } from './statemate-compile.js';
 import { lintCandidate } from './statemate-lint.js';
-import {
-  MAX_SPEC_STATES, MAX_SPEC_TRANSITIONS, StateMateError, extractSpecJSON,
-  machineToSpec, specTransitionLabel, stateFieldsFor, transitionFieldsFor, validateSpec
-} from './statemate-spec.js';
+import { MAX_SPEC_STATES, MAX_SPEC_TRANSITIONS, StateMateError, extractSpecJSON, machineToSpec, stateFieldsFor, transitionFieldsFor, validateSpec } from './statemate-spec.js';
 import { hasSingleValuedDelta } from './utils.js';
 
 export const MAX_AGENT_STEPS = 16;
@@ -1258,21 +1255,3 @@ export function agentFinishedTurn(session) {
   return { kind: 'reply', text: session.finished.text };
 }
 
-export function agentTrace(session) {
-  return session.calls.map(entry => ({
-    name: entry.call.name,
-    arguments: entry.call.arguments,
-    ok: entry.result.ok,
-    result: entry.result.ok ? entry.result.result : entry.result.error,
-    version: entry.version
-  }));
-}
-
-export function resetAgentSession(session) {
-  if (!session) return;
-  session.checkpoints.clear();
-  session.calls.length = 0;
-  session.finishBlocks = 0;
-  session.unchecked = false;
-  session.finished = null;
-}
diff --git a/js/statemate-prompt.js b/js/statemate-prompt.js
index 4fe613b..96c9c89 100644
--- a/js/statemate-prompt.js
+++ b/js/statemate-prompt.js
@@ -734,7 +734,3 @@ export function starterPrompts(machine = App.machine) {
   ];
 }
 
-/** Every machine name, for the "did you mean a different model" hint. */
-export function knownMachines() {
-  return Object.keys(MachineTypes);
-}
diff --git a/js/statemate-spec.js b/js/statemate-spec.js
index 34de10e..0ffa3ab 100644
--- a/js/statemate-spec.js
+++ b/js/statemate-spec.js
@@ -737,24 +737,6 @@ export function focusIsEmpty(focus) {
   return !focus.states.length && !focus.transitions.length && !focus.notes.length && !focus.words.length;
 }
 
-/**
- * The block tree, as the dialect states it.
- *
- * **A block is addressed by its path**, not by its name, because a name is
- * unique among siblings only — "add" under the ALU and "add" under the FPU are
- * two blocks. That is the same shape a state name already has (inlining writes
- * the path into it), so `CPU/ALU 2` reads beside `CPU/ALU 2/scan` rather than
- * against it.
- *
- * Read from the live records when the source is the canvas and from the
- * source's own when it is not, so a candidate on the bench describes itself
- * rather than whatever happens to be on screen.
- */
-function specBlockRecords(src) {
-  if (Array.isArray(src.blocks)) return src.blocks;
-  return src === null ? [] : liveBlocks();
-}
-
 function pathIndex(blocks, live) {
   if (live) return new Map(blocks.map(b => [b.id, blockPath(b.id)]));
   // A snapshot's records carry local names and parent ids, so the path is
diff --git a/js/statemate.js b/js/statemate.js
index c6df615..9bd4350 100644
--- a/js/statemate.js
+++ b/js/statemate.js
@@ -47,9 +47,7 @@ import {
   executeAgentToolCalls, parseAgentToolTurn, STATEMATE_NATIVE_TOOLS, toolResultsMessage,
   traceCandidateWord
 } from './statemate-agent.js';
-import {
-  MIN_SPEC_TESTS, StateMateError, describeSpecSize, extractSpecJSON, focusIsEmpty, machineToSpec, parseTurn, partialStringField, resolveContextRefs, scopedSource, testKindFor
-} from './statemate-spec.js';
+import { StateMateError, describeSpecSize, extractSpecJSON, focusIsEmpty, machineToSpec, parseTurn, partialStringField, resolveContextRefs, scopedSource, testKindFor } from './statemate-spec.js';
 import { Change, emit } from './store.js';
 import { autoFitLoadedMachine, createTab, fitToScreen, switchTab } from './ui.js';
 import { resetIds, showStatus } from './utils.js';
@@ -354,19 +352,6 @@ export function hasCheckpoint(id) {
   return !!id && checkpoints.has(id);
 }
 
-/** What a checkpoint would restore, for the button that offers it. */
-export function checkpointInfo(id) {
-  const cp = checkpoints.get(id);
-  if (!cp) return null;
-  return {
-    id: cp.id,
-    label: cp.label,
-    at: cp.at,
-    otherTab: !!cp.workspaceId && cp.workspaceId !== activeWorkspaceId,
-    states: cp.state.states?.length || 0
-  };
-}
-
 /**
  * Put the workspace back as it was, as a single undoable step.
  *
@@ -1557,9 +1542,4 @@ export function testHint(machine = App.machine) {
   return '';
 }
 
-/** Sanity check used by the UI before enabling the ask row. */
-export function minimumTests() {
-  return MIN_SPEC_TESTS;
-}
-
 export { showStatus };
diff --git a/js/store.js b/js/store.js
index 36a9f7b..539e9e3 100644
--- a/js/store.js
+++ b/js/store.js
@@ -179,13 +179,6 @@ function deliver(kinds) {
   }
 }
 
-/** Test seam: drop every subscriber. Not used by the app. */
-export function _resetSubscribersForTests() {
-  for (const list of subscribers.values()) list.length = 0;
-  batchDepth = 0;
-  pending = null;
-}
-
 /** Test seam: how many subscribers a kind has. */
 export function _subscriberCount(kind) {
   return (subscribers.get(kind) || []).length;
diff --git a/js/ui.js b/js/ui.js
index 83da76b..7b47443 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,7 +1,7 @@
 import { utmStepBack, utmStepFwd, utmToggleAuto } from './algorithms-fa.js';
 import { renderGamma } from './alphabet.js';
 import { settleAll } from './anim.js';
-import { applyCamera, clampZoom, clearEdgeDirectionHighlight, clearSelection, clearTempLine, copySelection, duplicateSelection, getContentBounds, hideCanvasContextMenu, hlState, minZoom, nudgeSelected, pasteClipboard, selectAllStates, selectionCount, syncSelectionClasses, toggleSnapToGrid, wrap } from './canvas.js';
+import { applyCamera, clampZoom, clearEdgeDirectionHighlight, clearSelection, clearTempLine, copySelection, duplicateSelection, getContentBounds, hideCanvasContextMenu, hlState, nudgeSelected, pasteClipboard, selectAllStates, selectionCount, syncSelectionClasses, toggleSnapToGrid, wrap } from './canvas.js';
 import { blockRemovalIds, getBlock, removeBlock } from './blocks.js';
 import { viewStates } from './view-graph.js';
 import { leaveBlockScope, syncScopeBar } from './scope.js';
@@ -11,7 +11,7 @@ import { markDirty, redo, snapshot, snapshotSettings, trimStowedHistory, undo }
 import { renderMinimap, scheduleMinimap } from './minimap.js';
 import { anyModalOpen, askConfirm, closeModal, registerModal, showOverlay } from './modal.js';
 import { includeNoteBounds, pruneNoteAnchorsExcluding, removeNotes } from './notes.js';
-import { CARD_AUTO_HIDE_MS, hideSaveMenu, restartAutosaveTimer, saveBackupChecked, saveDocumentAs, saveNow, saveWorkspace, saveWorkspaceById } from './persistence.js';
+import { CARD_AUTO_HIDE_MS, hideSaveMenu, restartAutosaveTimer, saveBackupChecked, saveDocumentAs, saveNow, saveWorkspaceById } from './persistence.js';
 import { renderAll, updateBlockList, updateLPanel, updateRPanel } from './render.js';
 import { filterList } from './panel-list.js';
 import {
@@ -33,7 +33,7 @@ import { Change, emit, subscribe } from './store.js';
 import { DEFAULT_THEME, Themes } from './themes.js';
 import { clearAll, escapeHtml, showStatus } from './utils.js';
 import { AUX_VIEWS, applyMachineSwitch, closeAuxView, hideMoreMenu, setMachine, setView, syncTapeCountUI } from './view.js';
-import { hideMobileMore, initMobileShell, setMobileSheetDetent, syncMobileBar, syncMobileTools, syncMobileWorkspaceButton } from './mobile.js';
+import { initMobileShell, syncMobileBar, syncMobileTools, syncMobileWorkspaceButton } from './mobile.js';
 
 subscribe(Change.TABS, renderTabs);
 subscribe(Change.SAVE, updateSaveIndicator);
@@ -938,10 +938,6 @@ export function tabCtxCloseAll() {
 
 document.addEventListener('click', () => hideTabContextMenu());
 
-export function renameTab(id, e) {
-  beginRenameTab(id, e);
-}
-
 export function initTabs() {
   if (Workspaces.length === 0) {
     Workspaces.push({
@@ -1576,77 +1572,63 @@ export function selectTheme(theme) {
 // ══════════════════════════════════════════════════════════════════
 //  ZOOM / FIT / MINIMAP / SIDEBAR / FILTER FUNCTIONS
 // ══════════════════════════════════════════════════════════════════
-export function zoomIn() {
-  const w = $('canvas-wrap'); if (!w) return;
-  const cfg = App.config.zoom;
-  const r = w.getBoundingClientRect();
-  const mx = r.width / 2, my = r.height / 2;
-  const newZ = Math.min(cfg.max, App.cam.z * 1.25);
-  App.cam.x = mx - (mx - App.cam.x) * newZ / App.cam.z;
-  App.cam.y = my - (my - App.cam.y) * newZ / App.cam.z;
-  App.cam.z = newZ;
+// Matches the 0.25s transition `.cam-smooth` declares in css/canvas.css; the
+// class has to come back off once the transition it enables has finished, or
+// the next pan is animated too.
+const CAM_EASE_MS = 250;
+// One press of + or - . The wheel and the pinch are continuous and scale by
+// their own deltas instead.
+const ZOOM_STEP = 1.25;
+
+// The eased repaint every *stepped* zoom ends in — the ± buttons and the zoom
+// field, as against the wheel and the pinch, which are continuous and must not
+// animate. `cam-smooth` goes on both the camera group and the wrapper because
+// the two carry different halves of the transform.
+function easeCamera(w) {
   if (typeof markDirty === 'function') markDirty();
   $('cam-g').classList.add('cam-smooth');
   w.classList.add('cam-smooth');
   applyCamera();
   setTimeout(() => {
-    $('cam-g').classList.remove('cam-smooth')
+    $('cam-g').classList.remove('cam-smooth');
     w.classList.remove('cam-smooth');
-  }, 250);
+  }, CAM_EASE_MS);
 }
 
-export function zoomOut() {
+// Zoom to `z` about the middle of the viewport: the camera moves so the point
+// under the centre stays under it. Written out three times before, and the
+// copies had drifted — two clamped by hand (one of them only at the maximum)
+// where `clampZoom` is the single answer every zoom path is meant to go
+// through, and they disagreed about how to measure the box.
+// `getBoundingClientRect` and `clientWidth` are the same number here, since
+// `.canvas-area` has no border, no padding and `overflow: hidden`.
+function zoomAboutCentre(z) {
   const w = $('canvas-wrap'); if (!w) return;
-  const r = w.getBoundingClientRect();
-  const mx = r.width / 2, my = r.height / 2;
-  const newZ = Math.max(minZoom(), App.cam.z / 1.25);
+  const mx = w.clientWidth / 2, my = w.clientHeight / 2;
+  const newZ = clampZoom(z);
   App.cam.x = mx - (mx - App.cam.x) * newZ / App.cam.z;
   App.cam.y = my - (my - App.cam.y) * newZ / App.cam.z;
   App.cam.z = newZ;
-  if (typeof markDirty === 'function') markDirty();
-  $('cam-g').classList.add('cam-smooth');
-  w.classList.add('cam-smooth');
-  applyCamera();
-  setTimeout(() => {
-    $('cam-g').classList.remove('cam-smooth')
-    w.classList.remove('cam-smooth');
-  }, 250);
+  easeCamera(w);
 }
 
+export function zoomIn() { zoomAboutCentre(App.cam.z * ZOOM_STEP); }
+
+export function zoomOut() { zoomAboutCentre(App.cam.z / ZOOM_STEP); }
+
 export function setZoomFromInput(val) {
   const num = parseFloat(val.replace('%', ''));
-  if (isNaN(num)) {
-    applyCamera(); return;
-  }
+  if (isNaN(num)) { applyCamera(); return; }
+  // Nothing drawn: there is no content to keep under the centre, so this is a
+  // reset to 1:1 rather than a zoom, and it does not go through clampZoom —
+  // an empty canvas has no machine-derived floor to be clamped against.
   if (!App.states.length) {
     const w = $('canvas-wrap'); if (!w) return;
-    const mx = w.clientWidth / 2, my = w.clientHeight / 2;
-    App.cam = { x: mx, y: my, z: 1 };
-    if (typeof markDirty === 'function') markDirty();
-    $('cam-g').classList.add('cam-smooth');
-    w.classList.add('cam-smooth');
-    applyCamera();
-    setTimeout(() => {
-      $('cam-g').classList.remove('cam-smooth')
-      w.classList.remove('cam-smooth');
-    }, 250);
+    App.cam = { x: w.clientWidth / 2, y: w.clientHeight / 2, z: 1 };
+    easeCamera(w);
     return;
   }
-  const w = $('canvas-wrap'); if (!w) return;
-  const newZ = clampZoom(num / 100);
-
-  const mx = w.clientWidth / 2, my = w.clientHeight / 2;
-  App.cam.x = mx - (mx - App.cam.x) * newZ / App.cam.z;
-  App.cam.y = my - (my - App.cam.y) * newZ / App.cam.z;
-  App.cam.z = newZ;
-  if (typeof markDirty === 'function') markDirty();
-  $('cam-g').classList.add('cam-smooth');
-  w.classList.add('cam-smooth');
-  applyCamera();
-  setTimeout(() => {
-    $('cam-g').classList.remove('cam-smooth')
-    w.classList.remove('cam-smooth');
-  }, 250);
+  zoomAboutCentre(num / 100);
 }
 
 // The canvas spans the full width of the workspace, but a pinned panel sits
diff --git a/js/utils.js b/js/utils.js
index d3e6bac..754f1e0 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,7 +1,6 @@
 import { closeModal, showOverlay } from './modal.js';
 import { clearRunScope } from './run-scope.js';
 import { showExampleCard } from './persistence.js';
-import { renderAll, updateLPanel, updateRPanel } from './render.js';
 import { resetSim } from './simulation.js';
 import { $, App, blankWorkspaceData, importWorkspaceState } from './state.js';
 import { Change, emit } from './store.js';
diff --git a/js/view-graph.js b/js/view-graph.js
index f783304..25f2b5a 100644
--- a/js/view-graph.js
+++ b/js/view-graph.js
@@ -214,7 +214,6 @@ export function viewTransitions() { return viewGraph().transitions; }
 /** A drawn node by id — a state, a block box or a port. */
 export function getNode(id) { return viewGraph().byId.get(id) || null; }
 
-export function isBlockNode(n) { return !!n && n.kind === 'block'; }
 export function isPortNode(n) { return !!n && n.kind === 'port'; }
 
 /**
diff --git a/js/viewport.js b/js/viewport.js
index 61f4d57..6119f80 100644
--- a/js/viewport.js
+++ b/js/viewport.js
@@ -43,9 +43,6 @@ const CULL_MARGIN_SCREENS = 1;
 
 let suspended = 0;
 
-/** True while an exporter (or anything else reading the DOM back) needs it whole. */
-export function cullSuspended() { return suspended > 0; }
-
 /**
  * Runs `fn` with culling off. The caller is responsible for repainting first —
  * render.js's withFullRender does that and is what callers actually use.
diff --git a/js/wizard.js b/js/wizard.js
index 45f7674..892aa9f 100644
--- a/js/wizard.js
+++ b/js/wizard.js
@@ -694,17 +694,6 @@ export function stepIssues(draft, stepId) {
   return out;
 }
 
-/** Every issue in the draft, step by step. */
-export function draftIssues(draft) {
-  return wizardSteps(draft.machine).flatMap(s =>
-    stepIssues(draft, s.id).map(i => ({ ...i, step: s.id })));
-}
-
-/** Can this step be left? Warnings never stop anyone. */
-export function stepIsComplete(draft, stepId) {
-  return !stepIssues(draft, stepId).some(i => i.severity === 'error');
-}
-
 // ══════════════════════════════════════════════════════════════════
 //  DRAFT → SPEC
 // ══════════════════════════════════════════════════════════════════
diff --git a/js/workspace.js b/js/workspace.js
index 75a8505..86b483c 100644
--- a/js/workspace.js
+++ b/js/workspace.js
@@ -1,7 +1,6 @@
 import { renderAlgo } from './algorithms-fa.js';
 import { snapshot } from './history.js';
 import { registerModal, showOverlay } from './modal.js';
-import { renderAll, updateLPanel, updateRPanel } from './render.js';
 import { $, APP_VERSION, App } from './state.js';
 import { Change, emit } from './store.js';
 import { autoFitLoadedMachine, fitToScreen, switchHelpTab } from './ui.js';
diff --git a/tests/themes.test.js b/tests/themes.test.js
index 89ab5c1..73e8823 100644
--- a/tests/themes.test.js
+++ b/tests/themes.test.js
@@ -151,7 +151,7 @@ test('soft and border tokens derive from their own theme\'s base colour', () =>
     ['--orange', '--orange-soft'], ['--orange', '--orange-border'],
     ['--accent', '--accent-soft'], ['--accent', '--accent-border'],
     ['--accent', '--accent-border-strong'], ['--accent', '--focus-ring'],
-    ['--accent', '--state-active-fill'], ['--accent', '--minimap-viewport'],
+    ['--accent', '--state-active-fill'],
   ];
   for (const id of [DEFAULT_THEME, ...cssThemeIds]) {
     const { vars } = themeBlock(id);
@@ -164,6 +164,20 @@ test('soft and border tokens derive from their own theme\'s base colour', () =>
   }
 });
 
+test('the minimap viewport frame is its own theme\'s accent', () => {
+  // The minimap paints from the `Themes` registry rather than from CSS, so
+  // this is the value on screen -- there is no `--minimap-viewport` to read.
+  // Same reasoning as the soft/border pairs above: retune --accent and the
+  // frame drifts off the theme it is framing.
+  for (const id of [DEFAULT_THEME, ...cssThemeIds]) {
+    const stroke = Themes[id].export.viewportStroke;
+    const channels = stroke.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    assert.ok(channels, `${id} viewportStroke should be an rgba() of --accent`);
+    assert.deepEqual(channels.slice(1, 4).map(Number), rgbOf(themeBlock(id).vars['--accent']),
+      `${id}: viewportStroke must be derived from --accent`);
+  }
+});
+
 test('the start and accepting rings stay visible against the state fill', () => {
   // These two rings are the only thing distinguishing a start or final
   // state, and they are drawn by the canvas from the JS palette -- so a