:root {
  --mdc-theme-primary: #6200ee;
  --mdc-theme-on-primary: #ebddff;
  --mdc-theme-text-primary-on-background: rgb(33, 8, 70);

  /* App-wide theme tokens (used by tabs/menus/toolbars/etc). */
  --playground-primary-color: var(--mdc-theme-primary);
  --playground-on-primary-color: var(--mdc-theme-on-primary);
  --playground-text-color: var(--mdc-theme-text-primary-on-background);
  --playground-muted-text-color: #666;
  --playground-border-color: #e0e0e0;
  --playground-surface-color: #fff;
  --playground-surface-2-color: #f8f3ff;
  --playground-toast-background: rgba(0, 0, 0, 0.85);
  --playground-toast-foreground: #fff;
  --playground-primary-soft: #6200ee4a;
  --playground-warning-background: rgb(255, 243, 205);
  --playground-warning-foreground: rgb(133, 100, 4);

  /* Global user text selection (outside CodeMirror). */
  --playground-selection-background: var(--playground-primary-color);
  --playground-selection-foreground: var(--playground-on-primary-color);

  --playground-topbar-background: var(--playground-primary-color);
  --playground-topbar-foreground: var(--playground-on-primary-color);

  --playground-background: #ededed;
  --playground-tab-bar-background: var(--mdc-theme-on-primary);
  --playground-tab-bar-foreground-color: var(--playground-muted-text-color);
  --playground-preview-toolbar-background: var(--playground-tab-bar-background);
  --playground-code-background: rgb(255, 255, 255) url("data:image/png;base64,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") repeat scroll 0% 0%/auto padding-box border-box;
  --playground-code-default-color: rgb(77, 73, 73);
  --playground-code-cursor-color: rgb(34, 34, 34);
  --playground-code-selection-background: rgb(204, 255, 204);
  --playground-code-linenumber-color: rgb(170, 170, 170);
  --playground-code-atom-color: rgb(255, 153, 0);
  --playground-code-attribute-color: rgb(214, 187, 109);
  --playground-code-builtin-color: rgb(155, 117, 54);
  --playground-code-comment-color: rgb(119, 119, 119);
  --playground-code-def-color: rgb(0, 119, 170);
  --playground-code-keyword-color: rgb(98, 98, 255);
  --playground-code-meta-color: rgb(0, 0, 0);
  --playground-code-number-color: rgb(202, 120, 65);
  --playground-code-operator-color: rgb(205, 168, 105);
  --playground-code-qualifier-color: rgb(102, 153, 0);
  --playground-code-string-color: rgb(0, 119, 170);
  --playground-code-string-2-color: rgb(189, 107, 24);
  --playground-code-tag-color: rgb(102, 153, 0);
  --playground-code-type-color: rgb(0, 119, 170);
  --playground-code-variable-color: rgb(0, 119, 170);
  --playground-code-variable-2-color: rgb(102, 153, 0);
  --playground-code-variable-3-color: rgb(0, 119, 170);
  --playground-code-callee-color: rgb(153, 153, 153);
  --playground-code-property-color: rgb(153, 0, 85);
  --playground-highlight-color: var(--mdc-theme-primary);
  --playground-preview-toolbar-foreground-color: var(--mdc-theme-primary);
  --playground-tab-bar-active-color: var(--mdc-theme-primary);
  --playground-tab-bar-indicator-color: var(--mdc-theme-primary);
  --playground-border: none;

  --md-sys-color-primary: var(--mdc-theme-primary);
  --md-sys-color-on-primary: var(--mdc-theme-on-primary);
  --md-sys-color-secondary: #ebddff;
  --md-sys-color-on-secondary: rgb(33, 8, 70);
  --md-sys-color-background: var(--playground-background);
  --md-sys-color-on-background: var(--playground-text-color);
  --md-sys-color-surface: var(--playground-surface-color);
  --md-sys-color-on-surface: var(--playground-text-color);
  --md-sys-color-on-surface-variant: var(--playground-muted-text-color);
  --md-sys-color-outline: var(--playground-border-color);
  --md-sys-color-outline-variant: var(--playground-border-color);
  --md-sys-color-surface-variant: var(--playground-surface-2-color);
  --md-sys-color-surface-container: var(--playground-surface-color);
  --md-sys-color-surface-container-low: var(--playground-surface-color);
  --md-sys-color-surface-container-lowest: var(--playground-background);
  --md-sys-color-surface-container-high: var(--playground-surface-2-color);
  --md-sys-color-surface-container-highest: var(--playground-surface-2-color);
  --md-ref-typeface-brand: sans-serif;
  --md-ref-typeface-plain: sans-serif;
  --md-dialog-headline-color: var(--mdc-theme-primary);
}

[data-theme="yonce"] {
  color-scheme: dark;
  --mdc-theme-primary: rgb(252, 67, 132);
  --mdc-theme-on-primary: rgb(28, 28, 28);
  --playground-background: rgb(20, 20, 20);
  --playground-surface-color: rgb(28, 28, 28);
  --playground-surface-2-color: rgb(36, 36, 36);
  --playground-text-color: rgb(212, 212, 212);
  --playground-muted-text-color: rgb(155, 155, 155);
  --playground-border-color: rgb(50, 50, 50);
  --playground-primary-soft: rgba(252, 67, 132, 0.29);
  --playground-tab-bar-background: var(--playground-surface-color);
  --playground-preview-toolbar-background: var(--playground-surface-color);

  --playground-code-background: rgb(28, 28, 28);
  --playground-code-default-color: rgb(212, 212, 212);
  --playground-code-cursor-color: rgb(252, 67, 132);
  --playground-code-selection-background: rgba(252, 69, 133, 0.48);
  --playground-code-gutter-background: rgb(28, 28, 28);
  --playground-code-gutter-border-right: 0px;
  --playground-code-linenumber-color: rgb(119, 119, 119);
  --playground-code-atom-color: rgb(243, 155, 53);
  --playground-code-attribute-color: rgb(160, 111, 202);
  --playground-code-builtin-color: rgb(252, 67, 132);
  --playground-code-comment-color: rgb(105, 109, 112);
  --playground-code-def-color: rgb(152, 227, 66);
  --playground-code-keyword-color: rgb(0, 167, 170);
  --playground-code-meta-color: rgb(212, 212, 212);
  --playground-code-number-color: rgb(160, 111, 202);
  --playground-code-operator-color: rgb(252, 67, 132);
  --playground-code-qualifier-color: rgb(252, 67, 132);
  --playground-code-string-color: rgb(230, 219, 116);
  --playground-code-string-2-color: rgb(243, 155, 53);
  --playground-code-tag-color: rgb(252, 67, 132);
  --playground-code-type-color: rgb(160, 111, 202);
  --playground-code-variable-color: rgb(212, 212, 212);
  --playground-code-variable-2-color: rgb(218, 125, 174);
  --playground-code-variable-3-color: rgb(160, 111, 202);
  --playground-code-callee-color: rgb(252, 67, 132);
  --playground-code-property-color: rgb(212, 212, 212);
}

[data-theme="shadowfox"] {
  color-scheme: dark;
  --mdc-theme-primary: rgb(255, 125, 233);
  --mdc-theme-on-primary: rgb(12, 12, 13);
  --playground-background: rgb(12, 12, 13);
  --playground-surface-color: rgb(42, 42, 46);
  --playground-surface-2-color: rgb(53, 53, 72);
  --playground-text-color: rgb(215, 215, 219);
  --playground-muted-text-color: rgb(177, 177, 179);
  --playground-border-color: rgb(54, 54, 60);
  --playground-primary-soft: rgba(255, 125, 233, 0.25);
  --playground-tab-bar-background: rgb(12, 12, 13);
  --playground-preview-toolbar-background: rgb(12, 12, 13);

  --playground-code-background: rgb(42, 42, 46);
  --playground-code-default-color: rgb(177, 177, 179);
  --playground-code-cursor-color: rgb(255, 255, 255);
  --playground-code-selection-background: rgb(53, 59, 72);
  --playground-code-gutter-background: rgb(12, 12, 13);
  --playground-code-gutter-border-right: 1px solid rgb(12, 12, 13);
  --playground-code-linenumber-color: rgb(147, 147, 147);
  --playground-code-atom-color: rgb(255, 125, 233);
  --playground-code-attribute-color: rgb(255, 125, 233);
  --playground-code-builtin-color: rgb(255, 125, 233);
  --playground-code-comment-color: rgb(147, 147, 147);
  --playground-code-def-color: rgb(117, 191, 255);
  --playground-code-keyword-color: rgb(255, 125, 233);
  --playground-code-meta-color: rgb(147, 147, 147);
  --playground-code-number-color: rgb(107, 137, 255);
  --playground-code-operator-color: rgb(177, 177, 179);
  --playground-code-qualifier-color: rgb(117, 191, 255);
  --playground-code-string-color: rgb(107, 137, 255);
  --playground-code-string-2-color: rgb(107, 137, 255);
  --playground-code-tag-color: rgb(117, 191, 255);
  --playground-code-type-color: rgb(177, 177, 179);
  --playground-code-variable-color: rgb(185, 142, 255);
  --playground-code-variable-2-color: rgb(117, 191, 255);
  --playground-code-variable-3-color: rgb(215, 215, 219);
  --playground-code-callee-color: rgb(177, 177, 179);
  --playground-code-property-color: rgb(134, 222, 116);
}

[data-theme="rubyblue"] {
  color-scheme: dark;
  --mdc-theme-primary: rgb(107, 137, 255);
  --mdc-theme-on-primary: rgb(255, 255, 255);
  --playground-background: rgb(17, 36, 53);
  --playground-surface-color: rgb(17, 36, 53);
  --playground-surface-2-color: rgb(31, 70, 97);
  --playground-text-color: rgb(255, 255, 255);
  --playground-muted-text-color: rgb(200, 210, 220);
  --playground-border-color: rgb(62, 112, 135);
  --playground-primary-soft: rgba(107, 137, 255, 0.28);
  --playground-tab-bar-background: rgb(31, 70, 97);
  --playground-preview-toolbar-background: rgb(31, 70, 97);

  --playground-code-background: rgb(17, 36, 53);
  --playground-code-default-color: rgb(255, 255, 255);
  --playground-code-cursor-color: rgb(255, 255, 255);
  --playground-code-selection-background: rgb(56, 86, 111);
  --playground-code-gutter-background: rgb(31, 70, 97);
  --playground-code-gutter-border-right: 7px solid rgb(62, 112, 135);
  --playground-code-linenumber-color: rgb(255, 255, 255);
  --playground-code-atom-color: rgb(244, 194, 11);
  --playground-code-attribute-color: rgb(130, 198, 224);
  --playground-code-builtin-color: rgb(255, 157, 0);
  --playground-code-comment-color: rgb(153, 153, 153);
  --playground-code-def-color: rgb(255, 255, 255);
  --playground-code-keyword-color: rgb(255, 0, 255);
  --playground-code-meta-color: rgb(255, 0, 255);
  --playground-code-number-color: rgb(130, 198, 224);
  --playground-code-operator-color: rgb(255, 255, 255);
  --playground-code-qualifier-color: rgb(255, 255, 255);
  --playground-code-string-color: rgb(240, 128, 71);
  --playground-code-string-2-color: rgb(255, 255, 255);
  --playground-code-tag-color: rgb(123, 216, 39);
  --playground-code-type-color: rgb(255, 255, 255);
  --playground-code-variable-color: rgb(255, 255, 255);
  --playground-code-variable-2-color: rgb(123, 216, 39);
  --playground-code-variable-3-color: rgb(255, 255, 255);
  --playground-code-callee-color: rgb(255, 255, 255);
  --playground-code-property-color: rgb(255, 255, 255);
}

[data-theme="night"] {
  color-scheme: dark;
  --mdc-theme-primary: rgb(89, 158, 255);
  --mdc-theme-on-primary: rgb(10, 0, 31);
  --playground-background: rgb(10, 0, 31);
  --playground-surface-color: rgb(20, 10, 60);
  --playground-surface-2-color: rgb(31, 24, 82);
  --playground-text-color: rgb(248, 248, 248);
  --playground-muted-text-color: rgb(190, 190, 220);
  --playground-border-color: rgb(68, 68, 119);
  --playground-primary-soft: rgba(89, 158, 255, 0.28);
  --playground-tab-bar-background: rgb(20, 10, 60);
  --playground-preview-toolbar-background: rgb(20, 10, 60);

  --playground-code-background: rgb(10, 0, 31);
  --playground-code-default-color: rgb(248, 248, 248);
  --playground-code-cursor-color: rgb(255, 255, 255);
  --playground-code-selection-background: rgb(68, 68, 119);
  --playground-code-gutter-background: rgb(10, 0, 31);
  --playground-code-gutter-border-right: 1px solid rgb(170, 170, 170);
  --playground-code-linenumber-color: rgb(248, 248, 248);
  --playground-code-atom-color: rgb(132, 93, 196);
  --playground-code-attribute-color: rgb(255, 213, 0);
  --playground-code-builtin-color: rgb(255, 158, 89);
  --playground-code-comment-color: rgb(137, 0, 209);
  --playground-code-def-color: rgb(255, 255, 255);
  --playground-code-keyword-color: rgb(89, 158, 255);
  --playground-code-meta-color: rgb(118, 120, 226);
  --playground-code-number-color: rgb(255, 213, 0);
  --playground-code-operator-color: rgb(248, 248, 248);
  --playground-code-qualifier-color: rgb(248, 248, 248);
  --playground-code-string-color: rgb(55, 241, 74);
  --playground-code-string-2-color: rgb(248, 248, 248);
  --playground-code-tag-color: rgb(153, 178, 255);
  --playground-code-type-color: rgb(255, 255, 255);
  --playground-code-variable-color: rgb(248, 248, 248);
  --playground-code-variable-2-color: rgb(153, 178, 255);
  --playground-code-variable-3-color: rgb(255, 255, 255);
  --playground-code-callee-color: rgb(248, 248, 248);
  --playground-code-property-color: rgb(248, 248, 248);
}

[data-theme="github-light"] {
  color-scheme: light;

  /* GitHub light palette (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #0969da;
  --mdc-theme-on-primary: #ffffff;

  --playground-background: #ffffff;
  --playground-surface-color: #ffffff;
  --playground-surface-2-color: #f6f8fa;
  --playground-text-color: #24292e;
  --playground-muted-text-color: #6e7781;
  --playground-border-color: #e1e4e8;
  --playground-primary-soft: rgba(9, 105, 218, 0.18);

  /* Keep top bar subtle (like GitHub header backgrounds in light mode). */
  --playground-topbar-background: #f6f8fa;
  --playground-topbar-foreground: #24292e;

  --playground-tab-bar-background: #f6f8fa;
  --playground-preview-toolbar-background: #f6f8fa;

  /* Global selection (outside CodeMirror). */
  --playground-selection-background: #bbdfff;
  --playground-selection-foreground: #24292e;

  /* CodeMirror / editor tokens. */
  --playground-code-background: #ffffff;
  --playground-code-default-color: #24292e;
  --playground-code-cursor-color: #24292e;
  --playground-code-selection-background: #bbdfff;
  --playground-code-gutter-background: #f6f8fa;
  --playground-code-gutter-border-right: 1px solid #e1e4e8;
  --playground-code-linenumber-color: #6e7781;

  --playground-code-atom-color: #e36209;
  --playground-code-attribute-color: #6f42c1;
  --playground-code-builtin-color: #005cc5;
  --playground-code-comment-color: #6a737d;
  --playground-code-def-color: #22863a;
  --playground-code-keyword-color: #d73a49;
  --playground-code-meta-color: #6a737d;
  --playground-code-number-color: #e36209;
  --playground-code-operator-color: #24292e;
  --playground-code-qualifier-color: #d73a49;
  --playground-code-string-color: #032f62;
  --playground-code-string-2-color: #032f62;
  --playground-code-tag-color: #116329;
  --playground-code-type-color: #d73a49;
  --playground-code-variable-color: #005cc5;
  --playground-code-variable-2-color: #6f42c1;
  --playground-code-variable-3-color: #005cc5;
  --playground-code-callee-color: #22863a;
  --playground-code-property-color: #6f42c1;
}

[data-theme="github-dark"] {
  color-scheme: dark;

  /* GitHub dark palette (inspired by GitHub Dark + upstream CodeMirror theme). */
  --mdc-theme-primary: #58a6ff;
  --mdc-theme-on-primary: #0d1117;

  --playground-background: #0d1117;
  --playground-surface-color: #161b22;
  --playground-surface-2-color: #21262d;
  --playground-text-color: #c9d1d9;
  --playground-muted-text-color: #8b949e;
  --playground-border-color: #30363d;
  --playground-primary-soft: rgba(88, 166, 255, 0.25);

  /* Keep the top bar GitHub-dark rather than using the accent color. */
  --playground-topbar-background: #161b22;
  --playground-topbar-foreground: #c9d1d9;

  --playground-tab-bar-background: #161b22;
  --playground-preview-toolbar-background: #161b22;

  /* Global selection (outside CodeMirror). */
  --playground-selection-background: #264f78;
  --playground-selection-foreground: #c9d1d9;

  /* CodeMirror / editor tokens (used by playground-elements). */
  --playground-code-background: #0d1117;
  --playground-code-default-color: #c9d1d9;
  --playground-code-cursor-color: #ffffff;
  --playground-code-selection-background: #264f78;
  --playground-code-gutter-background: #161b22;
  --playground-code-gutter-border-right: 1px solid #30363d;
  --playground-code-linenumber-color: #8b949e;

  --playground-code-atom-color: #ffab70;
  --playground-code-attribute-color: #d2a8ff;
  --playground-code-builtin-color: #ff7b72;
  --playground-code-comment-color: #8b949e;
  --playground-code-def-color: #7ee787;
  --playground-code-keyword-color: #ff7b72;
  --playground-code-meta-color: #8b949e;
  --playground-code-number-color: #ffab70;
  --playground-code-operator-color: #c9d1d9;
  --playground-code-qualifier-color: #ff7b72;
  --playground-code-string-color: #a5d6ff;
  --playground-code-string-2-color: #a5d6ff;
  --playground-code-tag-color: #7ee787;
  --playground-code-type-color: #ff7b72;
  --playground-code-variable-color: #79c0ff;
  --playground-code-variable-2-color: #d2a8ff;
  --playground-code-variable-3-color: #79c0ff;
  --playground-code-callee-color: #7ee787;
  --playground-code-property-color: #d2a8ff;
}

[data-theme="solarized-dark"] {
  color-scheme: dark;

  /* Solarized Dark (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #268bd2;
  --mdc-theme-on-primary: #002b36;

  --playground-background: #002b36;
  --playground-surface-color: #073642;
  --playground-surface-2-color: #00252f;
  --playground-text-color: #93a1a1;
  --playground-muted-text-color: #657b83;
  --playground-border-color: #073642;
  --playground-primary-soft: rgba(38, 139, 210, 0.25);

  --playground-topbar-background: #073642;
  --playground-topbar-foreground: #93a1a1;

  --playground-tab-bar-background: #073642;
  --playground-preview-toolbar-background: #073642;

  --playground-selection-background: #02b8ff3f;
  --playground-selection-foreground: #eee8d5;

  --playground-code-background: #002b36;
  --playground-code-default-color: #93a1a1;
  --playground-code-cursor-color: #839496;
  --playground-code-selection-background: #02b8ff3f;
  --playground-code-gutter-background: #00252f;
  --playground-code-gutter-border-right: 1px solid #073642;
  --playground-code-linenumber-color: #586e75;

  --playground-code-atom-color: #d33682;
  --playground-code-attribute-color: #93a1a1;
  --playground-code-builtin-color: #6c71c4;
  --playground-code-comment-color: #586e75;
  --playground-code-def-color: #268bd2;
  --playground-code-keyword-color: #859900;
  --playground-code-meta-color: #dc322f;
  --playground-code-number-color: #d33682;
  --playground-code-operator-color: #6c71c4;
  --playground-code-qualifier-color: #859900;
  --playground-code-string-color: #b58900;
  --playground-code-string-2-color: #b58900;
  --playground-code-tag-color: #268bd2;
  --playground-code-type-color: #cb4b16;
  --playground-code-variable-color: #93a1a1;
  --playground-code-variable-2-color: #2aa198;
  --playground-code-variable-3-color: #d33682;
  --playground-code-callee-color: #268bd2;
  --playground-code-property-color: #2aa198;
}

[data-theme="solarized-light"] {
  color-scheme: light;

  /* Solarized Light (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #268bd2;
  --mdc-theme-on-primary: #fdf6e3;

  --playground-background: #fdf6e3;
  --playground-surface-color: #fdf6e3;
  --playground-surface-2-color: #eee8d5;
  --playground-text-color: #657b83;
  --playground-muted-text-color: #586e75;
  --playground-border-color: #dfd9c8;
  --playground-primary-soft: rgba(38, 139, 210, 0.18);

  --playground-topbar-background: #eee8d5;
  --playground-topbar-foreground: #657b83;

  --playground-tab-bar-background: #eee8d5;
  --playground-preview-toolbar-background: #eee8d5;

  --playground-selection-background: #ffd07a;
  --playground-selection-foreground: #073642;

  --playground-code-background: #fdf6e3;
  --playground-code-default-color: #657b83;
  --playground-code-cursor-color: #586e75;
  --playground-code-selection-background: #ffd07a;
  --playground-code-gutter-background: #dfd9c8;
  --playground-code-gutter-border-right: 1px solid #dfd9c8;
  --playground-code-linenumber-color: #586e75;

  --playground-code-atom-color: #d33682;
  --playground-code-attribute-color: #657b83;
  --playground-code-builtin-color: #6c71c4;
  --playground-code-comment-color: #586e75;
  --playground-code-def-color: #268bd2;
  --playground-code-keyword-color: #859900;
  --playground-code-meta-color: #dc322f;
  --playground-code-number-color: #d33682;
  --playground-code-operator-color: #6c71c4;
  --playground-code-qualifier-color: #859900;
  --playground-code-string-color: #b58900;
  --playground-code-string-2-color: #b58900;
  --playground-code-tag-color: #268bd2;
  --playground-code-type-color: #cb4b16;
  --playground-code-variable-color: #657b83;
  --playground-code-variable-2-color: #2aa198;
  --playground-code-variable-3-color: #d33682;
  --playground-code-callee-color: #268bd2;
  --playground-code-property-color: #2aa198;
}

[data-theme="dracula"] {
  color-scheme: dark;

  /* Dracula (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #bd93f9;
  --mdc-theme-on-primary: #282a36;

  --playground-background: #282a36;
  --playground-surface-color: #282a36;
  --playground-surface-2-color: rgba(255, 255, 255, 0.06);
  --playground-text-color: #f8f8f2;
  --playground-muted-text-color: #6d8a88;
  --playground-border-color: rgba(255, 255, 255, 0.2);
  --playground-primary-soft: rgba(189, 147, 249, 0.25);

  --playground-topbar-background: #282a36;
  --playground-topbar-foreground: #f8f8f2;

  --playground-tab-bar-background: #282a36;
  --playground-preview-toolbar-background: #282a36;

  --playground-selection-background: rgba(255, 255, 255, 0.1);
  --playground-selection-foreground: #f8f8f2;

  --playground-code-background: #282a36;
  --playground-code-default-color: #f8f8f2;
  --playground-code-cursor-color: #f8f8f0;
  --playground-code-selection-background: rgba(255, 255, 255, 0.1);
  --playground-code-gutter-background: #282a36;
  --playground-code-gutter-border-right: 1px solid rgba(255, 255, 255, 0.2);
  --playground-code-linenumber-color: #6d8a88;

  --playground-code-atom-color: #bd93f9;
  --playground-code-attribute-color: #50fa7b;
  --playground-code-builtin-color: #bd93f9;
  --playground-code-comment-color: #6272a4;
  --playground-code-def-color: #50fa7b;
  --playground-code-keyword-color: #ff79c6;
  --playground-code-meta-color: #f8f8f2;
  --playground-code-number-color: #bd93f9;
  --playground-code-operator-color: #ff79c6;
  --playground-code-qualifier-color: #ff79c6;
  --playground-code-string-color: #f1fa8c;
  --playground-code-string-2-color: #f1fa8c;
  --playground-code-tag-color: #ff79c6;
  --playground-code-type-color: #66d9ef;
  --playground-code-variable-color: #f8f8f2;
  --playground-code-variable-2-color: #50fa7b;
  --playground-code-variable-3-color: #66d9ef;
  --playground-code-callee-color: #66d9ef;
  --playground-code-property-color: #66d9ef;
}

[data-theme="nord"] {
  color-scheme: dark;

  /* Nord (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #88c0d0;
  --mdc-theme-on-primary: #2e3440;

  --playground-background: #2e3440;
  --playground-surface-color: #3b4252;
  --playground-surface-2-color: #434c5e;
  --playground-text-color: #d8dee9;
  --playground-muted-text-color: #a7b0bf;
  --playground-border-color: #434c5e;
  --playground-primary-soft: rgba(136, 192, 208, 0.25);

  --playground-topbar-background: #3b4252;
  --playground-topbar-foreground: #d8dee9;

  --playground-tab-bar-background: #3b4252;
  --playground-preview-toolbar-background: #3b4252;

  --playground-selection-background: #434c5e;
  --playground-selection-foreground: #eceff4;

  --playground-code-background: #2e3440;
  --playground-code-default-color: #d8dee9;
  --playground-code-cursor-color: #d8dee9;
  --playground-code-selection-background: #434c5e;
  --playground-code-gutter-background: #252a33;
  --playground-code-gutter-border-right: 1px solid #434c5e;
  --playground-code-linenumber-color: #4c566a;

  --playground-code-atom-color: #b48ead;
  --playground-code-attribute-color: #ebcb8b;
  --playground-code-builtin-color: #81a1c1;
  --playground-code-comment-color: #4c566a;
  --playground-code-def-color: #8fbcbb;
  --playground-code-keyword-color: #5e81ac;
  --playground-code-meta-color: #4c566a;
  --playground-code-number-color: #d08770;
  --playground-code-operator-color: #b48ead;
  --playground-code-qualifier-color: #5e81ac;
  --playground-code-string-color: #a3be8c;
  --playground-code-string-2-color: #a3be8c;
  --playground-code-tag-color: #bf616a;
  --playground-code-type-color: #ebcb8b;
  --playground-code-variable-color: #d8dee9;
  --playground-code-variable-2-color: #88c0d0;
  --playground-code-variable-3-color: #81a1c1;
  --playground-code-callee-color: #8fbcbb;
  --playground-code-property-color: #88c0d0;
}

[data-theme="one-dark"] {
  color-scheme: dark;

  /* Atom One Dark (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: hsl(207, 82%, 66%);
  --mdc-theme-on-primary: #272c35;

  --playground-background: #272c35;
  --playground-surface-color: #272c35;
  --playground-surface-2-color: #3d4c64;
  --playground-text-color: #9d9b97;
  --playground-muted-text-color: #8a8885;
  --playground-border-color: #3d4c64;
  --playground-primary-soft: hsla(207, 82%, 66%, 0.25);

  --playground-topbar-background: #272c35;
  --playground-topbar-foreground: #9d9b97;

  --playground-tab-bar-background: #272c35;
  --playground-preview-toolbar-background: #272c35;

  --playground-selection-background: #3d4c64;
  --playground-selection-foreground: #9d9b97;

  --playground-code-background: #272c35;
  --playground-code-default-color: #9d9b97;
  --playground-code-cursor-color: #797977;
  --playground-code-selection-background: #3d4c64;
  --playground-code-gutter-background: #272c35;
  --playground-code-gutter-border-right: 1px solid #3d4c64;
  --playground-code-linenumber-color: #465063;

  --playground-code-atom-color: hsl(286, 60%, 67%);
  --playground-code-attribute-color: hsl(29, 54%, 61%);
  --playground-code-builtin-color: hsl(286, 60%, 67%);
  --playground-code-comment-color: #54636d;
  --playground-code-def-color: hsl(207, 82%, 66%);
  --playground-code-keyword-color: hsl(286, 60%, 67%);
  --playground-code-meta-color: #9d9b97;
  --playground-code-number-color: hsl(29, 54%, 61%);
  --playground-code-operator-color: hsl(286, 60%, 67%);
  --playground-code-qualifier-color: hsl(286, 60%, 67%);
  --playground-code-string-color: #98c379;
  --playground-code-string-2-color: #98c379;
  --playground-code-tag-color: #e06c75;
  --playground-code-type-color: hsl(39, 67%, 69%);
  --playground-code-variable-color: #9d9b97;
  --playground-code-variable-2-color: hsl(207, 82%, 66%);
  --playground-code-variable-3-color: hsl(220, 14%, 71%);
  --playground-code-callee-color: hsl(207, 82%, 66%);
  --playground-code-property-color: hsl(220, 14%, 71%);
}

[data-theme="one-light"] {
  color-scheme: light;

  /* Atom One Light (inspired by Atom One Light syntax theme). */
  --mdc-theme-primary: hsl(221, 87%, 60%);
  --mdc-theme-on-primary: #ffffff;

  --playground-background: hsl(230, 1%, 98%);
  --playground-surface-color: #ffffff;
  --playground-surface-2-color: hsl(230, 1%, 94%);
  --playground-text-color: hsl(230, 8%, 24%);
  --playground-muted-text-color: hsl(230, 6%, 44%);
  --playground-border-color: hsl(230, 1%, 85%);
  --playground-primary-soft: hsla(221, 87%, 60%, 0.18);

  --playground-topbar-background: hsl(230, 1%, 94%);
  --playground-topbar-foreground: hsl(230, 8%, 24%);

  --playground-tab-bar-background: hsl(230, 1%, 94%);
  --playground-preview-toolbar-background: hsl(230, 1%, 94%);

  --playground-selection-background: hsl(230, 1%, 90%);
  --playground-selection-foreground: hsl(230, 8%, 24%);

  --playground-code-background: hsl(230, 1%, 98%);
  --playground-code-default-color: hsl(230, 8%, 24%);
  --playground-code-cursor-color: hsl(230, 100%, 66%);
  --playground-code-selection-background: hsl(230, 1%, 90%);
  --playground-code-gutter-background: hsl(230, 1%, 98%);
  --playground-code-gutter-border-right: 1px solid hsl(230, 1%, 85%);
  --playground-code-linenumber-color: hsl(230, 1%, 62%);

  --playground-code-atom-color: hsl(221, 87%, 60%);
  --playground-code-attribute-color: hsl(41, 99%, 30%);
  --playground-code-builtin-color: hsl(221, 87%, 60%);
  --playground-code-comment-color: hsl(230, 6%, 44%);
  --playground-code-def-color: hsl(221, 87%, 60%);
  --playground-code-keyword-color: hsl(301, 63%, 40%);
  --playground-code-meta-color: hsl(230, 6%, 44%);
  --playground-code-number-color: hsl(41, 99%, 30%);
  --playground-code-operator-color: hsl(230, 8%, 24%);
  --playground-code-qualifier-color: hsl(301, 63%, 40%);
  --playground-code-string-color: hsl(119, 34%, 47%);
  --playground-code-string-2-color: hsl(119, 34%, 47%);
  --playground-code-tag-color: hsl(5, 74%, 59%);
  --playground-code-type-color: hsl(41, 99%, 38%);
  --playground-code-variable-color: hsl(230, 8%, 24%);
  --playground-code-variable-2-color: hsl(5, 74%, 59%);
  --playground-code-variable-3-color: hsl(221, 87%, 60%);
  --playground-code-callee-color: hsl(221, 87%, 60%);
  --playground-code-property-color: hsl(230, 8%, 24%);
}

[data-theme="gruvbox-dark"] {
  color-scheme: dark;

  /* Gruvbox Dark (inspired by upstream CodeMirror theme). */
  --mdc-theme-primary: #fe8019;
  --mdc-theme-on-primary: #282828;

  --playground-background: #282828;
  --playground-surface-color: #3c3836;
  --playground-surface-2-color: #504945;
  --playground-text-color: #ebdbb2;
  --playground-muted-text-color: #928374;
  --playground-border-color: #504945;
  --playground-primary-soft: rgba(254, 128, 25, 0.25);

  --playground-topbar-background: #3c3836;
  --playground-topbar-foreground: #ebdbb2;

  --playground-tab-bar-background: #3c3836;
  --playground-preview-toolbar-background: #3c3836;

  --playground-selection-background: #504945;
  --playground-selection-foreground: #fbf1c7;

  --playground-code-background: #282828;
  --playground-code-default-color: #ebdbb2;
  --playground-code-cursor-color: #fe8019;
  --playground-code-selection-background: #504945;
  --playground-code-gutter-background: #3c3836;
  --playground-code-gutter-border-right: 1px solid #504945;
  --playground-code-linenumber-color: #928374;

  --playground-code-atom-color: #fe8019;
  --playground-code-attribute-color: #fabd2f;
  --playground-code-builtin-color: #fb4934;
  --playground-code-comment-color: #928374;
  --playground-code-def-color: #fabd2f;
  --playground-code-keyword-color: #fb4934;
  --playground-code-meta-color: #928374;
  --playground-code-number-color: #d3869b;
  --playground-code-operator-color: #ebdbb2;
  --playground-code-qualifier-color: #fb4934;
  --playground-code-string-color: #b8bb26;
  --playground-code-string-2-color: #b8bb26;
  --playground-code-tag-color: #fb4934;
  --playground-code-type-color: #8ec07c;
  --playground-code-variable-color: #83a598;
  --playground-code-variable-2-color: #83a598;
  --playground-code-variable-3-color: #8ec07c;
  --playground-code-callee-color: #fabd2f;
  --playground-code-property-color: #8ec07c;
}

[data-theme="ssms"] {
  color-scheme: light;
  --mdc-theme-primary: rgb(0, 0, 255);
  --mdc-theme-on-primary: rgb(255, 255, 255);
  --playground-background: rgb(255, 255, 255);
  --playground-surface-color: rgb(255, 255, 255);
  --playground-surface-2-color: rgb(255, 250, 220);
  --playground-text-color: rgb(0, 0, 0);
  --playground-muted-text-color: rgb(90, 90, 90);
  --playground-border-color: rgb(224, 224, 224);
  --playground-primary-soft: rgba(0, 0, 255, 0.18);
  --playground-tab-bar-background: rgb(255, 250, 220);
  --playground-preview-toolbar-background: rgb(255, 250, 220);

  --playground-code-selection-background: rgb(173, 214, 255);
  --playground-code-gutter-background: rgb(255, 255, 255);
  --playground-code-gutter-border-right: 3px solid rgb(255, 238, 98);
  --playground-code-linenumber-color: rgb(0, 128, 128);
  --playground-code-atom-color: rgb(169, 169, 169);
  --playground-code-attribute-color: rgb(0, 0, 0);
  --playground-code-builtin-color: rgb(0, 0, 0);
  --playground-code-comment-color: rgb(0, 100, 0);
  --playground-code-def-color: rgb(0, 0, 0);
  --playground-code-keyword-color: rgb(0, 0, 255);
  --playground-code-meta-color: rgb(0, 0, 0);
  --playground-code-number-color: rgb(0, 0, 0);
  --playground-code-operator-color: rgb(169, 169, 169);
  --playground-code-qualifier-color: rgb(0, 0, 0);
  --playground-code-string-color: rgb(255, 0, 0);
  --playground-code-string-2-color: rgb(255, 0, 255);
  --playground-code-tag-color: rgb(0, 0, 0);
  --playground-code-type-color: rgb(0, 0, 0);
  --playground-code-variable-2-color: rgb(0, 0, 0);
  --playground-code-variable-3-color: rgb(0, 0, 0);
}