.matoc {
  --matoc-width: 100%;
  --matoc-font-size: 16px;
  --matoc-border: #dbe3ee;
  --matoc-bg: #fff;
  --matoc-link: #1f2937;
  --matoc-title: #111827;
  --matoc-active: #2563eb;
  --matoc-sticky-top: 96px;
  --matoc-sticky-width: 320px;
  box-sizing: border-box;
  width: min(var(--matoc-width), 100%);
  margin: 1.5rem 0;
  border: 1px solid var(--matoc-border);
  border-radius: 12px;
  background: var(--matoc-bg);
  color: var(--matoc-link);
  font-size: var(--matoc-font-size);
  line-height: 1.55;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .06);
  overflow: visible;
}

.matoc *, .matoc *::before, .matoc *::after { box-sizing: border-box; }
.matoc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--matoc-border), transparent 15%);
}
.matoc-title { color: var(--matoc-title); font-weight: 700; font-size: 1.05em; flex: 1 1 auto; }
.matoc-title:empty { display: none; }
.matoc-read-time { flex: 0 0 auto; color: color-mix(in srgb, var(--matoc-link), transparent 35%); font-size: .82em; white-space: nowrap; }
.matoc-toggle, .matoc-sub-toggle, .matoc-view-more {
  border: 0;
  background: transparent;
  color: var(--matoc-active);
  font: inherit;
  cursor: pointer;
}
.matoc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: .85em;
  font-weight: 600;
}
.matoc-toggle:hover, .matoc-toggle:focus-visible, .matoc-view-more:hover, .matoc-view-more:focus-visible { background: color-mix(in srgb, var(--matoc-active), transparent 90%); }
.matoc-toggle:focus-visible, .matoc-sub-toggle:focus-visible, .matoc-view-more:focus-visible, .matoc-link:focus-visible { outline: 2px solid var(--matoc-active); outline-offset: 2px; }
.matoc-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.matoc-toggle[aria-expanded="false"] .matoc-chevron { transform: rotate(-45deg); }
.matoc-body { padding: 14px 18px 16px; max-height: min(70vh, 760px); overflow: auto; scrollbar-width: thin; }
.matoc-body[hidden] { display: none !important; }
.matoc-list, .matoc-sub-list { margin: 0; padding-left: 1.35em; }
.matoc-list { column-gap: 2rem; }
.matoc-sub-list { margin: .25em 0 .35em; padding-left: 1.25em; }
.matoc-list li, .matoc-sub-list li { margin: .25em 0; break-inside: avoid; }
.matoc-item-row { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
.matoc-link { color: var(--matoc-link); text-decoration: none; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; border-radius: 4px; transition: color .15s ease, background .15s ease; }
.matoc-preserve-line-breaks .matoc-link { white-space: pre-line; }
.matoc-link:hover { color: var(--matoc-active); text-decoration: underline; text-underline-offset: 3px; }
.matoc-link.is-active { color: var(--matoc-active); font-weight: 700; background: color-mix(in srgb, var(--matoc-active), transparent 92%); }
.matoc-sub-toggle { flex: 0 0 28px; width: 28px; height: 28px; line-height: 28px; padding: 0; border-radius: 6px; font-weight: 700; }
.matoc-sub-toggle:hover { background: color-mix(in srgb, var(--matoc-active), transparent 90%); }
.matoc-item.is-sub-collapsed > .matoc-sub-list { display: none; }
.matoc-view-more { display: block; margin: 12px auto 0; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: .88em; font-weight: 700; }
.matoc-view-hidden { display: none !important; }

.matoc-counter-none ol { list-style: none; padding-left: 0; }
.matoc-counter-decimal ol { list-style-type: decimal; }
.matoc-counter-roman ol { list-style-type: lower-roman; }
.matoc-counter-alpha ol { list-style-type: lower-alpha; }
.matoc-counter-disc ol { list-style-type: disc; }

.matoc-columns-2 > .matoc-body > .matoc-list { column-count: 2; }
.matoc-columns-3 > .matoc-body > .matoc-list { column-count: 3; }
.matoc-align-left { margin-right: auto; }
.matoc-align-center { margin-left: auto; margin-right: auto; }
.matoc-align-right { margin-left: auto; }

.matoc-theme-dark { --matoc-bg: #111827 !important; --matoc-border: #374151 !important; --matoc-link: #e5e7eb !important; --matoc-title: #fff !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .22); }
.matoc-theme-transparent { background: transparent; box-shadow: none; }
.matoc-theme-blue { --matoc-bg: #eff6ff !important; --matoc-border: #bfdbfe !important; --matoc-link: #1e3a8a !important; --matoc-title: #172554 !important; --matoc-active: #1d4ed8 !important; }

.matoc-sticky-inline { position: sticky; top: var(--matoc-sticky-top); z-index: 20; }
.matoc-sticky-fixed { position: fixed; top: var(--matoc-sticky-top); width: min(var(--matoc-sticky-width), calc(100vw - 32px)); max-height: calc(100vh - var(--matoc-sticky-top) - 24px); z-index: 9998; margin: 0; }
.matoc-sticky-fixed.matoc-sticky-left { left: 18px; }
.matoc-sticky-fixed.matoc-sticky-right { right: 18px; }
.matoc-sticky-fixed .matoc-body { max-height: calc(100vh - var(--matoc-sticky-top) - 100px); }

.matoc-heading { scroll-margin-top: calc(var(--matoc-page-offset, 80px) + 12px); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1024px) {
  .matoc-columns-3 > .matoc-body > .matoc-list { column-count: 2; }
  .matoc-sticky-fixed { top: auto; left: 12px !important; right: 12px !important; bottom: 12px; width: auto; max-height: 68vh; }
  .matoc-sticky-fixed .matoc-body { max-height: calc(68vh - 62px); }
}

@media (max-width: 782px) {
  .matoc { border-radius: 10px; font-size: max(14px, var(--matoc-font-size)); }
  .matoc-header { padding: 10px 12px; }
  .matoc-body { padding: 12px 14px 14px; }
  .matoc-columns-2 > .matoc-body > .matoc-list,
  .matoc-columns-3 > .matoc-body > .matoc-list { column-count: 1; }
  .matoc-hide-mobile { display: none !important; }
}

@media (min-width: 783px) {
  .matoc-hide-desktop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .matoc *, .matoc *::before, .matoc *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

@media print {
  .matoc { position: static !important; width: 100% !important; max-height: none !important; box-shadow: none; break-inside: avoid; }
  .matoc-body { display: block !important; max-height: none; overflow: visible; }
  .matoc-toggle, .matoc-sub-toggle, .matoc-view-more { display: none !important; }
  .matoc-view-hidden, .matoc-item.is-sub-collapsed > .matoc-sub-list { display: list-item !important; }
}


/* News / Professional theme */
.matoc-theme-news {
  --matoc-bg: #fff7f7 !important;
  --matoc-border: #f1d2d2 !important;
  --matoc-link: #24364f !important;
  --matoc-title: #ffffff !important;
  --matoc-active: #d92d27 !important;
  border-color: var(--matoc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(114, 28, 28, .10);
  overflow: hidden;
}
.matoc-theme-news .matoc-header {
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0;
  background: linear-gradient(180deg, #e63831 0%, #d72b25 100%);
}
.matoc-theme-news .matoc-title {
  color: #fff;
  font-size: 1.08em;
  font-weight: 800;
  letter-spacing: .01em;
}
.matoc-theme-news .matoc-read-time { color: rgba(255,255,255,.86); }
.matoc-theme-news .matoc-toggle,
.matoc-theme-news .matoc-view-more { color: #fff; }
.matoc-theme-news .matoc-toggle:hover,
.matoc-theme-news .matoc-toggle:focus-visible,
.matoc-theme-news .matoc-view-more:hover,
.matoc-theme-news .matoc-view-more:focus-visible { background: rgba(255,255,255,.12); }
.matoc-theme-news .matoc-chevron {
  width: 9px;
  height: 9px;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
}
.matoc-theme-news .matoc-body {
  padding: 12px 16px 14px;
  background: #fff7f7;
}
.matoc-theme-news .matoc-list,
.matoc-theme-news .matoc-sub-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.matoc-theme-news > .matoc-body > .matoc-list {
  display: grid;
  gap: 0 28px;
}
.matoc-theme-news.matoc-columns-1 > .matoc-body > .matoc-list { grid-template-columns: 1fr; }
.matoc-theme-news.matoc-columns-2 > .matoc-body > .matoc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.matoc-theme-news.matoc-columns-3 > .matoc-body > .matoc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matoc-theme-news .matoc-list { counter-reset: matoc-professional-item; }
.matoc-theme-news .matoc-list > .matoc-item { counter-increment: matoc-professional-item; }
.matoc-theme-news .matoc-list > .matoc-item > .matoc-item-row::before {
  content: counter(matoc-professional-item);
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e23831;
  color: #fff;
  font-size: .84em;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(226, 56, 49, .22);
}
.matoc-theme-news .matoc-item,
.matoc-theme-news .matoc-sub-list .matoc-item { margin: 0; }
.matoc-theme-news .matoc-item-row {
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
}
.matoc-theme-news .matoc-link {
  color: #334155;
  font-weight: 700;
  line-height: 1.45;
  padding-top: 2px;
}
.matoc-theme-news .matoc-link:hover,
.matoc-theme-news .matoc-link.is-active {
  color: #d72b25;
  text-decoration: none;
  background: transparent;
}
.matoc-theme-news .matoc-sub-list {
  margin: 0 0 2px 38px;
  padding-bottom: 4px;
  border-left: 1px dashed rgba(215, 43, 37, .22);
  padding-left: 12px;
}
.matoc-theme-news .matoc-sub-list .matoc-link {
  font-weight: 600;
  font-size: .96em;
}
.matoc-theme-news .matoc-sub-toggle {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  color: #d72b25;
}
.matoc-theme-news .matoc-sub-toggle:hover,
.matoc-theme-news .matoc-sub-toggle:focus-visible {
  background: rgba(215, 43, 37, .08);
}
.matoc-theme-news .matoc-view-more {
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  background: #e23831;
  color: #fff;
  padding: 9px 16px;
  box-shadow: 0 10px 20px rgba(226, 56, 49, .20);
}
@media (max-width: 782px) {
  .matoc-theme-news > .matoc-body > .matoc-list { grid-template-columns: 1fr !important; }
  .matoc-theme-news .matoc-header { padding: 11px 13px; }
  .matoc-theme-news .matoc-body { padding: 10px 13px 12px; }
}