.expressive-code {
  font-family: var(--ec-uiFontFml);
  font-size: var(--ec-uiFontSize);
  line-height: var(--ec-uiLineHt);
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  margin: 1.5rem 0;
}

.expressive-code *:not(path) {
  all: revert;
  box-sizing: border-box;
}

.expressive-code pre {
  display: flex;
  margin: 0;
  padding: 0;
  border: var(--ec-brdWd) solid var(--ec-brdCol);
  border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
  background: var(--ec-codeBg);
}

.expressive-code pre:focus-visible {
  outline: 3px solid var(--ec-focusBrd);
  outline-offset: -3px;
}

.expressive-code pre > code {
  all: unset;
  display: block;
  flex: 1 0 100%;
  padding: var(--ec-codePadBlk) 0;
  color: var(--ec-codeFg);
  font-family: var(--ec-codeFontFml);
  font-size: var(--ec-codeFontSize);
  line-height: var(--ec-codeLineHt);
}

.expressive-code pre {
  overflow-x: auto;
}

.expressive-code pre::-webkit-scrollbar,
.expressive-code pre::-webkit-scrollbar-track {
  background-color: inherit;
  border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.expressive-code pre::-webkit-scrollbar-thumb {
  background-color: var(--ec-sbThumbCol);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

.expressive-code pre::-webkit-scrollbar-thumb:hover {
  background-color: var(--ec-sbThumbHoverCol);
}

.expressive-code .ec-line {
  padding-inline: var(--ec-codePadInl);
  padding-inline-end: calc(2rem + var(--ec-codePadInl));
  direction: ltr;
  unicode-bidi: isolate;
}

.expressive-code .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.expressive-code .ec-line.mark {
  --tmLineBgCol: var(--ec-tm-markBg);
  --tmLineBrdCol: var(--ec-tm-markBrdCol);
}

.expressive-code .ec-line.ins {
  --tmLineBgCol: var(--ec-tm-insBg);
  --tmLineBrdCol: var(--ec-tm-insBrdCol);
}

.expressive-code .ec-line.ins::before {
  content: var(--ec-tm-insDiffIndContent);
  color: var(--ec-tm-insDiffIndCol);
}

.expressive-code .ec-line.del {
  --tmLineBgCol: var(--ec-tm-delBg);
  --tmLineBrdCol: var(--ec-tm-delBrdCol);
}

.expressive-code .ec-line.del::before {
  content: var(--ec-tm-delDiffIndContent);
  color: var(--ec-tm-delDiffIndCol);
}

.expressive-code .ec-line.mark,
.expressive-code .ec-line.ins,
.expressive-code .ec-line.del {
  position: relative;
  background: var(--tmLineBgCol);
  min-width: calc(100% - var(--ec-tm-lineMarkerAccentMarg));
  margin-inline-start: var(--ec-tm-lineMarkerAccentMarg);
  border-inline-start: var(--ec-tm-lineMarkerAccentWd) solid var(--tmLineBrdCol);
  padding-inline-start: calc(
    var(--ec-codePadInl) - var(--ec-tm-lineMarkerAccentMarg) - var(--ec-tm-lineMarkerAccentWd)
  ) !important;
}

.expressive-code .ec-line.mark::before,
.expressive-code .ec-line.ins::before,
.expressive-code .ec-line.del::before {
  position: absolute;
  left: var(--ec-tm-lineDiffIndMargLeft);
}

.expressive-code .ec-line mark {
  --tmInlineBgCol: var(--ec-tm-markBg);
  --tmInlineBrdCol: var(--ec-tm-markBrdCol);
}

.expressive-code .ec-line ins {
  --tmInlineBgCol: var(--ec-tm-insBg);
  --tmInlineBrdCol: var(--ec-tm-insBrdCol);
}

.expressive-code .ec-line del {
  --tmInlineBgCol: var(--ec-tm-delBg);
  --tmInlineBrdCol: var(--ec-tm-delBrdCol);
}

.expressive-code .ec-line mark,
.expressive-code .ec-line ins,
.expressive-code .ec-line del {
  all: unset;
  display: inline-block;
  position: relative;
  --tmBrdL: var(--ec-tm-inlMarkerBrdWd);
  --tmBrdR: var(--ec-tm-inlMarkerBrdWd);
  --tmRadL: var(--ec-tm-inlMarkerBrdRad);
  --tmRadR: var(--ec-tm-inlMarkerBrdRad);
  margin-inline: 0.025rem;
  padding-inline: var(--ec-tm-inlMarkerPad);
  border-radius: var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);
  background: var(--tmInlineBgCol);
  background-clip: padding-box;
}

.expressive-code .ec-line mark.open-start,
.expressive-code .ec-line ins.open-start,
.expressive-code .ec-line del.open-start {
  margin-inline-start: 0;
  padding-inline-start: 0;
  --tmBrdL: 0px;
  --tmRadL: 0;
}

.expressive-code .ec-line mark.open-end,
.expressive-code .ec-line ins.open-end,
.expressive-code .ec-line del.open-end {
  margin-inline-end: 0;
  padding-inline-end: 0;
  --tmBrdR: 0px;
  --tmRadR: 0;
}

.expressive-code .ec-line mark::before,
.expressive-code .ec-line ins::before,
.expressive-code .ec-line del::before {
  content: "";
  position: absolute;
  pointer-events: none;
  display: inline-block;
  inset: 0;
  border-radius: var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);
  border: var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);
  border-inline-width: var(--tmBrdL) var(--tmBrdR);
}

.expressive-code .frame {
  all: unset;
  position: relative;
  display: block;
  --header-border-radius: calc(var(--ec-brdRad) + var(--ec-brdWd));
  --tab-border-radius: calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));
  --button-spacing: 0.4rem;
  --code-background: var(--ec-frm-edBg);
  border-radius: var(--header-border-radius);
  box-shadow: var(--ec-frm-frameBoxShdCssVal);
}

.expressive-code .frame .header {
  display: none;
  z-index: 1;
  position: relative;
  border-radius: var(--header-border-radius) var(--header-border-radius) 0 0;
}

.expressive-code .frame.has-title pre,
.expressive-code .frame.has-title code,
.expressive-code .frame.is-terminal pre,
.expressive-code .frame.is-terminal code {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.expressive-code .frame .title:empty:before {
  content: "\a0";
}

.expressive-code .frame.has-title:not(.is-terminal) {
  --button-spacing: calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)));
}

.expressive-code .frame.has-title:not(.is-terminal) .title {
  position: relative;
  color: var(--ec-frm-edActTabFg);
  background: var(--ec-frm-edActTabBg);
  background-clip: padding-box;
  margin-block-start: var(--ec-frm-edTabsMargBlkStart);
  padding: calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);
  border: var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);
  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
  border-bottom: none;
  overflow: hidden;
}

.expressive-code .frame.has-title:not(.is-terminal) .title::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-top: var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);
  border-bottom: var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol);
}

.expressive-code .frame.has-title:not(.is-terminal) .header {
  display: flex;
  background:
    linear-gradient(
      to top,
      var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd),
      transparent var(--ec-brdWd)
    ),
    linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));
  background-repeat: no-repeat;
  padding-inline-start: var(--ec-frm-edTabsMargInlStart);
}

.expressive-code .frame.has-title:not(.is-terminal) .header::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border: var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);
  border-radius: inherit;
  border-bottom: none;
}

.expressive-code .frame.is-terminal {
  --button-spacing: calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));
  --code-background: var(--ec-frm-trmBg);
}

.expressive-code .frame.is-terminal .header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--ec-uiPadBlk);
  padding-block-end: calc(var(--ec-uiPadBlk) + var(--ec-brdWd));
  position: relative;
  font-weight: 500;
  letter-spacing: 0.025ch;
  color: var(--ec-frm-trmTtbFg);
  background: var(--ec-frm-trmTtbBg);
  border: var(--ec-brdWd) solid var(--ec-brdCol);
  border-bottom: none;
}

.expressive-code .frame.is-terminal .header::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: var(--ec-uiPadInl);
  width: 2.1rem;
  height: 0.56rem;
  line-height: 0;
  background-color: var(--ec-frm-trmTtbDotsFg);
  opacity: var(--ec-frm-trmTtbDotsOpa);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
}

.expressive-code .frame.is-terminal .header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-bottom: var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol);
}

.expressive-code .frame pre {
  background: var(--code-background);
}

.expressive-code .copy {
  display: flex;
  gap: 0.25rem;
  flex-direction: row;
  position: absolute;
  inset-block-start: calc(var(--ec-brdWd) + var(--button-spacing));
  inset-inline-end: calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);
  direction: ltr;
  unicode-bidi: isolate;
}

.expressive-code .copy button {
  position: relative;
  align-self: flex-end;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.2rem;
  z-index: 1;
  cursor: pointer;
  transition-property: opacity, background, border-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--code-background);
  opacity: 0.75;
}

.expressive-code .copy button div {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ec-frm-inlBtnBg);
  opacity: var(--ec-frm-inlBtnBgIdleOpa);
  transition-property: inherit;
  transition-duration: inherit;
  transition-timing-function: inherit;
}

.expressive-code .copy button::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  border: var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);
  opacity: var(--ec-frm-inlBtnBrdOpa);
}

.expressive-code .copy button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-color: var(--ec-frm-inlBtnFg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  margin: 0.475rem;
  line-height: 0;
}

// Check icon
.expressive-code .copy button:focus::after,
.expressive-code .copy button:active::after {
  display: inline-block;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' stroke-width='1.25' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M5 12l5 5l10 -10'%3E%3C/path%3E%3C/svg%3E")
    no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  margin: 0.2375rem;

  // background-color: $gray-700;
  // background-color: var(--sl-color-green-high);
}

.expressive-code .copy button:hover,
.expressive-code .copy button:focus:focus-visible {
  opacity: 1;
}

.expressive-code .copy button:hover div,
.expressive-code .copy button:focus:focus-visible div {
  opacity: var(--ec-frm-inlBtnBgHoverOrFocusOpa);
}

.expressive-code .copy button:active {
  opacity: 1;
}

.expressive-code .copy button:active div {
  opacity: var(--ec-frm-inlBtnBgActOpa);
}

.expressive-code .copy .feedback {
  --tooltip-arrow-size: 0.35rem;
  --tooltip-bg: var(--ec-frm-tooltipSuccessBg);
  color: var(--ec-frm-tooltipSuccessFg);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  align-self: center;
  background-color: var(--tooltip-bg);
  z-index: 99;
  padding: 0.125rem 0.75rem;
  border-radius: 0.2rem;
  margin-inline-end: var(--tooltip-arrow-size);
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transform: translate3d(0, 0.25rem, 0);
}

.expressive-code .copy .feedback::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: calc(50% - var(--tooltip-arrow-size));
  inset-inline-end: calc(-2 * (var(--tooltip-arrow-size) - 0.5px));
  border: var(--tooltip-arrow-size) solid transparent;
  border-inline-start-color: var(--tooltip-bg);
}

.expressive-code .copy .feedback.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) {
  .expressive-code {
  }

  .expressive-code .copy button {
    opacity: 0;
    width: 2rem;
    height: 2rem;
  }

  .expressive-code .frame:hover .copy button:not(:hover),
  .expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),
  .expressive-code .frame .copy .feedback.show ~ button:not(:hover) {
    opacity: 0.75;
  }
}

:root {
  --ec-brdRad: 0px;
  --ec-brdWd: 1px;
  --ec-brdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --ec-codeFontFml: var(--__sl-font-mono);
  --ec-codeFontSize: var(--sl-text-code);
  --ec-codeFontWg: 400;
  --ec-codeLineHt: var(--sl-line-height);
  --ec-codePadBlk: 0; // 0.75rem;
  --ec-codePadInl: 1rem;
  --ec-codeBg: #011627;
  --ec-codeFg: #d6deeb;
  --ec-codeSelBg: #1d3b53;
  --ec-uiFontFml: var(--__sl-font);
  --ec-uiFontSize: 0.9rem;
  --ec-uiFontWg: 400;
  --ec-uiLineHt: 1.65;
  --ec-uiPadBlk: 0.25rem;
  --ec-uiPadInl: 1rem;
  --ec-uiSelBg: #234d708c;
  --ec-uiSelFg: #ffffff;
  --ec-focusBrd: #122d42;
  --ec-sbThumbCol: #ffffff17;
  --ec-sbThumbHoverCol: #ffffff49;
  --ec-tm-lineMarkerAccentMarg: 0rem;
  --ec-tm-lineMarkerAccentWd: 0.15rem;
  --ec-tm-lineDiffIndMargLeft: 0.25rem;
  --ec-tm-inlMarkerBrdWd: 1.5px;
  --ec-tm-inlMarkerBrdRad: 0.2rem;
  --ec-tm-inlMarkerPad: 0.15rem;
  --ec-tm-insDiffIndContent: "+";
  --ec-tm-delDiffIndContent: "-";
  --ec-tm-markBg: #ffffff17;
  --ec-tm-markBrdCol: #ffffff40;
  --ec-tm-insBg: #1e571599;
  --ec-tm-insBrdCol: #487f3bd0;
  --ec-tm-insDiffIndCol: #79b169d0;
  --ec-tm-delBg: #862d2799;
  --ec-tm-delBrdCol: #b4554bd0;
  --ec-tm-delDiffIndCol: #ed8779d0;
  --ec-frm-shdCol: #011627;
  --ec-frm-frameBoxShdCssVal: none;
  --ec-frm-edActTabBg: var(--sl-color-gray-6);
  --ec-frm-edActTabFg: var(--sl-color-text);
  --ec-frm-edActTabBrdCol: transparent;
  --ec-frm-edActTabIndHt: 1px;
  --ec-frm-edActTabIndTopCol: var(--sl-color-accent-high);
  --ec-frm-edActTabIndBtmCol: transparent;
  --ec-frm-edTabsMargInlStart: 0;
  --ec-frm-edTabsMargBlkStart: 0;
  --ec-frm-edTabBrdRad: 0px;
  --ec-frm-edTabBarBg: var(--sl-color-black);
  --ec-frm-edTabBarBrdCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --ec-frm-edTabBarBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --ec-frm-edBg: var(--sl-color-gray-6);
  --ec-frm-trmTtbDotsFg: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --ec-frm-trmTtbDotsOpa: 0.75;
  --ec-frm-trmTtbBg: var(--sl-color-black);
  --ec-frm-trmTtbFg: var(--sl-color-text);
  --ec-frm-trmTtbBrdBtmCol: color-mix(in srgb, var(--sl-color-gray-5), transparent 25%);
  --ec-frm-trmBg: var(--sl-color-gray-6);
  --ec-frm-inlBtnFg: var(--sl-color-text);
  --ec-frm-inlBtnBg: var(--sl-color-text);
  --ec-frm-inlBtnBgIdleOpa: 0;
  --ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;
  --ec-frm-inlBtnBgActOpa: 0.3;
  --ec-frm-inlBtnBrd: var(--sl-color-text);
  --ec-frm-inlBtnBrdOpa: 0.4;
  --ec-frm-tooltipSuccessBg: #158744;
  --ec-frm-tooltipSuccessFg: white;
}

.expressive-code .ec-line span[style^="--"]:not([class]) {
  color: var(--0, inherit);
  font-style: var(--0fs, inherit);
  font-weight: var(--0fw, inherit);
  text-decoration: var(--0td, inherit);
}

@media (prefers-color-scheme: light) {
  :root:not([data-bs-theme="dark"]) {
    --ec-codeBg: #fbfbfb;
    --ec-codeFg: #403f53;
    --ec-codeSelBg: #e0e0e0;
    --ec-uiSelBg: #d3e8f8;
    --ec-uiSelFg: #403f53;
    --ec-focusBrd: #93a1a1;
    --ec-sbThumbCol: #0000001a;
    --ec-sbThumbHoverCol: #0000005c;
    --ec-tm-markBg: #0000001a;
    --ec-tm-markBrdCol: #00000055;
    --ec-tm-insBg: #8ec77d99;
    --ec-tm-insDiffIndCol: #336a28d0;
    --ec-tm-delBg: #ff9c8e99;
    --ec-tm-delDiffIndCol: #9d4138d0;
    --ec-frm-shdCol: #d9d9d9;
    --ec-frm-edActTabBg: var(--sl-color-gray-7);
    // --ec-frm-edActTabIndTopCol: var(--sl-color-accent);
    --ec-frm-edActTabIndTopCol: #5d2f86;
    --ec-frm-edTabBarBg: var(--sl-color-gray-6);
    --ec-frm-edBg: var(--sl-color-gray-7);
    --ec-frm-trmTtbBg: var(--sl-color-gray-6);
    --ec-frm-trmBg: var(--sl-color-gray-7);
    --ec-frm-tooltipSuccessBg: #078662;
  }

  :root:not([data-bs-theme="dark"]) .expressive-code .ec-line span[style^="--"]:not([class]) {
    color: var(--1, inherit);
    font-style: var(--1fs, inherit);
    font-weight: var(--1fw, inherit);
    text-decoration: var(--1td, inherit);
  }
}

:root[data-bs-theme="light"] .expressive-code,
.expressive-code[data-bs-theme="light"] {
  --ec-codeBg: #fbfbfb;
  --ec-codeFg: #403f53;
  --ec-codeSelBg: #e0e0e0;
  --ec-uiSelBg: #d3e8f8;
  --ec-uiSelFg: #403f53;
  --ec-focusBrd: #93a1a1;
  --ec-sbThumbCol: #0000001a;
  --ec-sbThumbHoverCol: #0000005c;
  --ec-tm-markBg: #0000001a;
  --ec-tm-markBrdCol: #00000055;
  --ec-tm-insBg: #8ec77d99;
  --ec-tm-insDiffIndCol: #336a28d0;
  --ec-tm-delBg: #ff9c8e99;
  --ec-tm-delDiffIndCol: #9d4138d0;
  --ec-frm-shdCol: #d9d9d9;
  --ec-frm-edActTabBg: var(--sl-color-gray-7);
  // --ec-frm-edActTabIndTopCol: var(--sl-color-accent);
  --ec-frm-edActTabIndTopCol: #5d2f86;
  --ec-frm-edTabBarBg: var(--sl-color-gray-6);
  --ec-frm-edBg: var(--sl-color-gray-7);
  --ec-frm-trmTtbBg: var(--sl-color-gray-6);
  --ec-frm-trmBg: var(--sl-color-gray-7);
  --ec-frm-tooltipSuccessBg: #078662;
}

:root[data-bs-theme="light"] .expressive-code .ec-line span[style^="--"]:not([class]),
.expressive-code[data-bs-theme="light"] .ec-line span[style^="--"]:not([class]) {
  color: var(--1, inherit);
  font-style: var(--1fs, inherit);
  font-weight: var(--1fw, inherit);
  text-decoration: var(--1td, inherit);
}