/* Borro, the finish (second pass, 2026-10-07). Loaded last on every page, over styles.css and the feature sheets.
   Roy: "sleeker and more fintech while retaining the 90's vibes".

   The product reads as a premium trading app: a deep ink-navy page, raised surfaces with 1px hairlines instead of drop
   shadows, one grotesk (Instrument Sans) for every word and number with tabular figures, big clear numbers. The video
   store stays as accents, each in one place: the chrome wide face for the wordmark and the hero headline, the cassette
   that carries the live $BORRO Drip on the landing (its handwritten label is the one handwriting left), a faint CRT glow
   behind the hero only, short tape-label stripes over section titles, tape rows in the Markets "Tapes" view, the arcade
   on the Prize tab, and Bernie in two empty states.

   Palette: ink navy page and three surface steps, a neutral text scale; yellow is the primary action and focus, mint is
   up and live, pink is down and risk. Accents are never large fills. Every text pair here passes WCAG AA.

   Type scale (px): 12, 13, 14, 15, 16, 18, 21, 28, 36, then display sizes for numbers and the hero.
   Spacing: 4, 8, 12, 16, 24, 32, 48, 64, 96. Radius: 6 (chips), 10 (controls), 14 (cards, tables), 20 (cassette). */

:root {
  --bg: #0b0e2b;          /* the page: ink navy */
  --bg-2: #080a22;        /* wells under the page: inputs, table heads */
  --surface: #12163b;     /* cards, panels, tables */
  --surface-2: #181d48;   /* hover, selected */
  --surface-3: #212759;   /* chips, tracks, pressed */
  --line: rgba(146, 156, 255, .14);
  --line-2: rgba(146, 156, 255, .26);
  --text: #eef0ff;
  --text-2: #b4b8de;
  --text-3: #878dba;
  --yellow: #ffd83a;
  --pink: #ff4f9a;
  --mint: #3fe0b5;
  --up: #3fe0b5;
  --down: #ff78ae;
  --on-accent: #0b0e2b;
  --cream: #fbf8ef;
  --e1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -28px rgba(0, 0, 0, .8);
  --stripe: linear-gradient(90deg, var(--pink) 0 33.4%, var(--yellow) 33.4% 66.7%, var(--mint) 66.7%);
  --ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --display: Archivo, "Helvetica Neue", Arial, sans-serif;

  /* The first pass's names, pointed at the new system. --label and --ink stay the cream label and its ink: the VHS
     pieces (tape labels, the cassette) use them, and dark surfaces swap them (below). */
  --carpet: var(--bg); --carpet-deep: var(--bg); --night: var(--bg); --night-2: var(--surface); --night-3: var(--surface-2);
  --soft: var(--text-2); --muted: var(--text-3);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px;
}
/* Korean, Chinese and Japanese: the brand face for Latin letters and figures, the system's own for the rest. */
:root[lang="ko"] { --ui: "Instrument Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif; }
:root[lang="zh-CN"] { --ui: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; }
:root[lang="ja"] { --ui: "Instrument Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; }

/* ---------------------------------------------------------------- the page */

html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; background: var(--bg); background-image: none; color: var(--text); font-family: var(--ui); font-size: 16px; line-height: 1.55;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--ui); font-stretch: 100%; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
a { color: var(--yellow); text-underline-offset: 3px; }
::selection { background: rgba(255, 216, 58, .3); color: var(--text); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
.soft { color: var(--text-2); }
.hand { font-family: var(--ui); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { position: relative; z-index: 1; width: min(1200px, 100% - 48px); }

/* The one CRT moment: faint scanlines and two soft glows behind the landing hero, fading out before the products. */
body.home { position: relative; }
body.home::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1060px; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    radial-gradient(42% 52% at 76% 42%, rgba(255, 79, 154, .17), transparent 70%),
    radial-gradient(48% 56% at 18% 26%, rgba(92, 98, 255, .24), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 64%, transparent); mask-image: linear-gradient(#000 64%, transparent);
}

/* ---------------------------------------------------------------- the top bar */

/* Sticky, full-bleed glass. The bar's own colour reaches the screen's edges through a spread shadow (which never adds
   sideways scroll), its hairline the same way, one pixel lower. */
.bar {
  position: sticky; top: 0; z-index: 40; gap: 8px 16px; padding: 12px 0; margin: 0;
  background: rgba(11, 14, 43, .9); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 0 0 100vmax rgba(11, 14, 43, .9), 0 1px 0 100vmax var(--line);
  clip-path: inset(0 -100vmax -1px);
}
.brand { gap: 10px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 21px; letter-spacing: -.01em; color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand small { display: none; }
/* The wordmark in chrome, like the hero headline. */
.brand { background: linear-gradient(180deg, #fff 0%, #eceaff 38%, #a9a8dc 52%, #f7f6ff 58%, #d8d6f4 80%, #fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bar nav a, .bar nav button { color: var(--text-2); font-size: 14.5px; font-weight: 500; border-radius: 8px; padding: 8px 12px; background: none; }
.bar nav a:hover, .bar nav button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.bar nav button[aria-current="page"]::after { content: none; }

/* The app: the brand and the controls on the first row, the sections as a tab strip on the second, flush with the
   hairline. The strip scrolls sideways when it does not fit; the current tab is brought into view (app.js). */
.app .bar { padding: 10px 0 0; row-gap: 6px; margin-bottom: 0; border-bottom: 0; }
.app .bar > nav.tabs {
  order: 3; flex: 0 0 100%; position: relative; display: flex; grid-template-columns: none; gap: 2px; margin: 0 0 0 -12px; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; justify-content: flex-start; flex-wrap: nowrap; width: auto;
}
.app .bar > nav.tabs::-webkit-scrollbar { display: none; }
.app .bar > nav.tabs button {
  position: relative; flex: none; padding: 10px 12px 13px; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--text-2);
  background: none; white-space: nowrap; text-align: left;
}
.app .bar > nav.tabs button:hover { color: var(--text); background: none; }
.app .bar > nav.tabs button[aria-current="page"] { color: var(--text); background: none; font-weight: 600; }
.app .bar > nav.tabs button[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--yellow);
}
.app .bar > nav.tabs button:focus-visible { outline-offset: -4px; }
.bar > .lang { margin-left: auto; }
/* Pages without tabs keep the switcher on the top row (i18n.css would give it a row of its own at some widths). */
body .bar:not(:has(> nav.tabs)) > .lang { order: 0; margin: 0 0 0 8px; }
.lang { gap: 0; padding: 2px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; }
.lang a { padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); opacity: 1; }
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { background: var(--surface-3); color: var(--text); }
.snd { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--text-2); }
.snd:hover { color: var(--text); border-color: rgba(146, 156, 255, .45); }
.snd[aria-pressed="true"] { color: var(--yellow); border-color: rgba(255, 216, 58, .5); box-shadow: none; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px; border: 0; border-radius: 10px;
  font: 600 15px/1.3 var(--ui); font-stretch: 100%; letter-spacing: -.005em; color: var(--on-accent); background: var(--yellow);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16); transition: background-color .15s, box-shadow .15s, color .15s, transform .08s;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:hover { background: #ffe466; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.sm { min-height: 32px; padding: 6px 12px; font-size: 13.5px; border-radius: 8px; }
.btn.lg { min-height: 48px; padding: 12px 24px; font-size: 16px; }
.btn.line, .card .btn.line, .wallets .btn.line, dialog.consent .btn.line, .btn.ink, .card .btn.ink {
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.line:hover, .card .btn.line:hover, .wallets .btn.line:hover, dialog.consent .btn.line:hover, .btn.ink:hover {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(146, 156, 255, .45);
}
.btn:disabled, .btn:disabled:hover { cursor: not-allowed; transform: none; }
.btn:not(.line):not(.ink):disabled, .btn:not(.line):not(.ink):disabled:hover { background: var(--surface-3); color: var(--text-3); box-shadow: none; }
.btn.line:disabled, .btn.ink:disabled { opacity: .45; background: transparent; }
.go-link { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(238, 240, 255, .35); text-underline-offset: 5px; }
.go-link:hover { text-decoration-color: var(--text); }

/* ---------------------------------------------------------------- dark surfaces */

/* Everything that was cream paper is a raised surface now. Inside one, the label's colours swap: what was ink on paper
   is light text on the surface, and what sat on paper as cream sits as the surface. */
.card, .coin, .pool, .wallets, dialog.consent, .legal, .rule, .den, .ach, .member, .receipt, .coupon, .panel, .bc-coin, .cc-row, .o-row, .dband, .dash-empty {
  --ink: var(--text); --label: var(--surface); --ink-2: var(--text-3); --paper-line: var(--line);
}
.card {
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); padding: 24px; box-shadow: var(--e1);
}
.card h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 16px; }
.card h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 24px 0 8px; color: var(--text); }
.card .soft, .card p.soft { color: var(--text-2); }
.card a { color: var(--yellow); }
.help, .card .help { color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.help a { color: var(--text-2); }
.help.on-dark { color: var(--text-3); }
.empty { font-family: var(--ui); font-size: 14px; color: var(--text-3); padding: 8px 0; }
.more { border-top: 1px solid var(--line); }
.more summary { font-weight: 600; color: var(--text); }
.facts li { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 14.5px; }
.facts li > span { color: var(--text-2); }
.facts li b { font-weight: 600; color: var(--text); }
.facts li.sum { border-top: 1px solid var(--line-2); }
.facts li.sum > span { color: var(--text); font-weight: 600; }
.facts li.sum b { font-weight: 700; }
.facts.on-dark li { border-bottom-color: var(--line); }
.facts.on-dark li span { color: var(--text-2); }
.facts.rows li > span b { font-family: var(--ui); font-weight: 650; font-size: 15.5px; color: var(--text); }
.facts.rows li > span small, .pickrow span { color: var(--text-3); }
.facts.wallet li:last-child { border-bottom: 1px solid var(--line); }
.facts.addresses li.head { padding-top: 18px; }
.facts.addresses li.head b { font-family: var(--ui); font-weight: 700; font-size: 14px; color: var(--text); }
.mk-list li { font-size: 14px; }
.cols { gap: 16px; margin-top: 24px; }

/* ---------------------------------------------------------------- fields, toggles, segmented controls */

.field { margin-top: 18px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.field label span, .field label .lab ~ span { font-weight: 500; color: var(--text-3); }
.field label .lab { color: var(--text-2); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--ui); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r2); padding: 12px 14px; transition: border-color .12s, box-shadow .12s;
}
.field textarea { font-size: 16px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(135, 141, 186, .7); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(146, 156, 255, .42); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 216, 58, .18); }
.field input:disabled, .field textarea:disabled { background: var(--surface-2); color: var(--text-3); }
.check { color: var(--text-2); font-size: 14.5px; }
.check input, .leg label input, .pickrow input, .cs-agree input { accent-color: var(--yellow); }
input[type="range"] { accent-color: var(--yellow); }
.toggle { border: 1px solid var(--line); border-radius: var(--r2); background: transparent; }
.toggle:has(input:checked) { border-color: var(--line-2); background: var(--surface-2); }
.toggle .switch { width: 40px; height: 24px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.toggle .switch::after { top: 4px; left: 4px; width: 16px; height: 16px; background: var(--text-2); }
.toggle input:checked + .switch { background: var(--mint); box-shadow: none; }
.toggle input:checked + .switch::after { transform: translateX(16px); background: var(--on-accent); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--yellow); outline-offset: 2px; }
.toggle b { font-weight: 650; color: var(--text); }
.toggle small { color: var(--text-3); }

/* One segmented control for every either-or: the markets view, one stock or a basket, a coin's short or lend, add or
   take out, Borrow USDG or ETH, the lock length, the basket's safety. */
.seg, .cc-modes, .o-mode, .dr-seg, .beth-switch, .modes, .bk-seg {
  display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); box-shadow: none; overflow: visible;
}
.seg button, .cc-modes button, .o-mode button, .dr-seg button, .beth-tab {
  font: 600 14px/1.2 var(--ui); padding: 8px 14px; border: 0; border-radius: 8px; color: var(--text-2); background: transparent; cursor: pointer;
  min-height: 0; transition: background-color .12s, color .12s;
}
.o-mode button + button { border-left: 0; }
.seg button:hover, .cc-modes button:hover, .o-mode button:hover, .dr-seg button:hover, .beth-tab:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.seg button[aria-pressed="true"], .cc-modes button[aria-pressed="true"], .o-mode button[aria-pressed="true"], .dr-seg button[aria-checked="true"], .beth-tab[aria-selected="true"] {
  background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2);
}
.modes { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 540px; width: 100%; margin-top: 24px; }
.mode {
  padding: 10px 16px 11px; border-radius: 8px; background: transparent; color: var(--text-2); box-shadow: none; transform: none; text-align: left;
}
.mode::before { content: none; }
.mode b { font-family: var(--ui); font-size: 15px; font-weight: 700; line-height: 1.3; color: inherit; }
.mode span { font-size: 12.5px; color: var(--text-3); }
.mode:hover { color: var(--text); }
.mode[aria-selected="true"] { background: var(--surface-3); color: var(--text); transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.mode[aria-selected="true"] span { color: var(--text-2); }
.bk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-opt { background: transparent; border: 0; border-radius: 8px; color: var(--text-2); transform: none !important; box-shadow: none; }
.bk-opt b { font-family: var(--ui); font-size: 15px; font-weight: 700; }
.bk-opt small { color: var(--text-3); }
.bk-opt[aria-checked="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.bk-opt[aria-checked="true"] small { color: var(--text-2); }
.bk-safety .bk-lab { color: var(--text-2); font-size: 13.5px; }

/* ---------------------------------------------------------------- banners and notices */

.banner {
  background: transparent; border: 1px solid var(--line); border-radius: var(--r2); color: var(--text-3); font-size: 13.5px; padding: 9px 14px; margin-bottom: 8px;
}
.banner.weekend { background: rgba(255, 216, 58, .06); border-color: rgba(255, 216, 58, .28); border-left: 1px solid rgba(255, 216, 58, .28); color: var(--text-2); }
.notice { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-left: 3px solid var(--pink); border-radius: var(--r2); font-weight: 500; font-size: 14.5px; }
.notice.ok { background: var(--surface-2); border-left-color: var(--mint); }

/* ---------------------------------------------------------------- the landing: hero and its cassette */

.home .bar nav { margin-left: auto; gap: 2px; }
.home .bar > .lang { margin-left: 8px; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 40px 64px; align-items: center; padding: 56px 0 88px; }
.hero-copy { min-width: 0; }
.hero .status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 5px 12px 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .03); font-size: 13px; color: var(--text-3);
}
.hero .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(63, 224, 181, .18); }
.hero .status #sign { color: var(--text); font-weight: 600; }
/* The hero headline: the wide black cut in chrome, the one display moment besides the wordmark. */
.hero h1 {
  font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(42px, 5vw, 68px); line-height: .98; letter-spacing: -.025em;
  filter: drop-shadow(0 2px 0 rgba(255, 79, 154, .45)) drop-shadow(0 18px 30px rgba(0, 0, 0, .5));
}
.hero h1 span {
  display: block; white-space: normal; text-wrap: balance; padding-bottom: .03em;
  background: linear-gradient(180deg, #fff 0%, #f1f0ff 30%, #b6b5e6 49%, #fbfaff 54%, #dcdaf5 76%, #fff 100%) 0 0 / 100% 1em repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 span + span { margin-top: .06em; }
.hero .lede { max-width: 32em; margin-top: 24px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.hero .go { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.hero-ca {
  margin-top: 32px; max-width: 540px; padding: 12px 12px 12px 16px; gap: 12px; color: var(--text);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none;
}
.coin { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none; }
.cn-tag { transform: none; border-radius: 6px; font-family: var(--ui); font-stretch: 100%; font-size: 12.5px; font-weight: 700; padding: 4px 8px; color: var(--pink); background: rgba(255, 79, 154, .13); }
.cn-words b { font-stretch: 100%; font-size: 16px; font-weight: 650; color: var(--text); }
.cn-say { font-family: var(--ui); font-size: 14px; color: var(--text-3); }
.coin code { font: 600 14.5px/1.35 var(--ui); font-variant-numeric: tabular-nums; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.hero-ca .cn-act { order: 1; margin-left: auto; gap: 8px; }
.hero-ca .cn-words { order: 2; flex-basis: 100%; }
.cn-act .btn, .ach-note .btn { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.cn-act .btn:hover, .ach-note .btn:hover { background: var(--surface-2); }
.hero-ca .cn-tag, .cn-tag { font-size: 12.5px; }
.hero-ca.live code { display: block; width: 100%; font-size: 15px; }

/* The cassette: a glossy black shell, a cream label carrying the live drip, the smoked window and its reels. */
.cassette {
  position: relative; padding: 14px 14px 0; border-radius: var(--r4);
  background: linear-gradient(180deg, #2b2b37 0%, #131319 6%, #0c0c11 93%, #050507 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(0, 0, 0, .6),
    0 56px 96px -44px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(255, 79, 154, .22);
}
.cassette::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .025) 22%, transparent 38%);
}
.cs-label { position: relative; z-index: 1; overflow: hidden; border-radius: 9px; background: var(--cream); color: #16162b; }
/* The label's colour bands, as on a real tape label. */
.cs-label::before { content: ""; display: block; height: 12px; background: linear-gradient(var(--pink) 0 5px, var(--yellow) 5px 9px, var(--mint) 9px 12px); }
.cs-label .dband {
  --ink: #16162b; --ink-2: #4d4d72; --label: var(--cream); --paper-line: rgba(22, 22, 43, .12);
  margin: 0; padding: 14px 20px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #16162b;
}
.cs-label .dband::before { content: none; }
.cs-label .db-top { align-items: center; }
.cs-label .db-top h2 { font-family: "Gochi Hand", var(--ui); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0; color: #16162b; }
.cs-label .db-go { color: #a3104a; text-decoration-color: rgba(163, 16, 74, .4); }
.cs-label .db-go:hover { text-decoration-color: #a3104a; }
.cs-label .db-figs { margin-top: 10px; }
.cs-label .db-fig + .db-fig { border-left-color: rgba(22, 22, 43, .12); }
.cs-label .db-fig b { color: #16162b; font-size: clamp(34px, 3.4vw, 42px); }
.cs-label .db-fig span { color: #4d4d72; }
.cs-label .db-split { color: #066c50; }
.cs-label .db-board caption { color: #16162b; }
.cs-label .db-board th, .cs-label .db-board td { border-top-color: rgba(22, 22, 43, .12); }
.cs-label .db-board thead th { color: #5e5e80; }
.cs-label .db-board tbody th { color: #3d3d60; }
.cs-label .db-board td { color: #16162b; font-size: 15px; }
.cs-label .db-note, .cs-label .db-sched { color: #5a5a7c; }
.cs-label .cs-fallback { display: none; max-width: none; margin: 0; padding: 28px 22px 30px; font-size: 16px; line-height: 1.5; color: #16162b; }
.cs-fallback a { color: #a3104a; font-weight: 700; }
.cs-label:has(.dband[hidden]) .cs-fallback { display: block; }
.cs-window {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 54%; height: 36px; margin: 12px auto 13px; padding: 0 9%;
  border-radius: 7px; background: linear-gradient(transparent 58%, #3a2418 58% 68%, transparent 68%), linear-gradient(#020203, #17171e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 6px 10px rgba(0, 0, 0, .8);
}
.cs-window i { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #121217 0 2.5px, #ece6d3 3px 6px, #2a1c14 6.5px 10.5px, #45455a 11px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: no-preference) {
  .cs-window i { animation: cs-reel 6s linear infinite; }
}
@keyframes cs-reel { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the landing: sections */

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; margin-bottom: 24px; }
.sec-head h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sec-head h2::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 16px; background: var(--stripe); }
.sec-head p { max-width: 38em; font-size: 15.5px; color: var(--text-2); }
.products, .chain, .rules { padding-bottom: 96px; }

/* Products: one ruled row each, words on the left, the number that matters on the right, the whole row a link. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 12px 56px; align-items: center;
  padding: 26px 8px; border-bottom: 1px solid var(--line); transition: background-color .15s;
}
.row:hover { background: rgba(255, 255, 255, .02); }
.row h3 { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.row h3 a { color: var(--text); text-decoration: none; }
.row h3 a::after { content: ""; position: absolute; inset: 0; }
.row:hover h3 a { color: var(--yellow); }
.row h3 a:focus-visible { outline: none; }
.row:has(h3 a:focus-visible) { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 10px; }
.row p { max-width: 44em; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.row-fig { display: flex; justify-content: flex-end; align-items: center; gap: 40px; }
.fig { min-width: 0; text-align: right; }
.fig b { display: block; font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--text); white-space: nowrap; }
.fig b.small { font-size: 20px; letter-spacing: -.01em; }
.fig span, .fig b small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--text-3); white-space: normal; }
.fig.note span { max-width: 22em; margin: 0 0 0 auto; font-size: 13.5px; }
.row [data-drip-apr], .row [data-drip-day] { color: var(--mint); }
.legs-preview { display: flex; gap: 8px; }
.lp { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--bg-2); }
.lp i { font-style: normal; font-size: 12.5px; color: var(--text-3); }
.lp b { font-size: 16px; font-weight: 700; }
.lp.up b { color: var(--up); }
.lp.down b { color: var(--down); }
.basis { margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* On chain: the live panel, the latest trades, and the contracts. */
.chain-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.chain-side { display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: 20px 22px; color: var(--text); }
.panel h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.proof { padding: 0; }
.proof .pf-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 0; background: none; box-shadow: none; margin: 0; color: var(--text); }
.proof .pf-band b { font-family: var(--ui); font-stretch: 100%; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pf-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.pf-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(63, 224, 181, .16); }
.pf-lead { padding: 18px 22px 8px; min-height: 0; }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.pf-stat { min-width: 0; padding: 0 16px; border-left: 1px solid var(--line); }
.pf-stat:first-child { padding-left: 0; border-left: 0; }
.pf-stat b { display: block; font-family: var(--ui); font-stretch: 100%; font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--text); }
.pf-stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--text-3); }
.pf-big span { display: block; font-size: 13px; color: var(--text-3); }
.pf-big b { display: block; font-size: clamp(40px, 4vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1; margin-top: 6px; }
.proof p { margin: 0; max-width: none; font-size: 14px; color: var(--text-2); }
.proof .pf-sum { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pf-wait { color: var(--text-3); }
/* Lent by stock: clean bars, the dollars over each and the ticker under it. */
.pf-shelf { padding: 8px 22px 20px; }
.pf-bars { display: flex; align-items: flex-end; gap: 8px; height: 156px; margin-bottom: 26px; padding: 0; border-bottom: 1px solid var(--line-2); }
.pf-spine { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-decoration: none; color: var(--text); }
.pf-spine .v { display: block; min-height: 16px; margin-bottom: 4px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.pf-tape {
  position: relative; display: block; height: calc(var(--h, .6) * 112px); padding: 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(63, 224, 181, .85), rgba(63, 224, 181, .3)); transition: filter .15s;
}
.pf-tape b {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: auto; max-height: none; overflow: visible; padding: 0; border: 0;
  writing-mode: horizontal-tb; background: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1; color: var(--text-2); white-space: nowrap;
}
.pf-spine:hover .pf-tape, .pf-spine:focus-visible .pf-tape { transform: none; filter: brightness(1.2); }
.proof .pf-cap { margin-top: 0; font-size: 13px; color: var(--text-3); }
.pf-trades { padding: 18px 22px 14px; }
.pf-trades h3 { margin-bottom: 4px; }
.pf-trades ol { list-style: none; margin: 0; padding: 0; }
.pf-trade {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px;
}
.pf-trades li:first-child .pf-trade, .pf-trades li:first-child.pf-empty { border-top: 0; }
.pf-trade:hover .pf-kind { color: var(--yellow); }
.pf-trade b { font-weight: 650; }
.pf-trade small { text-align: right; font-size: 13px; color: var(--text-3); }
.pf-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 500; }
.pf-chip, .mt-chip {
  display: inline-block; padding: 3px 8px 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
  background: var(--surface-3); color: var(--text); box-shadow: inset 3px 0 0 var(--band, var(--pink));
}
.pf-empty { padding: 10px 0; font-size: 14px; color: var(--text-3); }
.trust-list { list-style: none; margin: 4px 0 0; padding: 0; }
.trust-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trust-list li:first-child { border-top: 0; }
.trust-list span { color: var(--text-2); }
.trust-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.trust-list a:hover { color: var(--yellow); text-decoration: underline; }
.trust-more { margin-top: 10px; font-size: 14px; }
.trust-more a { font-weight: 600; }

/* House rules: quiet rows that open. */
.rule-grid { gap: 8px; margin-top: 0; }
.rule { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--r2); }
.rule:hover { background: var(--surface-2); }
.rule summary { font-stretch: 100%; font-weight: 600; font-size: 15px; padding: 14px 16px; gap: 12px; }
.rule summary svg { width: 20px; height: 20px; color: var(--text-3); stroke-width: 1.8; }
.rule summary::after { color: var(--text-3); font-size: 22px; font-weight: 300; }
.rule p { padding: 0 18px 16px 48px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.rule[open] { background: var(--surface-2); }

.foot { border-top: 1px solid var(--line); padding: 28px 0 48px; font-size: 13.5px; color: var(--text-3); }
.foot p { max-width: 64em; }
.foot-links a { color: var(--text-2); }
.foot-links a:hover { color: var(--text); }

/* ---------------------------------------------------------------- the app: pages */

section[data-tab] { padding: 32px 0 72px; }
section[data-tab] > h1 { font-family: var(--ui); font-stretch: 100%; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
section[data-tab] > h1::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 16px; border-radius: 0; background: var(--stripe); }
section[data-tab] > h1 + p, section[data-tab] > p.soft { font-size: 15.5px; line-height: 1.55; color: var(--text-2); max-width: 46em; }
section[data-tab] > h1 + p { margin-top: 10px; }
main { padding-top: 12px; }

/* The $BORRO Drip band at the top of Markets: the dollars on the left, the board on the right. */
.app .dband {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "top board" "figs board" "split board" ". board" "sched note";
  grid-template-rows: auto auto auto 1fr auto; column-gap: 48px; align-items: start; margin-top: 24px; padding: 22px 24px 18px; background: var(--surface); border-color: var(--line); box-shadow: var(--e1);
}
.app .dband::before { left: 24px; }
.app .dband .db-top { grid-area: top; }
.app .dband .db-figs { grid-area: figs; }
.app .dband .db-split { grid-area: split; }
.app .dband .db-board { grid-area: board; margin-top: 0; }
.app .dband .db-note { grid-area: note; }
.app .dband .db-sched { grid-area: sched; align-self: end; }

/* The totals: a clean strip of five figures. */
.vcr { margin-top: 16px; padding: 0; border-radius: var(--r3); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.vcr-face { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.vcr-read { min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line); }
.vcr-read:first-child { border-left: 0; }
.vcr-read span { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-3); }
.vcr-read b { font-family: var(--ui); font-stretch: 100%; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--text); text-shadow: none; margin-top: 4px; }
.vcr-read small { font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: normal; }
.vcr-read .vcr-verify { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--yellow); text-decoration: none; }
.vcr-read .vcr-verify:hover { text-decoration: underline; }
#vUsdg { color: var(--mint); }
.vcr-deck { display: none; }
.basis { color: var(--text-3); }

/* Markets: the list's header, the table, and the tapes. */
/* Structure from the first pass (the switch and the table app-table.js builds); the look is set after it. */
.shelf-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.shelf-bar h2 { font-size: 20px; }

/* The Markets table (app-table.js). On a narrow screen it scrolls sideways inside its frame, with a fade at the
   right edge until the last column is in view. */
.mt-frame { position: relative; }
.mt-frame::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px; pointer-events: none; border-radius: 0 var(--r2) var(--r2) 0;
  background: linear-gradient(to left, rgba(22, 22, 74, .96), rgba(22, 22, 74, 0)); opacity: 0; transition: opacity .15s;
}
.mt-frame.more::after { opacity: 1; }
.mt-scroll { position: relative; overflow-x: auto; border-radius: var(--r2); background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line), var(--lift); scrollbar-width: thin; }
.mt { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.mt th, .mt td { padding: 11px 10px; text-align: right; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--line); }
.mt th:first-child { padding-left: 16px; }
.mt th:last-child, .mt td:last-child { padding-right: 14px; }
.mt tbody:last-child tr:last-child > * { border-bottom: 0; }
.mt thead th { padding-top: 13px; padding-bottom: 11px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: #13133f; }
.mt thead th:first-child { border-top-left-radius: var(--r2); }
.mt .c-sym { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--night-2); box-shadow: 1px 0 0 var(--line); cursor: pointer; }
.mt thead .c-sym { z-index: 2; background: #13133f; }
.mt tbody tr > * { background-color: var(--night-2); transition: background-color .1s; }
.mt tbody tr:hover > * { background-color: var(--night-3); }
.mt-pin tr > * { background-color: #132a46 !important; }
.mt-pin tr > * { border-bottom: 1px solid var(--line-2); }
.mt-sort { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; }
.mt-sort:hover, .mt-sort.on { color: var(--label); }
.mt-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; transition: transform .12s; }
.mt-sort:hover .mt-arrow { opacity: .5; }
.mt-sort.on .mt-arrow { opacity: 1; }
.mt-sort.on.asc .mt-arrow { transform: rotate(180deg); }
.mt td b { display: block; font-weight: 700; font-size: 15px; color: var(--label); }
.mt td b.word { font-stretch: 100%; }
.mt td b.muted { color: var(--muted); font-weight: 600; }
.mt td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mt .up { color: var(--mint) !important; }
.mt .down { color: #ff86b9 !important; }
.mt-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mt-who small { font-size: 12.5px; color: var(--muted); }
.mt-chip { font-size: 13.5px; padding: 3px 10px 3px 13px; background: var(--label); color: var(--ink); box-shadow: inset 5px 0 0 var(--band, var(--neon)); }
.mt .c-chg { min-width: 100px; }
.mt-spark { display: block; width: 84px; height: 28px; margin-left: auto; overflow: visible; }
.mt-spark .l { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mt-spark .a { stroke: none; opacity: .12; }
.mt-spark.up { color: var(--mint); } .mt-spark.up .l { stroke: var(--mint); } .mt-spark.up .a { fill: var(--mint); }
.mt-spark.down { color: var(--down); } .mt-spark.down .l { stroke: var(--down); } .mt-spark.down .a { fill: var(--down); }
.mt-meter { display: block; width: 64px; height: 4px; margin: 7px 0 0 auto; border-radius: 2px; background: rgba(251, 248, 239, .12); overflow: hidden; }
.mt-meter > i { display: block; height: 100%; background: var(--mint); }
.mt .c-act { padding-left: 4px; }
.mt-acts { display: inline-flex; gap: 4px; }
.mt .btn.sm { padding: 5px 10px; font-size: 12.5px; }
.mt-note { margin-top: var(--s3); font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.shelf-bar { margin: 32px 0 12px; }
.shelf-bar h2 { font-size: 21px; font-weight: 700; }
.mt-frame::after { background: linear-gradient(to left, rgba(18, 22, 59, .96), rgba(18, 22, 59, 0)); border-radius: 0 var(--r3) var(--r3) 0; }
.mt-scroll { border-radius: var(--r3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mt { font-size: 14.5px; }
.mt th, .mt td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.mt th:first-child { padding-left: 18px; }
.mt thead th { padding-top: 12px; padding-bottom: 11px; font-size: 12.5px; font-weight: 600; color: var(--text-3); background: var(--bg-2); }
.mt thead th:first-child { border-top-left-radius: var(--r3); }
.mt thead th:last-child { border-top-right-radius: var(--r3); }
.mt .c-sym { background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.mt thead .c-sym { background: var(--bg-2); }
.mt tbody tr > * { background-color: var(--surface); }
.mt tbody tr:hover > * { background-color: var(--surface-2); }
.mt-pin tr > * { background-color: #12203f !important; border-bottom: 1px solid var(--line-2); }
.mt-sort:hover, .mt-sort.on { color: var(--text); }
.mt td b { font-weight: 650; font-size: 15px; color: var(--text); }
.mt td b.muted { color: var(--text-3); }
.mt td small { font-size: 12px; color: var(--text-3); }
.mt .c-lend b { color: var(--mint); }
.mt .up { color: var(--up) !important; }
.mt .down { color: var(--down) !important; }
.mt-who small { color: var(--text-3); }
.mt-chip { font-size: 13px; padding: 3px 9px 3px 11px; }
.mt-meter { background: var(--surface-3); }
.mt-meter > i { background: var(--mint); }
.mt .btn.sm, .tape .btn { min-height: 30px; padding: 5px 11px; font-size: 13px; border-radius: 8px; }
/* Row actions stay quiet: tinted, not filled, so the page has one loud button at a time. */
.mt .btn.sm:not(.line), .tape .acts .btn:not(.line) { background: rgba(255, 216, 58, .12); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 216, 58, .3); }
.mt .btn.sm:not(.line):hover, .tape .acts .btn:not(.line):hover { background: rgba(255, 216, 58, .2); }
.mt-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }

/* The Tapes view keeps the video store: black shells, cream labels, a colour band, a flat price tag. */
.pile { gap: 8px; margin-top: 0; }
.tape { border-radius: var(--r2); padding: 8px 12px 8px 8px; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .9); background: linear-gradient(#26262f, #111116 16%, #111116 84%, #07070a); }
.tape .label { border-radius: 5px; border-left-width: 5px; padding: 10px 16px; color: #16162b; }
.tape .who b { font-family: var(--ui); font-weight: 750; font-size: 19px; letter-spacing: -.01em; }
.tape .who span { color: #4d4d72; }
.tape .cell span { font-size: 12.5px; color: #55557a; }
.tape .cell b { font-weight: 650; }
.tape .sticker, .tape .sticker.long, .tape .sticker.word {
  width: auto; height: auto; min-width: 92px; padding: 8px 10px; border-radius: 8px; transform: none; box-shadow: none;
  font-family: var(--ui); font-stretch: 100%; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--on-accent);
}
.tape .sticker small, .tape .sticker.word small { max-width: 96px; font-size: 10.5px; font-weight: 600; margin-top: 3px; }
.tape-usdg { background: linear-gradient(#1d5c4d, #0f362d 16%, #0f362d 84%, #071a15); }
.tape .acts .btn.line { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* The Bear Den and the achievements: panels like the rest. */
.den { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none; padding: 20px 22px 18px; }
.den-head h2 { font-size: 18px; font-weight: 700; }
.den-sub { color: var(--text-3); font-size: 14px; }
.den-tk { font: 700 14px var(--ui); letter-spacing: .01em; }
.den-meter { height: 6px; border-radius: 3px; background: var(--surface-3); }
.den-meter > i { background: var(--pink); box-shadow: none; }
.den-line { font-size: 14px; font-weight: 600; }
.den-flow, .den-foot, .den-none, .den-empty { color: var(--text-3); }
.den-quiet p { font-family: var(--ui); font-size: 15px; font-weight: 600; color: var(--text); }
.den-more { color: var(--yellow); }
.den-landing { margin-top: 16px; }
.ach { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none; }
.ach-head h2 { font-size: 18px; }
.ach-head .hand { font-family: var(--ui); font-size: 14px; color: var(--text-3); }
.tape-badge { background: var(--bg-2); border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--line); padding: 6px; }
.tb-label { background: var(--surface); color: var(--text); border-radius: 7px; }
.tb-label::before { height: 3px; border-radius: 7px 7px 0 0; }
.tb-label b { font-size: 15.5px; font-weight: 700; }
.tb-label small { color: var(--text-3); }
.tape-badge.off .tb-label { filter: none; opacity: .5; }
.tape-badge.on { box-shadow: inset 0 0 0 1px rgba(255, 216, 58, .5); }
.tb-tx, .ach-note { color: var(--text-3); }

/* ---------------------------------------------------------------- the app: picking a stock */

/* The stock picker: a row of tiles, each a ticker, its name and today's figure; the picked one outlined in yellow. */
.picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); align-items: stretch; gap: 8px; margin-top: 24px; padding: 0;
  border: 0; box-shadow: none; background: none;
}
.pk, .pk:nth-child(n) {
  position: relative; height: auto; max-width: none; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 11px 10px 10px;
  border-radius: var(--r2); background: var(--surface); border: 1px solid var(--line); box-shadow: none; transform: none; color: var(--text); text-align: left;
  transition: border-color .12s, background-color .12s;
}
.pk::before { content: ""; position: absolute; left: 10px; top: -1px; width: 18px; height: 3px; border-radius: 0 0 2px 2px; background: var(--band, var(--pink)); }
.pk:hover { transform: none; border-color: var(--line-2); background: var(--surface-2); }
.pk[aria-checked="true"] { transform: none; border-color: var(--yellow); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--yellow); }
.pk-label { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
.pk-label b { font-family: var(--ui); font-size: 15px; font-weight: 750; line-height: 1.2; letter-spacing: 0; writing-mode: horizontal-tb; }
.pk-label small { display: block; font-size: 11.5px; font-weight: 500; font-stretch: 100%; line-height: 1.25; text-align: left; color: var(--text-3); padding: 0; }
.pk-dot, .pk .pk-dot {
  position: static; transform: none; align-self: flex-start; display: inline-block; min-width: 0; width: auto; height: auto; padding: 2px 6px; border-radius: 5px;
  background: rgba(63, 224, 181, .12); color: var(--mint); box-shadow: none; font-size: 11.5px; font-weight: 700; font-stretch: 100%;
}
.pk-usdg { background: var(--surface); }
.pk-usdg .pk-dot { background: rgba(63, 224, 181, .12); }
.bc-card .bc-pick, .p-card .p-pick { margin-top: 2px; padding: 0; background: none; border-radius: 0; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.bc-card .bc-pick .pk:nth-child(n), .p-card .p-pick .pk:nth-child(n) { height: auto; max-width: none; padding: 9px 8px 8px; transform: none; }
.bc-card .bc-pick .pk-dot, .p-card .p-pick .pk-dot { width: auto; font-size: 10.5px; padding: 1px 5px; }
.bc-card .bc-pick .pk-label b, .p-card .p-pick .pk-label b { font-size: 14px; }

/* The limit meter: an instrument's needle on the card itself. */
.gauge { max-width: 260px; }
.g-bezel, .g-face { fill: transparent; }
.g-zone { stroke-width: 9; opacity: .9; }
.g-ok { stroke: var(--mint); }
.g-warn { stroke: var(--yellow); }
.g-bad { stroke: var(--pink); }
.g-ticks path { stroke: var(--text-3); stroke-width: 1.5; }
.g-end { font: 600 11px var(--ui); fill: var(--text-3); }
.g-needle path { stroke: var(--text); stroke-width: 3; }
.g-needle circle { fill: var(--text); }
.g-needle .g-pin { fill: var(--pink); }
.g-read b { font-family: var(--ui); font-stretch: 100%; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.g-read span { font-family: var(--ui); font-size: 13px; font-weight: 500; color: var(--text-3); }
.gauge.warn .g-read b { color: var(--yellow); }
.gauge.bad .g-read b { color: var(--down); }
.meter { height: 6px; background: var(--surface-3); }
.alloc { gap: 8px; }
.a-row > b { font-family: var(--ui); font-size: 13px; font-weight: 700; }
.a-bar { height: 8px; border-radius: 4px; background: var(--surface-3); }
.a-row > span { color: var(--text-3); }
.exit[open] { background: var(--bg-2); border: 1px solid rgba(255, 79, 154, .35); border-radius: var(--r2); }

/* What lenders get: two quiet badges. */
.earns { gap: 12px; margin: 4px 0 4px; }
.earn { grid-template-columns: 72px minmax(0, 1fr); }
.e-tag {
  transform: none; box-shadow: none; border-radius: 6px; padding: 4px 8px; font-family: var(--ui); font-stretch: 100%; font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; text-transform: none; background: rgba(255, 216, 58, .13); color: var(--yellow);
}
.e-tag.e-borro { background: rgba(255, 79, 154, .14); color: #ff8cbd; }
.earn p { font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* Your APR (dripband.css) inside the dark cards: a well, the mint figure the loudest thing in the form. */
.card .yapr { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); margin: 4px 0 16px; padding: 16px 18px 14px; }
.card .yapr.sm { margin-top: 16px; }

/* ---------------------------------------------------------------- the app: shorts, baskets, pairs */

.presets-note { font-family: var(--ui); font-size: 13.5px; color: var(--text-3); }
.preset {
  border-radius: var(--r2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); padding: 12px 12px 12px 20px; transform: none;
}
.preset::before { left: 8px; width: 3px; }
.preset:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.preset .p-studio { letter-spacing: 0; font-weight: 600; color: var(--text-3); }
.preset b { font-stretch: 100%; font-weight: 700; font-size: 15px; }
.preset .p-tickers { color: var(--yellow); }
.preset .hand { font-family: var(--ui); font-size: 12.5px; color: var(--mint); }
.preset[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.bag { margin-top: 16px; padding: 10px; border-radius: var(--r2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); min-height: 84px; }
.bag::before { content: none; }
.bag i { border-radius: 6px; background: var(--surface-2); border-top: 3px solid var(--band, var(--pink)); color: var(--text); }
.bag i b { font-family: var(--ui); font-size: 15px; font-weight: 750; }
.bag-empty { font-size: 14px; color: var(--text-3); }
.leg { border: 1px solid var(--line); border-radius: var(--r2); }
.leg.on { border-color: rgba(255, 216, 58, .55); background: var(--surface-2); }
.leg label b, .pickrow b { font-family: var(--ui); font-size: 15px; font-weight: 750; }
.leg .rate { color: var(--text-3); }
.leg .w { color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; }
.p-link { color: var(--yellow); background: transparent; border: 1px solid rgba(255, 216, 58, .45); border-radius: 6px; padding: 0 7px; }
.p-row, .o-mine, .bc-steps li, .bk-row { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r2); color: var(--text); }
.p-pnl.up, .bc-coin .facts b.up, .o-cell.ok span { color: var(--up); }
.p-pnl.down, .bc-coin .facts b.down, .cc-sum li.bad b { color: var(--down); }
.bk-head { background: transparent; border-color: transparent; color: var(--text-3); }
.bk-sym b, .bk-legs-now li > span:first-child b { font-family: var(--ui); font-size: 15px; font-weight: 750; }
.bk-sym small, .bk-c i, .bk-legs-now li > span:first-child small { color: var(--text-3); }
.bk-offer { background: rgba(255, 216, 58, .06); border: 1px solid rgba(255, 216, 58, .3); border-left: 3px solid var(--yellow); border-radius: var(--r2); color: var(--text); }
.bk-badge { background: rgba(255, 79, 154, .16); color: #ff8cbd; letter-spacing: .02em; }
.bk-badge.long { background: rgba(63, 224, 181, .14); color: var(--mint); }
.ethpay-toggle { color: var(--yellow); font-size: 14px; font-weight: 600; }
.ethpay-body { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r2); }
.ethpay-what { color: var(--text); }
.ethpay-slip { color: var(--text-3); }
.ethpay-slip .chip { color: var(--text-2); border: 1px solid var(--line-2); }
.ethpay-slip .chip[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.t-presets { color: var(--text-3); }
.lever { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.lever-title { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; }
.beth-switch { margin-bottom: 20px; }
.beth-weekend { background: rgba(255, 216, 58, .06); box-shadow: inset 0 0 0 1px rgba(255, 216, 58, .28); border-radius: var(--r2); }

/* What can go wrong: one risk box everywhere, a pink rule down its edge. */
.card.bc-risk { border-left: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--pink), var(--e1); }
.bc-risks li { font-size: 14.5px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.bc-risks b { font-size: 15px; color: var(--text); margin-bottom: 2px; }
.risks li { background: var(--bg-2); border-left: 2px solid var(--pink); border-radius: 0 8px 8px 0; color: var(--text-2); font-size: 14.5px; }
.risks li:nth-child(n) { border-left-color: var(--pink); }
.risks li b { color: var(--text); }

/* ---------------------------------------------------------------- the app: bear coins, coin shorts, pools */

.bc-off { border-left: 1px solid var(--line); }
.bc-thumb, .bc-logo { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--yellow); }
.bc-steps li { border: 1px solid var(--line); }
.bc-steps li > i { background: var(--surface-3); color: var(--text); }
.bc-steps li span { color: var(--text-3); }
.bc-steps li[data-state="now"] { border-color: rgba(255, 216, 58, .6); box-shadow: 0 0 0 3px rgba(255, 216, 58, .12); }
.bc-steps li[data-state="now"] > i { background: var(--yellow); color: var(--on-accent); }
.bc-steps li[data-state="done"] > i { background: var(--mint); color: var(--on-accent); }
.bc-head { margin-top: 48px; }
.bc-head h2 { font-size: clamp(24px, 2.6vw, 30px); }
.bc-head .hand { font-family: var(--ui); font-size: 14px; color: var(--text-3); }
.bc-list .empty { color: var(--text-3); }
.bc-coin { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); }
.bc-who b { font-stretch: 100%; font-weight: 700; }
.bc-who span { color: var(--text-3); }
.bc-stock { transform: none; background: var(--surface-3); color: var(--yellow); border-radius: 6px; }
.bc-warn { background: rgba(255, 79, 154, .08); border-left: 2px solid var(--pink); color: var(--text); border-radius: 0 6px 6px 0; }
.bc-go a { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 8px; }
.bc-go a:hover { background: var(--surface-2); }
.cc-row {
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r2); transform: none;
}
.cc-row:hover, .cc-row.on { transform: none; box-shadow: none; background: var(--surface-2); border-color: var(--line-2); }
.cc-row.on { border-color: var(--yellow); }
.cc-sym b { font-stretch: 100%; font-weight: 750; }
.cc-sym small, .cc-num small, .cc-sq small, .cc-ca, .cc-facts dt, .cc-sum li span, .cc-checks li small { color: var(--text-3); }
.cc-sq small { color: var(--text); }
.cc-meter { height: 8px; background: var(--surface-3); border: 0; }
.cc-sum li { border-bottom: 1px solid var(--line); }
.cc-checks i { border: 1px solid var(--line-2); }
.cc-checks li.ok i { background: rgba(63, 224, 181, .16); color: var(--mint); border-color: transparent; }
.cc-checks li.no i { background: rgba(255, 79, 154, .16); color: #ff8cbd; border-color: transparent; }
.o-row { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: none; }
.o-row:hover { background: var(--surface-2); }
.o-row.on { box-shadow: inset 3px 0 0 var(--yellow); }
.o-cell small { color: var(--text-3); }
.o-cell.warn span { color: var(--yellow); }

/* ---------------------------------------------------------------- the app: dashboard */

.dash-empty { display: none; align-items: center; gap: 24px; margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); }
.app:not(.connected) .dash-empty { display: flex; }
.app:not(.connected) section[data-tab="dashboard"] > :is(.dash-top, .cols, .card) { display: none; }
.dash-empty img { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 5px var(--bg-2); }
.dash-empty h2 { font-size: 21px; }
.dash-empty p { margin-top: 6px; color: var(--text-2); font-size: 15px; }
.dash-empty .btn { margin-top: 16px; }
.dash-top { gap: 16px; align-items: stretch; margin-top: 24px; }
.member { transform: none; max-width: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none; }
.member::after { content: none; }
.m-band { background: transparent; color: var(--text); border-bottom: 1px solid var(--line); padding: 16px 22px; }
.m-band b { font-family: var(--ui); font-stretch: 100%; font-size: 15px; font-weight: 700; }
.m-band .hand { font-size: 13px; color: var(--text-3); transform: none; }
.m-who span, .m-nums span { font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-3); }
.m-who b { font-family: var(--ui); font-size: 17px; font-weight: 650; }
.m-nums b { font-stretch: 100%; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.m-code { display: none; }
.m-foot .hand { font-size: 13px; color: var(--text-3); }
.m-stamp { transform: none; top: 16px; right: 18px; padding: 2px 8px; border-width: 1px; border-radius: 6px; font-size: 12px; letter-spacing: .02em; background: transparent; opacity: 1; }
.m-stamp.good { color: var(--mint); }
.m-stamp.warn { color: var(--yellow); }
.m-stamp.bad { color: var(--down); }
.receipt, .receipt.till {
  transform: none; -webkit-mask: none; mask: none; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3);
  font-stretch: 100%; font-size: 15px; padding: 18px 22px 20px; box-shadow: none;
}
.r-top b { font-family: var(--ui); font-stretch: 100%; font-size: 15px; font-weight: 700; }
.r-top .hand { font-size: 13px; color: var(--text-3); }
.receipt li { border-bottom: 1px solid var(--line); }
.receipt li span { color: var(--text-2); }
.receipt li.r-rule { border-bottom-color: var(--line-2); }
.receipt li.r-total { border-top: 1px solid var(--line-2); font-size: 18px; }
.receipt li.r-total span { color: var(--text); }
.receipt li.r-note { color: var(--text-3); }
.receipt .up { color: var(--up); }
.receipt .down { color: var(--down); }
.r-foot { font-size: 13px; color: var(--text-3); }

/* ---------------------------------------------------------------- the app: rewards and the prize */

section[data-tab="rewards"] .coin { margin: 20px 0 8px; }
.coupon {
  transform: none; -webkit-mask: none; mask: none; filter: none; --stub: 168px; margin-top: 20px; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden;
}
.c-main { border-right: 1px dashed var(--line-2); padding: 20px 22px; }
.c-main .hand { font-size: 13px; color: var(--text-3); }
.c-main b { font-family: var(--ui); font-stretch: 100%; font-size: clamp(36px, 4vw, 48px); font-weight: 700; letter-spacing: -.035em; }
.c-unit { letter-spacing: .02em; font-size: 13px; font-weight: 600; color: var(--text-3); }
.c-main p { color: var(--text-2); font-size: 14px; }
.c-stub { background: var(--bg-2); }
.c-admit { display: none; }
.coupon.dim .c-stub { background: var(--bg-2); }
.pools { gap: 12px; }
.pool { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); padding: 18px 20px; }
.pool b { font-stretch: 100%; font-size: 16px; font-weight: 700; }
.pool span { color: var(--text-2); }
.pool a { color: var(--yellow); font-weight: 600; }
.p-pic { display: none; }
.sp-sticker, .dr-sticker {
  transform: none; box-shadow: none; font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 4px 10px; border-radius: 999px;
}
.sp-sticker { background: rgba(255, 216, 58, .13); color: var(--yellow); }
.dr-sticker { background: rgba(63, 224, 181, .13); color: var(--mint); }
.sp-box { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r2); }
.sp-box::after { opacity: .5; height: 4px; margin-top: -2px; }
.sp-tape { background: var(--surface-2); }
.sp-label b { font-stretch: 100%; }
.sp-label small { color: var(--text-3); }
.sp-out { font-family: var(--ui); font-size: 13px; color: var(--text-2); }
.dr-steps { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r2); }
.dr-well { border-bottom-color: var(--line-2); }
.dr-bar { background: var(--surface-3); box-shadow: none; }
.dr-step.past .dr-bar { background: rgba(63, 224, 181, .2); box-shadow: inset 0 2px 0 var(--mint); }
.dr-step.now .dr-bar { background: rgba(255, 216, 58, .2); box-shadow: inset 0 2px 0 var(--yellow); }
.dr-step.now .dr-label { border-left-color: var(--yellow); }
.dr-label { border-left-width: 3px; }
.dr-track { background: var(--surface-3); }
.dr-fill { background: var(--yellow); }
.dr-status { background: rgba(255, 216, 58, .08); border: 1px solid rgba(255, 216, 58, .28); color: var(--text); }
.dr-stats { border-top-color: var(--line); border-bottom-color: var(--line); }
.dr-stats li + li { border-left: 1px solid var(--line); }
.dr-stats span { color: var(--text-3); }
.dr-claim { background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--mint); color: var(--text); }
.dr-claim.dim { border-left-color: var(--line-2); }
.dr-amount .hand { font-family: var(--ui); font-size: 13px; color: var(--text-3); }
.dr-claim .c-unit { color: var(--text-3); }
.dr-amount b { font-family: var(--ui); font-stretch: 100%; font-weight: 700; letter-spacing: -.035em; }
.dr-claim p { color: var(--text-3); }
.dr-pos li { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.dr-tag b { background: var(--surface-3); color: var(--text); }
.dr-lock { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r3); }
.dr-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dr-warn { background: rgba(255, 79, 154, .07); border-left: 2px solid var(--pink); color: var(--text-2); }
.dr-warn b { color: var(--text); }

/* The weekly prize: the pot as a figure, the arcade kept (its pixel face is the Prize tab's one 90s screen) but calm. */
.marquee, .marquee:hover, .marquee:focus-visible { display: block; padding: 0; border-radius: var(--r3); background: var(--surface); border: 1px solid var(--line); animation: none; }
.board { background: none; border: 0; box-shadow: none; text-align: left; padding: 20px 22px; }
.board .hand { font-size: 13px; color: var(--text-3); text-shadow: none; }
.board b { font-family: var(--ui); font-stretch: 100%; font-size: clamp(40px, 5vw, 56px); font-weight: 700; letter-spacing: -.04em; color: var(--text); text-shadow: none; margin: 4px 0 6px; }
.board b.small { font-size: 26px; }
.marquee.in-app .board span:last-child { color: var(--text-2); }
.arc-screen {
  border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none;
  background: radial-gradient(ellipse at 50% 30%, #11143c 0%, #080a20 75%);
}
.arc-screen::after { content: none; }
.arc-title { text-shadow: 0 0 10px rgba(255, 79, 154, .45), 2px 2px 0 #3a0c22; }
.arc-jack b, .arc-row.r1, .arc-empty .arc-coin { text-shadow: 0 0 8px rgba(255, 216, 58, .4); }
.arc-row.r2, .arc-row.r3, .arc-clock .time { text-shadow: none; }
.arc-row .up { animation: none; }
.arc-empty .arc-coin { animation: none; }
.arc-foot { color: var(--text-3); }
.arc-hall { background: var(--bg-2); border: 1px solid rgba(255, 216, 58, .4); box-shadow: none; }

/* ---------------------------------------------------------------- the app: rules */

.verify .lead, .agents .lead { color: var(--text-2); }
.verify .lead code, .v-id code, .agents code { font: 600 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg-2); color: var(--text); border-radius: 6px; }
.agents pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r2); }
.v-total { background: var(--bg-2); color: var(--text); border: 1px solid var(--line); font-stretch: 100%; font-weight: 650; }
.v-row { border-bottom: 1px solid var(--line); }
.v-name small, .v-num small { color: var(--text-3); }
.v-num span, .v-id > span { letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.v-id a { color: var(--yellow); }
#verify, #agents { scroll-margin-top: 120px; }

/* ---------------------------------------------------------------- the Terminal */

.term { --t-bg: var(--bg-2); --t-panel: var(--surface); --t-line: var(--line); --t-dim: var(--text-3); --t-up: var(--up); --t-down: var(--down); border-radius: var(--r3); box-shadow: none; color: var(--text); }
.term::after { content: none; }
.t-status, .t-watch, .t-chart, .t-panel { border-radius: var(--r2); }
.t-head, .t-status, .t-cols, .t-tabs button, .t-table th, .t-keys, .t-paused, .t-frames button, .t-empty, .t-chartmsg { font-family: var(--ui); letter-spacing: .02em; }
.t-status { font-size: 12.5px; font-weight: 600; }
.t-status b { font-weight: 700; color: var(--text); text-shadow: none; }
.t-head { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.t-head input { font: 500 13px var(--ui); background: var(--bg-2); color: var(--text); border-color: var(--line-2); border-radius: 6px; }
.t-cols { font-size: 11.5px; font-weight: 600; }
#tWatch .tk { font: 700 14px var(--ui); letter-spacing: 0; color: var(--text); }
#tWatch li.on { background: var(--surface-2); border-left-color: var(--yellow); }
#tWatch li:hover { background: var(--surface-2); }
.t-sym b { font: 700 18px var(--ui); letter-spacing: -.01em; color: var(--text); }
.t-frames button { font-size: 12px; font-weight: 600; border-radius: 6px; }
.t-frames button[aria-pressed="true"] { color: var(--on-accent); background: var(--yellow); border-color: var(--yellow); }
.t-tabs button { font-size: 12.5px; font-weight: 600; }
.t-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--yellow); }
.t-table th { font-size: 12px; font-weight: 600; }
.t-table .t-link { font: 700 14px var(--ui); }
.t-empty, .t-chartmsg { font-size: 14px; }
.t-badges-k, .t-badges-none, .t-badge, #tWatch .tw-bear { font-family: var(--ui); font-size: 12px; letter-spacing: .02em; }
.t-ticket > .card h2 { font-size: 19px; }
.t-credit, .t-credit a { color: var(--text-3); }
@media (max-width: 860px) {
  .t-table td::before { font: 600 12px var(--ui); letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- dialogs: the wallet picker and the terms step */

.wallets { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 40px 100px rgba(3, 4, 18, .7); }
.wallets::backdrop, dialog.consent::backdrop { background: rgba(5, 6, 22, .72); backdrop-filter: blur(4px); }
.w-head h2 { font-size: 21px; }
.w-head .hand { font-size: 13.5px; color: var(--text-3); transform: none; }
.w-pick { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r2); padding: 10px 12px; color: var(--text); transform: none; }
.w-pick:hover, .w-pick:focus-visible { transform: none; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface-2); }
.w-label { background: none; border-left: 0; padding: 0; color: var(--text); }
.w-label b { font-family: var(--ui); font-size: 16px; font-weight: 650; }
.w-letter { background: var(--surface-3); color: var(--text); font-family: var(--ui); font-weight: 700; font-size: 15px; }
.w-last { transform: none; box-shadow: none; background: rgba(255, 216, 58, .14); color: var(--yellow); border-radius: 6px; font-stretch: 100%; }
.w-last.w-on { background: rgba(63, 224, 181, .14); color: var(--mint); }
.w-none { text-align: left; }
.w-none p { color: var(--text-2); }
.w-bernie { display: block; width: 72px; height: 72px; margin: 16px 0 4px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px var(--bg-2); }
.w-foot { color: var(--text-3); }
/* The terms step (consent.js): structure from the first pass, the look after it. */
dialog.consent {
  padding: 0; border: 0; border-radius: var(--r3); width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--label); color: var(--ink); box-shadow: 0 30px 80px rgba(6, 6, 30, .6);
}
dialog.consent::backdrop { background: rgba(8, 8, 30, .72); backdrop-filter: blur(3px); }
.cs-head { padding: var(--s5) var(--s5) var(--s2); }
.cs-stripe { display: flex; margin-bottom: var(--s4); }
.cs-stripe i { width: 20px; height: 4px; background: var(--neon); }
.cs-stripe i + i { background: var(--sticker); }
.cs-stripe i + i + i { background: var(--mint); }
.cs-head h2 { font-size: 21px; }
.cs-head p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.cs-list { list-style: none; margin: var(--s2) var(--s5) 0; padding: 0; }
.cs-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: 10px 0; border-top: 1px solid var(--paper-line); }
.cs-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r1); background: #efe9d6; color: var(--ink); }
.cs-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cs-list b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.cs-list li > span:last-child > span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.cs-agree {
  display: flex; gap: 10px; align-items: center; margin: var(--s3) var(--s5) 0; padding: 12px 14px; cursor: pointer;
  background: #fff; border: 1px solid rgba(22, 22, 43, .14); border-radius: 10px; font-size: 14.5px; line-height: 1.35;
}
.cs-agree input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.cs-agree a { color: #b3124f; font-weight: 700; text-underline-offset: 3px; }
.cs-btns { display: flex; justify-content: flex-end; gap: 10px; padding: var(--s4) var(--s5) var(--s5); }
dialog.consent .btn.line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(22, 22, 43, .45); }
dialog.consent .btn.line:hover { background: rgba(22, 22, 43, .06); }
dialog.consent { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 40px 100px rgba(3, 4, 18, .7); }
.cs-head p, .cs-list li > span:last-child > span { color: var(--text-2); }
.cs-list li { border-top: 1px solid var(--line); }
.cs-icon { background: var(--surface-3); color: var(--text); }
.cs-agree { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); }
.cs-agree a { color: var(--yellow); }

/* ---------------------------------------------------------------- Terms and Privacy */

body.doc .bar nav { display: flex; gap: 2px; width: auto; margin-left: auto; }
body.doc .bar > nav a { padding: 8px 12px; text-align: left; background: none; border-radius: 8px; }

.legal { margin: 32px 0 48px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: none; }
.legal h1 { font-family: var(--ui); font-stretch: 100%; font-weight: 700; font-size: clamp(32px, 4vw, 44px); letter-spacing: -.03em; }
.legal .updated { font-family: var(--ui); font-size: 14px; color: var(--text-3); }
.legal .lead { color: var(--text); }
.legal .toc { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r2); }
.legal .toc a { color: var(--text-2); }
.legal h2 { font-size: 20px; font-weight: 700; }
.legal h2 span { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--yellow); }
.legal p, .legal li { color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.legal a { color: var(--yellow); }
.legal .governs { background: rgba(255, 216, 58, .07); border-color: rgba(255, 216, 58, .3); color: var(--text-2); }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 32px 40px; }
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 12px 32px; }
  .vcr-face { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcr-read:nth-child(4) { border-left: 0; }
  .vcr-read:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .app .dband { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "top" "figs" "split" "board" "note" "sched"; }
  .app .dband .db-board { margin-top: 16px; }
  .chain-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .wrap { width: min(1200px, 100% - 32px); }
  /* One column: the status and the headline, then the cassette with the drip, then the words and the buttons, so the
     drip's numbers are on the first screen. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 64px; }
  .hero-copy { display: contents; }
  .hero .status { order: 1; justify-self: start; margin-bottom: 14px; }
  .hero h1 { order: 2; }
  .hero > .cassette { order: 3; margin-top: 20px; }
  .hero .lede { order: 4; }
  .hero .go { order: 5; }
  .hero .hero-ca { order: 6; }
  .hero > .cassette, .hero .hero-ca { width: 100%; max-width: 560px; }
  .row { grid-template-columns: minmax(0, 1fr); padding: 22px 4px; }
  .row-fig { justify-content: flex-start; }
  .fig { text-align: left; }
  .fig.note span { margin: 0; }
  .card { padding: 20px 18px; }
  .dash-top { grid-template-columns: minmax(0, 1fr); }
  .vcr-face { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcr-read:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .vcr-read:nth-child(even) { border-left: 1px solid var(--line); }
  .vcr-read:first-child, .vcr-read:nth-child(2) { border-top: 0; }
  .vcr-free { grid-column: auto; padding: 18px 20px; border-top: 1px solid var(--line); border-bottom: 0; }
  .vcr-read.vcr-free:nth-child(3) { border-top: 1px solid var(--line); }
  /* The four section links stay on a phone: Markets was the one people look for, and hiding the row left no way to it
     except scrolling past the cassette to "See the markets". */
  body.home .bar nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0; order: 3;
  }
  body.home .bar nav a { text-align: center; padding: 8px 2px; font-size: 14px; background: none; border-radius: 8px; }
  body.doc .bar nav { order: 3; flex: 0 0 100%; margin: 0 0 0 -12px; }
  body .bar:not(:has(> nav.tabs)) > .lang { margin-left: auto; }
}
/* A phone cannot reach Supply, Borrow and Short: they sit at the end of a table wider than the screen. Each market
   becomes a card, name and price on the first line, the buttons on the last, so a tap lands on that market. */
@media (max-width: 720px) {
  .mt, .mt-pin, .mt-body { display: block; width: 100%; }
  .mt { min-width: 0; }
  .mt thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
  .mt-pin tr, .mt-body tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .mt-pin tr { background: #12203f; }
  .mt th, .mt td {
    display: block; position: static; border: 0; padding: 0; text-align: left; white-space: normal;
    background: transparent !important; box-shadow: none;
  }
  .mt .c-sym { grid-column: 1; }
  .mt .c-price { grid-column: 2; text-align: right; }
  .mt .c-price b { font-size: 16px; }
  .mt .c-lend, .mt .c-short, .mt .c-borrow, .mt .c-free, .mt .c-util, .mt .c-chg { grid-column: 1 / -1; }
  .mt td::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--text-3);
  }
  .mt .c-act { grid-column: 1 / -1; padding-top: 2px; }
  .mt-acts { display: flex; flex-wrap: wrap; }
  .mt-frame.more::after { opacity: 0; }
}
@media (max-width: 720px) {
  section[data-tab] { padding-top: 24px; }
  .app .bar > nav.tabs { margin-left: -10px; }
  .app .bar > nav.tabs button { padding: 9px 10px 12px; font-size: 13.5px; }
  .app .bar > nav.tabs button[aria-current="page"]::after { left: 10px; right: 10px; }
}
@media (max-width: 620px) {
  .bar { gap: 8px; }
  .wrap > .bar > .lang, .bar > .lang { order: 0; margin: 0 0 0 auto; }
  .bar > .lang ~ .snd { margin-left: 0; }
  .lang a { padding: 4px 6px; font-size: 12px; }
  .lang .l-full { display: none; }
  .lang .l-short { display: inline; }
  .snd { width: 32px; height: 32px; }
  .bar > .btn.sm { padding: 6px 10px; font-size: 13px; }
  .hero h1 { font-size: clamp(30px, 9.2vw, 40px); font-stretch: 118%; }
  .hero .lede { font-size: 16.5px; margin-top: 20px; }
  .hero .go { gap: 20px; margin-top: 24px; }
  .cassette { padding: 10px 10px 0; border-radius: 16px; }
  .cs-label .dband { padding: 12px 14px 12px; }
  .cs-label .db-top h2 { font-size: 26px; }
  .cs-label .db-fig b { font-size: 30px; }
  .cs-label .dband .db-figs { margin-top: 8px; gap: 12px; }
  .cs-label .dband .db-fig + .db-fig { padding-left: 12px; }
  .cs-label .dband .db-split { margin-top: 8px; font-size: 13.5px; }
  .cs-label .dband .db-board { margin-top: 10px; font-size: 14px; }
  .cs-label .dband .db-board th, .cs-label .dband .db-board td { padding: 6px 0; }
  .cs-label .dband .db-note { margin-top: 8px; }
  .cs-window { height: 30px; margin: 9px auto 10px; }
  .cs-window i { width: 20px; height: 20px; }
  .sec-head { margin-bottom: 16px; }
  .row-fig { gap: 24px; }
  .fig b { font-size: 30px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .pf-stats:not(.three) .pf-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .pf-stat b { font-size: 28px; }
  .pf-stats.three .pf-stat b { font-size: 20px; }
  .pf-stats.three .pf-stat { padding: 0 8px; }
  .pf-stats.three .pf-stat:first-child { padding-left: 0; }
  .proof .pf-band, .pf-lead, .pf-shelf, .pf-trades, .panel { padding-left: 16px; padding-right: 16px; }
  .pf-bars { gap: 4px; height: 136px; }
  .pf-tape { height: calc(var(--h, .6) * 96px); }
  .pf-tape b { font-size: 10px; }
  .pf-spine .v { font-size: 9.5px; }
  .pf-trade { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; font-size: 13.5px; }
  .rule p { padding-left: 16px; }
  .shelf-bar { margin-top: 24px; }
  .tape .sticker, .tape .sticker.long, .tape .sticker.word { min-width: 0; }
  .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pk, .pk:nth-child(n) { padding: 9px 8px 8px; }
  .pk-label b { font-size: 14px; }
  .pk-label small { display: none; }
  .pk-dot, .pk .pk-dot { font-size: 10.5px; padding: 1px 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modes { max-width: none; }
  .mode { padding: 9px 12px 10px; }
  .mode span { font-size: 12px; }
  .vcr-read { padding: 14px 16px; }
  .vcr-read b { font-size: 24px; }
  .app .dband { padding: 18px 16px 14px; }
  .dash-empty { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .c-main { padding: 18px 16px; }
  .coupon { --stub: 116px; }
}
@media (max-width: 420px) {
  .app .brand { font-size: 0; gap: 0; }
  .app .brand img { width: 30px; height: 30px; }
  .fig b { font-size: 28px; }
  .row-fig.two { flex-wrap: wrap; row-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-window i, .pf-live i, .marquee:hover, .marquee:focus-visible { animation: none; }
}