/* Additive to Simplism: retain black paper, monochrome ink, square edges and type. */
:root { --muted: #999; }
.pixel-banner--hero { aspect-ratio: 6 / 1; }
.pixel-banner--featured, .pixel-banner--cover { aspect-ratio: 3 / 1; }
.card-media { aspect-ratio: 4 / 3; }
.pixel-banner { background: #101010; }
.featured-media, .post-cover { position: relative; }
.featured-media img, .post-cover img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.card-media img,
.featured-media img,
.post-cover img { filter: grayscale(1); }
/* Overlay enhancement only; the original <img> remains a no-JS/decode-error fallback. */
.featured-media img + canvas, .post-cover img + canvas { position: absolute; inset: 0; height: 100%; }
.featured-media img[hidden], .post-cover img[hidden] { display: block; visibility: hidden; }
.card-media img[hidden] { display: none; }
.featured-media:hover, .card-media:hover { opacity: 1; }
.card:focus-within .card-media, .featured:focus-within .featured-media { outline: 1px solid var(--text); outline-offset: 4px; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--text, #e6e6e6); outline-offset: 4px; }
.nav-link, .series-link { display: inline-flex; align-items: center; min-height: 2.25rem; }
.series-nav {
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
}
.series-link {
  white-space: nowrap;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  line-height: 1.3;
  min-height: 2.75rem;
}
.series-link.is-on {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.series-link.is-on:hover { opacity: 1; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 1.5rem; }
.article-outline { max-width: 38rem; margin: 1.5rem auto 2rem; border-block: 1px solid var(--line, #333); font-size: 0.875rem; }
.article-outline summary { padding: 0.85rem 0; cursor: pointer; }
.article-outline nav { padding: 0 0.25rem 1rem; max-height: 24rem; overflow: auto; }
.article-outline ul { list-style: none; margin: 0; padding: 0; }
.article-outline a { display: block; padding-block: 0.35rem; overflow-wrap: anywhere; }
.article-outline .outline-subsection { padding-left: 1.25rem; color: var(--muted); }
@media (max-width: 40rem) {
  .card-media { aspect-ratio: 16 / 10; }
  .pixel-banner--featured, .pixel-banner--cover, .featured-media img, .post-cover img { aspect-ratio: 2 / 1; }
  .prose:not(.prose-ui) { font-size: 1.0625rem; }
  .post-hero { padding-top: 2rem; }
  .row { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .row-meta { flex-wrap: wrap; }
}
/* Reading column: about 33–40 CJK characters, separate from wide figures. */
.post-head,
.lede,
.featured-excerpt,
.prose:not(.prose-ui) p,
.prose:not(.prose-ui) h1,
.prose:not(.prose-ui) h2,
.prose:not(.prose-ui) h3,
.prose:not(.prose-ui) h4,
.prose:not(.prose-ui) ul,
.prose:not(.prose-ui) ol,
.prose:not(.prose-ui) blockquote {
  max-width: 38rem;
}
.prose:not(.prose-ui) {
  font-size: 1.125rem;
  line-height: 1.75;
}
.prose:not(.prose-ui) p { margin-top: 1.15em; }
.prose:not(.prose-ui) h4 { color: var(--text); }
.lede { color: #cfcfcf; }
.prose ::selection,
.post-title ::selection,
.lede ::selection {
  background: #e6e6e6;
  color: #000;
}
.article-outline summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.article-outline a { padding-block: 0.45rem; }
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  pointer-events: none;
  background: transparent;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } }
@media (forced-colors: active) { .article-outline { border-color: CanvasText; } }
/* Inline math stays in the sentence. A scrollbar there is the assistive MathML
   box, not a formula that is wider than the line. */
mjx-container { overflow: visible; }
.prose mjx-container:not([display="true"]) {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: visible;
}
mjx-container mjx-assistive-mml {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.prose p:has(mjx-container[display="true"]) { max-width: 100%; }
mjx-container[display="true"] {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Hexo wraps code in a table cell. The article table rule was capping that cell at 20rem. */
.prose .highlight table {
  width: 100%;
  min-width: 0;
  max-width: none;
  table-layout: fixed;
}
.prose .highlight td,
.prose .highlight th {
  position: static;
  left: auto;
  min-width: 0;
  max-width: none;
  width: auto;
  box-shadow: none;
  background: transparent;
}
/* Sequence actors were painted with the text color, so the label disappeared. */
.prose .mermaid rect.actor {
  fill: #141414 !important;
  stroke: #d4d4d4 !important;
  stroke-width: 1.25px !important;
}
.prose .mermaid text.actor,
.prose .mermaid .messageText,
.prose .mermaid .noteText,
.prose .mermaid .loopText {
  fill: #f2f2f2 !important;
  color: #f2f2f2 !important;
}
.prose .mermaid .node rect,
.prose .mermaid .node polygon,
.prose .mermaid .label-container {
  stroke: rgba(230, 230, 230, 0.72) !important;
}
.prose .mermaid .edgePath .path,
.prose .mermaid .flowchart-link,
.prose .mermaid line.messageLine0,
.prose .mermaid line.messageLine1,
.prose .mermaid .actor-line {
  stroke: #bdbdbd !important;
}
:where(.table-scroll, .prose pre, .prose mjx-container)[tabindex="0"]:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* Reader spacing: retain Simplism's palette, typography and square geometry. */
:root {
  --gutter: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --reader-inset: clamp(1rem, 2vw, 1.5rem);
}

/* Exported pixel artwork stays complete and avoids a second treatment pass. */
:is(.card-media, .featured-media, .post-cover) img[data-cover-style="processed"] {
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
}
/* Keep exported artwork in its own frame instead of letterboxing or recropping it. */
.post-cover:has(> img[data-cover-style="processed"]) {
  max-width: 38rem;
  margin-inline: auto;
}
:is(.post-cover, .featured-media) img[data-cover-style="processed"] {
  aspect-ratio: 16 / 9;
  height: auto;
}
.card-media { aspect-ratio: 16 / 9; }
.post-cover { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.post-hero { padding-bottom: 1.5rem; }
.post-head, .post-copy, .post-foot { max-width: 38rem; }
.post-head .meta { row-gap: 0.5rem; }
.post .meta { overflow-wrap: anywhere; }
.card-title { margin-bottom: 0.65rem; }
.card .meta { row-gap: 0.5rem; overflow-wrap: anywhere; }
.card-grid { row-gap: 2.5rem; }
.series-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.nav-link { min-height: 2.75rem; }
.site-bar { padding-bottom: 0.75rem; }
.btn, .search-input { padding-block: 0.75rem; }
.pager :is(.prev, .next), .keep-all { padding-block: 0.65rem; }
.keep-head { flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.foot-social { gap: 0.5rem; }
.social-link { width: 2.75rem; height: 2.75rem; }
.block:last-child { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.site-foot { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }

.article-outline summary { padding-inline: 0.5rem; gap: 0.75rem; }
.article-outline summary::after { content: "+"; margin-left: auto; color: var(--muted); }
.article-outline[open] summary::after { content: "−"; }
.article-outline nav { padding: 0.25rem 0.5rem 1rem; }
.article-outline a { padding-block: 0.65rem; }
.prose:not(.prose-ui) { font-size: var(--read); }
.prose :is(ul, ol) :is(ul, ol) { margin: 0.5em 0; max-width: 100%; }
.prose :is(blockquote, .callout, .fold-body) > :first-child { margin-top: 0; }
.prose :is(.source-card, .callout, .fold-body) { padding: var(--reader-inset); }
.prose details > summary { padding: 1rem var(--reader-inset); }
.prose details > :not(summary):not(.fold-body) { margin-inline: var(--reader-inset); }
.prose :is(.desmos-graph, .gpt-graph, .mermaid, .table-scroll, figure) { margin-block: 1.75rem; }
.prose blockquote { padding-block: 0.5rem; }
.prose :is(h2, h3, h4) { scroll-margin-top: 2rem; }

@media (max-width: 40rem) {
  .post-hero { padding-top: 2rem; }
  .post { padding-bottom: 3rem; }
  .site-bar-inner { gap: 0.5rem 1rem; }
  .site-nav { gap: 0.5rem 0.85rem; }
  .row { padding-block: 1.25rem; }
  .prose .mermaid { padding: 1.25rem 1rem; }
}

/* Verbatim structures and TeX keep their source layout at readable type sizes.
   Literal blocks share the code frame at the end of this file. */
.math-source--display { display: block; max-width: 100%; }
.prose mjx-container[display="true"] { padding-block: 0.2em; }
.prose mjx-container:not([display="true"])[data-reader-overflow="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.2em;
}
.reader-scroll-hint {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.6;
}
.reader-scroll-hint[hidden] { display: none; }
[data-reader-overflow="true"] { scrollbar-width: thin; }
[data-reader-focus="true"]:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* Short tables fit the phone; larger tables retain useful column widths. */
.prose .table-scroll table {
  width: 100%;
  min-width: max(100%, calc(var(--table-columns, 2) * 8.5rem));
}
.prose .table-scroll :is(th, td) {
  min-width: 0;
  padding: 0.75em 0.8em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.prose .table-scroll code,
.prose table code {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.prose .table-scroll :is(th, td):first-child { position: static; box-shadow: none; }
.prose .table-scroll[data-compact-first="true"] :is(th, td):first-child,
.prose .table-scroll[data-compact-first="true"] :is(th, td):first-child * {
  width: 1%;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
.prose :is(th, td)[align="right"] { text-align: right; }
.prose :is(th, td)[align="center"] { text-align: center; }
.prose :is(th, td)[align="left"] { text-align: left; }
@media (max-width: 40rem) {
  .prose .table-scroll[data-reader-overflow="true"] :is(th, td):first-child {
    position: sticky;
    left: 0;
    width: 8rem;
    max-width: 10rem;
    background: var(--bg);
    box-shadow: 8px 0 12px -8px #000;
  }
}

/* Center complete previews, with original-size scrolling and a larger view. */
.prose .mermaid { padding: 0; overflow: hidden; }
.mermaid-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding: 1.5rem 1rem;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.prose .mermaid svg {
  display: block;
  margin-inline: auto;
  max-width: none;
  height: auto;
}
.prose .mermaid .reader-scroll-hint { margin: 0; padding: 0 1rem 1rem; text-align: left; }
.diagram-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--fill);
}
.diagram-toolbar button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.diagram-toolbar button:hover,
.diagram-toolbar button[aria-pressed="true"] { color: var(--text); border-color: var(--line); }
.diagram-dialog {
  width: calc(100vw - 2rem);
  max-width: 80rem;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--muted);
  background: var(--bg);
  color: var(--text);
  overflow: auto;
}
.diagram-dialog::backdrop { background: rgb(0 0 0 / 85%); }
.diagram-dialog .mermaid { margin: 0; border: 0; }
.diagram-dialog .mermaid-scroll { max-height: calc(100dvh - 6rem); overflow: auto; }
.diagram-source { padding: 1rem; text-align: left; }

/* Sliders have full touch targets while the rail keeps its existing thin style. */
.gpt-slider input[type="range"] {
  height: 2.75rem;
  margin: 0;
  background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat;
  touch-action: pan-y;
}
.gpt-slider input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; }
.gpt-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
@media (max-width: 40rem) {
  .gpt-graph-canvas { flex: none; height: clamp(260px, var(--graph-h, 320px), 420px); }
}

/* Code blocks: Hexo's figure.highlight and the frame main.js puts around a
   bare <pre> share one look: a borderless panel one step above the page, the
   code alone inside it, and a bare copy icon in the top-right corner. The
   horizontal scroll stays inside the block. */
:root { --code-bg: #1b1c20; --code-ink: #f9f9f9; }
.prose > :is(.highlight, .code-block),
.prose > pre:not(.mermaid) {
  margin-block: 1.5rem 1.75rem;
}
.prose :is(.highlight, .code-block) {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background: var(--code-bg);
  border: 0;
  border-radius: 4px;
  color: var(--code-ink);
}
.prose .code-block--fit,
.prose pre.literal-block--code {
  width: fit-content;
  min-width: min(100%, 20rem);
  max-width: 100%;
}
.prose .code-block > pre {
  margin: 0;
  border: 0;
  background: transparent;
}
.prose .highlight table { border-spacing: 0; border-collapse: collapse; }
.prose :is(.highlight pre, .code-block > pre) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem 3.25rem 1rem 1.375rem;
  font-size: 0.875rem;
  line-height: 1.7;
  tab-size: 4;
  /* Long lines still scroll (swipe, trackpad, Shift+wheel, arrow keys once
     focused); the bar itself is never drawn. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prose :is(.highlight pre, .code-block > pre)::-webkit-scrollbar { display: none; }
/* Hexo wraps highlighted code in a table, so the article-table rule for inline
   code (nowrap) reached it and collapsed every indent. Code keeps its spaces. */
.prose :is(.highlight, .code-block, pre) :is(pre, code) {
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* The icon has no box of its own; its fill is the panel color so text that
   scrolls sideways passes beneath it instead of through it. */
.code-copy {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--code-bg);
  color: rgb(249 249 249 / 45%);
  cursor: pointer;
  transition: color 0.15s ease;
}
.code-copy svg {
  display: block;
  width: 16px;
  height: 16px;
}
.prose :is(.highlight, .code-block):hover .code-copy { color: rgb(249 249 249 / 70%); }
.prose :is(.highlight, .code-block) .code-copy:hover { color: var(--code-ink); }
.code-copy:focus-visible {
  outline: 2px solid var(--code-ink);
  outline-offset: -2px;
  color: var(--code-ink);
}
.prose :is(.highlight, .code-block) .code-copy[data-state="done"] { color: #7fd184; }
.prose :is(.highlight, .code-block) figcaption {
  margin: 0;
  padding: 0.75rem 3.25rem 0 1.375rem;
  color: rgb(249 249 249 / 55%);
}
@media (pointer: coarse) {
  .code-copy { top: 0.375rem; right: 0.375rem; width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 40rem) {
  .prose :is(.highlight pre, .code-block > pre) {
    padding: 0.875rem 3rem 0.875rem 1rem;
    font-size: 0.8125rem;
  }
}