/* APE BOT v4. v1's machine (dark, green, a robot at the button, a big live number) without the slop: one glow, a solid title,
   Bungee only for headings, Geist for words, mono only for numbers and logs. Every panel is fed by the ledger and has an alive empty state. */
@font-face { font-family: "Bungee"; src: url("/fonts/bungee.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; }
@font-face { font-family: "Departure Mono"; src: url("/fonts/departure-mono.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #050805; --panel: #0a100b; --panel-2: #0e150f; --line: #17211a; --line-2: #24322a;
  --ink: #eaf2eb; --soft: #a8b5aa; --mute: #6c7a6f;
  --go: #3eef6e; --go-dim: rgba(62, 239, 110, .12); --go-ink: #031207;
  --red: #ff5f5f; --red-dim: rgba(255, 95, 95, .12); --amber: #ffc04d; --amber-dim: rgba(255, 192, 77, .12);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --disp: "Bungee", "Geist", ui-sans-serif, sans-serif;
  --led: "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: 72px; }
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 machine 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(62, 239, 110, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 239, 110, .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; }
code, .num { font-family: var(--mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
.wrap { width: min(100% - 32px, 1160px); margin-inline: auto; }
.pos { color: var(--go); } .neg { color: var(--red); }
.k { margin: 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.hint { font: 400 11.5px var(--mono); color: var(--mute); }
.fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mute); }

/* ---- top bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(5, 8, 5, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 15px var(--disp); letter-spacing: .01em; flex: none; }
.brand img { border-radius: 7px; }
.nav { display: flex; gap: 22px; margin-left: 12px; font-size: 13.5px; color: var(--soft); }
.nav a { text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pill { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); min-width: 0; }
.pill-k { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.pill code { font-size: 12.5px; white-space: nowrap; }
.pill-copy { height: 26px; padding: 0 11px; border: 0; border-radius: 99px; background: var(--ink); color: var(--bg); font: 600 12px var(--sans); cursor: pointer; }
.sound { height: 34px; padding: 0 12px; 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[aria-pressed="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--go); vertical-align: 1px; }

/* ---- hero */
.hero { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; align-items: center; padding: 34px 0 26px; }
.face { margin: 0; position: relative; }
.screen { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #000; border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px #0b110c, 0 0 0 7px var(--line), 0 30px 90px -30px rgba(62, 239, 110, .38); } /* the page's one glow */
.bot { width: 100%; height: 100%; object-fit: cover; }
.bot.swap { animation: swap .38s ease-out; }
@keyframes swap { from { opacity: .3; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cam-ui { display: none; }
.mood-chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px;
  background: rgba(3, 8, 4, .78); border: 1px solid rgba(62, 239, 110, .3); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--go); }
.mood-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2, start) infinite; }
.face[data-mood="sweating"] .mood-chip, .face[data-mood="rekt"] .mood-chip { color: var(--red); border-color: rgba(255, 95, 95, .35); }
.face[data-mood="burning"] .mood-chip { color: var(--amber); border-color: rgba(255, 192, 77, .35); }
.face[data-mood="sleeping"] .mood-chip { color: var(--mute); border-color: var(--line-2); }
@keyframes blink { 50% { opacity: .25; } }
.bubble { position: relative; margin: 14px 0 0; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); font-size: 15px; 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 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--go); }
.bubble.say { animation: say .3s ease-out; }
@keyframes say { from { transform: translateY(4px); opacity: .4; } to { transform: none; opacity: 1; } }

/* art b: the MS-Paint monkey on the live operator cam */
.face[data-art="b"] .screen { background: #fff; border-color: #2a332c; box-shadow: 0 0 0 6px #0b110c, 0 0 0 7px var(--line), 0 30px 70px -30px rgba(0, 0, 0, .8); }
.face[data-art="b"] .cam-ui { display: flex; position: absolute; inset: 0 0 auto; justify-content: space-between; padding: 12px 14px; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: #111; }
.face[data-art="b"] .cam-ui span { padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, .86); }
.cam-rec i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e11; vertical-align: 0; animation: blink 1.2s steps(2, start) infinite; }
.face[data-art="b"] .screen::after { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 2px solid transparent;
  background: linear-gradient(#111, #111) top left / 18px 2px, linear-gradient(#111, #111) top left / 2px 18px, linear-gradient(#111, #111) top right / 18px 2px, linear-gradient(#111, #111) top right / 2px 18px,
    linear-gradient(#111, #111) bottom left / 18px 2px, linear-gradient(#111, #111) bottom left / 2px 18px, linear-gradient(#111, #111) bottom right / 18px 2px, linear-gradient(#111, #111) bottom right / 2px 18px;
  background-repeat: no-repeat; background-origin: border-box; opacity: .6; }
.face[data-art="b"] .mood-chip { background: #0a100b; }

.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 11.5px 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(--go); border-color: rgba(62, 239, 110, .35); }
.status.live i { background: var(--go); animation: blink 1.6s steps(2, start) infinite; }
.status.off i { background: var(--red); }
.kick-what { font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
h1 { margin: 0; font: 400 clamp(56px, 7.6vw, 96px)/.92 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.line { margin: 14px 0 0; font: 400 clamp(22px, 2.7vw, 32px)/1.1 var(--disp); color: var(--go); }
.claim { margin: 18px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.art-pick { position: absolute; right: 12px; bottom: 12px; display: flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: rgba(3, 8, 4, .85); }
.art-pick a { padding: 5px 10px; font: 600 11px var(--mono); color: var(--soft); text-decoration: none; }
.art-pick a.on { background: var(--go); color: var(--go-ink); }
.sub { max-width: 34em; margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--soft); }
.ca { display: flex; align-items: center; gap: 12px; max-width: 560px; margin-top: 26px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.ca-label { flex: none; font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--go); }
.ca code { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }
.copy { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.copy:hover { border-color: var(--go); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.buy { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; background: var(--go); color: var(--go-ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.buy:hover { background: #5ff588; }
.buy.inpage svg { transform: rotate(135deg); }
.ghost { display: inline-flex; align-items: center; height: 52px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); }
.ghost:hover { border-color: var(--soft); }

/* ---- 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 13px 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(--go); }
.evline.flash span { animation: say .4s ease-out; }
.updated { flex: none; margin: 0; font: 400 11.5px var(--mono); color: var(--mute); }
.board-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.led { padding: 22px 26px 22px; border-right: 1px solid var(--line); min-width: 0; }
.led .k small { margin-left: 6px; color: var(--mute); }
.led-v { margin: 6px 0 0; }
.big { font: 400 clamp(52px, 7.4vw, 96px)/1 var(--led); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big.pos { color: var(--go); } .big.neg { color: var(--red); }
.spark { display: block; width: 100%; height: 48px; margin-top: 14px; overflow: visible; }
.spark path.l { fill: none; stroke: var(--go); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark path.a { fill: var(--go-dim); stroke: none; }
.spark line { stroke: var(--line-2); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.spark.neg path.l { stroke: var(--red); } .spark.neg path.a { fill: var(--red-dim); }
.led-mini { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.led-mini b { font: 500 13px 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: 500 34px/1 var(--mono); 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: 12.5px; color: var(--mute); }
.cell p b { font: 500 12.5px var(--mono); color: var(--soft); }
.burnv { color: var(--amber); }

/* ---- sections */
.sec { padding-top: 88px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 48px; align-items: end; margin-bottom: 22px; }
.sec-head h2 { margin: 0; font: 400 clamp(26px, 3.4vw, 40px)/1 var(--disp); letter-spacing: -.005em; }
.sec-head p { margin: 0; max-width: 40em; font-size: 15.5px; color: var(--soft); }
.more { color: var(--go); 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: baseline; gap: 12px; margin-bottom: 12px; }
.box-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--go); 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 dashed var(--line-2); border-radius: 10px; font-size: 13.5px; color: var(--soft); }
.paper-note b { font: 600 10.5px 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 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--line-2); color: var(--soft); white-space: nowrap; }
.tag.go { color: var(--go); border-color: rgba(62, 239, 110, .35); background: var(--go-dim); }
.tag.red { color: var(--red); border-color: rgba(255, 95, 95, .35); background: var(--red-dim); }
.tag.amber { color: var(--amber); border-color: rgba(255, 192, 77, .35); background: var(--amber-dim); }
.tag.dim { color: var(--mute); }
.empty-st { padding: 18px 2px 8px; }
.empty-st strong { display: block; font-size: 16px; font-weight: 600; }
.empty-st span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--mute); }

/* 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 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.day dd { margin: 4px 0 0; font: 500 18px var(--mono); font-variant-numeric: tabular-nums; }
.feed, .bags, .thoughts, .lanes, .tightened, .receipts, .subs, .picks { list-style: none; margin: 0; padding: 0; }
.feed .row { display: grid; grid-template-columns: 52px 88px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; padding: 11px 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(--go); }
.row .when { font: 400 11.5px var(--mono); color: var(--mute); }
.row .who { min-width: 0; }
.row .sym { display: block; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .note { display: block; font-size: 12.5px; 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 .5s ease-out; }
@keyframes rowin { from { background: var(--go-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; }
.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: 500 22px var(--mono); 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: linear-gradient(90deg, var(--red-dim), var(--line) 30%, var(--line) 60%, var(--go-dim)); }
.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(--go); } .track .now.neg { background: var(--red); }
.track-k { display: flex; justify-content: space-between; font: 400 10.5px var(--mono); color: var(--mute); }
.rules-line { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }
.rules-line b { font: 500 12.5px var(--mono); color: var(--soft); }

/* peek into his brain */
.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; padding-top: 4px; }
.thoughts li.fresh { animation: rowin 1.2s ease-out; }
.th-when { font: 400 11.5px 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; }
.pipe { display: flex; 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 { opacity: .45; text-decoration: line-through; }
.pipe span.skip { color: var(--red); border-color: rgba(255, 95, 95, .35); }
.pipe span.ape { color: var(--go-ink); background: var(--go); border-color: var(--go); }
.pipe span.sold { color: var(--go); border-color: rgba(62, 239, 110, .35); }
.pipe b { font-weight: 400; color: var(--line-2); }
.odds { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px 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(--go); }
.th-say { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.th-say::before { content: "“"; color: var(--go); margin-right: 1px; }
.th-say::after { content: "”"; color: var(--go); margin-left: 1px; }
.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: 0; border-radius: 5px; background: var(--panel-2); font: 400 11.5px var(--mono); color: var(--soft); }
.items li.ok { color: var(--go); background: var(--go-dim); }
.items li.bad { color: var(--red); background: var(--red-dim); }
.items li.ok::before { content: "✓ "; } .items li.bad::before { content: "✗ "; }

/* 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(--go); }
.learn-in { display: grid; grid-template-columns: minmax(0, 1.2fr) 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: 15px; }
.lane-share { margin-left: auto; font: 500 22px var(--mono); font-variant-numeric: tabular-nums; }
.lane-share small { font-size: 12px; color: var(--mute); }
.lane-blurb { margin: 2px 0 0; font-size: 12.5px; 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(--go); }
.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: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.lesson-text { margin: 10px 0 0; font-size: 14.5px; 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; }
.tightened li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--soft); }
.tightened li:first-child { border-top: 0; padding-top: 2px; }
.tightened li.empty-st, .receipts li.empty-st, .picks li.empty-st, .subs li.empty-st, .thoughts li.empty-st { display: block; }
.tightened .t-when { font: 400 11.5px var(--mono); color: var(--mute); padding-top: 2px; }
.tightened .t-kind { margin-right: 6px; }
.bars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bars span { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 6px; font: 400 12px var(--mono); color: var(--soft); }
.bars span.learned { color: var(--go); border-color: rgba(62, 239, 110, .35); }

/* 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(26px, 3.4vw, 40px)/1 var(--disp); }
.rate-head p { margin: 10px 0 0; color: var(--soft); font-size: 15px; }
.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::placeholder { color: var(--mute); }
.rate-form input[aria-invalid="true"] { border-color: var(--red); }
.rate-form button { flex: none; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; cursor: pointer; }
.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(--go); color: var(--go-ink); border-color: var(--go); }
.stamp.pass { color: var(--amber); border-color: rgba(255, 192, 77, .4); }
.stamp.rug { background: var(--red); color: #1a0303; border-color: var(--red); }
.roast { margin: 0; font-size: 17px; font-weight: 600; }
.reason { margin: 4px 0 0; font: 400 12.5px 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 11.5px var(--mono); background: var(--panel-2); color: var(--soft); }
.checks li.ok { color: var(--go); background: var(--go-dim); } .checks li.bad { color: var(--red); background: var(--red-dim); }
.checks li.ok::before { content: "✓ "; } .checks li.bad::before { content: "✗ "; }

/* burns */
.burn-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.burn-total { padding: 22px 24px; }
.burn-big { margin: 8px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.burn-big strong { font: 400 clamp(44px, 5.4vw, 68px)/1 var(--led); color: var(--amber); letter-spacing: -.02em; }
.burn-big span { font: 500 13px var(--mono); color: var(--mute); }
.burn-mini { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; font-size: 13px; color: var(--mute); }
.burn-mini b { font: 500 13px var(--mono); color: var(--soft); }
.next-burn { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--soft); }
.next-burn b { font: 500 15px var(--mono); color: var(--amber); }
.receipts li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; }
.receipts li:first-child { border-top: 0; padding-top: 2px; }
.receipts .r-when { font: 400 11.5px var(--mono); color: var(--mute); }
.receipts .r-what b { font-family: var(--mono); font-weight: 500; color: var(--amber); }
.receipts .r-what small { display: block; font-size: 12px; color: var(--mute); }
.receipts .r-tx { display: flex; gap: 8px; font: 400 12px var(--mono); }
.receipts .r-tx a { color: var(--soft); text-decoration: none; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 5px; }
.receipts .r-tx a:hover { color: var(--ink); border-color: var(--soft); }

/* sub-bots */
.subs-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.subs li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.subs li:first-child { border-top: 0; padding-top: 2px; }
.subs .rk { font: 500 13px var(--mono); color: var(--mute); }
.subs li:first-child .rk { color: var(--go); }
.subs .nm { min-width: 0; }
.subs .nm b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs .nm small { display: block; font: 400 12px var(--mono); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs .pl { font: 500 14px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.subs li.slot .nm b { color: var(--soft); font-weight: 500; }
.subs li.slot .pl { color: var(--mute); font-size: 12px; }
.spawn-box h3 { margin: 0; font: 400 20px var(--disp); }
.spawn-req { margin: 8px 0 0; font-size: 13.5px; color: var(--soft); }
.spawn-req b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.spawn-form { display: grid; gap: 6px; margin-top: 14px; }
.spawn-form label { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin-top: 6px; }
.spawn-form input, .spawn-form select { height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); font-size: 14px; width: 100%; }
.style-blurb { margin: 2px 0 0; font-size: 12.5px; color: var(--mute); min-height: 1.5em; }
.spawn-form button { margin-top: 8px; height: 46px; border: 0; border-radius: 10px; background: var(--go); color: var(--go-ink); font-weight: 700; cursor: pointer; }
.spawn-form button:disabled { background: var(--panel-2); color: var(--mute); border: 1px solid var(--line-2); cursor: not-allowed; }
.spawn-out { margin: 6px 0 0; font-size: 13px; color: var(--soft); }
.spawn-out.neg { color: var(--red); }

/* 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 24px/1 var(--disp); }
.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: 15px; 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 11.5px var(--mono); color: var(--go); }
.how li b { color: var(--ink); }
.how a { color: var(--go); }
.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: 14px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 18px/1 var(--mono); color: var(--mute); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; font-size: 14.5px; color: var(--soft); }
.faq a { color: var(--go); }
footer { padding: 72px 0 40px; }
footer p { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }


/* what holders get: one compact strip, four perks, each with its live element */
.holders { margin-top: 18px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px 28px; align-items: start; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--panel), var(--bg)); }
.holders-head h2 { margin: 0; font: 400 22px/1.05 var(--disp); }
.holders-head p { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.perk { display: flex; flex-direction: column; padding: 0 20px; border-left: 1px solid var(--line); min-width: 0; }
.perk-t { font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--ink); }
.perk-t:hover { color: var(--go); }
.perk-t::after { content: " →"; color: var(--mute); font-weight: 400; }
.perk p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--soft); }
.perk .perk-live { margin-top: auto; padding-top: 12px; font: 400 12px var(--mono); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perk .perk-live b { font: 500 15px var(--mono); color: var(--amber); }
.perk .perk-live .pos { color: var(--go); } .perk .perk-live .neg { color: var(--red); }
.picks li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.picks li:first-child { border-top: 0; padding-top: 2px; }
.picks .p-when { font: 400 11.5px var(--mono); color: var(--mute); }
.picks .p-what { min-width: 0; }
.picks .p-what b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picks .p-what small { display: block; font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) {
  .holders { grid-template-columns: 1fr; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .perk:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .holders { padding: 18px 16px; }
  .perks { grid-template-columns: 1fr; gap: 0; }
  .perk { border-left: 0; padding: 12px 0; border-top: 1px solid var(--line); }
  .perk .perk-live { padding-top: 6px; }
  .picks li { grid-template-columns: 1fr auto; }
  .picks .p-when { display: none; }
}

/* ---- responsive */
@media (max-width: 1080px) {
  .nav { display: none; }
}
@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, .burn-in, .subs-in, .rate-box, .lower { 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: 10px; height: 52px; }
  .brand span { display: none; }
  .pill { padding-left: 10px; }
  .sound { padding: 0 10px; }
  h1 { font-size: clamp(46px, 15vw, 64px); }
  .line { font-size: 21px; }
  .claim { font-size: 18px; margin-top: 14px; }
  .sub { display: none; } /* phone: the claim line carries it; the live board comes up sooner */
  .art-pick { right: 4px; bottom: 4px; }
  .art-pick a { padding: 3px 6px; font-size: 9px; }
  .ca { margin-top: 20px; flex-wrap: wrap; gap: 6px 10px; padding: 10px 10px 10px 12px; }
  .ca code { flex-basis: 100%; order: 3; font-size: 12px; }
  .ca-label { margin-right: auto; }
  .buy, .ghost { height: 48px; }
  .buy { flex: 1 1 100%; justify-content: center; }
  /* phone: the face becomes a compact live cam next to his speech bubble, so the live board stays near the top */
  .face { width: 100%; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; }
  .screen { border-radius: 16px; box-shadow: 0 0 0 4px #0b110c, 0 0 0 5px var(--line), 0 16px 40px -18px rgba(62, 239, 110, .4); }
  .face[data-art="b"] .screen { box-shadow: 0 0 0 4px #0b110c, 0 0 0 5px var(--line); }
  .face[data-art="b"] .cam-ui { display: none; }
  .face[data-art="b"] .screen::after { inset: 5px; }
  .mood-chip { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 9px; }
  .bubble { margin: 0; font-size: 14.5px; }
  .bubble::before { left: -7px; top: 50%; margin-top: -6px; border-top: 0; border-bottom: 1px solid var(--line-2); }
  .ghost { flex: 1 1 0; justify-content: center; padding: 0 12px; font-size: 14px; }
  .board { border-radius: 14px; }
  .board-head { padding: 10px 16px; }
  .updated { display: none; }
  .led { padding: 18px 16px; }
  .cell { padding: 14px 16px; }
  .cell dd { font-size: 26px; }
  .cell dd small { display: block; margin: 6px 0 0; }
  .box { padding: 16px 14px; }
  .feed .row { grid-template-columns: 40px 64px minmax(0, 1fr) auto; gap: 8px; }
  .feed .row .go-ic { display: none; }
  .row .amt { font-size: 13px; }
  .thoughts li { grid-template-columns: 1fr; }
  .th-when { padding: 0; }
  .odds { margin-left: 0; }
  .th-say { font-size: 15px; }
  .rate-box { padding: 20px 16px; }
  .rate-form { flex-direction: column; }
  .rate-form button { width: 100%; }
  .verdict { grid-template-columns: 1fr; gap: 10px; }
  .stamp { justify-self: start; }
  .receipts li { grid-template-columns: 40px minmax(0, 1fr); }
  .receipts .r-tx { grid-column: 2; }
  .tightened li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 360px) {
  .pill-k { display: none; }
  .pill code { font-size: 11.5px; }
  .tag { font-size: 9.5px; padding: 2px 5px; }
  .feed .row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .feed .row .when { display: none; }
  .pipe { flex-wrap: wrap; }
}

/* ---- 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(62, 239, 110, .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 14px 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(--go); }
.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::after { content: none; }
.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(--go); }
.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(--go); }
.boot-lines .br.bad { color: var(--red); }
.boot-lines .br.meh { color: var(--mute); }
.boot-lines li:last-child .br.ok { padding: 1px 8px; border-radius: 4px; background: var(--go); color: var(--go-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 { position: absolute; right: 18px; bottom: 54px; width: 128px; height: 128px; border-radius: 16px; border: 1px solid var(--line-2); object-fit: cover; box-shadow: 0 20px 50px -18px rgba(62, 239, 110, .45); opacity: 0; transform: scale(.4) rotate(-10deg); }
.boot.punch .boot-face, .boot.still .boot-face { opacity: 1; transform: rotate(-4deg); }
.boot.run.punch .boot-face { animation: pop .42s cubic-bezier(.2, 1.6, .4, 1) both, slamface .9s .45s ease-in-out infinite; }
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-10deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes slamface { 0%, 60%, 100% { transform: rotate(-4deg); } 72% { transform: rotate(-4deg) translateY(4px) scale(1.02, .97); } }
.boot-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; 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(--go); }
.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 (max-width: 519px) {
  .boot-in { padding: 16px 14px 18px; }
  .boot-lines { font-size: 12px; min-height: 13em; }
  .boot-face { position: relative; right: auto; bottom: auto; display: block; width: 104px; height: 104px; margin: 14px 0 0 auto; }
}
@media (min-width: 720px) {
  .boot-in { width: min(100%, 820px); display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 32px; }
  .boot-in > * { grid-column: 1; }
  .boot-in > .boot-face { position: static; grid-column: 2; grid-row: 2 / 5; align-self: end; justify-self: center; width: 200px; height: 200px; margin-bottom: 30px; }
  .boot-lines { font-size: 15px; }
}

@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; }
}