:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
}

.dark body {
  background: #0a0a0a;
}

.site-shell {
  max-width: 1216px;
}

.preline-mark {
  position: relative;
  display: inline-block;
  width: 1.32rem;
  height: 1.32rem;
  border: 3px solid #2563eb;
  border-radius: 9999px;
}

.preline-mark::before,
.preline-mark::after {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 1.8rem;
  content: "";
  background: #2563eb;
  border-radius: 9999px;
  transform: translateX(-50%);
}

.preline-mark::before {
  top: -0.75rem;
}

.preline-mark::after {
  bottom: -0.75rem;
}

.dark-surface {
  background: rgba(10, 10, 10, 0.88);
}

.plugin-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  border-radius: 0.75rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.plugin-card h1,
.plugin-card h2,
.plugin-card h3,
.plugin-card p,
.plugin-card a {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.plugin-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 20px 55px rgba(37, 99, 235, .14);
  transform: translateY(-2px);
}

.dark .plugin-card {
  border-color: #262626;
}

.dark .plugin-card:hover {
  border-color: #2563eb;
}

.primary-menu {
  position: relative;
}

.primary-menu,
.primary-menu .sub-menu,
.mobile-primary-menu,
.mobile-primary-menu .sub-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wp-docs-dropdown::after,
.primary-menu .menu-item-has-children::after {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: .75rem;
  content: "";
}

.wp-docs-dropdown > .hs-dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.wp-docs-dropdown:hover > .hs-dropdown-menu,
.wp-docs-dropdown:focus-within > .hs-dropdown-menu,
.wp-docs-dropdown.is-open > .hs-dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.wp-docs-dropdown:hover .wp-docs-dropdown-toggle,
.wp-docs-dropdown:focus-within .wp-docs-dropdown-toggle,
.wp-docs-dropdown.is-open .wp-docs-dropdown-toggle {
  color: #2563eb;
}

.primary-menu .menu-item {
  position: relative;
}

.primary-menu > .menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.5rem;
  color: inherit;
}

.primary-menu > .menu-item > a:hover,
.primary-menu > .menu-item > a:focus,
.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a {
  color: #2563eb;
  outline: none;
}

.primary-menu > .menu-item-has-children > a::after {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-top: -.18rem;
  content: "";
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.primary-menu .menu-item-has-children > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 13rem;
  padding: .5rem;
  margin-top: .75rem;
  visibility: hidden;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: .75rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu,
.primary-menu .menu-item-has-children.is-open > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.primary-menu .sub-menu a {
  display: block;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: #44403c;
  white-space: nowrap;
  border-radius: .5rem;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus {
  color: #2563eb;
  background: #f5f5f4;
  outline: none;
}

.dark .primary-menu .menu-item-has-children > .sub-menu {
  background: #0a0a0a;
  border-color: #262626;
}

.dark .primary-menu .sub-menu a {
  color: #e5e5e5;
}

.dark .primary-menu .sub-menu a:hover,
.dark .primary-menu .sub-menu a:focus {
  color: #60a5fa;
  background: #171717;
}

.mobile-primary-menu a {
  display: block;
  min-height: 2rem;
  padding: .25rem 0;
  color: #44403c;
}

.mobile-primary-menu a:hover,
.mobile-primary-menu a:focus,
.mobile-primary-menu .current-menu-item > a,
.mobile-primary-menu .current-menu-ancestor > a {
  color: #2563eb;
  outline: none;
}

.mobile-primary-menu .sub-menu {
  display: grid;
  gap: .35rem;
  padding-left: .875rem;
  margin: .25rem 0 .4rem .25rem;
  border-left: 1px solid #e7e5e4;
}

.mobile-primary-menu .sub-menu a {
  color: #57534e;
  font-weight: 500;
}

.dark .mobile-primary-menu a {
  color: #e5e5e5;
}

.dark .mobile-primary-menu a:hover,
.dark .mobile-primary-menu a:focus,
.dark .mobile-primary-menu .current-menu-item > a,
.dark .mobile-primary-menu .current-menu-ancestor > a {
  color: #60a5fa;
}

.dark .mobile-primary-menu .sub-menu {
  border-color: #262626;
}

.dark .mobile-primary-menu .sub-menu a {
  color: #d4d4d4;
}

.docs-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #d6d3d1 transparent;
}

.docs-sidebar::-webkit-scrollbar {
  width: 8px;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 999px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  min-height: 2rem;
  padding: .375rem .75rem;
  color: #57534e;
  border-radius: .5rem;
}

.nav-item span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nav-item:hover,
.nav-item.active {
  color: #2563eb;
  background: #f5f5f4;
}

.dark .nav-item {
  color: #d4d4d4;
}

.dark .nav-item:hover,
.dark .nav-item.active {
  color: #60a5fa;
  background: #171717;
}

.toc-link {
  display: block;
  padding: .25rem 0 .25rem .75rem;
  font-size: .875rem;
  line-height: 1.5rem;
  color: #78716c;
  border-left: 2px solid transparent;
}

.toc-link:hover,
.toc-link.active {
  color: #2563eb;
  border-color: #2563eb;
}

.dark .toc-link {
  color: #a3a3a3;
}

.dark .toc-link:hover,
.dark .toc-link.active {
  color: #60a5fa;
}

.blog-body {
  max-width: 100%;
  color: #292524;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dark .blog-body {
  color: #e5e5e5;
}

.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
  color: #0c0a09;
  font-weight: 700;
  letter-spacing: 0;
  scroll-margin-top: 7.5rem;
}

.dark .blog-body h1,
.dark .blog-body h2,
.dark .blog-body h3,
.dark .blog-body h4,
.dark .blog-body h5,
.dark .blog-body h6 {
  color: #fff;
}

.blog-body h1 {
  margin-top: 2.5rem;
  font-size: 2.25rem;
  line-height: 2.75rem;
}

.blog-body h2 {
  margin-top: 2.5rem;
  font-size: 1.75rem;
  line-height: 2.25rem;
}

.blog-body h3 {
  margin-top: 2rem;
  font-size: 1.35rem;
  line-height: 1.95rem;
}

.blog-body h4 {
  margin-top: 1.75rem;
  font-size: 1.1rem;
  line-height: 1.75rem;
}

.blog-body p,
.blog-body ul,
.blog-body ol,
.blog-body blockquote {
  margin-top: 1.125rem;
  font-size: 1rem;
  line-height: 1.9rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.4rem;
}

.blog-body ul {
  list-style: disc;
}

.blog-body ol {
  list-style: decimal;
}

.blog-body a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-body a:hover {
  color: #1d4ed8;
}

.blog-body blockquote {
  padding: 1rem 1.25rem;
  color: #57534e;
  background: #f5f5f4;
  border-left: 4px solid #2563eb;
  border-radius: .75rem;
}

.dark .blog-body blockquote {
  color: #d4d4d4;
  background: #171717;
}

.blog-body img {
  max-width: 100%;
  height: auto;
  margin-top: 1.5rem;
  border-radius: .9rem;
}

.blog-body figure,
.blog-body iframe,
.blog-body video,
.blog-body embed,
.blog-body object {
  max-width: 100%;
}

.blog-body iframe {
  width: 100%;
}

.blog-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.blog-body li,
.blog-body td,
.blog-body th,
.blog-body figcaption {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-body pre {
  position: relative;
  max-width: 100%;
  overflow: auto;
  margin-top: 1.5rem;
  padding: 1.15rem;
  color: #e5e7eb;
  background: #111827;
  border-radius: .85rem;
}

.blog-body code {
  padding: .18rem .38rem;
  font-size: .92em;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: .35rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-body pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border-radius: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.code-copy-button {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, .8);
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: .5rem;
}

.wp-docs-comments,
.wp-docs-comments * {
  box-sizing: border-box;
}

.wp-docs-comment-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wp-docs-comment-list .comment,
.wp-docs-comment-list .pingback,
.wp-docs-comment-list .trackback {
  margin-top: 1rem;
}

.wp-docs-comment-list > .comment:first-child,
.wp-docs-comment-list > .pingback:first-child,
.wp-docs-comment-list > .trackback:first-child {
  margin-top: 0;
}

.wp-docs-comment-list .children {
  padding-left: 1rem;
  margin-top: 1rem;
  margin-left: 1.25rem;
  list-style: none;
  border-left: 1px solid #e7e5e4;
}

.wp-docs-comments .comment-body {
  padding: 1rem;
  overflow: hidden;
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: .9rem;
}

.wp-docs-comments .comment-meta {
  min-height: 3rem;
}

.wp-docs-comments .comment-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #0c0a09;
  font-size: .95rem;
  font-weight: 700;
}

.wp-docs-comments .comment-author .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
}

.wp-docs-comments .comment-author .says {
  display: none;
}

.wp-docs-comments .comment-metadata,
.wp-docs-comments .comment-awaiting-moderation {
  margin-top: .35rem;
  margin-left: 3.75rem;
  color: #78716c;
  font-size: .8rem;
  font-weight: 600;
}

.wp-docs-comments .comment-content {
  margin-top: .9rem;
  color: #44403c;
  font-size: .95rem;
  line-height: 1.8rem;
}

.wp-docs-comments .comment-content p {
  margin-top: .75rem;
}

.wp-docs-comments .comment-content p:first-child {
  margin-top: 0;
}

.wp-docs-comments .reply {
  margin-top: .9rem;
}

.wp-docs-comments .comment-reply-link,
.wp-docs-comments .comment-edit-link,
.wp-docs-comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 .75rem;
  color: #2563eb;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  border-radius: .5rem;
}

.wp-docs-comments .comment-reply-link:hover,
.wp-docs-comments .comment-edit-link:hover,
.wp-docs-comments-pagination .page-numbers:hover,
.wp-docs-comments-pagination .current {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.wp-docs-comment-form label {
  display: block;
  margin-bottom: .45rem;
  color: #292524;
  font-size: .875rem;
  font-weight: 700;
}

.wp-docs-comment-form input,
.wp-docs-comment-form textarea {
  width: 100%;
  color: #0c0a09;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: .75rem;
  outline: none;
}

.wp-docs-comment-form input {
  min-height: 2.75rem;
  padding: 0 .9rem;
}

.wp-docs-comment-form textarea {
  min-height: 9rem;
  padding: .85rem .9rem;
  resize: vertical;
}

.wp-docs-comment-form input:focus,
.wp-docs-comment-form textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.wp-docs-comment-form .required {
  color: #dc2626;
}

.dark .wp-docs-comment-list .children {
  border-color: #262626;
}

.dark .wp-docs-comments .comment-body {
  background: #111;
  border-color: #262626;
}

.dark .wp-docs-comments .comment-author {
  color: #fff;
}

.dark .wp-docs-comments .comment-metadata,
.dark .wp-docs-comments .comment-awaiting-moderation {
  color: #a3a3a3;
}

.dark .wp-docs-comments .comment-content {
  color: #d4d4d4;
}

.dark .wp-docs-comments .comment-reply-link,
.dark .wp-docs-comments .comment-edit-link,
.dark .wp-docs-comments-pagination .page-numbers {
  color: #93c5fd;
  border-color: #1e3a8a;
}

.dark .wp-docs-comments .comment-reply-link:hover,
.dark .wp-docs-comments .comment-edit-link:hover,
.dark .wp-docs-comments-pagination .page-numbers:hover,
.dark .wp-docs-comments-pagination .current {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.dark .wp-docs-comment-form label {
  color: #fff;
}

.dark .wp-docs-comment-form input,
.dark .wp-docs-comment-form textarea {
  color: #fff;
  background: #171717;
  border-color: #262626;
}

.dark .wp-docs-comment-form input:focus,
.dark .wp-docs-comment-form textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .16);
}

.wp-docs-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.wp-docs-pagination .page-numbers {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
  color: #57534e;
  border: 1px solid #e7e5e4;
  border-radius: .5rem;
}

.wp-docs-pagination .current {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

.dark .wp-docs-pagination .page-numbers {
  color: #d4d4d4;
  border-color: #262626;
}

.mobile-menu.is-open {
  display: block;
}

.line-clamp-2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.line-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

body.wp-docs-login-modal-open {
  overflow: hidden;
}

.wp-docs-login-modal[hidden] {
  display: none;
}

.wp-docs-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.wp-docs-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, .58);
  backdrop-filter: blur(10px);
}

.wp-docs-login-dialog {
  position: relative;
  width: min(100%, 25rem);
  padding: 1.5rem;
  color: #1c1917;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 1rem;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
  opacity: 0;
  transform: translateY(.75rem) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.wp-docs-login-modal.is-open .wp-docs-login-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wp-docs-login-close {
  position: absolute;
  top: .875rem;
  right: .875rem;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  color: #78716c;
  background: #f5f5f4;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
}

.wp-docs-login-close:hover,
.wp-docs-login-close:focus {
  color: #1c1917;
  background: #e7e5e4;
  outline: none;
}

.wp-docs-login-head {
  display: flex;
  gap: .875rem;
  align-items: center;
  padding-right: 2.5rem;
}

.wp-docs-login-mark,
.wp-docs-qq-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  border-radius: 9999px;
}

.wp-docs-login-mark {
  width: 3rem;
  height: 3rem;
  color: #fff;
  background: #12b7f5;
  box-shadow: 0 16px 38px rgba(18, 183, 245, .24);
}

.wp-docs-login-kicker {
  margin: 0 0 .25rem;
  font-size: .8125rem;
  font-weight: 700;
  color: #dc2626;
}

.wp-docs-login-dialog h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0c0a09;
  letter-spacing: 0;
}

.wp-docs-login-desc,
.wp-docs-login-muted {
  margin: 1rem 0 0;
  font-size: .9375rem;
  line-height: 1.75;
  color: #57534e;
}

.wp-docs-login-error {
  margin-top: 1rem;
  padding: .75rem .875rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: .75rem;
}

.wp-docs-qq-login-button {
  display: inline-flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: #12b7f5;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 16px 34px rgba(18, 183, 245, .22);
  cursor: pointer;
}

.wp-docs-qq-login-button:hover,
.wp-docs-qq-login-button:focus {
  color: #fff;
  background: #0da7df;
  outline: none;
}

.wp-docs-qq-login-button.is-disabled {
  color: #78716c;
  background: #e7e5e4;
  box-shadow: none;
  cursor: not-allowed;
}

.wp-docs-qq-login-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  font-size: .75rem;
  color: #12b7f5;
  background: #fff;
}

.dark .wp-docs-login-dialog {
  color: #e5e5e5;
  background: #111;
  border-color: #262626;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
}

.dark .wp-docs-login-close {
  color: #a3a3a3;
  background: #262626;
}

.dark .wp-docs-login-close:hover,
.dark .wp-docs-login-close:focus {
  color: #fff;
  background: #404040;
}

.dark .wp-docs-login-dialog h2 {
  color: #fff;
}

.dark .wp-docs-login-desc,
.dark .wp-docs-login-muted {
  color: #d4d4d4;
}

.dark .wp-docs-login-error {
  color: #fecaca;
  background: rgba(127, 29, 29, .32);
  border-color: rgba(248, 113, 113, .38);
}

@media (max-width: 767px) {
  .blog-body h1 {
    font-size: 1.875rem;
    line-height: 2.35rem;
  }

  .blog-body h2 {
    font-size: 1.45rem;
    line-height: 2rem;
  }
}