/* Reading surfaces only. Membership is assigned by code-themes.js; editors and
 * sample input/output never receive these classes. Keep native geometry intact. */
html[data-dtoj-code-theme],
[data-dtoj-code-preview="paper"] {
  --dtoj-code-bg: #ffffff;
  --dtoj-code-text: #24292f;
  --dtoj-code-border: #e4e4e7;
  --dtoj-code-header: #ffffff;
  --dtoj-code-muted: #626b76;
  --dtoj-code-gutter: #68727e;
  --dtoj-code-comment: #57606a;
  --dtoj-code-keyword: #cf222e;
  --dtoj-code-string: #0a3069;
  --dtoj-code-number: #0550ae;
  --dtoj-code-function: #8250df;
  --dtoj-code-type: #953800;
  --dtoj-code-attr: #0550ae;
  --dtoj-code-operator: #4b5563;
  --dtoj-code-punctuation: #4b5563;
  --dtoj-code-deleted: #a02c35;
  --dtoj-code-hover: #f0f3f6;
  --dtoj-code-focus: #0969da;
  --dtoj-code-selection-bg: #dbe7f2;
  --dtoj-code-selection-text: #243649;
  --dtoj-code-scrollbar: #a4aeb9;
  --dtoj-code-scrollbar-hover: #7c8997;
  --dtoj-code-highlight: #eaf0f7;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: light;
}

html[data-dtoj-code-theme="classic"],
[data-dtoj-code-preview="classic"] {
  --dtoj-code-bg: #ffffff;
  --dtoj-code-text: #141414;
  --dtoj-code-border: #d9dce1;
  --dtoj-code-header: #f5f6f8;
  --dtoj-code-muted: #515965;
  --dtoj-code-gutter: #616975;
  --dtoj-code-comment: #346438;
  --dtoj-code-keyword: #0000a3;
  --dtoj-code-string: #a31515;
  --dtoj-code-number: #874100;
  --dtoj-code-function: #682d89;
  --dtoj-code-type: #2b6580;
  --dtoj-code-attr: #8b2855;
  --dtoj-code-operator: #a31515;
  --dtoj-code-punctuation: #3b3b3b;
  --dtoj-code-deleted: #a31515;
  --dtoj-code-hover: #e8edf5;
  --dtoj-code-focus: #174ea6;
  --dtoj-code-selection-bg: #d6e5fa;
  --dtoj-code-selection-text: #142d50;
  --dtoj-code-scrollbar: #a3aab5;
  --dtoj-code-scrollbar-hover: #788391;
  --dtoj-code-highlight: #eaf0fa;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: light;
}

/* QOJ classic SHJS palette from sh_typical.min.css, as shown in the reference. */
html[data-dtoj-code-theme="qoj"],
[data-dtoj-code-preview="qoj"] {
  --dtoj-code-bg: #ffffff;
  --dtoj-code-text: #000000;
  --dtoj-code-border: #dddddd;
  --dtoj-code-header: #ffffff;
  --dtoj-code-muted: #666666;
  --dtoj-code-gutter: #666666;
  --dtoj-code-comment: #666666;
  --dtoj-code-keyword: #0000ff;
  --dtoj-code-string: #ff0000;
  --dtoj-code-number: #a900a9;
  --dtoj-code-function: #000000;
  --dtoj-code-type: #000000;
  --dtoj-code-attr: #000000;
  --dtoj-code-operator: #ff0000;
  --dtoj-code-punctuation: #ff0000;
  --dtoj-code-deleted: #ff0000;
  --dtoj-code-hover: #f3f3f3;
  --dtoj-code-focus: #0000ff;
  --dtoj-code-selection-bg: #cce2ff;
  --dtoj-code-selection-text: #000000;
  --dtoj-code-scrollbar: #b0b0b0;
  --dtoj-code-scrollbar-hover: #888888;
  --dtoj-code-highlight: #f3f3f3;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: light;
}

html[data-dtoj-code-theme="warm"],
[data-dtoj-code-preview="warm"] {
  --dtoj-code-bg: #fbf5e8;
  --dtoj-code-text: #3d352b;
  --dtoj-code-border: #d9cebb;
  --dtoj-code-header: #f2e9d8;
  --dtoj-code-muted: #6b5b47;
  --dtoj-code-gutter: #736450;
  --dtoj-code-comment: #736450;
  --dtoj-code-keyword: #8b2942;
  --dtoj-code-string: #3d6227;
  --dtoj-code-number: #175c87;
  --dtoj-code-function: #70438e;
  --dtoj-code-type: #865022;
  --dtoj-code-attr: #175c87;
  --dtoj-code-operator: #5c5144;
  --dtoj-code-punctuation: #5c5144;
  --dtoj-code-deleted: #922d36;
  --dtoj-code-hover: #e9ddc7;
  --dtoj-code-focus: #82501e;
  --dtoj-code-selection-bg: #e4d2af;
  --dtoj-code-selection-text: #3d352b;
  --dtoj-code-scrollbar: #b5a387;
  --dtoj-code-scrollbar-hover: #937c5a;
  --dtoj-code-highlight: #eee2cc;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: light;
}

html[data-dtoj-code-theme="ocean"],
[data-dtoj-code-preview="ocean"] {
  --dtoj-code-bg: #142333;
  --dtoj-code-text: #d8e5f0;
  --dtoj-code-border: #3a5167;
  --dtoj-code-header: #1c3043;
  --dtoj-code-muted: #adc3d6;
  --dtoj-code-gutter: #a1b8cc;
  --dtoj-code-comment: #9bb2c8;
  --dtoj-code-keyword: #d6a6ee;
  --dtoj-code-string: #b4d99a;
  --dtoj-code-number: #edc18b;
  --dtoj-code-function: #95c5f0;
  --dtoj-code-type: #e3b995;
  --dtoj-code-attr: #92d8db;
  --dtoj-code-operator: #bfd3e4;
  --dtoj-code-punctuation: #bfd3e4;
  --dtoj-code-deleted: #ffb4b9;
  --dtoj-code-hover: #2b435a;
  --dtoj-code-focus: #a7d1fb;
  --dtoj-code-selection-bg: #375773;
  --dtoj-code-selection-text: #f5faff;
  --dtoj-code-scrollbar: #59748d;
  --dtoj-code-scrollbar-hover: #7c97b0;
  --dtoj-code-highlight: #253e55;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: dark;
}

html[data-dtoj-code-theme="graphite"],
[data-dtoj-code-preview="graphite"] {
  --dtoj-code-bg: #202124;
  --dtoj-code-text: #e8eaed;
  --dtoj-code-border: #494d55;
  --dtoj-code-header: #292b2f;
  --dtoj-code-muted: #bdc2ca;
  --dtoj-code-gutter: #adb3be;
  --dtoj-code-comment: #b0b3b8;
  --dtoj-code-keyword: #dda7ee;
  --dtoj-code-string: #aed899;
  --dtoj-code-number: #e7bf8d;
  --dtoj-code-function: #a0c6f3;
  --dtoj-code-type: #e3b08c;
  --dtoj-code-attr: #9fd3db;
  --dtoj-code-operator: #d0d3d8;
  --dtoj-code-punctuation: #d0d3d8;
  --dtoj-code-deleted: #ffb0b7;
  --dtoj-code-hover: #393d44;
  --dtoj-code-focus: #aecbfa;
  --dtoj-code-selection-bg: #4a5363;
  --dtoj-code-selection-text: #ffffff;
  --dtoj-code-scrollbar: #69717e;
  --dtoj-code-scrollbar-hover: #8b95a4;
  --dtoj-code-highlight: #343a45;
  --dtoj-code-clear: transparent;
  --dtoj-code-scheme: dark;
}

/* Set colors on the marked pre, beyond each page's legacy variable scope. The
 * importance is limited to marked reading surfaces and defeats existing skins. */
html[data-dtoj-code-theme] pre.dtoj-reading-code,
html[data-dtoj-code-theme] .dtoj-reading-code-frame {
  --code-bg: var(--dtoj-code-bg);
  --code-border: var(--dtoj-code-border);
  --code-text: var(--dtoj-code-text);
  --tk-comment: var(--dtoj-code-comment);
  --tk-keyword: var(--dtoj-code-keyword);
  --tk-string: var(--dtoj-code-string);
  --tk-number: var(--dtoj-code-number);
  --tk-func: var(--dtoj-code-function);
  --tk-type: var(--dtoj-code-type);
  --tk-attr: var(--dtoj-code-attr);
  --tk-op: var(--dtoj-code-operator);
  --tk-punc: var(--dtoj-code-punctuation);
  background-color: var(--dtoj-code-bg) !important;
  border-color: var(--dtoj-code-border) !important;
  color: var(--dtoj-code-text) !important;
  color-scheme: var(--dtoj-code-scheme) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code {
  background-image: none !important;
  scrollbar-color: var(--dtoj-code-scrollbar) var(--dtoj-code-bg) !important;
  text-shadow: none !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code code {
  background: var(--dtoj-code-clear) !important;
  color: var(--dtoj-code-text) !important;
  text-shadow: none !important;
}

/* Existing Mac window dots are background images; changing the underlying
 * color preserves their artwork and each page's header dimensions. */
html[data-dtoj-code-theme] pre.dtoj-reading-code::before,
html[data-dtoj-code-theme] .dtoj-reading-code-frame :is(.paste-code-head, .pet-ai-code-header) {
  background-color: var(--dtoj-code-header) !important;
  border-color: var(--dtoj-code-border) !important;
  color: var(--dtoj-code-muted) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code::after,
html[data-dtoj-code-theme] .dtoj-reading-code-frame :is(.paste-code-head > span, .pet-ai-code-language) {
  color: var(--dtoj-code-muted) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token, [class*="hljs-"], .hljs) {
  background: var(--dtoj-code-clear) !important;
  color: var(--dtoj-code-text) !important;
  text-shadow: none !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.comment, .token.prolog, .token.doctype, .token.cdata, .hljs-comment, .hljs-quote, .c, .c1, .cm, .cp, .cs) {
  color: var(--dtoj-code-comment) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.keyword, .token.atrule, .token.attr-value, .hljs-keyword, .hljs-selector-tag, .hljs-meta, .k, .kc, .kd, .kn, .kp, .kr) {
  color: var(--dtoj-code-keyword) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.string, .token.char, .token.regex, .token.inserted, .hljs-string, .hljs-regexp, .s, .s1, .s2, .sa, .sb, .sc, .sd, .se, .sh, .si, .sr, .ss) {
  color: var(--dtoj-code-string) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.number, .token.boolean, .token.constant, .token.symbol, .hljs-number, .hljs-literal, .m, .mb, .mf, .mh, .mi, .mo, .il) {
  color: var(--dtoj-code-number) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.function, .hljs-title, .hljs-title.function_, .nf, .fm) {
  color: var(--dtoj-code-function) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.class-name, .token.builtin, .hljs-type, .hljs-built_in, .hljs-title.class_, .kt, .nc, .nb, .bp) {
  color: var(--dtoj-code-type) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.property, .token.attr-name, .token.tag, .token.selector, .token.url, .hljs-attr, .hljs-attribute, .hljs-selector-class, .hljs-selector-id, .na, .nt) {
  color: var(--dtoj-code-attr) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.operator, .token.entity, .hljs-operator, .o, .ow) {
  color: var(--dtoj-code-operator) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.punctuation, .hljs-punctuation, .p) {
  color: var(--dtoj-code-punctuation) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.deleted, .hljs-deletion, .gd) {
  color: var(--dtoj-code-deleted) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.token.important, .hljs-addition, .gi) {
  color: var(--dtoj-code-number) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code .token.directive.tag .tag {
  background: var(--dtoj-code-clear) !important;
  color: var(--dtoj-code-keyword) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.line-numbers-rows, .pet-ai-code-lines) {
  border-color: var(--dtoj-code-border) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code :is(.line-numbers-rows, .pet-ai-code-lines) > span::before {
  color: var(--dtoj-code-gutter) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code .line-highlight {
  background: var(--dtoj-code-highlight) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code .line-highlight::before,
html[data-dtoj-code-theme] pre.dtoj-reading-code .line-highlight::after {
  background: var(--dtoj-code-header) !important;
  color: var(--dtoj-code-muted) !important;
}

html[data-dtoj-code-theme] .dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button, span),
html[data-dtoj-code-theme] #panel .code-toolbar.dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button, span),
html[data-dtoj-code-theme] .dtoj-reading-code-frame :is(.paste-code-copy, .pet-ai-code-copy),
html[data-dtoj-code-theme] #problem-page .typo.richmedia div.code-toolbar.dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button) {
  background: var(--dtoj-code-header) !important;
  border-color: var(--dtoj-code-border) !important;
  color: var(--dtoj-code-muted) !important;
  text-shadow: none !important;
}

html[data-dtoj-code-theme] .dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button):hover,
html[data-dtoj-code-theme] #panel .code-toolbar.dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button):hover,
html[data-dtoj-code-theme] .dtoj-reading-code-frame :is(.paste-code-copy, .pet-ai-code-copy):hover,
html[data-dtoj-code-theme] #problem-page .typo.richmedia div.code-toolbar.dtoj-reading-code-frame > .toolbar .toolbar-item > :is(a, button):hover {
  background: var(--dtoj-code-hover) !important;
  border-color: var(--dtoj-code-border) !important;
  color: var(--dtoj-code-text) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code:focus-visible,
html[data-dtoj-code-theme] .dtoj-reading-code-frame :is(a, button):focus-visible {
  outline-color: var(--dtoj-code-focus) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code::selection,
html[data-dtoj-code-theme] pre.dtoj-reading-code *::selection {
  background: var(--dtoj-code-selection-bg) !important;
  color: var(--dtoj-code-selection-text) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code::-webkit-scrollbar,
html[data-dtoj-code-theme] pre.dtoj-reading-code::-webkit-scrollbar-track,
html[data-dtoj-code-theme] pre.dtoj-reading-code::-webkit-scrollbar-corner {
  background: var(--dtoj-code-bg) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code::-webkit-scrollbar-thumb {
  background: var(--dtoj-code-scrollbar) !important;
}

html[data-dtoj-code-theme] pre.dtoj-reading-code::-webkit-scrollbar-thumb:hover {
  background: var(--dtoj-code-scrollbar-hover) !important;
}

/* The settings preview is the only newly sized code surface. Its selection is
 * scoped to the wrapper, so unsaved changes leave other code blocks alone. */
html[data-dtoj-code-theme] .dtoj-code-theme-preview {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 12px 0 4px;
  border: 1px solid var(--dtoj-code-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--dtoj-code-bg);
}

html[data-dtoj-code-theme] .dtoj-code-theme-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--dtoj-code-border);
  background: var(--dtoj-code-header);
  color: var(--dtoj-code-muted);
  font-size: 12px;
  line-height: 1.6;
}

html[data-dtoj-code-theme] .dtoj-code-theme-preview-label > span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

html[data-dtoj-code-theme] .dtoj-code-theme-preview pre.dtoj-reading-code {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  white-space: pre;
  overflow: auto;
}

html[data-dtoj-code-theme] .dtoj-code-theme-preview pre.dtoj-reading-code > code {
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}

/* The synthetic preview needs no copy toolbar from the native highlighter. */
html[data-dtoj-code-theme] .dtoj-code-theme-preview .code-toolbar > .toolbar {
  display: none !important;
}

/* Typography and preprocessor colors for the screenshot theme only. */
html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code {
  font-weight: 400 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.keyword, .token.atrule, .hljs-keyword, .hljs-selector-tag, .k, .kc, .kd, .kn, .kp, .kr),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.keyword, .token.atrule, .hljs-keyword, .hljs-selector-tag, .k, .kc, .kd, .kn, .kp, .kr) {
  font-weight: 700 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.function, .hljs-title.function_, .hljs-title, .nf, .fm),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.function, .hljs-title.function_, .hljs-title, .nf, .fm) {
  font-weight: 700 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.comment, .hljs-comment, .c, .c1, .cm, .cs),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.comment, .hljs-comment, .c, .c1, .cm, .cs) {
  font-style: italic !important;
  font-weight: 400 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.dtoj-qoj-type, .hljs-keyword.dtoj-qoj-type, .hljs-type, .kt),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.dtoj-qoj-type, .hljs-keyword.dtoj-qoj-type, .hljs-type, .kt) {
  color: #0000ff !important;
  font-weight: 400 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.directive-hash, .token.directive, .hljs-meta, .cp),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.directive-hash, .token.directive, .hljs-meta, .cp) {
  color: #00b800 !important;
  font-weight: 400 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.macro-name:not(.function), .token.expression),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.macro-name:not(.function), .token.expression) {
  color: #000000 !important;
  font-weight: 400 !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.macro-name.dtoj-qoj-type),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.macro-name.dtoj-qoj-type) {
  color: #0000ff !important;
}

html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.escape, .hljs-char.escape_, .se),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.escape, .hljs-char.escape_, .se) {
  color: #c42da8 !important;
}


html[data-dtoj-code-theme="qoj"] pre.dtoj-reading-code:not([data-dtoj-code-preview] pre) :is(.token.boolean, .dtoj-qoj-boolean),
html[data-dtoj-code-theme] [data-dtoj-code-preview="qoj"] pre.dtoj-reading-code :is(.token.boolean, .dtoj-qoj-boolean) {
  color: #0000ff !important;
  font-weight: 700 !important;
}