/*
PathMX view CSS is a readable baseline for rendered documents, not an app
theme. It is intentionally unlayered. Most PathMX scope selectors stay inside
:where(...) so authored CSS, frontmatter tokens, and Tailwind utilities can
override the defaults with ordinary selectors. Semantic affordance selectors
use one attribute-level specificity so reset CSS cannot erase runtime tokens.
*/

:root {
  --pmx-runtime-page-background: light-dark(#fafafa, #0e1216);
  --pmx-runtime-page-foreground: light-dark(#171b1f, #e6ecf2);
  color-scheme: light dark;
  min-height: 100svh;
  background: var(--pmx-runtime-page-background);
  color: var(--pmx-runtime-page-foreground);
}

:root[data-pathmx-color-scheme="light"] {
  color-scheme: light;
}

:root[data-pathmx-color-scheme="dark"] {
  color-scheme: dark;
}

body:has(> :where(.pmx-page)) {
  margin: 0;
  min-height: 100svh;
  background: var(--pmx-runtime-page-background);
  color: var(--pmx-runtime-page-foreground);
}

:where(.pmx-page) {
  min-block-size: 100svh;
  background: var(--pmx-runtime-page-background);
  color: var(--pmx-runtime-page-foreground);
}

:where(.pmx-document) {
  container: pathmx-runtime / inline-size;
  /* The light-dark token values resolve against the used color-scheme;
     declare it on the document scope so embedded roots work without
     :root inheritance. */
  color-scheme: light dark;
  min-block-size: 100svh;
  padding-block: clamp(1.5em, 6vh, 4em);
  background: var(--pmx-color-bg);
  color: var(--pmx-color-fg);
  font-family: var(--pmx-font-body);
  font-size: calc(1rem * var(--pmx-runtime-font-scale, 1));

  --pmx-default-light-color-bg: oklch(0.985 0 0);
  --pmx-default-light-color-fg: oklch(0.22 0.01 250);
  --pmx-default-light-color-muted: oklch(0.48 0.02 250);
  --pmx-default-light-color-surface: oklch(0.96 0.01 250);
  --pmx-default-light-color-link: oklch(0.48 0.16 255);
  --pmx-default-light-color-accent: oklch(0.54 0.18 255);
  --pmx-default-light-color-danger: oklch(0.54 0.2 25);
  --pmx-default-light-color-border: oklch(0.86 0.02 250);
  --pmx-default-light-color-focus: oklch(0.54 0.18 255);
  --pmx-default-dark-color-bg: oklch(0.18 0.01 250);
  --pmx-default-dark-color-fg: oklch(0.94 0.01 250);
  --pmx-default-dark-color-muted: oklch(0.72 0.02 250);
  --pmx-default-dark-color-surface: oklch(0.24 0.015 250);
  --pmx-default-dark-color-link: oklch(0.76 0.13 250);
  --pmx-default-dark-color-accent: oklch(0.72 0.16 250);
  --pmx-default-dark-color-danger: oklch(0.72 0.18 25);
  --pmx-default-dark-color-border: oklch(0.36 0.02 250);
  --pmx-default-dark-color-focus: oklch(0.76 0.13 250);

  --pmx-color-bg: light-dark(
    var(--pmx-default-light-color-bg),
    var(--pmx-default-dark-color-bg)
  );
  --pmx-color-fg: light-dark(
    var(--pmx-default-light-color-fg),
    var(--pmx-default-dark-color-fg)
  );
  --pmx-color-muted: light-dark(
    var(--pmx-default-light-color-muted),
    var(--pmx-default-dark-color-muted)
  );
  --pmx-color-surface: light-dark(
    var(--pmx-default-light-color-surface),
    var(--pmx-default-dark-color-surface)
  );
  --pmx-color-link: light-dark(
    var(--pmx-default-light-color-link),
    var(--pmx-default-dark-color-link)
  );
  --pmx-color-accent: light-dark(
    var(--pmx-default-light-color-accent),
    var(--pmx-default-dark-color-accent)
  );
  --pmx-color-danger: light-dark(
    var(--pmx-default-light-color-danger),
    var(--pmx-default-dark-color-danger)
  );
  --pmx-color-border: light-dark(
    var(--pmx-default-light-color-border),
    var(--pmx-default-dark-color-border)
  );
  --pmx-color-focus: light-dark(
    var(--pmx-default-light-color-focus),
    var(--pmx-default-dark-color-focus)
  );

  --pmx-default-font-body:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --pmx-default-font-heading: var(--pmx-default-font-body);
  --pmx-default-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  --pmx-font-body: var(--pmx-default-font-body);
  --pmx-font-heading: var(--pmx-default-font-heading);
  --pmx-font-mono: var(--pmx-default-font-mono);

  --pmx-radius: 0.5rem;
  --pmx-prose-width: 72ch;
  --pmx-wide-width: 96rem;
  --pmx-prose-line-height: var(--pmx-line-height, 1.68);
  --pmx-prose-block-gap: var(--pmx-block-gap, 1em);
  --pmx-focus-ring-width: 2px;
  --pmx-focus-ring-offset: 3px;
  --pmx-interactive-target-size: 24px;
  --pmx-motion-duration: 160ms;
  --pmx-motion-easing: ease-out;

  --pmx-default-light-code-bg: oklch(0.955 0.01 250);
  --pmx-default-light-code-fg: oklch(0.22 0.01 250);
  --pmx-default-light-code-comment: oklch(0.48 0.02 250);
  --pmx-default-light-code-constant: oklch(0.47 0.13 285);
  --pmx-default-light-code-keyword: oklch(0.47 0.16 255);
  --pmx-default-light-code-parameter: oklch(0.46 0.12 40);
  --pmx-default-light-code-function: oklch(0.43 0.14 230);
  --pmx-default-light-code-string: oklch(0.43 0.12 145);
  --pmx-default-light-code-punctuation: oklch(0.42 0.02 250);
  --pmx-default-dark-code-bg: oklch(0.22 0.015 250);
  --pmx-default-dark-code-fg: oklch(0.9 0.01 250);
  --pmx-default-dark-code-comment: oklch(0.68 0.02 250);
  --pmx-default-dark-code-constant: oklch(0.78 0.11 285);
  --pmx-default-dark-code-keyword: oklch(0.78 0.13 255);
  --pmx-default-dark-code-parameter: oklch(0.78 0.11 45);
  --pmx-default-dark-code-function: oklch(0.76 0.12 230);
  --pmx-default-dark-code-string: oklch(0.78 0.12 145);
  --pmx-default-dark-code-punctuation: oklch(0.78 0.02 250);

  --pmx-code-bg: light-dark(
    var(--pmx-default-light-code-bg),
    var(--pmx-default-dark-code-bg)
  );
  --pmx-code-fg: light-dark(
    var(--pmx-default-light-code-fg),
    var(--pmx-default-dark-code-fg)
  );
  --pmx-inline-code-bg: color-mix(
    in oklch,
    var(--pmx-color-surface) 82%,
    var(--pmx-color-border)
  );
  --pmx-inline-code-fg: color-mix(
    in oklch,
    var(--pmx-color-fg) 92%,
    var(--pmx-color-muted)
  );
  --pmx-inline-code-border: color-mix(
    in oklch,
    var(--pmx-color-border) 70%,
    transparent
  );
  --pmx-code-comment: light-dark(
    var(--pmx-default-light-code-comment),
    var(--pmx-default-dark-code-comment)
  );
  --pmx-code-constant: light-dark(
    var(--pmx-default-light-code-constant),
    var(--pmx-default-dark-code-constant)
  );
  --pmx-code-keyword: light-dark(
    var(--pmx-default-light-code-keyword),
    var(--pmx-default-dark-code-keyword)
  );
  --pmx-code-parameter: light-dark(
    var(--pmx-default-light-code-parameter),
    var(--pmx-default-dark-code-parameter)
  );
  --pmx-code-function: light-dark(
    var(--pmx-default-light-code-function),
    var(--pmx-default-dark-code-function)
  );
  --pmx-code-string: light-dark(
    var(--pmx-default-light-code-string),
    var(--pmx-default-dark-code-string)
  );
  --pmx-code-string-expression: var(--pmx-code-string);
  --pmx-code-punctuation: light-dark(
    var(--pmx-default-light-code-punctuation),
    var(--pmx-default-dark-code-punctuation)
  );
  --pmx-code-link: var(--pmx-color-link);
  --pmx-code-inserted: oklch(0.48 0.13 145);
  --pmx-code-deleted: oklch(0.52 0.17 25);
  --pmx-code-changed: oklch(0.54 0.13 80);
  --pmx-code-ansi-black: oklch(0.22 0.01 250);
  --pmx-code-ansi-red: oklch(0.52 0.17 25);
  --pmx-code-ansi-green: oklch(0.48 0.13 145);
  --pmx-code-ansi-yellow: oklch(0.57 0.13 80);
  --pmx-code-ansi-blue: oklch(0.48 0.16 255);
  --pmx-code-ansi-magenta: oklch(0.5 0.16 315);
  --pmx-code-ansi-cyan: oklch(0.5 0.12 205);
  --pmx-code-ansi-white: oklch(0.92 0.01 250);
  --pmx-code-ansi-bright-black: oklch(0.42 0.02 250);
  --pmx-code-ansi-bright-red: oklch(0.61 0.2 25);
  --pmx-code-ansi-bright-green: oklch(0.57 0.15 145);
  --pmx-code-ansi-bright-yellow: oklch(0.66 0.15 80);
  --pmx-code-ansi-bright-blue: oklch(0.58 0.18 255);
  --pmx-code-ansi-bright-magenta: oklch(0.6 0.18 315);
  --pmx-code-ansi-bright-cyan: oklch(0.6 0.14 205);
  --pmx-code-ansi-bright-white: oklch(0.985 0 0);
}

:where(.pmx-document),
:where(.pmx-document) *,
:where(.pmx-document) *::before,
:where(.pmx-document) *::after {
  box-sizing: border-box;
}

:where(.pmx-document) :where(img, picture, svg, video, canvas, iframe) {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

:where(.pmx-document) :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

:where(.pmx-document)
  :where(
    a,
    button,
    input,
    label,
    select,
    summary,
    textarea,
    [role="button"],
    [role="link"],
    [tabindex]:not([tabindex="-1"])
  ) {
  touch-action: manipulation;
}

:where(.pmx-document[data-pathmx-color-scheme="light"]) {
  color-scheme: light;
}

:where(.pmx-document[data-pathmx-color-scheme="dark"]) {
  color-scheme: dark;
}

:where(.pmx-document[data-pathmx-reduced-motion="reduce"]),
:where(.pmx-document[data-pathmx-reduced-motion="reduce"]) *,
:where(.pmx-document[data-pathmx-reduced-motion="reduce"]) *::before,
:where(.pmx-document[data-pathmx-reduced-motion="reduce"]) *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

:where(.pmx-block) {
  box-sizing: border-box;
  max-inline-size: var(--pmx-prose-width);
  margin-inline: auto;
  padding-inline: clamp(1em, 4cqi, 2em);
  line-height: var(--pmx-prose-line-height);
}

:where(.pmx-block + .pmx-block) {
  margin-block-start: calc(var(--pmx-prose-block-gap) * 1.5);
}

:where(.pmx-block) > :where(:first-child) {
  margin-block-start: 0;
}

:where(.pmx-block) > :where(:last-child) {
  margin-block-end: 0;
}

:where(.pmx-block) > :where(h1, h2, h3, h4, h5, h6) {
  color: var(--pmx-color-fg);
  font-family: var(--pmx-font-heading);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  margin-block: calc(var(--pmx-prose-block-gap) * 1.8)
    calc(var(--pmx-prose-block-gap) * 0.75);
}

:where(.pmx-document) :where(h1, h2, h3, h4, h5, h6) > a {
  color: inherit;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
    color: var(--pmx-color-link);
  }
}

:where(.pmx-document) :where(h1, h2, h3, h4, h5, h6) > a:hover {
  color: var(--pmx-color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

:where(.pmx-document) :where(h1, h2, h3, h4, h5, h6) > a:focus-visible {
  outline: var(--pmx-focus-ring-width) solid var(--pmx-color-focus);
  outline-offset: 0.18em;
  border-radius: 0.12em;
}

:where(.pmx-block) > :where(h1) {
  font-size: 2.25em;
}

:where(.pmx-block) > :where(h2) {
  font-size: 1.75em;
}

:where(.pmx-block) > :where(h3) {
  font-size: 1.35em;
}

:where(.pmx-block) > :where(h4) {
  font-size: 1.15em;
}

:where(.pmx-block) > :where(h5, h6) {
  font-size: 1em;
}

:where(.pmx-block)
  > :where(p, ul, ol, blockquote, .pmx-callout, pre, table, .pmx-table-scroll, figure, hr, .pmx-code-block) {
  margin-block: var(--pmx-prose-block-gap);
}

:where(.pmx-block) :where(ul, ol) {
  padding-inline-start: 1.5em;
}

:where(.pmx-block) :where(ul) {
  list-style-type: disc;
}

:where(.pmx-block) :where(ul) :where(ul) {
  list-style-type: circle;
}

:where(.pmx-block) :where(ul) :where(ul) :where(ul) {
  list-style-type: square;
}

:where(.pmx-block) :where(ol) {
  list-style-type: decimal;
}

:where(.pmx-block) > :where(ul, ol) :where(ul, ol) {
  margin-block: 0.35em;
}

:where(.pmx-block) :where(li) {
  margin-block: 0.3em;
}

:where(.pmx-block) :where(li)::marker {
  color: var(--pmx-color-muted);
}

:where(.pmx-block) :where(input[type="checkbox"]) {
  margin-inline-end: 0.45em;
}

:where(.pmx-block)
  :where(a):is(
    [data-pathmx-rel],
    [data-pathmx-rel-target],
    [data-pathmx-target],
    [data-pathmx-wikilink],
    [data-pathmx-unresolved],
    [data-pathmx-route]
  ) {
  color: var(--pmx-color-link);
  text-decoration-line: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--pmx-color-link) 45%,
    transparent
  );
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:where(.pmx-block)
  :where(a):is(
    [data-pathmx-rel],
    [data-pathmx-rel-target],
    [data-pathmx-target],
    [data-pathmx-wikilink],
    [data-pathmx-unresolved],
    [data-pathmx-route]
  ):hover {
  text-decoration-color: currentColor;
}

:where(.pmx-block)
  :where(a):is(
    [data-pathmx-rel-status="unresolved"],
    [data-pathmx-wikilink-status="unresolved"],
    [data-pathmx-unresolved="true"]
  ) {
  border-radius: calc(var(--pmx-radius) * 0.45);
  background: color-mix(in oklch, var(--pmx-color-danger) 9%, transparent);
  color: var(--pmx-color-danger);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: color-mix(
    in oklch,
    var(--pmx-color-danger) 72%,
    transparent
  );
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:where(.pmx-block)
  :where(a):is(
    [data-pathmx-rel-status="unresolved"],
    [data-pathmx-wikilink-status="unresolved"],
    [data-pathmx-unresolved="true"]
  ):hover {
  text-decoration-color: currentColor;
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  ) {
  --pmx-action-bg: transparent;
  --pmx-action-bg-hover: var(--pmx-action-bg);
  --pmx-action-fg: var(--pmx-color-fg);
  --pmx-action-border: transparent;
  --pmx-action-border-hover: var(--pmx-action-border);
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  ):is(
    [data-pathmx-action-variant="primary"],
    [data-pathmx-action-variant="secondary"],
    [data-pathmx-action-variant="danger"]
  ) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-inline-size: 100%;
  min-block-size: max(2.25em, var(--pmx-interactive-target-size));
  border: 1px solid var(--pmx-action-border);
  border-radius: var(--pmx-radius);
  background: var(--pmx-action-bg);
  color: var(--pmx-action-fg);
  padding: 0.42em 0.82em;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  vertical-align: baseline;
  transition:
    background-color var(--pmx-motion-duration) var(--pmx-motion-easing),
    border-color var(--pmx-motion-duration) var(--pmx-motion-easing),
    color var(--pmx-motion-duration) var(--pmx-motion-easing),
    transform var(--pmx-motion-duration) var(--pmx-motion-easing);
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  ):is(
    [data-pathmx-action-variant="primary"],
    [data-pathmx-action-variant="secondary"],
    [data-pathmx-action-variant="danger"]
  ):hover {
  border-color: var(--pmx-action-border-hover);
  background: var(--pmx-action-bg-hover);
  color: var(--pmx-action-fg);
  text-decoration: none;
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  ):is(
    [data-pathmx-action-variant="primary"],
    [data-pathmx-action-variant="secondary"],
    [data-pathmx-action-variant="danger"]
  ):focus-visible {
  outline: var(--pmx-focus-ring-width) solid var(--pmx-color-focus);
  outline-offset: var(--pmx-focus-ring-offset);
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  )[data-pathmx-action-variant="primary"] {
  --pmx-action-bg: var(--pmx-color-accent);
  --pmx-action-bg-hover: color-mix(
    in oklch,
    var(--pmx-color-accent) 84%,
    var(--pmx-color-fg)
  );
  --pmx-action-fg: var(--pmx-color-bg);
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  )[data-pathmx-action-variant="secondary"] {
  --pmx-action-bg: var(--pmx-color-surface);
  --pmx-action-bg-hover: color-mix(
    in oklch,
    var(--pmx-color-accent) 10%,
    var(--pmx-color-surface)
  );
  --pmx-action-border: var(--pmx-color-border);
  --pmx-action-border-hover: color-mix(
    in oklch,
    var(--pmx-color-accent) 46%,
    var(--pmx-color-border)
  );
  --pmx-action-fg: var(--pmx-color-fg);
}

:where(.pmx-block)
  :where(a)[data-pathmx-rel="action"]:not(
    [data-pathmx-rel-status="unresolved"]
  )[data-pathmx-action-variant="danger"] {
  --pmx-action-bg: var(--pmx-color-danger);
  --pmx-action-bg-hover: color-mix(
    in oklch,
    var(--pmx-color-danger) 84%,
    var(--pmx-color-fg)
  );
  --pmx-action-fg: var(--pmx-color-bg);
}

:where(.pmx-block) > :where(blockquote) {
  border-inline-start: 0.25em solid var(--pmx-color-border);
  color: var(--pmx-color-muted);
  padding-inline-start: 1em;
}

:where(.pmx-callout) {
  --pmx-callout-accent: var(--pmx-color-accent);
  --pmx-callout-border: color-mix(
    in oklch,
    var(--pmx-callout-accent) 42%,
    var(--pmx-color-border)
  );
  --pmx-callout-surface: color-mix(
    in oklch,
    var(--pmx-callout-accent) 9%,
    var(--pmx-color-surface)
  );

  border: 1px solid var(--pmx-callout-border);
  border-inline-start-width: 0.28em;
  border-radius: var(--pmx-radius);
  background: var(--pmx-callout-surface);
  color: var(--pmx-color-fg);
  padding: 0.9em 1em;
}

:where(.pmx-callout--abstract) {
  --pmx-callout-accent: var(--pmx-color-muted);
}

:where(.pmx-callout--info, .pmx-callout--todo) {
  --pmx-callout-accent: var(--pmx-color-link);
}

:where(.pmx-callout--tip, .pmx-callout--success) {
  --pmx-callout-accent: oklch(0.58 0.14 145);
}

:where(.pmx-callout--question, .pmx-callout--example) {
  --pmx-callout-accent: oklch(0.58 0.14 285);
}

:where(.pmx-callout--warning) {
  --pmx-callout-accent: oklch(0.66 0.15 80);
}

:where(.pmx-callout--failure, .pmx-callout--danger, .pmx-callout--bug) {
  --pmx-callout-accent: var(--pmx-color-danger);
}

:where(.pmx-callout--quote) {
  --pmx-callout-accent: var(--pmx-color-muted);
  --pmx-callout-surface: color-mix(
    in oklch,
    var(--pmx-color-muted) 7%,
    transparent
  );
}

:where(.pmx-callout__title) {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  color: color-mix(
    in oklch,
    var(--pmx-callout-accent) 78%,
    var(--pmx-color-fg)
  );
  font-weight: 750;
  line-height: 1.35;
}

:where(.pmx-callout__title)::before {
  content: "";
  flex: none;
  inline-size: 0.72em;
  block-size: 0.72em;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-0.02em);
}

:where(details.pmx-callout) {
  padding-block: 0;
}

:where(details.pmx-callout) > :where(summary.pmx-callout__title) {
  cursor: pointer;
  list-style: none;
  padding-block: 0.9em;
}

:where(details.pmx-callout) > :where(summary.pmx-callout__title)::-webkit-details-marker {
  display: none;
}

:where(details.pmx-callout) > :where(summary.pmx-callout__title)::after {
  content: ">";
  margin-inline-start: auto;
  color: var(--pmx-color-muted);
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform var(--pmx-motion-duration) var(--pmx-motion-easing);
}

:where(details.pmx-callout[open]) > :where(summary.pmx-callout__title)::after {
  transform: rotate(90deg);
}

:where(.pmx-callout__content) {
  margin-block-start: 0.65em;
}

:where(details.pmx-callout) > :where(.pmx-callout__content) {
  border-block-start: 1px solid
    color-mix(in oklch, var(--pmx-callout-border) 68%, transparent);
  margin-block-start: 0;
  padding-block: 0.75em 0.9em;
}

:where(.pmx-callout__content) > :where(:first-child) {
  margin-block-start: 0;
}

:where(.pmx-callout__content) > :where(:last-child) {
  margin-block-end: 0;
}

:where(.pmx-callout--title-only) {
  padding-block: 0.75em;
}

:where(.pmx-block) > :where(hr) {
  border: 0;
  border-block-start: 1px solid var(--pmx-color-border);
}

/* Tables fill the measure but stay scrollable: the wrapper (emitted by the
   markdown renderer) is the scroll container, while the table itself is a
   real table box that grows to fill 100% and only overflows the wrapper when
   its content genuinely cannot fit. */
:where(.pmx-block) > :where(.pmx-table-scroll) {
  max-inline-size: 100%;
  overflow-x: auto;
}

:where(.pmx-table-scroll) > :where(table) {
  inline-size: 100%;
  border-collapse: collapse;
}

:where(.pmx-block) :where(th, td) {
  border-block-end: 1px solid var(--pmx-color-border);
  overflow-wrap: normal;
  padding: 0.55em 0.7em;
  text-align: start;
  vertical-align: top;
  word-break: normal;
}

:where(.pmx-block) :where(th) {
  color: var(--pmx-color-fg);
  font-weight: 650;
}

:where(.pmx-block) > :where(img, video, canvas, svg, iframe),
:where(.pmx-block) > :where(figure) :where(img, video, canvas, svg, iframe) {
  block-size: auto;
  max-inline-size: 100%;
}

:where(.pmx-block) > :where(figure) {
  color: var(--pmx-color-muted);
}

:where(.pmx-block) > :where(.pmx-wide) {
  inline-size: min(var(--pmx-wide-width), calc(100cqi - 2em));
  max-inline-size: calc(100cqi - 2em);
  margin-inline: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
}

:where(.pmx-block)
  > :where(.pmx-wide)
  > :where(img, video, canvas, svg, iframe),
:where(.pmx-block) > :where(.pmx-wide) :where(.pmx-mermaid-svg) {
  margin-inline: auto;
}

:where(.pmx-mermaid) {
  --pmx-mermaid-min-width: 42em;
}

:where(.pmx-mermaid-svg) {
  inline-size: max-content;
  min-inline-size: min(var(--pmx-mermaid-min-width), 100%);
  max-inline-size: 100%;
}

:where(.pmx-mermaid) :where(svg) {
  inline-size: 100%;
  block-size: auto;
}

:where(.pmx-block) > :where(mark) {
  background: color-mix(in srgb, var(--pmx-color-accent) 88%, transparent);
  color: var(--pmx-color-fg);
  padding: 0.12em 0.32em;
}

:where(.pmx-tag) {
  display: inline-flex;
  align-items: baseline;
  border: 1px solid
    color-mix(in oklch, var(--pmx-color-accent) 34%, transparent);
  border-radius: calc(var(--pmx-radius) * 0.7);
  background: color-mix(in oklch, var(--pmx-color-accent) 10%, transparent);
  color: color-mix(in oklch, var(--pmx-color-accent) 78%, var(--pmx-color-fg));
  font-size: 0.88em;
  font-weight: 650;
  line-height: 1.35;
  padding: 0.02em 0.34em;
  vertical-align: baseline;
}

:where(.pmx-footnote-ref) {
  font-size: 0.78em;
  line-height: 1;
  margin-inline: 0.08em;
  vertical-align: super;
}

:where(.pmx-footnote-ref) :where(a) {
  border-radius: calc(var(--pmx-radius) * 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 1.35em;
  min-inline-size: 1.35em;
  color: var(--pmx-color-link);
  text-decoration: none;
}

:where(.pmx-footnote-ref) :where(a:hover) {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

:where(.pmx-block) > :where(.pmx-footnotes) {
  border-block-start: 1px solid var(--pmx-color-border);
  color: var(--pmx-color-muted);
  font-size: 0.92em;
  margin-block-start: calc(var(--pmx-prose-block-gap) * 2);
  padding-block-start: var(--pmx-prose-block-gap);
}

:where(.pmx-footnotes) :where(ol) {
  margin-block: 0;
  padding-inline-start: 1.5em;
}

:where(.pmx-footnote) {
  padding-inline-start: 0.25em;
}

:where(.pmx-footnote) :where(.footnote-backref) {
  font-size: 0.85em;
  margin-inline-start: 0.45em;
}

:where(.pmx-block) :where(li.task-list-item) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.5em;
  list-style: none;
  position: relative;
  padding-inline-start: 0;
  margin-block: 0.35em;
}

:where(.pmx-block) :where(li.task-list-item)::marker {
  content: "";
}

:where(.pmx-block) :where(.task-list-item-checkbox) {
  inline-size: 1em;
  block-size: 1em;
  margin: 0;
  accent-color: var(--pmx-color-accent);
  opacity: 1;
}

:where(.pmx-block)
  :where(li.task-list-item > .task-list-item-checkbox:first-child) {
  grid-column: 1;
  margin-block-start: 0.28em;
}

:where(.pmx-block) :where(li.task-list-item > .pmx-task-list-body) {
  grid-column: 2;
  min-inline-size: 0;
}

:where(.pmx-block) :where(.pmx-task-list-body > p) {
  margin-block: 0.45em;
}

:where(.pmx-block)
  :where(.pmx-task-list-body > :is(p, h1, h2, h3, h4, h5, h6):first-child) {
  margin-block: 0;
}

:where(.pmx-block) :where(.pmx-task-list-body > pre),
:where(.pmx-block) :where(.pmx-task-list-body > .pmx-code-block) {
  margin-block: 0.55em;
}

:where(.pmx-block) :where(.pmx-task-list-body > :first-child) {
  margin-block-start: 0;
}

:where(.pmx-block) :where(.pmx-task-list-body > :last-child) {
  margin-block-end: 0;
}

:where(.pmx-block)
  :where(li.task-list-item:has(> .task-list-item-checkbox:checked)) {
  color: color-mix(in oklch, var(--pmx-color-fg) 62%, var(--pmx-color-muted));
}

:where(.pmx-block)
  :where(li.task-list-item:has(> .task-list-item-checkbox:checked) code) {
  color: inherit;
}

:where(.pmx-block) :where(code, kbd, samp) {
  border: 1px solid var(--pmx-inline-code-border);
  border-radius: calc(var(--pmx-radius) * 0.65);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--pmx-inline-code-bg);
  color: var(--pmx-inline-code-fg);
  font-family: var(--pmx-font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
  padding: 0.08em 0.3em;
  word-break: break-word;
}

:where(.pmx-block) :where(th, td) :where(code, kbd, samp) {
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

:where(.pmx-block) > :where(pre),
:where(.pmx-code-block) {
  position: relative;
  box-sizing: border-box;
  border: 1px solid var(--pmx-color-border);
  border-radius: var(--pmx-radius);
  background: var(--pmx-code-bg);
  color: var(--pmx-code-fg);
  overflow: hidden;
}

:where(.pmx-block) > :where(pre),
:where(.pmx-code-block) > :where(pre) {
  margin: 0;
  overflow-x: auto;
  padding: 1em;
}

:where(.pmx-code-block) > :where(pre) {
  border: 0;
  border-radius: 0;
}

:where(.pmx-block) > :where(pre) :where(code),
:where(.pmx-code-block) :where(pre code) {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: block;
  font-size: 0.9em;
  overflow-wrap: normal;
  padding: 0;
  word-break: normal;
}

:where(.pmx-code-block) :where(.shiki) {
  background: var(--pmx-code-bg);
  color: var(--pmx-code-fg);
}

:where(.pmx-code-copy) {
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-end: 0.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--pmx-interactive-target-size);
  min-inline-size: var(--pmx-interactive-target-size);
  border: 1px solid var(--pmx-color-border);
  border-radius: calc(var(--pmx-radius) * 0.75);
  background: color-mix(in srgb, var(--pmx-color-surface) 92%, transparent);
  color: var(--pmx-color-muted);
  cursor: pointer;
  transition:
    color var(--pmx-motion-duration) var(--pmx-motion-easing),
    border-color var(--pmx-motion-duration) var(--pmx-motion-easing),
    background-color var(--pmx-motion-duration) var(--pmx-motion-easing);
}

:where(.pmx-code-copy:hover) {
  color: var(--pmx-color-fg);
}

:where(.pmx-code-copy.is-copied) {
  color: var(--pmx-color-accent);
  border-color: currentColor;
}

:where(.pmx-code-copy.is-copied svg) {
  animation: pmx-code-copy-pop var(--pmx-motion-duration)
    var(--pmx-motion-easing);
}

@keyframes pmx-code-copy-pop {
  0% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

:where(.pmx-document)
  :where(
    a,
    button,
    input,
    textarea,
    select,
    summary,
    [tabindex]
  ):focus-visible {
  outline: var(--pmx-focus-ring-width) solid var(--pmx-color-focus);
  outline-offset: var(--pmx-focus-ring-offset);
}

@media (prefers-contrast: more) {
  :where(.pmx-document) {
    --pmx-color-border: currentColor;
    --pmx-focus-ring-width: 3px;
    --pmx-focus-ring-offset: 4px;
    --pmx-color-muted: var(--pmx-color-fg);
    --pmx-code-comment: var(--pmx-color-fg);
    --pmx-code-punctuation: var(--pmx-color-fg);
  }
}

@media (forced-colors: active) {
  :where(.pmx-document) {
    --pmx-color-bg: Canvas;
    --pmx-color-fg: CanvasText;
    --pmx-color-muted: CanvasText;
    --pmx-color-surface: Canvas;
    --pmx-color-link: LinkText;
    --pmx-color-accent: Highlight;
    --pmx-color-danger: Mark;
    --pmx-color-border: ButtonBorder;
    --pmx-color-focus: Highlight;
    --pmx-code-bg: Canvas;
    --pmx-code-fg: CanvasText;
    --pmx-inline-code-bg: Canvas;
    --pmx-inline-code-fg: CanvasText;
    --pmx-inline-code-border: ButtonBorder;
    --pmx-code-comment: GrayText;
    --pmx-code-constant: CanvasText;
    --pmx-code-keyword: LinkText;
    --pmx-code-parameter: CanvasText;
    --pmx-code-function: LinkText;
    --pmx-code-string: CanvasText;
    --pmx-code-punctuation: CanvasText;
  }

  :where(.pmx-block)
    :where(a):is(
      [data-pathmx-rel-status="unresolved"],
      [data-pathmx-wikilink-status="unresolved"],
      [data-pathmx-unresolved="true"]
    ) {
    background: Canvas;
    color: LinkText;
    text-decoration-color: currentColor;
  }

  :where(.pmx-tag) {
    border-color: ButtonBorder;
    background: Canvas;
    color: CanvasText;
  }

  :where(.pmx-callout) {
    border-color: ButtonBorder;
    background: Canvas;
    color: CanvasText;
  }

  :where(.pmx-callout__title) {
    color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.pmx-document) {
    --pmx-motion-duration: 1ms;
  }

  :where(.pmx-document) *,
  :where(.pmx-document) *::before,
  :where(.pmx-document) *::after {
    scroll-behavior: auto;
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

@media print {
  @page {
    margin: 0.75in;
  }

  body:has(> :where(.pmx-page)) {
    background: white;
    color: black;
  }

  :where(.pmx-document) {
    --pmx-color-bg: white;
    --pmx-color-fg: black;
    --pmx-color-muted: #444;
    --pmx-color-surface: white;
    --pmx-color-link: black;
    --pmx-color-danger: black;
    --pmx-color-border: #777;
    --pmx-code-bg: #f5f5f5;
    --pmx-code-fg: black;
    --pmx-inline-code-bg: #f5f5f5;
    --pmx-inline-code-fg: black;
    --pmx-inline-code-border: #aaa;
    min-block-size: auto;
    padding-block: 0;
    background: white;
    color: black;
    box-shadow: none;
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }

  :where(.pmx-block) {
    break-inside: avoid;
    padding-inline: 0;
  }

  :where(.pmx-block) > :where(h1, h2, h3, h4) {
    break-after: avoid;
    color: black;
  }

  :where(.pmx-block) :where(p, li, blockquote) > :where(a[href]),
  :where(.pmx-block) > :where(a[href]) {
    color: black;
    text-decoration: underline;
    text-underline-offset: 0.08em;
  }

  :where(.pmx-block)
    :where(p, li, blockquote)
    > :where(a[href^="http"]):not([href*="://localhost"])::after,
  :where(.pmx-block)
    > :where(a[href^="http"]):not([href*="://localhost"])::after {
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
    font-size: 0.85em;
    font-weight: normal;
  }

  :where(.pmx-block) > :where(pre, blockquote, .pmx-callout, table, .pmx-table-scroll, img, svg, figure),
  :where(.pmx-block) > :where(figure) :where(img, svg) {
    break-inside: avoid;
  }

  :where(.pmx-callout) {
    border-color: #777;
    background: white;
    color: black;
  }

  :where(.pmx-callout__title) {
    color: black;
  }

  :where(.pmx-block) > :where(pre) {
    white-space: pre-wrap;
    border-color: #777;
    background: #f5f5f5;
  }

  :where(.pmx-block) :where(table) {
    inline-size: 100%;
    border-collapse: collapse;
  }

  :where(.pmx-block) :where(th, td) {
    border-color: #777;
  }
}