/* Selected palette: minimal black and white. Original artwork retains its colors. */
:root {
  color-scheme: light;
  --bg: #f1f1f1; --surface: #ffffff; --ink: #181818; --muted: #5a5a5a;
  --subtle: #656565; --accent: #242424; --blue: #242424;
  --line: #c6c6c6; --theme-frame: #343434; --tint: #e9e9e9;
  --tint-strong: #dddddd; --field: #f7f7f7; --disabled: #777777;
  --theme-shadow: #00000009; --focus: #181818;
}
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--tint-strong); color: var(--ink); }
.page-shell { padding-bottom: 40px; }
.chef-masthead { justify-content: flex-start; gap: 22px; padding: 23px 0; min-height: 142px; border-bottom: 2px solid var(--line); }
.chef-logo { flex: 0 0 96px; width: 96px; height: 96px; object-fit: contain; border-radius: 0; }
.chef-brand-copy { min-width: 0; }
.chef-brand-name { margin: 0; color: var(--ink); font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.45; font-weight: 750; letter-spacing: -.03em; }
.chef-brand-description { margin: 6px 0 0; color: var(--accent); font-size: clamp(.9375rem, 1.6vw, 1.125rem); font-weight: 550; line-height: 1.7; }
.chef-rebate-promise { margin: 5px 0 0; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.7; }
.chef-rebate-promise strong { font-size: 1.125em; margin: 0 .15em; font-weight: 800; }
.intro { padding-top: 22px; padding-bottom: 20px; }
.crypto-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin-bottom: 18px; }
.rebate-brief { padding: 12px 17px; border: 1px solid #b8b8b8; border-radius: 9px; background: var(--surface); text-align: left; }
.brief-definition { margin: 0; color: var(--ink); font-size: .9375rem; line-height: 1.7; }
.brief-definition strong { font-weight: 700; }
.brief-example { margin: 5px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.85; }
.brief-example strong { color: var(--ink); font-weight: 700; }
.brief-example .brief-saved { white-space: nowrap; }
.brief-conditions { margin-top: 4px; }
.brief-conditions summary { display: inline-flex; gap: 5px; padding: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.brief-conditions .toggle { width: 17px; height: 17px; flex-basis: 17px; }
.brief-conditions .toggle:before, .brief-conditions .toggle:after { width: 7px; left: 5px; top: 8px; height: 1px; }
.brief-conditions p { margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.8; color: var(--muted); }
.rebate-explainer { text-align: left; padding: 27px 30px; background: var(--surface); border: 1px solid var(--theme-frame); border-radius: 14px; }
.rebate-explainer h2 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.rebate-definition { margin: 11px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.95; }
.rebate-definition strong { color: var(--ink); font-weight: 650; }
.rebate-example { margin-top: 22px; padding: 18px 22px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; }
.rebate-example > p { margin: 0 0 15px; color: var(--muted); font-size: .875rem; }
.rebate-calculation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; gap: 20px; }
.rebate-calculation > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.rebate-calculation dt { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.rebate-calculation dd { margin: 5px 0 0; color: var(--ink); font: 750 2rem/1.3 Arial, sans-serif; }
.rebate-calculation dd span { font-size: .8125rem; font-weight: 500; }
.rebate-note { margin: 14px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.fee-example h3 { margin: 0; color: var(--ink); font-size: 1.2rem; line-height: 1.65; font-weight: 700; }
.fee-example .fee-scenario { margin: 10px 0 7px; font-size: .9375rem; line-height: 1.85; }
.fee-example .fee-assumption { margin: 0 0 19px; font-size: .875rem; line-height: 1.8; }
.fee-comparison { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 0; }
.fee-comparison > div { padding: 19px 17px; background: var(--surface); border: 1px solid #a8a8a8; border-radius: 10px; }
.fee-comparison dt { font-size: .875rem; font-weight: 600; line-height: 1.6; color: var(--muted); }
.fee-comparison dd:not(.fee-caption) { margin: 10px 0 7px; font: 750 2.35rem/1.2 Arial,sans-serif; color: var(--ink); }
.fee-comparison dd span { display: block; margin-top: 7px; font: 400 .8125rem/1.5 var(--font); color: var(--muted); }
.fee-comparison .fee-caption { margin: 0; color: var(--muted); font: 400 .8125rem/1.7 var(--font); }
.fee-comparison .fee-saved { background: #202020; border-color: #202020; }
.fee-saved dt, .fee-comparison .fee-saved dd:not(.fee-caption), .fee-saved dd span, .fee-comparison .fee-saved .fee-caption { color: #fff; }
.fee-formula { display: grid; gap: 8px; margin-top: 19px; }
.fee-formula p { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; font-size: .875rem; color: var(--muted); }
.fee-formula strong { color: var(--ink); font-weight: 550; }
.fee-formula span { text-align: right; }
.fee-example .fee-settlement { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.85; }
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.exchange-group { --frame: var(--theme-frame); --soft: var(--tint); --brand: var(--accent); }
.exchange-card, .exchange-group .wallet-card { background: var(--surface); border: 3px solid var(--theme-frame); box-shadow: 0 6px 24px var(--theme-shadow); }
.exchange-grid { column-gap: 30px; row-gap: 38px; }
.exchange-group .wallet-card { margin-top: 26px; }
.rebate-explainer { border-width: 2px; }
.brand-banner h2 { font-size: 1.65rem; }
.wallet-card .brand-banner h3 { font-size: 1.75rem; }
.wallet-kind { display: block; margin-top: 5px; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.registration-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; padding: 16px; background: #202020; color: #fff; border: 2px solid #202020; border-radius: 10px; text-decoration: none; }
.registration-link-copy { min-width: 0; }
.registration-link strong { display: block; color: inherit; font-size: 1rem; font-weight: 650; line-height: 1.55; }
.registration-link small { display: block; margin-top: 4px; color: #dedede; font-size: .8125rem; line-height: 1.6; }
.registration-link-state { flex: 0 0 auto; padding: 6px 10px; border: 1px solid #7b7b7b; border-radius: 6px; font-size: .8125rem; }
.registration-link[aria-disabled="true"] { cursor: not-allowed; background: #e6e6e6; border-color: #a2a2a2; color: #565656; }
.registration-link[aria-disabled="true"] small { color: #636363; }
.registration-link[aria-disabled="true"] .registration-link-state { border-color: #aeaeae; }
.registration-link[href]:hover { background: #363636; }
.registration-link:focus-visible { outline: 3px solid #181818; outline-offset: 4px; }
.exchange-heading.brand-banner, .wallet-card .wallet-heading.brand-banner { background: var(--tint); border-color: var(--theme-frame); }
.exchange-card .download-part, .wallet-card .download-part { border-color: var(--theme-frame); }
.referral-notice { border-color: var(--theme-frame); background: var(--surface); }
.referral-reminder { background: var(--tint); border-color: var(--theme-frame); }
.rules-content { background: var(--surface); }
.placeholder-field, .wallet-card .placeholder-field { background: var(--field); border-color: var(--theme-frame); }
.placeholder-field button, .download-button { background: var(--tint); color: var(--disabled); border-color: var(--line); }
.download-button[href] { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; border-color: var(--ink); text-decoration: none; cursor: pointer; }
.download-button[href]:hover { background: #363636; }
.download-button[href]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.invite-code-field { border-style: solid; }
.invite-code { color: var(--ink); font-size: 1.125rem; font-weight: 750; letter-spacing: .08em; user-select: all; }
.invite-code-field button:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); cursor: pointer; }
.invite-code-field button:not(:disabled):hover { background: #363636; }
.invite-code-field button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pending-tag, .device-step { background: var(--tint); }
.pending-tag:empty { display: none; }
.download-option { background: var(--field); }
.platform-icon { background: var(--tint); border-color: var(--line); }
.part-icon, .download-part .part-icon, .wallet-card .part-icon { background: var(--tint-strong); color: var(--accent); }
.toggle { background: var(--tint-strong); }
.toggle:before, .toggle:after { background: var(--accent); }
.notice-label, .part-caption { font-size: .875rem; }
.crypto-item .logo-box.gate, .gate-card .brand-banner .exchange-logo { background: #fff; }
.crypto-item .logo-box { border-color: var(--theme-frame); }
@media (max-width: 1050px) and (min-width: 681px) {
  .brand-banner h2 { font-size: 1.25rem; }
  .wallet-card .brand-banner h3 { font-size: 1.4rem; }
  .wallet-kind { font-size: .875rem; }
}

@media (max-width: 680px) {
  .chef-masthead { gap: 15px; padding: 20px 0; min-height: 118px; }
  .chef-logo { flex-basis: 76px; width: 76px; height: 76px; }
  .chef-brand-name { font-size: 1.3rem; }
  .chef-brand-description { font-size: .875rem; margin-top: 5px; }
  .chef-rebate-promise { font-size: .875rem; margin-top: 3px; }
  .rebate-explainer { padding: 20px 18px; }
  .rebate-explainer h2 { font-size: 1.25rem; }
  .rebate-example { padding: 16px 14px; margin-top: 18px; }
  .rebate-calculation { gap: 12px; }
  .rebate-calculation > div + div { padding-left: 12px; }
  .rebate-calculation dt { font-size: .8125rem; }
  .rebate-calculation dd { font-size: 1.6rem; }
  .rebate-calculation dd span { display: block; font-size: .75rem; margin-top: 2px; }
  .fee-example h3 { font-size: 1.0625rem; }
  .fee-comparison { grid-template-columns: 1fr; gap: 10px; }
  .fee-comparison > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; padding: 15px; }
  .fee-comparison dd:not(.fee-caption) { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 1.8rem; text-align: right; }
  .fee-comparison dd span { font-size: .75rem; margin-top: 4px; }
  .fee-comparison .fee-caption { grid-column: 1; }
  .fee-formula p { display: block; }
  .fee-formula span { display: block; text-align: left; margin-top: 2px; }
  .part-caption { font-size: .8125rem; }
  .brand-banner h2 { font-size: 1.4rem; }
  .wallet-card .brand-banner h3 { font-size: 1.6rem; }
  .registration-link { padding: 13px; gap: 10px; }
  .registration-link strong { font-size: .9375rem; }
}
@media (max-width: 390px) {
  .chef-masthead { gap: 11px; }
  .chef-logo { flex-basis: 64px; width: 64px; height: 64px; }
  .chef-brand-name { font-size: 1.125rem; }
  .chef-brand-description { font-size: .875rem; }
  .exchange-heading.brand-banner, .wallet-card .wallet-heading.brand-banner { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding: 17px 12px; }
  .brand-banner .exchange-logo { width: 52px; height: 56px; }
  .okx-card .brand-banner .exchange-logo img, .okx-wallet-banner .exchange-logo img { width: 49px; }
  .brand-banner h2, .gate-card .brand-banner h2 { font-size: 1.05rem; }
  .brand-banner .exchange-english { font-size: .875rem; }
  .wallet-card .brand-banner h3 { font-size: 1.25rem; }
  .wallet-kind { font-size: .8125rem; }
}