/* JEETBOT. The APE BOT terminal (dark, one face, a big live number, every panel fed by the ledger) in its own colours: navy and
   pink. Departure Mono for headings and big numbers, Geist for words, Geist Mono for logs. One glow (the face), no tilts, no gradients
   beyond the faint grid, every tap target at least 44 px. */
@font-face { font-family: "Departure Mono"; src: url("/fonts/departure-mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #070914; --panel: #0c1022; --panel-2: #11162e; --line: #1a2040; --line-2: #2a3260;
  --ink: #eef0fb; --soft: #b0b6d6; --mute: #7f87ad;
  --pink: #ff3e9a; --pink-dim: rgba(255, 62, 154, .13); --pink-ink: #1f0010;
  --pos: #37e29a; --pos-dim: rgba(55, 226, 154, .12);
  --neg: #ff6b57; --neg-dim: rgba(255, 107, 87, .13);
  --amber: #ffc24f; --amber-dim: rgba(255, 194, 79, .12);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --disp: "Departure Mono", "Geist Mono", ui-monospace, monospace;
  --r: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* a faint terminal grid, top of the page only */
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 1100px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 62, 154, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 62, 154, .035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.wrap { width: min(100% - 32px, 1160px); margin-inline: auto; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.k { margin: 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.hint { font: 400 12px var(--mono); color: var(--mute); }
.fine { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--mute); }

/* ---- top bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(7, 9, 20, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 400 16px var(--disp); letter-spacing: .02em; flex: none; }
.brand img { border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-left: 8px; font-size: 14px; color: var(--soft); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); min-width: 0; }
.pill.has-copy { padding-right: 4px; }
.pill-k { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }
.pill code { font-size: 12px; white-space: nowrap; color: var(--soft); }
.pill-copy { height: 36px; min-width: 56px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 12px var(--sans); cursor: pointer; }
.sound { height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: none; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); cursor: pointer; white-space: nowrap; }
.sound:hover { border-color: var(--soft); color: var(--ink); }
.sound[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--pink); vertical-align: 1px; }

/* ---- hero */
.hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: center; padding: 38px 0 28px; }
.face { margin: 0; position: relative; }
.screen { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #e8452f; border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px #0b0f22, 0 0 0 7px var(--line), 0 30px 90px -30px rgba(255, 62, 154, .45); } /* the page's one glow */
.bot { width: 100%; height: 100%; object-fit: cover; }
.mood-chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px;
  background: rgba(7, 9, 20, .86); border: 1px solid rgba(255, 62, 154, .4); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }
.mood-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2, start) infinite; }
.face[data-mood="winning"] .mood-chip { color: var(--pos); border-color: rgba(55, 226, 154, .4); }
.face[data-mood="sweating"] .mood-chip, .face[data-mood="rekt"] .mood-chip { color: var(--neg); border-color: rgba(255, 107, 87, .4); }
.face[data-mood="sleeping"] .mood-chip, .face[data-mood="offline"] .mood-chip { color: var(--mute); border-color: var(--line-2); }
.face[data-mood="sleeping"] .mood-chip i, .face[data-mood="offline"] .mood-chip i { animation: none; }
@keyframes blink { 50% { opacity: .25; } }
.bubble { position: relative; margin: 16px 0 0; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); font-size: 16px; line-height: 1.45; }
.bubble::before { content: ""; position: absolute; left: 34px; top: -7px; width: 12px; height: 12px; background: var(--panel); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
.bubble b { display: block; margin-bottom: 3px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--pink); }
.bubble.say { animation: say .3s ease-out; }
@keyframes say { from { transform: translateY(4px); opacity: .4; } to { transform: none; opacity: 1; } }

.pitch { min-width: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 99px; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--soft); white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.status.live { color: var(--pink); border-color: rgba(255, 62, 154, .4); }
.status.live i { background: var(--pink); animation: blink 1.6s steps(2, start) infinite; }
.status.paper { color: var(--amber); border-color: rgba(255, 194, 79, .4); }
.status.paper i { background: var(--amber); }
.status.off i { background: var(--neg); }
.kick-pnl { font: 400 14px var(--mono); color: var(--soft); }
.kick-pnl b { font-weight: 600; }
h1 { margin: 0; font: 400 clamp(48px, 6vw, 76px)/.9 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.line { margin: 12px 0 0; font: 400 clamp(20px, 2.2vw, 28px)/1.15 var(--disp); color: var(--pink); }
.claim { margin: 18px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.mech { margin: 12px 0 0; font: 400 14px var(--mono); color: var(--soft); }
.mech b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.origin { margin: 10px 0 0; max-width: 36em; font-size: 16px; color: var(--mute); }
.ca { display: flex; align-items: center; gap: 12px; max-width: 560px; min-height: 52px; margin-top: 24px; padding: 4px 4px 4px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.ca-label { flex: none; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--pink); }
.ca code { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; color: var(--soft); }
.ca.minted code { color: var(--ink); }
.copy { flex: none; height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); font-weight: 600; font-size: 14px; cursor: pointer; }
.copy:hover { border-color: var(--pink); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.buy { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; background: var(--pink); color: var(--pink-ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.buy:hover { background: #ff63ad; }
.buy:active, .ghost:active, .copy:active, .rate-form button:active, .seg button:active, .more-btn:active { transform: translateY(1px); }
.ghost { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--ink); }
.ghost:hover { border-color: var(--soft); }
.ghost.wide { margin-top: 18px; height: 48px; }
.try { margin: 10px 0 0; font-size: 14px; color: var(--mute); }

/* ---- scoreboard */
.board { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.evline { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font: 400 14px var(--mono); color: var(--soft); }
.evline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evline i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.evline.flash span { animation: say .4s ease-out; }
.updated { flex: none; margin: 0; font: 400 12px var(--mono); color: var(--mute); }
.board-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.led { padding: 22px 26px; border-right: 1px solid var(--line); min-width: 0; }
.led .k small { margin-left: 6px; color: var(--mute); }
.led-v { margin: 8px 0 0; }
.big { font: 400 clamp(52px, 7.2vw, 92px)/1 var(--disp); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big.pos { color: var(--pos); } .big.neg { color: var(--neg); }
.spark { display: block; width: 100%; height: 48px; margin-top: 14px; overflow: visible; }
.spark path.l { fill: none; stroke: var(--pos); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark path.a { fill: var(--pos-dim); stroke: none; }
.spark line { stroke: var(--line-2); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.spark.neg path.l { stroke: var(--neg); } .spark.neg path.a { fill: var(--neg-dim); }
.led-mini { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: 14px; color: var(--mute); }
.led-mini b { font: 500 14px var(--mono); color: var(--soft); }
.cells { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.cell { padding: 18px 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.cell:nth-child(odd) { border-right: 1px solid var(--line); }
.cell:nth-child(n+3) { border-bottom: 0; }
.cell dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.cell dd { margin: 8px 0 0; font: 400 28px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cell dd small { margin-left: 8px; font: 400 12px var(--sans); letter-spacing: 0; color: var(--mute); }
.cell dd i { margin: 0 6px; font-style: normal; color: var(--line-2); }
.cell p { margin: 8px 0 0; font-size: 12px; color: var(--mute); }
.cell p b { font: 500 12px var(--mono); color: var(--soft); }
.tbl { color: var(--amber); }

/* ---- sections */
.sec { padding-top: 88px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px 48px; align-items: end; margin-bottom: 22px; }
.sec-head h2 { margin: 0; font: 400 clamp(28px, 3.6vw, 42px)/1 var(--disp); letter-spacing: -.02em; }
.sec-head p { margin: 0; max-width: 42em; font-size: 16px; color: var(--soft); }
.more { display: inline-flex; align-items: center; min-height: 44px; color: var(--pink); text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; }
.box { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 18px 20px; min-width: 0; }
.box-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.box-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: blink 1.6s steps(2, start) infinite; }
.live-dot.idle { background: var(--mute); animation: none; }
.paper-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; color: var(--soft); }
.paper-note b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 3px 7px; border-radius: 5px; background: var(--amber-dim); color: var(--amber); }
.tag { display: inline-block; padding: 2px 7px; border-radius: 5px; font: 600 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--line-2); color: var(--soft); white-space: nowrap; }
.tag.pink { color: var(--pink); border-color: rgba(255, 62, 154, .4); background: var(--pink-dim); }
.tag.go { color: var(--pos); border-color: rgba(55, 226, 154, .35); background: var(--pos-dim); }
.tag.red { color: var(--neg); border-color: rgba(255, 107, 87, .35); background: var(--neg-dim); }
.tag.amber { color: var(--amber); border-color: rgba(255, 194, 79, .35); background: var(--amber-dim); }
.tag.dim { color: var(--mute); }
.note-st { padding: 14px 2px 6px; }
.note-st strong { display: block; font-size: 16px; font-weight: 600; }
.note-st span { display: block; margin-top: 4px; font-size: 14px; color: var(--mute); }
.feed, .bags, .thoughts, .lanes, .tightened, .rulelist, .receipts, .recent { list-style: none; margin: 0; padding: 0; }

/* peek into his brain */
.seg { display: inline-flex; gap: 4px; margin: 0 0 10px; padding: 3px; border-radius: 12px; background: var(--bg); }
.seg button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font: 500 14px var(--sans); color: var(--soft); cursor: pointer; }
.seg button span { margin-left: 4px; font: 400 12px var(--mono); color: var(--mute); }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.thoughts li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.thoughts li:first-child { border-top: 0; }
.thoughts li.fresh { animation: rowin 1.2s ease-out; }
.thoughts li.note-st { display: block; }
.th-when { font: 400 12px var(--mono); color: var(--mute); padding-top: 3px; }
.th-main { min-width: 0; }
.th-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.th-sym { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 500 11px var(--mono); color: var(--mute); }
.pipe span { padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); white-space: nowrap; }
.pipe span.done { color: var(--soft); border-color: var(--line-2); }
.pipe span.na { color: var(--mute); border-style: dashed; }
.pipe span.skip { color: var(--neg); border-color: rgba(255, 107, 87, .35); }
.pipe span.ape { color: var(--pink-ink); background: var(--pink); border-color: var(--pink); }
.pipe span.sold { color: var(--pos); border-color: rgba(55, 226, 154, .35); }
.pipe b { font-weight: 400; color: var(--line-2); }
.odds { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--soft); white-space: nowrap; }
.odds .meter { width: 56px; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.odds .meter i { display: block; height: 100%; background: var(--pink); }
.th-say { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.th-say::before { content: "“"; color: var(--pink); margin-right: 1px; }
.th-say::after { content: "”"; color: var(--pink); margin-left: 1px; }
.th-also { margin: 4px 0 0; font: 400 12px var(--mono); color: var(--mute); }
.items { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.items li { display: inline-block; padding: 2px 8px; border-radius: 5px; background: var(--panel-2); font: 400 12px var(--mono); color: var(--soft); }
.items li.ok { color: var(--pos); background: var(--pos-dim); }
.items li.bad { color: var(--neg); background: var(--neg-dim); }
.items li.ok::before { content: "✓ "; } .items li.bad::before { content: "✗ "; }
.more-btn { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); font: 600 14px var(--sans); cursor: pointer; }
.more-btn:hover { border-color: var(--soft); }

/* he learns */
.learned-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; color: var(--soft); }
.learned-line b { font: 600 14px var(--mono); color: var(--pink); }
.learn-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
.lanes-box { grid-row: span 2; }
.lanes li { padding: 14px 0; border-top: 1px solid var(--line); }
.lanes li:first-child { border-top: 0; padding-top: 4px; }
.lane-top { display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap; }
.lane-name { font-weight: 600; font-size: 16px; }
.lane-share { margin-left: auto; font: 400 20px var(--disp); font-variant-numeric: tabular-nums; }
.lane-share small { font: 400 12px var(--mono); color: var(--mute); }
.lane-blurb { margin: 2px 0 0; font-size: 14px; color: var(--mute); }
.lane-bar { height: 8px; margin: 10px 0 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.lane-bar i { display: block; height: 100%; border-radius: 4px; background: var(--line-2); transition: width .8s ease; }
.lanes li.lead .lane-bar i { background: var(--pink); }
.lane-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 12px var(--mono); color: var(--mute); }
.lane-stats b { font-weight: 500; color: var(--soft); }
.lesson-head { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.lesson-text { margin: 10px 0 0; font-size: 14px; color: var(--soft); }
.lesson-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 400 12px var(--mono); color: var(--mute); }
.lesson-stats b { color: var(--soft); font-weight: 500; }
.lesson-next { margin: 12px 0 0; font: 400 12px var(--mono); color: var(--mute); }
.lesson-next b { color: var(--pink); font-weight: 500; }
.rulelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.rulelist li:first-child { border-top: 0; padding-top: 2px; }
.rulelist .rv { flex: none; font: 500 14px var(--mono); color: var(--ink); text-align: right; }
.rulelist .rv small { display: block; font: 400 11px var(--mono); color: var(--mute); }
.rulelist .rv.moved { color: var(--pink); }
.tightened { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.tightened li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 0; font-size: 14px; color: var(--soft); }
.tightened .t-when { font: 400 12px var(--mono); color: var(--mute); padding-top: 2px; }
.tightened .t-kind { margin-right: 6px; }

/* watch him trade */
.trade-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
.feed-box { grid-row: span 2; }
.day-box { align-self: stretch; }
.day { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0; }
.day dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.day dd { margin: 4px 0 0; font: 500 20px var(--mono); font-variant-numeric: tabular-nums; }
.feed .row { display: grid; grid-template-columns: 48px 72px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.feed li:first-child .row { border-top: 0; }
.feed a.row:hover .sym { color: var(--pink); }
.row .when { font: 400 12px var(--mono); color: var(--mute); }
.row .who { min-width: 0; }
.row .sym { display: block; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .note { display: block; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .amt { font: 500 14px var(--mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .go-ic { font-size: 12px; color: var(--mute); }
.row.stamp-in { animation: rowin .6s ease-out; }
@keyframes rowin { from { background: var(--pink-dim); } to { background: transparent; } }
.bags li { padding: 14px 0; border-top: 1px solid var(--line); }
.bags li:first-child { border-top: 0; padding-top: 4px; }
.bags li.note-st { padding-top: 6px; }
.bag-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bag-top .sym { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-top .mult { font: 400 20px var(--disp); font-variant-numeric: tabular-nums; }
.bag-sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font: 400 12px var(--mono); color: var(--mute); }
.track { position: relative; height: 6px; margin: 14px 0 6px; border-radius: 3px; background: var(--line); }
.track .entry { position: absolute; top: -4px; width: 1px; height: 14px; background: var(--mute); }
.track .now { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line-2); transition: left .6s ease; }
.track .now.pos { background: var(--pos); } .track .now.neg { background: var(--neg); }
.track-k { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--mute); }
.rules-line { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.rules-line b { font: 500 12px var(--mono); color: var(--soft); }

/* rate my bag */
.rate-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 40px; align-items: center; padding: 28px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); }
.rate-head h2 { margin: 0; font: 400 clamp(28px, 3.6vw, 42px)/1 var(--disp); letter-spacing: -.02em; }
.rate-head p { margin: 10px 0 0; color: var(--soft); font-size: 16px; }
.rate-form { display: flex; gap: 10px; }
.rate-form input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); font: 400 14px var(--mono); }
.rate-form input:focus { border-color: var(--pink); outline: 0; }
.rate-form input::placeholder { color: var(--mute); }
.rate-form input[aria-invalid="true"] { border-color: var(--neg); }
.rate-form button { flex: none; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--pink); color: var(--pink-ink); font-weight: 700; cursor: pointer; }
.rate-form button:hover { background: #ff63ad; }
.rate-form button:disabled { opacity: .6; cursor: wait; }
.verdict { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 18px; border-top: 1px solid var(--line); animation: say .3s ease-out; }
.stamp { display: inline-grid; place-items: center; min-width: 76px; height: 44px; padding: 0 12px; border-radius: 10px; font: 400 20px var(--disp); border: 1px solid var(--line-2); color: var(--soft); }
.stamp.ape { background: var(--pos); color: #02170d; border-color: var(--pos); }
.stamp.pass { color: var(--amber); border-color: rgba(255, 194, 79, .4); }
.stamp.rug { background: var(--neg); color: #1a0503; border-color: var(--neg); }
.roast { margin: 0; font-size: 16px; font-weight: 600; }
.reason { margin: 4px 0 0; font: 400 12px var(--mono); color: var(--mute); }
.reason.fine { font-family: var(--sans); }
.checks { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.checks li { padding: 2px 8px; border-radius: 5px; font: 400 12px var(--mono); background: var(--panel-2); color: var(--soft); }
.checks li.ok { color: var(--pos); background: var(--pos-dim); } .checks li.bad { color: var(--neg); background: var(--neg-dim); }
.checks li.ok::before { content: "✓ "; } .checks li.bad::before { content: "✗ "; }
.recent { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); }
.recent li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.recent .r-when { font: 400 12px var(--mono); color: var(--mute); }
.recent .r-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.recent .r-what b { color: var(--ink); margin-right: 8px; }

/* for holders */
.launch-in { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.perk-line { margin: 0; font-size: 16px; color: var(--soft); }
.perk-line b { color: var(--ink); font-weight: 600; }
.perk-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.perk-nums dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.perk-nums dd { margin: 4px 0 0; font: 500 16px var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.receipts { margin-top: 12px; }
.receipts li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.receipts li.note-st, .recent li.note-st { display: block; border-top: 0; font-size: 14px; color: var(--mute); }
.receipts .r-when { font: 400 12px var(--mono); color: var(--mute); }
.receipts .r-what small { display: block; font-size: 12px; color: var(--mute); }
.receipts .r-tx { display: flex; gap: 8px; }
.receipts .r-tx a, .recent a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--soft); text-decoration: none; font: 400 12px var(--mono); border: 1px solid var(--line-2); border-radius: 8px; }
.receipts .r-tx a:hover, .recent a:hover { color: var(--ink); border-color: var(--soft); }

/* how + faq */
.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 96px; }
.lower h2 { margin: 0 0 16px; font: 400 28px/1 var(--disp); letter-spacing: -.02em; }
.how ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.how li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--line); font-size: 16px; color: var(--soft); counter-increment: s; }
.how li::before { content: counter(s); position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 11px var(--mono); color: var(--pink); }
.how li b { color: var(--ink); }
.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; align-items: center; gap: 16px; min-height: 52px; padding: 10px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { min-width: 0; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--mute); }
.faq details[open] summary::after { content: "−"; color: var(--pink); }
.faq summary:hover { color: var(--pink); }
.faq details p { margin: 0 0 16px; font-size: 14px; color: var(--soft); }
footer { padding: 72px 0 40px; }
footer p { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mute); }

/* ---- /how-it-works */
.ghost.slim { height: 44px; font-size: 14px; }
.sec.first { padding-top: 40px; }
.sec-head.stack { display: block; }
.sec-head.stack p { margin-top: 12px; }
.narrow { max-width: 760px; }
.faq > h2 { margin: 0 0 16px; font: 400 28px/1 var(--disp); letter-spacing: -.02em; }
.page-head { padding: 48px 0 8px; }
.page-head h1 { font-size: clamp(44px, 6vw, 72px); }
.page-head p { max-width: 40em; margin: 16px 0 0; font-size: 16px; color: var(--soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pink-dim); font: 400 20px var(--disp); color: var(--pink); }
.step h3 { margin: 0; font-size: 16px; }
.step p { margin: 6px 0 0; font-size: 16px; color: var(--soft); }
.step p b, .money b { color: var(--ink); font-weight: 600; }
.step .when { display: inline-block; margin-top: 8px; font: 400 12px var(--mono); color: var(--mute); }
.lane-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lane-chips li { flex: 1 1 100%; font-size: 14px; color: var(--soft); }
.lane-chips li b { font: 600 11px var(--mono); letter-spacing: .06em; color: var(--ink); margin-right: 6px; }
.money { width: 100%; border-collapse: collapse; font-size: 14px; }
.money th, .money td { padding: 12px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.money th { width: 28%; font-weight: 600; color: var(--ink); }
.money td { color: var(--soft); }
.money tr:first-child th, .money tr:first-child td { border-top: 0; }
.money .num { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.money td.num { text-align: right; }
.money.keep th { width: auto; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

/* ---- responsive */
.bar-link { display: none; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 99px; font-size: 14px; color: var(--soft); text-decoration: none; white-space: nowrap; }
.bar-link:hover { color: var(--ink); }
@media (max-width: 1080px) { .nav { display: none; } .bar-link { display: inline-flex; } }
@media (min-width: 901px) { .sec-head:not(.stack) { grid-template-columns: auto minmax(0, 1fr); } .sec-head h2 { white-space: nowrap; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 24px; }
  .pitch { order: -1; }
  .face { width: min(100%, 420px); }
  .board-in { grid-template-columns: 1fr; }
  .led { border-right: 0; border-bottom: 1px solid var(--line); }
  .sec { padding-top: 64px; }
  .sec-head { grid-template-columns: 1fr; }
  .trade-in, .learn-in, .rate-box, .lower, .launch-in, .two { grid-template-columns: 1fr; }
  .lanes-box, .feed-box { grid-row: auto; }
  .lower { gap: 40px; padding-top: 72px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .bar-in { gap: 8px; height: 60px; }
  .brand span { display: none; }
  .brand { min-width: 44px; justify-content: center; }
  .pill { padding: 0 12px; }
  .pill.has-copy { padding-right: 4px; }
  .sound { padding: 0 12px; }
  h1 { font-size: clamp(48px, 15vw, 64px); }
  .line { font-size: 20px; }
  .claim { font-size: 20px; margin-top: 14px; }
  .mech { font-size: 14px; }
  .origin { font-size: 14px; }
  .ca { margin-top: 18px; }
  .ca code { font-size: 12px; }
  .buy, .ghost { height: 48px; }
  .buy { flex: 1 1 100%; justify-content: center; }
  .ctas .ghost { flex: 1 1 100%; }
  /* phone: the face is a compact live cam next to his speech bubble, so the board stays near the top */
  .face { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
  .screen { border-radius: 16px; box-shadow: 0 0 0 4px #0b0f22, 0 0 0 5px var(--line), 0 16px 40px -18px rgba(255, 62, 154, .45); }
  .mood-chip { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 11px; }
  .bubble { margin: 0; font-size: 14px; }
  .bubble::before { left: -7px; top: 50%; margin-top: -6px; border-top: 0; border-bottom: 1px solid var(--line-2); }
  .board { border-radius: 14px; }
  .board-head { padding: 10px 16px; }
  .updated { display: none; }
  .led { padding: 18px 16px; }
  .cell { padding: 14px 16px; }
  .cell dd { font-size: 28px; }
  .cell dd small { display: block; margin: 6px 0 0; }
  .box { padding: 16px 14px; }
  .seg { display: flex; }
  .seg button { flex: 1; padding: 0 8px; }
  .feed .row { grid-template-columns: 40px 60px minmax(0, 1fr) auto; gap: 8px; }
  .feed .row .go-ic { display: none; }
  .row .amt { font-size: 14px; }
  .thoughts li { grid-template-columns: 1fr; }
  .th-when { padding: 0; }
  .odds { margin-left: 0; }
  .th-say { font-size: 16px; }
  .rate-box { padding: 20px 16px; }
  .rate-form { flex-direction: column; }
  .rate-form input { flex: none; width: 100%; }
  .rate-form button { width: 100%; }
  .verdict { grid-template-columns: 1fr; gap: 10px; }
  .stamp { justify-self: start; }
  .receipts li, .recent li { grid-template-columns: minmax(0, 1fr) auto; }
  .receipts .r-when, .recent .r-when { display: none; }
  .perk-nums { grid-template-columns: 1fr 1fr; }
  .tightened li { grid-template-columns: 1fr; gap: 2px; }
  .step { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 14px; }
  .step-n { width: 32px; height: 32px; font-size: 16px; }
  .pill:not(.has-copy) { display: none; }
  .pill.has-copy ~ .sound-slot { display: none; }
  .row .note { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .money.keep tr { display: table-row; padding: 0; border: 0; }
  .money.keep th, .money.keep td { display: table-cell; padding: 10px 6px; border-top: 1px solid var(--line); }
  .money.keep tr:first-child th, .money.keep tr:first-child td { border-top: 0; }
  .money th { width: auto; }
  .money th, .money td { display: block; padding: 4px 0; border: 0; }
  .money tr { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
  .money tr:first-child { border-top: 0; }
}
@media (max-width: 360px) {
  .pill-k { display: none; }
  .pill code { font-size: 11px; }
  .tag { font-size: 11px; padding: 2px 5px; }
  .feed .row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .feed .row .when { display: none; }
}

/* ---- boot intro (built by intro.js; the page underneath is always in the HTML). A terminal that boots the bot. */
html.booting { overflow: hidden; animation: boot-scroll 0s 6s forwards; }
html.booting::before { content: ""; position: fixed; inset: 0; z-index: 40; background: var(--bg); animation: uncover .3s 6s forwards; }
@keyframes boot-scroll { to { overflow: visible; } }
@keyframes uncover { to { opacity: 0; visibility: hidden; } }
.boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px 16px; background: var(--bg); cursor: pointer; transition: opacity .32s ease, transform .32s ease; overflow: hidden; }
.boot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(255, 62, 154, .025) 3px 4px); }
.boot.leaving { opacity: 0; transform: scale(1.02); pointer-events: none; }
.boot-in { position: relative; width: min(100%, 580px); padding: 18px 20px 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.boot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.boot-head b { font: 400 16px var(--disp); letter-spacing: .02em; color: var(--ink); text-transform: none; }
.boot-bar { margin-top: 14px; height: 3px; background: var(--line); overflow: hidden; border-radius: 2px; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--pink); }
.boot.run .boot-bar i { animation: load 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
.boot.still .boot-bar i, .boot.ready .boot-bar i { width: 100%; animation: none; }
@keyframes load { to { width: 100%; } }
.boot-lines { list-style: none; padding: 0; margin: 16px 0 0; min-height: 13.2em; font: 400 14px/1.85 var(--mono); color: var(--soft); }
.boot-lines li { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.boot-lines li::before { content: ""; order: 1; flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--line-2); transform: translateY(-.3em); }
.boot-lines li:first-child::before { display: none; }
.boot-lines .bk { order: 0; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.boot-lines .bk::before { content: "> "; color: var(--pink); }
.boot-lines .br { order: 2; flex: 0 1 auto; min-width: 0; text-align: right; white-space: normal; color: var(--ink); font-weight: 500; }
.boot-lines .br.ok { color: var(--pos); }
.boot-lines .br.bad { color: var(--neg); }
.boot-lines .br.meh { color: var(--mute); }
.boot-lines li:last-child .br.ok { padding: 1px 8px; border-radius: 4px; background: var(--pink); color: var(--pink-ink); font-weight: 600; }
.boot.run .boot-lines li { animation: bootline .18s ease-out; }
@keyframes bootline { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.boot-face { width: 112px; height: 112px; margin: 14px 0 0 auto; border-radius: 16px; border: 1px solid var(--line-2); object-fit: cover; opacity: 0; }
.boot.punch .boot-face, .boot.still .boot-face { opacity: 1; }
.boot.run.punch .boot-face { animation: pop .3s ease-out both; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.boot-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 0; border: 0; background: none; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); cursor: pointer; visibility: hidden; }
.boot-go:focus-visible { outline: 0; }
.boot-go::before { content: ""; width: 8px; height: 14px; background: var(--pink); }
.boot.ready .boot-go { visibility: visible; color: var(--ink); }
.boot.ready .boot-go::before { animation: blink 1s steps(2, start) infinite; }
.boot.still .boot-go::before { animation: none; }
@media (min-width: 720px) {
  .boot-in { width: min(100%, 820px); display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 32px; }
  .boot-in > * { grid-column: 1; }
  .boot-in > .boot-face { grid-column: 2; grid-row: 2 / 5; align-self: end; justify-self: center; width: 190px; height: 190px; margin: 0 0 30px; }
  .boot-lines { font-size: 16px; }
}
@media (max-width: 519px) { .boot-in { padding: 16px 14px 18px; } .boot-lines { font-size: 12px; min-height: 13em; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.booting { animation: boot-scroll 0s 6s forwards !important; }
  html.booting::before { animation: uncover .01s 6s forwards !important; }
}

/* 404 */
.error-page { min-height: 80vh; display: grid; align-content: center; gap: 18px; }
.error-page p { margin: 0; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.error-page h1 { font-size: clamp(44px, 9vw, 80px); }
.error-page .buy { justify-self: start; }