.docs-code-block {
  --docs-code-divider-color: color-mix(in srgb, var(--header-bg-border) 56%, transparent);
  --docs-code-scrollbar-thumb-color: color-mix(in srgb, var(--content-color) 18%, transparent);
  --docs-code-scrollbar-thumb-hover-color: color-mix(in srgb, var(--content-color) 28%, transparent);
  --docs-code-line-number-color: color-mix(in srgb, var(--content-color) 34%, transparent);
  position: relative;
  margin: 20px 0 24px;
  border-radius: 15px;
  border: 1px solid var(--card-bg-border);
  background: var(--card-bg-color);
  overflow: hidden;
  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition);
}

.light-theme .docs-code-block {
  --docs-code-divider-color: color-mix(in srgb, var(--header-bg-border) 46%, transparent);
  --docs-code-scrollbar-thumb-color: color-mix(in srgb, var(--content-color) 16%, transparent);
  --docs-code-scrollbar-thumb-hover-color: color-mix(in srgb, var(--content-color) 24%, transparent);
  --docs-code-line-number-color: color-mix(in srgb, var(--content-color) 28%, transparent);
}

.docs-code-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--docs-code-divider-color);
  background: transparent;
  transition: border-color var(--theme-transition);
}

.docs-code-language {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  color: var(--nav-item-color);
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  transition: color var(--theme-transition);
}

.docs-code-copy {
  position: relative;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--nav-item-color);
  width: 23px;
  height: 23px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--theme-transition),
    transform 0.15s ease;
}

.docs-code-copy-icon,
.docs-code-check-icon {
  position: absolute;
  inset: 0;
  width: 15px;
  height: 15px;
  margin: auto;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
  transition: stroke var(--theme-transition);
}

.docs-code-copy-icon {
  opacity: 1;
  filter: blur(0);
  transform: scaleX(-1);
  transition:
    stroke var(--theme-transition),
    opacity 0.24s ease,
    filter 0.24s ease,
    transform 0.24s ease;
}

.docs-code-check-icon {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.88);
  transition:
    stroke var(--theme-transition),
    opacity 0.24s ease,
    filter 0.24s ease,
    transform 0.24s ease;
}

.docs-code-copy:hover {
  color: var(--heading-color);
}

.docs-code-copy:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  color: var(--heading-color);
}

.docs-code-copy.copied {
  color: var(--heading-color);
}

.docs-code-copy.copied .docs-code-copy-icon {
  opacity: 0;
  filter: blur(10px);
  transform: scaleX(-1) scale(0.88);
}

.docs-code-copy.copied .docs-code-check-icon {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.docs-code-block pre {
  margin: 0;
  padding: 12px 16px 10px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: var(--docs-code-scrollbar-thumb-color) transparent;
}

.docs-code-block pre.docs-code-pre-numbered {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
}

.docs-code-gutter {
  color: var(--docs-code-line-number-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: inherit;
  line-height: inherit;
  text-align: right;
  white-space: pre;
  user-select: none;
  pointer-events: none;
  transition: color var(--theme-transition);
}

.docs-code-block pre::-webkit-scrollbar {
  height: 6px;
}

.docs-code-block pre::-webkit-scrollbar-track {
  background: transparent;
}

.docs-code-block pre::-webkit-scrollbar-thumb {
  background: var(--docs-code-scrollbar-thumb-color);
  border-radius: 999px;
  transition: background-color 0.24s ease;
}

.docs-code-block pre::-webkit-scrollbar-thumb:hover {
  background: var(--docs-code-scrollbar-thumb-hover-color);
}

.docs-code-block code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  color: var(--content-color);
  transition: color var(--theme-transition);
}

.code-copy-notification {
  position: fixed;
  bottom: 25px;
  left: 50%;
  z-index: 10000;
  padding: 10px 14px;
  border: 1px solid var(--header-bg-border);
  border-radius: 14px;
  width: max-content;
  max-width: min(calc(100vw - 32px), 320px);
  background-color: var(--header-bg);
  color: var(--text-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  filter: blur(18px);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 2px);
  transition:
    opacity 0.28s ease,
    filter 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.28s ease,
    background-color var(--theme-transition),
    border-color var(--theme-transition),
    color var(--theme-transition);
}

.code-copy-notification.show {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0);
}