body.aron-tutorial-layout {
  background: #f5f6f8;
  color: #2f343b;
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  --atl-brand: #f04494;
  --atl-brand-soft: rgba(240, 68, 148, 0.1);
  --atl-ink: #191b1f;
  --atl-muted: #7a818c;
  --atl-line: #e7e9ee;
  --atl-paper: #ffffff;
  --atl-shadow: 0 18px 46px rgba(17, 24, 39, 0.08);
}

body.aron-tutorial-layout.single-post main.container {
  max-width: 1240px;
  padding-top: 28px;
}

body.aron-tutorial-layout.single-post .content-wrap {
  margin-bottom: 44px;
}

body.aron-tutorial-layout.single-post .breadcrumb {
  color: var(--atl-muted);
  font-size: 13px;
  margin: 0 0 18px;
  padding-left: 4px;
}

body.aron-tutorial-layout.single-post .breadcrumb a {
  color: #69707a;
}

body.aron-tutorial-layout.single-post .breadcrumb a:hover {
  color: var(--atl-brand);
}

body.aron-tutorial-layout.single-post article.article {
  background: var(--atl-paper);
  border: 1px solid var(--atl-line);
  border-radius: 18px;
  box-shadow: var(--atl-shadow);
  overflow: hidden;
}

body.aron-tutorial-layout.single-post article.article.main-shadow {
  box-shadow: var(--atl-shadow);
}

body.aron-tutorial-layout.single-post .article-header {
  background: #fff;
  border: 0;
  padding: 58px 72px 28px;
}

body.aron-tutorial-layout.single-post .article-title {
  color: #33363d;
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(34px, 3vw, 46px);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.36;
  margin: 0 0 26px;
  max-width: 820px;
}

body.aron-tutorial-layout.single-post .article-title a {
  color: inherit;
}

body.aron-tutorial-layout.single-post .article-avatar {
  border: 0;
  margin-top: 0;
}

body.aron-tutorial-layout.single-post .article-avatar .avatar-img {
  display: none;
}

body.aron-tutorial-layout.single-post .article-avatar .user-right {
  margin-left: 0 !important;
}

body.aron-tutorial-layout.single-post .article-avatar .avatar-img img,
body.aron-tutorial-layout.single-post .article-avatar img.avatar {
  border-radius: 50%;
}

body.aron-tutorial-layout.single-post .article-avatar .display-name {
  color: #4f5662;
  font-weight: 700;
}

body.aron-tutorial-layout.single-post .article-avatar .muted-2-color,
body.aron-tutorial-layout.single-post .post-metas,
body.aron-tutorial-layout.single-post .post-metas a {
  color: var(--atl-muted);
}

body.aron-tutorial-layout.single-post .article-avatar .user-action .but {
  border-radius: 999px;
  box-shadow: none;
  font-size: 12px;
  padding: 5px 10px;
}

body.aron-tutorial-layout.single-post .article-avatar .user-action {
  display: none;
}

body.aron-tutorial-layout.single-post .single-metabox {
  display: none;
}

body.aron-tutorial-layout.single-post .article-content {
  padding: 18px 72px 68px;
}

body.aron-tutorial-layout.single-post .wp-posts-content {
  color: #4b5563;
  font-size: 18.5px;
  font-weight: 400;
  line-height: 2.04;
  margin: 0 auto;
  max-width: 760px;
}

body.aron-tutorial-layout.single-post .wp-posts-content > *:first-child {
  margin-top: 0;
}

body.aron-tutorial-layout.single-post .wp-posts-content p {
  color: #4b5563;
  font-size: 18.5px;
  letter-spacing: 0;
  line-height: 2.04;
  margin: 0 0 22px;
}

body.aron-tutorial-layout.single-post .wp-posts-content strong {
  color: #20242c;
  font-weight: 800;
}

body.aron-tutorial-layout.single-post .wp-posts-content a {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.aron-tutorial-layout.single-post .wp-posts-content a:hover {
  color: var(--atl-brand);
}

body.aron-tutorial-layout.single-post .wp-posts-content h1.wp-block-heading,
body.aron-tutorial-layout.single-post .wp-posts-content h2,
body.aron-tutorial-layout.single-post .wp-posts-content h3,
body.aron-tutorial-layout.single-post .wp-posts-content h4 {
  color: var(--atl-ink);
  font-weight: 800;
  letter-spacing: 0;
}

body.aron-tutorial-layout.single-post .wp-posts-content h1.wp-block-heading,
body.aron-tutorial-layout.single-post .wp-posts-content h2 {
  border-bottom: 0;
  font-size: clamp(29px, 2.4vw, 36px);
  line-height: 1.38;
  margin: 66px 0 26px;
  padding: 0 0 0 18px;
  position: relative;
}

body.aron-tutorial-layout.single-post .wp-posts-content h1.wp-block-heading::before,
body.aron-tutorial-layout.single-post .wp-posts-content h2::before {
  background: var(--atl-brand);
  border-radius: 999px;
  content: "";
  height: 72%;
  left: 0;
  position: absolute;
  top: 14%;
  width: 4px;
}

body.aron-tutorial-layout.single-post .wp-posts-content h2.title-theme {
  background: none;
  border-left: 0;
}

body.aron-tutorial-layout.single-post .wp-posts-content h3 {
  font-size: 24px;
  line-height: 1.45;
  margin: 38px 0 18px;
}

body.aron-tutorial-layout.single-post .wp-posts-content ul,
body.aron-tutorial-layout.single-post .wp-posts-content ol {
  margin: 18px 0 24px;
  padding-left: 1.35em;
}

body.aron-tutorial-layout.single-post .wp-posts-content li {
  line-height: 1.86;
  margin: 9px 0;
  padding-left: 2px;
}

body.aron-tutorial-layout.single-post .wp-posts-content ol > li::marker {
  color: var(--atl-brand);
  font-weight: 800;
}

body.aron-tutorial-layout.single-post .wp-posts-content ul > li::marker {
  color: var(--atl-brand);
}

body.aron-tutorial-layout.single-post .wp-posts-content blockquote.wp-block-quote,
body.aron-tutorial-layout.single-post .wp-posts-content blockquote {
  background: #fafafa;
  border: 0;
  border-radius: 0;
  color: #424956;
  margin: 34px 0;
  padding: 8px 0 8px 54px;
  position: relative;
}

body.aron-tutorial-layout.single-post .wp-posts-content blockquote.wp-block-quote::before,
body.aron-tutorial-layout.single-post .wp-posts-content blockquote::before {
  color: #d0d5dd;
  content: "\201C";
  font-family: Georgia, "Times New Roman", serif;
  font-size: 78px;
  left: 0;
  line-height: 1;
  position: absolute;
  top: -2px;
}

body.aron-tutorial-layout.single-post .wp-posts-content blockquote p {
  color: #424956;
  font-size: 18px;
  font-style: italic;
  margin-bottom: 10px;
}

body.aron-tutorial-layout.single-post .wp-posts-content blockquote p:last-child {
  margin-bottom: 0;
}

body.aron-tutorial-layout.single-post .wp-posts-content blockquote em {
  font-style: normal;
}

body.aron-tutorial-layout.single-post .wp-posts-content figure.wp-block-image {
  margin: 38px auto;
  text-align: center;
}

body.aron-tutorial-layout.single-post .wp-posts-content figure.wp-block-image img,
body.aron-tutorial-layout.single-post .wp-posts-content .wp-block-image img {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

body.aron-tutorial-layout.single-post .wp-posts-content figure.wp-block-image figcaption,
body.aron-tutorial-layout.single-post .wp-posts-content .wp-block-image figcaption {
  color: var(--atl-muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
  text-align: center;
}

body.aron-tutorial-layout.single-post.atl-enhance-code .wp-posts-content pre,
body.aron-tutorial-layout.single-post.atl-enhance-code .wp-posts-content pre.wp-block-zibllblock-enlighter {
  background: #f7f8fa;
  border: 1px solid #e1e5ec;
  border-left: 4px solid var(--atl-brand);
  border-radius: 8px;
  color: #2f3744;
  font-size: 14.5px;
  line-height: 1.75;
  margin: 30px 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 20px 22px;
  white-space: pre;
}

body.aron-tutorial-layout.single-post.atl-enhance-code .wp-posts-content pre code,
body.aron-tutorial-layout.single-post.atl-enhance-code .wp-posts-content pre.wp-block-zibllblock-enlighter code {
  background: transparent;
  color: inherit;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}

body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table {
  border: 1px solid var(--atl-line);
  border-radius: 12px;
  margin: 30px 0;
  overflow-x: auto;
}

body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table table {
  border-collapse: collapse;
  margin: 0;
  min-width: 620px;
  width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table td,
body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table th {
  border-color: var(--atl-line);
  font-size: 15px;
  line-height: 1.65;
  padding: 12px 14px;
}

body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table tr:first-child td,
body.aron-tutorial-layout.single-post.atl-enhance-tables .wp-posts-content figure.wp-block-table thead th {
  background: #f7f8fb;
  color: #252a33;
  font-weight: 800;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar {
  color: #343a43;
  --atl-sidebar-pad: 22px;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar * {
  box-sizing: border-box;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar > div[data-affix="true"] {
  top: 84px;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget {
  background: #fff;
  border: 1px solid var(--atl-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.06);
  margin-bottom: 22px;
  overflow: hidden;
  width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .box-body,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .textwidget,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .widget-content,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .wp-block-group,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .wp-block-search,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > form,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > ul,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > ol {
  padding-left: var(--atl-sidebar-pad);
  padding-right: var(--atl-sidebar-pad);
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget .title-h-left,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > h3,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget .box-body > h3 {
  color: var(--atl-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 16px;
  padding-left: 0;
  padding-right: 0;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget input[type="search"],
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget input[type="text"],
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget .search-input,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget .form-control {
  max-width: 100%;
  width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget img {
  display: block;
  max-width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > p,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > figure,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .wp-block-image {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--atl-sidebar-pad);
  padding-right: var(--atl-sidebar-pad);
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > p img,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > figure img,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget > .wp-block-image img {
  height: auto;
  width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget.hot-posts {
  padding: var(--atl-sidebar-pad);
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget.hot-posts > .relative:first-child {
  margin: 0 0 18px;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts .graphic {
  border-radius: 12px;
  overflow: hidden;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts > .flex {
  align-items: flex-start;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts > .flex > a {
  flex: 0 0 82px;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts > .flex .graphic {
  height: 62px;
  padding-bottom: 0 !important;
  width: 82px;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts .graphic img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts .term-title {
  margin-left: 0 !important;
  min-width: 0;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .term-title a,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .text-ellipsis-2 a {
  color: #323844;
  font-weight: 700;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts .text-ellipsis-2 {
  font-size: 13.5px;
  line-height: 1.55;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts .muted-3-color {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .term-title a:hover,
body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .text-ellipsis-2 a:hover {
  color: var(--atl-brand);
}

body.aron-tutorial-layout.single-post .article .wp-posts-content qc {
  border-radius: 4px;
  padding: 0 4px;
}

body.aron-tutorial-layout.single-post .article .wp-posts-content hr {
  border: 0;
  border-top: 1px solid var(--atl-line);
  margin: 34px 0;
}

body.aron-tutorial-layout.single-post.atl-enable-toc .wp-posts-content h2,
body.aron-tutorial-layout.single-post.atl-enable-toc .wp-posts-content h3 {
  scroll-margin-top: 126px;
}

body.aron-tutorial-layout.single-post .atl-toc {
  display: none;
}

@media (min-width: 1700px) {
  body.aron-tutorial-layout.single-post.atl-enable-toc .atl-toc {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(231, 233, 238, 0.92);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.06);
    display: block;
    left: max(22px, calc((100vw - 1240px) / 2 - 228px));
    max-height: calc(100vh - 168px);
    opacity: 0;
    overflow: hidden;
    padding: 16px 14px 16px 16px;
    position: fixed;
    top: 126px;
    transform: translateX(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: 190px;
    z-index: 18;
  }

  body.admin-bar.aron-tutorial-layout.single-post.atl-enable-toc .atl-toc {
    top: 158px;
  }

  body.aron-tutorial-layout.single-post.atl-enable-toc.atl-toc-ready .atl-toc {
    opacity: 1;
    transform: translateX(0);
  }

  body.aron-tutorial-layout.single-post .atl-toc-title {
    color: #252a33;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
    margin: 0 0 12px;
  }

  body.aron-tutorial-layout.single-post .atl-toc-list {
    border-left: 1px solid #e1e5ec;
    list-style: none;
    margin: 0;
    max-height: calc(100vh - 224px);
    overflow-y: auto;
    padding: 0 0 0 13px;
    scrollbar-width: thin;
  }

  body.aron-tutorial-layout.single-post .atl-toc-item {
    margin: 0;
    padding: 0;
  }

  body.aron-tutorial-layout.single-post .atl-toc-link {
    color: #7b8491;
    display: -webkit-box;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.48;
    margin: 0;
    overflow: hidden;
    padding: 5px 0 5px 3px;
    position: relative;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.aron-tutorial-layout.single-post .atl-toc-link::before {
    background: #cfd5dd;
    border-radius: 999px;
    content: "";
    height: 5px;
    left: -16px;
    position: absolute;
    top: 12px;
    width: 5px;
  }

  body.aron-tutorial-layout.single-post .atl-toc-level-3 .atl-toc-link {
    color: #8c94a1;
    font-size: 12px;
    font-weight: 650;
    padding-left: 13px;
  }

  body.aron-tutorial-layout.single-post .atl-toc-link:hover,
  body.aron-tutorial-layout.single-post .atl-toc-link.is-active {
    color: var(--atl-brand);
  }

  body.aron-tutorial-layout.single-post .atl-toc-link.is-active::before {
    background: var(--atl-brand);
    box-shadow: 0 0 0 4px var(--atl-brand-soft);
  }
}

@media (min-width: 992px) {
  body.aron-tutorial-layout.single-post .sidebar {
    padding-left: 18px;
  }
}

@media (max-width: 991px) {
  body.aron-tutorial-layout.single-post main.container {
    max-width: none;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 18px;
  }

  body.aron-tutorial-layout.single-post article.article {
    border-radius: 14px;
  }

  body.aron-tutorial-layout.single-post .article-header {
    padding: 28px 22px 18px;
  }

  body.aron-tutorial-layout.single-post .article-content {
    padding: 8px 22px 34px;
  }

  body.aron-tutorial-layout.single-post .wp-posts-content,
  body.aron-tutorial-layout.single-post .wp-posts-content p {
    font-size: 17px;
    line-height: 1.86;
  }

  body.aron-tutorial-layout.single-post .wp-posts-content h1.wp-block-heading,
  body.aron-tutorial-layout.single-post .wp-posts-content h2 {
    margin-top: 42px;
  }

  body.aron-tutorial-layout.single-post .article-avatar .user-action {
    display: none;
  }
}

@media (max-width: 640px) {
  body.aron-tutorial-layout.single-post {
    background: #fff;
  }

  body.aron-tutorial-layout.single-post main.container {
    padding-left: 0;
    padding-right: 0;
  }

  body.aron-tutorial-layout.single-post .breadcrumb {
    margin-left: 16px;
    margin-right: 16px;
  }

  body.aron-tutorial-layout.single-post article.article {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    box-shadow: none;
  }

  body.aron-tutorial-layout.single-post .article-title {
    font-size: 28px;
  }

  body.aron-tutorial-layout.single-post .wp-posts-content figure.wp-block-image {
    margin-left: -6px;
    margin-right: -6px;
  }

  body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget {
    border-radius: 12px;
    box-shadow: none;
  }

  body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar {
    --atl-sidebar-pad: 18px;
  }

  body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .zib-widget.hot-posts > .flex > a,
  body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts > .flex .graphic {
    flex-basis: 76px;
    width: 76px;
  }

  body.aron-tutorial-layout.single-post.atl-enhance-sidebar .sidebar .hot-posts > .flex .graphic {
    height: 58px;
  }
}