/* Shared Markata-Go presentation treatment. It is intentionally scoped to
   browser previews and slides, not the editor or application chrome. */
.markata-theme {
  --markata-surface: var(--markata-panel, var(--panel));
  --markata-text: var(--markata-ink, var(--ink));
  --markata-accent-color: var(--markata-accent, var(--accent));
  position: relative;
  isolation: isolate;
  background-color: var(--markata-bg, var(--bg));
   background-image: var(--markata-motif-under-image, none);
   background-size: var(--markata-motif-pattern-size, var(--markata-motif-size, 78px));
   background-repeat: repeat;
  color: var(--markata-text);
}
.canonical-specimen {
  box-sizing: border-box;
   position: relative;
   width: 1280px !important;
   height: 1000px !important;
   min-height: 1000px !important;
  max-width: none;
  padding: 24px;
  overflow: hidden !important;
  line-height: 1.6 !important;
}
.canonical-specimen.markata-theme {
   background-image: var(--markata-texture-image, none);
  background-size: var(--markata-texture-size, 180px 180px);
  background-repeat: var(--markata-texture-repeat, repeat);
}
.canonical-specimen .document { box-sizing: border-box; width: 680px !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; font-family: var(--markata-body-font) !important; font-size: 16px !important; line-height: 1.6 !important; }
.canonical-specimen .document > .canonical-document__title { margin: 0 0 .75rem !important; font-family: var(--markata-heading-font) !important; font-size: clamp(2.5rem, 8vw, 5rem) !important; line-height: .95 !important; }
.canonical-specimen :is(p, li, blockquote, table) { font-family: var(--markata-body-font, var(--sans)) !important; }
.canonical-specimen :is(h1, h2, h3, h4, h5, h6) { font-family: var(--markata-heading-font) !important; font-weight: 400 !important; }
.canonical-specimen .document h1 { margin: 2.5rem 0 .75rem !important; font-size: clamp(2.5rem, 8vw, 5rem) !important; line-height: .95 !important; }
.canonical-specimen .document h2 { margin: 2.5rem 0 .75rem !important; font-size: clamp(2rem, 5vw, 3.5rem) !important; line-height: 1 !important; }
.canonical-specimen .document h3 { margin: 2.5rem 0 .75rem !important; font-size: 2rem !important; line-height: 1.05 !important; }
.canonical-specimen .document h4 { margin: 2.5rem 0 .75rem !important; font-size: 1.5rem !important; line-height: 1.1 !important; }
.canonical-specimen .document h5 { margin: 2.5rem 0 .75rem !important; font-size: 1.25rem !important; line-height: 1.2 !important; }
.canonical-specimen .document h6 { margin: 2.5rem 0 .75rem !important; font-size: 1rem !important; line-height: 1.25 !important; }
.canonical-specimen .document p { margin: 1rem 0 !important; line-height: 1.6 !important; }
html.canonical-specimen-route body > :not([data-rendering-specimen]),
body.canonical-specimen-mode > :not([data-rendering-specimen]) { display: none !important; }
html.canonical-specimen-route body,
body.canonical-specimen-mode { margin: 0; overflow: hidden; line-height: 1.6 !important; }
html.canonical-specimen-route body > [data-rendering-specimen],
body.canonical-specimen-mode > [data-rendering-specimen] { display: block; }

.markata-theme::before,
.markata-theme::after {
  position: absolute;
  inset: 0;
   z-index: 0;
  pointer-events: none;
  content: '';
}

.markata-theme::before {
   background-image: var(--markata-texture-image, none);
  background-size: var(--markata-texture-size, auto);
  background-repeat: var(--markata-texture-repeat, repeat);
  opacity: var(--markata-texture-coverage, 0);
}

.markata-theme::after {
   background-image: var(--markata-motif-over-image, none);
  background-position: var(--markata-motif-row-offset, 0%) 0;
  background-repeat: repeat;
   background-size: var(--markata-motif-pattern-size, var(--markata-motif-size, 78px));
  opacity: var(--markata-motif-opacity, 1);
  transform: rotate(var(--markata-motif-wobble, 0deg));
}

.markata-theme > * { position: relative; z-index: 4; }
.markata-theme > .markata-canonical-texture-layer { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; background-repeat:repeat; background-color:color-mix(in srgb, var(--markata-text, #333) 4%, transparent); background-blend-mode:multiply; }
.canonical-specimen > .markata-canonical-texture-layer { position:absolute; inset:0; width:1280px; height:1000px; }
html.canonical-natural-route .canonical-specimen > .markata-canonical-texture-layer { width:100%; height:100%; }
html.canonical-natural-route .preview-shell,
html.canonical-natural-route .preview-stage,
html.canonical-natural-route .preview-pane,
html.canonical-natural-route .preview-content,
html.canonical-natural-route .canonical-specimen { position:relative !important; inset:auto !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
.markata-theme .document, .markata-theme .document * { position: relative; z-index: 5; }
.markata-theme .document {
  /* The document is a reading surface. Keep it separate from the motif and
     texture layers so those layers do not turn the surface into a tiled grid. */
  width: min(100%, var(--markata-surface-width, 1000px));
  max-width: var(--markata-surface-width, 1000px);
  margin-inline: auto;
  flex: 1 1 0;
  position: relative;
   /* The document is the reading surface. Keep motif and texture layers
      behind it, especially in light themes where dark artwork is high
      contrast. */
   background-color: var(--markata-surface, var(--panel)) !important;
}
/* Quiet suppresses the surface texture while preserving the reading surface. */
.markata-theme[data-markata-texture-scope="quiet"] .document {
   background-color: var(--markata-surface, var(--panel)) !important;
}
.markata-theme .document > * { position: relative; z-index: 1; }
.markata-theme .document h1,
.markata-theme .document h2,
.markata-theme .document h3,
.markata-theme .document h4,
.markata-theme .document h5,
.markata-theme .document h6 { position: relative; z-index: 6; }
.markata-theme .document-heading,
.markata-theme h1,
.markata-theme h2,
.markata-theme h3,
.markata-theme h4,
.markata-theme h5,
.markata-theme h6 {
  color: var(--markata-text);
  font-family: var(--markata-heading-font, var(--preview-heading-font, var(--sans)));
  letter-spacing: -.035em;
  text-wrap: balance;
}
html[data-markata-fontpack] .preview-pane :is(.document-heading, h1, h2, h3, h4, h5, h6) { font-family: var(--markata-heading-font, var(--sans)) !important; }
html[data-markata-fontpack] .preview-pane { font-family: var(--markata-body-font, var(--sans)) !important; }
html[data-markata-fontpack] .preview-pane :is(p, li, blockquote, table) { font-family: var(--markata-body-font, var(--sans)) !important; }
html[data-markata-fontpack] .preview-pane :is(pre, code, kbd, samp) { font-family: var(--markata-mono-font, var(--mono)) !important; }
.markata-theme :is(strong, em, del, sub, sup, kbd) { font-family: inherit; }
.markata-theme :is(h1, h2, h3, h4, h5, h6) :is(strong, em, del, sub, sup, mark, a) { font-family: inherit !important; }
.markata-theme :is(h1, h2, h3, h4, h5, h6) :is(code, kbd, samp) { font-family: var(--markata-mono-font) !important; }
.markata-theme :is(pre, code, kbd, samp) { font-family: var(--markata-mono-font, var(--mono)) !important; }
.markata-theme :is(h1, h2, h3, h4, h5, h6) { line-height: 1; }
.canonical-specimen .document { font-size: 1rem; line-height: 1.6; }
.canonical-specimen .document p,
.canonical-specimen .document p * { white-space: normal; }
.canonical-specimen .document p code { white-space: nowrap; font-size: 1em; padding: 0; }
.canonical-specimen .document :is(h1, h2) { white-space: normal !important; letter-spacing: normal !important; text-wrap: wrap !important; font-synthesis: none; }
.canonical-specimen .document h1 { font-size: 80px !important; line-height: .95 !important; }
.canonical-specimen .document h2 { font-size: 56px !important; line-height: 1 !important; }
.canonical-specimen .document h3 { font-size: 2rem; line-height: 1.05; }
.canonical-specimen .document h4 { font-size: 1.5rem; line-height: 1.1; }
.canonical-specimen .document h5 { font-size: 1.25rem; line-height: 1.2; }
.canonical-specimen .document h6 { font-size: 1rem; line-height: 1.25; }

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h1,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h2,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h3,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h4,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h5,
.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) h6 {
  /* Heading borders and backgrounds must remain intact; wear belongs only to
     the word spans below. */
  background-image: none;
  background-color: transparent !important;
  color: var(--markata-text);
  -webkit-text-fill-color: var(--markata-text);
}

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) .markata-heading-wear {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: baseline;
   -webkit-mask-image: var(--markata-heading-texture-effective-mask, var(--markata-heading-texture-image, none));
  -webkit-mask-size: var(--markata-heading-texture-size, 180px 180px);
  -webkit-mask-position: var(--markata-heading-texture-position, 0 0);
  -webkit-mask-repeat: var(--markata-heading-texture-repeat, repeat);
  -webkit-mask-mode: alpha;
   mask-image: var(--markata-heading-texture-effective-mask, var(--markata-heading-texture-image, none));
  mask-size: var(--markata-heading-texture-size, 180px 180px);
  mask-position: var(--markata-heading-texture-position, 0 0);
  mask-repeat: var(--markata-heading-texture-repeat, repeat);
  mask-mode: alpha;
   -webkit-text-fill-color: currentColor;
   color: color-mix(in srgb, currentColor calc(var(--markata-heading-wear-coverage, 1) * 100%), var(--markata-bg, #14171e));
   -webkit-text-fill-color: color-mix(in srgb, currentColor calc(var(--markata-heading-wear-coverage, 1) * 100%), var(--markata-bg, #14171e));
}
.canonical-specimen .document :is(h1, h2, h3, h4, h5, h6) :is(strong, em, a) {
  color: var(--markata-text) !important;
  font-family: var(--markata-heading-font) !important;
}
.canonical-specimen .document :is(h1, h2) .heading-highlight {
  position: relative;
  isolation: isolate;
  line-height: inherit;
}
.canonical-specimen .document :is(h1, h2) .heading-highlight.is-measured > mark {
  background: transparent !important;
}
.heading-highlight__contour {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.markata-theme .document .heading-highlight__contour {
  position: absolute;
  z-index: -1;
}
.canonical-specimen .document :is(h1, h2, h3, h4, h5, h6) mark {
  background: var(--color-highlight) !important;
  color: var(--color-highlight-text) !important;
  -webkit-text-fill-color: var(--color-highlight-text) !important;
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 0 !important;
}
.canonical-specimen .document :is(h1, h2, h3, h4, h5, h6) :is(code, kbd, samp) {
  color: inherit !important;
  font-family: var(--markata-mono-font) !important;
}

.markata-theme:is([data-markata-heading-texture="inherit"], [data-markata-heading-texture="splatter"], [data-markata-heading-texture="brush"], [data-markata-heading-texture="grunge"], [data-markata-heading-texture="screenprint"]) :is(h1, h2, h3, h4, h5, h6) mark {
  background: var(--color-highlight) !important;
  -webkit-text-fill-color: var(--color-highlight-text) !important;
  color: var(--color-highlight-text) !important;
  text-shadow: 0 0 0 var(--color-highlight-text);
}

.markata-theme p,
.markata-theme li,
.markata-theme blockquote,
.markata-theme table { max-width: var(--content-width, 68ch); }
.markata-theme { font-family: var(--markata-body-font, var(--preview-font, var(--sans))); }
.markata-theme a { color: var(--markata-accent-color); text-decoration-color: color-mix(in srgb, var(--markata-accent-color) 60%, transparent); text-decoration-line: underline; text-underline-offset: .14em; }
.markata-theme :focus-visible { outline: 3px solid var(--markata-accent-color); outline-offset: 3px; }
.markata-theme blockquote { border-left: 3px solid var(--markata-accent-color); padding-left: 1.2em; color: color-mix(in srgb, var(--markata-text) 78%, var(--markata-bg)); }
.markata-theme pre,
.markata-theme code { font-family: var(--markata-mono-font, var(--preview-code-font, var(--mono))); }
.markata-theme pre { border: 1px solid var(--markata-line, var(--line)); border-radius: var(--markata-radius, var(--radius)); background: var(--markata-surface); box-shadow: var(--markata-shadow, none); }
.markata-theme mark { background: var(--color-highlight) !important; color: var(--color-highlight-text) !important; }
.markata-theme .admonition,
.markata-theme .markdown-container,
.markata-theme details { border-radius: var(--markata-radius, var(--radius)); border-color: var(--markata-line, var(--line)); background: color-mix(in srgb, var(--markata-surface) 88%, var(--markata-accent-color)); }

/* The motif sits over the quiet surface only when the configured layer says so.
   The URL form supports the canonical block-w SVG; the glyph form is a safe
   fallback for generated themes that do not ship an asset. */
html[data-markata-motif="block-w"] .markata-theme::after { content: ''; }
/* Decorative stack, from back to front:
   surface background → under motif → texture → over motif → content. */
html[data-markata-motif-layer="under"] .markata-theme,
html[data-markata-motif-layer="sandwich"] .markata-theme {
  background-image: var(--markata-motif-image, none);
  background-position: var(--markata-motif-row-offset, 0%) 0;
  background-repeat: repeat;
  background-size: var(--markata-motif-pattern-size, var(--markata-motif-size, 78px));
}
html[data-markata-motif-layer="under"] .markata-theme::after { display: none; }
html[data-markata-motif-layer="over"] .markata-theme::after,
html[data-markata-motif-layer="sandwich"] .markata-theme::after { z-index: 2; }
html[data-markata-motif-layer="over"] .markata-theme::before,
html[data-markata-motif-layer="sandwich"] .markata-theme::before { z-index: 1; }
html[data-markata-texture="none"] .markata-theme::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .markata-theme::before,
  .markata-theme::after { transform: none; }
}