/*fern-site-stylesheet*/@font-face {
    font-family: 'OKXSans';
    src: url('/_fern-files/okx.docs.buildwithfern.com/57c73448cee3c434c948d30dac8744139b4e41b643cc64343a3c6c5e2a2606d5/assets/fonts/OKXSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OKXSans';
    src: url('/_fern-files/okx.docs.buildwithfern.com/100ea33221adfc2f838101872240a0cfeac86ea5b91cff5556136b57fccccfc4/assets/fonts/OKXSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OKXSans';
    src: url('/_fern-files/okx.docs.buildwithfern.com/1c927fffff924ea0e0f803e2b112448525f5634b12df011d0be449f7c02cc48a/assets/fonts/OKXSans-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OKXSans';
    src: url('/_fern-files/okx.docs.buildwithfern.com/100ea33221adfc2f838101872240a0cfeac86ea5b91cff5556136b57fccccfc4/assets/fonts/OKXSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OKXSans';
    src: url('/_fern-files/okx.docs.buildwithfern.com/1c927fffff924ea0e0f803e2b112448525f5634b12df011d0be449f7c02cc48a/assets/fonts/OKXSans-Bold.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 24px;
  --font-body: 'OKXSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'OKXSans', 'OKXSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fcfefa;
  --accent-2: #f6fbf4;
  --accent-3: #ebf6e4;
  --accent-4: #def0d3;
  --accent-5: #cfe8bf;
  --accent-6: #bcdca7;
  --accent-7: #a3cc87;
  --accent-8: #80b656;
  --accent-9: #3d6e00;
  --accent-10: #2f5f00;
  --accent-11: #497b18;
  --accent-12: #293c1c;

  --accent-a1: #66cc0005;
  --accent-a2: #2fa3000b;
  --accent-a3: #43aa001b;
  --accent-a4: #40a9002c;
  --accent-a5: #40a40040;
  --accent-a6: #3d9a0058;
  --accent-a7: #3c930078;
  --accent-a8: #409100a9;
  --accent-a9: #3d6e00;
  --accent-a10: #2f5f00;
  --accent-a11: #366d00e7;
  --accent-a12: #0f2400e3;

  --accent-contrast: #fff;
  --accent-surface: #f4faf1cc;
  --accent-indicator: #3d6e00;
  --accent-track: #3d6e00;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0056 133.2);
      --accent-2: oklch(98.2% 0.0098 133.2);
      --accent-3: oklch(96.1% 0.0268 133.2);
      --accent-4: oklch(93.4% 0.0427 133.2);
      --accent-5: oklch(90.1% 0.06 133.2);
      --accent-6: oklch(85.7% 0.0792 133.2);
      --accent-7: oklch(79.8% 0.1033 133.2);
      --accent-8: oklch(71.7% 0.1398 133.2);
      --accent-9: oklch(48.4% 0.1371 133.2);
      --accent-10: oklch(43.3% 0.1371 133.2);
      --accent-11: oklch(52.8% 0.1371 133.2);
      --accent-12: oklch(33% 0.0574 133.2);

      --accent-a1: color(display-p3 0.4118 0.8039 0.0196 / 0.02);
      --accent-a2: color(display-p3 0.2196 0.6118 0.0235 / 0.04);
      --accent-a3: color(display-p3 0.3098 0.6549 0.0039 / 0.102);
      --accent-a4: color(display-p3 0.2902 0.6235 0.0039 / 0.165);
      --accent-a5: color(display-p3 0.2863 0.6039 0.0039 / 0.236);
      --accent-a6: color(display-p3 0.2667 0.5686 0.0039 / 0.326);
      --accent-a7: color(display-p3 0.2588 0.5412 0.0039 / 0.444);
      --accent-a8: color(display-p3 0.2667 0.5294 0 / 0.616);
      --accent-a9: color(display-p3 0.1961 0.3529 0 / 0.887);
      --accent-a10: color(display-p3 0.1569 0.3059 0 / 0.91);
      --accent-a11: color(display-p3 0.2 0.3725 0 / 0.832);
      --accent-a12: color(display-p3 0.0588 0.1216 0 / 0.875);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9765 0.9451 / 0.8);
      --accent-indicator: oklch(48.4% 0.1371 133.2);
      --accent-track: oklch(48.4% 0.1371 133.2);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.541 0.556 0.532);
      --grayscale-track: color(display-p3 0.541 0.556 0.532);
    }
  }
}


.dark {
  --accent-1: #000;
  --accent-2: #0e1307;
  --accent-3: #1c260d;
  --accent-4: #283511;
  --accent-5: #324414;
  --accent-6: #3d5317;
  --accent-7: #49631a;
  --accent-8: #57761b;
  --accent-9: #bcff2f;
  --accent-10: #b7f34a;
  --accent-11: #b0ea40;
  --accent-12: #dafbae;

  --accent-a1: #00000000;
  --accent-a2: #bcff5e13;
  --accent-a3: #bcff5826;
  --accent-a4: #c1ff5235;
  --accent-a5: #bcff4b44;
  --accent-a6: #bcff4753;
  --accent-a7: #bdff4363;
  --accent-a8: #bdff3b76;
  --accent-a9: #bcff2f;
  --accent-a10: #c0ff4ef3;
  --accent-a11: #c0ff46ea;
  --accent-a12: #ddffb1fb;

  --accent-contrast: #1c250f;
  --accent-surface: #1c260e80;
  --accent-indicator: #bcff2f;
  --accent-track: #bcff2f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0186 127.1);
      --accent-2: oklch(17.8% 0.025 127.1);
      --accent-3: oklch(25.1% 0.0443 127.1);
      --accent-4: oklch(30.9% 0.0606 127.1);
      --accent-5: oklch(35.9% 0.0747 127.1);
      --accent-6: oklch(40.9% 0.0885 127.1);
      --accent-7: oklch(46.3% 0.1033 127.1);
      --accent-8: oklch(52.4% 0.1219 127.1);
      --accent-9: oklch(92.2% 0.2263 127.1);
      --accent-10: oklch(89.2% 0.2009 127.1);
      --accent-11: oklch(86.8% 0.2009 127.1);
      --accent-12: oklch(94.6% 0.1057 127.1);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.7843 0.9961 0.4196 / 0.075);
      --accent-a3: color(display-p3 0.7843 0.9961 0.4196 / 0.15);
      --accent-a4: color(display-p3 0.8118 1 0.4157 / 0.208);
      --accent-a5: color(display-p3 0.8078 1 0.4039 / 0.263);
      --accent-a6: color(display-p3 0.8039 1 0.4039 / 0.322);
      --accent-a7: color(display-p3 0.7961 1 0.3882 / 0.385);
      --accent-a8: color(display-p3 0.7961 1 0.3765 / 0.459);
      --accent-a9: color(display-p3 0.7961 1 0.3647 / 0.993);
      --accent-a10: color(display-p3 0.8078 1 0.4275 / 0.946);
      --accent-a11: color(display-p3 0.8118 1 0.4078 / 0.91);
      --accent-a12: color(display-p3 0.8941 1 0.7294 / 0.981);

      --accent-contrast: #1c250f;
      --accent-surface: color(display-p3 0.1176 0.149 0.0627 / 0.5);
      --accent-indicator: oklch(92.2% 0.2263 127.1);
      --accent-track: oklch(92.2% 0.2263 127.1);
    }
  }
}


.dark {
  --grayscale-1: #111210;
  --grayscale-2: #181917;
  --grayscale-3: #212220;
  --grayscale-4: #282a27;
  --grayscale-5: #2f312e;
  --grayscale-6: #383a36;
  --grayscale-7: #454843;
  --grayscale-8: #5c625b;
  --grayscale-9: #687066;
  --grayscale-10: #767d74;
  --grayscale-11: #afb5ad;
  --grayscale-12: #eceeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f1f2f008;
  --grayscale-a3: #f4f5f312;
  --grayscale-a4: #f3fef21a;
  --grayscale-a5: #f2fbf122;
  --grayscale-a6: #f4faed2c;
  --grayscale-a7: #f2fced3b;
  --grayscale-a8: #edfdeb57;
  --grayscale-a9: #ebfde766;
  --grayscale-a10: #f0fdec74;
  --grayscale-a11: #f6fef4b0;
  --grayscale-a12: #fdfffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #687066;
  --grayscale-track: #687066;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.07 0.063);
      --grayscale-2: color(display-p3 0.095 0.098 0.091);
      --grayscale-3: color(display-p3 0.131 0.135 0.126);
      --grayscale-4: color(display-p3 0.158 0.163 0.153);
      --grayscale-5: color(display-p3 0.186 0.192 0.18);
      --grayscale-6: color(display-p3 0.221 0.229 0.215);
      --grayscale-7: color(display-p3 0.273 0.284 0.266);
      --grayscale-8: color(display-p3 0.365 0.382 0.359);
      --grayscale-9: color(display-p3 0.414 0.438 0.404);
      --grayscale-10: color(display-p3 0.467 0.49 0.458);
      --grayscale-11: color(display-p3 0.69 0.709 0.682);
      --grayscale-12: color(display-p3 0.927 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f1f2f008;
      --grayscale-a3: #f4f5f312;
      --grayscale-a4: #f3fef21a;
      --grayscale-a5: #f2fbf122;
      --grayscale-a6: #f4faed2c;
      --grayscale-a7: #f2fced3b;
      --grayscale-a8: #edfdeb57;
      --grayscale-a9: #ebfde766;
      --grayscale-a10: #f0fdec74;
      --grayscale-a11: #f6fef4b0;
      --grayscale-a12: #fdfffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.414 0.438 0.404);
      --grayscale-track: color(display-p3 0.414 0.438 0.404);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(61, 110, 0, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(230, 230, 230, 1);
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(250, 250, 250, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(188, 255, 47, 1);
  --background: rgba(0, 0, 0, 1);
  --border: rgba(28, 28, 28, 1);
  --sidebar-background: initial;
  --header-background: rgba(0, 0, 0, 1);
  --card-background: rgba(12, 12, 12, 1);
  --theme-color: #000;
}

/* OKX aesthetic: high-contrast, minimal, sharp-to-slightly-rounded corners,
   hairline borders, accent reserved for emphasis. */

:root {
  --typography-body-font-family: "OKXSans", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --typography-heading-font-family: var(--typography-body-font-family);
  /* Tighten radii toward OKX's squared-off look. */
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 8px;
  --rounded-xl: 8px;
}

/* Slightly bolder, tighter headings — editorial fintech feel. */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* Solid, high-contrast primary buttons like OKX CTAs. */
.fern-button.primary,
button[data-variant="filled"] {
  border-radius: 6px;
}

/* Hairline borders on cards. */
.fern-card {
  border-width: 1px;
}

/* Product switcher — clean & compact, modeled after docs.makeswift.com:
   a small dark dropdown, plain text items, active product on a raised surface. */
.fern-product-selector-radio-group {
  border-radius: 10px;
  padding: 4px;
  font-size: 0.875rem;
  min-width: 180px;
}
.fern-product-selector-radio-group [role="radio"],
.fern-product-selector-radio-group button {
  padding: 6px 10px;
  border-radius: 7px;
  font-weight: 600;
}
/* Remove Fern's default leading icon so items are plain text. */
.fern-product-selector-radio-group .fern-selection-item-icon,
.fern-product-item .fern-selection-item-icon {
  display: none;
}
.fern-product-selector-radio-group .fern-selection-item-title {
  margin: 0;
}
.fern-product-selector-radio-group [data-state="checked"],
.fern-product-selector-radio-group [aria-checked="true"],
.fern-product-selector-radio-group [data-selected="true"] {
  background-color: var(--card-background, #2b2f38);
}

/* Compact trigger next to the header (no logo). */
.fern-product-selector-trigger,
button.fern-product-selector {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Hide the product switcher on the landing page only (the landing is the one
   page that contains .okx-hero). Other pages keep the switcher. */
body:has(.okx-hero) .fern-header-selectors {
  display: none !important;
}

/* ============================================================
   Landing page (hero + sections) — OKX "Trade like a pro"
   ============================================================ */
.okx-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 24px 8px;
  text-align: center;
}
.okx-eyebrow {
  display: inline-block;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7BAF1E;
  margin-bottom: 18px;
}
:is(.dark,[data-theme="dark"]) .okx-eyebrow { color: #BCFF2F; }
.okx-hero-title {
  font-size: clamp(2.8rem, 6.4vw, 5rem);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 22px;
}
.okx-hero-accent { color: #7BAF1E; }
:is(.dark,[data-theme="dark"]) .okx-hero-accent { color: #BCFF2F; }
.okx-hero-sub {
  font-size: 1.15rem; line-height: 1.6; max-width: 60ch; margin: 0 auto 32px; opacity: 0.78;
}
.okx-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.okx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px; font-weight: 700; font-size: 0.98rem;
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.okx-btn:hover { transform: translateY(-1px); text-decoration: none; }
.okx-btn:focus-visible { transform: translateY(-1px); text-decoration: none; outline: none;
}
.okx-btn-primary { background: #BCFF2F; color: #0A0A0A; }
.okx-btn-primary:hover { box-shadow: 0 8px 24px rgba(188,255,47,.25); color: #0A0A0A; }
.okx-btn-primary:focus-visible { box-shadow: 0 8px 24px rgba(188,255,47,.25); color: #0A0A0A; outline: none;
}
.okx-btn-ghost { background: transparent; color: inherit; border: 1px solid var(--border, #2A2A2A); }
.okx-btn-ghost:hover { border-color: #BCFF2F; }
.okx-btn-ghost:focus-visible { border-color: #BCFF2F; outline: none;
}
/* Wide live trading panel sitting under the hero title. */
.okx-hero-banner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 40px;   /* more breathing room below the CTA buttons */
}
.okx-panel {
  width: 100%; box-sizing: border-box;
  background: linear-gradient(180deg, #101216, #0a0b0d);
  border: 1px solid #22252b;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.5);
  padding: 16px 22px 16px;
}
.okx-panel-top { display: flex; align-items: center; gap: 22px; padding-bottom: 14px; border-bottom: 1px solid #1b1e23; }
.okx-sym { display: flex; align-items: center; gap: 10px; }
.okx-coin { width: 28px; height: 28px; border-radius: 50%; background: #f7931a; color: #0a0a0a; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.okx-sym-text { display: flex; flex-direction: column; line-height: 1.15; }
.okx-sym-text b { font-size: 17px; font-weight: 700; color: #ffffff; }
.okx-sym-text i { font-style: normal; font-size: 12px; color: #8a9099; }
.okx-quote { display: flex; align-items: baseline; gap: 12px; }
.okx-price { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #ffffff; }
/* The trading panel is always dark — keep all its text light regardless of theme. */
.okx-panel, .okx-panel-top, .okx-sym-text { color: #c9ced6; }
.okx-chg { font-size: 15px; font-weight: 700; color: #BCFF2F; font-variant-numeric: tabular-nums; }
.okx-chg.down { color: #f57a8a; }
.okx-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #8a9099; }
.okx-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #BCFF2F; box-shadow: 0 0 6px rgba(188,255,47,0.9); animation: okx-blink 1.6s ease-in-out infinite; }
@keyframes okx-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.okx-stats { display: flex; gap: 34px; margin-left: auto; }
.okx-stats > div { display: flex; flex-direction: column; gap: 3px; }
.okx-stats span { font-size: 11px; color: #767c86; }
.okx-stats b { font-size: 14px; font-weight: 600; color: #c9ced6; font-variant-numeric: tabular-nums; }
.okx-chartmount { height: 280px; margin-top: 10px; overflow: hidden; }
.okx-chartmount svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
 .okx-live-dot { animation: none; } 
}
@media (max-width: 820px) {
 .okx-stats { display: none; } .okx-live { display: none; } .okx-price { font-size: 22px; } .okx-chartmount { height: 220px; } 
}

.okx-section { max-width: 1180px; margin: 0 auto; padding: 28px 24px; }
.okx-section-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 6px; }
.okx-section-sub { opacity: 0.7; margin: 0 0 22px; }

@media (max-width: 900px) {

  .okx-hero { padding-top: 52px; }

}

/* ---------- Real-time streaming showcase (phone-mockup video) ---------- */
.okx-showcase {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 8px auto 0;
  padding: 40px 24px 64px;
}
.okx-showcase-copy p { opacity: 0.8; line-height: 1.6; margin: 0 0 22px; max-width: 46ch; }
.okx-showcase-media { display: flex; justify-content: center; }
.okx-showcase-media video {
  width: auto; max-width: 100%; max-height: 520px;
  border-radius: 20px; display: block;
}
@media (max-width: 900px) {

  .okx-showcase { grid-template-columns: 1fr; gap: 24px; }

}

/* Remove Fern's external-link icon on inline links. */
.fern-mdx-link .external-link-icon,
a .lucide-external-link { display: none !important; }

/* ============================================================
   OKX-style site footer (injected by footer.js into .fern-layout-footer)
   ============================================================ */
.okx-footer {
  font-family: "OKXSans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 28px 48px;   /* wider spread + smaller left indent, closer to OKX */
  color: var(--body-text, #c9ced6);
  text-align: left;
}
:is(.light,[data-theme="light"]) .okx-footer { color: #33373d; }
/* Values below mirror OKX's live footer computed styles. */
.okx-footer-logo { height: 26px; width: auto; margin-bottom: 20px; display: block; }
.okx-footer-legal { font-size: 14px; line-height: 18px; color: #6c6c6c; margin: 0; }
.okx-footer-lang {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 22px 0 44px; padding: 12px 14px;
  border: 1px solid var(--border, #2a2a2a); border-radius: 2px;
  font-size: 14px; font-weight: 500; cursor: default; width: max-content;
}
.okx-footer-globe { width: 16px; height: 16px; flex: none; }
/* White, block Register button (full column width, centered text) + centered QR
   + centered caption — matches OKX's .footer-download layout. */
.okx-footer-register {
  display: block; box-sizing: border-box;
  width: 100%; max-width: 200px;
  background: #fafafa; color: #0a0a0a !important;
  border-radius: 999px; padding: 15px 0; margin: 2px 0 0;
  font-size: 18px; font-weight: 700; text-align: center; text-decoration: none;
  transition: opacity .12s;
}
.okx-footer-register:hover { opacity: 0.88; color: #0a0a0a !important; }
.okx-footer-register:focus-visible { opacity: 0.88; color: #0a0a0a !important; outline: none;
}
.okx-footer-qr {
  display: block; width: 110px; height: 110px;
  /* center the QR under the button (within the button's max-width span) */
  margin: 24px 0 10px calc((min(100%, 200px) - 110px) / 2);
  background: #fff; border-radius: 2px;
}
.okx-footer-qr-cap {
  display: block; width: 100%; max-width: 200px;
  font-size: 14px; text-align: center; color: #c9ced6;
}
:is(.light,[data-theme="light"]) .okx-footer-qr-cap { color: #33373d; }
.okx-footer-cols {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px 24px;
}
.okx-footer-col h4 {
  font-size: 20px; line-height: 24px; font-weight: 500; margin: 0 0 18px; color: #fafafa;
}
:is(.light,[data-theme="light"]) .okx-footer-col h4 { color: #0a0a0a; }
.okx-footer-col h4:not(:first-child) { margin-top: 30px; }
.okx-footer-col a {
  display: block; font-size: 14px; line-height: 16px; margin-bottom: 16px;
  color: #909090; text-decoration: none; transition: color .12s;
}
.okx-footer-col a:hover { color: #BCFF2F; }
.okx-footer-col a:focus-visible { color: #BCFF2F; outline: none;
}
.okx-footer-community {
  display: flex; align-items: center; gap: 22px;
  margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--border, #1c1c1c);
}
.okx-footer-community h4 { font-size: 20px; font-weight: 700; margin: 0; color: #fafafa; }
:is(.light,[data-theme="light"]) .okx-footer-community h4 { color: #0a0a0a; }
.okx-footer-social { display: flex; gap: 18px; }
.okx-footer-social a { opacity: 0.6; transition: opacity .12s; display: inline-flex; }
.okx-footer-social a:hover { opacity: 1; }
.okx-footer-social a:focus-visible { opacity: 1; outline: none;
}
.okx-footer-social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 900px) {
 .okx-footer-cols { grid-template-columns: repeat(2, 1fr); } 
}

/* Full-bleed wrapper so the custom footer spans the whole page width.
   Uses calc(50% - 50vw) negative margins (scrollbar-safe — avoids the horizontal
   scroll that a raw 100vw causes when a vertical scrollbar is present). */
.okx-footer-wrap {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--background, #000);
  border-top: 1px solid var(--border, #1c1c1c);
}
/* Guard against any element causing a horizontal scrollbar on the docs pages. */
html, body { overflow-x: clip; }