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
`;
}
-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 = `Branch ${branches}: ACCEPT ✓`;
- const subs = [];
- subs.push(`State "${stateName}" is an accept state — computation halts`);
- subs.push(`Reached at depth ${depth} · ID: ${idStr}`);
- log.push(main + `${subs.join('
')}`);
- break;
- }
-
- if (depth >= 150) {
- let main = `Branch ${branches}: cut off (depth limit)`;
- const subs = [];
- subs.push(`Depth ${depth} ≥ 150 — pruning this branch to prevent infinite exploration`);
- subs.push(`ID: ${idStr}`);
- log.push(main + `${subs.join('
')}`);
- 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}: stuck (no transition)`;
- 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 + `${subs.join('
')}`);
- 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 ${stateName}`;
- const subs = [];
- subs.push(`Read '${sym}' at head position ${head} · depth ${depth}`);
- if (matching.length > 1) {
- subs.push(`Nondeterministic choice: ${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 + `${subs.join('
')}`);
- }
- 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 8eb1ec5..3d0e7e5 100644
Binary files a/js/file-host.js and b/js/file-host.js differ
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 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