@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .studio-docs-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: #3a404c;
    color: #d7dce4;
  }

  :root:not([data-theme]) .studio-docs-button:hover,
  :root:not([data-theme]) .studio-docs-button:focus-visible {
    background: #2b303a;
    border-color: #566070;
    color: #ffffff;
  }

  :root:not([data-theme]) .current-example-chip {
    border-color: transparent;
    background: transparent;
    color: #cbd5e1;
  }

  :root:not([data-theme]) .studio-main {
    background: #171a21;
  }

  :root:not([data-theme]) .studio-editors,
  :root:not([data-theme]) .studio-editor-panel,
  :root:not([data-theme]) .studio-editor,
  :root:not([data-theme]) .studio-editor-shell,
  :root:not([data-theme]) .studio-editor-highlight,
  :root:not([data-theme]) .studio-codemirror .cm-editor,
  :root:not([data-theme]) .studio-codemirror .cm-gutters {
    background: #171a21;
    color: #d7dce4;
  }

  :root:not([data-theme]) .studio-editor-overlay {
    background: transparent;
    color: transparent;
    caret-color: #d7dce4;
    -webkit-text-fill-color: transparent;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-key {
    color: #60a5fa;
  }

  :root:not([data-theme]) .studio-codemirror .cm-content {
    caret-color: #d7dce4;
  }

  :root:not([data-theme]) .studio-codemirror .cm-cursor {
    border-left-color: #d7dce4;
  }

  :root:not([data-theme]) .studio-codemirror .cm-gutters {
    border-right-color: #2f3745;
    color: #64748b;
  }

  :root:not([data-theme]) .studio-codemirror .cm-foldPlaceholder {
    border-color: #4b5565;
    background: #252b35;
    color: #a9b4c4;
  }

  :root:not([data-theme]) .studio-codemirror .cm-activeLine,
  :root:not([data-theme]) .studio-codemirror .cm-activeLineGutter {
    background-color: rgba(96, 165, 250, 0.08) !important;
  }

  :root:not([data-theme]) .studio-codemirror .cm-selectionBackground,
  :root:not([data-theme]) .studio-codemirror .cm-focused .cm-selectionBackground,
  :root:not([data-theme]) .studio-codemirror .cm-content ::selection {
    background: rgba(96, 165, 250, 0.32);
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-string,
  :root:not([data-theme]) .studio-codemirror .syntax-string {
    color: #22d3ee;
  }

  :root:not([data-theme]) .studio-codemirror .syntax-string.syntax-type-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-string .syntax-type-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-type-reference .syntax-string {
    color: #7aa2d6;
  }

  :root:not([data-theme]) .studio-codemirror .syntax-string.syntax-field-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-string .syntax-field-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-field-reference .syntax-string {
    color: #c9a26d;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-type-key,
  :root:not([data-theme]) .studio-editor-highlight .syntax-type-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-type-key,
  :root:not([data-theme]) .studio-codemirror .syntax-type-reference {
    color: #7aa2d6;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-directive-key,
  :root:not([data-theme]) .studio-codemirror .syntax-directive-key {
    color: #b89ce8;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-field-key,
  :root:not([data-theme]) .studio-editor-highlight .syntax-field-reference,
  :root:not([data-theme]) .studio-codemirror .syntax-field-key,
  :root:not([data-theme]) .studio-codemirror .syntax-field-reference {
    color: #c9a26d;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-number,
  :root:not([data-theme]) .studio-codemirror .syntax-number {
    color: #4ade80;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-literal,
  :root:not([data-theme]) .studio-codemirror .syntax-literal {
    color: #fb923c;
  }

  :root:not([data-theme]) .studio-editor-highlight .syntax-comment,
  :root:not([data-theme]) .studio-editor-highlight .syntax-marker,
  :root:not([data-theme]) .studio-codemirror .syntax-comment,
  :root:not([data-theme]) .studio-codemirror .syntax-marker {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .studio-codemirror .cm-line.syntax-indent-guided {
    --indent-guide-color: rgba(148, 163, 184, 0.2);
  }

  :root:not([data-theme]) .studio-editors,
  :root:not([data-theme]) .studio-panel-header {
    border-color: #3a404c;
  }

  :root:not([data-theme]) .studio-panel-header {
    background: #1f2229;
  }

  :root:not([data-theme]) .studio-panel-title {
    color: #d7dce4;
  }

  :root:not([data-theme]) .loaded-folder-chip {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
  }

  :root:not([data-theme]) .studio-panel-meta {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .studio-panel-action {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .studio-panel-action:hover,
  :root:not([data-theme]) .studio-panel-action:focus-visible {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-explorer {
    border-color: #3a404c;
    background: #1b1f27;
  }

  :root:not([data-theme]) .spec-explorer-header,
  :root:not([data-theme]) .spec-tree-folder-name {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .spec-tree-root-name {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-tree-file {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-tree-file.dirty {
    color: #f1f5f9;
  }

  :root:not([data-theme]) .spec-tree-folder-name:hover,
  :root:not([data-theme]) .spec-tree-folder-name:focus-visible,
  :root:not([data-theme]) .spec-tree-file:hover,
  :root:not([data-theme]) .spec-tree-file:focus-visible {
    background: #2b303a;
  }

  :root:not([data-theme]) .spec-tree-folder-name.selected,
  :root:not([data-theme]) .spec-tree-file.selected {
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.24);
  }

  :root:not([data-theme]) .spec-tree-file.active {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
  }

  :root:not([data-theme]) .spec-tree-dirty-marker {
    background: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.16);
  }

  :root:not([data-theme]) .spec-tree-menu-button:hover,
  :root:not([data-theme]) .spec-tree-menu-button:focus-visible {
    background: rgba(154, 165, 181, 0.14);
  }

  :root:not([data-theme]) .spec-tree-folder-children {
    border-color: #3a404c;
  }

  :root:not([data-theme]) .spec-context-menu {
    border-color: #444b59;
    background: #252a33;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  }

  :root:not([data-theme]) .spec-context-menu button {
    color: #e2e8f0;
  }

  :root:not([data-theme]) .spec-context-menu .app-icon {
    color: #8f9bad;
  }

  :root:not([data-theme]) .spec-context-separator {
    background: #4a5260;
  }

  :root:not([data-theme]) .spec-context-menu button:hover,
  :root:not([data-theme]) .spec-context-menu button:focus-visible {
    background: rgba(148, 163, 184, 0.13);
    color: #ffffff;
  }

  :root:not([data-theme]) .studio-editor-splitter,
  :root:not([data-theme]) .studio-output-splitter,
  :root:not([data-theme]) .studio-explorer-splitter {
    background: #3a404c;
  }

  :root:not([data-theme]) .semantic-empty {
    border-color: #566070;
    color: #9aa5b5;
  }

  :root:not([data-theme]) .semantic-error {
    border-color: rgba(240, 160, 141, 0.35);
    background: rgba(91, 54, 42, 0.42);
    color: #f0a08d;
  }

  :root:not([data-theme]) .studio-output.parse-error-active .output-error {
    background: transparent;
    color: #ffb4a3;
  }

  :root:not([data-theme]) .studio-output.parse-error-active {
    background: #171a21;
  }

  :root:not([data-theme]) .studio-output.parse-error-active .output-error-copy {
    border-color: rgba(240, 160, 141, 0.42);
    background: rgba(91, 54, 42, 0.42);
  }

  :root:not([data-theme]) .examples-dialog-panel,
  :root:not([data-theme]) .spec-dialog-panel,
  :root:not([data-theme]) .examples-list,
  :root:not([data-theme]) .spec-dialog-header,
  :root:not([data-theme]) .spec-dialog-footer,
  :root:not([data-theme]) .examples-dialog-header,
  :root:not([data-theme]) .examples-content-header,
  :root:not([data-theme]) .examples-preview,
  :root:not([data-theme]) .examples-doc code {
    background: #1f2229;
    border-color: #3a404c;
    color: #93c5fd;
  }

  :root:not([data-theme]) .examples-dialog-title,
  :root:not([data-theme]) .spec-dialog-title,
  :root:not([data-theme]) .examples-content-title,
  :root:not([data-theme]) .examples-doc h2,
  :root:not([data-theme]) .examples-doc h3,
  :root:not([data-theme]) .example-list-title,
  :root:not([data-theme]) .examples-preview pre {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-dialog-subtitle,
  :root:not([data-theme]) .spec-dialog-message,
  :root:not([data-theme]) .spec-dialog-field,
  :root:not([data-theme]) .examples-doc,
  :root:not([data-theme]) .examples-preview-title {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .example-list-item {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-dialog-field input {
    border-color: #3a404c;
    background: #171a21;
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-folder-option {
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-folder-option:hover,
  :root:not([data-theme]) .spec-folder-option:focus-visible {
    background: #2b303a;
  }

  :root:not([data-theme]) .spec-folder-option.selected {
    background: rgba(96, 165, 250, 0.18);
    color: #93c5fd;
  }

  :root:not([data-theme]) .spec-dialog-button.secondary {
    border-color: #3a404c;
    background: #171a21;
    color: #d7dce4;
  }

  :root:not([data-theme]) .spec-dialog-message.danger {
    color: #fca5a5;
  }

  :root:not([data-theme]) .example-list-item:hover,
  :root:not([data-theme]) .example-list-item:focus-visible {
    background: #2b303a;
  }

  :root:not([data-theme]) .example-list-item.active {
    border-color: #4f6ea6;
    background: rgba(79, 110, 166, 0.22);
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-key,
  :root:not([data-theme]) .examples-preview-yaml .syntax-type-key,
  :root:not([data-theme]) .examples-preview-yaml .syntax-marker {
    color: #60a5fa;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-string {
    color: #22d3ee;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-type-reference {
    color: #7aa2d6;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-directive-key {
    color: #b89ce8;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-field-key,
  :root:not([data-theme]) .examples-preview-yaml .syntax-field-reference {
    color: #c9a26d;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-number {
    color: #4ade80;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-literal {
    color: #fb923c;
  }

  :root:not([data-theme]) .examples-preview-yaml .syntax-comment {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .examples-doc pre {
    background: #171a21;
    border-color: #3a404c;
    color: #d7dce4;
  }

  :root:not([data-theme]) .examples-doc pre code {
    background: transparent;
    border: 0;
    color: inherit;
  }
}

:root[data-theme="dark"] .studio-docs-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: #3a404c;
  color: #d7dce4;
}

:root[data-theme="dark"] .studio-docs-button:hover,
:root[data-theme="dark"] .studio-docs-button:focus-visible {
  background: #2b303a;
  border-color: #566070;
  color: #ffffff;
}

:root[data-theme="dark"] .current-example-chip {
  border-color: transparent;
  background: transparent;
  color: #cbd5e1;
}

:root[data-theme="dark"] .studio-main {
  background: #171a21;
}

:root[data-theme="dark"] .studio-editors,
:root[data-theme="dark"] .studio-editor-panel,
:root[data-theme="dark"] .studio-editor,
:root[data-theme="dark"] .studio-editor-shell,
:root[data-theme="dark"] .studio-editor-highlight,
:root[data-theme="dark"] .studio-codemirror .cm-editor,
:root[data-theme="dark"] .studio-codemirror .cm-gutters {
  background: #171a21;
  color: #d7dce4;
}

:root[data-theme="dark"] .studio-editor-overlay {
  background: transparent;
  color: transparent;
  caret-color: #d7dce4;
  -webkit-text-fill-color: transparent;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-key {
  color: #60a5fa;
}

:root[data-theme="dark"] .studio-codemirror .cm-content {
  caret-color: #d7dce4;
}

:root[data-theme="dark"] .studio-codemirror .cm-cursor {
  border-left-color: #d7dce4;
}

:root[data-theme="dark"] .studio-codemirror .cm-gutters {
  border-right-color: #2f3745;
  color: #64748b;
}

:root[data-theme="dark"] .studio-codemirror .cm-foldPlaceholder {
  border-color: #4b5565;
  background: #252b35;
  color: #a9b4c4;
}

:root[data-theme="dark"] .studio-codemirror .cm-activeLine,
:root[data-theme="dark"] .studio-codemirror .cm-activeLineGutter {
  background-color: rgba(96, 165, 250, 0.08) !important;
}

:root[data-theme="dark"] .studio-codemirror .yaml-moving-node {
  background-color: rgba(129, 140, 248, 0.13);
  box-shadow: inset 2px 0 0 rgba(165, 180, 252, 0.44);
}

:root[data-theme="dark"] .studio-codemirror .cm-selectionBackground,
:root[data-theme="dark"] .studio-codemirror .cm-focused .cm-selectionBackground,
:root[data-theme="dark"] .studio-codemirror .cm-content ::selection {
  background: rgba(96, 165, 250, 0.32);
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-string,
:root[data-theme="dark"] .studio-codemirror .syntax-string {
  color: #22d3ee;
}

:root[data-theme="dark"] .studio-codemirror .syntax-string.syntax-type-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-string .syntax-type-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-type-reference .syntax-string {
  color: #7aa2d6;
}

:root[data-theme="dark"] .studio-codemirror .syntax-string.syntax-field-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-string .syntax-field-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-field-reference .syntax-string {
  color: #c9a26d;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-type-key,
:root[data-theme="dark"] .studio-editor-highlight .syntax-type-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-type-key,
:root[data-theme="dark"] .studio-codemirror .syntax-type-reference {
  color: #7aa2d6;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-directive-key,
:root[data-theme="dark"] .studio-codemirror .syntax-directive-key {
  color: #b89ce8;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-field-key,
:root[data-theme="dark"] .studio-editor-highlight .syntax-field-reference,
:root[data-theme="dark"] .studio-codemirror .syntax-field-key,
:root[data-theme="dark"] .studio-codemirror .syntax-field-reference {
  color: #c9a26d;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-number,
:root[data-theme="dark"] .studio-codemirror .syntax-number {
  color: #4ade80;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-literal,
:root[data-theme="dark"] .studio-codemirror .syntax-literal {
  color: #fb923c;
}

:root[data-theme="dark"] .studio-editor-highlight .syntax-comment,
:root[data-theme="dark"] .studio-editor-highlight .syntax-marker,
:root[data-theme="dark"] .studio-codemirror .syntax-comment,
:root[data-theme="dark"] .studio-codemirror .syntax-marker {
  color: #9aa5b5;
}

:root[data-theme="dark"] .studio-codemirror .cm-line.syntax-indent-guided {
  --indent-guide-color: rgba(148, 163, 184, 0.2);
}

:root[data-theme="dark"] .studio-editors,
:root[data-theme="dark"] .studio-panel-header {
  border-color: #3a404c;
}

:root[data-theme="dark"] .studio-panel-header {
  background: #1f2229;
}

:root[data-theme="dark"] .studio-panel-title {
  color: #d7dce4;
}

:root[data-theme="dark"] .loaded-folder-chip {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

:root[data-theme="dark"] .studio-panel-meta {
  color: #9aa5b5;
}

:root[data-theme="dark"] .studio-panel-action {
  color: #9aa5b5;
}

:root[data-theme="dark"] .studio-panel-action:hover,
:root[data-theme="dark"] .studio-panel-action:focus-visible {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-explorer {
  border-color: #3a404c;
  background: #1b1f27;
}

:root[data-theme="dark"] .spec-explorer-header,
:root[data-theme="dark"] .spec-tree-folder-name {
  color: #9aa5b5;
}

:root[data-theme="dark"] .spec-tree-root-name {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-tree-file {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-tree-file.dirty {
  color: #f1f5f9;
}

:root[data-theme="dark"] .spec-tree-folder-name:hover,
:root[data-theme="dark"] .spec-tree-folder-name:focus-visible,
:root[data-theme="dark"] .spec-tree-file:hover,
:root[data-theme="dark"] .spec-tree-file:focus-visible {
  background: #2b303a;
}

:root[data-theme="dark"] .spec-tree-folder-name.selected,
:root[data-theme="dark"] .spec-tree-file.selected {
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.24);
}

:root[data-theme="dark"] .spec-tree-file.active {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

:root[data-theme="dark"] .spec-tree-dirty-marker {
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.16);
}

:root[data-theme="dark"] .spec-tree-menu-button:hover,
:root[data-theme="dark"] .spec-tree-menu-button:focus-visible {
  background: rgba(154, 165, 181, 0.14);
}

:root[data-theme="dark"] .spec-tree-folder-children {
  border-color: #3a404c;
}

:root[data-theme="dark"] .spec-context-menu {
  border-color: #444b59;
  background: #252a33;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .spec-context-menu button {
  color: #e2e8f0;
}

:root[data-theme="dark"] .spec-context-menu .app-icon {
  color: #8f9bad;
}

:root[data-theme="dark"] .spec-context-separator {
  background: #4a5260;
}

:root[data-theme="dark"] .spec-context-menu button:hover,
:root[data-theme="dark"] .spec-context-menu button:focus-visible {
  background: rgba(148, 163, 184, 0.13);
  color: #ffffff;
}

:root[data-theme="dark"] .studio-editor-splitter,
:root[data-theme="dark"] .studio-output-splitter,
:root[data-theme="dark"] .studio-explorer-splitter {
  background: #3a404c;
}

:root[data-theme="dark"] .semantic-empty {
  border-color: #566070;
  color: #9aa5b5;
}

:root[data-theme="dark"] .semantic-error {
  border-color: rgba(240, 160, 141, 0.35);
  background: rgba(91, 54, 42, 0.42);
  color: #f0a08d;
}

:root[data-theme="dark"] .studio-output.parse-error-active .output-error {
  background: transparent;
  color: #ffb4a3;
}

:root[data-theme="dark"] .studio-output.parse-error-active {
  background: #171a21;
}

:root[data-theme="dark"] .studio-output.parse-error-active .output-error-copy {
  border-color: rgba(240, 160, 141, 0.42);
  background: rgba(91, 54, 42, 0.42);
}

:root[data-theme="dark"] .examples-dialog-panel,
:root[data-theme="dark"] .spec-dialog-panel,
:root[data-theme="dark"] .examples-list,
:root[data-theme="dark"] .spec-dialog-header,
:root[data-theme="dark"] .spec-dialog-footer,
:root[data-theme="dark"] .examples-dialog-header,
:root[data-theme="dark"] .examples-content-header,
:root[data-theme="dark"] .examples-preview,
:root[data-theme="dark"] .examples-doc code {
  background: #1f2229;
  border-color: #3a404c;
  color: #93c5fd;
}

:root[data-theme="dark"] .examples-dialog-title,
:root[data-theme="dark"] .spec-dialog-title,
:root[data-theme="dark"] .examples-content-title,
:root[data-theme="dark"] .examples-doc h2,
:root[data-theme="dark"] .examples-doc h3,
:root[data-theme="dark"] .example-list-title,
:root[data-theme="dark"] .examples-preview pre {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-dialog-subtitle,
:root[data-theme="dark"] .spec-dialog-message,
:root[data-theme="dark"] .spec-dialog-field,
:root[data-theme="dark"] .examples-doc,
:root[data-theme="dark"] .examples-preview-title {
  color: #9aa5b5;
}

:root[data-theme="dark"] .example-list-item {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-dialog-field input {
  border-color: #3a404c;
  background: #171a21;
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-folder-option {
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-folder-option:hover,
:root[data-theme="dark"] .spec-folder-option:focus-visible {
  background: #2b303a;
}

:root[data-theme="dark"] .spec-folder-option.selected {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

:root[data-theme="dark"] .spec-dialog-button.secondary {
  border-color: #3a404c;
  background: #171a21;
  color: #d7dce4;
}

:root[data-theme="dark"] .spec-dialog-message.danger {
  color: #fca5a5;
}

:root[data-theme="dark"] .example-list-item:hover,
:root[data-theme="dark"] .example-list-item:focus-visible {
  background: #2b303a;
}

:root[data-theme="dark"] .example-list-item.active {
  border-color: #4f6ea6;
  background: rgba(79, 110, 166, 0.22);
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-key,
:root[data-theme="dark"] .examples-preview-yaml .syntax-type-key,
:root[data-theme="dark"] .examples-preview-yaml .syntax-marker {
  color: #60a5fa;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-string {
  color: #22d3ee;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-type-reference {
  color: #7aa2d6;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-directive-key {
  color: #b89ce8;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-field-key,
:root[data-theme="dark"] .examples-preview-yaml .syntax-field-reference {
  color: #c9a26d;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-number {
  color: #4ade80;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-literal {
  color: #fb923c;
}

:root[data-theme="dark"] .examples-preview-yaml .syntax-comment {
  color: #9aa5b5;
}

:root[data-theme="dark"] .examples-doc pre {
  background: #171a21;
  border-color: #3a404c;
  color: #d7dce4;
}

:root[data-theme="dark"] .examples-doc pre code {
  background: transparent;
  border: 0;
  color: inherit;
}

.studio-page .view-button,
.studio-page .mini-action {
  color: #64748b;
}

.studio-page .view-button:hover,
.studio-page .view-button:focus-visible,
.studio-page .mini-action:hover,
.studio-page .mini-action:focus-visible {
  color: #1e293b;
}

.studio-page .view-button.active {
  background: #e2e8f0;
  color: #1e293b;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .studio-page .view-button,
  :root:not([data-theme]) .studio-page .mini-action {
    color: #9aa5b5;
  }

  :root:not([data-theme]) .studio-page .view-button:hover,
  :root:not([data-theme]) .studio-page .view-button:focus-visible,
  :root:not([data-theme]) .studio-page .mini-action:hover,
  :root:not([data-theme]) .studio-page .mini-action:focus-visible {
    color: #d7dce4;
  }

  :root:not([data-theme]) .studio-page .view-button.active {
    background: #2b303a;
    color: #d7dce4;
    box-shadow: inset 0 0 0 1px rgba(154, 165, 181, 0.22);
  }
}

:root[data-theme="dark"] .studio-page .view-button,
:root[data-theme="dark"] .studio-page .mini-action {
  color: #9aa5b5;
}

:root[data-theme="dark"] .studio-page .view-button:hover,
:root[data-theme="dark"] .studio-page .view-button:focus-visible,
:root[data-theme="dark"] .studio-page .mini-action:hover,
:root[data-theme="dark"] .studio-page .mini-action:focus-visible {
  color: #d7dce4;
}

:root[data-theme="dark"] .studio-page .view-button.active {
  background: #2b303a;
  color: #d7dce4;
  box-shadow: inset 0 0 0 1px rgba(154, 165, 181, 0.22);
}