/* ==========================================================================
   QuantDesk public site · design system · qd-site.css · v1.1 (2026-10-08)
   v1.1: adds the "classic" palette ([data-palette="classic"], §1b + §23) and
   the ?preview-only palette switcher (§24). Signature stays the default.
   --------------------------------------------------------------------------
   Brand carried over from quantdesk.html:51 (teal -> cyan -> violet gradient,
   Space Grotesk / Inter / JetBrains Mono). Product colours:
     Backtest = teal · LiveDesk = violet · US markets = blue · MCX = gold.
   Status chip colours mirror the LiveDesk app (quantdesk-livedesk.html
   statusOf() / ORD_COLOR / exec-pill) so screenshots and guides agree.
   Usage + rules: /site_v2/DESIGN.md. Every class is prefixed "qd-".
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. METRIC-MATCHED FALLBACK FACES
   Web fonts load with display=swap. These local fallbacks are sized to the
   real fonts (measured 2026-10-08) so the swap does not reflow text (CLS).
   -------------------------------------------------------------------------- */
@font-face{font-family:'QD Inter Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica Neue');font-weight:300 500;size-adjust:105.5%;ascent-override:92%;descent-override:22.8%;line-gap-override:0%}
@font-face{font-family:'QD Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Neue Bold');font-weight:600 900;size-adjust:100.75%;ascent-override:96.3%;descent-override:23.8%;line-gap-override:0%}
@font-face{font-family:'QD Display Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Neue Bold');font-weight:500 900;size-adjust:99.4%;ascent-override:98.6%;descent-override:29.2%;line-gap-override:0%}
@font-face{font-family:'QD Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');size-adjust:100.27%;ascent-override:101.7%;descent-override:29.9%;line-gap-override:0%}

/* --------------------------------------------------------------------------
   1. TOKENS
   Dark is the brand default; light follows the OS unless the visitor picked a
   theme (html[data-theme]). Storage key "qd_theme" is shared with LiveDesk.
   -------------------------------------------------------------------------- */
:root{
  /* type */
  --qd-font-display:'Space Grotesk','QD Display Fallback','Inter',system-ui,sans-serif;
  --qd-font-body:'Inter','QD Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --qd-font-mono:'JetBrains Mono','QD Mono Fallback',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --qd-fs-12:.75rem; --qd-fs-13:.8125rem; --qd-fs-14:.875rem; --qd-fs-15:.9375rem;
  --qd-fs-16:1rem; --qd-fs-17:1.0625rem; --qd-fs-18:1.125rem; --qd-fs-20:1.25rem;
  --qd-fs-h4:clamp(1.125rem,1.06rem + .28vw,1.25rem);
  --qd-fs-h3:clamp(1.25rem,1.12rem + .55vw,1.5rem);
  --qd-fs-h2:clamp(1.75rem,1.36rem + 1.6vw,2.625rem);
  --qd-fs-h1:clamp(2.125rem,1.5rem + 2.7vw,3.625rem);
  --qd-fs-display:clamp(2.5rem,1.55rem + 4.1vw,4.75rem);
  --qd-lh-tight:1.08; --qd-lh-snug:1.28; --qd-lh-body:1.65;
  /* space (4px grid) */
  --qd-sp-1:4px; --qd-sp-2:8px; --qd-sp-3:12px; --qd-sp-4:16px; --qd-sp-5:20px; --qd-sp-6:24px;
  --qd-sp-8:32px; --qd-sp-10:40px; --qd-sp-12:48px; --qd-sp-16:64px; --qd-sp-20:80px; --qd-sp-24:96px; --qd-sp-32:128px;
  /* radius */
  --qd-r-xs:6px; --qd-r-sm:8px; --qd-r-md:12px; --qd-r-lg:16px; --qd-r-xl:20px; --qd-r-2xl:28px; --qd-r-pill:999px;
  /* motion */
  --qd-ease-out:cubic-bezier(.22,1,.36,1);
  --qd-ease-in-out:cubic-bezier(.65,0,.35,1);
  --qd-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --qd-dur-1:120ms; --qd-dur-2:200ms; --qd-dur-3:320ms; --qd-dur-4:600ms; --qd-dur-5:900ms;
  /* layout */
  --qd-maxw:1240px; --qd-maxw-wide:1400px; --qd-maxw-prose:760px;
  --qd-gutter:clamp(16px,4vw,40px);
  --qd-header-h:64px;
  --qd-section-y:clamp(64px,8vw,112px);
  /* layers */
  --qd-z-fx:-1; --qd-z-header:50; --qd-z-mega:55; --qd-z-drawer:70; --qd-z-chat:80; --qd-z-lightbox:90; --qd-z-toast:95;
  /* chat bubble slot (reserved for the help chat) */
  --qd-chat-size:56px; --qd-chat-inset:20px;

  /* ---- DARK (default) ---- */
  color-scheme:dark;
  --qd-bg:#070a12; --qd-bg-2:#0a0e18;
  --qd-surface-1:#0b1019; --qd-surface-2:#111829; --qd-surface-3:#18213a;
  --qd-glass:rgba(255,255,255,.035); --qd-glass-2:rgba(255,255,255,.065);
  --qd-line:#1d2640; --qd-line-2:#2b3656; --qd-line-soft:rgba(255,255,255,.06);
  --qd-ink:#eef1f8; --qd-ink-body:#c6cede; --qd-ink-2:#9aa6c0; --qd-ink-3:#8490ad; --qd-ink-4:#5c6783;
  --qd-teal:#00e0b8; --qd-teal-2:#1ff0ca; --qd-cyan:#37c9ff; --qd-violet:#8b7bff;
  --qd-grad:linear-gradient(120deg,#00e0b8 0%,#37c9ff 45%,#8b7bff 100%);
  --qd-grad-text:var(--qd-grad);
  --qd-grad-soft:linear-gradient(120deg,rgba(0,224,184,.16),rgba(55,201,255,.08) 45%,rgba(139,123,255,.16));
  --qd-on-grad:#04121b;
  --qd-bt:#00e0b8; --qd-bt-ink:#2ee6c4; --qd-bt-soft:rgba(0,224,184,.10); --qd-bt-line:rgba(0,224,184,.34); --qd-bt-on:#04121b;
  --qd-ld:#8b7bff; --qd-ld-ink:#a99dff; --qd-ld-soft:rgba(139,123,255,.12); --qd-ld-line:rgba(139,123,255,.40); --qd-ld-on:#0b0726;
  --qd-us:#5aa9ff; --qd-us-ink:#7cbaff; --qd-us-soft:rgba(90,169,255,.12); --qd-us-line:rgba(90,169,255,.38); --qd-us-on:#04121b;
  --qd-mcx:#f5a623; --qd-mcx-ink:#ffbe55; --qd-mcx-soft:rgba(245,166,35,.12); --qd-mcx-line:rgba(245,166,35,.40); --qd-mcx-on:#1a1003;
  --qd-ok:#41d59b;   --qd-ok-soft:rgba(65,213,155,.12);   --qd-ok-line:rgba(65,213,155,.36);
  --qd-warn:#f5b54a; --qd-warn-soft:rgba(245,181,74,.12); --qd-warn-line:rgba(245,181,74,.38);
  --qd-err:#ff6b79;  --qd-err-soft:rgba(255,93,108,.13);  --qd-err-line:rgba(255,93,108,.40);
  --qd-info:#7cbaff; --qd-info-soft:rgba(90,169,255,.12); --qd-info-line:rgba(90,169,255,.36);
  --qd-cool:#a99dff; --qd-cool-soft:rgba(139,123,255,.13); --qd-cool-line:rgba(139,123,255,.38);
  --qd-muted:#9aa6c0; --qd-muted-soft:rgba(154,166,192,.10); --qd-muted-line:rgba(154,166,192,.28);
  --qd-shadow-1:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.035);
  --qd-shadow-2:0 14px 36px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04);
  --qd-shadow-3:0 30px 80px -24px rgba(0,0,0,.75);
  --qd-glow-bt:0 12px 38px -10px rgba(0,224,184,.42);
  --qd-glow-ld:0 12px 38px -10px rgba(139,123,255,.48);
  --qd-header-bg:rgba(7,10,18,.80);
  --qd-focus:#7cf3dc;
  --qd-overlay:rgba(3,5,10,.80);
  --qd-code-bg:#0a0f1a; --qd-code-ink:#dfe6f3; --qd-code-line:#1d2640;
  --qd-fx-opacity:.15; --qd-grid-line:rgba(255,255,255,.028);
  --qd-sun:inline-block; --qd-moon:none;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --qd-bg:#f5f7fb; --qd-bg-2:#eef2f8;
    --qd-surface-1:#ffffff; --qd-surface-2:#f2f5fa; --qd-surface-3:#e7ecf4;
    --qd-glass:rgba(255,255,255,.78); --qd-glass-2:#ffffff;
    --qd-line:#e1e6ef; --qd-line-2:#cbd3e1; --qd-line-soft:rgba(16,24,40,.06);
    --qd-ink:#0b1220; --qd-ink-body:#27324a; --qd-ink-2:#46526b; --qd-ink-3:#5b677f; --qd-ink-4:#98a2b5;
    --qd-teal:#00b896; --qd-teal-2:#00a383; --qd-cyan:#0a7cb8; --qd-violet:#6a55f0;
    --qd-grad-soft:linear-gradient(120deg,rgba(0,184,150,.12),rgba(55,201,255,.07) 45%,rgba(106,85,240,.12));
    --qd-grad-text:linear-gradient(120deg,#00866c 0%,#0a6fa8 45%,#5a45e0 100%);
    --qd-bt:#00b896; --qd-bt-ink:#00745d; --qd-bt-soft:rgba(0,168,138,.09); --qd-bt-line:rgba(0,150,122,.32); --qd-bt-on:#04121b;
    --qd-ld:#6a55f0; --qd-ld-ink:#5640d6; --qd-ld-soft:rgba(106,85,240,.08); --qd-ld-line:rgba(106,85,240,.32); --qd-ld-on:#ffffff;
    --qd-us:#2b7de0; --qd-us-ink:#1d64c4; --qd-us-soft:rgba(43,125,224,.08); --qd-us-line:rgba(43,125,224,.32); --qd-us-on:#ffffff;
    --qd-mcx:#d98a0b; --qd-mcx-ink:#94560a; --qd-mcx-soft:rgba(217,138,11,.10); --qd-mcx-line:rgba(217,138,11,.36); --qd-mcx-on:#1a1003;
    --qd-ok:#08784f;   --qd-ok-soft:rgba(8,140,90,.09);    --qd-ok-line:rgba(8,140,90,.30);
    --qd-warn:#8f5600; --qd-warn-soft:rgba(217,138,11,.12); --qd-warn-line:rgba(201,126,16,.36);
    --qd-err:#c8233f;  --qd-err-soft:rgba(200,35,63,.08);  --qd-err-line:rgba(200,35,63,.30);
    --qd-info:#1d64c4; --qd-info-soft:rgba(43,125,224,.08); --qd-info-line:rgba(43,125,224,.30);
    --qd-cool:#5640d6; --qd-cool-soft:rgba(106,85,240,.08); --qd-cool-line:rgba(106,85,240,.30);
    --qd-muted:#5b677f; --qd-muted-soft:rgba(91,103,127,.08); --qd-muted-line:rgba(91,103,127,.26);
    --qd-shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
    --qd-shadow-2:0 14px 34px -16px rgba(16,24,40,.20),0 2px 6px -2px rgba(16,24,40,.06);
    --qd-shadow-3:0 34px 80px -28px rgba(16,24,40,.30);
    --qd-glow-bt:0 12px 32px -12px rgba(0,168,138,.40);
    --qd-glow-ld:0 12px 32px -12px rgba(106,85,240,.40);
    --qd-header-bg:rgba(255,255,255,.84);
    --qd-focus:#0a7a64;
    --qd-overlay:rgba(10,15,28,.74);
    --qd-code-bg:#0f1626; --qd-code-ink:#e2e8f3; --qd-code-line:#0f1626;
    --qd-fx-opacity:.10; --qd-grid-line:rgba(16,24,40,.045);
    --qd-sun:none; --qd-moon:inline-block;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --qd-bg:#f5f7fb; --qd-bg-2:#eef2f8;
  --qd-surface-1:#ffffff; --qd-surface-2:#f2f5fa; --qd-surface-3:#e7ecf4;
  --qd-glass:rgba(255,255,255,.78); --qd-glass-2:#ffffff;
  --qd-line:#e1e6ef; --qd-line-2:#cbd3e1; --qd-line-soft:rgba(16,24,40,.06);
  --qd-ink:#0b1220; --qd-ink-body:#27324a; --qd-ink-2:#46526b; --qd-ink-3:#5b677f; --qd-ink-4:#98a2b5;
  --qd-teal:#00b896; --qd-teal-2:#00a383; --qd-cyan:#0a7cb8; --qd-violet:#6a55f0;
  --qd-grad-soft:linear-gradient(120deg,rgba(0,184,150,.12),rgba(55,201,255,.07) 45%,rgba(106,85,240,.12));
  --qd-grad-text:linear-gradient(120deg,#00866c 0%,#0a6fa8 45%,#5a45e0 100%);
  --qd-bt:#00b896; --qd-bt-ink:#00745d; --qd-bt-soft:rgba(0,168,138,.09); --qd-bt-line:rgba(0,150,122,.32); --qd-bt-on:#04121b;
  --qd-ld:#6a55f0; --qd-ld-ink:#5640d6; --qd-ld-soft:rgba(106,85,240,.08); --qd-ld-line:rgba(106,85,240,.32); --qd-ld-on:#ffffff;
  --qd-us:#2b7de0; --qd-us-ink:#1d64c4; --qd-us-soft:rgba(43,125,224,.08); --qd-us-line:rgba(43,125,224,.32); --qd-us-on:#ffffff;
  --qd-mcx:#d98a0b; --qd-mcx-ink:#94560a; --qd-mcx-soft:rgba(217,138,11,.10); --qd-mcx-line:rgba(217,138,11,.36); --qd-mcx-on:#1a1003;
  --qd-ok:#08784f;   --qd-ok-soft:rgba(8,140,90,.09);    --qd-ok-line:rgba(8,140,90,.30);
  --qd-warn:#8f5600; --qd-warn-soft:rgba(217,138,11,.12); --qd-warn-line:rgba(201,126,16,.36);
  --qd-err:#c8233f;  --qd-err-soft:rgba(200,35,63,.08);  --qd-err-line:rgba(200,35,63,.30);
  --qd-info:#1d64c4; --qd-info-soft:rgba(43,125,224,.08); --qd-info-line:rgba(43,125,224,.30);
  --qd-cool:#5640d6; --qd-cool-soft:rgba(106,85,240,.08); --qd-cool-line:rgba(106,85,240,.30);
  --qd-muted:#5b677f; --qd-muted-soft:rgba(91,103,127,.08); --qd-muted-line:rgba(91,103,127,.26);
  --qd-shadow-1:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
  --qd-shadow-2:0 14px 34px -16px rgba(16,24,40,.20),0 2px 6px -2px rgba(16,24,40,.06);
  --qd-shadow-3:0 34px 80px -28px rgba(16,24,40,.30);
  --qd-glow-bt:0 12px 32px -12px rgba(0,168,138,.40);
  --qd-glow-ld:0 12px 32px -12px rgba(106,85,240,.40);
  --qd-header-bg:rgba(255,255,255,.84);
  --qd-focus:#0a7a64;
  --qd-overlay:rgba(10,15,28,.74);
  --qd-code-bg:#0f1626; --qd-code-ink:#e2e8f3; --qd-code-line:#0f1626;
  --qd-fx-opacity:.10; --qd-grid-line:rgba(16,24,40,.045);
  --qd-sun:none; --qd-moon:inline-block;
}

/* --------------------------------------------------------------------------
   1b. CLASSIC PALETTE — <html data-palette="classic"> (v1.1, 2026-10-08)
   A second, timeless trading look: deep ink-navy surfaces, ivory text,
   restrained gold, market green / red, and a serif display face (Newsreader)
   paired with the same Inter UI sans. "Signature" (above) stays the default.
   Products in classic: Backtest = jade · LiveDesk = gold · US = steel blue ·
   MCX = copper. Every token is redefined so nothing leaks from signature.
   Contrast checked like signature (text >= 4.5:1 on bg, surfaces and chips).
   Order matters: these blocks must stay AFTER the signature light blocks.
   -------------------------------------------------------------------------- */
:root[data-palette="classic"]{
  --qd-font-display:'Newsreader','QD Serif Fallback',Georgia,'Times New Roman',serif;
  color-scheme:dark;
  --qd-bg:#0a0f1a; --qd-bg-2:#0c1220;
  --qd-surface-1:#0e1524; --qd-surface-2:#131b2d; --qd-surface-3:#1a2439;
  --qd-glass:rgba(244,236,216,.03); --qd-glass-2:rgba(244,236,216,.06);
  --qd-line:#1e283d; --qd-line-2:#2b3854; --qd-line-soft:rgba(244,236,216,.06);
  --qd-ink:#f4eedf; --qd-ink-body:#d8d1bf; --qd-ink-2:#b3ab97; --qd-ink-3:#9b9483; --qd-ink-4:#5f5b52;
  --qd-teal:#c9a45c; --qd-teal-2:#dcbd7c; --qd-cyan:#93b7ec; --qd-violet:#b2a6ea;
  --qd-grad:linear-gradient(120deg,#e3c584 0%,#c9a45c 52%,#a8823f 100%);
  --qd-grad-text:linear-gradient(120deg,#ecd29a 0%,#d9b673 55%,#c9a45c 100%);
  --qd-grad-soft:linear-gradient(120deg,rgba(201,164,92,.14),rgba(147,183,236,.05) 50%,rgba(201,164,92,.10));
  --qd-on-grad:#17110a;
  --qd-bt:#3dbb94; --qd-bt-ink:#6fd0b0; --qd-bt-soft:rgba(61,187,148,.10); --qd-bt-line:rgba(61,187,148,.36); --qd-bt-on:#06140f;
  --qd-ld:#c9a45c; --qd-ld-ink:#dcbd7c; --qd-ld-soft:rgba(201,164,92,.11); --qd-ld-line:rgba(201,164,92,.42); --qd-ld-on:#17110a;
  --qd-us:#6b9be0; --qd-us-ink:#93b7ec; --qd-us-soft:rgba(107,155,224,.11); --qd-us-line:rgba(107,155,224,.38); --qd-us-on:#06101c;
  --qd-mcx:#d07f45; --qd-mcx-ink:#e59a66; --qd-mcx-soft:rgba(208,127,69,.11); --qd-mcx-line:rgba(208,127,69,.40); --qd-mcx-on:#1a0d04;
  --qd-ok:#4cc38a;   --qd-ok-soft:rgba(76,195,138,.11);   --qd-ok-line:rgba(76,195,138,.36);
  --qd-warn:#e2b354; --qd-warn-soft:rgba(226,179,84,.11); --qd-warn-line:rgba(226,179,84,.38);
  --qd-err:#ef6461;  --qd-err-soft:rgba(239,100,97,.12);  --qd-err-line:rgba(239,100,97,.40);
  --qd-info:#93b7ec; --qd-info-soft:rgba(107,155,224,.11); --qd-info-line:rgba(107,155,224,.36);
  --qd-cool:#b2a6ea; --qd-cool-soft:rgba(178,166,234,.11); --qd-cool-line:rgba(178,166,234,.36);
  --qd-muted:#a39d8e; --qd-muted-soft:rgba(163,157,142,.10); --qd-muted-line:rgba(163,157,142,.28);
  --qd-shadow-1:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(244,236,216,.035);
  --qd-shadow-2:0 14px 36px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(244,236,216,.04);
  --qd-shadow-3:0 30px 80px -24px rgba(0,0,0,.75);
  --qd-glow-bt:0 12px 38px -12px rgba(61,187,148,.36);
  --qd-glow-ld:0 12px 38px -12px rgba(201,164,92,.40);
  --qd-header-bg:rgba(10,15,26,.82);
  --qd-focus:#e3c584;
  --qd-overlay:rgba(4,6,12,.80);
  --qd-code-bg:#0b111d; --qd-code-ink:#e6e0d1; --qd-code-line:#1e283d;
  --qd-fx-opacity:.09; --qd-grid-line:rgba(244,236,216,.024);
  --qd-sun:inline-block; --qd-moon:none;
}
@media (prefers-color-scheme:light){
  :root[data-palette="classic"]:not([data-theme="dark"]){
    color-scheme:light;
    --qd-bg:#f6f1e7; --qd-bg-2:#efe8da;
    --qd-surface-1:#fffdf7; --qd-surface-2:#f4eee2; --qd-surface-3:#e9e1d0;
    --qd-glass:rgba(255,253,247,.80); --qd-glass-2:#fffdf7;
    --qd-line:#e3dac8; --qd-line-2:#cfc3ab; --qd-line-soft:rgba(30,26,18,.06);
    --qd-ink:#121a2b; --qd-ink-body:#2b3346; --qd-ink-2:#4a5163; --qd-ink-3:#5c6271; --qd-ink-4:#a39c8c;
    --qd-teal:#a8802f; --qd-teal-2:#8a6620; --qd-cyan:#2c6cc4; --qd-violet:#5440b8;
    --qd-grad:linear-gradient(120deg,#e2c579 0%,#cfa955 52%,#b8913f 100%);
    --qd-grad-text:linear-gradient(120deg,#7a5a17 0%,#6a4c10 60%,#7a5a17 100%);
    --qd-grad-soft:linear-gradient(120deg,rgba(168,128,47,.12),rgba(44,108,196,.05) 50%,rgba(168,128,47,.08));
    --qd-on-grad:#17110a;
    --qd-bt:#0e7c60; --qd-bt-ink:#0b6650; --qd-bt-soft:rgba(14,124,96,.08); --qd-bt-line:rgba(14,124,96,.30); --qd-bt-on:#ffffff;
    --qd-ld:#a8802f; --qd-ld-ink:#7a5a17; --qd-ld-soft:rgba(168,128,47,.10); --qd-ld-line:rgba(168,128,47,.36); --qd-ld-on:#17110a;
    --qd-us:#2c6cc4; --qd-us-ink:#1f56a6; --qd-us-soft:rgba(44,108,196,.08); --qd-us-line:rgba(44,108,196,.32); --qd-us-on:#ffffff;
    --qd-mcx:#a5571f; --qd-mcx-ink:#8c4718; --qd-mcx-soft:rgba(165,87,31,.09); --qd-mcx-line:rgba(165,87,31,.34); --qd-mcx-on:#ffffff;
    --qd-ok:#0b7346;   --qd-ok-soft:rgba(11,115,70,.08);    --qd-ok-line:rgba(11,115,70,.30);
    --qd-warn:#835500; --qd-warn-soft:rgba(168,128,47,.12); --qd-warn-line:rgba(160,112,20,.36);
    --qd-err:#b3252b;  --qd-err-soft:rgba(179,37,43,.08);   --qd-err-line:rgba(179,37,43,.30);
    --qd-info:#1f56a6; --qd-info-soft:rgba(44,108,196,.08); --qd-info-line:rgba(44,108,196,.30);
    --qd-cool:#5440b8; --qd-cool-soft:rgba(84,64,184,.08);  --qd-cool-line:rgba(84,64,184,.30);
    --qd-muted:#5c6271; --qd-muted-soft:rgba(92,98,113,.08); --qd-muted-line:rgba(92,98,113,.26);
    --qd-shadow-1:0 1px 2px rgba(40,32,16,.06),0 1px 1px rgba(40,32,16,.04);
    --qd-shadow-2:0 14px 34px -16px rgba(40,32,16,.20),0 2px 6px -2px rgba(40,32,16,.06);
    --qd-shadow-3:0 34px 80px -28px rgba(40,32,16,.28);
    --qd-glow-bt:0 12px 32px -12px rgba(14,124,96,.36);
    --qd-glow-ld:0 12px 32px -12px rgba(168,128,47,.40);
    --qd-header-bg:rgba(246,241,231,.86);
    --qd-focus:#7a5a17;
    --qd-overlay:rgba(18,26,43,.72);
    --qd-code-bg:#121a2b; --qd-code-ink:#ece6d8; --qd-code-line:#121a2b;
    --qd-fx-opacity:.08; --qd-grid-line:rgba(30,26,18,.045);
    --qd-sun:none; --qd-moon:inline-block;
  }
}
:root[data-palette="classic"][data-theme="light"]{
  color-scheme:light;
  --qd-bg:#f6f1e7; --qd-bg-2:#efe8da;
  --qd-surface-1:#fffdf7; --qd-surface-2:#f4eee2; --qd-surface-3:#e9e1d0;
  --qd-glass:rgba(255,253,247,.80); --qd-glass-2:#fffdf7;
  --qd-line:#e3dac8; --qd-line-2:#cfc3ab; --qd-line-soft:rgba(30,26,18,.06);
  --qd-ink:#121a2b; --qd-ink-body:#2b3346; --qd-ink-2:#4a5163; --qd-ink-3:#5c6271; --qd-ink-4:#a39c8c;
  --qd-teal:#a8802f; --qd-teal-2:#8a6620; --qd-cyan:#2c6cc4; --qd-violet:#5440b8;
  --qd-grad:linear-gradient(120deg,#e2c579 0%,#cfa955 52%,#b8913f 100%);
  --qd-grad-text:linear-gradient(120deg,#7a5a17 0%,#6a4c10 60%,#7a5a17 100%);
  --qd-grad-soft:linear-gradient(120deg,rgba(168,128,47,.12),rgba(44,108,196,.05) 50%,rgba(168,128,47,.08));
  --qd-on-grad:#17110a;
  --qd-bt:#0e7c60; --qd-bt-ink:#0b6650; --qd-bt-soft:rgba(14,124,96,.08); --qd-bt-line:rgba(14,124,96,.30); --qd-bt-on:#ffffff;
  --qd-ld:#a8802f; --qd-ld-ink:#7a5a17; --qd-ld-soft:rgba(168,128,47,.10); --qd-ld-line:rgba(168,128,47,.36); --qd-ld-on:#17110a;
  --qd-us:#2c6cc4; --qd-us-ink:#1f56a6; --qd-us-soft:rgba(44,108,196,.08); --qd-us-line:rgba(44,108,196,.32); --qd-us-on:#ffffff;
  --qd-mcx:#a5571f; --qd-mcx-ink:#8c4718; --qd-mcx-soft:rgba(165,87,31,.09); --qd-mcx-line:rgba(165,87,31,.34); --qd-mcx-on:#ffffff;
  --qd-ok:#0b7346;   --qd-ok-soft:rgba(11,115,70,.08);    --qd-ok-line:rgba(11,115,70,.30);
  --qd-warn:#835500; --qd-warn-soft:rgba(168,128,47,.12); --qd-warn-line:rgba(160,112,20,.36);
  --qd-err:#b3252b;  --qd-err-soft:rgba(179,37,43,.08);   --qd-err-line:rgba(179,37,43,.30);
  --qd-info:#1f56a6; --qd-info-soft:rgba(44,108,196,.08); --qd-info-line:rgba(44,108,196,.30);
  --qd-cool:#5440b8; --qd-cool-soft:rgba(84,64,184,.08);  --qd-cool-line:rgba(84,64,184,.30);
  --qd-muted:#5c6271; --qd-muted-soft:rgba(92,98,113,.08); --qd-muted-line:rgba(92,98,113,.26);
  --qd-shadow-1:0 1px 2px rgba(40,32,16,.06),0 1px 1px rgba(40,32,16,.04);
  --qd-shadow-2:0 14px 34px -16px rgba(40,32,16,.20),0 2px 6px -2px rgba(40,32,16,.06);
  --qd-shadow-3:0 34px 80px -28px rgba(40,32,16,.28);
  --qd-glow-bt:0 12px 32px -12px rgba(14,124,96,.36);
  --qd-glow-ld:0 12px 32px -12px rgba(168,128,47,.40);
  --qd-header-bg:rgba(246,241,231,.86);
  --qd-focus:#7a5a17;
  --qd-overlay:rgba(18,26,43,.72);
  --qd-code-bg:#121a2b; --qd-code-ink:#ece6d8; --qd-code-line:#121a2b;
  --qd-fx-opacity:.08; --qd-grid-line:rgba(30,26,18,.045);
  --qd-sun:none; --qd-moon:inline-block;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--qd-header-h) + 20px);scrollbar-gutter:stable}
body{margin:0;min-height:100vh;background:var(--qd-bg);color:var(--qd-ink);font-family:var(--qd-font-body);font-size:var(--qd-fs-16);line-height:var(--qd-lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color var(--qd-dur-3) var(--qd-ease-out),color var(--qd-dur-3) var(--qd-ease-out)}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--qd-font-display);font-weight:600;letter-spacing:-.02em;line-height:var(--qd-lh-snug);color:var(--qd-ink);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,video{max-width:100%;height:auto}
img{border:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:rgba(0,224,184,.28);color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--qd-focus);outline-offset:3px;border-radius:6px}
code,kbd,pre,samp,.qd-mono,.qd-chip,.qd-badge,.qd-inline-copy,.qd-shot__url{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
svg.qd-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}

/* --------------------------------------------------------------------------
   3. LAYOUT + UTILITIES
   -------------------------------------------------------------------------- */
.qd-container{width:100%;max-width:calc(var(--qd-maxw) + 2 * var(--qd-gutter));margin-inline:auto;padding-inline:var(--qd-gutter)}
.qd-container--wide{max-width:calc(var(--qd-maxw-wide) + 2 * var(--qd-gutter))}
.qd-container--prose{max-width:calc(var(--qd-maxw-prose) + 2 * var(--qd-gutter))}
.qd-section{position:relative;padding-block:var(--qd-section-y)}
.qd-section--tight{padding-block:clamp(40px,5vw,64px)}
.qd-section--alt{background:linear-gradient(180deg,transparent,var(--qd-bg-2) 18%,var(--qd-bg-2) 82%,transparent)}
.qd-section-head{max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.qd-section-head--center{margin-inline:auto;text-align:center}
.qd-section-head h2{font-size:var(--qd-fs-h2);line-height:var(--qd-lh-tight)}
.qd-section-head p{margin-top:16px;font-size:var(--qd-fs-18);color:var(--qd-ink-2)}
.qd-section-head .qd-eyebrow{margin-bottom:18px}

.qd-grid{--qd-cols:3;--qd-gap:24px;display:grid;gap:var(--qd-gap);grid-template-columns:repeat(var(--qd-cols),minmax(0,1fr))}
.qd-grid--2{--qd-cols:2}.qd-grid--3{--qd-cols:3}.qd-grid--4{--qd-cols:4}.qd-grid--5{--qd-cols:5}.qd-grid--6{--qd-cols:6}
.qd-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(var(--qd-min,260px),100%),1fr))}
.qd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.qd-split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.qd-split--wide-right{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.qd-stack{display:flex;flex-direction:column;gap:var(--qd-gap,16px)}
.qd-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--qd-gap,12px)}
@media (max-width:1023.98px){
  .qd-grid--4,.qd-grid--5,.qd-grid--6{--qd-cols:2}
  .qd-grid--3{--qd-cols:2}
  .qd-split,.qd-split--wide-left,.qd-split--wide-right{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:639.98px){
  .qd-grid--2,.qd-grid--3,.qd-grid--4,.qd-grid--5{--qd-cols:1}
  .qd-grid--6{--qd-cols:2}
}
.qd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.qd-mono{font-family:var(--qd-font-mono);font-variant-numeric:tabular-nums}
.qd-num{font-variant-numeric:tabular-nums}
.qd-grad-text{background:var(--qd-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qd-muted{color:var(--qd-ink-2)}
.qd-dim{color:var(--qd-ink-3)}
.qd-center{text-align:center}
.qd-lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--qd-ink-2)}
.qd-divider{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--qd-line-2),transparent)}
@media (max-width:639.98px){.qd-hide-sm{display:none!important}}
@media (min-width:640px){.qd-show-sm{display:none!important}}

/* skip link */
.qd-skip{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 16px;border-radius:var(--qd-r-sm);background:var(--qd-surface-1);color:var(--qd-ink);border:1px solid var(--qd-line-2);font-weight:600;text-decoration:none;transition:top var(--qd-dur-2) var(--qd-ease-out)}
.qd-skip:focus{top:12px}

/* page background effects (aurora + grid) — optional, put <div class="qd-fx" aria-hidden="true"> first in <body> */
.qd-fx{position:fixed;inset:0;z-index:var(--qd-z-fx);overflow:hidden;pointer-events:none;contain:strict}
.qd-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--qd-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--qd-grid-line) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%)}
.qd-fx span{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--qd-fx-opacity);will-change:transform}
.qd-fx .qd-fx__a{width:540px;height:540px;background:#00e0b8;top:-160px;left:-120px;animation:qd-drift-a 28s ease-in-out infinite alternate}
.qd-fx .qd-fx__b{width:500px;height:500px;background:#8b7bff;top:6%;right:-160px;animation:qd-drift-b 32s ease-in-out infinite alternate}
.qd-fx .qd-fx__c{width:440px;height:440px;background:#37c9ff;bottom:-180px;left:32%;animation:qd-drift-a 36s ease-in-out infinite alternate}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.qd-display{font-family:var(--qd-font-display);font-size:var(--qd-fs-display);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.qd-h1,.qd-h2,.qd-h3,.qd-h4{font-family:var(--qd-font-display);font-weight:600;letter-spacing:-.02em;color:var(--qd-ink);line-height:var(--qd-lh-snug)}
.qd-h1{font-size:var(--qd-fs-h1);line-height:var(--qd-lh-tight);letter-spacing:-.03em}
.qd-h2{font-size:var(--qd-fs-h2);line-height:var(--qd-lh-tight)}
.qd-h3{font-size:var(--qd-fs-h3)}
.qd-h4{font-size:var(--qd-fs-h4)}
.qd-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--qd-r-pill);font:600 var(--qd-fs-12)/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--qd-bt-ink);background:var(--qd-bt-soft);border:1px solid var(--qd-bt-line)}
.qd-eyebrow--ld{color:var(--qd-ld-ink);background:var(--qd-ld-soft);border-color:var(--qd-ld-line)}
.qd-eyebrow--us{color:var(--qd-us-ink);background:var(--qd-us-soft);border-color:var(--qd-us-line)}
.qd-eyebrow--neutral{color:var(--qd-ink-2);background:var(--qd-glass);border-color:var(--qd-line-2)}
.qd-link{color:var(--qd-bt-ink);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size var(--qd-dur-3) var(--qd-ease-out)}
.qd-link:hover{background-size:100% 1.5px}
.qd-link--ld{color:var(--qd-ld-ink)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.qd-btn{--qd-btn-h:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--qd-btn-h);padding:0 20px;border-radius:var(--qd-r-md);border:1px solid transparent;font:600 var(--qd-fs-15)/1 var(--qd-font-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform var(--qd-dur-2) var(--qd-ease-out),box-shadow var(--qd-dur-2) var(--qd-ease-out),background-color var(--qd-dur-2),border-color var(--qd-dur-2),color var(--qd-dur-2)}
.qd-btn:active{transform:translateY(0) scale(.98)}
.qd-btn[disabled],.qd-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.qd-btn .qd-i{font-size:1.1em}
.qd-btn__arrow{transition:transform var(--qd-dur-3) var(--qd-ease-spring)}
.qd-btn:hover .qd-btn__arrow{transform:translateX(3px)}
/* shine sweep */
.qd-btn--primary::after,.qd-btn--bt::after,.qd-btn--ld::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;transform:skewX(-20deg) translateX(0);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);opacity:0;pointer-events:none}
.qd-btn--primary:hover::after,.qd-btn--bt:hover::after,.qd-btn--ld:hover::after{animation:qd-shine .9s var(--qd-ease-out)}
.qd-btn--primary{background:var(--qd-grad);color:var(--qd-on-grad);box-shadow:0 8px 28px -8px rgba(0,224,184,.45)}
.qd-btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -10px rgba(0,224,184,.55)}
.qd-btn--bt{background:var(--qd-bt);color:var(--qd-bt-on);box-shadow:var(--qd-glow-bt)}
.qd-btn--bt:hover{transform:translateY(-2px)}
.qd-btn--ld{background:var(--qd-ld);color:var(--qd-ld-on);box-shadow:var(--qd-glow-ld)}
.qd-btn--ld:hover{transform:translateY(-2px)}
.qd-btn--ghost{background:transparent;color:var(--qd-ink);border-color:var(--qd-line-2)}
.qd-btn--ghost:hover{border-color:var(--qd-bt-line);background:var(--qd-bt-soft);color:var(--qd-ink);transform:translateY(-2px)}
.qd-btn--subtle{background:var(--qd-surface-2);color:var(--qd-ink);border-color:var(--qd-line)}
.qd-btn--subtle:hover{background:var(--qd-surface-3)}
.qd-btn--text{min-height:auto;padding:4px 2px;background:none;color:var(--qd-bt-ink);border-radius:var(--qd-r-xs)}
.qd-btn--text:hover{color:var(--qd-ink)}
.qd-btn--sm{--qd-btn-h:36px;padding:0 14px;font-size:var(--qd-fs-14);border-radius:10px}
.qd-btn--lg{--qd-btn-h:54px;padding:0 28px;font-size:var(--qd-fs-16);border-radius:14px}
.qd-btn--block{display:flex;width:100%}
.qd-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;border:1px solid var(--qd-line);background:var(--qd-glass);color:var(--qd-ink-2);cursor:pointer;transition:color var(--qd-dur-2),background-color var(--qd-dur-2),border-color var(--qd-dur-2)}
.qd-icon-btn:hover{color:var(--qd-ink);border-color:var(--qd-line-2);background:var(--qd-glass-2)}
.qd-icon-btn .qd-i{font-size:18px}
.qd-i-sun{display:var(--qd-sun)}.qd-i-moon{display:var(--qd-moon)}

/* --------------------------------------------------------------------------
   6. BADGES, DOTS, PRODUCT MARKERS
   -------------------------------------------------------------------------- */
.qd-badge{--b:var(--qd-ink-2);--b-soft:var(--qd-glass);--b-line:var(--qd-line-2);display:inline-flex;align-items:center;gap:6px;height:24px;max-width:100%;padding:0 10px;border-radius:var(--qd-r-pill);font:600 11px/1 var(--qd-font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--b);background:var(--b-soft);border:1px solid var(--b-line);vertical-align:middle}
.qd-badge--bt{--b:var(--qd-bt-ink);--b-soft:var(--qd-bt-soft);--b-line:var(--qd-bt-line)}
.qd-badge--ld{--b:var(--qd-ld-ink);--b-soft:var(--qd-ld-soft);--b-line:var(--qd-ld-line)}
.qd-badge--us{--b:var(--qd-us-ink);--b-soft:var(--qd-us-soft);--b-line:var(--qd-us-line)}
.qd-badge--mcx{--b:var(--qd-mcx-ink);--b-soft:var(--qd-mcx-soft);--b-line:var(--qd-mcx-line)}
.qd-badge--ok{--b:var(--qd-ok);--b-soft:var(--qd-ok-soft);--b-line:var(--qd-ok-line)}
.qd-badge--warn{--b:var(--qd-warn);--b-soft:var(--qd-warn-soft);--b-line:var(--qd-warn-line)}
.qd-badge--new{color:var(--qd-on-grad);background:var(--qd-grad);border-color:transparent}
.qd-badge--lg{height:30px;padding:0 14px;font-size:12px}
.qd-badge--wrap{height:auto;min-height:24px;padding-block:5px;white-space:normal;line-height:1.35;letter-spacing:.06em}
.qd-badge .qd-dot{width:6px;height:6px}
.qd-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--qd-ink-3);flex:none}
.qd-dot--bt{background:var(--qd-bt)}.qd-dot--ld{background:var(--qd-ld)}.qd-dot--us{background:var(--qd-us)}.qd-dot--mcx{background:var(--qd-mcx)}
.qd-dot--live{background:var(--qd-ok);box-shadow:0 0 0 0 var(--qd-ok-line);animation:qd-ping 2s var(--qd-ease-out) infinite}
.qd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
.qd-meta > *{display:inline-flex;align-items:center;gap:6px}

/* --------------------------------------------------------------------------
   7. HEADER, MEGA MENU, MOBILE DRAWER
   -------------------------------------------------------------------------- */
.qd-header{position:sticky;top:0;z-index:var(--qd-z-header);height:var(--qd-header-h);background:var(--qd-header-bg);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--qd-dur-3),box-shadow var(--qd-dur-3),background-color var(--qd-dur-3)}
.qd-header.is-scrolled{border-bottom-color:var(--qd-line);box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
.qd-header__inner{display:flex;align-items:center;gap:20px;height:100%}
.qd-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--qd-ink);flex:none;border-radius:10px}
.qd-brand__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--qd-grad);color:var(--qd-on-grad);font:800 17px/1 var(--qd-font-display);box-shadow:0 6px 20px -4px rgba(0,224,184,.45)}
.qd-brand__name{font:700 18px/1 var(--qd-font-display);letter-spacing:-.02em}
.qd-brand__by{font:500 11px/1 var(--qd-font-mono);letter-spacing:.06em;color:var(--qd-ink-3);padding:4px 7px;border:1px solid var(--qd-line);border-radius:6px}
.qd-nav{margin-left:8px}
.qd-nav__list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.qd-nav__link{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--qd-ink-2);font:500 var(--qd-fs-14)/1 var(--qd-font-body);text-decoration:none;white-space:nowrap;transition:color var(--qd-dur-2),background-color var(--qd-dur-2)}
.qd-nav__link:hover,.qd-nav__link[aria-expanded="true"]{color:var(--qd-ink);background:var(--qd-glass-2)}
.qd-nav__link[aria-current]{color:var(--qd-ink)}
.qd-nav__link[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--qd-grad)}
.qd-nav__link .qd-chev{width:14px;height:14px;transition:transform var(--qd-dur-3) var(--qd-ease-out)}
.qd-nav__link[aria-expanded="true"] .qd-chev{transform:rotate(180deg)}
.qd-header__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.qd-burger{display:none}
.qd-burger .qd-i-close{display:none}
.qd-burger[aria-expanded="true"] .qd-i-menu{display:none}
.qd-burger[aria-expanded="true"] .qd-i-close{display:inline-block}

/* mega panel (anchored to the header) */
.qd-mega{position:absolute;left:0;right:0;top:100%;z-index:var(--qd-z-mega);background:var(--qd-surface-1);border-top:1px solid var(--qd-line);border-bottom:1px solid var(--qd-line);box-shadow:var(--qd-shadow-3);animation:qd-drop var(--qd-dur-3) var(--qd-ease-out)}
.qd-mega__inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:28px;padding-block:28px 32px}
.qd-mega__title{margin:0 0 10px;padding-left:12px;font:600 11px/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-mega__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.qd-mega__link{display:grid;grid-template-columns:34px 1fr;gap:2px 12px;align-items:start;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--qd-ink);transition:background-color var(--qd-dur-2)}
.qd-mega__link:hover{background:var(--qd-glass-2)}
.qd-mega__ico{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--qd-surface-2);border:1px solid var(--qd-line);color:var(--qd-ink-2);font-size:17px}
.qd-mega__ico--bt{color:var(--qd-bt-ink);background:var(--qd-bt-soft);border-color:var(--qd-bt-line)}
.qd-mega__ico--ld{color:var(--qd-ld-ink);background:var(--qd-ld-soft);border-color:var(--qd-ld-line)}
.qd-mega__ico--us{color:var(--qd-us-ink);background:var(--qd-us-soft);border-color:var(--qd-us-line)}
.qd-mega__ico--mcx{color:var(--qd-mcx-ink);background:var(--qd-mcx-soft);border-color:var(--qd-mcx-line)}
.qd-mega__name{font:600 var(--qd-fs-14)/1.3 var(--qd-font-body)}
.qd-mega__desc{font-size:var(--qd-fs-13);line-height:1.45;color:var(--qd-ink-3)}
.qd-mega__promo{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--qd-r-lg);background:var(--qd-grad-soft);border:1px solid var(--qd-line-2)}
.qd-mega__promo > .qd-badge{align-self:flex-start}
.qd-mega__promo h3{font-size:var(--qd-fs-18)}
.qd-mega__promo p{font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-mega__promo .qd-btn{align-self:flex-start;margin-top:auto}

/* mobile drawer */
.qd-drawer{position:fixed;left:0;right:0;top:var(--qd-header-h);bottom:0;z-index:var(--qd-z-drawer);overflow-y:auto;overscroll-behavior:contain;background:var(--qd-bg);border-top:1px solid var(--qd-line);padding:12px var(--qd-gutter) calc(32px + env(safe-area-inset-bottom));animation:qd-drawer-in var(--qd-dur-3) var(--qd-ease-out)}
.qd-drawer__group{padding:14px 0;border-bottom:1px solid var(--qd-line)}
.qd-drawer__group:last-of-type{border-bottom:0}
.qd-drawer__title{margin:0 0 6px;font:600 11px/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-drawer__link{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 4px;color:var(--qd-ink);font:600 var(--qd-fs-17)/1.2 var(--qd-font-body);text-decoration:none;border-radius:10px}
.qd-drawer__link small{margin-left:auto;font:500 var(--qd-fs-13) var(--qd-font-body);color:var(--qd-ink-3)}
.qd-drawer__cta{display:grid;gap:10px;margin-top:16px}
/* scroll lock: html only — overflow on <body> would make body the scroller and break the sticky header */
html.qd-lock{overflow:hidden}

@media (max-width:1079.98px){
  .qd-nav{display:none}
  .qd-burger{display:inline-grid}
  .qd-mega{display:none}
}
@media (max-width:639.98px){
  :root{--qd-header-h:58px}
  .qd-brand__by{display:none}
  .qd-brand__name{font-size:17px}
  .qd-header__actions{gap:8px}
  .qd-header__actions .qd-btn{padding:0 12px}
  .qd-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--qd-bg)}
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.qd-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,28px);border-radius:var(--qd-r-xl);background:var(--qd-glass);border:1px solid var(--qd-line);box-shadow:var(--qd-shadow-1);transition:transform var(--qd-dur-3) var(--qd-ease-out),border-color var(--qd-dur-3),box-shadow var(--qd-dur-3)}
.qd-card h3{font-size:var(--qd-fs-h4)}
.qd-card p{color:var(--qd-ink-2);font-size:var(--qd-fs-15)}
a.qd-card{text-decoration:none;color:inherit}
.qd-card--hover:hover,a.qd-card:hover{transform:translateY(-4px);border-color:var(--qd-line-2);box-shadow:var(--qd-shadow-2)}
.qd-card--solid{background:var(--qd-surface-1)}
.qd-card--bt{--accent:var(--qd-bt)}
.qd-card--ld{--accent:var(--qd-ld)}
.qd-card--us{--accent:var(--qd-us)}
.qd-card--mcx{--accent:var(--qd-mcx)}
.qd-card--bt::before,.qd-card--ld::before,.qd-card--us::before,.qd-card--mcx::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.9}
.qd-card--bt:hover{border-color:var(--qd-bt-line)}
.qd-card--ld:hover{border-color:var(--qd-ld-line)}
.qd-card--us:hover{border-color:var(--qd-us-line)}
.qd-card--mcx:hover{border-color:var(--qd-mcx-line)}
.qd-card__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font-size:21px;color:var(--qd-ink);background:var(--qd-surface-2);border:1px solid var(--qd-line-2)}
.qd-card--bt .qd-card__icon{color:var(--qd-bt-ink);background:var(--qd-bt-soft);border-color:var(--qd-bt-line)}
.qd-card--ld .qd-card__icon{color:var(--qd-ld-ink);background:var(--qd-ld-soft);border-color:var(--qd-ld-line)}
.qd-card--us .qd-card__icon{color:var(--qd-us-ink);background:var(--qd-us-soft);border-color:var(--qd-us-line)}
.qd-card--mcx .qd-card__icon{color:var(--qd-mcx-ink);background:var(--qd-mcx-soft);border-color:var(--qd-mcx-line)}
.qd-card__foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:10px;font-size:var(--qd-fs-14);color:var(--qd-ink-3)}
/* animated gradient border — use once or twice per page */
@property --qd-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.qd-card--glow{border-color:transparent;background:linear-gradient(var(--qd-surface-1),var(--qd-surface-1)) padding-box,conic-gradient(from var(--qd-angle),var(--qd-line-2) 0deg,var(--qd-line-2) 60deg,var(--qd-teal) 120deg,var(--qd-violet) 170deg,var(--qd-line-2) 230deg,var(--qd-line-2) 360deg) border-box;animation:qd-spin 8s linear infinite}
/* product duo: Backtest | LiveDesk given equal weight */
.qd-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.qd-duo > .qd-card{padding:clamp(24px,3vw,40px)}
.qd-duo .qd-card h3{font-size:var(--qd-fs-h3)}
@media (max-width:767.98px){.qd-duo{grid-template-columns:minmax(0,1fr)}}
.qd-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--qd-fs-15);color:var(--qd-ink-2)}
.qd-checks li{position:relative;padding-left:28px}
.qd-checks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--accent-soft,var(--qd-bt-soft));box-shadow:inset 0 0 0 1px var(--accent-line,var(--qd-bt-line))}
.qd-checks li::after{content:"";position:absolute;left:5px;top:calc(.2em + 6px);width:8px;height:4.5px;border-left:2px solid var(--accent-ink,var(--qd-bt-ink));border-bottom:2px solid var(--accent-ink,var(--qd-bt-ink));transform:rotate(-45deg)}
.qd-card--ld .qd-checks,.qd-checks--ld{--accent-soft:var(--qd-ld-soft);--accent-line:var(--qd-ld-line);--accent-ink:var(--qd-ld-ink)}
.qd-card--us .qd-checks,.qd-checks--us{--accent-soft:var(--qd-us-soft);--accent-line:var(--qd-us-line);--accent-ink:var(--qd-us-ink)}

/* --------------------------------------------------------------------------
   9. STATS, COUNT-UP, TICKER, TYPING, LINE-DRAW
   -------------------------------------------------------------------------- */
.qd-stats{display:grid;grid-template-columns:repeat(var(--qd-cols,4),minmax(0,1fr));border:1px solid var(--qd-line);border-radius:var(--qd-r-xl);background:var(--qd-glass);overflow:hidden}
.qd-stat{display:flex;flex-direction:column;gap:6px;padding:22px 24px;min-width:0}
.qd-stats > .qd-stat + .qd-stat{border-left:1px solid var(--qd-line)}
.qd-stat__label{font:600 11px/1.2 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-stat__value{font:700 clamp(1.75rem,1.3rem + 1.6vw,2.5rem)/1.05 var(--qd-font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--qd-ink);white-space:nowrap}
.qd-stat__sub{font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
@media (max-width:767.98px){
  .qd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qd-stats > .qd-stat + .qd-stat{border-left:0}
  .qd-stats > .qd-stat:nth-child(even){border-left:1px solid var(--qd-line)}
  .qd-stats > .qd-stat:nth-child(n+3){border-top:1px solid var(--qd-line)}
}
[data-countup]{font-variant-numeric:tabular-nums;display:inline-block}

.qd-ticker{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.qd-ticker__track{display:flex;width:max-content;padding-block:4px}
.qd-ticker.is-running .qd-ticker__track{animation:qd-marquee var(--qd-ticker-dur,40s) linear infinite}
.qd-ticker:hover .qd-ticker__track,.qd-ticker:focus-within .qd-ticker__track{animation-play-state:paused}
.qd-ticker__item{display:inline-flex;align-items:center;gap:10px;height:40px;margin-right:12px;padding:0 16px;border-radius:var(--qd-r-pill);border:1px solid var(--qd-line);background:var(--qd-glass);font-size:var(--qd-fs-14);color:var(--qd-ink-2);white-space:nowrap}
.qd-ticker__item b{color:var(--qd-ink);font-weight:600}

.qd-typing{display:inline-block;white-space:nowrap;text-align:left;vertical-align:bottom}
.qd-typing__caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;animation:qd-caret 1s steps(1) infinite}

[data-draw]{transition:stroke-dashoffset var(--qd-draw-dur,1.6s) var(--qd-ease-in-out)}
.qd-spark{display:block;width:100%;height:auto;overflow:visible}
.qd-spark path,.qd-spark polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   10. PLAN CARDS + SEGMENTED CONTROL + SKELETON
   -------------------------------------------------------------------------- */
.qd-plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr));align-items:stretch}
.qd-plan{--accent:var(--qd-ld);--accent-ink:var(--qd-ld-ink);--accent-soft:var(--qd-ld-soft);--accent-line:var(--qd-ld-line);position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;border-radius:var(--qd-r-xl);background:var(--qd-surface-1);border:1px solid var(--qd-line);box-shadow:var(--qd-shadow-1);transition:transform var(--qd-dur-3) var(--qd-ease-out),box-shadow var(--qd-dur-3),border-color var(--qd-dur-3)}
.qd-plan:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--qd-shadow-2)}
.qd-plan--bt{--accent:var(--qd-bt);--accent-ink:var(--qd-bt-ink);--accent-soft:var(--qd-bt-soft);--accent-line:var(--qd-bt-line)}
.qd-plan--us{--accent:var(--qd-us);--accent-ink:var(--qd-us-ink);--accent-soft:var(--qd-us-soft);--accent-line:var(--qd-us-line)}
.qd-plan--mcx{--accent:var(--qd-mcx);--accent-ink:var(--qd-mcx-ink);--accent-soft:var(--qd-mcx-soft);--accent-line:var(--qd-mcx-line)}
.qd-plan--featured{border-color:transparent;background:linear-gradient(var(--qd-surface-1),var(--qd-surface-1)) padding-box,var(--qd-grad) border-box;box-shadow:var(--qd-glow-ld)}
.qd-plan__badge{position:absolute;top:-12px;left:22px;height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--qd-r-pill);background:var(--qd-grad);color:var(--qd-on-grad);font:700 11px/1 var(--qd-font-mono);letter-spacing:.08em;text-transform:uppercase}
.qd-plan__name{display:flex;align-items:center;gap:8px;font:600 var(--qd-fs-18)/1.2 var(--qd-font-display);color:var(--qd-ink)}
.qd-plan__use{margin-top:4px;font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
.qd-plan__price{margin-top:18px;font:700 clamp(2rem,1.7rem + 1vw,2.5rem)/1 var(--qd-font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--qd-ink)}
.qd-plan__per{margin-top:6px;font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
.qd-plan__note{min-height:1.5em;margin-top:2px;font-size:var(--qd-fs-12);color:var(--qd-ink-3)}
.qd-plan__list{list-style:none;margin:18px 0 22px;padding:16px 0 0;border-top:1px solid var(--qd-line);display:grid;gap:10px;font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-plan__list li{position:relative;padding-left:26px;line-height:1.45}
.qd-plan__list li::before{content:"";position:absolute;left:3px;top:.32em;width:9px;height:5px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.qd-plan__list li.is-no{color:var(--qd-ink-3)}
.qd-plan__list li.is-no::before{left:2px;top:.62em;width:11px;height:0;border-left:0;border-bottom:2px solid var(--qd-ink-4);transform:none}
.qd-plan__list b{color:var(--qd-ink)}
.qd-plan > .qd-btn{margin-top:auto}
.qd-seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--qd-r-pill);background:var(--qd-surface-2);border:1px solid var(--qd-line)}
.qd-seg button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border:0;border-radius:var(--qd-r-pill);background:none;color:var(--qd-ink-2);font:600 var(--qd-fs-14)/1 var(--qd-font-body);transition:background-color var(--qd-dur-2),color var(--qd-dur-2),box-shadow var(--qd-dur-2)}
.qd-seg button:hover{color:var(--qd-ink)}
.qd-seg button[aria-pressed="true"]{background:var(--qd-surface-1);color:var(--qd-ink);box-shadow:var(--qd-shadow-1),0 0 0 1px var(--qd-line-2)}
.qd-seg small{font:600 11px var(--qd-font-mono);color:var(--qd-ok)}
.qd-skel{display:inline-block;min-width:3ch;border-radius:6px;color:transparent!important;background:linear-gradient(90deg,var(--qd-surface-2) 25%,var(--qd-surface-3) 50%,var(--qd-surface-2) 75%);background-size:200% 100%;animation:qd-shimmer 1.4s linear infinite;user-select:none}

/* --------------------------------------------------------------------------
   11. STEPPER (progress) · STEPS (article) · WALKTHROUGH (prev/next guide)
   -------------------------------------------------------------------------- */
.qd-stepper{display:flex;margin:0;padding:0;list-style:none;counter-reset:qd-stepper}
.qd-stepper__step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;counter-increment:qd-stepper}
.qd-stepper__step::before{content:counter(qd-stepper);position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 14px/1 var(--qd-font-mono);color:var(--qd-ink-3);background:var(--qd-surface-1);border:1.5px solid var(--qd-line-2);transition:all var(--qd-dur-3) var(--qd-ease-out)}
.qd-stepper__step::after{content:"";position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;border-radius:2px;background:var(--qd-line-2)}
.qd-stepper__step:last-child::after{display:none}
.qd-stepper__step.is-done::before{content:"\2713";color:var(--qd-on-grad);background:var(--qd-grad);border-color:transparent}
.qd-stepper__step.is-done::after{background:var(--qd-grad)}
.qd-stepper__step.is-current::before{color:var(--qd-ink);border-color:var(--qd-teal);box-shadow:0 0 0 5px var(--qd-bt-soft)}
.qd-stepper__label{font:600 var(--qd-fs-14)/1.3 var(--qd-font-body);color:var(--qd-ink-2);padding-inline:6px}
.qd-stepper__step.is-current .qd-stepper__label,.qd-stepper__step.is-done .qd-stepper__label{color:var(--qd-ink)}
.qd-stepper__hint{font-size:var(--qd-fs-12);color:var(--qd-ink-3);padding-inline:6px}
a.qd-stepper__label{text-decoration:none}
a.qd-stepper__label:hover{color:var(--qd-bt-ink)}
@media (max-width:639.98px){
  .qd-stepper{flex-direction:column;gap:0}
  .qd-stepper__step{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding-bottom:22px;flex-wrap:wrap}
  .qd-stepper__step::before{flex:none}
  .qd-stepper__step::after{top:40px;bottom:2px;left:17px;right:auto;width:2px;height:auto}
  .qd-stepper__label{padding:8px 0 0;flex:1 1 calc(100% - 60px)}
  .qd-stepper__hint{padding:0 0 0 50px;flex:1 1 100%;margin-top:-6px}
}

.qd-steps{list-style:none;margin:0;padding:0;counter-reset:qd-step}
.qd-step{position:relative;padding:0 0 40px 60px;counter-increment:qd-step}
.qd-step::before{content:counter(qd-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font:700 15px/1 var(--qd-font-mono);color:var(--qd-ink);background:var(--qd-surface-2);border:1px solid var(--qd-line-2);box-shadow:var(--qd-shadow-1)}
.qd-step::after{content:"";position:absolute;left:19.5px;top:50px;bottom:10px;width:1px;background:linear-gradient(var(--qd-line-2),transparent)}
.qd-step:last-child{padding-bottom:0}
.qd-step:last-child::after{display:none}
.qd-step.is-in::before,.qd-steps--accent .qd-step::before{color:var(--qd-on-grad);background:var(--qd-grad);border-color:transparent}
.qd-step__title{margin:6px 0 10px;font:600 var(--qd-fs-h4)/1.35 var(--qd-font-display);color:var(--qd-ink)}
.qd-step > * + *{margin-top:14px}
.qd-step > .qd-step__title + *{margin-top:0}
@media (max-width:639.98px){.qd-step{padding-left:52px}.qd-step::before{width:36px;height:36px}.qd-step::after{left:17.5px;top:46px}.qd-step > .qd-shot,.qd-step > .qd-callout,.qd-step > .qd-table-wrap{position:relative;z-index:1;margin-left:-52px}}

.qd-walk{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,48px);align-items:center}
.qd-walk--solo{grid-template-columns:minmax(0,1fr)}
.qd-walk__panel{display:flex;flex-direction:column;gap:18px;min-width:0}
.qd-walk__head{display:flex;align-items:center;gap:14px}
.qd-walk__count{font:600 12px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);white-space:nowrap}
.qd-walk__bar{position:relative;flex:1;height:4px;border-radius:4px;background:var(--qd-surface-3);overflow:hidden}
.qd-walk__bar span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--qd-p,0));background:var(--qd-grad);border-radius:inherit;transition:transform var(--qd-dur-4) var(--qd-ease-out)}
.qd-walk__steps{display:grid}
.qd-walk__step{grid-area:1/1;display:flex;flex-direction:column;gap:10px;min-width:0}
.qd-walk__step h3{font-size:var(--qd-fs-h3)}
.qd-walk__step p{color:var(--qd-ink-2)}
.qd-js .qd-walk__step{visibility:hidden;opacity:0;transform:translate3d(12px,0,0);transition:opacity var(--qd-dur-3) var(--qd-ease-out),transform var(--qd-dur-3) var(--qd-ease-out),visibility 0s linear var(--qd-dur-3)}
.qd-js .qd-walk__step.is-active{visibility:visible;opacity:1;transform:none;transition-delay:0s}
html:not(.qd-js) .qd-walk__step + .qd-walk__step{margin-top:24px}
html:not(.qd-js) .qd-walk__steps{display:flex;flex-direction:column}
.qd-walk__nav{display:flex;align-items:center;gap:12px}
.qd-walk__dots{display:flex;gap:6px;margin-inline:auto}
.qd-walk__dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--qd-r-pill);background:var(--qd-line-2);transition:width var(--qd-dur-3) var(--qd-ease-out),background-color var(--qd-dur-3)}
.qd-walk__dots button[aria-current="step"]{width:24px;background:var(--qd-teal)}
html:not(.qd-js) .qd-walk__nav{display:none}
@media (max-width:899.98px){
  .qd-walk{grid-template-columns:minmax(0,1fr);gap:20px}
  .qd-walk > .qd-shot{order:-1}
  .qd-walk__panel{gap:14px}
  .qd-walk__head{order:-2}
  .qd-walk__nav{order:-1}
}

/* coachmark: small popover that points at something ("Click here") */
.qd-coach{position:relative;display:inline-flex;flex-direction:column;gap:8px;max-width:300px;padding:14px 16px;border-radius:var(--qd-r-md);background:var(--qd-surface-1);border:1px solid var(--qd-line-2);box-shadow:var(--qd-shadow-3);font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-coach::before{content:"";position:absolute;width:12px;height:12px;background:inherit;border-left:1px solid var(--qd-line-2);border-top:1px solid var(--qd-line-2);top:-7px;left:24px;transform:rotate(45deg)}
.qd-coach--below::before{top:auto;bottom:-7px;transform:rotate(225deg)}
.qd-coach__step{font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-bt-ink)}
.qd-coach strong{color:var(--qd-ink);font-size:var(--qd-fs-15)}
.qd-coach__nav{display:flex;gap:8px;margin-top:4px}

/* --------------------------------------------------------------------------
   12. TABS · ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.qd-tabs__list{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--qd-line);overflow-x:auto;scrollbar-width:none}
.qd-tabs__list::-webkit-scrollbar{display:none}
.qd-tabs__list.is-clipped{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.qd-tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:0;background:none;color:var(--qd-ink-3);font:600 var(--qd-fs-15)/1 var(--qd-font-body);white-space:nowrap;border-radius:10px 10px 0 0;transition:color var(--qd-dur-2)}
.qd-tab:hover{color:var(--qd-ink)}
.qd-tab[aria-selected="true"]{color:var(--qd-ink);box-shadow:inset 0 -2px 0 var(--qd-teal)}
.qd-tabs.is-ready .qd-tab[aria-selected="true"]{box-shadow:none}
.qd-tabs__ink{position:absolute;left:0;bottom:0;height:2px;width:var(--qd-ink-w,0);transform:translateX(var(--qd-ink-x,0));border-radius:2px;background:var(--qd-grad);transition:transform var(--qd-dur-3) var(--qd-ease-out),width var(--qd-dur-3) var(--qd-ease-out)}
.qd-tabs__panel{padding-top:24px}
.qd-tabs__panel:focus-visible{outline-offset:6px}
.qd-tabs--pills .qd-tabs__list{display:inline-flex;max-width:100%;gap:2px;padding:4px;border:1px solid var(--qd-line);border-radius:var(--qd-r-pill);background:var(--qd-surface-2)}
.qd-tabs--pills .qd-tab{height:38px;border-radius:var(--qd-r-pill);z-index:1}
.qd-tabs--pills .qd-tab[aria-selected="true"]{box-shadow:none;background:var(--qd-surface-1)}
.qd-tabs--pills.is-ready .qd-tab[aria-selected="true"]{background:none}
.qd-tabs--pills .qd-tabs__ink{top:4px;bottom:4px;height:auto;z-index:0;border-radius:var(--qd-r-pill);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-1),0 0 0 1px var(--qd-line-2)}

.qd-faq{display:grid;gap:10px}
.qd-acc{border:1px solid var(--qd-line);border-radius:var(--qd-r-lg);background:var(--qd-glass);transition:border-color var(--qd-dur-2),background-color var(--qd-dur-2)}
.qd-acc[open]{border-color:var(--qd-line-2);background:var(--qd-surface-1)}
.qd-acc > summary{display:flex;align-items:center;gap:16px;padding:18px 20px;list-style:none;cursor:pointer;font:600 var(--qd-fs-16)/1.4 var(--qd-font-body);color:var(--qd-ink);border-radius:inherit}
.qd-acc > summary::-webkit-details-marker{display:none}
.qd-acc > summary::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--qd-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238490ad' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform var(--qd-dur-3) var(--qd-ease-out)}
.qd-acc[open] > summary::after{transform:rotate(45deg)}
.qd-acc__a{padding:0 20px 20px;color:var(--qd-ink-2);font-size:var(--qd-fs-15)}
.qd-acc__a > * + *{margin-top:10px}
.qd-acc__a ul,.qd-acc__a ol{margin:0;padding-left:1.25em}
.qd-acc__a li + li{margin-top:4px}
.qd-footer__risk > summary{padding:14px 18px;font-size:var(--qd-fs-14)}
.qd-footer__risk .qd-acc__a{padding:0 18px 16px;font-size:var(--qd-fs-13);line-height:1.6}

/* --------------------------------------------------------------------------
   13. CALLOUTS
   -------------------------------------------------------------------------- */
.qd-callout{--c:var(--qd-bt-ink);--c-soft:var(--qd-bt-soft);--c-line:var(--qd-bt-line);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V17h6v-.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 14px;padding:16px 18px;border-radius:var(--qd-r-md);background:var(--c-soft);border:1px solid var(--c-line);border-left:3px solid var(--c);color:var(--qd-ink-body);font-size:var(--qd-fs-15);line-height:1.6}
.qd-callout::before{content:"";grid-row:span 2;width:20px;height:20px;margin-top:2px;background:var(--c);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.qd-callout__title{display:block;font:600 var(--qd-fs-15)/1.4 var(--qd-font-body);color:var(--qd-ink)}
.qd-callout__body > * + *{margin-top:8px}
.qd-callout--info{--c:var(--qd-info);--c-soft:var(--qd-info-soft);--c-line:var(--qd-info-line);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E")}
.qd-callout--warn{--c:var(--qd-warn);--c-soft:var(--qd-warn-soft);--c-line:var(--qd-warn-line);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.qd-callout--danger{--c:var(--qd-err);--c-soft:var(--qd-err-soft);--c-line:var(--qd-err-line);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9z'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E")}
.qd-callout--note{--c:var(--qd-ld-ink);--c-soft:var(--qd-ld-soft);--c-line:var(--qd-ld-line);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}

/* --------------------------------------------------------------------------
   14. SCREENSHOT FRAME · PINS · HIGHLIGHT · LIGHTBOX
   -------------------------------------------------------------------------- */
.qd-shot{margin:0;border-radius:var(--qd-r-lg);border:1px solid var(--qd-line-2);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-3);overflow:hidden}
.qd-shot__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;background:var(--qd-surface-2);border-bottom:1px solid var(--qd-line)}
.qd-shot__dots{display:flex;gap:6px;flex:none}
.qd-shot__dots i{width:10px;height:10px;border-radius:50%;background:var(--qd-line-2)}
.qd-shot__dots i:nth-child(1){background:#ff5f57}.qd-shot__dots i:nth-child(2){background:#febc2e}.qd-shot__dots i:nth-child(3){background:#28c840}
.qd-shot__url{flex:1;min-width:0;max-width:440px;margin-inline:auto;display:block;height:22px;padding:0 10px;border-radius:6px;background:var(--qd-surface-1);border:1px solid var(--qd-line);font:500 12px/20px var(--qd-font-mono);color:var(--qd-ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qd-shot__url::before{content:"";display:inline-block;margin-right:6px;vertical-align:-1px;width:9px;height:10px;background:var(--qd-ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Crect x='1' y='8' width='16' height='11' rx='2.5'/%3E%3Cpath d='M5 8V5.5a4 4 0 0 1 8 0V8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Crect x='1' y='8' width='16' height='11' rx='2.5'/%3E%3Cpath d='M5 8V5.5a4 4 0 0 1 8 0V8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat}
.qd-shot__bar-end{width:42px;flex:none}
.qd-shot__view{position:relative;overflow:hidden;background:var(--qd-bg);line-height:0}
.qd-shot__view img{display:block;width:100%;height:auto}
.qd-shot__view img[data-qd-zoomable]{cursor:zoom-in}
.qd-shot__zoom{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(7,10,18,.72);color:#eef1f8;font:600 12px/1 var(--qd-font-body);opacity:0;transform:translateY(4px);transition:opacity var(--qd-dur-2),transform var(--qd-dur-2);pointer-events:none}
.qd-shot__view:hover .qd-shot__zoom,.qd-shot__view:focus-within .qd-shot__zoom{opacity:1;transform:none}
@media (hover:none){.qd-shot__zoom{display:none}}
.qd-shot > figcaption,.qd-shot__cap{padding:12px 16px;font-size:var(--qd-fs-14);line-height:1.5;color:var(--qd-ink-3);border-top:1px solid var(--qd-line)}
.qd-shot--bare{border-radius:var(--qd-r-md)}
.qd-shot--phone{width:100%;max-width:360px;margin-inline:auto;padding:10px;border-radius:36px;border-width:1px;background:var(--qd-surface-2)}
.qd-shot--phone .qd-shot__view{border-radius:26px}
/* numbered pins: style="--x:24%;--y:30%" (percent of the image) */
.qd-shot__pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--qd-grad);color:var(--qd-on-grad);font:700 13px/1 var(--qd-font-mono);border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:default;transition:transform var(--qd-dur-3) var(--qd-ease-spring),opacity var(--qd-dur-3)}
.qd-shot__pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--qd-teal);opacity:0;animation:qd-pin-ring 2.2s var(--qd-ease-out) infinite}
.qd-shot__pin[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);width:max-content;max-width:220px;padding:8px 10px;border-radius:8px;background:#0b1019;color:#eef1f8;border:1px solid #2b3656;font:500 12.5px/1.4 var(--qd-font-body);text-align:left;white-space:normal;opacity:0;pointer-events:none;transition:opacity var(--qd-dur-2),transform var(--qd-dur-2)}
.qd-shot__pin:hover::after,.qd-shot__pin:focus-visible::after,.qd-shot__pin.is-active[data-tip]::after{opacity:1;transform:translate(-50%,0)}
.qd-shot__pin.is-active{transform:scale(1.18)}
.qd-shot.is-walking .qd-shot__pin:not(.is-active){opacity:.35;transform:scale(.85)}
/* highlight box: style="--x:..;--y:..;--w:..;--h:.." (percent) */
.qd-shot__hl{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:1;border-radius:10px;box-shadow:0 0 0 2px var(--qd-teal),0 0 24px 2px rgba(0,224,184,.35),0 0 0 200vmax rgba(3,6,12,.55);opacity:0;pointer-events:none;transition:opacity var(--qd-dur-4) var(--qd-ease-out),left var(--qd-dur-4) var(--qd-ease-out),top var(--qd-dur-4) var(--qd-ease-out),width var(--qd-dur-4) var(--qd-ease-out),height var(--qd-dur-4) var(--qd-ease-out)}
.qd-shot__hl.is-active{opacity:1}
.qd-shot__hl--static{opacity:1}
@media (max-width:639.98px){
  .qd-shot__bar{height:30px;gap:8px;padding:0 10px}
  .qd-shot__dots i{width:8px;height:8px}
  .qd-shot__bar-end{display:none}
  .qd-shot__pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px;border-width:1.5px}
  .qd-shot__hl{border-radius:6px}
}
/* lightbox (native <dialog>, created by qd-site.js) */
.qd-lightbox{max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;padding:0;border:0;background:transparent;color:#eef1f8;overflow:hidden}
.qd-lightbox::backdrop{background:var(--qd-overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qd-lightbox__stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px clamp(12px,4vw,72px) 24px}
.qd-lightbox__img{display:block;max-width:100%;max-height:calc(100dvh - 140px);width:auto;height:auto;border-radius:12px;box-shadow:0 40px 120px -20px rgba(0,0,0,.8);background:#0b1019;animation:qd-zoom-in var(--qd-dur-3) var(--qd-ease-out)}
.qd-lightbox__cap{max-width:860px;text-align:center;font-size:var(--qd-fs-14);color:#c6cede}
.qd-lightbox__btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(11,16,25,.72);color:#eef1f8;cursor:pointer}
.qd-lightbox__btn:hover{background:rgba(24,33,58,.92)}
.qd-lightbox__btn .qd-i{font-size:20px}
.qd-lightbox__close{top:12px;right:12px}
.qd-lightbox__prev{left:12px;top:50%;margin-top:-22px}
.qd-lightbox__next{right:12px;top:50%;margin-top:-22px}
.qd-lightbox__count{position:absolute;top:24px;left:20px;font:600 12px/1 var(--qd-font-mono);letter-spacing:.08em;color:#9aa6c0}

/* --------------------------------------------------------------------------
   15. CODE · KBD · TABLES
   -------------------------------------------------------------------------- */
.qd-code{position:relative;margin:0;padding:16px 18px;border-radius:var(--qd-r-md);background:var(--qd-code-bg);border:1px solid var(--qd-code-line);color:var(--qd-code-ink);font:400 13.5px/1.7 var(--qd-font-mono);overflow-x:auto;tab-size:2}
.qd-code code{font:inherit;color:inherit;background:none;border:0;padding:0}
.qd-code[data-lang]::before{content:attr(data-lang);display:block;margin-bottom:8px;font:600 10.5px/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8490ad}
.qd-code .c{color:#7d89a6}.qd-code .k{color:#a99dff}.qd-code .s{color:#41d59b}.qd-code .n{color:#7cbaff}
.qd-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#c6cede;font:600 12px/1 var(--qd-font-body);cursor:pointer;opacity:.85;transition:opacity var(--qd-dur-2),background-color var(--qd-dur-2),color var(--qd-dur-2)}
.qd-copy:hover{opacity:1;background:rgba(255,255,255,.12)}
.qd-copy.is-done{color:#41d59b;border-color:rgba(65,213,155,.4)}
.qd-inline-copy{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 12px;border-radius:10px;background:var(--qd-surface-2);border:1px solid var(--qd-line);font:500 var(--qd-fs-14)/1 var(--qd-font-mono);color:var(--qd-ink);max-width:100%}
.qd-inline-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qd-inline-copy .qd-copy{position:static;height:26px;background:var(--qd-surface-1);border-color:var(--qd-line-2);color:var(--qd-ink-2)}
.qd-inline-copy .qd-copy.is-done{color:var(--qd-ok)}
code.qd-c,.qd-prose :not(pre) > code{padding:.12em .42em;border-radius:6px;background:var(--qd-surface-2);border:1px solid var(--qd-line);font:500 .88em/1.4 var(--qd-font-mono);color:var(--qd-ink);overflow-wrap:anywhere}
kbd,.qd-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:6px;border:1px solid var(--qd-line-2);border-bottom-width:2px;background:var(--qd-surface-1);font:600 12px/1 var(--qd-font-mono);color:var(--qd-ink);vertical-align:.08em;white-space:nowrap}

.qd-table-wrap{overflow-x:auto;border:1px solid var(--qd-line);border-radius:var(--qd-r-lg);background:var(--qd-surface-1);-webkit-overflow-scrolling:touch}
.qd-table{width:100%;border-collapse:collapse;font-size:var(--qd-fs-14);line-height:1.5}
.qd-table caption{caption-side:bottom;padding:10px 16px;text-align:left;font-size:var(--qd-fs-13);color:var(--qd-ink-3);border-top:1px solid var(--qd-line)}
.qd-table th{padding:12px 16px;text-align:left;font:600 11px/1.3 var(--qd-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--qd-ink-3);background:var(--qd-surface-2);border-bottom:1px solid var(--qd-line);white-space:nowrap}
.qd-table td{padding:13px 16px;border-bottom:1px solid var(--qd-line);color:var(--qd-ink-2);vertical-align:top}
.qd-table tbody tr:last-child td{border-bottom:0}
.qd-table tbody tr{transition:background-color var(--qd-dur-1)}
.qd-table tbody tr:hover{background:var(--qd-glass)}
.qd-table td:first-child{color:var(--qd-ink);font-weight:500}
.qd-table .num,.qd-table th.num{text-align:right;font-family:var(--qd-font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.qd-table .pos{color:var(--qd-ok)}.qd-table .neg{color:var(--qd-err)}
.qd-table--compact td,.qd-table--compact th{padding:9px 14px}
@media (max-width:639.98px){
  .qd-table{min-width:520px}
  /* opt-in: rows become label / value cards on phones (labels come from <th>, filled by qd-site.js) */
  .qd-table.qd-table--stack{min-width:0}
  .qd-table--stack thead{display:none}
  .qd-table--stack,.qd-table--stack tbody,.qd-table--stack tr{display:block;width:100%}
  .qd-table--stack tr{padding:8px 0;border-bottom:1px solid var(--qd-line)}
  .qd-table--stack tbody tr:last-child{border-bottom:0}
  /* each td is a 2-cell CSS table: ::before (label) is one cell; ALL the td's own content (text, <b>, <a>, chips, divs) flows together
     in one anonymous cell, so a cell that mixes text and inline elements never splits into separate items (grid/flex would) */
  .qd-table--stack td{display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;padding:6px 16px;border:0;overflow-wrap:anywhere}
  .qd-table--stack td::before{display:table-cell;width:max(84px,32%);padding-right:12px;vertical-align:baseline;content:attr(data-label);font:600 10.5px/1.5 var(--qd-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--qd-ink-3);overflow-wrap:normal}
  .qd-table--stack td .qd-chip{max-width:100%;height:auto;min-height:22px;padding-block:3px;white-space:normal;line-height:1.3}
  .qd-table--stack td.num{text-align:left}
  .qd-table--stack caption{display:block}
}

/* --------------------------------------------------------------------------
   16. STATUS CHIPS
   Usage: <span class="qd-chip" data-st="DONE">DONE</span>
   Colours mirror LiveDesk (see DESIGN.md "Status chips" for sources).
   -------------------------------------------------------------------------- */
.qd-chip{--c:var(--qd-muted);--c-soft:var(--qd-muted-soft);--c-line:var(--qd-muted-line);display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--qd-r-pill);border:1px solid var(--c-line);background:var(--c-soft);color:var(--c);font:600 12px/1 var(--qd-font-mono);letter-spacing:.02em;white-space:nowrap;vertical-align:middle}
.qd-chip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.qd-chip--nodot::before{display:none}
.qd-chip--sm{height:22px;padding:0 9px;font-size:11px;gap:6px}
/* tones */
.qd-chip--ok,
.qd-chip[data-st="DONE"],.qd-chip[data-st="live-entered"],.qd-chip[data-st="broker-active"],.qd-chip[data-st="bucket-live"],
.qd-chip[data-st="eq-ladder"],.qd-chip[data-st="eq-target-hit"]{--c:var(--qd-ok);--c-soft:var(--qd-ok-soft);--c-line:var(--qd-ok-line)}
.qd-chip--warn,
.qd-chip[data-st="PLACING"],.qd-chip[data-st="OPEN"],.qd-chip[data-st="waiting"],.qd-chip[data-st="live-tranching"],.qd-chip[data-st="exiting"],
.qd-chip[data-st="skipped"],.qd-chip[data-st="armed"],.qd-chip[data-st="paper"],.qd-chip[data-st="live-offline"],.qd-chip[data-st="broker-inactive"],
.qd-chip[data-st="bucket-paused"],
.qd-chip[data-st="eq-queued"],.qd-chip[data-st="eq-zero-skip"],.qd-chip[data-st="eq-exiting"],.qd-chip[data-st="eq-time-gate"],
.qd-chip[data-st="eq-watching"],.qd-chip[data-st="eq-next-open"],.qd-chip[data-st="eq-limit-waiting"]{--c:var(--qd-warn);--c-soft:var(--qd-warn-soft);--c-line:var(--qd-warn-line)}
.qd-chip--cool,
.qd-chip[data-st="reentry-wait"],.qd-chip[data-st="cooldown"],.qd-chip[data-st="session-cooloff"]{--c:var(--qd-cool);--c-soft:var(--qd-cool-soft);--c-line:var(--qd-cool-line)}
.qd-chip--info,
.qd-chip[data-st="exited"],.qd-chip[data-st="no-entry"],.qd-chip[data-st="bucket-waiting"],.qd-chip[data-st="eq-complete"]{--c:var(--qd-info);--c-soft:var(--qd-info-soft);--c-line:var(--qd-info-line)}
.qd-chip--muted,
.qd-chip[data-st="QUEUED"],.qd-chip[data-st="CANCELLED"],.qd-chip[data-st="paused"],.qd-chip[data-st="bucket-exited"],
.qd-chip[data-st="eq-off"],.qd-chip[data-st="eq-removed"]{--c:var(--qd-muted);--c-soft:var(--qd-muted-soft);--c-line:var(--qd-muted-line)}
.qd-chip--err,
.qd-chip[data-st="FAILED"],.qd-chip[data-st="error"],.qd-chip[data-st="order-failed"],.qd-chip[data-st="blocked"],.qd-chip[data-st="broker-error"],
.qd-chip[data-st="bucket-error"],
.qd-chip[data-st="eq-sl-hit"],.qd-chip[data-st="eq-suspended"],.qd-chip[data-st="eq-rejected"],.qd-chip[data-st="live-auto"]{--c:var(--qd-err);--c-soft:var(--qd-err-soft);--c-line:var(--qd-err-line)}
/* "working right now" states pulse their dot */
.qd-chip--pulse::before,
.qd-chip[data-st="PLACING"]::before,.qd-chip[data-st="OPEN"]::before,.qd-chip[data-st="live-entered"]::before,
.qd-chip[data-st="live-tranching"]::before,.qd-chip[data-st="exiting"]::before,.qd-chip[data-st="live-auto"]::before,
.qd-chip[data-st="bucket-live"]::before,.qd-chip[data-st="eq-ladder"]::before{animation:qd-dot-pulse 1.8s var(--qd-ease-out) infinite}
.qd-chip[data-st="CANCELLED"]{text-decoration:line-through;text-decoration-thickness:1px}
.qd-chip[data-st="live-auto"],.qd-chip[data-st="blocked"]{font-weight:700}
/* glossary list: chip + meaning */
.qd-st-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 18px;margin:0;align-items:baseline}
.qd-st-list dt{margin:0}
.qd-st-list dd{margin:0;color:var(--qd-ink-2);font-size:var(--qd-fs-15)}
@media (max-width:479.98px){.qd-st-list{grid-template-columns:minmax(0,1fr)}.qd-st-list dd{margin:-6px 0 6px}}

/* --------------------------------------------------------------------------
   17. BREADCRUMB · TOC · PAGER · HELPFUL · CTA BAND
   -------------------------------------------------------------------------- */
.qd-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
.qd-crumbs li{display:inline-flex;align-items:center;gap:6px}
.qd-crumbs li + li::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--qd-ink-4);border-top:1.5px solid var(--qd-ink-4);transform:rotate(45deg);margin-right:4px}
.qd-crumbs a{color:var(--qd-ink-2);text-decoration:none;border-radius:4px}
.qd-crumbs a:hover{color:var(--qd-ink)}
.qd-crumbs [aria-current="page"]{color:var(--qd-ink);max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.qd-toc{position:relative;font-size:var(--qd-fs-14)}
.qd-toc__title{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font:600 11px/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-toc__title span{color:var(--qd-ink-2);letter-spacing:.04em}
.qd-toc__list{position:relative;margin:0;padding:0;list-style:none;border-left:1px solid var(--qd-line)}
.qd-toc__list::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:calc(var(--qd-read,0) * 100%);background:var(--qd-grad);border-radius:2px;transition:height .15s linear}
.qd-toc__list a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--qd-ink-3);line-height:1.4;text-decoration:none;transition:color var(--qd-dur-2),border-color var(--qd-dur-2)}
.qd-toc__list a:hover{color:var(--qd-ink)}
.qd-toc__list a.is-active{color:var(--qd-ink);font-weight:600;border-left-color:var(--qd-teal)}
.qd-toc__list .qd-toc__sub a{padding-left:26px;font-size:var(--qd-fs-13)}
.qd-toc-m{border:1px solid var(--qd-line);border-radius:var(--qd-r-md);background:var(--qd-surface-1)}
.qd-toc-m > summary{display:flex;align-items:center;gap:10px;padding:12px 16px;list-style:none;cursor:pointer;font:600 var(--qd-fs-14)/1.3 var(--qd-font-body);color:var(--qd-ink)}
.qd-toc-m > summary::-webkit-details-marker{display:none}
.qd-toc-m > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--qd-ink-3);border-bottom:2px solid var(--qd-ink-3);transform:rotate(45deg) translateY(-2px);transition:transform var(--qd-dur-2)}
.qd-toc-m[open] > summary::after{transform:rotate(225deg) translateY(-2px)}
.qd-toc-m .qd-toc__list{margin:0 16px 14px}
.qd-readbar{position:fixed;left:0;right:0;top:var(--qd-header-h);z-index:calc(var(--qd-z-header) - 1);height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--qd-read,0));background:var(--qd-grad)}

.qd-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qd-pager a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--qd-r-lg);border:1px solid var(--qd-line);background:var(--qd-glass);text-decoration:none;color:inherit;transition:border-color var(--qd-dur-2),transform var(--qd-dur-3) var(--qd-ease-out),background-color var(--qd-dur-2)}
.qd-pager a:hover{border-color:var(--qd-bt-line);transform:translateY(-2px)}
.qd-pager__dir{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-pager__title{font:600 var(--qd-fs-16)/1.35 var(--qd-font-display);color:var(--qd-ink)}
.qd-pager__next{grid-column:2;text-align:right;align-items:flex-end}
@media (max-width:639.98px){.qd-pager{grid-template-columns:minmax(0,1fr)}.qd-pager__next{grid-column:auto}}

.qd-helpful{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 20px;border-radius:var(--qd-r-lg);border:1px solid var(--qd-line);background:var(--qd-glass)}
.qd-helpful__q{font-weight:600;color:var(--qd-ink)}
.qd-helpful__btns{display:flex;gap:8px}
.qd-helpful__btns .qd-btn[aria-pressed="true"]{border-color:var(--qd-bt-line);background:var(--qd-bt-soft)}
.qd-helpful__thanks{flex:1 1 100%;font-size:var(--qd-fs-14);color:var(--qd-ink-2)}

.qd-cta-band{position:relative;overflow:hidden;padding:clamp(28px,5vw,56px);border-radius:var(--qd-r-2xl);border:1px solid var(--qd-line-2);background:radial-gradient(700px 300px at 0% 0%,rgba(0,224,184,.14),transparent 60%),radial-gradient(700px 300px at 100% 100%,rgba(139,123,255,.16),transparent 60%),var(--qd-surface-1);box-shadow:var(--qd-shadow-3)}
.qd-cta-band__head{max-width:640px;margin-bottom:28px}
.qd-cta-band__head h2{font-size:var(--qd-fs-h2);line-height:var(--qd-lh-tight)}
.qd-cta-band__head p{margin-top:12px;color:var(--qd-ink-2);font-size:var(--qd-fs-17)}
.qd-cta-band__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qd-cta-band__item{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--qd-r-lg);border:1px solid var(--qd-line);background:var(--qd-glass)}
.qd-cta-band__item h3{font-size:var(--qd-fs-h4)}
.qd-cta-band__item p{color:var(--qd-ink-2);font-size:var(--qd-fs-15)}
.qd-cta-band__item .qd-btn{align-self:flex-start;margin-top:auto}
.qd-cta-band__item--ld{border-color:var(--qd-ld-line);background:var(--qd-ld-soft)}
.qd-cta-band__item--bt{border-color:var(--qd-bt-line);background:var(--qd-bt-soft)}
@media (max-width:767.98px){.qd-cta-band__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479.98px){.qd-cta-band{padding:22px 18px;border-radius:var(--qd-r-xl)}.qd-cta-band__item{padding:18px}}

/* --------------------------------------------------------------------------
   18. ARTICLE (blog) LAYOUT + PROSE
   -------------------------------------------------------------------------- */
.qd-article-hero{position:relative;padding:clamp(28px,4vw,48px) 0 clamp(28px,4vw,40px);border-bottom:1px solid var(--qd-line)}
.qd-article-hero::before{content:"";position:absolute;inset:-120px 0 0;z-index:-1;background:radial-gradient(800px 320px at 15% 0%,var(--qd-hero-tint,rgba(0,224,184,.12)),transparent 70%);pointer-events:none}
.qd-article-hero--ld{--qd-hero-tint:rgba(139,123,255,.16)}
.qd-article-hero--us{--qd-hero-tint:rgba(90,169,255,.14)}
.qd-article-hero .qd-crumbs{margin-bottom:22px}
.qd-article-hero h1{max-width:13em;margin:16px 0 14px;font-size:var(--qd-fs-h1);line-height:var(--qd-lh-tight);letter-spacing:-.03em}
.qd-article-hero .qd-lede{max-width:38em}
.qd-article-hero .qd-meta{margin-top:20px}
.qd-article{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:clamp(32px,5vw,80px);align-items:start;padding-block:clamp(32px,4vw,56px) clamp(48px,6vw,80px)}
.qd-article__main{min-width:0;max-width:var(--qd-maxw-prose)}
.qd-article__aside{position:sticky;top:calc(var(--qd-header-h) + 28px);max-height:calc(100vh - var(--qd-header-h) - 56px);overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:24px}
.qd-article__aside-card{padding:16px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line);background:var(--qd-glass);font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-article__aside-card strong{display:block;margin-bottom:6px;color:var(--qd-ink)}
.qd-article__aside-card .qd-btn{margin-top:12px}
.qd-article__toc-m{display:none;margin-bottom:28px}
.qd-article__after{display:grid;gap:28px;margin-top:48px}
@media (max-width:1023.98px){
  .qd-article{grid-template-columns:minmax(0,1fr)}
  .qd-article__aside{display:none}
  .qd-article__toc-m{display:block}
  .qd-article__main{max-width:none}
}
.qd-prose{color:var(--qd-ink-body);font-size:var(--qd-fs-17);line-height:1.75}
.qd-prose > * + *{margin-top:1.15em}
.qd-prose h2{margin-top:2.3em;font-size:clamp(1.5rem,1.3rem + .9vw,2rem);line-height:1.2;scroll-margin-top:calc(var(--qd-header-h) + 24px)}
.qd-prose h3{margin-top:1.9em;font-size:var(--qd-fs-h3);scroll-margin-top:calc(var(--qd-header-h) + 24px)}
.qd-prose h4{margin-top:1.6em;font-size:var(--qd-fs-h4)}
.qd-prose h2 + *,.qd-prose h3 + *,.qd-prose h4 + *{margin-top:.7em}
/* component headings keep their own spacing inside prose (walkthrough steps, numbered steps, cards, plan cards) */
.qd-prose .qd-walk__step h3,.qd-prose .qd-card h3,.qd-prose .qd-plan h3,.qd-prose .qd-plan__name{margin-top:0}
.qd-prose .qd-step__title{margin-top:6px}
.qd-prose > :first-child{margin-top:0}
.qd-prose strong{color:var(--qd-ink);font-weight:600}
.qd-prose a:not([class]){color:var(--qd-bt-ink);text-decoration:underline;text-decoration-color:var(--qd-bt-line);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color var(--qd-dur-2)}
.qd-prose a:not([class]):hover{text-decoration-color:currentColor}
.qd-prose ul:not([class]),.qd-prose ol:not([class]){padding-left:1.4em}
.qd-prose li + li{margin-top:.45em}
.qd-prose ul:not([class]) > li::marker{color:var(--qd-teal)}
.qd-prose ol:not([class]) > li::marker{color:var(--qd-ink-3);font-family:var(--qd-font-mono);font-size:.9em}
.qd-prose blockquote{margin-inline:0;padding:4px 0 4px 20px;border-left:3px solid var(--qd-line-2);color:var(--qd-ink-2);font-style:italic}
.qd-prose hr{height:1px;border:0;margin-block:2.4em;background:linear-gradient(90deg,transparent,var(--qd-line-2),transparent)}
.qd-prose img:not(.qd-shot img){border-radius:var(--qd-r-md);border:1px solid var(--qd-line)}
.qd-prose figure{margin-inline:0}
.qd-prose .qd-shot,.qd-prose .qd-callout,.qd-prose .qd-table-wrap,.qd-prose .qd-code,.qd-prose .qd-steps,.qd-prose .qd-faq{margin-top:1.6em}
.qd-prose .qd-shot + *,.qd-prose .qd-callout + *,.qd-prose .qd-table-wrap + *,.qd-prose .qd-code + *{margin-top:1.6em}
.qd-prose .qd-step p{font-size:var(--qd-fs-16)}

/* --------------------------------------------------------------------------
   19. GUIDE HUB (blog index)
   -------------------------------------------------------------------------- */
.qd-hub-hero{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(28px,4vw,48px);text-align:center}
.qd-hub-hero h1{margin:16px auto 14px;max-width:12em;font-size:var(--qd-fs-h1);line-height:var(--qd-lh-tight);letter-spacing:-.03em}
.qd-hub-hero .qd-lede{max-width:36em;margin-inline:auto}
.qd-search{position:relative;display:flex;align-items:center;max-width:640px;margin:28px auto 0}
.qd-search .qd-i{position:absolute;left:18px;font-size:20px;color:var(--qd-ink-3);pointer-events:none}
.qd-search input{width:100%;height:56px;padding:0 64px 0 50px;border-radius:var(--qd-r-lg);border:1px solid var(--qd-line-2);background:var(--qd-surface-1);color:var(--qd-ink);font-size:var(--qd-fs-16);box-shadow:var(--qd-shadow-2);transition:border-color var(--qd-dur-2),box-shadow var(--qd-dur-2)}
.qd-search input::placeholder{color:var(--qd-ink-3)}
.qd-search input:focus{outline:none;border-color:var(--qd-teal);box-shadow:var(--qd-shadow-2),0 0 0 4px var(--qd-bt-soft)}
.qd-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.qd-search kbd{position:absolute;right:16px}
.qd-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.qd-filter{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--qd-r-pill);border:1px solid var(--qd-line);background:var(--qd-glass);color:var(--qd-ink-2);font:600 var(--qd-fs-14)/1 var(--qd-font-body);transition:all var(--qd-dur-2)}
.qd-filter:hover{color:var(--qd-ink);border-color:var(--qd-line-2)}
.qd-filter[aria-pressed="true"]{color:var(--qd-ink);border-color:var(--qd-bt-line);background:var(--qd-bt-soft)}
.qd-filter__n{font:600 11px/1 var(--qd-font-mono);color:var(--qd-ink-3)}
.qd-hub-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:var(--qd-fs-14);color:var(--qd-ink-3)}
.qd-guides{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.qd-guide-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--qd-r-xl);border:1px solid var(--qd-line);background:var(--qd-glass);text-decoration:none;color:inherit;transition:transform var(--qd-dur-3) var(--qd-ease-out),border-color var(--qd-dur-3),box-shadow var(--qd-dur-3)}
.qd-guide-card:hover{transform:translateY(-4px);border-color:var(--qd-line-2);box-shadow:var(--qd-shadow-2)}
.qd-guide-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qd-guide-card h3{font-size:var(--qd-fs-18);line-height:1.3}
.qd-guide-card p{font-size:var(--qd-fs-14);color:var(--qd-ink-2)}
.qd-guide-card__foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
.qd-guide-card__foot .qd-i{transition:transform var(--qd-dur-3) var(--qd-ease-spring);color:var(--qd-ink-2)}
.qd-guide-card:hover .qd-guide-card__foot .qd-i{transform:translateX(4px);color:var(--qd-ink)}
.qd-guide-card--feature{grid-column:span 2;background:var(--qd-grad-soft);border-color:var(--qd-line-2)}
@media (max-width:719.98px){.qd-guide-card--feature{grid-column:auto}}
.qd-empty{padding:48px 20px;text-align:center;color:var(--qd-ink-2);border:1px dashed var(--qd-line-2);border-radius:var(--qd-r-xl)}
.qd-empty strong{display:block;margin-bottom:6px;color:var(--qd-ink);font-size:var(--qd-fs-18)}
mark.qd-hit{background:rgba(0,224,184,.22);color:inherit;border-radius:3px;padding:0 1px}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.qd-footer{position:relative;margin-top:clamp(64px,8vw,120px);padding:clamp(48px,6vw,72px) 0 calc(28px + var(--qd-chat-size) + var(--qd-chat-inset));border-top:1px solid var(--qd-line);background:linear-gradient(180deg,transparent,var(--qd-bg-2))}
.qd-footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.qd-footer__brand p{max-width:340px;margin-top:14px;font-size:var(--qd-fs-14);line-height:1.65;color:var(--qd-ink-2)}
.qd-footer__mail{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 14px;border-radius:var(--qd-r-md);border:1px solid var(--qd-line-2);background:var(--qd-glass);color:var(--qd-ink);font:600 var(--qd-fs-14)/1 var(--qd-font-body);text-decoration:none;transition:border-color var(--qd-dur-2),background-color var(--qd-dur-2)}
.qd-footer__mail:hover{border-color:var(--qd-bt-line);background:var(--qd-bt-soft)}
.qd-footer__mail .qd-i{font-size:18px;color:var(--qd-bt-ink)}
.qd-footer__social{display:flex;gap:8px;margin-top:16px}
.qd-footer__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--qd-line);background:var(--qd-glass);color:var(--qd-ink-2);transition:color var(--qd-dur-2),border-color var(--qd-dur-2),transform var(--qd-dur-2) var(--qd-ease-out)}
.qd-footer__social a:hover{color:var(--qd-ink);border-color:var(--qd-line-2);transform:translateY(-2px)}
.qd-footer__social .qd-i{font-size:18px}
.qd-footer__col h2{margin:0 0 14px;font:600 11px/1 var(--qd-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--qd-ink-3)}
.qd-footer__col ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.qd-footer__col a{color:var(--qd-ink-2);font-size:var(--qd-fs-14);text-decoration:none;transition:color var(--qd-dur-2)}
.qd-footer__col a:hover{color:var(--qd-ink)}
.qd-footer__disclaimer{max-width:860px;margin-top:40px;font-size:var(--qd-fs-12);line-height:1.65;color:var(--qd-ink-3)}
.qd-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--qd-line);font-size:var(--qd-fs-13);color:var(--qd-ink-3)}
@media (max-width:1023.98px){.qd-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.qd-footer__brand{grid-column:1/-1}}

/* --------------------------------------------------------------------------
   21. HELP-CHAT SLOT (the chat script mounts into #qd-chat-root)
   -------------------------------------------------------------------------- */
#qd-chat-root{position:fixed;right:var(--qd-chat-inset);bottom:calc(var(--qd-chat-inset) + env(safe-area-inset-bottom));z-index:var(--qd-z-chat)}
#qd-chat-root:empty{display:none}

/* --------------------------------------------------------------------------
   22. REVEAL + MOTION
   html.qd-js is set by the inline <head> snippet; without JS nothing hides.
   -------------------------------------------------------------------------- */
/* Two phases: hidden (no .is-in) -> animating (.is-in) -> done (.is-revealed, set by JS
   after the reveal). Only the first two touch opacity/transform/transition, so a
   component's own states (disabled opacity, hover lift + its transitions) win afterwards. */
.qd-anim [data-reveal]:not(.is-revealed){transition:opacity var(--qd-dur-4) var(--qd-ease-out),transform .8s var(--qd-ease-out);transition-delay:var(--qd-reveal-delay,0ms)}
.qd-anim [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,18px,0)}
.qd-anim [data-reveal="fade"]:not(.is-in){transform:none}
.qd-anim [data-reveal="left"]:not(.is-in){transform:translate3d(-24px,0,0)}
.qd-anim [data-reveal="right"]:not(.is-in){transform:translate3d(24px,0,0)}
.qd-anim [data-reveal="scale"]:not(.is-in){transform:scale(.96)}

@keyframes qd-drift-a{to{transform:translate3d(60px,40px,0) scale(1.12)}}
@keyframes qd-drift-b{to{transform:translate3d(-50px,30px,0) scale(1.08)}}
@keyframes qd-shine{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(420%)}}
@keyframes qd-spin{to{--qd-angle:360deg}}
@keyframes qd-ping{0%{box-shadow:0 0 0 0 var(--qd-ok-line)}70%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes qd-dot-pulse{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 5px transparent}}
@keyframes qd-pin-ring{0%{opacity:.8;transform:scale(.7)}80%,100%{opacity:0;transform:scale(1.5)}}
@keyframes qd-shimmer{to{background-position:-200% 0}}
@keyframes qd-marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes qd-caret{50%{opacity:0}}
@keyframes qd-drop{from{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes qd-drawer-in{from{opacity:0;transform:translate3d(0,-8px,0)}}
@keyframes qd-zoom-in{from{opacity:0;transform:scale(.96)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .qd-anim [data-reveal]:not(.is-in){opacity:1;transform:none}
  .qd-fx span{animation:none}
  .qd-ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .qd-ticker__track{flex-wrap:wrap;width:auto;row-gap:8px}
}

/* forced colours (Windows high contrast): keep chips + buttons legible */
@media (forced-colors:active){
  .qd-chip,.qd-badge,.qd-btn,.qd-plan,.qd-card{border:1px solid CanvasText}
  .qd-chip::before{background:CanvasText}
  .qd-grad-text{color:CanvasText;background:none}
}

/* print: articles print cleanly */
@media print{
  .qd-header,.qd-drawer,.qd-footer,.qd-article__aside,.qd-article__toc-m,.qd-helpful,.qd-cta-band,.qd-pager,#qd-chat-root,.qd-fx,.qd-readbar,.qd-pvw{display:none!important}
  body{background:#fff;color:#000}
  .qd-anim [data-reveal]:not(.is-in){opacity:1;transform:none}
  .qd-article{display:block}
}

/* --------------------------------------------------------------------------
   23. CLASSIC PALETTE — component overrides (v1.1)
   Only the few places that use raw colours instead of tokens, plus the serif
   type tuning. Every existing class keeps working in both palettes.
   -------------------------------------------------------------------------- */
/* metric-matched to Newsreader 500 (measured 2026-10-08, canvas, Chrome) so the classic font swap does not reflow */
@font-face{font-family:'QD Serif Fallback';src:local('Georgia');font-style:normal;size-adjust:105.2%;ascent-override:70.3%;descent-override:25.7%;line-gap-override:0%}
@font-face{font-family:'QD Serif Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;size-adjust:97.4%;ascent-override:76%;descent-override:27.7%;line-gap-override:0%}
[data-palette="classic"] ::selection{background:rgba(201,164,92,.30)}
[data-palette="classic"] h1,[data-palette="classic"] h2,[data-palette="classic"] h3,[data-palette="classic"] h4,[data-palette="classic"] h5,[data-palette="classic"] h6,
[data-palette="classic"] .qd-h1,[data-palette="classic"] .qd-h2,[data-palette="classic"] .qd-h3,[data-palette="classic"] .qd-h4{font-weight:500;letter-spacing:-.012em}
[data-palette="classic"] .qd-display{font-weight:500;letter-spacing:-.022em;line-height:1.04}
[data-palette="classic"] .qd-grad-text{font-style:italic;padding-right:.06em}
[data-palette="classic"] .qd-brand__mark{font-weight:600;box-shadow:0 6px 20px -6px rgba(201,164,92,.5)}
[data-palette="classic"] .qd-brand__name{font-weight:600;letter-spacing:-.01em}
[data-palette="classic"] .qd-stat__value,[data-palette="classic"] .qd-plan__price{font-weight:600;letter-spacing:-.015em}
[data-palette="classic"] .qd-fx .qd-fx__a{background:#c9a45c}
[data-palette="classic"] .qd-fx .qd-fx__b{background:#2f4f86}
[data-palette="classic"] .qd-fx .qd-fx__c{background:#3dbb94}
[data-palette="classic"] .qd-btn--primary{box-shadow:0 8px 26px -10px rgba(201,164,92,.55)}
[data-palette="classic"] .qd-btn--primary:hover{box-shadow:0 14px 34px -12px rgba(201,164,92,.62)}
[data-palette="classic"] .qd-shot__hl{box-shadow:0 0 0 2px var(--qd-teal),0 0 24px 2px rgba(201,164,92,.35),0 0 0 200vmax rgba(3,6,12,.55)}
[data-palette="classic"] mark.qd-hit{background:rgba(201,164,92,.26)}
[data-palette="classic"] .qd-cta-band{background:radial-gradient(700px 300px at 0% 0%,rgba(201,164,92,.13),transparent 60%),radial-gradient(700px 300px at 100% 100%,rgba(61,187,148,.10),transparent 60%),var(--qd-surface-1)}
[data-palette="classic"] .qd-article-hero{--qd-hero-tint:rgba(61,187,148,.12)}
[data-palette="classic"] .qd-article-hero--ld{--qd-hero-tint:rgba(201,164,92,.14)}
[data-palette="classic"] .qd-article-hero--us{--qd-hero-tint:rgba(107,155,224,.14)}

/* --------------------------------------------------------------------------
   24. PREVIEW-ONLY PALETTE SWITCHER — rendered by qd-site.js only when the
   URL has ?preview. Never shown to normal visitors.
   -------------------------------------------------------------------------- */
.qd-pvw{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--qd-z-toast);display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 32px - var(--qd-chat-size) - var(--qd-chat-inset));padding:8px 10px;border-radius:14px;border:1px solid var(--qd-line-2);background:var(--qd-surface-1);box-shadow:var(--qd-shadow-3);font:600 12px/1 var(--qd-font-body);color:var(--qd-ink-2)}
.qd-pvw__label{font:600 10.5px/1 var(--qd-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--qd-ink-3);padding-left:2px}
.qd-pvw .qd-seg button{height:30px;padding:0 12px;font-size:12.5px}
.qd-pvw__x{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--qd-line);border-radius:8px;background:var(--qd-glass);color:var(--qd-ink-2)}
.qd-pvw__x:hover{color:var(--qd-ink)}
.qd-pvw.is-min .qd-pvw__body{display:none}