/* Qoder Blog content; the native Adoc topbar matches docs and changelog. */
html:has(.qb-site, [data-qb-post]), body:has(.qb-site, [data-qb-post]) { background: #f2f5f1 !important; color: #161a17; }
body:has(.qb-site, [data-qb-post]) #sidebar, body:has(.qb-site, [data-qb-post]) #footer,
body:has(.qb-site, [data-qb-post]) [data-testid="sidebar"] { display: none !important; }
body:has(.qb-site, [data-qb-post]) #navbar .nav-logo { height: 20px !important; width: auto !important; max-width: none; }
body:has(.qb-site, [data-qb-post]) main:has(.qb-site, [data-qb-post]), body:has(.qb-site, [data-qb-post]) article:has(.qb-site, [data-qb-post]),
body:has(.qb-site, [data-qb-post]) #content-area, body:has(.qb-site, [data-qb-post]) #content-container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
:is(.qb-site, :where(#content-area:has([data-qb-post]))) { font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: #161a17; font-size: 16px; line-height: 1.6; width: 100%; }
:is(.qb-site, :where(#content-area:has([data-qb-post]))) *, :is(.qb-site, :where(#content-area:has([data-qb-post]))) *::before, :is(.qb-site, :where(#content-area:has([data-qb-post]))) *::after { box-sizing: border-box; }
.qb-header-language { display: none; }
@media (max-width:1023px) {
  .qb-header-language { display: flex; align-items: center; position: fixed; top: 0; right: 68px; height: 64px; z-index: 1003; font-size: 14px; }
  .qb-header-language a { padding: 8px 12px; border-radius: 8px; }
  .qb-header-language a:hover { background: #e8ede7; }
  .dark .qb-header-language a:hover { background: #252d24; }
}
:is(.qb-site, :where(#content-area:has([data-qb-post]))) a { color: inherit; text-decoration: none; font-weight: inherit; border: 0; }
:is(.qb-site, :where(#content-area:has([data-qb-post]))) button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:is(.qb-site, :where(#content-area:has([data-qb-post]))) a:focus-visible, :is(.qb-site, :where(#content-area:has([data-qb-post]))) button:focus-visible { outline: 2px solid #38844d; outline-offset: 5px; border-radius: 4px; }
:is(.qb-site, :where(#content-area:has([data-qb-post]))) h1, :is(.qb-site, :where(#content-area:has([data-qb-post]))) h2, :is(.qb-site, :where(#content-area:has([data-qb-post]))) h3, :is(.qb-site, :where(#content-area:has([data-qb-post]))) h4, :is(.qb-site, :where(#content-area:has([data-qb-post]))) p { color: inherit; margin: 0; }
.qb-header { display: flex; align-items: center; gap: 42px; height: 96px; padding: 0 3%; }
.qb-logo { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: 23px; font-weight: 500 !important; letter-spacing: -1px; }
.qb-logo img { width: 27px; height: 27px; margin: 0; border-radius: 0; }
.qb-nav, .qb-actions { display: flex; align-items: center; gap: 28px; font-size: 14px; white-space: nowrap; }
.qb-actions { margin-left: auto; gap: 24px; }
.qb-nav a:hover, .qb-actions a:hover { opacity: .6; }
.qb-download { background: #fff; padding: 8px 22px; border-radius: 24px; }
.qb-index { max-width: 1440px; padding: 66px 5% 120px; margin: auto; }
.qb-index > h1 { font-size: 34px; line-height: 1.3; font-weight: 500; letter-spacing: -1px; }
.qb-subtitle { color: #858984 !important; font-size: 20px; margin-top: 10px !important; }
.qb-filters { display: flex; flex-wrap: wrap; gap: 26px; margin: 40px 0 28px; }
.qb-filters button { padding: 0; color: #858984; }
.qb-filters { --qb-active-filter: #141814; }
.dark .qb-filters { --qb-active-filter: #f6faf5; }
html:not([data-qb-category]) .qb-filters button[aria-pressed="true"],
[data-qb-category="all"] .qb-filters button[data-category="all"],
[data-qb-category="technology"] .qb-filters button[data-category="technology"],
[data-qb-category="product"] .qb-filters button[data-category="product"],
[data-qb-category="case"] .qb-filters button[data-category="case"],
[data-qb-category="feature"] .qb-filters button[data-category="feature"] {
  color: var(--qb-active-filter);
  font-weight: 500;
}
[data-qb-category="technology"] .qb-index .qb-card:not([data-category="technology"]),
[data-qb-category="product"] .qb-index .qb-card:not([data-category="product"]),
[data-qb-category="case"] .qb-index .qb-card:not([data-category="case"]),
[data-qb-category="feature"] .qb-index .qb-card:not([data-category="feature"]) {
  display: none;
}
.qb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 20px; }
.qb-card { display: block; min-width: 0; }
.qb-card[hidden] { display: none; }
.qb-card img { display: block; width: 100%; height: auto !important; aspect-ratio: 1696/1152; object-fit: cover; border-radius: 12px; margin: 0 0 10px; transition: filter .2s; }
.qb-card [data-rmiz], .qb-logo [data-rmiz] { pointer-events: none; }
.qb-card [data-rmiz-ghost], .qb-logo [data-rmiz-ghost] { display: none; }
.qb-card:hover img { filter: brightness(.96); }
.qb-category { display: block; color: #858984; font-size: 14px; margin: 0 0 10px; }
.qb-card h2 { font-size: 20px; line-height: 1.4; font-weight: 500; margin: 0 0 10px; letter-spacing: -.3px; }
.qb-card > p { color: #858984; font-size: 15px; line-height: 1.5; }
.qb-detail { max-width: 1000px; margin: 0 auto; padding: 48px 40px 100px; }
.qb-back { display: inline-block; margin-bottom: 36px; font-weight: 500 !important; }
.qb-article-header { border-bottom: 1px solid #dfe4dd; padding-bottom: 32px; margin-bottom: 38px; }
.qb-date { font-size: 14px; color: #787f77 !important; margin-bottom: 12px !important; }
.qb-article-header h1 { font-size: 36px; line-height: 1.4; font-weight: 600; letter-spacing: -1px; }
.qb-description { margin-top: 20px !important; line-height: 1.8; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) { overflow-wrap: anywhere; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) p { margin: 16px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) h2 { font-size: 28px; font-weight: 600; margin: 38px 0 18px; line-height: 1.4; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) h3 { font-size: 23px; font-weight: 600; margin: 30px 0 14px; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) h4, :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) h5 { font-size: 19px; font-weight: 600; margin: 26px 0 12px; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) a { text-decoration: underline; text-underline-offset: 3px; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) ul { list-style: disc; padding-left: 24px; margin: 16px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) ol { list-style: decimal; padding-left: 24px; margin: 16px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) li { margin: 6px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) img, :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) video { max-width: 100%; height: auto; border-radius: 8px; margin: 24px auto; display: block; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) pre { background: #e8ede7; padding: 20px; overflow: auto; border-radius: 8px; white-space: pre; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) :not(pre) > code { background: #e8ede7; padding: 2px 4px; border-radius: 4px; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) table { display: block; overflow-x: auto; border-collapse: collapse; margin: 24px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) th, :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) td { padding: 12px; border: 1px solid #d8dfd5; text-align: left; min-width: 80px; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) th { background: #e8ede7; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) blockquote { border-left: 3px solid #a9bca4; padding: 4px 20px; margin: 20px 0; }
:is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) math { font-size: 1.1em; }
.dark body:has(.qb-site, [data-qb-post]), html.dark:has(.qb-site, [data-qb-post]) { background: #151916 !important; }
.dark :is(.qb-site, :where(#content-area:has([data-qb-post]))) { color: #e8eee8; }
.dark .qb-article-header, .dark .qb-footer, .dark .qb-footer-bottom { border-color: #343c33; }
.dark :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) pre, .dark :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) :not(pre) > code, .dark :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) th { background: #252d24; }
.dark :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) th, .dark :is(.qb-prose, .adoc-mdx-content:has([data-qb-post]) > .prose) td { border-color: #3f493d; }
.dark .qb-footer-brand .qb-logo img { filter: invert(1); }
.qb-footer { border-top: 1px solid #dfe4dd; padding: 56px 5% 24px; }
.qb-footer-brand { margin-bottom: 42px; }
.qb-footer-brand p { color: #858984; margin-top: 12px; }
.qb-footer-links { display: grid; grid-template-columns: repeat(5,1fr); gap: 30px; }
.qb-footer-links h2 { color: #858984; font-size: 14px; font-weight: 400; margin: 0 0 18px; }
.qb-footer-links a { display: block; font-size: 14px; margin: 12px 0; }
.qb-footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #dfe4dd; margin-top: 42px; padding-top: 24px; color: #858984; font-size: 12px; }
@media (min-width:1600px) { .qb-index { padding-left: 40px; padding-right: 40px; } }
@media (max-width:1100px) { .qb-nav { gap: 16px; } .qb-header { gap: 24px; } .qb-china, .qb-login { display: none; } }
@media (max-width:800px) { .qb-nav { display: none; } .qb-header { height: 80px; padding: 0 24px; } .qb-index { padding: 44px 24px 80px; } .qb-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 20px; } .qb-detail { padding: 36px 24px 70px; } .qb-article-header h1 { font-size: 30px; } .qb-footer-links { grid-template-columns: repeat(3,1fr); } }
@media (max-width:520px) { .qb-actions { gap: 18px; } .qb-download { padding: 6px 15px; } .qb-grid { grid-template-columns: 1fr; gap: 36px; } .qb-index > h1 { font-size: 30px; } .qb-subtitle { font-size: 17px; } .qb-filters { gap: 24px; margin-top: 30px; } .qb-footer-links { grid-template-columns: repeat(2,1fr); } .qb-footer-bottom { flex-direction: column; } .qb-footer-bottom button { text-align: left; } .qb-article-header h1 { font-size: 28px; } }