[data-text-html] {
  --text-html-ink: var(--mc-theme-color-ink, #161616);
  --text-html-paper: var(--mc-theme-color-paper, #ffffff);
  --text-html-muted: var(--mc-theme-color-muted, #595959);
  --text-html-accent: var(--mc-theme-color-accent, #8b6f47);
  --text-html-content-width: 72ch;
  position: relative;
  width: 100%;
}

[data-text-html][data-text-has-background="true"] {
  background-position: center;
  background-size: cover;
}

[data-text-html]::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

[data-text-html] > * {
  position: relative;
  z-index: 1;
}

[data-text-html] > [data-text-html-background] {
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

[data-text-html-content] {
  color: var(--text-html-ink);
  font-family: var(--mc-theme-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: var(--mc-theme-type-body-size-current, 1rem);
  font-weight: var(--mc-theme-type-body-weight, 400);
  line-height: var(--mc-theme-type-body-line, 1.5);
  margin-inline: auto;
  max-width: var(--text-html-content-width);
  overflow-wrap: anywhere;
}

[data-text-font="body"] [data-text-html-content] {
  font-family: var(--mc-theme-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

[data-text-font="heading"] [data-text-html-content] {
  font-family: var(--mc-theme-font-heading, Georgia, serif);
}

[data-text-font="display"] [data-text-html-content] {
  font-family: var(--mc-theme-font-display, var(--mc-theme-font-heading, Georgia, serif));
}

[data-text-align="left"] [data-text-html-content] {
  text-align: left;
}

[data-text-align="center"] [data-text-html-content] {
  text-align: center;
}

[data-text-align="right"] [data-text-html-content] {
  text-align: right;
}

[data-text-align="justify"] [data-text-html-content] {
  text-align: justify;
}

[data-text-width="narrow"] {
  --text-html-content-width: 54ch;
}

[data-text-width="normal"] {
  --text-html-content-width: 72ch;
}

[data-text-width="wide"] {
  --text-html-content-width: 96ch;
}

[data-text-width="full"] {
  --text-html-content-width: none;
}

[data-text-size="small"] [data-text-html-content] {
  font-size: var(--mc-theme-type-body-size-current, 1rem);
  font-weight: var(--mc-theme-type-body-weight, 400);
  line-height: var(--mc-theme-type-body-line, 1.5);
}

[data-text-size="medium"] [data-text-html-content] {
  font-size: var(--mc-theme-type-body-size-current, 1rem);
  font-weight: var(--mc-theme-type-body-weight, 400);
  line-height: var(--mc-theme-type-body-line, 1.5);
}

[data-text-size="large"] [data-text-html-content] {
  font-size: var(--mc-theme-type-lead-size-current, 1.125rem);
  font-weight: var(--mc-theme-type-lead-weight, 400);
  line-height: var(--mc-theme-type-lead-line, 1.55);
}

[data-text-size="xlarge"] [data-text-html-content] {
  font-size: var(--mc-theme-type-lead-size-current, 1.125rem);
  font-weight: var(--mc-theme-type-lead-weight, 400);
  line-height: var(--mc-theme-type-lead-line, 1.55);
}

[data-text-size="display"] [data-text-html-content] {
  font-size: var(--mc-theme-type-lead-size-current, 1.125rem);
  font-weight: var(--mc-theme-type-lead-weight, 400);
  line-height: var(--mc-theme-type-lead-line, 1.55);
}

[data-text-html-content] :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
  margin-block: 0 0.72em;
}

[data-text-html-content] :where(h1, h2, h3, h4) {
  color: inherit;
  font-family: var(--mc-theme-font-heading, inherit);
  letter-spacing: 0;
}

[data-text-html-content] :where(h1, h2) {
  font-size: var(--mc-theme-type-section-title-size-current, 2rem);
  font-weight: var(--mc-theme-type-section-title-weight, 800);
  line-height: var(--mc-theme-type-section-title-line, 1.1);
}

[data-text-html-content] :where(h3, h4) {
  font-size: var(--mc-theme-type-card-title-size-current, 1.25rem);
  font-weight: var(--mc-theme-type-card-title-weight, 700);
  line-height: var(--mc-theme-type-card-title-line, 1.2);
}

[data-text-html-content] :where(strong, b) {
  font-weight: 800;
}

[data-text-html-content] :where(em, i) {
  font-style: italic;
}

[data-text-html-content] :where(ul, ol) {
  display: inline-block;
  padding-inline-start: 1.25em;
  text-align: start;
}

[data-text-html-content] :where(a) {
  color: var(--text-html-accent);
  font-weight: 700;
}

[data-text-surface="soft_panel"] {
  background: color-mix(in srgb, var(--text-html-paper) 94%, var(--text-html-ink));
  border: 1px solid color-mix(in srgb, var(--text-html-ink) 12%, transparent);
  padding: clamp(28px, 5vw, 72px);
}

[data-text-surface="dark_panel"],
[data-text-surface="dark_framed"] {
  background-color: #141414;
  color: #fff;
  padding: clamp(38px, 6vw, 96px);
}

[data-text-surface="dark_panel"]::before,
[data-text-surface="dark_framed"]::before {
  background: rgba(0, 0, 0, 0.68);
}

[data-text-surface="dark_panel"] [data-text-html-content],
[data-text-surface="dark_framed"] [data-text-html-content] {
  --text-html-ink: #fff;
  --text-html-muted: rgba(255, 255, 255, 0.78);
  --text-html-accent: #f4dfb5;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

[data-text-surface="dark_framed"] {
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.84), inset 0 0 0 7px rgba(255, 255, 255, 0.7);
}

[data-text-html-content]:empty::before {
  color: #a3a3a3;
  content: "Empty formatted text - click to edit";
  font-style: italic;
}

@media (max-width: 680px) {
  [data-text-surface="soft_panel"],
  [data-text-surface="dark_panel"],
  [data-text-surface="dark_framed"] {
    padding: clamp(24px, 8vw, 42px);
  }
}