/* ember.css: the v5 "ember" system for EVERY quantbase.live page (home, docs, Lens, agents, earn, legal, 404).
   Loaded after tape.css / pages.css / ds.css, so the older sheets keep their layout and this file owns colour,
   type, buttons, the header and the footer. Palette: warm near-black #161316, chocolate #453027, ember #FF6D29,
   warm grey #BABABA, white. The brightest thing on screen is the action: a white pill. Type: Host Grotesk, with
   Instrument Serif italic for one accent phrase and IBM Plex Mono for small labels and numbers. 8-pt spacing. */
:root {
  --ink: #161316; --ink-2: #1D1719; --ink-3: #241C1D; --choc: #453027; --ember-c: #FF6D29; --ember-2: #FF8A52; --ember-3: #C9531E;
  --grey: #BABABA; --grey-2: #8F8888; --white: #FFFFFF; --cream: #FFE7D6;
  --hair: rgba(255, 255, 255, .1); --hair-2: rgba(255, 255, 255, .18);
  --font: "Host Grotesk", "Inter Tight", system-ui, -apple-system, sans-serif;
  /* the older sheets' tokens, re-pointed at the ember system */
  --ground: #161316; --surface: #1D1719; --raised: #241C1D; --sunk: #130F11; --hover: #2A2122;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); --line-glow: rgba(255, 109, 41, .18);
  --text: #FFFFFF; --soft: #D9D2CE; --muted: #BABABA; --dim: #8F8888;
  --accent: #FF6D29; --accent-2: #FF9F75; --accent-ink: #FF8A52; --orange: #FF6D29; --on-accent: #161316;
  --gain: #5CC98F; --loss: #F2706A;
  --sun: linear-gradient(180deg, #FF9F75 0%, #FF6D29 60%, #C9531E 100%);
  --ember: radial-gradient(130% 140% at 0% 0%, #FF9F75 0%, #FF6D29 45%, #C9531E 100%);
  --glow-btn: none; --underglow: none;
  --glass: linear-gradient(180deg, rgba(36, 28, 29, .8), rgba(29, 23, 25, .86));
  --glass-edge: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  --display: var(--font); --sans: var(--font);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mark-dim: #6E5E58; --mark-hurdle: #FFF4EA; --mark-halo: rgba(255, 159, 117, .4);
  color-scheme: dark;
}
html { background: var(--ink) !important; }
body { background: var(--ink) !important; color: var(--white); font-family: var(--font) !important; -webkit-font-smoothing: antialiased; }
/* inner pages: one quiet light source, low and to the left, fixed behind the content */
body:not(.home5)::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block;
  background: radial-gradient(60% 55% at -8% 105%, rgba(255, 109, 41, .2), rgba(255, 109, 41, .05) 45%, transparent 70%),
              radial-gradient(50% 45% at 108% -5%, rgba(69, 48, 39, .55), transparent 70%); }
::selection { background: var(--ember-c); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font) !important; }
h1, h2 { font-weight: 600 !important; letter-spacing: -.035em !important; }
em.s, .qb-accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cream); letter-spacing: -.01em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ember-2) !important; outline-offset: 3px; }

/* buttons: white pill = the action, hairline pill = the alternative */
.btn { font-family: var(--font) !important; border-radius: 999px !important; }
.btn.p, .btn.w, .btn.primary { background: var(--white) !important; color: var(--ink) !important; border: 0 !important; box-shadow: none !important; background-image: none !important; }
.btn.p:hover, .btn.w:hover, .btn.primary:hover { background: var(--cream) !important; }
.btn.s, .btn.ghost, .btn.secondary { background: transparent !important; color: var(--white) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--hair-2) !important; background-image: none !important; }
.btn.s:hover, .btn.ghost:hover, .btn.secondary:hover { background: rgba(255, 255, 255, .06) !important; }

/* ---- header: a floating pill, never a full-width band ---- */
header.top { position: sticky; top: 14px; z-index: 40; padding: 0 clamp(12px, 3vw, 32px); background: none !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; }
header.top .rail { pointer-events: auto; max-width: 1080px; min-height: 56px; margin: 0 auto; padding: 0 8px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(29, 22, 23, .5) !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 40px -20px rgba(0, 0, 0, .7) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important; transition: background .25s, box-shadow .25s; }
header.top.scrolled .rail { background: rgba(22, 19, 22, .82) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 50px -20px rgba(0, 0, 0, .85) !important; }
header.top nav { background: none !important; border: 0 !important; box-shadow: none !important; display: flex; align-items: center; gap: 4px; }
header.top .brand { font-family: var(--font) !important; font-weight: 600; letter-spacing: -.02em; color: var(--white); }
header.top .brand i, footer .brand i { color: var(--ember-c) !important; font-style: normal; }
header.top a.l { color: var(--grey) !important; font: 500 14.5px/1 var(--font) !important; padding: 10px 12px; border-radius: 999px; }
header.top a.l:hover { color: var(--white) !important; background: rgba(255, 255, 255, .05); }
header.top a.l.on { color: var(--white) !important; }
header.top .btn.sm { height: 40px; padding: 0 18px !important; font-size: 14.5px !important; font-weight: 600 !important; margin-left: 6px; }
@media (max-width: 760px) {
  header.top { top: 10px; padding: 0 10px; }
  header.top .rail { padding: 0 6px 0 14px; min-height: 52px; }
  header.top a.l:not(.keep) { display: none; }
}

/* ---- footer: calm, generous, three columns ---- */
footer.f5 { position: relative; overflow: hidden; margin-top: 0; padding: var(--f5-pad, clamp(64px, 9vw, 112px)) 0 32px; border-top: 0 !important; background: var(--ink) !important; color: var(--grey); isolation: isolate; }
footer.f5::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 90%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 22% 100%, rgba(255, 109, 41, .22), rgba(255, 109, 41, .06) 45%, transparent 72%),
              radial-gradient(40% 50% at 85% 100%, rgba(69, 48, 39, .6), transparent 70%); }
footer.f5 .f5-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; opacity: .5; pointer-events: none; }
footer.f5 .f5-ridge svg { width: 100%; height: 100%; display: block; }
footer.f5 .rail { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.f5-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .08); }
.f5-brand .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font: 600 19px/1 var(--font); letter-spacing: -.02em; }
.f5-brand p { margin: 16px 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--grey); max-width: 34ch; }
.f5-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.f5-cols h4 { margin: 0 0 16px; font: 500 12px/1 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-2); }
.f5-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.f5-cols a { color: #D9D2CE; font-size: 15px; transition: color .15s; }
.f5-cols a:hover { color: var(--white); }
.f5-risk { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; line-height: 1.65; color: var(--grey-2); }
.f5-risk b { color: var(--grey); font-weight: 500; }
.f5-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; font: 400 12px/1.6 var(--mono); color: var(--grey-2); }
.f5-bar a { color: var(--grey); } .f5-bar a:hover { color: var(--white); }
@media (max-width: 860px) {
  .f5-top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .f5-cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

/* ---- inner pages on the ember system ---- */
body:not(.home5) main h1 { font-size: clamp(40px, 5.6vw, 76px) !important; line-height: 1.02 !important; }
body:not(.home5) .eyebrow, body:not(.home5) .kicker { font-family: var(--mono) !important; color: var(--ember-2) !important; border-color: rgba(255, 109, 41, .35) !important; background: rgba(255, 109, 41, .06) !important; }
body:not(.home5) .card, body:not(.home5) .panel, body:not(.home5) .callout, body:not(.home5) .stat, body:not(.home5) .note-box {
  background: rgba(255, 255, 255, .035) !important; border-color: rgba(255, 255, 255, .09) !important; box-shadow: none !important; }
body:not(.home5) code, body:not(.home5) pre { font-family: var(--mono) !important; }
body:not(.home5) pre { background: #120E10 !important; border: 1px solid rgba(255, 255, 255, .08) !important; }
body:not(.home5) table th { color: var(--grey) !important; font-family: var(--mono) !important; font-weight: 500 !important; }
body:not(.home5) a.u, body:not(.home5) .prose a, body:not(.home5) .doc a:not(.btn) { color: var(--ember-2) !important; text-decoration-color: rgba(255, 138, 82, .45) !important; }

/* long code, endpoints and tab rows scroll inside their box instead of widening the page on phones */
body:not(.home5) main * { min-width: 0; }
body:not(.home5) .connect, body:not(.home5) .note, body:not(.home5) .code { max-width: 100%; }
body:not(.home5) .tabs { overflow-x: auto; scrollbar-width: none; }
body:not(.home5) .code pre, body:not(.home5) pre { overflow-x: auto; max-width: 100%; }
body:not(.home5) .note { overflow-wrap: anywhere; }