:root {
  color-scheme: light;
  --bg: #f6f5f1; --surface: #ffffff; --surface-2: #efeee9; --surface-3: #e5e4de;
  --line: rgba(18, 18, 22, .08); --line-strong: rgba(18, 18, 22, .15);
  --strong: #121216; --text: #3f3e46; --fog: #6c6b74; --label: #8b8a92;
  --accent: #ff5a1f; --accent-text: #d9480f; --accent-soft: rgba(255, 90, 31, .1);
  --pos: #0b9a6a; --neg: #d63a52;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 12px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(18, 18, 22, .04), 0 10px 28px -14px rgba(18, 18, 22, .16);
  --w: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body { position: relative; display: flex; flex-direction: column; min-width: 320px; min-height: 100vh; margin: 0; color: var(--text);
       font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-soft); color: var(--strong); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
main { flex: 1 0 auto; width: min(var(--w), calc(100% - 36px)); margin: 0 auto; padding: 44px 0 96px; }

a { color: var(--strong); text-decoration: underline; text-decoration-color: rgba(255, 90, 31, .5);
    text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a:hover { text-decoration-color: var(--accent); }
p { margin: 0 0 14px; }
strong { color: var(--strong); }
h1, h2 { color: var(--strong); font-family: var(--display); font-weight: 400; letter-spacing: -.015em; }
h1 { margin: 0 0 14px; font-size: clamp(40px, 5vw, 64px); line-height: 1; }
h2 { margin: 0 0 8px; font-size: clamp(32px, 3.4vw, 42px); line-height: 1.05; }
h3 { margin: 0 0 6px; color: var(--strong); font: 600 16.5px/1.3 var(--body); letter-spacing: -.01em; }
.dim { color: var(--fog); }
.pos { color: var(--pos) !important; }
.neg { color: var(--neg) !important; }
.k { margin: 0; color: var(--label); font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* header: one thin bar */
header.site { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(246, 245, 241, .88);
              backdrop-filter: saturate(1.4) blur(12px); }
header.site .bar { display: flex; align-items: center; gap: 24px; width: min(var(--w), calc(100% - 36px)); height: 52px; margin: 0 auto; }
.brand { display: inline-flex; flex: none; align-items: center; text-decoration: none; }
.brand img { display: block; width: auto; height: 17px; }
.actions { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.ca-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 3px 0 10px;
           border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--label);
           font: 600 10.5px/1 var(--mono); letter-spacing: .06em; }
.ca { overflow: hidden; color: var(--strong); font-weight: 500; letter-spacing: 0; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.copy { flex: none; margin-left: auto; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--surface-2);
        color: var(--text); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.copy:hover { background: var(--surface-3); color: var(--strong); }
.icon-link { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px;
             border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--strong);
             text-decoration: none; transition: border-color .15s, background .15s; }
.icon-link:hover, .icon-link[aria-current] { border-color: var(--line-strong); background: var(--surface-2); }
/* on phones the actions fold into a menu behind the hamburger */
.burger { display: none; flex: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 0 9px;
          border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.burger span { display: block; height: 1.5px; border-radius: 1px; background: var(--strong); transition: transform .18s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu { display: none; gap: 4px; width: calc(100% - 24px); margin: 0 auto; padding: 8px 0 12px; }
.menu[hidden] { display: none; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--strong);
          font: 500 15px/1.2 var(--body); text-decoration: none; }
.menu a:hover, .menu a[aria-current] { background: var(--surface-2); }
.menu a svg { flex: none; }
.menu .ca-pill { height: 40px; margin-top: 4px; }

/* buttons, badges, chips */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
          border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--strong);
          font: 600 13.5px/1 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.button:hover { border-color: rgba(18, 18, 22, .28); }
.button.primary { border-color: var(--strong); background: var(--strong); color: #fff; }
.button.primary:hover { background: #000; }
.button.icon { width: 38px; padding: 0; }
.badge { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 24px; padding: 0 10px; border-radius: 999px;
         background: var(--surface-2); color: var(--fog); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
         white-space: nowrap; }
.badge i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--label); color: var(--accent); }
.badge.live { background: var(--accent-soft); color: var(--accent-text); }
.badge.live i { background: var(--accent); }
.badge.live i::after { content: ""; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: 50%;
                       animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
/* home: a dark hero card, the latest swaps, then the pals */
main.home { padding: 24px 0 64px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: 28px 32px;
        border-radius: var(--r-lg); background: #121216; color: rgba(255, 255, 255, .68); }
.eyebrow { margin: 0 0 12px; color: rgba(255, 255, 255, .5); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin: 0 0 10px; color: #fff; font: 600 clamp(28px, 3.2vw, 38px)/1.08 var(--body); letter-spacing: -.035em; }
.hero-text > p:not(.eyebrow) { max-width: 560px; margin: 0; font-size: 14.5px; line-height: 1.55; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 22px 0 24px; }
.hero-stats dt { color: rgba(255, 255, 255, .45); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-stats dd { margin: 7px 0 0; color: #fff; font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero .button.ghost, .soon .button.ghost { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; }
.hero .button.ghost:hover, .soon .button.ghost:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); }
/* The first button showing is the white one. */
.hero .button.light, .hero .button[hidden] + .button { border-color: #fff; background: #fff; color: var(--strong); }
.hero .button.light:hover, .hero .button[hidden] + .button:hover { background: #e9e8e4; }
.text-link { padding: 0 6px; color: rgba(255, 255, 255, .6); font: 500 13px/1 var(--body); text-decoration: none; }
.text-link:hover { color: #fff; }
/* the chamber in the hero: Toly's stream, and his state under it; the player takes no clicks, the card is the link */
.hero-chamber { display: grid; width: 420px; max-width: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
                background: #000; color: #fff; text-decoration: none; transition: border-color .15s; }
.hero-chamber:hover { border-color: rgba(255, 255, 255, .3); }
.hero-chamber .screen { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.hero-chamber .screen > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.hero-chamber .screen img { object-fit: cover; filter: grayscale(.4) brightness(.7); }
.hero-chamber .screen img.poster { filter: blur(2px) brightness(.8); opacity: 0; transition: opacity .3s ease; }
.hero-chamber .screen iframe { opacity: 0; transition: opacity .5s ease; }
.hero-chamber .screen .off { inset: auto 10px 10px auto; width: auto; height: auto; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6);
                             color: rgba(255, 255, 255, .7); font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hc-bar { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-top: 1px solid rgba(255, 255, 255, .1); background: #121216; }
.hc-bar .badge.live { min-height: 20px; padding: 0 8px; font-size: 9.5px; }
.hc-bar .who { min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .78); font: 500 13px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.hc-state { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hc-state.neg { color: #f87171; }
.hc-state.pos { color: #4ade80; }
.hc-state.dim { color: rgba(255, 255, 255, .45); }
.hc-bar .dots { display: flex; flex: none; gap: 6px; margin-left: 4px; }
.hc-bar .dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .2s; }
.hc-bar .dots button:hover { background: rgba(255, 255, 255, .6); }
.hc-bar .dots button.on { background: #fff; }

/* a pal's photo split down the middle: the real trader in grey on the left, the AI in orange on the right */
.split { position: relative; flex: none; overflow: hidden; background: #000; }
.split img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.split-ai { position: absolute; inset: 0; background: var(--accent); clip-path: inset(0 0 0 50%); }
.split-ai img { mix-blend-mode: multiply; }
.split::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--split-line, #fff); }
.split.sm { width: 44px; height: 44px; border-radius: 10px; }

.sec { margin-top: 36px; scroll-margin-top: 72px; }
.home h2 { margin: 0 0 14px; font: 600 17px/1.2 var(--body); letter-spacing: -.01em; }

/* the experiment: the premise beside his state now, the loop in four tiles, then his last three hours minute by minute */
.chamber { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.chamber-head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px 28px; align-items: start; }
.chamber-head > div > p:not(.k) { max-width: 720px; margin: 0; font-size: 12.5px; line-height: 1.5; }
.chamber-head .k { margin-bottom: 4px; color: var(--accent-text); }
.chamber-head h2 { margin-bottom: 6px; }
.chamber-head .only { margin-top: 8px !important; padding: 6px 10px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--bg); color: var(--strong); }
.chamber-side { display: grid; gap: 8px; }
.chamber-side .cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.chamber-side .cta .button { justify-content: center; }
.text-link.dark { color: var(--fog); }
.text-link.dark:hover { color: var(--strong); }
/* the chamber page opens the explanation in a dialog */
.chamber-dialog { width: min(960px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
.chamber-dialog::backdrop { background: rgba(18, 18, 22, .55); backdrop-filter: blur(4px); }
.chamber-dialog .chamber { position: relative; border: 0; }
.chamber-dialog .chamber h2 { margin: 0 0 8px; font: 600 22px/1.2 var(--body); letter-spacing: -.025em; }
.chamber-dialog .close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--strong); font: 500 18px/1 var(--body); cursor: pointer; }
.chamber-dialog .close:hover { border-color: var(--line-strong); }
.chamber-dialog .chamber-head { grid-template-columns: minmax(0, 1fr); padding-right: 40px; }
.home .chamber h2 { margin-bottom: 6px; font-size: 18px; letter-spacing: -.025em; }
.chamber-now { display: grid; align-content: start; min-height: 96px; padding: 10px 12px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.chamber-now .k { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--label); }
.chamber-now .when { text-transform: none; letter-spacing: 0; }
.chamber-now b { color: var(--strong); font: 400 24px/1 var(--display); text-transform: capitalize; }
.chamber-now b.neg { color: var(--neg); }
.chamber-now b.pos { color: var(--pos); }
.chamber-now .line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; color: var(--text); font: 500 12px/1.4 var(--mono); }
.chamber-now .line .neg { color: var(--neg); }
.chamber-now .line .pos { color: var(--pos); }
.chamber-now .t-meter { margin: 8px 2px 0; }
.chamber-now .t-meter-ends { padding: 4px 0 0; border: 0; }
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
.loop li { position: relative; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text);
           font-size: 11.5px; line-height: 1.4; counter-increment: step; }
.loop b::before { content: counter(step, decimal-leading-zero); margin-right: 8px; color: var(--accent-text); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.loop li:not(:last-child)::after { content: "\2192"; position: absolute; top: 8px; right: -10px; z-index: 1; color: var(--label); font-size: 12px; }
.loop b { display: block; margin-bottom: 3px; color: var(--strong); font-weight: 600; }
.strip { margin-top: 10px; }
.strip .cells { display: flex; gap: 1px; height: 14px; align-items: flex-end; }
.strip .cells i, .strip .legend i { flex: 1; height: 100%; min-width: 0; border-radius: 1px; background: var(--line); }
.strip i.pain { background: rgba(220, 38, 38, calc(.3 + var(--d, 0) * .7)); }
.strip i.pleasure { background: rgba(22, 163, 74, calc(.3 + var(--d, 0) * .7)); }
.strip i.d2 { --d: .25; } .strip i.d4 { --d: .5; } .strip i.d6 { --d: .75; } .strip i.d8 { --d: 1; }
.strip .cells i.pressed { box-shadow: inset 0 3px 0 var(--strong); }
.strip .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; color: var(--label); font: 500 11px/1.4 var(--mono); }
.strip .legend span { display: inline-flex; align-items: center; gap: 6px; }
.strip .legend i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.strip .legend i.pressed { box-shadow: inset 0 3px 0 var(--strong); }
.strip .legend .tally { margin-left: auto; }
.chamber-note { margin: 8px 0 0; color: var(--label); font-size: 11.5px; line-height: 1.45; }

/* under the hero, a thin dark band like it: launching your own pal is coming */
.soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 22px 32px;
        border-radius: var(--r-lg); background: #121216; color: rgba(255, 255, 255, .68); }
.soon .eyebrow { margin-bottom: 8px; color: var(--accent); }
.home .soon h2 { margin: 0 0 6px; color: #fff; font-size: 20px; letter-spacing: -.02em; }
.soon p:not(.eyebrow) { max-width: 560px; margin: 0; font-size: 14px; line-height: 1.5; }

.tag { display: inline-flex; flex: none; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px;
       font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.tag.real { background: var(--surface-2); color: var(--text); }
.tag.ai { background: var(--accent-soft); color: var(--accent-text); }
.tag.lead { background: rgba(11, 154, 106, .1); color: var(--pos); }
a.tag { text-decoration: none; }
a.tag:hover { color: var(--strong); }
.avatar.sm.ai { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the latest swaps from both wallets, scrolling past */
.ticker { margin-top: 12px; overflow: hidden; border-block: 1px solid var(--line);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-right: 1px solid var(--line); color: var(--fog);
               font: 500 12px/1 var(--mono); white-space: nowrap; }
.ticker-item b { color: var(--strong); font-weight: 600; }
.ticker-item .buy, .ticker-item .sell { font-weight: 600; text-transform: uppercase; }
.ticker-item .buy { color: var(--pos); }
.ticker-item .sell { color: var(--neg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* home: the pals */
.avatar { display: grid; flex: none; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 14px;
          background: linear-gradient(145deg, #2a2a31, var(--strong)); color: #fff; font: 600 15px/1 var(--mono); letter-spacing: .04em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pal-card { position: relative; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; isolation: isolate;
            background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.pal-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.pal-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pal-top > div { min-width: 0; }
.pal-top h3 { margin: 0 0 2px; font-size: 16px; }
.versus { margin: 0 2px; color: var(--label); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pal-top .badge { margin-left: auto; }
.pal-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pal-sides > div { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.pal-sides .label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pal-sides b { color: var(--strong); font: 600 24px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pal-sides b.dim { color: var(--label); }
.pal-sides .range { color: var(--label); font: 500 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.pal-chart { height: 56px; }
.pal-card .foot { display: flex; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
/* a live card: a still from the stream, blurred, behind the whole card, a little darkened so the text can go light */
.pal-bg { position: absolute; inset: -16px; z-index: -2; background: center / cover no-repeat; filter: blur(4px) saturate(1.15); opacity: 0; transition: opacity .6s ease; }
.pal-card.live .pal-bg { opacity: 1; }
.pal-card.live::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .6)); }
.pal-card.live { border-color: rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
a.pal-card.live:hover { border-color: rgba(255, 255, 255, .4); }
.pal-card.live h3, .pal-card.live .pal-sides b, .pal-card.live .go { color: #fff; }
.pal-card.live .k, .pal-card.live .range, .pal-card.live .versus { color: rgba(255, 255, 255, .72); }
.pal-card.live .pal-sides b.neg { color: #ff8080; }
.pal-card.live .pal-sides b.pos { color: #5fe3a1; }
.pal-card.live .pal-sides b.dim { color: rgba(255, 255, 255, .6); }
.pal-card.live .tag.lead { background: rgba(95, 227, 161, .22); color: #5fe3a1; text-shadow: none; }
.pal-card.live .foot { border-top-color: rgba(255, 255, 255, .2); }
.pal-card.live .badge.live { background: var(--accent); color: #fff; text-shadow: none; }
.pal-card.live .badge.live i { background: #fff; color: #fff; }
.go { flex: none; color: var(--strong); font: 600 13px/1 var(--body); }
.go::after { content: " \2192"; }
.pal-card.next { place-content: center; justify-items: center; gap: 10px; min-height: 200px; border: 1.5px dashed var(--line-strong);
                 background: transparent; text-align: center; }
.pal-card.next h3 { margin: 0; }
.pal-card.next p { max-width: 240px; margin: 0; color: var(--fog); font-size: 13.5px; line-height: 1.5; }
.mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
        background: var(--strong); color: #fff; font: 400 24px/1 var(--display); }
.mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border: 2px solid var(--bg);
               border-radius: 50%; background: var(--accent); }
/* docs: a dark band like the home's hero, then the contents on a rail beside numbered sections */
main.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px 56px; align-items: start; padding: 24px 0 64px; }
.docs-hero { display: grid; grid-column: 1 / -1; gap: 22px; padding: 28px 32px; border-radius: var(--r-lg); background: #121216; color: rgba(255, 255, 255, .68); }
.docs-hero h1 { margin: 0 0 10px; color: #fff; font: 600 clamp(26px, 3vw, 34px)/1.1 var(--body); letter-spacing: -.03em; }
.docs-hero div > p:not(.eyebrow) { max-width: 640px; margin: 0; font-size: 14.5px; line-height: 1.55; }
.docs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.docs-facts li { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.docs-facts .k { color: rgba(255, 255, 255, .45); }
.docs-facts b { display: block; margin-top: 7px; color: #fff; font: 600 13.5px/1.35 var(--body); }
.docs-nav { position: sticky; top: 76px; display: grid; gap: 20px; }
.docs-nav div { display: grid; gap: 1px; }
.docs-nav .k { margin-bottom: 7px; }
.docs-nav a { padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--fog); font: 500 13.5px/1.35 var(--body); text-decoration: none;
              transition: color .15s, border-color .15s; }
.docs-nav a:hover { color: var(--strong); }
.docs-nav a[aria-current] { border-color: var(--strong); color: var(--strong); }
.docs-body { max-width: 740px; min-width: 0; counter-reset: doc; }
.doc { scroll-margin-top: 72px; }
.doc + .doc { margin-top: 52px; }
.doc h2 { margin: 0 0 14px; color: var(--strong); font: 600 24px/1.2 var(--body); letter-spacing: -.025em; }
.doc h2::before { content: counter(doc, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--accent-text);
                  font: 600 11px/1 var(--mono); letter-spacing: .08em; counter-increment: doc; }
.doc h3 { margin: 28px 0 8px; color: var(--strong); font: 600 15.5px/1.3 var(--body); letter-spacing: -.01em; }
.doc p { margin: 0 0 14px; color: var(--text); font-size: 15px; line-height: 1.7; }
.doc p:last-child { margin-bottom: 0; }
.doc p b, .doc li b { color: var(--strong); font-weight: 600; }
.doc p a { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.doc p a:hover { text-decoration-color: var(--strong); }
.doc code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--strong); font: 500 12.5px/1 var(--mono); }
.doc .callout { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface); font-size: 14.5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 16px; }
.card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.card .k { margin-bottom: 9px; }
.card b { display: block; margin-bottom: 4px; color: var(--strong); font-size: 14.5px; font-weight: 600; }
.card p:not(.k) { margin: 0; font-size: 13.5px; line-height: 1.55; }
.steps { display: grid; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 18px 40px; color: var(--text); font-size: 14.5px; line-height: 1.6; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 4px; left: 0; color: var(--accent-text); font: 600 11px/1 var(--mono); letter-spacing: .06em; }
.steps li::after { content: ""; position: absolute; top: 22px; bottom: 6px; left: 8px; width: 1px; background: var(--line); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { content: none; }
.steps li b { display: block; margin-bottom: 1px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; color: var(--strong); font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--label); font: 400 22px/1 var(--display); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 14px; font-size: 14.5px; }
.doc-list { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.doc-list > * + * { border-top: 1px solid var(--line); }
.pal-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px;
           color: inherit; text-decoration: none; transition: background .15s; }
.pal-row:hover { background: #fbfaf8; }
.pal-row div { display: grid; gap: 2px; min-width: 0; }
.pal-row strong { font-size: 14px; }
.pal-row div span { color: var(--fog); font-size: 13px; }
.wallet-row { display: grid; grid-template-columns: 170px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; }
.wallet-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--strong); font-size: 14px; font-weight: 600; }
.wallet-row a { overflow: hidden; color: var(--strong); font: 500 12.5px/1.4 var(--mono); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.wallet-row a:hover { color: var(--accent-text); }

/* pal page: a full-screen trading terminal, where each panel scrolls on its own */
body.terminal { height: 100vh; height: 100dvh; overflow: hidden; }
main.term { display: grid; flex: 1 1 0; grid-template-columns: minmax(250px, 1fr) minmax(0, 2.5fr) minmax(250px, 1fr);
            grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; width: min(1600px, calc(100% - 36px));
            min-height: 0; padding: 12px 0; }
.t-books { grid-column: 1 / -1; }
/* While live, the middle column is as wide as a 16:9 stream that still leaves room for the tables below (the side panels
   take the rest), and the stream sets the top row's height; the side panels (contained, so their own content can't make
   the row taller) stretch to it and scroll. */
@media (min-width: 1101px) and (min-height: 681px) {
  main.term:has(.t-live) { width: calc(100% - 36px); grid-template-rows: auto minmax(0, 1fr);
                           grid-template-columns: minmax(240px, 1fr) minmax(0, calc((100dvh - 400px) * 16 / 9 + 2px)) minmax(240px, 1fr); }
  main.term:has(.t-live) .t-side { contain: size; }
  .t-side .t-stats div { flex: 1 0 auto; max-height: 46px; }
}
.t-head .button { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.t-lead { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
          background: var(--surface); color: var(--text); font: 500 12px/1 var(--mono); white-space: nowrap; }
.t-lead.ai { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.t-lead.real { border-color: var(--strong); background: var(--strong); color: #fff; }
.t-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 14px;
           background: var(--surface); box-shadow: 0 1px 2px rgba(18, 18, 22, .04); }
.t-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 6px 7px 6px 12px;
          border-bottom: 1px solid var(--line); }
.t-who { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--strong); font: 600 13.5px/1.2 var(--body); white-space: nowrap; }
.t-who strong { overflow: hidden; text-overflow: ellipsis; }
.t-wallets { position: relative; display: grid; flex: none; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.t-wallet { display: flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 4px 0 5px; border: 1px solid var(--line);
            border-radius: 10px; background: #faf9f6; }
.chain { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 20px; border-radius: 5px;
         background: var(--surface-2); color: var(--text); font: 600 9.5px/1 var(--mono); letter-spacing: .06em; }
.t-wallet .chain { height: 24px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.t-addr { display: flex; flex: 1; min-width: 0; padding: 0 2px; color: var(--strong); font: 500 12px/1 var(--mono); text-decoration: none; white-space: nowrap; }
.t-addr span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-addr span:last-child { flex: none; }
.t-addr:hover { color: var(--accent-text); }
.t-wallet .copy { padding: 7px 8px; }
.t-more { position: absolute; right: 8px; bottom: calc(100% - 4px); left: 8px; z-index: 5; display: grid; gap: 6px; padding: 8px;
          border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px -14px rgba(18, 18, 22, .4);
          animation: t-in .15s ease-out; }
.t-more .k { padding: 2px 4px 2px; }
.t-more-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 8px;
                 border: 0; border-radius: 6px; background: var(--surface-2); color: var(--text); font: 600 10px/1 var(--mono); cursor: pointer; }
.t-more-toggle::after { content: ""; width: 4px; height: 4px; margin-top: -2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
                        transform: rotate(45deg); transition: transform .15s; }
.t-more-toggle[aria-expanded="true"]::after { margin-top: 2px; transform: rotate(-135deg); }
.t-more-toggle:hover { background: var(--surface-3); color: var(--strong); }
.t-big { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.t-big > div { display: grid; gap: 6px; min-width: 0; padding: 12px; }
.t-big > div + div { border-left: 1px solid var(--line); }
.t-big .k { display: flex; align-items: center; gap: 6px; }
.t-big b { overflow: hidden; color: var(--strong); font: 400 30px/1 var(--display); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
/* the chamber: Toly's valence, from agony to euphoria */
.t-meter { position: relative; flex: none; height: 8px; margin: 16px 14px 0; border-radius: 4px;
           background: linear-gradient(90deg, var(--neg), var(--surface-3) 50%, var(--pos)); }
.t-meter i { position: absolute; top: -4px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--strong);
             box-shadow: 0 0 0 2px var(--surface); transition: left .8s ease; }
.t-meter-ends { display: flex; flex: none; justify-content: space-between; padding: 8px 12px 6px; border-bottom: 1px solid var(--line); }
.t-big b.neg, .t-big b.pos { text-transform: capitalize; }
.t-stats { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; padding: 4px 12px; overflow: auto; }
.t-stats div { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; }
.t-stats div + div { border-top: 1px solid var(--line); }
.t-stats dt { flex: none; color: var(--fog); font-size: 12.5px; line-height: 1.5; }
.t-stats dd { min-width: 0; margin: 0; overflow: hidden; color: var(--strong); font: 500 12px/1.6 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.t-chart .chart { flex: 1; min-height: 0; margin: 8px 4px 6px 12px; }
/* live: the stream exactly 16:9 so it never gets black bars, with the chat as frosted glass over its right edge. That's
   where the stream's own panel is (wallet, decisions and this chat, 500 of its 1920px), so the chat never covers the face. */
.t-live { --stream-w: min(100%, calc((100dvh - 400px) * 16 / 9)); --chat-w: max(240px, calc(var(--stream-w) * .2604));
          position: relative; display: flex; flex: 1; justify-content: center; min-height: 0; overflow: hidden; border-radius: 0 0 13px 13px; }
.t-stream, .t-live > .chart { flex: none; width: var(--stream-w); min-width: 0; aspect-ratio: 16 / 9; }
.t-stream { position: relative; background: #000; }
.t-live > .chart { margin: 0; padding: 8px 4px 6px 12px; }
.t-live:has(> .t-talk:not([hidden])) > .chart { padding-right: calc(var(--chat-w) + 12px); }
.t-stream :is(video, iframe) { display: block; width: 100%; height: 100%; border: 0; }
/* the player's own word while the stream connects, buffers or is offline, centred on what the chat leaves showing */
.t-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px;
           color: rgba(255, 255, 255, .8); font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-align: center; pointer-events: none; }
.t-state::before { content: ""; width: 28px; height: 28px; border: 2px solid rgba(255, 255, 255, .18); border-top-color: #fff; border-radius: 50%;
                   animation: spin .8s linear infinite; }
.t-state.off::before { display: none; }
.t-live:has(> .t-talk:not([hidden])) .t-state { right: var(--chat-w); }
@keyframes spin { to { transform: rotate(360deg); } }
/* sound and full screen, bottom left (the chat covers the right), showing on hover except Unmute, which always shows */
.t-ctl { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.t-ctl button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 34px; height: 34px; padding: 0 9px;
                border: 0; border-radius: 9px; background: rgba(12, 12, 16, .62); color: #fff; font: 600 12.5px/1 var(--body); cursor: pointer;
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, background .15s; }
.t-ctl button:hover { background: rgba(12, 12, 16, .82); }
.t-ctl button.muted { padding-right: 12px; background: #fff; color: var(--strong); }
.t-ctl button.muted:hover { background: #e9e8e4; }
.t-stream:hover .t-ctl button, .t-ctl button:focus-visible, .t-ctl button.muted { opacity: 1; }
/* phones and tablets set the volume with their own buttons (iOS doesn't let a page change it) */
.t-vol { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 9px; background: rgba(12, 12, 16, .62);
         -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s; }
.t-vol input { width: 80px; margin: 0; accent-color: #fff; cursor: pointer; }
.t-stream:hover .t-vol, .t-vol:focus-within { opacity: 1; }
@media (hover: none) { .t-vol { display: none; } }
.t-state.off:not([hidden]) + .t-ctl { display: none; }
.t-ctl svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .t-ctl button { opacity: 1; } }
.t-chart .t-head .badge.live { margin-right: auto; }
.t-talk { position: absolute; top: 0; right: calc((100% - var(--stream-w)) / 2); bottom: 0; display: flex; flex-direction: column;
          width: var(--chat-w); border-left: 1px solid rgba(255, 255, 255, .08); background: rgba(12, 12, 16, .5); color: #f4f4f5;
          -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.t-live:has(> .t-stream[hidden]) > .t-talk { background: #121216; }
/* full screen takes the chat along: the stream as big as the screen allows, the chat over its right edge as usual
   (on phones too, where the chat otherwise sits under the stream) */
.t-live:fullscreen { --stream-w: min(100vw, calc(100dvh * 16 / 9)); flex-direction: row; align-items: center; border-radius: 0; background: #000; }
.t-live:fullscreen > .t-talk { position: absolute; top: calc((100dvh - var(--stream-w) * 9 / 16) / 2); bottom: calc((100dvh - var(--stream-w) * 9 / 16) / 2);
                               width: var(--chat-w); height: auto; border-left: 1px solid rgba(255, 255, 255, .08);
                               background: rgba(12, 12, 16, .5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.t-talk-head { display: flex; flex: none; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 14px;
               border-bottom: 1px solid rgba(255, 255, 255, .08); }
.t-talk-head b { flex: none; color: #fff; font: 600 13.5px/1.2 var(--body); }
.t-talk-head span { overflow: hidden; color: rgba(255, 255, 255, .5); font: 500 10.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase;
                    white-space: nowrap; text-overflow: ellipsis; }
.t-feed { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.t-msgs { display: flex; flex: 1; flex-direction: column; gap: 2px; min-height: 0; padding: 8px 6px; overflow-y: auto;
          scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
          -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.t-msgs > :first-child { margin-top: auto; }
.t-msg { margin: 0; padding: 5px 8px; border-radius: 8px; color: rgba(255, 255, 255, .92); font-size: 13.5px; line-height: 1.45;
         overflow-wrap: anywhere; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); animation: t-in .25s ease-out; }
.t-msg:hover { background: rgba(255, 255, 255, .06); }
.t-msg.mine { background: rgba(255, 90, 31, .2); }
.t-msg b { margin-right: 6px; font-weight: 600; }
.t-msgs .t-hint { margin: auto 0; padding: 24px 16px; color: rgba(255, 255, 255, .6); font-size: 13px; line-height: 1.5; text-align: center; }
@keyframes t-in { from { opacity: 0; transform: translateY(6px); } }
.t-jump { position: absolute; bottom: 10px; left: 50%; padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; color: #121216;
          font: 600 12px/1 var(--body); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transform: translateX(-50%); cursor: pointer; }
.t-say { display: grid; flex: none; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .08);
         background: rgba(0, 0, 0, .25); }
.t-row { display: flex; gap: 6px; }
.t-as { overflow: hidden; color: rgba(255, 255, 255, .55); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.t-as b { color: #fff; font-weight: 600; }
.t-change { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .55); font: inherit; text-decoration: underline; cursor: pointer; }
.t-change:hover { color: #fff; }
.t-say input { flex: 1; width: 100%; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px;
               background: rgba(255, 255, 255, .08); color: #fff; font: 13px/1 var(--body); }
.t-say input::placeholder { color: rgba(255, 255, 255, .45); }
.t-say input:focus { border-color: rgba(255, 255, 255, .4); outline: none; }
.t-say .button { min-width: 64px; min-height: 34px; padding: 0 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.t-say .button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.t-say .button.primary:hover { filter: brightness(1.08); }
.t-say .button:disabled { opacity: .55; filter: none; cursor: default; }
.t-note { color: #fb7185; font-size: 12px; }
.t-note:empty { display: none; }
.t-empty { display: grid; place-items: center; height: 100%; min-height: 120px; padding: 20px; color: var(--fog); font-size: 13.5px; text-align: center; }
.t-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.t-book .t-head, .t-chart .t-head { flex-wrap: wrap; row-gap: 6px; }
.t-body { flex: 1; min-height: 0; overflow: auto; }
.t-body, .t-stats { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
/* hover or focus the "i" to read more */
.tip { position: relative; display: inline-flex; }
.info { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
        background: var(--surface); color: var(--fog); font: 600 10px/1 var(--mono); text-transform: none; cursor: help; }
.tip:hover .info, .info:focus-visible { border-color: var(--strong); color: var(--strong); }
.onx { cursor: pointer; text-decoration: none; }
.onx svg { width: 9px; height: 9px; }
.onx:hover { border-color: var(--strong); color: var(--strong); }
.pop { position: absolute; top: calc(100% + 8px); left: -10px; z-index: 60; width: max-content; max-width: min(360px, 80vw); padding: 12px 14px;
       border-radius: 12px; background: var(--strong); color: rgba(255, 255, 255, .86); font: 400 13px/1.5 var(--body); letter-spacing: 0;
       text-transform: none; white-space: pre-line; box-shadow: 0 12px 32px -12px rgba(18, 18, 22, .5); opacity: 0; visibility: hidden; transform: translateY(-4px);
       transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.pop.end { right: -10px; left: auto; }
.tip:hover .pop, .tip:focus-within .pop { opacity: 1; visibility: visible; transform: none; }

table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
:is(th, td):first-child { padding-left: 12px; }
:is(th, td):last-child { padding-right: 12px; }
tr:last-child > * { border-bottom: 0; }
.t-body tbody:not(:last-child) > tr:last-child > * { border-bottom: 1px solid var(--line); }
.t-body tbody:hover > tr > td { background: #fcfbf9; }
th { position: sticky; top: 0; z-index: 1; border-bottom: 0; background: #fbfaf8; box-shadow: inset 0 -1px var(--line); color: var(--label);
     font: 500 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--text); line-height: 1.5; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, td.t { color: var(--strong); font: 500 12px/1.6 var(--mono); }
td.t, td.num.dim { color: var(--fog); }
td.t a { color: inherit; text-decoration: none; }
td.t a:hover { color: var(--strong); }
td a.tx { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
td a.tx:hover { color: var(--accent-text); text-decoration-color: currentColor; }
/* the AI's own words on a position, tucked under its row and lined up with the coin's name */
tr.noted > td { border-bottom: 0; }
td.notes { padding: 0 12px 12px 40px; white-space: normal; }
.t-notes { display: grid; gap: 8px; max-width: 920px; padding: 10px 12px; border-radius: 10px; background: #f7f6f2; }
.t-notes .note { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.t-notes .k { color: var(--label); font: 500 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.t-notes .note.lesson .k { color: #b45309; }
.t-notes .text { color: var(--text); font: 400 13px/1.55 var(--body); }
/* the AI's decisions: a card per market check, trades bright and the many no-trade checks quiet */
.t-body:has(> .t-cards) { border-radius: 0 0 13px 13px; background: #faf9f6; }
.t-cards { display: grid; gap: 8px; padding: 10px 12px 12px; }
.t-card { min-width: 0; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
          box-shadow: 0 1px 2px rgba(18, 18, 22, .03); }
.t-card.flat { background: transparent; box-shadow: none; cursor: pointer; }
.t-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 22px; }
.t-card-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.t-card-what b { color: var(--strong); font: 600 13.5px/1.2 var(--body); }
.t-card .amt { color: var(--fog); font: 500 12px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.t-card .tx { color: var(--fog); font: 500 12px/1.2 var(--mono); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.t-card .tx:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.t-card-meta { display: flex; flex: none; align-items: center; gap: 8px; color: var(--label); font: 500 11.5px/1 var(--mono); white-space: nowrap; }
.t-trigger { padding: 4px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); }
.act { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--surface-2);
       color: var(--fog); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.act.buy { background: rgba(11, 154, 106, .1); color: var(--pos); }
.act.sell { background: rgba(214, 58, 82, .1); color: var(--neg); }
.t-card-text { max-width: 920px; margin: 7px 0 0; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.t-card-text + .t-card-head { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.t-card.flat .t-card-text { display: -webkit-box; overflow: hidden; color: var(--fog); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.t-card.flat.open .t-card-text { display: block; }
/* lightweight-charts lays itself out with a table, which mustn't pick up the site's table styles */
.tv-lightweight-charts td { padding: 0; border: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font: 500 13px/1.2 var(--body); white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { color: var(--strong); font: 600 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--fog);
              font: 500 12.5px/1 var(--body); white-space: nowrap; cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: var(--strong); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--strong); box-shadow: 0 1px 2px rgba(18, 18, 22, .1), 0 0 0 1px var(--line); }
td.coin a { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-weight: 600; text-decoration: none; }
td.coin a:hover { color: var(--accent-text); }
td.coin .sym { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.logo { position: relative; display: grid; flex: none; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%;
        background: var(--surface-2); color: var(--fog); font: 600 9px/1 var(--mono); }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
td.side { font: 600 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
td.side.buy { color: var(--pos); }
td.side.sell { color: var(--neg); }
.button.more { display: flex; min-height: 34px; margin: 10px auto 12px; font-size: 12.5px; }

/* loading: until its data is in, a page shows its shape as grey bars with a sheen passing over them, and then the
   content rises into place. A panel fetching again keeps what it has, dimmed (only if it takes a moment), until the
   new data replaces it. */
.sk { display: block; border-radius: 6px; color: transparent;
      background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%) var(--surface-2);
      background-size: 240% 100%; animation: sk 1.45s linear infinite; }
.hero .sk { background-color: rgba(255, 255, 255, .07); background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .08) 48%, transparent 66%); }
@keyframes sk { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.enter { animation: t-in .26s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.t-body > * { transition: opacity .14s ease; }
.t-body[aria-busy="true"] > * { opacity: .45; pointer-events: none; transition: opacity .18s ease .08s; }
.hero-stats .sk { width: 64px; height: 10px; }
.hero-stats dd.sk { width: 52px; height: 15px; }
.split.sk::after { content: none; }
.hero-chamber .screen.sk { border-radius: 0; }
.hc-bar .sk { width: 120px; height: 10px; }
.hc-bar .sk + .sk { width: 56px; margin-left: auto; }
.chamber-now .sk { height: 10px; margin: 6px 0; }
.chamber-now .sk:nth-child(2) { width: 120px; height: 30px; }
.pal-top .sk:not(.split) { width: 170px; height: 14px; }
.pal-top .sk:not(.split) + .sk { width: 64px; height: 10px; margin-top: 8px; }
.pal-sides .sk { width: 70px; height: 10px; }
.pal-sides .sk:nth-child(2) { width: 96px; height: 24px; }
.pal-card .foot .sk { width: 44px; height: 13px; }
.ticker .sk { flex: none; width: 190px; height: 12px; margin: 12px 22px; }
.t-who .sk:not(.avatar) { width: 120px; height: 12px; }
.t-head > .sk { width: 150px; height: 30px; border-radius: 999px; }
.t-big .sk { width: 52px; height: 10px; }
.t-big .sk + .sk { width: 104px; height: 30px; }
.t-stats .sk { height: 10px; }
.t-stats dt.sk { width: 76px; }
.t-stats dd.sk { width: 56px; }
.t-wallet.sk { border-color: transparent; }
.t-sk { display: grid; padding: 4px 12px; }
.t-sk .sk { height: 12px; margin: 13px 0; }
.t-sk .sk:nth-child(odd) { width: 86%; }
.t-sk .sk:nth-child(3n) { width: 62%; }


/* too small to fit the terminal on one screen: stack the panels and let the page scroll */
@media (max-width: 1100px), (max-height: 680px) {
  body.terminal { height: auto; overflow: visible; }
  main.term { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .t-chart { grid-column: 1 / -1; order: 1; height: 360px; }
  .t-chart:has(.t-live) { order: -1; height: auto; }
  .t-live { --stream-w: min(100%, calc((100dvh - 140px) * 16 / 9)); }
  .t-books { order: 2; }
  .t-book { height: 520px; }
}
@media (max-width: 960px) {
  .hero-chamber { width: 340px; }
  .chamber-head { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop li:nth-child(2)::after { content: none; }
  main.docs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .docs-nav div { display: contents; }
  .docs-nav .k { display: none; }
  .docs-nav a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
  .docs-nav a[aria-current] { border-color: var(--strong); }
}
@media (max-width: 760px) {
  main { padding: 28px 0 64px; }
  .sec { margin-top: 28px; }
  main.docs { padding-top: 16px; }
  .docs-hero { padding: 22px 20px; }
  .wallet-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wallet-row .who { grid-column: 1 / -1; }
  main.term { grid-template-columns: minmax(0, 1fr); width: calc(100% - 24px); }
  .t-books { grid-template-columns: minmax(0, 1fr); }
  .t-chart { height: auto; }
  .t-chart .t-head > .seg { order: -1; }
  .t-chart .chart { flex: none; height: 220px; }
  .t-live { --stream-w: 100%; flex-direction: column; }
  .t-live:has(> .t-talk:not([hidden])) > .chart { padding-right: 4px; }
  .t-talk { position: static; width: auto; height: 320px; border-left: 0; background: #121216; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .t-say input { font-size: 16px; }
  .t-ctl { bottom: 8px; left: 8px; }
  .t-ctl button, .t-vol { min-width: 30px; height: 30px; font-size: 12px; }
  .t-book { height: 460px; }
  td.notes { padding-left: 12px; }
  .t-notes .note { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  main.home { padding-top: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .hero-chamber { width: 100%; }
  .chamber { padding: 14px; }
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop li::after { content: none !important; }
  .soon { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .hero-stats { gap: 14px 28px; }
}
@media (max-width: 560px) {
  header.site .bar { gap: 12px; width: calc(100% - 24px); }
  .actions > .ca-pill, .actions > .icon-link { display: none; }
  .burger { display: inline-flex; }
  .menu { display: grid; }
  /* tooltips open as a sheet at the bottom instead of hanging off the side of the screen */
  .pop, .pop.end { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-width: none; }
  .t-big b { font-size: 26px; }
  th, td { padding: 8px 6px; font-size: 12px; }
  .pals { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}