diff --git a/lib/v4-lab-colors.css b/lib/v4-lab-colors.css
new file mode 100644
index 0000000..575f724
--- /dev/null
+++ b/lib/v4-lab-colors.css
@@ -0,0 +1,21 @@
+:root {
+ --background-color: #F9FAFB; /* very light gray with slight blue */
+ --text-color: #1F2937; /* dark slate gray */
+ --text-background: #FFFFFF; /* pure white */
+ --text-disabled: #AAAAAA; /* a grey */
+ --border-color: #D1D5DB; /* soft gray */
+ --box-background: #FFFFFF; /* pure white */
+ --box-border: #E5E7EB; /* light gray */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background-color: #1E1E2F; /* deep navy purple */
+ --text-color: #E0E0E0; /* light gray */
+ --text-background: #2C2C3C; /* dark slate */
+ --text-disabled: #686868; /* a darker grey */
+ --border-color: #3F3F4F; /* soft border gray-blue */
+ --box-background: #2A2A3B; /* muted purple-gray */
+ --box-border: #444456; /* subtle border */
+ }
+}
diff --git a/lib/v4-lab.css b/lib/v4-lab.css
new file mode 100644
index 0000000..c7c71f9
--- /dev/null
+++ b/lib/v4-lab.css
@@ -0,0 +1,123 @@
+@import url("v4-lab-colors.css");
+
+/* Global Body Style */
+body {
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
+
+.MJX_LiveRegion_Show {
+ font-size: 150%;
+/* box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
+ 0 0 .5px 1.5px hsla(230, 13%, 9%, 0.075),
+ 5px 8px 10px hsla(230, 13%, 9%, 0.09) ! important;*/
+}
+h1 {
+ margin-left: 1.5em;
+ margin-top: .25em;
+}
+body {
+ min-height: 50em;
+}
+#layout {
+ padding-left: .5em;
+ display: table;
+ width: 100%;
+ box-sizing: border-box;
+ min-height: 20em;
+}
+#layout > div {
+ display: table-row;
+}
+#layout > div > div {
+ display: table-cell;
+ vertical-align: top;
+}
+#layout > div > div:last-child {
+ width: 18.5em;
+ max-width: 18.5em;
+}
+
+#main {
+ display: inline-block;
+}
+#input {
+ width: 100%;
+ box-sizing: border-box;
+ border: 2px solid var(--border-color);
+ background-color: var(--box-background);
+ color: var(--text-color);
+ border-radius: 6px;
+ padding: 2px 4px;
+}
+#buttons {
+ text-align: right;
+ margin-top: 3px;
+ margin-bottom: 1em;
+}
+.output {
+ border: 2px solid var(--border-color);
+ background-color: var(--box-background);
+ border-radius: 6px;
+ padding: 10px;
+ width: 100%;
+ max-width: 45em;
+ overflow: auto;
+ box-sizing: border-box;
+ font-size: 150%;
+}
+#mathml {
+ margin-top: 1.1em;
+ font-size: 90%;
+ width: 0;
+}
+
+#controls {
+ padding-left: 1em;
+ font-size: 80%;
+}
+#controls > div,
+#controls details > div {
+ margin-bottom: .5em;
+ white-space: nowrap;
+}
+#controls details details {
+ margin-left: 1em;
+}
+summary + * {
+ margin-top: .5em;
+}
+#controls > hr {
+ border: none;
+ border-top: 2px dotted;
+ margin: .7em 1em .7em 0;
+}
+#mml-package,
+#tex-package,
+#text-package {
+ column-count: 2;
+ white-space: normal ! important;
+}
+#mml-package > span > span,
+#tex-package > span > span,
+#text-package > span > span {
+ display: inline-block;
+ width: 9em;
+ white-space: nowrap;
+}
+#mml-package label,
+#tex-package label,
+#text-package label {
+ padding-left: 5px;
+}
+
+#output-details label:first-child,
+#texinput-details label:first-child {
+ display: inline-block;
+ min-width: 7em;
+ text-align: right;
+}
+
+input[disabled] + label {
+ color: var(--text-disabled);
+}
diff --git a/v4-lab.html b/v4-lab.html
index e5b4e98..606c888 100644
--- a/v4-lab.html
+++ b/v4-lab.html
@@ -2,6 +2,7 @@
+
MathJax v4 Interactive Lab
-