/* Quants design system: a terminal. Pure black with a dot-grid texture, monospace everywhere, thin 1px borders, square
   corners, small letter-spaced uppercase labels. Off-white/cream for text and primary buttons, lime for small tags,
   green and red ONLY for P&L / long / short. Variable NAMES are shared with the pages and the canvas animations
   (intro.js, trade-anim.js and floor.js read them with getComputedStyle): change values here, not names. */
:root {
  --bg:#050505; --bg-rgb:5,5,5; --surface:#0b0b0a; --raised:#131311; --sunken:#080807; --ink:#ece9df; --ink2:#bdb9ac; --dim:#7b786f; --faint:#4f4d47;
  --line:#222220; --line2:#2f2e2b; --line3:#3d3c38;
  /* primary: cream (buttons, headline) */
  --accent:#ece9df; --accent2:#ffffff; --accentD:#d4d0c4; --accent-rgb:236,233,223; --accentbg:rgba(236,233,223,.06); --accentline:rgba(236,233,223,.32); --onaccent:#050505;
  /* small tags + "on" status dots */
  --lime:#c9f5a3; --lime-rgb:201,245,163; --limebg:rgba(201,245,163,.08);
  /* P&L / long / short */
  --green:#8ff0a4; --green-rgb:143,240,164; --greenD:#6fd88a; --green2:#8ff0a4; --mint:rgba(143,240,164,.08);
  --red:#ff7b7b; --red-rgb:255,123,123; --redbg:rgba(255,123,123,.08);
  --amber:#f5d97a; --amberbg:rgba(245,217,122,.08); --cyan:#97fce4; --cyanbg:rgba(151,252,228,.07); --violet:#c4b5fd; --fire:#ff8a1f; --sol1:#9945ff; --sol2:#14f195;
  --glow:0 0 0 1px rgba(236,233,223,.45), 0 0 18px -6px rgba(236,233,223,.35);
  --r:2px; --r-sm:2px; --shadow:none; --shadow-lg:0 0 0 1px var(--line2), 0 24px 48px -16px rgba(0,0,0,.85);
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ui:var(--mono); --display:var(--mono); --serif:var(--mono);
  --nav-h:60px; --bar-h:28px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
html, body { margin:0; color:var(--ink); font:14px/1.6 var(--mono); -webkit-font-smoothing:antialiased; font-variant-ligatures:none; }
body { overflow-x:hidden; background:transparent; padding-bottom:var(--bar-h); }
/* the texture: a halftone dot grid, densest at the top, under a soft vignette */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(circle, rgba(236,233,223,.16) 1px, transparent 1.6px); background-size:6px 6px;
  -webkit-mask-image:radial-gradient(ellipse 95% 70% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 80%, transparent 100%); mask-image:radial-gradient(ellipse 95% 70% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 80%, transparent 100%); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 85% at 50% 18%, rgba(5,5,5,.1) 0, rgba(5,5,5,.55) 60%, rgba(5,5,5,.92) 100%); }
::selection { background:rgba(236,233,223,.85); color:#050505; }
a { color:inherit; } .hide { display:none !important; }
.num, .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.dim { color:var(--dim); } .faint { color:var(--faint); } .up { color:var(--green); } .down { color:var(--red); } .lime { color:var(--lime); }
.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(16px, 4vw, 40px); }
/* kicker: small, letter-spaced, uppercase */
/* the line above a heading reads like the command that printed it */
.eyebrow, .kicker { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0; text-transform:lowercase; color:var(--dim); }
.eyebrow::before, .kicker::before { content:"$ "; color:var(--lime); }
.kicker b, .eyebrow b { color:var(--ink2); font-weight:500; }
h1 { font:800 clamp(40px, 7.4vw, 104px)/.92 var(--mono); letter-spacing:-.05em; margin:0; text-transform:uppercase; }
h2 { font:800 clamp(24px, 3vw, 38px)/1.05 var(--mono); letter-spacing:-.045em; margin:0 0 12px; }
h3 { font:700 15px/1.3 var(--mono); letter-spacing:-.01em; margin:0 0 6px; }
.cap { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; }
.prompt::before { content:"> "; color:var(--faint); }
.lead { font-size:15px; line-height:1.65; color:var(--ink2); }
.ico { width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter; }
.cursor::after { content:""; display:inline-block; width:.55em; height:1em; margin-left:.25em; background:var(--ink); vertical-align:-.15em; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.glowtext { color:var(--ink); }

/* nav: wordmark · ⌘K command box · CA, clock, Launch, Connect */
.nav { position:sticky; top:0; z-index:20; background:rgba(5,5,5,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:24px; height:var(--nav-h); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand svg { width:24px; height:24px; display:block; }
.brand span { font:700 14px/1 var(--mono); letter-spacing:.34em; color:var(--ink); text-transform:uppercase; }
.cmdbox { justify-self:center; width:100%; max-width:440px; height:36px; display:flex; align-items:center; gap:10px; padding:0 8px 0 12px; background:var(--sunken); border:1px solid var(--line2); color:var(--dim); font:13px var(--mono); cursor:text; text-align:left; transition:border-color .15s; }
.cmdbox:hover { border-color:var(--line3); color:var(--ink2); } .cmdbox .ps { color:var(--lime); } .cmdbox .ph { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
kbd { font:500 10.5px/1 var(--mono); color:var(--dim); border:1px solid var(--line2); padding:3px 5px; background:var(--bg); letter-spacing:.04em; }
.navr { display:flex; align-items:center; gap:10px; }
.navclock { font-size:12px; color:var(--dim); letter-spacing:.04em; white-space:nowrap; }
.navca { font:500 11.5px/1 var(--mono); color:var(--dim); background:transparent; border:1px dashed var(--line2); padding:7px 10px; white-space:nowrap; cursor:default; }
.navca.live { color:var(--ink); border:1px solid var(--line2); cursor:pointer; } .navca.live b { color:var(--lime); font-weight:600; } .navca .cp { color:var(--dim); font-size:11px; margin-left:2px; } .navca.live:hover { border-color:var(--ink); }
.bal { font-size:12.5px; color:var(--ink2); text-decoration:none; padding:7px 8px; } .bal:hover { color:var(--ink); } .bal b { font-weight:600; }
.navx { display:none; } .navlink { display:none; }
.pulse { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px rgba(201,245,163,.7); animation:pulse 2s ease-in-out infinite; flex:0 0 auto; }
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--faint); flex:0 0 auto; } .dot.on { background:var(--lime); box-shadow:0 0 6px rgba(201,245,163,.6); } .dot.off { background:transparent; box-shadow:inset 0 0 0 1px var(--dim); } .dot.bad { background:var(--red); }
@keyframes pulse { 50% { opacity:.35; } }
/* ⌘K palette */
.cmdk { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 0; }
.cmdk-in { width:100%; max-width:620px; background:var(--bg); border:1px solid var(--line3); box-shadow:var(--shadow-lg); }
.cmdk-q { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--line2); } .cmdk-q > span { color:var(--lime); }
.cmdk-q input { border:0; background:transparent; padding:16px 0; font-size:15px; box-shadow:none !important; }
.cmdk-l { max-height:52vh; overflow:auto; padding:6px 0; }
.cmdk-l a { display:grid; grid-template-columns:64px auto 1fr; gap:12px; align-items:baseline; padding:9px 16px; text-decoration:none; font-size:13px; } .cmdk-l a.on, .cmdk-l a:hover { background:var(--raised); }
.cmdk-l .k { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); } .cmdk-l .d { color:var(--dim); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .cmdk-l a.on b::before { content:"> "; color:var(--lime); }

/* ticker tape under the nav */
.tape { border-bottom:1px solid var(--line); background:rgba(5,5,5,.9); font-family:var(--mono); font-size:11.5px; color:var(--dim); overflow:hidden; white-space:nowrap; height:30px; display:flex; align-items:center; position:relative; }
.tape .mode { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:0 14px; height:100%; border-right:1px solid var(--line); color:var(--ink2); background:var(--bg); z-index:1; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:10px; }
.tape .track { display:inline-flex; gap:34px; padding-left:24px; animation:tape 60s linear infinite; will-change:transform; }
.tape:hover .track { animation-play-state:paused; }
.tape .it { display:inline-flex; gap:7px; align-items:center; } .tape .it b { color:var(--ink); font-weight:600; } .tape a { text-decoration:none; } .tape a:hover b { text-decoration:underline; }
@keyframes tape { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* bottom status bar: brand · system · page keys · counts · clock */
.statusbar { position:fixed; left:0; right:0; bottom:0; z-index:25; height:var(--bar-h); display:flex; align-items:center; padding:0 clamp(12px, 3vw, 24px); background:rgba(5,5,5,.95); border-top:1px solid var(--line); font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.statusbar > span { display:inline-flex; align-items:center; gap:7px; padding:0 12px; border-left:1px solid var(--line); height:100%; } .statusbar > span:first-child { border-left:0; padding-left:0; }
.statusbar b { color:var(--ink); font-weight:600; } .statusbar .sb-r { margin-left:auto; }
.sb-keys { gap:0 !important; padding:0 !important; } .sb-keys a { text-decoration:none; padding:0 10px; height:100%; display:inline-flex; align-items:center; color:var(--dim); border-right:1px solid var(--line); } .sb-keys a:hover { color:var(--ink); background:var(--raised); } .sb-keys a.on { color:#0a0a0a; background:var(--ink); }
.sb-keys a::before { content:"["; color:var(--faint); margin-right:2px; } .sb-keys a::after { content:"]"; color:var(--faint); margin-left:2px; } .sb-keys a.on::before, .sb-keys a.on::after { color:#0a0a0a; }
@media (max-width:1100px) { .statusbar .sb-opt { display:none; } }
@media (max-width:760px) { .statusbar .sb-keys, .statusbar .sb-b { display:none; } .statusbar .sb-r { margin-left:0; border-left:0; padding-left:0; } }
@media (prefers-reduced-motion:reduce) { .tape .track, .cursor::after, .pulse, .loop .dot { animation:none !important; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border:1px solid var(--line2); border-radius:var(--r-sm); font:600 13px/1 var(--mono); letter-spacing:.01em; cursor:pointer; text-decoration:none; background:transparent; color:var(--ink); transition:background .2s, color .2s, border-color .2s; white-space:nowrap; }
.btn:hover { border-color:var(--ink); } .btn:active { transform:translateY(1px); } .btn:disabled { opacity:.4; cursor:not-allowed; }
.btn.primary { background:var(--accent); color:var(--onaccent); border-color:var(--accent); } .btn.primary:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line2); } .btn.ghost:hover { border-color:var(--ink); }
.btn.quiet { background:transparent; color:var(--ink2); border-color:transparent; padding:0 10px; } .btn.quiet:hover { color:var(--ink); }
.btn.lg { height:48px; padding:0 22px; font-size:14px; } .btn.sm { height:34px; padding:0 14px; font-size:12.5px; } .btn.full { width:100%; }
.link { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line3); padding-bottom:2px; } .link:hover { border-color:var(--ink); }

/* surfaces */
.card { background:rgba(11,11,10,.88); border:1px solid var(--line); border-radius:var(--r); }
.panel { background:rgba(5,5,5,.78); border:1px solid var(--line2); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.pad { padding:24px; }
.badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 7px; border-radius:0; font-family:var(--mono); font-size:11px; font-weight:500; white-space:nowrap; background:transparent; color:var(--ink2); border:1px solid var(--line2); }
.badge.verified { color:var(--lime); border-color:rgba(201,245,163,.35); } .badge.ai { color:var(--ink); border-color:var(--line3); } .badge.rules, .badge.warn { color:var(--amber); border-color:rgba(245,217,122,.3); }
.badge.long { color:var(--green); border-color:rgba(143,240,164,.3); } .badge.short { color:var(--red); border-color:rgba(255,123,123,.3); }
.badge .ico { width:12px; height:12px; stroke-width:2; }
.tag { display:inline-flex; align-items:center; height:20px; padding:0 6px; background:var(--lime); color:#0a0a0a; font:700 11px/1 var(--mono); letter-spacing:.02em; }
.stag { display:inline-flex; align-items:center; height:20px; padding:0 7px; background:rgba(5,5,5,.82); color:var(--ink2); font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; } .stag.on { color:var(--ink); } .stag.bad { color:var(--red); } .stag.trade { color:#0a0a0a; background:var(--ink); }
.mono-av { width:44px; height:44px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:14px; flex:0 0 auto; }

/* forms */
label { display:block; font-size:12px; font-weight:500; color:var(--ink2); margin:16px 0 6px; letter-spacing:.02em; }
input, textarea, select { width:100%; background:var(--sunken); color:var(--ink); border:1px solid var(--line2); border-radius:var(--r-sm); padding:10px 12px; font:inherit; font-size:13.5px; transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:var(--faint); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
:focus-visible { outline:1px solid var(--ink); outline-offset:2px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline:none; }
.hint { font-size:12px; color:var(--dim); margin-top:6px; }
.seg { display:inline-flex; background:transparent; border:1px solid var(--line2); padding:2px; gap:2px; } .seg button { border:0; background:transparent; font:inherit; font-size:12px; font-weight:500; color:var(--dim); height:28px; padding:0 11px; cursor:pointer; } .seg button:hover { color:var(--ink); } .seg button.on { background:var(--ink); color:var(--onaccent); font-weight:600; }
.err { color:var(--red); font-size:12.5px; min-height:1.2em; }
.switch { position:relative; width:36px; height:20px; background:var(--line2); cursor:pointer; transition:background .15s; flex:0 0 auto; } .switch::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; background:var(--ink); transition:left .15s; } .switch.on { background:var(--lime); } .switch.on::after { left:19px; background:#0a0a0a; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); font-size:13px; } th { color:var(--dim); font-weight:500; font-size:10.5px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; } td.r, th.r { text-align:right; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .between { justify-content:space-between; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; } .kv:last-child { border-bottom:0; } .kv span { color:var(--dim); } .kv b { font-weight:600; text-align:right; font-family:var(--mono); font-size:13px; }
details > summary { cursor:pointer; } details > summary::marker { color:var(--faint); }

/* section header: "01 · LIVE" kicker, bold heading, link on the right */
.shead { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; flex-wrap:wrap; } .shead h2 { margin:8px 0 0; } .shead .r { font-size:12px; color:var(--dim); }

/* older coin cards (still used on a few pages) */
.grid3 { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.scard { display:flex; flex-direction:column; padding:18px; text-decoration:none; transition:border-color .15s; } .scard:hover { border-color:var(--ink); }
.scard .head { display:flex; gap:12px; align-items:flex-start; }
.scard .title { font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scard .by { font-size:12px; color:var(--dim); }
.scard p { margin:12px 0 0; color:var(--dim); font-size:12.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3.1em; }
.scard .figs { display:flex; justify-content:space-between; align-items:flex-end; margin-top:16px; gap:12px; }
.scard .lbl { font-size:9.5px; color:var(--faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:.16em; }
.scard .ret { font-size:26px; font-weight:700; letter-spacing:-.04em; line-height:1; }
.scard .tvl { font-size:17px; font-weight:600; letter-spacing:-.03em; }
.scard .spark { width:100%; height:44px; margin-top:16px; display:block; }
.scard .foot { display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:16px; padding-top:12px; font-size:12px; color:var(--dim); } .scard .foot b { color:var(--ink2); font-weight:500; } .scard:hover .foot b { color:var(--ink); }
.scard .pro { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--dim); margin-top:12px; }
.avwrap { position:relative; flex:0 0 auto; } .avwrap .on { position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; border-radius:50%; background:var(--lime); border:2px solid var(--bg); }
.pix { border-radius:0 !important; }

/* screener rows (explore + homepage board) */
.srow { display:grid; grid-template-columns:minmax(190px, 2fr) minmax(150px, 1.7fr) 84px 96px 74px 70px; gap:16px; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line); text-decoration:none; transition:background .12s; }
.srow:last-child { border-bottom:0; } a.srow:hover { background:var(--raised); }
.srow.hd { padding-top:10px; padding-bottom:10px; font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.16em; }
.srow .who { display:flex; gap:12px; align-items:center; min-width:0; } .srow .nm { font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .srow .tk { font-size:11.5px; color:var(--dim); }
.srow .r { text-align:right; } .srow .big { font-size:14px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.srow .spark { height:30px; width:100%; display:block; } .srow .what { font-size:12px; color:var(--ink2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .srow .c-what { min-width:0; }
.srow.ghost { color:var(--dim); } .srow.ghost .slot { width:40px; height:40px; border:1px dashed var(--line3); display:grid; place-items:center; color:var(--ink2); flex:0 0 auto; }
@media (max-width:900px) { .srow { grid-template-columns:1fr 80px 84px; gap:10px; padding:12px 14px; } .srow .c-what, .srow .c-mcap, .srow .c-act { display:none; } }

.foot-site { border-top:1px solid var(--line); margin-top:110px; padding:34px 0 46px; color:var(--dim); font-size:12px; background:rgba(5,5,5,.9); }
.foot-site .wrap { display:flex; gap:22px; flex-wrap:wrap; align-items:center; } .foot-site a { text-decoration:none; } .foot-site a:hover { color:var(--ink); }
.foot-site .fbrand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:13px; letter-spacing:.34em; } .foot-site .fbrand svg { width:22px; height:22px; }
.foot-site .fnote { flex-basis:100%; margin-top:4px; color:var(--faint); font-size:11.5px; }
.toast { position:fixed; bottom:44px; left:50%; transform:translateX(-50%); background:var(--bg); color:var(--ink); border:1px solid var(--line3); padding:11px 16px; font-size:13px; box-shadow:var(--shadow-lg); z-index:50; max-width:calc(100vw - 32px); }
@media (max-width:1180px) { .navclock { display:none; } }
@media (max-width:900px) { .nav .wrap { gap:14px; } .cmdbox kbd { display:none; } .navca { display:none; } }
@media (max-width:760px) { .bal { display:none; }
  /* phones: logo + Launch/Connect on the first row, the command box on a second row */
  .nav .wrap { grid-template-columns:auto 1fr; height:auto; padding-top:10px; padding-bottom:10px; row-gap:10px; }
  .navr { justify-self:end; gap:6px; } .cmdbox { grid-column:1 / -1; grid-row:2; max-width:none; } .navr .btn.sm { height:32px; padding:0 11px; font-size:12px; } .tape .mode .lbl { display:none; } }
@media (max-width:400px) { .brand span { letter-spacing:.22em; font-size:13px; } }

/* tooltips */
.tip { position:relative; display:inline-grid; place-items:center; width:15px; height:15px; margin-left:5px; background:transparent; border:1px solid var(--line3); color:var(--dim); font-size:10px; font-weight:700; cursor:help; vertical-align:1px; font-style:normal; font-family:var(--mono); }
.tip .tipbox { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); width:260px; background:var(--bg); color:var(--ink); border:1px solid var(--line3); font-family:var(--mono); font-size:12px; font-weight:400; line-height:1.55; padding:10px 12px; text-align:left; z-index:30; box-shadow:var(--shadow-lg); white-space:normal; letter-spacing:0; text-transform:none; }
.tip:hover .tipbox, .tip:focus .tipbox { display:block; }
.spic { object-fit:cover; flex:0 0 auto; display:block; background:var(--raised); border-radius:0 !important; }
.chips { display:flex; flex-wrap:wrap; gap:6px; } .chip { border:1px solid var(--line2); background:transparent; height:30px; padding:0 11px; font-family:var(--mono); font-size:12px; font-weight:500; cursor:pointer; color:var(--ink2); } .chip:hover { border-color:var(--ink); color:var(--ink); } .chip.on { border-color:var(--ink); background:var(--ink); color:var(--onaccent); }
.tbl td, .tbl th { white-space:nowrap; } .tbl tr:hover td { background:var(--raised); }
.pill { display:inline-flex; align-items:center; height:20px; padding:0 7px; font-family:var(--mono); font-size:11px; font-weight:600; border:1px solid var(--line2); } .pill.long { color:var(--green); border-color:rgba(143,240,164,.3); } .pill.short { color:var(--red); border-color:rgba(255,123,123,.3); }

/* live activity: a terminal log */
.feed { padding:0; overflow:hidden; } .feed .fh { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.2em; } .feed .fh b { color:var(--ink); font-weight:700; }
.fl { display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:start; padding:11px 16px; border-bottom:1px solid var(--line); text-decoration:none; font-size:12.5px; color:var(--ink2); line-height:1.5; } .fl:hover { background:var(--raised); }
.fl .fm { font-size:10.5px; color:var(--faint); margin-top:2px; } .fl .fa { font-size:12px; color:var(--ink); white-space:nowrap; } .fl b { color:var(--ink); }
.fl .fire { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line2); color:var(--fire); font-size:13px; } .fl .fire svg { width:16px; height:16px; }
.withfeed { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; } .withfeed .feed { position:sticky; top:110px; max-height:calc(100vh - 150px); overflow:auto; }
@media (max-width:1100px) { .withfeed { grid-template-columns:1fr; } .withfeed .feed { position:static; max-height:520px; } }

/* value flash when a number changes */
.flash-up { animation:flashUp 1.2s ease-out; } .flash-down { animation:flashDown 1.2s ease-out; }
@keyframes flashUp { from { background:rgba(143,240,164,.22); } to { background:transparent; } }
@keyframes flashDown { from { background:rgba(255,123,123,.22); } to { background:transparent; } }

* { scrollbar-color:var(--line2) transparent; }

/* live mode hides testnet-only bits */
body.mode-real .testonly { display: none !important; }

/* ---------- terminal building blocks ---------- */
/* a terminal pane: title bar + body */
.term { border:1px solid var(--line2); background:rgba(5,5,5,.86); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.term > .tb { display:flex; align-items:center; gap:12px; height:34px; padding:0 14px; border-bottom:1px solid var(--line2); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; }
.term > .tb b { color:var(--ink); font-weight:600; } .term > .tb .r { margin-left:auto; letter-spacing:.06em; text-transform:none; }
.term > .tb > span:not(.pulse) { min-width:0; overflow:hidden; text-overflow:ellipsis; } /* a long title-bar label trims with … instead of being cut mid-word */
/* section header: the command that "prints" the section, then its title */
.cmdhead { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cmdhead .cmd { font-size:12px; color:var(--dim); } .cmdhead .cmd::before { content:"$ "; color:var(--lime); }
.cmdhead h2 { margin:6px 0 0; } .cmdhead .meta { font-size:12px; color:var(--dim); }
/* conviction meter + verdicts */
.conv { font-size:10px; letter-spacing:1px; color:var(--ink); white-space:nowrap; } .conv i { font-style:normal; color:var(--line3); }
.vd { font-size:11.5px; font-weight:700; white-space:nowrap; } .vd.hit { color:var(--lime); } .vd.miss { color:var(--red); } .vd.open { color:var(--dim); font-weight:500; }
/* the live calls log */
.calls { font-size:12.5px; }
.cl { display:grid; grid-template-columns:72px 76px 52px 96px 44px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink2); }
.cl:last-child { border-bottom:0; } .cl:hover { background:var(--raised); } .cl .tm { color:var(--faint); font-size:11.5px; } .cl .as { color:var(--ink); } .cl .who { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cl .cv { color:var(--dim); text-align:right; }
.cl .rs { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dim); }
@media (max-width:760px) { .cl { grid-template-columns:auto auto auto 1fr auto; row-gap:4px; } .cl .tm, .cl .cv { display:none; } .cl .rs { grid-column:1 / -1; grid-row:2; } }
/* the leaderboard */
.lbd { font-size:13px; }
.lbr { display:grid; grid-template-columns:34px minmax(170px, 1.5fr) minmax(120px, 1fr) 72px 80px 84px 112px minmax(110px, .9fr) 120px 18px; gap:14px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.lbr:hover, .lbr.x { background:var(--raised); } .lbr:focus-visible { outline:1px solid var(--ink); outline-offset:-1px; }
.lbh { cursor:default; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); padding-top:10px; padding-bottom:10px; } .lbh:hover { background:transparent; }
.lbh > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lbh .sk { cursor:pointer; user-select:none; } .lbh .sk:hover, .lbh .sk.on { color:var(--ink); }
.lbr .r { text-align:right; } .lbr .rk { color:var(--faint); } .lbr .pr { display:flex; gap:10px; align-items:center; min-width:0; }
.lbr .nm { min-width:0; display:flex; flex-direction:column; } .lbr .nm b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lbr .nm i { font-style:normal; font-size:11px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbr .c-pos, .lbr .c-last, .lbr .c-model { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; } .lbr .c-sp .spark { width:80px; height:22px; display:block; } .lbr .c-x { text-align:right; }
.lbr.empty { cursor:default; display:block; }
.lbx { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:28px; padding:16px 16px 18px 64px; border-bottom:1px solid var(--line); background:var(--raised); }
.lbx .k { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; } .lbx p { margin:0 0 12px; color:var(--ink2); font-size:13px; line-height:1.6; } .lbx p::before { content:"> "; color:var(--faint); }
.lbx-r .kv { font-size:12px; padding:6px 0; } .lbx-r .btn { margin-top:12px; }
.lbnote { padding:10px 16px; font-size:11px; color:var(--faint); border-top:1px solid var(--line); }
/* the table adapts to the width it's given (homepage full width, explore next to the calls log, phones): container queries */
.lbc { container-type:inline-size; }
@container (max-width:1100px) { .lbr { grid-template-columns:34px minmax(160px, 1.5fr) minmax(110px, 1fr) 72px 84px 112px minmax(100px, .9fr) 18px; } .lbr .c-model, .lbr .c-sp { display:none; } }
@container (max-width:860px) { .lbr { grid-template-columns:34px minmax(150px, 1.5fr) minmax(110px, 1fr) 70px 80px minmax(90px, .9fr) 16px; } .lbr .c-conv { display:none; } }
@container (max-width:640px) { .lbr { grid-template-columns:28px minmax(0, 1fr) 70px 72px 16px; gap:10px; padding:11px 12px; } .lbr .c-pos, .lbr .c-conv, .lbr .c-last { display:none; } .lbx { grid-template-columns:1fr; gap:6px; padding:14px 12px; } }
@container (max-width:420px) { .lbr { grid-template-columns:24px minmax(0, 1fr) 64px 16px; } .lbr .c-calls { display:none; } }

/* a quant's page: the path bar and its panes */
.ptitle { display:flex; align-items:center; gap:10px; padding:9px 14px; border:1px solid var(--line2); background:rgba(5,5,5,.86); font-size:12px; margin-bottom:6px; }
.ptitle a { color:var(--dim); text-decoration:none; } .ptitle a:hover { color:var(--ink); } .ptitle b { color:var(--ink); } .ptitle #pstate { display:inline-flex; align-items:center; gap:7px; margin-left:8px; } .ptitle .r { margin-left:auto; }
.card.pad.sec > h3, .card.pad.sec > .row h3, .card.pad.sec h3#plansec { font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.card.pad.sec > h3::before, .card.pad.sec h3#plansec::before { content:"▍"; color:var(--lime); margin-right:6px; }
#callsbox { margin-top:16px; } #callsbox .cl { grid-template-columns:72px 76px 52px 44px minmax(0, 1fr) auto; } #callsbox .cl .who { display:none; }
@media (max-width:1300px) { #callsbox .tb .r { display:none; } }
@media (max-width:760px) { #callsbox .cl { grid-template-columns:auto auto 1fr auto; } }
@media (max-width:560px) { .ptitle { flex-wrap:wrap; row-gap:4px; } .ptitle .r { display:none; } .ptitle #pstate { margin-left:0; } }
@media (max-width:560px) { .term > .tb .r { display:none; } }
