@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/themes.css

@@ -0,0 +1,2431 @@
+/* css/themes/black-green.css */
+/* Stepbro theme "black-green" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="black-green"] {
+  color-scheme: light;
+  --md-sys-color-background: #f9faf3;
+  --md-sys-color-on-background: #191c18;
+  --md-sys-color-surface: #f9faf3;
+  --md-sys-color-surface-dim: #d9dbd4;
+  --md-sys-color-surface-bright: #f9faf3;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f3f4ed;
+  --md-sys-color-surface-container: #edefe8;
+  --md-sys-color-surface-container-high: #e7e9e2;
+  --md-sys-color-surface-container-highest: #e2e3dc;
+  --md-sys-color-on-surface: #191c18;
+  --md-sys-color-surface-variant: #dee5d8;
+  --md-sys-color-on-surface-variant: #42493f;
+  --md-sys-color-inverse-surface: #2e312d;
+  --md-sys-color-inverse-on-surface: #f0f1ea;
+  --md-sys-color-outline: #72796e;
+  --md-sys-color-outline-variant: #c1c9bc;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #3b6939;
+  --md-sys-color-primary: #001c03;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #113f14;
+  --md-sys-color-on-primary-container: #a1d499;
+  --md-sys-color-inverse-primary: #a0d499;
+  --md-sys-color-secondary: #50634d;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #d7edd0;
+  --md-sys-color-on-secondary-container: #3d4f3a;
+  --md-sys-color-tertiary: #001734;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #153663;
+  --md-sys-color-on-tertiary-container: #aac7fc;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="black-green"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="black-green"] {
+  color-scheme: dark;
+  --md-sys-color-background: #111410;
+  --md-sys-color-on-background: #e2e3dc;
+  --md-sys-color-surface: #111410;
+  --md-sys-color-surface-dim: #111410;
+  --md-sys-color-surface-bright: #373a35;
+  --md-sys-color-surface-container-lowest: #0c0f0b;
+  --md-sys-color-surface-container-low: #191c18;
+  --md-sys-color-surface-container: #1e201c;
+  --md-sys-color-surface-container-high: #282b26;
+  --md-sys-color-surface-container-highest: #333631;
+  --md-sys-color-on-surface: #e2e3dc;
+  --md-sys-color-surface-variant: #42493f;
+  --md-sys-color-on-surface-variant: #c1c9bc;
+  --md-sys-color-inverse-surface: #e2e3dc;
+  --md-sys-color-inverse-on-surface: #2e312d;
+  --md-sys-color-outline: #8c9387;
+  --md-sys-color-outline-variant: #42493f;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #a0d499;
+  --md-sys-color-primary: #a0d499;
+  --md-sys-color-on-primary: #09390f;
+  --md-sys-color-primary-container: #002605;
+  --md-sys-color-on-primary-container: #85b77f;
+  --md-sys-color-inverse-primary: #3b6939;
+  --md-sys-color-secondary: #b7cdb1;
+  --md-sys-color-on-secondary: #233521;
+  --md-sys-color-secondary-container: #344631;
+  --md-sys-color-on-secondary-container: #c8ddc1;
+  --md-sys-color-tertiary: #aac7fd;
+  --md-sys-color-on-tertiary: #0c305c;
+  --md-sys-color-tertiary-container: #002045;
+  --md-sys-color-on-tertiary-container: #8face0;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="black-green"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="black-green"] {
+    color-scheme: dark;
+    --md-sys-color-background: #111410;
+    --md-sys-color-on-background: #e2e3dc;
+    --md-sys-color-surface: #111410;
+    --md-sys-color-surface-dim: #111410;
+    --md-sys-color-surface-bright: #373a35;
+    --md-sys-color-surface-container-lowest: #0c0f0b;
+    --md-sys-color-surface-container-low: #191c18;
+    --md-sys-color-surface-container: #1e201c;
+    --md-sys-color-surface-container-high: #282b26;
+    --md-sys-color-surface-container-highest: #333631;
+    --md-sys-color-on-surface: #e2e3dc;
+    --md-sys-color-surface-variant: #42493f;
+    --md-sys-color-on-surface-variant: #c1c9bc;
+    --md-sys-color-inverse-surface: #e2e3dc;
+    --md-sys-color-inverse-on-surface: #2e312d;
+    --md-sys-color-outline: #8c9387;
+    --md-sys-color-outline-variant: #42493f;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #a0d499;
+    --md-sys-color-primary: #a0d499;
+    --md-sys-color-on-primary: #09390f;
+    --md-sys-color-primary-container: #002605;
+    --md-sys-color-on-primary-container: #85b77f;
+    --md-sys-color-inverse-primary: #3b6939;
+    --md-sys-color-secondary: #b7cdb1;
+    --md-sys-color-on-secondary: #233521;
+    --md-sys-color-secondary-container: #344631;
+    --md-sys-color-on-secondary-container: #c8ddc1;
+    --md-sys-color-tertiary: #aac7fd;
+    --md-sys-color-on-tertiary: #0c305c;
+    --md-sys-color-tertiary-container: #002045;
+    --md-sys-color-on-tertiary-container: #8face0;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/black.css */
+/* Stepbro theme "black" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="black"] {
+  color-scheme: light;
+  --md-sys-color-background: #fbf9fc;
+  --md-sys-color-on-background: #1b1b1e;
+  --md-sys-color-surface: #fbf9fc;
+  --md-sys-color-surface-dim: #dbd9dc;
+  --md-sys-color-surface-bright: #fbf9fc;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f5f3f6;
+  --md-sys-color-surface-container: #efedf0;
+  --md-sys-color-surface-container-high: #e9e7ea;
+  --md-sys-color-surface-container-highest: #e4e2e5;
+  --md-sys-color-on-surface: #1b1b1e;
+  --md-sys-color-surface-variant: #e1e2eb;
+  --md-sys-color-on-surface-variant: #44474e;
+  --md-sys-color-inverse-surface: #303033;
+  --md-sys-color-inverse-on-surface: #f2f0f3;
+  --md-sys-color-outline: #75777e;
+  --md-sys-color-outline-variant: #c5c6ce;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #4d5f80;
+  --md-sys-color-primary: #000000;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #000000;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #b4c7ed;
+  --md-sys-color-secondary: #585e6d;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #e0e6f8;
+  --md-sys-color-on-secondary-container: #444a58;
+  --md-sys-color-tertiary: #000000;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #311e3e;
+  --md-sys-color-on-tertiary-container: #c2a8d1;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="black"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="black"] {
+  color-scheme: dark;
+  --md-sys-color-background: #131316;
+  --md-sys-color-on-background: #e4e2e5;
+  --md-sys-color-surface: #131316;
+  --md-sys-color-surface-dim: #131316;
+  --md-sys-color-surface-bright: #39393c;
+  --md-sys-color-surface-container-lowest: #0d0e10;
+  --md-sys-color-surface-container-low: #1b1b1e;
+  --md-sys-color-surface-container: #1f1f22;
+  --md-sys-color-surface-container-high: #292a2c;
+  --md-sys-color-surface-container-highest: #343537;
+  --md-sys-color-on-surface: #e4e2e5;
+  --md-sys-color-surface-variant: #44474e;
+  --md-sys-color-on-surface-variant: #c5c6ce;
+  --md-sys-color-inverse-surface: #e4e2e5;
+  --md-sys-color-inverse-on-surface: #303033;
+  --md-sys-color-outline: #8e9098;
+  --md-sys-color-outline-variant: #44474e;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #b4c7ed;
+  --md-sys-color-primary: #b4c7ed;
+  --md-sys-color-on-primary: #1e304f;
+  --md-sys-color-primary-container: #b4c7ed;
+  --md-sys-color-on-primary-container: #1e304f;
+  --md-sys-color-inverse-primary: #4d5f80;
+  --md-sys-color-secondary: #c0c6d7;
+  --md-sys-color-on-secondary: #2a313e;
+  --md-sys-color-secondary-container: #373d4b;
+  --md-sys-color-on-secondary-container: #cad0e2;
+  --md-sys-color-tertiary: #d9bde7;
+  --md-sys-color-on-tertiary: #3c2849;
+  --md-sys-color-tertiary-container: #190626;
+  --md-sys-color-on-tertiary-container: #ae94bc;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="black"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="black"] {
+    color-scheme: dark;
+    --md-sys-color-background: #131316;
+    --md-sys-color-on-background: #e4e2e5;
+    --md-sys-color-surface: #131316;
+    --md-sys-color-surface-dim: #131316;
+    --md-sys-color-surface-bright: #39393c;
+    --md-sys-color-surface-container-lowest: #0d0e10;
+    --md-sys-color-surface-container-low: #1b1b1e;
+    --md-sys-color-surface-container: #1f1f22;
+    --md-sys-color-surface-container-high: #292a2c;
+    --md-sys-color-surface-container-highest: #343537;
+    --md-sys-color-on-surface: #e4e2e5;
+    --md-sys-color-surface-variant: #44474e;
+    --md-sys-color-on-surface-variant: #c5c6ce;
+    --md-sys-color-inverse-surface: #e4e2e5;
+    --md-sys-color-inverse-on-surface: #303033;
+    --md-sys-color-outline: #8e9098;
+    --md-sys-color-outline-variant: #44474e;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #b4c7ed;
+    --md-sys-color-primary: #b4c7ed;
+    --md-sys-color-on-primary: #1e304f;
+    --md-sys-color-primary-container: #b4c7ed;
+    --md-sys-color-on-primary-container: #1e304f;
+    --md-sys-color-inverse-primary: #4d5f80;
+    --md-sys-color-secondary: #c0c6d7;
+    --md-sys-color-on-secondary: #2a313e;
+    --md-sys-color-secondary-container: #373d4b;
+    --md-sys-color-on-secondary-container: #cad0e2;
+    --md-sys-color-tertiary: #d9bde7;
+    --md-sys-color-on-tertiary: #3c2849;
+    --md-sys-color-tertiary-container: #190626;
+    --md-sys-color-on-tertiary-container: #ae94bc;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/blue.css */
+/* Stepbro theme "blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="blue"] {
+  color-scheme: light;
+  --md-sys-color-background: #faf8ff;
+  --md-sys-color-on-background: #191b24;
+  --md-sys-color-surface: #faf8ff;
+  --md-sys-color-surface-dim: #d8d9e6;
+  --md-sys-color-surface-bright: #faf8ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f2f3ff;
+  --md-sys-color-surface-container: #ecedfa;
+  --md-sys-color-surface-container-high: #e6e7f4;
+  --md-sys-color-surface-container-highest: #e1e2ee;
+  --md-sys-color-on-surface: #191b24;
+  --md-sys-color-surface-variant: #dee2f5;
+  --md-sys-color-on-surface-variant: #424656;
+  --md-sys-color-inverse-surface: #2e303a;
+  --md-sys-color-inverse-on-surface: #eff0fd;
+  --md-sys-color-outline: #727687;
+  --md-sys-color-outline-variant: #c2c6d8;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #0054d6;
+  --md-sys-color-primary: #0045b2;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #0066ff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #b3c5ff;
+  --md-sys-color-secondary: #425ca0;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #a9beff;
+  --md-sys-color-on-secondary-container: #0c2d6f;
+  --md-sys-color-tertiary: #8102a7;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ab3fcf;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="blue"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="blue"] {
+  color-scheme: dark;
+  --md-sys-color-background: #10131c;
+  --md-sys-color-on-background: #e1e2ee;
+  --md-sys-color-surface: #10131c;
+  --md-sys-color-surface-dim: #10131c;
+  --md-sys-color-surface-bright: #363943;
+  --md-sys-color-surface-container-lowest: #0b0e16;
+  --md-sys-color-surface-container-low: #191b24;
+  --md-sys-color-surface-container: #1d1f28;
+  --md-sys-color-surface-container-high: #272a33;
+  --md-sys-color-surface-container-highest: #32343e;
+  --md-sys-color-on-surface: #e1e2ee;
+  --md-sys-color-surface-variant: #424656;
+  --md-sys-color-on-surface-variant: #c2c6d8;
+  --md-sys-color-inverse-surface: #e1e2ee;
+  --md-sys-color-inverse-on-surface: #2e303a;
+  --md-sys-color-outline: #8c90a1;
+  --md-sys-color-outline-variant: #424656;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #b3c5ff;
+  --md-sys-color-primary: #b3c5ff;
+  --md-sys-color-on-primary: #002b75;
+  --md-sys-color-primary-container: #005eeb;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #0054d6;
+  --md-sys-color-secondary: #b3c5ff;
+  --md-sys-color-on-secondary: #0a2c6e;
+  --md-sys-color-secondary-container: #1c397b;
+  --md-sys-color-on-secondary-container: #c1cfff;
+  --md-sys-color-tertiary: #f0b0ff;
+  --md-sys-color-on-tertiary: #54006d;
+  --md-sys-color-tertiary-container: #a235c6;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="blue"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="blue"] {
+    color-scheme: dark;
+    --md-sys-color-background: #10131c;
+    --md-sys-color-on-background: #e1e2ee;
+    --md-sys-color-surface: #10131c;
+    --md-sys-color-surface-dim: #10131c;
+    --md-sys-color-surface-bright: #363943;
+    --md-sys-color-surface-container-lowest: #0b0e16;
+    --md-sys-color-surface-container-low: #191b24;
+    --md-sys-color-surface-container: #1d1f28;
+    --md-sys-color-surface-container-high: #272a33;
+    --md-sys-color-surface-container-highest: #32343e;
+    --md-sys-color-on-surface: #e1e2ee;
+    --md-sys-color-surface-variant: #424656;
+    --md-sys-color-on-surface-variant: #c2c6d8;
+    --md-sys-color-inverse-surface: #e1e2ee;
+    --md-sys-color-inverse-on-surface: #2e303a;
+    --md-sys-color-outline: #8c90a1;
+    --md-sys-color-outline-variant: #424656;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #b3c5ff;
+    --md-sys-color-primary: #b3c5ff;
+    --md-sys-color-on-primary: #002b75;
+    --md-sys-color-primary-container: #005eeb;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #0054d6;
+    --md-sys-color-secondary: #b3c5ff;
+    --md-sys-color-on-secondary: #0a2c6e;
+    --md-sys-color-secondary-container: #1c397b;
+    --md-sys-color-on-secondary-container: #c1cfff;
+    --md-sys-color-tertiary: #f0b0ff;
+    --md-sys-color-on-tertiary: #54006d;
+    --md-sys-color-tertiary-container: #a235c6;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/brown.css */
+/* Stepbro theme "brown" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="brown"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff8f5;
+  --md-sys-color-on-background: #241912;
+  --md-sys-color-surface: #fff8f5;
+  --md-sys-color-surface-dim: #ebd6ca;
+  --md-sys-color-surface-bright: #fff8f5;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fff1e9;
+  --md-sys-color-surface-container: #ffeade;
+  --md-sys-color-surface-container-high: #f9e4d8;
+  --md-sys-color-surface-container-highest: #f3dfd2;
+  --md-sys-color-on-surface: #241912;
+  --md-sys-color-surface-variant: #fbddca;
+  --md-sys-color-on-surface-variant: #564335;
+  --md-sys-color-inverse-surface: #3a2e26;
+  --md-sys-color-inverse-on-surface: #ffede4;
+  --md-sys-color-outline: #8a7263;
+  --md-sys-color-outline-variant: #ddc1af;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #944b00;
+  --md-sys-color-primary: #944b00;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #ff9947;
+  --md-sys-color-on-primary-container: #411d00;
+  --md-sys-color-inverse-primary: #ffb783;
+  --md-sys-color-secondary: #865229;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #ffc196;
+  --md-sys-color-on-secondary-container: #5c3009;
+  --md-sys-color-tertiary: #5c6300;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #afbc17;
+  --md-sys-color-on-tertiary-container: #262a00;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="brown"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="brown"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1b110a;
+  --md-sys-color-on-background: #f3dfd2;
+  --md-sys-color-surface: #1b110a;
+  --md-sys-color-surface-dim: #1b110a;
+  --md-sys-color-surface-bright: #43372e;
+  --md-sys-color-surface-container-lowest: #150c06;
+  --md-sys-color-surface-container-low: #241912;
+  --md-sys-color-surface-container: #281d16;
+  --md-sys-color-surface-container-high: #332820;
+  --md-sys-color-surface-container-highest: #3f322a;
+  --md-sys-color-on-surface: #f3dfd2;
+  --md-sys-color-surface-variant: #564335;
+  --md-sys-color-on-surface-variant: #ddc1af;
+  --md-sys-color-inverse-surface: #f3dfd2;
+  --md-sys-color-inverse-on-surface: #3a2e26;
+  --md-sys-color-outline: #a58c7c;
+  --md-sys-color-outline-variant: #564335;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffb783;
+  --md-sys-color-primary: #ffbc8d;
+  --md-sys-color-on-primary: #4f2500;
+  --md-sys-color-primary-container: #f7830f;
+  --md-sys-color-on-primary-container: #280f00;
+  --md-sys-color-inverse-primary: #944b00;
+  --md-sys-color-secondary: #fdb886;
+  --md-sys-color-on-secondary: #4f2501;
+  --md-sys-color-secondary-container: #62340d;
+  --md-sys-color-on-secondary-container: #ffcaa6;
+  --md-sys-color-tertiary: #c5d333;
+  --md-sys-color-on-tertiary: #2f3300;
+  --md-sys-color-tertiary-container: #9da900;
+  --md-sys-color-on-tertiary-container: #141700;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="brown"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="brown"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1b110a;
+    --md-sys-color-on-background: #f3dfd2;
+    --md-sys-color-surface: #1b110a;
+    --md-sys-color-surface-dim: #1b110a;
+    --md-sys-color-surface-bright: #43372e;
+    --md-sys-color-surface-container-lowest: #150c06;
+    --md-sys-color-surface-container-low: #241912;
+    --md-sys-color-surface-container: #281d16;
+    --md-sys-color-surface-container-high: #332820;
+    --md-sys-color-surface-container-highest: #3f322a;
+    --md-sys-color-on-surface: #f3dfd2;
+    --md-sys-color-surface-variant: #564335;
+    --md-sys-color-on-surface-variant: #ddc1af;
+    --md-sys-color-inverse-surface: #f3dfd2;
+    --md-sys-color-inverse-on-surface: #3a2e26;
+    --md-sys-color-outline: #a58c7c;
+    --md-sys-color-outline-variant: #564335;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #ffb783;
+    --md-sys-color-primary: #ffbc8d;
+    --md-sys-color-on-primary: #4f2500;
+    --md-sys-color-primary-container: #f7830f;
+    --md-sys-color-on-primary-container: #280f00;
+    --md-sys-color-inverse-primary: #944b00;
+    --md-sys-color-secondary: #fdb886;
+    --md-sys-color-on-secondary: #4f2501;
+    --md-sys-color-secondary-container: #62340d;
+    --md-sys-color-on-secondary-container: #ffcaa6;
+    --md-sys-color-tertiary: #c5d333;
+    --md-sys-color-on-tertiary: #2f3300;
+    --md-sys-color-tertiary-container: #9da900;
+    --md-sys-color-on-tertiary-container: #141700;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/cold-blue.css */
+/* Stepbro theme "cold-blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="cold-blue"] {
+  color-scheme: light;
+  --md-sys-color-background: #f6faff;
+  --md-sys-color-on-background: #171c21;
+  --md-sys-color-surface: #f6faff;
+  --md-sys-color-surface-dim: #d5dae1;
+  --md-sys-color-surface-bright: #f6faff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #eff4fa;
+  --md-sys-color-surface-container: #e9eef4;
+  --md-sys-color-surface-container-high: #e4e9ef;
+  --md-sys-color-surface-container-highest: #dee3e9;
+  --md-sys-color-on-surface: #171c21;
+  --md-sys-color-surface-variant: #d9e4ee;
+  --md-sys-color-on-surface-variant: #3e4850;
+  --md-sys-color-inverse-surface: #2c3136;
+  --md-sys-color-inverse-on-surface: #ecf1f7;
+  --md-sys-color-outline: #6e7882;
+  --md-sys-color-outline-variant: #bdc8d2;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006590;
+  --md-sys-color-primary: #006590;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #55c0ff;
+  --md-sys-color-on-primary-container: #002d44;
+  --md-sys-color-inverse-primary: #87ceff;
+  --md-sys-color-secondary: #39637e;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #bbe1ff;
+  --md-sys-color-on-secondary-container: #1b4863;
+  --md-sys-color-tertiary: #8440a4;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #e099ff;
+  --md-sys-color-on-tertiary-container: #450063;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="cold-blue"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="cold-blue"] {
+  color-scheme: dark;
+  --md-sys-color-background: #0f1418;
+  --md-sys-color-on-background: #dee3e9;
+  --md-sys-color-surface: #0f1418;
+  --md-sys-color-surface-dim: #0f1418;
+  --md-sys-color-surface-bright: #343a3f;
+  --md-sys-color-surface-container-lowest: #090f13;
+  --md-sys-color-surface-container-low: #171c21;
+  --md-sys-color-surface-container: #1b2025;
+  --md-sys-color-surface-container-high: #252b2f;
+  --md-sys-color-surface-container-highest: #30353a;
+  --md-sys-color-on-surface: #dee3e9;
+  --md-sys-color-surface-variant: #3e4850;
+  --md-sys-color-on-surface-variant: #bdc8d2;
+  --md-sys-color-inverse-surface: #dee3e9;
+  --md-sys-color-inverse-on-surface: #2c3136;
+  --md-sys-color-outline: #87929c;
+  --md-sys-color-outline-variant: #3e4850;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #87ceff;
+  --md-sys-color-primary: #96d3ff;
+  --md-sys-color-on-primary: #00344d;
+  --md-sys-color-primary-container: #00aef5;
+  --md-sys-color-on-primary-container: #001b2a;
+  --md-sys-color-inverse-primary: #006590;
+  --md-sys-color-secondary: #a2cceb;
+  --md-sys-color-on-secondary: #00344d;
+  --md-sys-color-secondary-container: #15445e;
+  --md-sys-color-on-secondary-container: #b0dafa;
+  --md-sys-color-tertiary: #edbdff;
+  --md-sys-color-on-tertiary: #500372;
+  --md-sys-color-tertiary-container: #d188f2;
+  --md-sys-color-on-tertiary-container: #2f0045;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="cold-blue"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="cold-blue"] {
+    color-scheme: dark;
+    --md-sys-color-background: #0f1418;
+    --md-sys-color-on-background: #dee3e9;
+    --md-sys-color-surface: #0f1418;
+    --md-sys-color-surface-dim: #0f1418;
+    --md-sys-color-surface-bright: #343a3f;
+    --md-sys-color-surface-container-lowest: #090f13;
+    --md-sys-color-surface-container-low: #171c21;
+    --md-sys-color-surface-container: #1b2025;
+    --md-sys-color-surface-container-high: #252b2f;
+    --md-sys-color-surface-container-highest: #30353a;
+    --md-sys-color-on-surface: #dee3e9;
+    --md-sys-color-surface-variant: #3e4850;
+    --md-sys-color-on-surface-variant: #bdc8d2;
+    --md-sys-color-inverse-surface: #dee3e9;
+    --md-sys-color-inverse-on-surface: #2c3136;
+    --md-sys-color-outline: #87929c;
+    --md-sys-color-outline-variant: #3e4850;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #87ceff;
+    --md-sys-color-primary: #96d3ff;
+    --md-sys-color-on-primary: #00344d;
+    --md-sys-color-primary-container: #00aef5;
+    --md-sys-color-on-primary-container: #001b2a;
+    --md-sys-color-inverse-primary: #006590;
+    --md-sys-color-secondary: #a2cceb;
+    --md-sys-color-on-secondary: #00344d;
+    --md-sys-color-secondary-container: #15445e;
+    --md-sys-color-on-secondary-container: #b0dafa;
+    --md-sys-color-tertiary: #edbdff;
+    --md-sys-color-on-tertiary: #500372;
+    --md-sys-color-tertiary-container: #d188f2;
+    --md-sys-color-on-tertiary-container: #2f0045;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/funny.css */
+/* Stepbro theme "funny" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="funny"] {
+  color-scheme: light;
+  --md-sys-color-background: #f8fcff;
+  --md-sys-color-on-background: #001f25;
+  --md-sys-color-surface: #f8fcff;
+  --md-sys-color-surface-dim: #d8dade;
+  --md-sys-color-surface-bright: #f8fcff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #eaf8fb;
+  --md-sys-color-surface-container: #e0f1f6;
+  --md-sys-color-surface-container-high: #d6eaf0;
+  --md-sys-color-surface-container-highest: #cce4eb;
+  --md-sys-color-on-surface: #001f25;
+  --md-sys-color-surface-variant: #d8e4e7;
+  --md-sys-color-on-surface-variant: #3f484b;
+  --md-sys-color-inverse-surface: #2b3133;
+  --md-sys-color-inverse-on-surface: #f0f1f1;
+  --md-sys-color-outline: #70797c;
+  --md-sys-color-outline-variant: #bfc8cc;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006874;
+  --md-sys-color-primary: #006874;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #9af0ff;
+  --md-sys-color-on-primary-container: #001f25;
+  --md-sys-color-inverse-primary: #4fd8eb;
+  --md-sys-color-secondary: #6e55b3;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #eaddff;
+  --md-sys-color-on-secondary-container: #28106a;
+  --md-sys-color-tertiary: #356b3f;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #befdc0;
+  --md-sys-color-on-tertiary-container: #00210a;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="funny"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="funny"] {
+  color-scheme: dark;
+  --md-sys-color-background: #01121a;
+  --md-sys-color-on-background: #e0f4ff;
+  --md-sys-color-surface: #01121a;
+  --md-sys-color-surface-dim: #01121a;
+  --md-sys-color-surface-bright: #2a3b43;
+  --md-sys-color-surface-container-lowest: #0e1f29;
+  --md-sys-color-surface-container-low: #1a2c37;
+  --md-sys-color-surface-container: #263945;
+  --md-sys-color-surface-container-high: #324653;
+  --md-sys-color-surface-container-highest: #3e5361;
+  --md-sys-color-on-surface: #e0f4ff;
+  --md-sys-color-surface-variant: #3f484b;
+  --md-sys-color-on-surface-variant: #bfc8cc;
+  --md-sys-color-inverse-surface: #e0f4ff;
+  --md-sys-color-inverse-on-surface: #1c3038;
+  --md-sys-color-outline: #899296;
+  --md-sys-color-outline-variant: #3f484b;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #22d3ee;
+  --md-sys-color-primary: #22d3ee;
+  --md-sys-color-on-primary: #00363d;
+  --md-sys-color-primary-container: #004f58;
+  --md-sys-color-on-primary-container: #9af0ff;
+  --md-sys-color-inverse-primary: #006874;
+  --md-sys-color-secondary: #a78bfa;
+  --md-sys-color-on-secondary: #2d0056;
+  --md-sys-color-secondary-container: #442a72;
+  --md-sys-color-on-secondary-container: #eaddff;
+  --md-sys-color-tertiary: #a3f7b5;
+  --md-sys-color-on-tertiary: #00210a;
+  --md-sys-color-tertiary-container: #1f4d2a;
+  --md-sys-color-on-tertiary-container: #befdc0;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="funny"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="funny"] {
+    color-scheme: dark;
+    --md-sys-color-background: #01121a;
+    --md-sys-color-on-background: #e0f4ff;
+    --md-sys-color-surface: #01121a;
+    --md-sys-color-surface-dim: #01121a;
+    --md-sys-color-surface-bright: #2a3b43;
+    --md-sys-color-surface-container-lowest: #0e1f29;
+    --md-sys-color-surface-container-low: #1a2c37;
+    --md-sys-color-surface-container: #263945;
+    --md-sys-color-surface-container-high: #324653;
+    --md-sys-color-surface-container-highest: #3e5361;
+    --md-sys-color-on-surface: #e0f4ff;
+    --md-sys-color-surface-variant: #3f484b;
+    --md-sys-color-on-surface-variant: #bfc8cc;
+    --md-sys-color-inverse-surface: #e0f4ff;
+    --md-sys-color-inverse-on-surface: #1c3038;
+    --md-sys-color-outline: #899296;
+    --md-sys-color-outline-variant: #3f484b;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #22d3ee;
+    --md-sys-color-primary: #22d3ee;
+    --md-sys-color-on-primary: #00363d;
+    --md-sys-color-primary-container: #004f58;
+    --md-sys-color-on-primary-container: #9af0ff;
+    --md-sys-color-inverse-primary: #006874;
+    --md-sys-color-secondary: #a78bfa;
+    --md-sys-color-on-secondary: #2d0056;
+    --md-sys-color-secondary-container: #442a72;
+    --md-sys-color-on-secondary-container: #eaddff;
+    --md-sys-color-tertiary: #a3f7b5;
+    --md-sys-color-on-tertiary: #00210a;
+    --md-sys-color-tertiary-container: #1f4d2a;
+    --md-sys-color-on-tertiary-container: #befdc0;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/gray.css */
+/* Stepbro theme "gray" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="gray"] {
+  color-scheme: light;
+  --md-sys-color-background: #fcf8f8;
+  --md-sys-color-on-background: #1c1b1b;
+  --md-sys-color-surface: #fcf8f8;
+  --md-sys-color-surface-dim: #ddd9d9;
+  --md-sys-color-surface-bright: #fcf8f8;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f6f3f2;
+  --md-sys-color-surface-container: #f1edec;
+  --md-sys-color-surface-container-high: #ebe7e7;
+  --md-sys-color-surface-container-highest: #e5e2e1;
+  --md-sys-color-on-surface: #1c1b1b;
+  --md-sys-color-surface-variant: #e0e3e3;
+  --md-sys-color-on-surface-variant: #444748;
+  --md-sys-color-inverse-surface: #313030;
+  --md-sys-color-inverse-on-surface: #f4f0ef;
+  --md-sys-color-outline: #747878;
+  --md-sys-color-outline-variant: #c4c7c8;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #5d5f5f;
+  --md-sys-color-primary: #5d5f5f;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #373737;
+  --md-sys-color-on-primary-container: #d7d7d7;
+  --md-sys-color-inverse-primary: #c6c6c7;
+  --md-sys-color-secondary: #5e5e5e;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #e8e6e6;
+  --md-sys-color-on-secondary-container: #4a4a4a;
+  --md-sys-color-tertiary: #5d5f5f;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ffffff;
+  --md-sys-color-on-tertiary-container: #575859;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="gray"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="gray"] {
+  color-scheme: dark;
+  --md-sys-color-background: #141313;
+  --md-sys-color-on-background: #e5e2e1;
+  --md-sys-color-surface: #141313;
+  --md-sys-color-surface-dim: #141313;
+  --md-sys-color-surface-bright: #3a3939;
+  --md-sys-color-surface-container-lowest: #0e0e0e;
+  --md-sys-color-surface-container-low: #1c1b1b;
+  --md-sys-color-surface-container: #201f1f;
+  --md-sys-color-surface-container-high: #2a2a2a;
+  --md-sys-color-surface-container-highest: #353434;
+  --md-sys-color-on-surface: #e5e2e1;
+  --md-sys-color-surface-variant: #444748;
+  --md-sys-color-on-surface-variant: #c4c7c7;
+  --md-sys-color-inverse-surface: #e5e2e1;
+  --md-sys-color-inverse-on-surface: #313030;
+  --md-sys-color-outline: #8e9192;
+  --md-sys-color-outline-variant: #444748;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #c6c6c6;
+  --md-sys-color-primary: #dfdfde;
+  --md-sys-color-on-primary: #2f3131;
+  --md-sys-color-primary-container: #b5b5b5;
+  --md-sys-color-on-primary-container: #28292a;
+  --md-sys-color-inverse-primary: #5d5e5f;
+  --md-sys-color-secondary: #c8c6c6;
+  --md-sys-color-on-secondary: #303030;
+  --md-sys-color-secondary-container: #3d3d3d;
+  --md-sys-color-on-secondary-container: #d3d0d0;
+  --md-sys-color-tertiary: #e3dddf;
+  --md-sys-color-on-tertiary: #323031;
+  --md-sys-color-tertiary-container: #b9b4b6;
+  --md-sys-color-on-tertiary-container: #2b292a;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="gray"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="gray"] {
+    color-scheme: dark;
+    --md-sys-color-background: #141313;
+    --md-sys-color-on-background: #e5e2e1;
+    --md-sys-color-surface: #141313;
+    --md-sys-color-surface-dim: #141313;
+    --md-sys-color-surface-bright: #3a3939;
+    --md-sys-color-surface-container-lowest: #0e0e0e;
+    --md-sys-color-surface-container-low: #1c1b1b;
+    --md-sys-color-surface-container: #201f1f;
+    --md-sys-color-surface-container-high: #2a2a2a;
+    --md-sys-color-surface-container-highest: #353434;
+    --md-sys-color-on-surface: #e5e2e1;
+    --md-sys-color-surface-variant: #444748;
+    --md-sys-color-on-surface-variant: #c4c7c7;
+    --md-sys-color-inverse-surface: #e5e2e1;
+    --md-sys-color-inverse-on-surface: #313030;
+    --md-sys-color-outline: #8e9192;
+    --md-sys-color-outline-variant: #444748;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #c6c6c6;
+    --md-sys-color-primary: #dfdfde;
+    --md-sys-color-on-primary: #2f3131;
+    --md-sys-color-primary-container: #b5b5b5;
+    --md-sys-color-on-primary-container: #28292a;
+    --md-sys-color-inverse-primary: #5d5e5f;
+    --md-sys-color-secondary: #c8c6c6;
+    --md-sys-color-on-secondary: #303030;
+    --md-sys-color-secondary-container: #3d3d3d;
+    --md-sys-color-on-secondary-container: #d3d0d0;
+    --md-sys-color-tertiary: #e3dddf;
+    --md-sys-color-on-tertiary: #323031;
+    --md-sys-color-tertiary-container: #b9b4b6;
+    --md-sys-color-on-tertiary-container: #2b292a;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/green.css */
+/* Stepbro theme "green" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="green"] {
+  color-scheme: light;
+  --md-sys-color-background: #f4fcf0;
+  --md-sys-color-on-background: #161d17;
+  --md-sys-color-surface: #f4fcf0;
+  --md-sys-color-surface-dim: #d4dcd1;
+  --md-sys-color-surface-bright: #f4fcf0;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #eef6eb;
+  --md-sys-color-surface-container: #e8f0e5;
+  --md-sys-color-surface-container-high: #e2eadf;
+  --md-sys-color-surface-container-highest: #dde5da;
+  --md-sys-color-on-surface: #161d17;
+  --md-sys-color-surface-variant: #d8e7d6;
+  --md-sys-color-on-surface-variant: #3d4a3e;
+  --md-sys-color-inverse-surface: #2b322b;
+  --md-sys-color-inverse-on-surface: #ebf3e8;
+  --md-sys-color-outline: #6d7b6d;
+  --md-sys-color-outline-variant: #bccaba;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006d34;
+  --md-sys-color-primary: #006d34;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #5de989;
+  --md-sys-color-on-primary-container: #00461f;
+  --md-sys-color-inverse-primary: #53e081;
+  --md-sys-color-secondary: #366942;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #baf2c1;
+  --md-sys-color-on-secondary-container: #20532f;
+  --md-sys-color-tertiary: #006782;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #7cdaff;
+  --md-sys-color-on-tertiary-container: #004153;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="green"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="green"] {
+  color-scheme: dark;
+  --md-sys-color-background: #0e150f;
+  --md-sys-color-on-background: #dde5da;
+  --md-sys-color-surface: #0e150f;
+  --md-sys-color-surface-dim: #0e150f;
+  --md-sys-color-surface-bright: #333b34;
+  --md-sys-color-surface-container-lowest: #09100a;
+  --md-sys-color-surface-container-low: #161d17;
+  --md-sys-color-surface-container: #1a211b;
+  --md-sys-color-surface-container-high: #242c25;
+  --md-sys-color-surface-container-highest: #2f372f;
+  --md-sys-color-on-surface: #dde5da;
+  --md-sys-color-surface-variant: #3d4a3e;
+  --md-sys-color-on-surface-variant: #bccaba;
+  --md-sys-color-inverse-surface: #dde5da;
+  --md-sys-color-inverse-on-surface: #2b322b;
+  --md-sys-color-outline: #869486;
+  --md-sys-color-outline-variant: #3d4a3e;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #53e081;
+  --md-sys-color-primary: #9fffb3;
+  --md-sys-color-on-primary: #003918;
+  --md-sys-color-primary-container: #4bd97b;
+  --md-sys-color-on-primary-container: #003a19;
+  --md-sys-color-inverse-primary: #006d34;
+  --md-sys-color-secondary: #9dd4a5;
+  --md-sys-color-on-secondary: #003918;
+  --md-sys-color-secondary-container: #104523;
+  --md-sys-color-on-secondary-container: #a5dcad;
+  --md-sys-color-tertiary: #cff0ff;
+  --md-sys-color-on-tertiary: #003545;
+  --md-sys-color-tertiary-container: #55cef9;
+  --md-sys-color-on-tertiary-container: #003747;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="green"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="green"] {
+    color-scheme: dark;
+    --md-sys-color-background: #0e150f;
+    --md-sys-color-on-background: #dde5da;
+    --md-sys-color-surface: #0e150f;
+    --md-sys-color-surface-dim: #0e150f;
+    --md-sys-color-surface-bright: #333b34;
+    --md-sys-color-surface-container-lowest: #09100a;
+    --md-sys-color-surface-container-low: #161d17;
+    --md-sys-color-surface-container: #1a211b;
+    --md-sys-color-surface-container-high: #242c25;
+    --md-sys-color-surface-container-highest: #2f372f;
+    --md-sys-color-on-surface: #dde5da;
+    --md-sys-color-surface-variant: #3d4a3e;
+    --md-sys-color-on-surface-variant: #bccaba;
+    --md-sys-color-inverse-surface: #dde5da;
+    --md-sys-color-inverse-on-surface: #2b322b;
+    --md-sys-color-outline: #869486;
+    --md-sys-color-outline-variant: #3d4a3e;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #53e081;
+    --md-sys-color-primary: #9fffb3;
+    --md-sys-color-on-primary: #003918;
+    --md-sys-color-primary-container: #4bd97b;
+    --md-sys-color-on-primary-container: #003a19;
+    --md-sys-color-inverse-primary: #006d34;
+    --md-sys-color-secondary: #9dd4a5;
+    --md-sys-color-on-secondary: #003918;
+    --md-sys-color-secondary-container: #104523;
+    --md-sys-color-on-secondary-container: #a5dcad;
+    --md-sys-color-tertiary: #cff0ff;
+    --md-sys-color-on-tertiary: #003545;
+    --md-sys-color-tertiary-container: #55cef9;
+    --md-sys-color-on-tertiary-container: #003747;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/modern-1.css */
+/* Stepbro theme "modern-1" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="modern-1"] {
+  color-scheme: light;
+  --md-sys-color-background: #faf8ff;
+  --md-sys-color-on-background: #191b24;
+  --md-sys-color-surface: #faf8ff;
+  --md-sys-color-surface-dim: #d8d9e6;
+  --md-sys-color-surface-bright: #faf8ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f2f3ff;
+  --md-sys-color-surface-container: #ecedfa;
+  --md-sys-color-surface-container-high: #e6e7f4;
+  --md-sys-color-surface-container-highest: #e1e2ee;
+  --md-sys-color-on-surface: #191b24;
+  --md-sys-color-surface-variant: #dee2f5;
+  --md-sys-color-on-surface-variant: #424656;
+  --md-sys-color-inverse-surface: #2e303a;
+  --md-sys-color-inverse-on-surface: #eff0fd;
+  --md-sys-color-outline: #727687;
+  --md-sys-color-outline-variant: #c2c6d8;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #0054d6;
+  --md-sys-color-primary: #0045b2;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #0066ff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #b3c5ff;
+  --md-sys-color-secondary: #425ca0;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #a9beff;
+  --md-sys-color-on-secondary-container: #0c2d6f;
+  --md-sys-color-tertiary: #8102a7;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ab3fcf;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="modern-1"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="modern-1"] {
+  color-scheme: dark;
+  --md-sys-color-background: #10131c;
+  --md-sys-color-on-background: #e1e2ee;
+  --md-sys-color-surface: #10131c;
+  --md-sys-color-surface-dim: #10131c;
+  --md-sys-color-surface-bright: #363943;
+  --md-sys-color-surface-container-lowest: #0b0e16;
+  --md-sys-color-surface-container-low: #191b24;
+  --md-sys-color-surface-container: #1d1f28;
+  --md-sys-color-surface-container-high: #272a33;
+  --md-sys-color-surface-container-highest: #32343e;
+  --md-sys-color-on-surface: #e1e2ee;
+  --md-sys-color-surface-variant: #424656;
+  --md-sys-color-on-surface-variant: #c2c6d8;
+  --md-sys-color-inverse-surface: #e1e2ee;
+  --md-sys-color-inverse-on-surface: #2e303a;
+  --md-sys-color-outline: #8c90a1;
+  --md-sys-color-outline-variant: #424656;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #b3c5ff;
+  --md-sys-color-primary: #b3c5ff;
+  --md-sys-color-on-primary: #002b75;
+  --md-sys-color-primary-container: #005eeb;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #0054d6;
+  --md-sys-color-secondary: #b3c5ff;
+  --md-sys-color-on-secondary: #0a2c6e;
+  --md-sys-color-secondary-container: #1c397b;
+  --md-sys-color-on-secondary-container: #c1cfff;
+  --md-sys-color-tertiary: #f0b0ff;
+  --md-sys-color-on-tertiary: #54006d;
+  --md-sys-color-tertiary-container: #a235c6;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="modern-1"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="modern-1"] {
+    color-scheme: dark;
+    --md-sys-color-background: #10131c;
+    --md-sys-color-on-background: #e1e2ee;
+    --md-sys-color-surface: #10131c;
+    --md-sys-color-surface-dim: #10131c;
+    --md-sys-color-surface-bright: #363943;
+    --md-sys-color-surface-container-lowest: #0b0e16;
+    --md-sys-color-surface-container-low: #191b24;
+    --md-sys-color-surface-container: #1d1f28;
+    --md-sys-color-surface-container-high: #272a33;
+    --md-sys-color-surface-container-highest: #32343e;
+    --md-sys-color-on-surface: #e1e2ee;
+    --md-sys-color-surface-variant: #424656;
+    --md-sys-color-on-surface-variant: #c2c6d8;
+    --md-sys-color-inverse-surface: #e1e2ee;
+    --md-sys-color-inverse-on-surface: #2e303a;
+    --md-sys-color-outline: #8c90a1;
+    --md-sys-color-outline-variant: #424656;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #b3c5ff;
+    --md-sys-color-primary: #b3c5ff;
+    --md-sys-color-on-primary: #002b75;
+    --md-sys-color-primary-container: #005eeb;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #0054d6;
+    --md-sys-color-secondary: #b3c5ff;
+    --md-sys-color-on-secondary: #0a2c6e;
+    --md-sys-color-secondary-container: #1c397b;
+    --md-sys-color-on-secondary-container: #c1cfff;
+    --md-sys-color-tertiary: #f0b0ff;
+    --md-sys-color-on-tertiary: #54006d;
+    --md-sys-color-tertiary-container: #a235c6;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/neogreen.css */
+/* Stepbro theme "neogreen" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="neogreen"] {
+  color-scheme: light;
+  --md-sys-color-background: #f1fded;
+  --md-sys-color-on-background: #141e14;
+  --md-sys-color-surface: #f1fded;
+  --md-sys-color-surface-dim: #d2ddce;
+  --md-sys-color-surface-bright: #f1fded;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #ebf7e7;
+  --md-sys-color-surface-container: #e6f1e1;
+  --md-sys-color-surface-container-high: #e0ecdc;
+  --md-sys-color-surface-container-highest: #dae6d6;
+  --md-sys-color-on-surface: #141e14;
+  --md-sys-color-surface-variant: #d5e8d2;
+  --md-sys-color-on-surface-variant: #3b4b3b;
+  --md-sys-color-inverse-surface: #293328;
+  --md-sys-color-inverse-on-surface: #e8f4e4;
+  --md-sys-color-outline: #6b7b69;
+  --md-sys-color-outline-variant: #b9cbb7;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #006e2c;
+  --md-sys-color-primary: #006e2c;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #4dff7e;
+  --md-sys-color-on-primary-container: #00521f;
+  --md-sys-color-inverse-primary: #00e563;
+  --md-sys-color-secondary: #006e2c;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #9afda6;
+  --md-sys-color-on-secondary-container: #005721;
+  --md-sys-color-tertiary: #006972;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #7ef1ff;
+  --md-sys-color-on-tertiary-container: #004f56;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="neogreen"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="neogreen"] {
+  color-scheme: dark;
+  --md-sys-color-background: #0c160d;
+  --md-sys-color-on-background: #dae6d6;
+  --md-sys-color-surface: #0c160d;
+  --md-sys-color-surface-dim: #0c160d;
+  --md-sys-color-surface-bright: #313c31;
+  --md-sys-color-surface-container-lowest: #071008;
+  --md-sys-color-surface-container-low: #141e14;
+  --md-sys-color-surface-container: #182218;
+  --md-sys-color-surface-container-high: #222c22;
+  --md-sys-color-surface-container-highest: #2d372d;
+  --md-sys-color-on-surface: #dae6d6;
+  --md-sys-color-surface-variant: #3b4b3b;
+  --md-sys-color-on-surface-variant: #b9cbb7;
+  --md-sys-color-inverse-surface: #dae6d6;
+  --md-sys-color-inverse-on-surface: #293328;
+  --md-sys-color-outline: #849582;
+  --md-sys-color-outline-variant: #3b4b3b;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #00e563;
+  --md-sys-color-primary: #ffffff;
+  --md-sys-color-on-primary: #003913;
+  --md-sys-color-primary-container: #00f46b;
+  --md-sys-color-on-primary-container: #004a1b;
+  --md-sys-color-inverse-primary: #006e2c;
+  --md-sys-color-secondary: #7adb88;
+  --md-sys-color-on-secondary: #003913;
+  --md-sys-color-secondary-container: #006a2a;
+  --md-sys-color-on-secondary-container: #ffffff;
+  --md-sys-color-tertiary: #ffffff;
+  --md-sys-color-on-tertiary: #00363c;
+  --md-sys-color-tertiary-container: #4be8f9;
+  --md-sys-color-on-tertiary-container: #00474d;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="neogreen"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="neogreen"] {
+    color-scheme: dark;
+    --md-sys-color-background: #0c160d;
+    --md-sys-color-on-background: #dae6d6;
+    --md-sys-color-surface: #0c160d;
+    --md-sys-color-surface-dim: #0c160d;
+    --md-sys-color-surface-bright: #313c31;
+    --md-sys-color-surface-container-lowest: #071008;
+    --md-sys-color-surface-container-low: #141e14;
+    --md-sys-color-surface-container: #182218;
+    --md-sys-color-surface-container-high: #222c22;
+    --md-sys-color-surface-container-highest: #2d372d;
+    --md-sys-color-on-surface: #dae6d6;
+    --md-sys-color-surface-variant: #3b4b3b;
+    --md-sys-color-on-surface-variant: #b9cbb7;
+    --md-sys-color-inverse-surface: #dae6d6;
+    --md-sys-color-inverse-on-surface: #293328;
+    --md-sys-color-outline: #849582;
+    --md-sys-color-outline-variant: #3b4b3b;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #00e563;
+    --md-sys-color-primary: #ffffff;
+    --md-sys-color-on-primary: #003913;
+    --md-sys-color-primary-container: #00f46b;
+    --md-sys-color-on-primary-container: #004a1b;
+    --md-sys-color-inverse-primary: #006e2c;
+    --md-sys-color-secondary: #7adb88;
+    --md-sys-color-on-secondary: #003913;
+    --md-sys-color-secondary-container: #006a2a;
+    --md-sys-color-on-secondary-container: #ffffff;
+    --md-sys-color-tertiary: #ffffff;
+    --md-sys-color-on-tertiary: #00363c;
+    --md-sys-color-tertiary-container: #4be8f9;
+    --md-sys-color-on-tertiary-container: #00474d;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/new.css */
+/* Stepbro theme "new" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="new"] {
+  color-scheme: light;
+  --md-sys-color-background: #faf5f0;
+  --md-sys-color-on-background: #332c27;
+  --md-sys-color-surface: #faf5f0;
+  --md-sys-color-surface-dim: #e8e3de;
+  --md-sys-color-surface-bright: #faf5f0;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f2ede8;
+  --md-sys-color-surface-container: #ece7e2;
+  --md-sys-color-surface-container-high: #e5e0db;
+  --md-sys-color-surface-container-highest: #dfdad5;
+  --md-sys-color-on-surface: #332c27;
+  --md-sys-color-surface-variant: #e1ddd8;
+  --md-sys-color-on-surface-variant: #5b5550;
+  --md-sys-color-inverse-surface: #47403b;
+  --md-sys-color-inverse-on-surface: #f3eee9;
+  --md-sys-color-outline: #7d7772;
+  --md-sys-color-outline-variant: #c9c3be;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #8c6f57;
+  --md-sys-color-primary: #6b4a31;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #a7856b;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #c4a68d;
+  --md-sys-color-secondary: #5a6b54;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #8ea088;
+  --md-sys-color-on-secondary-container: #273822;
+  --md-sys-color-tertiary: #a7856b;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #c4a68d;
+  --md-sys-color-on-tertiary-container: #332c27;
+  --md-sys-color-error: #b33a3a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad4;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="new"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="new"] {
+  color-scheme: dark;
+  --md-sys-color-background: #211a15;
+  --md-sys-color-on-background: #f3eee9;
+  --md-sys-color-surface: #211a15;
+  --md-sys-color-surface-dim: #211a15;
+  --md-sys-color-surface-bright: #3f3833;
+  --md-sys-color-surface-container-lowest: #1a130e;
+  --md-sys-color-surface-container-low: #28211c;
+  --md-sys-color-surface-container: #2f2823;
+  --md-sys-color-surface-container-high: #3a332e;
+  --md-sys-color-surface-container-highest: #453e39;
+  --md-sys-color-on-surface: #f3eee9;
+  --md-sys-color-surface-variant: #3f3833;
+  --md-sys-color-on-surface-variant: #e1ddd8;
+  --md-sys-color-inverse-surface: #f3eee9;
+  --md-sys-color-inverse-on-surface: #47403b;
+  --md-sys-color-outline: #8e8883;
+  --md-sys-color-outline-variant: #3f3833;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #c4a68d;
+  --md-sys-color-primary: #c4a68d;
+  --md-sys-color-on-primary: #332c27;
+  --md-sys-color-primary-container: #a7856b;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #a7856b;
+  --md-sys-color-secondary: #c2d3bd;
+  --md-sys-color-on-secondary: #273822;
+  --md-sys-color-secondary-container: #5a6b54;
+  --md-sys-color-on-secondary-container: #e1ddd8;
+  --md-sys-color-tertiary: #a7856b;
+  --md-sys-color-on-tertiary: #332c27;
+  --md-sys-color-tertiary-container: #c4a68d;
+  --md-sys-color-on-tertiary-container: #332c27;
+  --md-sys-color-error: #ffb3a8;
+  --md-sys-color-on-error: #332c27;
+  --md-sys-color-error-container: #b33a3a;
+  --md-sys-color-on-error-container: #ffdad4;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="new"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="new"] {
+    color-scheme: dark;
+    --md-sys-color-background: #211a15;
+    --md-sys-color-on-background: #f3eee9;
+    --md-sys-color-surface: #211a15;
+    --md-sys-color-surface-dim: #211a15;
+    --md-sys-color-surface-bright: #3f3833;
+    --md-sys-color-surface-container-lowest: #1a130e;
+    --md-sys-color-surface-container-low: #28211c;
+    --md-sys-color-surface-container: #2f2823;
+    --md-sys-color-surface-container-high: #3a332e;
+    --md-sys-color-surface-container-highest: #453e39;
+    --md-sys-color-on-surface: #f3eee9;
+    --md-sys-color-surface-variant: #3f3833;
+    --md-sys-color-on-surface-variant: #e1ddd8;
+    --md-sys-color-inverse-surface: #f3eee9;
+    --md-sys-color-inverse-on-surface: #47403b;
+    --md-sys-color-outline: #8e8883;
+    --md-sys-color-outline-variant: #3f3833;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #c4a68d;
+    --md-sys-color-primary: #c4a68d;
+    --md-sys-color-on-primary: #332c27;
+    --md-sys-color-primary-container: #a7856b;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #a7856b;
+    --md-sys-color-secondary: #c2d3bd;
+    --md-sys-color-on-secondary: #273822;
+    --md-sys-color-secondary-container: #5a6b54;
+    --md-sys-color-on-secondary-container: #e1ddd8;
+    --md-sys-color-tertiary: #a7856b;
+    --md-sys-color-on-tertiary: #332c27;
+    --md-sys-color-tertiary-container: #c4a68d;
+    --md-sys-color-on-tertiary-container: #332c27;
+    --md-sys-color-error: #ffb3a8;
+    --md-sys-color-on-error: #332c27;
+    --md-sys-color-error-container: #b33a3a;
+    --md-sys-color-on-error-container: #ffdad4;
+  }
+}
+
+/* css/themes/new2.css */
+/* Stepbro theme "new2" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="new2"] {
+  color-scheme: light;
+  --md-sys-color-background: #f0faf5;
+  --md-sys-color-on-background: #0a1a12;
+  --md-sys-color-surface: #f0faf5;
+  --md-sys-color-surface-dim: #e0eae5;
+  --md-sys-color-surface-bright: #f0faf5;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #e7f2ec;
+  --md-sys-color-surface-container: #dfede5;
+  --md-sys-color-surface-container-high: #d6e5dc;
+  --md-sys-color-surface-container-highest: #cedde3;
+  --md-sys-color-on-surface: #0a1a12;
+  --md-sys-color-surface-variant: #e1e6e3;
+  --md-sys-color-on-surface-variant: #424a46;
+  --md-sys-color-inverse-surface: #232b27;
+  --md-sys-color-inverse-on-surface: #eff4f1;
+  --md-sys-color-outline: #6a726d;
+  --md-sys-color-outline-variant: #c0c5c2;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #33ff57;
+  --md-sys-color-primary: #00d434;
+  --md-sys-color-on-primary: #000000;
+  --md-sys-color-primary-container: #69ff85;
+  --md-sys-color-on-primary-container: #000000;
+  --md-sys-color-inverse-primary: #a3ffb7;
+  --md-sys-color-secondary: #556b59;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #a7beac;
+  --md-sys-color-on-secondary-container: #000000;
+  --md-sys-color-tertiary: #708574;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #c9d4cd;
+  --md-sys-color-on-tertiary-container: #000000;
+  --md-sys-color-error: #b00020;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="new2"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="new2"] {
+  color-scheme: dark;
+  --md-sys-color-background: #0a120d;
+  --md-sys-color-on-background: #def2e5;
+  --md-sys-color-surface: #0a120d;
+  --md-sys-color-surface-dim: #0a120d;
+  --md-sys-color-surface-bright: #232b26;
+  --md-sys-color-surface-container-lowest: #060b09;
+  --md-sys-color-surface-container-low: #121a16;
+  --md-sys-color-surface-container: #18211d;
+  --md-sys-color-surface-container-high: #212a25;
+  --md-sys-color-surface-container-highest: #2a332e;
+  --md-sys-color-on-surface: #def2e5;
+  --md-sys-color-surface-variant: #232b26;
+  --md-sys-color-on-surface-variant: #c0c5c2;
+  --md-sys-color-inverse-surface: #def2e5;
+  --md-sys-color-inverse-on-surface: #232b27;
+  --md-sys-color-outline: #717975;
+  --md-sys-color-outline-variant: #353d39;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #a3ffb7;
+  --md-sys-color-primary: #a3ffb7;
+  --md-sys-color-on-primary: #000000;
+  --md-sys-color-primary-container: #00d434;
+  --md-sys-color-on-primary-container: #000000;
+  --md-sys-color-inverse-primary: #00d434;
+  --md-sys-color-secondary: #a7beac;
+  --md-sys-color-on-secondary: #000000;
+  --md-sys-color-secondary-container: #556b59;
+  --md-sys-color-on-secondary-container: #ffffff;
+  --md-sys-color-tertiary: #a7beac;
+  --md-sys-color-on-tertiary: #000000;
+  --md-sys-color-tertiary-container: #708574;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb3a8;
+  --md-sys-color-on-error: #000000;
+  --md-sys-color-error-container: #b00020;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="new2"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="new2"] {
+    color-scheme: dark;
+    --md-sys-color-background: #0a120d;
+    --md-sys-color-on-background: #def2e5;
+    --md-sys-color-surface: #0a120d;
+    --md-sys-color-surface-dim: #0a120d;
+    --md-sys-color-surface-bright: #232b26;
+    --md-sys-color-surface-container-lowest: #060b09;
+    --md-sys-color-surface-container-low: #121a16;
+    --md-sys-color-surface-container: #18211d;
+    --md-sys-color-surface-container-high: #212a25;
+    --md-sys-color-surface-container-highest: #2a332e;
+    --md-sys-color-on-surface: #def2e5;
+    --md-sys-color-surface-variant: #232b26;
+    --md-sys-color-on-surface-variant: #c0c5c2;
+    --md-sys-color-inverse-surface: #def2e5;
+    --md-sys-color-inverse-on-surface: #232b27;
+    --md-sys-color-outline: #717975;
+    --md-sys-color-outline-variant: #353d39;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #a3ffb7;
+    --md-sys-color-primary: #a3ffb7;
+    --md-sys-color-on-primary: #000000;
+    --md-sys-color-primary-container: #00d434;
+    --md-sys-color-on-primary-container: #000000;
+    --md-sys-color-inverse-primary: #00d434;
+    --md-sys-color-secondary: #a7beac;
+    --md-sys-color-on-secondary: #000000;
+    --md-sys-color-secondary-container: #556b59;
+    --md-sys-color-on-secondary-container: #ffffff;
+    --md-sys-color-tertiary: #a7beac;
+    --md-sys-color-on-tertiary: #000000;
+    --md-sys-color-tertiary-container: #708574;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb3a8;
+    --md-sys-color-on-error: #000000;
+    --md-sys-color-error-container: #b00020;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/oled.css */
+/* Stepbro theme "oled" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="oled"] {
+  color-scheme: light;
+  --md-sys-color-background: #fbf9fc;
+  --md-sys-color-on-background: #1b1b1e;
+  --md-sys-color-surface: #fbf9fc;
+  --md-sys-color-surface-dim: #dbd9dc;
+  --md-sys-color-surface-bright: #fbf9fc;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f5f3f6;
+  --md-sys-color-surface-container: #efedf0;
+  --md-sys-color-surface-container-high: #e9e7ea;
+  --md-sys-color-surface-container-highest: #e4e2e5;
+  --md-sys-color-on-surface: #1b1b1e;
+  --md-sys-color-surface-variant: #e1e2eb;
+  --md-sys-color-on-surface-variant: #44474e;
+  --md-sys-color-inverse-surface: #303033;
+  --md-sys-color-inverse-on-surface: #f2f0f3;
+  --md-sys-color-outline: #75777e;
+  --md-sys-color-outline-variant: #c5c6ce;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #4d5f80;
+  --md-sys-color-primary: #000000;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #000000;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #b4c7ed;
+  --md-sys-color-secondary: #585e6d;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #e0e6f8;
+  --md-sys-color-on-secondary-container: #444a58;
+  --md-sys-color-tertiary: #000000;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #311e3e;
+  --md-sys-color-on-tertiary-container: #c2a8d1;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="oled"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="oled"] {
+  color-scheme: dark;
+  --md-sys-color-background: #000000;
+  --md-sys-color-on-background: #e4e2e5;
+  --md-sys-color-surface: #000000;
+  --md-sys-color-surface-dim: #0a0a0a;
+  --md-sys-color-surface-bright: #121214;
+  --md-sys-color-surface-container-lowest: #0a0a0a;
+  --md-sys-color-surface-container-low: #101012;
+  --md-sys-color-surface-container: #17171a;
+  --md-sys-color-surface-container-high: #202022;
+  --md-sys-color-surface-container-highest: #28282b;
+  --md-sys-color-on-surface: #e4e2e5;
+  --md-sys-color-surface-variant: #3a3d43;
+  --md-sys-color-on-surface-variant: #c5c6ce;
+  --md-sys-color-inverse-surface: #e4e2e5;
+  --md-sys-color-inverse-on-surface: #303033;
+  --md-sys-color-outline: #7e8088;
+  --md-sys-color-outline-variant: #3a3d43;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #9fb8e4;
+  --md-sys-color-primary: #ffffff;
+  --md-sys-color-on-primary: #000000;
+  --md-sys-color-primary-container: #ffffff;
+  --md-sys-color-on-primary-container: #000000;
+  --md-sys-color-inverse-primary: #4d5f80;
+  --md-sys-color-secondary: #b1b9cc;
+  --md-sys-color-on-secondary: #242b37;
+  --md-sys-color-secondary-container: #313641;
+  --md-sys-color-on-secondary-container: #c3c9db;
+  --md-sys-color-tertiary: #caa3d7;
+  --md-sys-color-on-tertiary: #352339;
+  --md-sys-color-tertiary-container: #190626;
+  --md-sys-color-on-tertiary-container: #a488b0;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="oled"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="oled"] {
+    color-scheme: dark;
+    --md-sys-color-background: #000000;
+    --md-sys-color-on-background: #e4e2e5;
+    --md-sys-color-surface: #000000;
+    --md-sys-color-surface-dim: #0a0a0a;
+    --md-sys-color-surface-bright: #121214;
+    --md-sys-color-surface-container-lowest: #0a0a0a;
+    --md-sys-color-surface-container-low: #101012;
+    --md-sys-color-surface-container: #17171a;
+    --md-sys-color-surface-container-high: #202022;
+    --md-sys-color-surface-container-highest: #28282b;
+    --md-sys-color-on-surface: #e4e2e5;
+    --md-sys-color-surface-variant: #3a3d43;
+    --md-sys-color-on-surface-variant: #c5c6ce;
+    --md-sys-color-inverse-surface: #e4e2e5;
+    --md-sys-color-inverse-on-surface: #303033;
+    --md-sys-color-outline: #7e8088;
+    --md-sys-color-outline-variant: #3a3d43;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #9fb8e4;
+    --md-sys-color-primary: #ffffff;
+    --md-sys-color-on-primary: #000000;
+    --md-sys-color-primary-container: #ffffff;
+    --md-sys-color-on-primary-container: #000000;
+    --md-sys-color-inverse-primary: #4d5f80;
+    --md-sys-color-secondary: #b1b9cc;
+    --md-sys-color-on-secondary: #242b37;
+    --md-sys-color-secondary-container: #313641;
+    --md-sys-color-on-secondary-container: #c3c9db;
+    --md-sys-color-tertiary: #caa3d7;
+    --md-sys-color-on-tertiary: #352339;
+    --md-sys-color-tertiary-container: #190626;
+    --md-sys-color-on-tertiary-container: #a488b0;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/orange.css */
+/* Stepbro theme "orange" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="orange"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff9f0;
+  --md-sys-color-on-background: #211a15;
+  --md-sys-color-surface: #fff9f0;
+  --md-sys-color-surface-dim: #f0eee0;
+  --md-sys-color-surface-bright: #fff9f0;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f7f4e8;
+  --md-sys-color-surface-container: #f2efe0;
+  --md-sys-color-surface-container-high: #edeae5;
+  --md-sys-color-surface-container-highest: #e8e5db;
+  --md-sys-color-on-surface: #211a15;
+  --md-sys-color-surface-variant: #eeebe3;
+  --md-sys-color-on-surface-variant: #59534d;
+  --md-sys-color-inverse-surface: #3a332e;
+  --md-sys-color-inverse-on-surface: #f7f4e8;
+  --md-sys-color-outline: #7e7873;
+  --md-sys-color-outline-variant: #cfcac5;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ff9100;
+  --md-sys-color-primary: #f47700;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #ffb347;
+  --md-sys-color-on-primary-container: #000000;
+  --md-sys-color-inverse-primary: #ffc988;
+  --md-sys-color-secondary: #6e5a4d;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #b9a598;
+  --md-sys-color-on-secondary-container: #000000;
+  --md-sys-color-tertiary: #877366;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #cdc5be;
+  --md-sys-color-on-tertiary-container: #000000;
+  --md-sys-color-error: #b00020;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="orange"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="orange"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1a1a1a;
+  --md-sys-color-on-background: #f2efe0;
+  --md-sys-color-surface: #1a1a1a;
+  --md-sys-color-surface-dim: #1a1a1a;
+  --md-sys-color-surface-bright: #303030;
+  --md-sys-color-surface-container-lowest: #101010;
+  --md-sys-color-surface-container-low: #202020;
+  --md-sys-color-surface-container: #282828;
+  --md-sys-color-surface-container-high: #333333;
+  --md-sys-color-surface-container-highest: #3d3d3d;
+  --md-sys-color-on-surface: #f2efe0;
+  --md-sys-color-surface-variant: #303030;
+  --md-sys-color-on-surface-variant: #cdc5be;
+  --md-sys-color-inverse-surface: #f2efe0;
+  --md-sys-color-inverse-on-surface: #3a332e;
+  --md-sys-color-outline: #78716c;
+  --md-sys-color-outline-variant: #3d3732;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffc988;
+  --md-sys-color-primary: #ffc988;
+  --md-sys-color-on-primary: #000000;
+  --md-sys-color-primary-container: #f47700;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #f47700;
+  --md-sys-color-secondary: #b9a598;
+  --md-sys-color-on-secondary: #000000;
+  --md-sys-color-secondary-container: #6e5a4d;
+  --md-sys-color-on-secondary-container: #ffffff;
+  --md-sys-color-tertiary: #b9a598;
+  --md-sys-color-on-tertiary: #000000;
+  --md-sys-color-tertiary-container: #877366;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb3a8;
+  --md-sys-color-on-error: #000000;
+  --md-sys-color-error-container: #b00020;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="orange"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="orange"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1a1a1a;
+    --md-sys-color-on-background: #f2efe0;
+    --md-sys-color-surface: #1a1a1a;
+    --md-sys-color-surface-dim: #1a1a1a;
+    --md-sys-color-surface-bright: #303030;
+    --md-sys-color-surface-container-lowest: #101010;
+    --md-sys-color-surface-container-low: #202020;
+    --md-sys-color-surface-container: #282828;
+    --md-sys-color-surface-container-high: #333333;
+    --md-sys-color-surface-container-highest: #3d3d3d;
+    --md-sys-color-on-surface: #f2efe0;
+    --md-sys-color-surface-variant: #303030;
+    --md-sys-color-on-surface-variant: #cdc5be;
+    --md-sys-color-inverse-surface: #f2efe0;
+    --md-sys-color-inverse-on-surface: #3a332e;
+    --md-sys-color-outline: #78716c;
+    --md-sys-color-outline-variant: #3d3732;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #ffc988;
+    --md-sys-color-primary: #ffc988;
+    --md-sys-color-on-primary: #000000;
+    --md-sys-color-primary-container: #f47700;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #f47700;
+    --md-sys-color-secondary: #b9a598;
+    --md-sys-color-on-secondary: #000000;
+    --md-sys-color-secondary-container: #6e5a4d;
+    --md-sys-color-on-secondary-container: #ffffff;
+    --md-sys-color-tertiary: #b9a598;
+    --md-sys-color-on-tertiary: #000000;
+    --md-sys-color-tertiary-container: #877366;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb3a8;
+    --md-sys-color-on-error: #000000;
+    --md-sys-color-error-container: #b00020;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/pastel-pink.css */
+/* Stepbro theme "pastel-pink" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="pastel-pink"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff9fb;
+  --md-sys-color-on-background: #362a34;
+  --md-sys-color-surface: #fff9fb;
+  --md-sys-color-surface-dim: #f5edf0;
+  --md-sys-color-surface-bright: #fffcfe;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fbf3f6;
+  --md-sys-color-surface-container: #f6eef1;
+  --md-sys-color-surface-container-high: #f1e9ec;
+  --md-sys-color-surface-container-highest: #ece4e7;
+  --md-sys-color-on-surface: #362a34;
+  --md-sys-color-surface-variant: #f8ecf0;
+  --md-sys-color-on-surface-variant: #5d4b58;
+  --md-sys-color-inverse-surface: #453741;
+  --md-sys-color-inverse-on-surface: #ffeff9;
+  --md-sys-color-outline: #93818e;
+  --md-sys-color-outline-variant: #d8c6d1;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffcee8;
+  --md-sys-color-primary: #e891c9;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #ffd9ef;
+  --md-sys-color-on-primary-container: #6d1e58;
+  --md-sys-color-inverse-primary: #ffcee8;
+  --md-sys-color-secondary: #c8aac3;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #f0d8ec;
+  --md-sys-color-on-secondary-container: #422d3e;
+  --md-sys-color-tertiary: #ff9fd4;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ffd4eb;
+  --md-sys-color-on-tertiary-container: #8a005f;
+  --md-sys-color-error: #ffb8c5;
+  --md-sys-color-on-error: #61001a;
+  --md-sys-color-error-container: #ffe4e8;
+  --md-sys-color-on-error-container: #410011;
+}
+[data-mk-theme="pastel-pink"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="pastel-pink"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1d171c;
+  --md-sys-color-on-background: #f5e8ef;
+  --md-sys-color-surface: #1d171c;
+  --md-sys-color-surface-dim: #181216;
+  --md-sys-color-surface-bright: #433a41;
+  --md-sys-color-surface-container-lowest: #181216;
+  --md-sys-color-surface-container-low: #261f24;
+  --md-sys-color-surface-container: #2c242a;
+  --md-sys-color-surface-container-high: #362e34;
+  --md-sys-color-surface-container-highest: #40383e;
+  --md-sys-color-on-surface: #f5e8ef;
+  --md-sys-color-surface-variant: #453741;
+  --md-sys-color-on-surface-variant: #d8c6d1;
+  --md-sys-color-inverse-surface: #f5e8ef;
+  --md-sys-color-inverse-on-surface: #453741;
+  --md-sys-color-outline: #8f7d89;
+  --md-sys-color-outline-variant: #453741;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffcee8;
+  --md-sys-color-primary: #ffb3db;
+  --md-sys-color-on-primary: #6d0058;
+  --md-sys-color-primary-container: #d97cb9;
+  --md-sys-color-on-primary-container: #fff7fb;
+  --md-sys-color-inverse-primary: #e891c9;
+  --md-sys-color-secondary: #e0c4db;
+  --md-sys-color-on-secondary: #4a3246;
+  --md-sys-color-secondary-container: #675462;
+  --md-sys-color-on-secondary-container: #f6e4f2;
+  --md-sys-color-tertiary: #ffbde5;
+  --md-sys-color-on-tertiary: #8a005f;
+  --md-sys-color-tertiary-container: #d95f9e;
+  --md-sys-color-on-tertiary-container: #fff7fb;
+  --md-sys-color-error: #ffc2cd;
+  --md-sys-color-on-error: #68001e;
+  --md-sys-color-error-container: #b0002d;
+  --md-sys-color-on-error-container: #ffe4e9;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="pastel-pink"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="pastel-pink"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1d171c;
+    --md-sys-color-on-background: #f5e8ef;
+    --md-sys-color-surface: #1d171c;
+    --md-sys-color-surface-dim: #181216;
+    --md-sys-color-surface-bright: #433a41;
+    --md-sys-color-surface-container-lowest: #181216;
+    --md-sys-color-surface-container-low: #261f24;
+    --md-sys-color-surface-container: #2c242a;
+    --md-sys-color-surface-container-high: #362e34;
+    --md-sys-color-surface-container-highest: #40383e;
+    --md-sys-color-on-surface: #f5e8ef;
+    --md-sys-color-surface-variant: #453741;
+    --md-sys-color-on-surface-variant: #d8c6d1;
+    --md-sys-color-inverse-surface: #f5e8ef;
+    --md-sys-color-inverse-on-surface: #453741;
+    --md-sys-color-outline: #8f7d89;
+    --md-sys-color-outline-variant: #453741;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #ffcee8;
+    --md-sys-color-primary: #ffb3db;
+    --md-sys-color-on-primary: #6d0058;
+    --md-sys-color-primary-container: #d97cb9;
+    --md-sys-color-on-primary-container: #fff7fb;
+    --md-sys-color-inverse-primary: #e891c9;
+    --md-sys-color-secondary: #e0c4db;
+    --md-sys-color-on-secondary: #4a3246;
+    --md-sys-color-secondary-container: #675462;
+    --md-sys-color-on-secondary-container: #f6e4f2;
+    --md-sys-color-tertiary: #ffbde5;
+    --md-sys-color-on-tertiary: #8a005f;
+    --md-sys-color-tertiary-container: #d95f9e;
+    --md-sys-color-on-tertiary-container: #fff7fb;
+    --md-sys-color-error: #ffc2cd;
+    --md-sys-color-on-error: #68001e;
+    --md-sys-color-error-container: #b0002d;
+    --md-sys-color-on-error-container: #ffe4e9;
+  }
+}
+
+/* css/themes/pink.css */
+/* Stepbro theme "pink" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="pink"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff7fa;
+  --md-sys-color-on-background: #231823;
+  --md-sys-color-surface: #fff7fa;
+  --md-sys-color-surface-dim: #e8d4e5;
+  --md-sys-color-surface-bright: #fff7fa;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #ffeffb;
+  --md-sys-color-surface-container: #fce8f9;
+  --md-sys-color-surface-container-high: #f6e2f3;
+  --md-sys-color-surface-container-highest: #f0dded;
+  --md-sys-color-on-surface: #231823;
+  --md-sys-color-surface-variant: #f4dbf2;
+  --md-sys-color-on-surface-variant: #534153;
+  --md-sys-color-inverse-surface: #392d39;
+  --md-sys-color-inverse-on-surface: #ffebfc;
+  --md-sys-color-outline: #857185;
+  --md-sys-color-outline-variant: #d7bfd6;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #a000be;
+  --md-sys-color-primary: #8900a3;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #c400e8;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #f7acff;
+  --md-sys-color-secondary: #9332a6;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #f294ff;
+  --md-sys-color-on-secondary-container: #4d005d;
+  --md-sys-color-tertiary: #9f0054;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #e2007a;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="pink"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="pink"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1a101b;
+  --md-sys-color-on-background: #f0dded;
+  --md-sys-color-surface: #1a101b;
+  --md-sys-color-surface-dim: #1a101b;
+  --md-sys-color-surface-bright: #423542;
+  --md-sys-color-surface-container-lowest: #150b16;
+  --md-sys-color-surface-container-low: #231823;
+  --md-sys-color-surface-container: #271c28;
+  --md-sys-color-surface-container-high: #322632;
+  --md-sys-color-surface-container-highest: #3d313d;
+  --md-sys-color-on-surface: #f0dded;
+  --md-sys-color-surface-variant: #534153;
+  --md-sys-color-on-surface-variant: #d7bfd6;
+  --md-sys-color-inverse-surface: #f0dded;
+  --md-sys-color-inverse-on-surface: #392d39;
+  --md-sys-color-outline: #a08a9f;
+  --md-sys-color-outline-variant: #534153;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #f7acff;
+  --md-sys-color-primary: #f7acff;
+  --md-sys-color-on-primary: #560068;
+  --md-sys-color-primary-container: #c400e8;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #a000be;
+  --md-sys-color-secondary: #f7acff;
+  --md-sys-color-on-secondary: #560068;
+  --md-sys-color-secondary-container: #6c0081;
+  --md-sys-color-on-secondary-container: #fabeff;
+  --md-sys-color-tertiary: #ffb1c8;
+  --md-sys-color-on-tertiary: #650033;
+  --md-sys-color-tertiary-container: #e2007a;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="pink"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="pink"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1a101b;
+    --md-sys-color-on-background: #f0dded;
+    --md-sys-color-surface: #1a101b;
+    --md-sys-color-surface-dim: #1a101b;
+    --md-sys-color-surface-bright: #423542;
+    --md-sys-color-surface-container-lowest: #150b16;
+    --md-sys-color-surface-container-low: #231823;
+    --md-sys-color-surface-container: #271c28;
+    --md-sys-color-surface-container-high: #322632;
+    --md-sys-color-surface-container-highest: #3d313d;
+    --md-sys-color-on-surface: #f0dded;
+    --md-sys-color-surface-variant: #534153;
+    --md-sys-color-on-surface-variant: #d7bfd6;
+    --md-sys-color-inverse-surface: #f0dded;
+    --md-sys-color-inverse-on-surface: #392d39;
+    --md-sys-color-outline: #a08a9f;
+    --md-sys-color-outline-variant: #534153;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #f7acff;
+    --md-sys-color-primary: #f7acff;
+    --md-sys-color-on-primary: #560068;
+    --md-sys-color-primary-container: #c400e8;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #a000be;
+    --md-sys-color-secondary: #f7acff;
+    --md-sys-color-on-secondary: #560068;
+    --md-sys-color-secondary-container: #6c0081;
+    --md-sys-color-on-secondary-container: #fabeff;
+    --md-sys-color-tertiary: #ffb1c8;
+    --md-sys-color-on-tertiary: #650033;
+    --md-sys-color-tertiary-container: #e2007a;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/purple.css */
+/* Stepbro theme "purple" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="purple"] {
+  color-scheme: light;
+  --md-sys-color-background: #fef7ff;
+  --md-sys-color-on-background: #1e1a25;
+  --md-sys-color-surface: #fef7ff;
+  --md-sys-color-surface-dim: #dfd7e7;
+  --md-sys-color-surface-bright: #fef7ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f9f1ff;
+  --md-sys-color-surface-container: #f3ebfb;
+  --md-sys-color-surface-container-high: #eee5f5;
+  --md-sys-color-surface-container-highest: #e8dff0;
+  --md-sys-color-on-surface: #1e1a25;
+  --md-sys-color-surface-variant: #e9def6;
+  --md-sys-color-on-surface-variant: #4a4456;
+  --md-sys-color-inverse-surface: #332e3b;
+  --md-sys-color-inverse-on-surface: #f6edfe;
+  --md-sys-color-outline: #7b7488;
+  --md-sys-color-outline-variant: #ccc2d9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #7516fa;
+  --md-sys-color-primary: #5e00d0;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #853fff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #d2bcff;
+  --md-sys-color-secondary: #6c4ab0;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #bfa0ff;
+  --md-sys-color-on-secondary-container: #300072;
+  --md-sys-color-tertiary: #8b007b;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #c322ad;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="purple"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="purple"] {
+  color-scheme: dark;
+  --md-sys-color-background: #15121d;
+  --md-sys-color-on-background: #e8dff0;
+  --md-sys-color-surface: #15121d;
+  --md-sys-color-surface-dim: #15121d;
+  --md-sys-color-surface-bright: #3c3744;
+  --md-sys-color-surface-container-lowest: #100c17;
+  --md-sys-color-surface-container-low: #1e1a25;
+  --md-sys-color-surface-container: #221e29;
+  --md-sys-color-surface-container-high: #2c2834;
+  --md-sys-color-surface-container-highest: #37333f;
+  --md-sys-color-on-surface: #e8dff0;
+  --md-sys-color-surface-variant: #4a4456;
+  --md-sys-color-on-surface-variant: #ccc2d9;
+  --md-sys-color-inverse-surface: #e8dff0;
+  --md-sys-color-inverse-on-surface: #332e3b;
+  --md-sys-color-outline: #968da2;
+  --md-sys-color-outline-variant: #4a4456;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #d2bcff;
+  --md-sys-color-primary: #d2bcff;
+  --md-sys-color-on-primary: #3e008e;
+  --md-sys-color-primary-container: #6e00f1;
+  --md-sys-color-on-primary-container: #fffdff;
+  --md-sys-color-inverse-primary: #7516fa;
+  --md-sys-color-secondary: #d2bcff;
+  --md-sys-color-on-secondary: #3c147f;
+  --md-sys-color-secondary-container: #4a268d;
+  --md-sys-color-on-secondary-container: #dcc9ff;
+  --md-sys-color-tertiary: #fface7;
+  --md-sys-color-on-tertiary: #5e0053;
+  --md-sys-color-tertiary-container: #a20090;
+  --md-sys-color-on-tertiary-container: #fffdff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="purple"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="purple"] {
+    color-scheme: dark;
+    --md-sys-color-background: #15121d;
+    --md-sys-color-on-background: #e8dff0;
+    --md-sys-color-surface: #15121d;
+    --md-sys-color-surface-dim: #15121d;
+    --md-sys-color-surface-bright: #3c3744;
+    --md-sys-color-surface-container-lowest: #100c17;
+    --md-sys-color-surface-container-low: #1e1a25;
+    --md-sys-color-surface-container: #221e29;
+    --md-sys-color-surface-container-high: #2c2834;
+    --md-sys-color-surface-container-highest: #37333f;
+    --md-sys-color-on-surface: #e8dff0;
+    --md-sys-color-surface-variant: #4a4456;
+    --md-sys-color-on-surface-variant: #ccc2d9;
+    --md-sys-color-inverse-surface: #e8dff0;
+    --md-sys-color-inverse-on-surface: #332e3b;
+    --md-sys-color-outline: #968da2;
+    --md-sys-color-outline-variant: #4a4456;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #d2bcff;
+    --md-sys-color-primary: #d2bcff;
+    --md-sys-color-on-primary: #3e008e;
+    --md-sys-color-primary-container: #6e00f1;
+    --md-sys-color-on-primary-container: #fffdff;
+    --md-sys-color-inverse-primary: #7516fa;
+    --md-sys-color-secondary: #d2bcff;
+    --md-sys-color-on-secondary: #3c147f;
+    --md-sys-color-secondary-container: #4a268d;
+    --md-sys-color-on-secondary-container: #dcc9ff;
+    --md-sys-color-tertiary: #fface7;
+    --md-sys-color-on-tertiary: #5e0053;
+    --md-sys-color-tertiary-container: #a20090;
+    --md-sys-color-on-tertiary-container: #fffdff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/red.css */
+/* Stepbro theme "red" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="red"] {
+  color-scheme: light;
+  --md-sys-color-background: #fff8f7;
+  --md-sys-color-on-background: #271716;
+  --md-sys-color-surface: #fff8f7;
+  --md-sys-color-surface-dim: #f1d3d0;
+  --md-sys-color-surface-bright: #fff8f7;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fff0ef;
+  --md-sys-color-surface-container: #ffe9e6;
+  --md-sys-color-surface-container-high: #ffe2de;
+  --md-sys-color-surface-container-highest: #fadcd8;
+  --md-sys-color-on-surface: #271716;
+  --md-sys-color-surface-variant: #ffdad6;
+  --md-sys-color-on-surface-variant: #5b403d;
+  --md-sys-color-inverse-surface: #3e2c2a;
+  --md-sys-color-inverse-on-surface: #ffedea;
+  --md-sys-color-outline: #906f6c;
+  --md-sys-color-outline-variant: #e4beb9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #bb181e;
+  --md-sys-color-primary: #a50012;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #db3331;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #ffb4ac;
+  --md-sys-color-secondary: #a13e38;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #ff958b;
+  --md-sys-color-on-secondary-container: #540407;
+  --md-sys-color-tertiary: #734600;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #a66600;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="red"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="red"] {
+  color-scheme: dark;
+  --md-sys-color-background: #1e0f0e;
+  --md-sys-color-on-background: #fadcd8;
+  --md-sys-color-surface: #1e0f0e;
+  --md-sys-color-surface-dim: #1e0f0e;
+  --md-sys-color-surface-bright: #483533;
+  --md-sys-color-surface-container-lowest: #180a09;
+  --md-sys-color-surface-container-low: #271716;
+  --md-sys-color-surface-container: #2c1b1a;
+  --md-sys-color-surface-container-high: #372624;
+  --md-sys-color-surface-container-highest: #43302e;
+  --md-sys-color-on-surface: #fadcd8;
+  --md-sys-color-surface-variant: #5b403d;
+  --md-sys-color-on-surface-variant: #e4beb9;
+  --md-sys-color-inverse-surface: #fadcd8;
+  --md-sys-color-inverse-on-surface: #3e2c2a;
+  --md-sys-color-outline: #ab8985;
+  --md-sys-color-outline-variant: #5b403d;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #ffb4ac;
+  --md-sys-color-primary: #ffb4ac;
+  --md-sys-color-on-primary: #690007;
+  --md-sys-color-primary-container: #db3331;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #bb181e;
+  --md-sys-color-secondary: #ffb4ac;
+  --md-sys-color-on-secondary: #620f0f;
+  --md-sys-color-secondary-container: #78201d;
+  --md-sys-color-on-secondary-container: #ffc8c2;
+  --md-sys-color-tertiary: #ffb865;
+  --md-sys-color-on-tertiary: #482a00;
+  --md-sys-color-tertiary-container: #a66600;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="red"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="red"] {
+    color-scheme: dark;
+    --md-sys-color-background: #1e0f0e;
+    --md-sys-color-on-background: #fadcd8;
+    --md-sys-color-surface: #1e0f0e;
+    --md-sys-color-surface-dim: #1e0f0e;
+    --md-sys-color-surface-bright: #483533;
+    --md-sys-color-surface-container-lowest: #180a09;
+    --md-sys-color-surface-container-low: #271716;
+    --md-sys-color-surface-container: #2c1b1a;
+    --md-sys-color-surface-container-high: #372624;
+    --md-sys-color-surface-container-highest: #43302e;
+    --md-sys-color-on-surface: #fadcd8;
+    --md-sys-color-surface-variant: #5b403d;
+    --md-sys-color-on-surface-variant: #e4beb9;
+    --md-sys-color-inverse-surface: #fadcd8;
+    --md-sys-color-inverse-on-surface: #3e2c2a;
+    --md-sys-color-outline: #ab8985;
+    --md-sys-color-outline-variant: #5b403d;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #ffb4ac;
+    --md-sys-color-primary: #ffb4ac;
+    --md-sys-color-on-primary: #690007;
+    --md-sys-color-primary-container: #db3331;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #bb181e;
+    --md-sys-color-secondary: #ffb4ac;
+    --md-sys-color-on-secondary: #620f0f;
+    --md-sys-color-secondary-container: #78201d;
+    --md-sys-color-on-secondary-container: #ffc8c2;
+    --md-sys-color-tertiary: #ffb865;
+    --md-sys-color-on-tertiary: #482a00;
+    --md-sys-color-tertiary-container: #a66600;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}
+
+/* css/themes/super-blue.css */
+/* Stepbro theme "super-blue" — values from the replication kit (tasks/themes/theme.{light,dark}-*.css).
+   Generated by scripts/import-themes.mjs; do not edit. */
+[data-mk-theme="super-blue"] {
+  color-scheme: light;
+  --md-sys-color-background: #fbf8ff;
+  --md-sys-color-on-background: #1a1b24;
+  --md-sys-color-surface: #fbf8ff;
+  --md-sys-color-surface-dim: #dad9e6;
+  --md-sys-color-surface-bright: #fbf8ff;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #f4f2ff;
+  --md-sys-color-surface-container: #eeecfa;
+  --md-sys-color-surface-container-high: #e8e7f4;
+  --md-sys-color-surface-container-highest: #e2e1ef;
+  --md-sys-color-on-surface: #1a1b24;
+  --md-sys-color-surface-variant: #e1e1f5;
+  --md-sys-color-on-surface-variant: #444656;
+  --md-sys-color-inverse-surface: #2f303a;
+  --md-sys-color-inverse-on-surface: #f1effd;
+  --md-sys-color-outline: #757688;
+  --md-sys-color-outline-variant: #c5c5d9;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #2d46f0;
+  --md-sys-color-primary: #0028db;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #4058ff;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #bcc2ff;
+  --md-sys-color-secondary: #4e58a3;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #afb8ff;
+  --md-sys-color-on-secondary-container: #1c2771;
+  --md-sys-color-tertiary: #7f0096;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #ad34c4;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}
+[data-mk-theme="super-blue"][data-mk-mode="dark"],
+[data-mk-mode="dark"] [data-mk-theme="super-blue"] {
+  color-scheme: dark;
+  --md-sys-color-background: #12131c;
+  --md-sys-color-on-background: #e2e1ef;
+  --md-sys-color-surface: #12131c;
+  --md-sys-color-surface-dim: #12131c;
+  --md-sys-color-surface-bright: #383843;
+  --md-sys-color-surface-container-lowest: #0c0e17;
+  --md-sys-color-surface-container-low: #1a1b24;
+  --md-sys-color-surface-container: #1e1f29;
+  --md-sys-color-surface-container-high: #282933;
+  --md-sys-color-surface-container-highest: #33343e;
+  --md-sys-color-on-surface: #e2e1ef;
+  --md-sys-color-surface-variant: #444656;
+  --md-sys-color-on-surface-variant: #c5c5d9;
+  --md-sys-color-inverse-surface: #e2e1ef;
+  --md-sys-color-inverse-on-surface: #2f303a;
+  --md-sys-color-outline: #8f8fa2;
+  --md-sys-color-outline-variant: #444656;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #bcc2ff;
+  --md-sys-color-primary: #bcc2ff;
+  --md-sys-color-on-primary: #001999;
+  --md-sys-color-primary-container: #344df6;
+  --md-sys-color-on-primary-container: #ffffff;
+  --md-sys-color-inverse-primary: #2d46f0;
+  --md-sys-color-secondary: #bcc2ff;
+  --md-sys-color-on-secondary: #1d2872;
+  --md-sys-color-secondary-container: #2c3680;
+  --md-sys-color-on-secondary-container: #c9ceff;
+  --md-sys-color-tertiary: #f8acff;
+  --md-sys-color-on-tertiary: #570067;
+  --md-sys-color-tertiary-container: #a329bb;
+  --md-sys-color-on-tertiary-container: #ffffff;
+  --md-sys-color-error: #ffb4ab;
+  --md-sys-color-on-error: #690005;
+  --md-sys-color-error-container: #93000a;
+  --md-sys-color-on-error-container: #ffdad6;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mk-mode="light"])[data-mk-theme="super-blue"],
+  :root:not([data-mk-mode="light"]) [data-mk-theme="super-blue"] {
+    color-scheme: dark;
+    --md-sys-color-background: #12131c;
+    --md-sys-color-on-background: #e2e1ef;
+    --md-sys-color-surface: #12131c;
+    --md-sys-color-surface-dim: #12131c;
+    --md-sys-color-surface-bright: #383843;
+    --md-sys-color-surface-container-lowest: #0c0e17;
+    --md-sys-color-surface-container-low: #1a1b24;
+    --md-sys-color-surface-container: #1e1f29;
+    --md-sys-color-surface-container-high: #282933;
+    --md-sys-color-surface-container-highest: #33343e;
+    --md-sys-color-on-surface: #e2e1ef;
+    --md-sys-color-surface-variant: #444656;
+    --md-sys-color-on-surface-variant: #c5c5d9;
+    --md-sys-color-inverse-surface: #e2e1ef;
+    --md-sys-color-inverse-on-surface: #2f303a;
+    --md-sys-color-outline: #8f8fa2;
+    --md-sys-color-outline-variant: #444656;
+    --md-sys-color-shadow: #000000;
+    --md-sys-color-scrim: #000000;
+    --md-sys-color-surface-tint: #bcc2ff;
+    --md-sys-color-primary: #bcc2ff;
+    --md-sys-color-on-primary: #001999;
+    --md-sys-color-primary-container: #344df6;
+    --md-sys-color-on-primary-container: #ffffff;
+    --md-sys-color-inverse-primary: #2d46f0;
+    --md-sys-color-secondary: #bcc2ff;
+    --md-sys-color-on-secondary: #1d2872;
+    --md-sys-color-secondary-container: #2c3680;
+    --md-sys-color-on-secondary-container: #c9ceff;
+    --md-sys-color-tertiary: #f8acff;
+    --md-sys-color-on-tertiary: #570067;
+    --md-sys-color-tertiary-container: #a329bb;
+    --md-sys-color-on-tertiary-container: #ffffff;
+    --md-sys-color-error: #ffb4ab;
+    --md-sys-color-on-error: #690005;
+    --md-sys-color-error-container: #93000a;
+    --md-sys-color-on-error-container: #ffdad6;
+  }
+}