Style inline code; drop explicit colorspace from color-mix

Inline code gets padding-inline, keep-all word-break, and a color nudged
30% toward --muted from the inherited color, so code inside
accent-colored text keeps its hue.

All color-mix calls now rely on the default interpolation space (oklab)
instead of declaring srgb/oklab explicitly.

frontend/src/assets/pagerite.css

@@ -17,7 +17,7 @@
   --line: #0000001a;
   /* Links stay quiet — mostly text color with a hint of the accent —
      and light up to the full accent on hover. */
-  --link: color-mix(in oklab, var(--text) 50%, var(--accent));
+  --link: color-mix(var(--text) 50%, var(--accent));
   /* Selection fill for page text and the CodeMirror editors; themes
      override when the accent tint clashes with accent-colored text. */
   --selection-bg: color-mix(var(--accent) 30%, transparent);
@@ -111,13 +111,13 @@ html {
      auto-hidden scrollbars styled by the --os-* variables below, so they
      never reserve layout space or shift the page when appearing. */
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
+  scrollbar-color: color-mix(var(--muted) 45%, transparent) transparent;
 }
 
 .os-scrollbar {
   --os-size: 0.5rem;
-  --os-thumb-bg: color-mix(in srgb, var(--muted) 45%, transparent);
-  --os-thumb-hover-bg: color-mix(in srgb, var(--muted) 65%, transparent);
+  --os-thumb-bg: color-mix(var(--muted) 45%, transparent);
+  --os-thumb-hover-bg: color-mix(var(--muted) 65%, transparent);
   --os-thumb-active-bg: var(--muted);
   --os-track-bg: transparent;
   --os-thumb-border-radius: 0.25rem;
@@ -406,7 +406,7 @@ body.editing #sidebar {
   overflow-y: auto;
   padding: 1rem 1rem 1rem 1.25rem;
   border-radius: 0 0 0.5rem 0;
-  background: color-mix(in srgb, var(--bg) 75%, transparent);
+  background: color-mix(var(--bg) 75%, transparent);
   backdrop-filter: blur(0.5rem);
 }
 
@@ -1020,7 +1020,7 @@ blockquote p + p {
   padding: 0.4rem 0.9rem;
   border-left: 0.25rem solid var(--admonition-color, var(--accent));
   border-radius: 0 0.3rem 0.3rem 0;
-  background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
+  background: color-mix(var(--admonition-color, var(--accent)) 7%, transparent);
 }
 
 .admonition> :last-child,
@@ -1110,7 +1110,7 @@ blockquote p + p {
   padding: 0.6rem 0.9rem;
   font-size: 0.9rem;
   color: var(--muted);
-  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  background: color-mix(var(--accent) 6%, transparent);
   border-radius: 0.3rem;
 }
 
@@ -1169,6 +1169,21 @@ code {
   font-size-adjust: ex-height var(--code-x-height);
 }
 
+/* Inline code: a slight nudge toward the muted tone rather than a fixed
+   color, so code inside accent-colored headings keeps the heading's hue
+   and the distinction stays subtle everywhere. color-mix resolves against
+   the inherited color (currentColor in a color declaration refers to the
+   inherited value), shifting it 30% toward --muted. */
+code:not(pre code) {
+  padding-inline: 0.2em;
+  word-break: keep-all;
+  color: color-mix(currentColor 70%, var(--muted));
+}
+
+code:not(pre code):first-child {
+  padding-left: 0;
+}
+
 /* Click-to-copy button (added by pagerite.js) */
 .copy {
   position: absolute;
@@ -1213,18 +1228,18 @@ td {
 th {
   text-align: left;
   background: linear-gradient(180deg,
-      var(--table-head-a, color-mix(in srgb, var(--accent) 10%, var(--surface))),
-      var(--table-head-b, color-mix(in srgb, var(--accent) 18%, var(--surface))));
+      var(--table-head-a, color-mix(var(--accent) 10%, var(--surface))),
+      var(--table-head-b, color-mix(var(--accent) 18%, var(--surface))));
 }
 
 td {
   background: linear-gradient(160deg,
-      color-mix(in srgb, var(--table-tint, var(--accent)) 5%, transparent),
+      color-mix(var(--table-tint, var(--accent)) 5%, transparent),
       transparent 75%);
 }
 
 tbody tr+tr td {
-  border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent);
+  border-top: 1px solid color-mix(var(--table-tint, var(--accent)) 12%, transparent);
 }
 
 /* Definition lists are laid out as a lightweight two-column grid — terms

frontend/src/assets/pygments.css

@@ -25,12 +25,12 @@ pre code .cp { color: var(--code-comment); font-weight: bold; font-style: italic
 pre code .cpf { color: var(--code-comment); font-style: italic } /* Comment.PreprocFile */
 pre code .c1 { color: var(--code-comment); font-style: italic } /* Comment.Single */
 pre code .cs { color: var(--code-comment); font-weight: bold; font-style: italic } /* Comment.Special */
-pre code .gd { color: var(--code-error); background-color: color-mix(in oklab, var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */
+pre code .gd { color: var(--code-error); background-color: color-mix(var(--code-error) 25%, var(--code-bg)) } /* Generic.Deleted */
 pre code .ge { color: var(--code-text); font-style: italic } /* Generic.Emph */
 pre code .ges { color: var(--code-text); font-weight: bold; font-style: italic } /* Generic.EmphStrong */
 pre code .gr { color: var(--code-error) } /* Generic.Error */
 pre code .gh { color: var(--code-builtin); font-weight: bold } /* Generic.Heading */
-pre code .gi { color: var(--code-added); background-color: color-mix(in oklab, var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */
+pre code .gi { color: var(--code-added); background-color: color-mix(var(--code-added) 25%, var(--code-bg)) } /* Generic.Inserted */
 pre code .go { color: var(--code-muted) } /* Generic.Output */
 pre code .gp { color: var(--code-muted) } /* Generic.Prompt */
 pre code .gs { color: var(--code-text); font-weight: bold } /* Generic.Strong */

pagerite/themes/corporate/theme.css

@@ -112,7 +112,7 @@ article h3 {
 
 blockquote {
   border-left-color: var(--accent);
-  background: color-mix(in oklab, var(--accent) 6%, transparent);
+  background: color-mix(var(--accent) 6%, transparent);
   padding: 0.4rem 0.9rem;
   /* Keep the quoted text on the paragraph edge: the tinted box extends
      past it by its own border/padding, like code blocks. */

pagerite/themes/nitro/theme.css

@@ -187,7 +187,7 @@ article ul ul ul li::before {
 
 blockquote {
   border-left-color: var(--accent2);
-  background: color-mix(in oklab, var(--accent2) 6%, transparent);
+  background: color-mix(var(--accent2) 6%, transparent);
   padding: 0.25rem 0.75rem;
   /* Keep the quoted text on the paragraph edge: the tinted box extends
      past it by its own border/padding, like code blocks. */

pagerite/themes/summer/theme.css

@@ -24,7 +24,7 @@
   --sun: #ffe071;
   --line: #4f913b29;
 
-  --link: color-mix(in oklab, var(--text) 38%, var(--accent));
+  --link: color-mix(var(--text) 38%, var(--accent));
 
   --font-body: var(--font-cause);
   --font-heading: var(--font-new-rocker);