:root {
     /* base */
     --bg: #ffffff;
     --surface: #ffffff;
     --text: #0b1220;
     --muted: #343538;
     --border: #e6e8ee;
     --chip: #f2f4f8;

     /* brand */
     --brand: #30d1ac;

     /* ads placeholder */
     --ad: #f3f4f6;
 }

 /* Dark theme */
 [data-theme="dark"] {
     --bg: #070a12;
     --surface: #0b1220;
     --text: #e8eefc;
     --muted: #d5dce9;
     --border: #1f2a44;
     --chip: #111a2c;

     --brand: #30d1ac;

     --ad: #0f172a;
 }

 html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scrollbar-gutter: stable;
 }

 body {
     background: var(--bg);
     color: var(--text);
     font-weight: 450;
 }

 [data-theme="dark"] body {
     font-weight: 460;
 }

 [data-theme-icon="sun"] {
     display: none;
 }

 [data-theme="dark"] [data-theme-icon="moon"] {
     display: none;
 }

 [data-theme="dark"] [data-theme-icon="sun"] {
     display: inline-block;
 }

 .surface {
     background: var(--surface);
 }

 .muted {
     color: var(--muted);
 }

 .borderc {
     border-color: var(--border);
 }

 .chip {
     background: var(--chip);
 }

 .adph {
     background: var(--ad);
 }

 .brand {
     color: var(--brand);
 }

 .brandbg {
     background: var(--brand);
 }

 .brandborder {
     border-color: var(--brand);
 }

 .article-body {
     color: var(--text);
 }

 .article-body p {
     font-size: 15.5px;
     line-height: 1.7;
     color: var(--muted);
 }

 .article-body h2 {
     font-size: 1.325rem;
     font-weight: 700;
     letter-spacing: -0.01em;
     color: var(--text);
 }

 .article-body ul,
 .article-body ol {
     padding-left: 1.25rem;
     color: var(--muted);
 }

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

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

 .article-body ul li+li,
 .article-body ol li+li {
     margin-top: 0.75rem;
 }

 .article-body table {
     display: block;
     width: 100%;
     min-width: 640px;
     overflow-x: auto;
     border-collapse: collapse;
     font-size: 15px;
 }

 .article-body .overflow-x-auto {
     scrollbar-width: thin;
     scrollbar-color: var(--border) transparent;
     scrollbar-gutter: stable;
 }

 .article-body .overflow-x-auto::-webkit-scrollbar {
     height: 8px;
 }

 .article-body .overflow-x-auto::-webkit-scrollbar-track {
     background: transparent;
 }

 .article-body .overflow-x-auto::-webkit-scrollbar-thumb {
     background: var(--border);
     border-radius: 999px;
     border: 2px solid transparent;
     background-clip: padding-box;
 }

 .article-body .overflow-x-auto:hover::-webkit-scrollbar-thumb {
     background: var(--muted);
 }

 .article-body th,
 .article-body td {
     border: 1px solid var(--border);
     padding: 0.5rem 0.75rem;
     text-align: left;
     vertical-align: top;
 }

 .article-body thead {
     background: #1f2937;
 }

 .article-body thead th {
     color: #ffffff;
 }

 @media (min-width: 640px) {
     .article-body p {
         font-size: 1rem;
     }

     .article-body h2 {
         font-size: 1.325rem;
     }

     .article-body table {
         font-size: 1rem;
     }
 }

 #preloader {
     opacity: 1;
     transition: opacity 0.4s ease;
 }

 #preloader.fade-out {
     opacity: 0;
     pointer-events: none;
 }