@charset "UTF-8";
.render-area .code-header {
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 0 1rem;
  line-height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "PingFang SC", "Roboto", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.86rem;
}
.render-area .code-header .code-language {
  font-size: 0.96rem;
  text-transform: capitalize;
  color: #d0d1e4;
}
.render-area .code-header .copy-button {
  display: inline-flex;
  align-items: center;
  line-height: 0.96rem;
  height: 1lh;
  color: #d0d1e4;
}
.render-area .code-header .copy-button svg {
  height: 0.96rem;
  aspect-ratio: 1/1;
  margin-right: 0.28rem;
}
.render-area .code-header .copy-button {
  cursor: pointer;
}
.render-area .code-header .copy-button:hover {
  filter: brightness(110%);
}
.render-area pre .hljs-ln,
.render-area pre .hljs-ln td {
  margin: 0;
  border: none !important;
}
.render-area pre .hljs-ln-numbers {
  text-align: right;
  color: #ccc;
  border-right: 1px solid #999;
  vertical-align: top;
  padding-right: 5px;
  min-width: 2.5em;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.render-area pre .hljs-ln-code {
  padding-left: 10px;
}
.render-area pre .code-body {
  font-size: 14px;
  white-space: pre-wrap;
  text-align: left;
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
  border-radius: 8px;
  line-height: 1.4;
}
.render-area pre .code-body ::-moz-selection {
  background: rgba(49, 151, 253, 0.4);
}
.render-area pre .code-body ::selection {
  background: rgba(49, 151, 253, 0.4);
}
.render-area pre .code-header + .code-body {
  padding-top: 0.2rem;
  border-radius: 0 0 8px 8px;
}
.render-area.code-highlight-mode-light pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
.render-area.code-highlight-mode-light code.hljs {
  padding: 3px 5px;
}
.render-area.code-highlight-mode-light {
  /*!
    Theme: GitHub
    Description: Light theme as seen on github.com
    Author: github.com
    Maintainer: @Hirse
    Updated: 2021-05-15

    Outdated base version: https://github.com/primer/github-syntax-light
    Current colors taken from GitHub's CSS
  */
}
.render-area.code-highlight-mode-light .hljs {
  color: #24292e;
  background: #ffffff;
}
.render-area.code-highlight-mode-light .hljs-doctag,
.render-area.code-highlight-mode-light .hljs-keyword,
.render-area.code-highlight-mode-light .hljs-meta .hljs-keyword,
.render-area.code-highlight-mode-light .hljs-template-tag,
.render-area.code-highlight-mode-light .hljs-template-variable,
.render-area.code-highlight-mode-light .hljs-type,
.render-area.code-highlight-mode-light .hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #d73a49;
}
.render-area.code-highlight-mode-light .hljs-title,
.render-area.code-highlight-mode-light .hljs-title.class_,
.render-area.code-highlight-mode-light .hljs-title.class_.inherited__,
.render-area.code-highlight-mode-light .hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #6f42c1;
}
.render-area.code-highlight-mode-light .hljs-attr,
.render-area.code-highlight-mode-light .hljs-attribute,
.render-area.code-highlight-mode-light .hljs-literal,
.render-area.code-highlight-mode-light .hljs-meta,
.render-area.code-highlight-mode-light .hljs-number,
.render-area.code-highlight-mode-light .hljs-operator,
.render-area.code-highlight-mode-light .hljs-variable,
.render-area.code-highlight-mode-light .hljs-selector-attr,
.render-area.code-highlight-mode-light .hljs-selector-class,
.render-area.code-highlight-mode-light .hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #005cc5;
}
.render-area.code-highlight-mode-light .hljs-regexp,
.render-area.code-highlight-mode-light .hljs-string,
.render-area.code-highlight-mode-light .hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #032f62;
}
.render-area.code-highlight-mode-light .hljs-built_in,
.render-area.code-highlight-mode-light .hljs-symbol {
  /* prettylights-syntax-variable */
  color: #e36209;
}
.render-area.code-highlight-mode-light .hljs-comment,
.render-area.code-highlight-mode-light .hljs-code,
.render-area.code-highlight-mode-light .hljs-formula {
  /* prettylights-syntax-comment */
  color: #6a737d;
}
.render-area.code-highlight-mode-light .hljs-name,
.render-area.code-highlight-mode-light .hljs-quote,
.render-area.code-highlight-mode-light .hljs-selector-tag,
.render-area.code-highlight-mode-light .hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #22863a;
}
.render-area.code-highlight-mode-light .hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #24292e;
}
.render-area.code-highlight-mode-light .hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #005cc5;
  font-weight: bold;
}
.render-area.code-highlight-mode-light .hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #735c0f;
}
.render-area.code-highlight-mode-light .hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #24292e;
  font-style: italic;
}
.render-area.code-highlight-mode-light .hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #24292e;
  font-weight: bold;
}
.render-area.code-highlight-mode-light .hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #22863a;
  background-color: #f0fff4;
}
.render-area.code-highlight-mode-light .hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #b31d28;
  background-color: #ffeef0;
}
.render-area.code-highlight-mode-light .hljs-char.escape_,
.render-area.code-highlight-mode-light .hljs-link,
.render-area.code-highlight-mode-light .hljs-params,
.render-area.code-highlight-mode-light .hljs-property,
.render-area.code-highlight-mode-light .hljs-punctuation,
.render-area.code-highlight-mode-light .hljs-tag {
  /* purposely ignored */
}
.render-area.code-highlight-mode-light pre .code-header {
  background-color: rgb(246, 246, 250);
  color: black;
}
.render-area.code-highlight-mode-dark pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
.render-area.code-highlight-mode-dark code.hljs {
  padding: 3px 5px;
}
.render-area.code-highlight-mode-dark {
  /*!
    Theme: Tokyo-night-Dark
    origin: https://github.com/enkia/tokyo-night-vscode-theme
    Description: Original highlight.js style
    Author: (c) Henri Vandersleyen <hvandersleyen@gmail.com>
    License: see project LICENSE
    Touched: 2022
  */
  /*  Comment */
}
.render-area.code-highlight-mode-dark .hljs-meta,
.render-area.code-highlight-mode-dark .hljs-comment {
  color: #565f89;
}
.render-area.code-highlight-mode-dark {
  /* Red */
  /*INFO: This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red */
}
.render-area.code-highlight-mode-dark .hljs-tag,
.render-area.code-highlight-mode-dark .hljs-doctag,
.render-area.code-highlight-mode-dark .hljs-selector-id,
.render-area.code-highlight-mode-dark .hljs-selector-class,
.render-area.code-highlight-mode-dark .hljs-regexp,
.render-area.code-highlight-mode-dark .hljs-template-tag,
.render-area.code-highlight-mode-dark .hljs-selector-pseudo,
.render-area.code-highlight-mode-dark .hljs-selector-attr,
.render-area.code-highlight-mode-dark .hljs-variable.language_,
.render-area.code-highlight-mode-dark .hljs-deletion {
  color: #f7768e;
}
.render-area.code-highlight-mode-dark {
  /*Orange */
  /*INFO: Number and Boolean constants, Language support constants */
}
.render-area.code-highlight-mode-dark .hljs-variable,
.render-area.code-highlight-mode-dark .hljs-template-variable,
.render-area.code-highlight-mode-dark .hljs-number,
.render-area.code-highlight-mode-dark .hljs-literal,
.render-area.code-highlight-mode-dark .hljs-type,
.render-area.code-highlight-mode-dark .hljs-params,
.render-area.code-highlight-mode-dark .hljs-link {
  color: #ff9e64;
}
.render-area.code-highlight-mode-dark {
  /*  Yellow */
  /* INFO:  	Function parameters, Regex character sets, Terminal Yellow */
}
.render-area.code-highlight-mode-dark .hljs-built_in,
.render-area.code-highlight-mode-dark .hljs-attribute {
  color: #e0af68;
}
.render-area.code-highlight-mode-dark {
  /* cyan */
  /* INFO: Language support functions, CSS HTML elements */
}
.render-area.code-highlight-mode-dark .hljs-selector-tag {
  color: #2ac3de;
}
.render-area.code-highlight-mode-dark {
  /* light blue */
  /* INFO: Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords */
}
.render-area.code-highlight-mode-dark .hljs-keyword,
.render-area.code-highlight-mode-dark .hljs-title.function_,
.render-area.code-highlight-mode-dark .hljs-title,
.render-area.code-highlight-mode-dark .hljs-title.class_,
.render-area.code-highlight-mode-dark .hljs-title.class_.inherited__,
.render-area.code-highlight-mode-dark .hljs-subst,
.render-area.code-highlight-mode-dark .hljs-property {
  color: #7dcfff;
}
.render-area.code-highlight-mode-dark {
  /*Green*/
  /* INFO: Object literal keys, Markdown links, Terminal Green */
}
.render-area.code-highlight-mode-dark .hljs-selector-tag {
  color: #73daca;
}
.render-area.code-highlight-mode-dark {
  /*Green(er) */
  /* INFO: Strings, CSS class names */
}
.render-area.code-highlight-mode-dark .hljs-quote,
.render-area.code-highlight-mode-dark .hljs-string,
.render-area.code-highlight-mode-dark .hljs-symbol,
.render-area.code-highlight-mode-dark .hljs-bullet,
.render-area.code-highlight-mode-dark .hljs-addition {
  color: #9ece6a;
}
.render-area.code-highlight-mode-dark {
  /* Blue */
  /* INFO:  	Function names, CSS property names, Terminal Blue */
}
.render-area.code-highlight-mode-dark .hljs-code,
.render-area.code-highlight-mode-dark .hljs-formula,
.render-area.code-highlight-mode-dark .hljs-section {
  color: #7aa2f7;
}
.render-area.code-highlight-mode-dark {
  /* Magenta */
  /*INFO: Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta */
}
.render-area.code-highlight-mode-dark .hljs-name,
.render-area.code-highlight-mode-dark .hljs-keyword,
.render-area.code-highlight-mode-dark .hljs-operator,
.render-area.code-highlight-mode-dark .hljs-keyword,
.render-area.code-highlight-mode-dark .hljs-char.escape_,
.render-area.code-highlight-mode-dark .hljs-attr {
  color: #bb9af7;
}
.render-area.code-highlight-mode-dark {
  /* white*/
  /* INFO: Variables, Class names, Terminal White */
}
.render-area.code-highlight-mode-dark .hljs-punctuation {
  color: #c0caf5;
}
.render-area.code-highlight-mode-dark .hljs {
  background: #1a1b26;
  color: #9aa5ce;
}
.render-area.code-highlight-mode-dark .hljs-emphasis {
  font-style: italic;
}
.render-area.code-highlight-mode-dark .hljs-strong {
  font-weight: bold;
}
.render-area.code-highlight-mode-dark pre .code-header {
  background-color: rgb(61, 62, 100);
  color: white;
}
.render-area h1 {
  font-size: 24px;
  margin: 16px 0;
  font-weight: 700;
}
.render-area h2 {
  font-size: 20px;
  margin: 12px 0;
  font-weight: 600;
}
.render-area h3 {
  font-size: 18px;
  margin: 10px 0;
  font-weight: 500;
}
.render-area strong {
  font-weight: 500;
}
.render-area ul {
  list-style-type: disc;
  margin: 10px 0 10px 32px;
}
.render-area ol {
  list-style-type: decimal;
  margin: 10px 0 10px 32px;
}
.render-area li {
  margin: 5px 0;
}
.render-area p {
  margin: 10px 0;
}
.render-area a {
  color: #3d3e64;
  text-decoration: underline;
}
.render-area img {
  max-width: 100%;
}
.render-area blockquote {
  border-left: 4px solid #3d3e64;
  padding-left: 10px;
  margin: 10px 0;
}
.render-area table:not(.hljs-ln) {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.render-area table:not(.hljs-ln) th,
.render-area table:not(.hljs-ln) td {
  border: 1px solid #3d3e64;
  padding: 10px;
}
.render-area > *:first-child {
  margin-top: 0;
}
.render-area > *:last-child {
  margin-bottom: 0;
}

/* 修复：使用 :deep() 替代 ::v-deep */
:deep(.my-warning) {
  background: #fff3cd;
  padding: 12px;
  border-radius: 4px;
  margin: 10px 0;
}

/* 圆圈数字样式 */
.circle-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background-color: #cccde1; /* 默认背景色 */
  color: white;
  font-size: 0.8em;
  margin: 0 0.2em;
  padding: 0.1em;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.2s; /* 平滑过渡 */
}
.circle-number:hover {
  filter: brightness(110%);
}
.circle-number.selected {
  background-color: #4f55c3; /* 选中状态背景色 */
}

/* 适配深色模式 */
.code-highlight-mode-dark .circle-number:not(.selected) {
  background-color: #6162a8;
}

/* 适配浅色模式 */
.code-highlight-mode-light .circle-number:not(.selected) {
  background-color: #b3b3cc;
  color: #333;
}

/* 如果注释了组件样式文件，需要添加基础样式 */
:deep(h1) {
  font-size: 24px;
  margin: 16px 0;
}