section.vh-container {
  &>article.vh-article-main {
    flex: 1;
    min-width: 0;


    &>header {
      box-sizing: border-box;
      padding: 2rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: max-content;
      background-color: #fff;
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05);
      overflow: hidden;

      &>h1 {
        width: 100%;
        font-weight: 700;
      }

      &>.article-meta {
        display: flex;
        align-items: center;
        gap: 1.18rem;
        font-size: 0.85rem;

        &>.article-meta-item {
          display: flex;
          align-items: center;
          gap: 0.38rem;
          width: max-content;

          &>svg {
            flex-shrink: 0;
            height: 0.86rem;
            width: auto;
          }

          &>time {
            color: #9A9A9A;
          }

          &>span {
            &.count {
              color: #3FA67F;
            }

            &.time {
              color: #E9B740;
            }
          }
        }
      }
    }

    &>main {
      box-sizing: border-box;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: max-content;
      background-color: #fff;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05);
      overflow: hidden;

      &>.tag-list {
        box-sizing: border-box;
        padding-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.58rem;
        width: 100%;

        &>a {
          position: relative;
          box-sizing: border-box;
          padding: 0.28rem 0.68rem;
          padding-left: 2rem;
          display: flex;
          align-items: center;
          gap: 0.18rem;
          height: 1.68rem;
          width: max-content;
          font-size: 0.875rem;
          border-radius: 1rem;
          background-color: var(--vh-color-default-88);
          transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;

          &:hover {
            background-color: var(--vh-color-default);
            transform: translateY(-0.18rem);
          }

          &::before {
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            content: '';
            width: 1.38rem;
            height: 1.38rem;
            background: #fff url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M345%2039.1L472.8%20168.4c52.4%2053%2052.4%20138.2%200%20191.2L360.8%20472.9c-9.3%209.4-24.5%209.5-33.9%20.2s-9.5-24.5-.2-33.9L438.6%20325.9c33.9-34.3%2033.9-89.4%200-123.7L310.9%2072.9c-9.3-9.4-9.2-24.6%20.2-33.9s24.6-9.2%2033.9%20.2zM0%20229.5L0%2080C0%2053.5%2021.5%2032%2048%2032l149.5%200c17%200%2033.3%206.7%2045.3%2018.7l168%20168c25%2025%2025%2065.5%200%2090.5L277.3%20442.7c-25%2025-65.5%2025-90.5%200l-168-168C6.7%20262.7%200%20246.5%200%20229.5zM144%20144a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
            background-size: 0.88rem;
            border-radius: 1rem;
            overflow: hidden;
          }
        }
      }
    }

    &>footer {
      box-sizing: border-box;
      width: 100%;
      height: max-content;
    }


    // 文章内容样式开始=========================
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      display: inline-block;
      box-sizing: border-box;
      margin: 1.688rem 0 0.36rem;
      font-size: 1rem;
      width: 100%;
      max-width: 100%;
      word-break: break-all;

      &:hover {
        &::before {
          color: #60a5fa7f;
        }
      }

      &::before {
        padding-right: 0.56rem;
        content: "#";
        color: #33333388;
        transition: color 0.16s ease-in-out;
      }
    }

    h1 {
      margin: 0;
      padding-bottom: 1rem;
      font-size: 1.58rem;

      &.error-title {
        font-size: 1.88rem;
      }

      &::before {
        display: none;
      }
    }

    h2 {
      font-size: 1.5rem;
    }

    h3 {
      font-size: 1.25rem;
    }

    h4 {
      font-size: 1.125rem;
    }

    // p标签样式
    // ul标签样式
    p,
    ul:not(.vh-vhMusic ul),
    ol:not(.vh-vhMusic ol) {
      margin: 0;
      padding: 0.618rem 0;
      font-size: 0.9375rem;
      line-height: 1.6;

      li {
        color: #9A9A9A;
        font-size: 0.875rem;
        line-height: 1.6;
      }

      // 其下面的 a 标签样式
      a {
        box-shadow: inset 0 -.12em #60a5fa;
        transition: box-shadow .2s ease-in-out, color .2s ease-in-out;

        &:hover {
          box-shadow: inset 0 -1.5em #60a5fa7f
        }
      }

      // 其下面的code标签样式
      code {
        background-color: var(--vh-color-default);
        padding: .125rem .375rem;
        font-size: 0.8125rem;
      }
    }

    ul:not(.vh-vhMusic ul),
    ol:not(.vh-vhMusic ol) {
      box-sizing: border-box;
      padding-left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    blockquote {
      padding: 0.188rem 0.58rem;
      border-left: 5px solid #eee;
      border-left-color: #929292;
      background-color: #f3f5f7;

      &>p {
        font-size: 0.875rem;
        font-weight: 500;
      }
    }

    /* 全局表格样式 */
    table {
      box-sizing: border-box;
      margin: 1rem 0;
      width: 100%;
      // border-collapse: collapse;
      border-spacing: 0;
      font-size: 0.9rem;
      background-color: #fff;
      border: 1px solid #EEEEEE;
      border-radius: 0.38rem;
      overflow: hidden;

      a {
        color: #49B1F5;
      }

      th {
        text-align: center;
        background-color: #f8f9fa;
        padding: 0.75rem;
        border-bottom: solid 1px #EEEEEE;
        border-right: solid 1px #EEEEEE;

        &:nth-last-of-type(1) {
          border-right: none;
        }
      }

      td {
        padding: 0.618rem 0.75rem;
        vertical-align: top;
        border-bottom: solid 1px #EEEEEE;
        border-right: solid 1px #EEEEEE;

        &:nth-last-of-type(1) {
          border-right: none;
        }
      }

      tr {
        transition: background-color 0.16s ease-in-out;

        &:nth-last-of-type(1) {
          td {
            border-bottom: none;
          }
        }

        &:hover {
          background-color: #f2f2f2;
        }
      }
    }

    // 自定义组件样式
    .vh-node {
      margin: 0.618rem 0;
      box-sizing: border-box;
      width: 100%;
      height: max-content;
      overflow: hidden;

      p {
        margin: 0;
        padding: 0;
      }

      // :::note
      &.vh-note {
        padding: 0.888rem;
        border-left: 5px solid #eee;
        border-left-color: #777;
        border-radius: 3px;
        background-color: #f7f7f7;

        &.note-success {
          border-color: #01C4B6;
          border-left: 5px solid #01C4B6;
          border-left-color: #01C4B6;
          background-color: #01C4B618;
        }

        &.note-info {
          border-color: #3253b4;
          border-left: 5px solid #3253b4;
          border-left-color: #3253b4;
          background-color: #3253b418;
        }

        &.note-warning {
          border-color: #DD8636;
          border-left: 5px solid #DD8636;
          border-left-color: #DD8636;
          background-color: #DD863618;
        }

        &.note-error {
          border-color: #DE3C3D;
          border-left: 5px solid #DE3C3D;
          border-left-color: #DE3C3D;
          background-color: #DE3C3D18;
        }

        &.note-import {
          border-left: 5px solid #B984DF;
          border-left-color: #B984DF;
          background-color: #B984DF18;
        }

        p {
          font-size: 0.875rem;
          line-height: 2;
          font-weight: 500;
        }
      }

      // ::btn 
      &.vh-btn {
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 0.618rem;
        padding: 0 1.18rem;
        width: max-content;
        max-width: 100%;
        height: 2.28rem;
        border: solid 1px #333;
        border-radius: 0.28rem;
        background-color: #fff;
        cursor: pointer;
        transition: background-color 0.18s ease-in-out;
        z-index: 1;
        user-select: none;
        overflow: hidden;

        &:hover {
          &::after {
            height: 100%;
          }
        }


        &::before {
          flex-shrink: 0;
          content: '';
          background-color: #000;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
          background-size: contain;
          width: 1rem;
          height: 1rem;
          overflow: hidden;
        }

        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0;
          background-color: var(--vh-color-default-66);
          transition: height 0.16s ease-in-out;
          z-index: -1;
        }


        &>span {
          box-sizing: border-box;
          color: #000;
          font-weight: 600;
          font-size: 0.875rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          z-index: 1;
        }

        &.btn-success {
          border-color: #01C4B6;

          &>span {
            color: #01C4B6;
          }

          &::before {
            background-color: #01C4B6;
          }
        }

        &.btn-info {
          border-color: #3253b4;

          &>span {
            color: #3253b4;
          }

          &::before {
            background-color: #3253b4;
          }
        }

        &.btn-warning {
          border-color: #DD8636;

          &>span {
            color: #DD8636;
          }

          &::before {
            background-color: #DD8636;
          }
        }

        &.btn-error {
          border-color: #DE3C3D;

          &>span {
            color: #DE3C3D;
          }

          &::before {
            background-color: #DE3C3D;
          }
        }

        &.btn-import {
          border-color: #B984DF;

          &>span {
            color: #B984DF;
          }

          &::before {
            background-color: #B984DF;
          }
        }
      }

      // :::picture 
      &.vh-picture {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
        gap: .36rem;

        // 其下面的图片
        &>img.vh-article-img {
          width: 100%;
          aspect-ratio: 3 / 2;
          border: solid 1px #E8E8E8;
          border-radius: 5px;
          object-fit: cover;
          overflow: hidden;
        }
      }

      // ::vhVideo
      &.vh-vhVideo {
        margin: 1.188rem 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        border: solid 1px #E8E8E8;
        border-radius: 5px;
        overflow: hidden;
      }

      // ::vhMusic
      &.vh-vhMusic {
        margin: 1.188rem 0;
        width: 100%;
        height: max-content;
        min-height: 1rem;

        &:not(.aplayer) {
          box-sizing: border-box;
          display: flex;
          align-items: flex-end;
          justify-content: center;

          &::before {
            content: '';
            width: 1.66rem;
            height: 1.66rem;
            background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
            background-size: cover;
            animation: vhRotate 1.66s linear infinite;
          }
        }


        .aplayer-body {
          .aplayer-info {
            .aplayer-lrc {
              .aplayer-lrc-contents {
                p {
                  font-size: 0.75rem;
                }
              }
            }
          }
        }
      }
    }

    // 页面图片样式
    img.vh-article-img {
      box-sizing: border-box;
      padding: .36rem;
      width: max-content;
      max-width: 100%;
      max-height: 36rem;
      border: solid 1px #E8E8E8;
      border-radius: 5px;
      cursor: zoom-in;
      cursor: -moz-zoom-in;
      cursor: -webkit-zoom-in;

      &:not(.loaded) {
        width: 100%;
      }
    }

    // 文章内代码块
    section.vh-code-box {
      margin: 1.188rem 0;
      position: relative;

      &>span.vh-code-copy {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0.66rem;
        top: 0.6rem;
        width: 1.8rem;
        height: 1.8rem;
        border: solid 1px rgba(125, 125, 125, .2);
        border-radius: 0.5rem;
        z-index: 1;
        overflow: hidden;
        cursor: pointer;
        opacity: 0.66;
        transition: all .16s;

        &:hover {
          opacity: 1;
        }

        &::before,
        &::after {
          position: absolute;
          content: "";
          width: 100%;
          height: 100%;
          background: rgba(125, 125, 125, .2) url('data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M368.37-237.37q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48%2024.26-58.74%2024.26-24.26%2058.74-24.26h378.26q34.48%200%2058.74%2024.26%2024.26%2024.26%2024.26%2058.74v474.26q0%2034.48-24.26%2058.74-24.26%2024.26-58.74%2024.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155%20238q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45%2011.96-29.48%2011.97-12.02%2029.33-12.02t29.54%2012.02q12.17%2012.03%2012.17%2029.48v515.76h419.76q17.45%200%2029.48%2011.96%2012.02%2011.97%2012.02%2029.33t-12.02%2029.54q-12.03%2012.17-29.48%2012.17H213.37Zm155-238v-474.26%20474.26Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
          background-size: 1.16rem 1.16rem;
          opacity: 0;
          transition: opacity 0.16s;
        }

        &::after {
          background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
          background-size: 1.16rem 1.16rem;
        }

        &::before {
          opacity: 1;
        }

        &.success {
          opacity: 1;

          &::before {
            opacity: 0;
          }

          &::after {
            opacity: 1;
          }
        }


      }

      &>pre.astro-code {
        box-sizing: border-box;
        padding: 0.888rem;
        border-radius: 0.618rem;
        height: max-content;
        max-height: 888px;
        background-color: var(--vh-color-default-99) !important;

        code {
          box-sizing: border-box;
          counter-reset: line;

          &>span {
            box-sizing: border-box;
            font-size: 0.875rem;
            line-height: 1.66;

            &::before {
              counter-increment: line;
              content: counter(line);
              display: inline-block;
              width: 1rem;
              padding-right: 0.618rem;
              margin-right: 0.888rem;
              border-right: 1px solid #e2e2e3;
              color: #939296;
              text-align: center;
              user-select: none;
            }

          }
        }
      }
    }

    // 文章内容样式结束=========================
  }
}

// 滚动条样式
.os-theme-dark.os-scrollbar {
  &>.os-scrollbar-track {
    &>.os-scrollbar-handle {
      background-color: #A3A8AF88;

      &:hover {
        background-color: #A3A8AF66;
      }
    }
  }

  // 右侧滚动条
  &.os-scrollbar-vertical {
    &>.os-scrollbar-track {
      &>.os-scrollbar-handle {
        &:hover {
          width: 0.56rem;
        }
      }
    }
  }

  // 底部滚动条
  &.os-scrollbar-horizontal {
    &>.os-scrollbar-track {
      &>.os-scrollbar-handle {
        &:hover {
          height: 0.56rem;
        }
      }
    }
  }
}



@media screen and (max-width: 999px) {
  section.vh-container {
    &>article.vh-article-main {
      &>header {
        &>h1 {
          font-size: 1.36rem;
        }
      }

      h1 {
        font-size: 1.36rem;
      }

      h2 {
        font-size: 1.26rem;
      }

      h3 {
        font-size: 1.18rem;
      }


      .vh-node {
        &.vh-picture {
          grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
        }
      }
    }
  }
}

// 旋转动画
@keyframes vhRotate {
  from {
    transform: rotate(0deg);
    /* 起始角度 */
  }

  to {
    transform: rotate(360deg);
    /* 结束角度 */
  }
}