/* Code blocks: one readable, flat surface shared by the editor and the
   published article. JetBrains Mono is self-hosted for a consistent code
   face; the platform faces remain a fallback for first paint and old clients. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:where(.article-content, .ProseMirror) {
  --inkflow-code-font: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", "Sarasa Mono SC", monospace;
}
.inkflow-code-shell {
  position: relative;
  overflow: hidden;
  margin: 1.8em 0;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  background: #FFFFFF;
  color: #000000;
}
.inkflow-code-toolbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid #e6e9ee;
  background: #f8f9fb;
  color: #737b86;
  font: 500 12px/1 var(--inkflow-code-font);
  letter-spacing: .01em;
}
.inkflow-code-shell .inkflow-code-toolbar,
.inkflow-code-shell .inkflow-code-toolbar *,
.article-content .inkflow-code-toolbar,
.article-content .inkflow-code-toolbar *,
.editor-shell .editor-code-toolbar,
.editor-shell .editor-code-toolbar *,
.is-admin .editor-code-toolbar,
.is-admin .editor-code-toolbar * {
  /* The shared site typography rule also targets toolbar descendants. Keep
     the language label in the same code face as the source it identifies. */
  font-family: var(--inkflow-code-font) !important;
}
.inkflow-code-language {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  color: #69727d;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inkflow-code-toolbar-actions,
.editor-code-toolbar .inkflow-code-toolbar-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
}
.inkflow-code-copy,
.inkflow-code-wrap,
.editor-code-copy,
.editor-code-wrap {
  display: inline-flex;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #2f2f2f;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(.4, 0, .2, 1),
    color 0.15s cubic-bezier(.4, 0, .2, 1),
    border-color 0.15s cubic-bezier(.4, 0, .2, 1),
    transform 0.18s cubic-bezier(.16, 1, .3, 1);
}
.inkflow-code-copy:hover,
.inkflow-code-wrap:hover,
.editor-code-copy:hover,
.editor-code-wrap:hover {
  border-color: transparent;
  outline: none;
  color: #0d0d0d;
  background: rgba(0, 0, 0, .05);
}
.inkflow-code-copy:focus-visible,
.inkflow-code-wrap:focus-visible,
.editor-code-copy:focus-visible,
.editor-code-wrap:focus-visible {
  border-color: transparent;
  outline: 2px solid rgba(13, 13, 13, .2);
  outline-offset: 2px;
  color: #0d0d0d;
  background: rgba(0, 0, 0, .05);
}
.inkflow-code-copy:active,
.inkflow-code-wrap:active,
.editor-code-copy:active,
.editor-code-wrap:active {
  transform: scale(.975);
  background: rgba(0, 0, 0, .08);
}
.inkflow-code-copy.is-copied,
.editor-code-copy.is-copied {
  color: #24734e;
}
.inkflow-code-wrap.is-active,
.editor-code-wrap.is-active {
  color: #1e5dcc;
  background: rgba(30, 93, 204, .1);
}
.inkflow-code-copy .lucide,
.inkflow-code-wrap .lucide,
.editor-code-copy .lucide,
.editor-code-wrap .lucide {
  width: 16px;
  height: 16px;
  margin: 0;
  stroke-width: 1.85;
}
.inkflow-code-toolbar .inkflow-code-copy,
.inkflow-code-toolbar .inkflow-code-wrap {
  position: static;
}
.article-content .inkflow-code-shell pre,
.inkflow-code-shell pre {
  margin: 0 !important;
  padding: 19px 24px 20px !important;
  overflow: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: #000000;
  font: 14px/1.78 var(--inkflow-code-font);
  font-variant-ligatures: contextual;
  tab-size: 2;
  text-rendering: optimizeLegibility;
}
.inkflow-code-shell pre,
.inkflow-code-shell pre code,
.inkflow-code-shell pre code *,
[data-inkflow-special="code"] pre,
[data-inkflow-special="code"] pre code,
[data-inkflow-special="code"] pre code *,
.ProseMirror pre,
.ProseMirror pre code,
.ProseMirror pre code *,
.article-content pre,
.article-content pre code,
.article-content pre code * {
  /* site-base.css gives every element a body font with !important. The
     descendant selectors are intentional: syntax highlighting wraps tokens
     in spans, and those spans must stay in the code face too. */
  font-family: var(--inkflow-code-font) !important;
}
.inkflow-code-shell pre code,
.ProseMirror pre code,
.article-content pre code {
  display: block;
  min-width: max-content;
  color: #000000;
  background: transparent;
  font-family: var(--inkflow-code-font) !important;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.78;
  font-variant-ligatures: contextual;
  white-space: pre;
  tab-size: 2;
}
.inkflow-code-shell.is-wrapped pre {
  overflow-x: hidden;
}
.inkflow-code-shell.is-wrapped pre code,
.is-admin .ProseMirror pre.is-wrapped code {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inkflow-code-shell pre code::selection,
.ProseMirror pre code::selection {
  color: #000000;
  background: #ADD6FF80;
}
.special-code {
  overflow: hidden;
  padding: 0 !important;
  border-color: #e6e9ee !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
}
.special-code .special-kicker,
.special-code h3 {
  margin-right: 20px;
  margin-left: 20px;
}
.special-code .special-kicker { margin-top: 18px; color: #6a7785; }
.special-code h3 { color: #17385d; font-size: 17px; }
.special-code .inkflow-code-shell { margin: 0; border: 0; border-radius: 0; }
.special-code .inkflow-code-toolbar { border-top: 1px solid #e6e9ee; }
.special-code .inkflow-code-shell pre { border-top: 0; }
.code-token-comment { color: #008000; }
.code-token-string { color: #A31515; }
.code-token-markup-string { color: #0000FF; }
.code-token-keyword { color: #0000FF; }
.code-token-boolean { color: #0000FF; }
.code-token-number { color: #098658; }
.code-token-function { color: #795E26; }
.code-token-type { color: #267F99; }
.code-token-variable { color: #001080; }
.code-token-constant { color: #0070C1; }
.code-token-property { color: #001080; }
.code-token-json-property,
.code-token-css-property { color: #0451A5; }
.code-token-tag { color: #800000; }
.code-token-attribute { color: #E50000; }
.code-token-regex { color: #811F3F; }
.code-token-preprocessor { color: #0000FF; }
.code-token-markup-heading { color: #800000; font-weight: 700; }
.code-token-operator,
.code-token-punctuation { color: #000000; }