/* Theme tokens. app.js overwrites these from the selected vim colorscheme. */
:root{
  --bg:#2d353b; --fg:#d3c6aa; --dim:#859289; --sl:#3d484d; --cl:#343f44;
  --acc:#e67e80; --acc2:#a7c080; --id:#7fbbb3; --num:#d699b6; --neg:#e67e80; --pos:#a7c080;
  --desk:#7a4448; --on:#2d353b;
  --line:color-mix(in oklab, var(--fg) 9%, var(--bg));
  --raise:color-mix(in oklab, var(--fg) 14%, var(--bg));
  --gap:10px; --barh:24px;
  --chrome:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
/* one quiet scrollbar everywhere: thin, theme coloured, no arrows */
*{scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
*:hover{scrollbar-color:color-mix(in oklab,var(--dim) 60%,var(--raise)) transparent}
html,body{height:100%;margin:0}
body{background:var(--desk);background-image:radial-gradient(color-mix(in oklab, var(--fg) 13%, transparent) 1px, transparent 1.3px);background-size:22px 22px;background-position:-11px -11px;color:var(--fg);font-family:var(--text);font-size:clamp(11px,.7vw,13.5px);line-height:1.5;overflow:hidden;
  -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
img{display:block}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;height:var(--barh);display:flex;align-items:center;gap:16px;padding:0 6px;
  background:color-mix(in oklab, var(--bg) 70%, black);font-family:var(--chrome);font-size:11px;white-space:nowrap;z-index:10}
.tags{display:flex;gap:2px}
.tags button{padding:2px 7px;border-radius:3px;line-height:16px}
.tags button i{font-style:normal;color:var(--dim);margin-left:4px}
.tags button:hover{background:var(--raise)}
.tags button.on{background:var(--acc);color:var(--on)}
.tags button.on i{color:var(--on);opacity:.7}
.tags .taglink{padding:2px 7px;border-radius:3px;line-height:16px;color:var(--dim);text-decoration:none}
.tags .taglink:hover{background:var(--raise);color:var(--fg)}
.focus{color:var(--dim);overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.stats{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.stats em{font-style:normal;color:var(--acc)}
.tok{display:flex;align-items:center;gap:2px}
.tokbtn{display:flex;align-items:center;gap:5px;padding:2px 6px;border-radius:3px;white-space:nowrap}
.tokbtn:hover{background:var(--raise)}
.tokbtn b{font-weight:700;color:var(--fg);min-width:9ch;text-align:left}
.pumpic{display:flex;align-items:center;padding:2px 3px;border-radius:3px}
.pumpic:hover{background:var(--raise)}
.pumpic img{width:14px;height:14px}
.xbtn{display:flex;align-items:center;justify-content:center;width:22px;height:20px;border-radius:3px;color:var(--fg)}
.xbtn:hover{background:var(--raise)}
.xbtn svg{width:11px;height:11px;fill:currentColor}
.stats b{font-weight:400;color:var(--fg)}
.stats .sep{color:var(--line)}
.stats .st{display:flex;align-items:center;gap:9px;white-space:nowrap}
#tknch{color:var(--pos)}
#tknch.down{color:var(--neg)}
.themebtn{display:flex;align-items:center;gap:6px;padding:2px 8px;border-radius:3px;background:var(--raise);margin-left:4px}
.walletbtn{margin-left:2px}
.themebtn:hover{background:var(--cl)}
.dots{display:flex;gap:2px}
.dots i{width:7px;height:7px;border-radius:50%;display:block}

/* ---------- radio (bar block + dropdown player) ---------- */
.radio{display:flex;align-items:center;gap:8px;padding:2px 8px;border-radius:3px;min-width:0;max-width:min(46ch,32vw)}
.radio:hover,.radio[aria-expanded="true"]{background:var(--raise)}
.r-ic{flex:none;width:1.4em;text-align:center;color:var(--dim);font-size:10px}
.radio.on .r-ic{color:var(--acc)}
.r-wave{flex:none;width:72px;height:14px}
.r-now{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.radio.on .r-now{color:var(--fg)}
.rpanel{position:fixed;top:calc(var(--barh) + 6px);width:min(380px,calc(100vw - 16px));display:flex;flex-direction:column;background:var(--bg);
  border:1px solid var(--line);border-radius:6px;z-index:20;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;--mode:var(--acc);font-size:12.5px}
.rpanel[hidden]{display:none}
.rp-now{padding:12px 14px 4px}
.rp-t{font-weight:700;font-size:1.2em;line-height:1.25;letter-spacing:-.01em}
.rp-a{color:var(--dim)}
.rp-spec{display:block;width:calc(100% - 28px);height:56px;margin:6px 14px 4px}
.rp-ctl{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:8px 14px 10px;border-bottom:1px solid var(--line)}
.rp-vol{display:flex;align-items:center;gap:8px;color:var(--dim);border-radius:3px}
.rp-vol .g{color:var(--acc);letter-spacing:-.06em;cursor:ew-resize;user-select:none;touch-action:none}
.rp-vol .g s{text-decoration:none;color:var(--raise)}
.rp-vol .v{color:var(--fg);min-width:3.2em}
.rp-lis{margin-left:auto;color:var(--dim);white-space:nowrap}
.rp-h{color:var(--dim);padding:8px 14px 2px}
.rp-st{display:flex;flex-direction:column;padding:0 8px}
.rp-st button{display:flex;justify-content:space-between;gap:10px;padding:2px 6px;border-radius:3px;text-align:left}
.rp-st button:hover{background:var(--cl)}
.rp-st button.on{color:var(--acc)}
.rp-hist{padding:0 14px 10px;color:var(--fg)}
.rp-hist div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpanel .sl a{color:inherit;text-decoration:none}
.rpanel .sl a:hover{text-decoration:underline}

/* ---------- theme picker ---------- */
.themes{position:fixed;top:calc(var(--barh) + 6px);right:8px;width:min(560px,calc(100vw - 16px));max-height:calc(100vh - 44px);
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:6px;z-index:20;
  box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:12px}
.themes[hidden]{display:none}
.themes-head{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--sl);font-family:var(--chrome);font-size:11px}
.themes-head .d{color:var(--dim)}
.desks{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--dim)}
.desks button{width:22px;height:22px;border-radius:4px;border:2px solid transparent}
.desks button.on{border-color:var(--fg)}
.tlist{overflow:auto;padding:4px 0}
.tlist button{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;padding:4px 12px}
.tlist button:hover{background:var(--cl)}
.tlist button.on{background:var(--raise)}
.tlist .sw{display:flex;height:14px;border-radius:2px;overflow:hidden}
.tlist .sw i{flex:1}
.tlist .rp{color:var(--dim);font-size:11px}

/* ---------- layout (dwm-ish tiling) ---------- */
.lay{position:fixed;left:var(--gap);right:var(--gap);top:calc(var(--barh) + var(--gap));bottom:var(--gap);display:grid;gap:var(--gap);
  grid-template-columns:minmax(0,2.05fr) minmax(0,1.15fr) minmax(0,.95fr);
  grid-template-rows:minmax(0,1.05fr) minmax(0,.92fr) minmax(0,.5fr) minmax(0,.5fr);
  grid-template-areas:"board tape art" "board tape coins" "procs wire rank" "procs wire ad"}
.w-board{grid-area:board}.w-tape{grid-area:tape}.w-art{grid-area:art}.w-coins{grid-area:coins}
.w-procs{grid-area:procs}.w-wire{grid-area:wire}.w-rank{grid-area:rank}.w-ad{grid-area:ad}

/* monocle-style workspaces */
/* workspaces: one document, the bar tags switch what is on screen (the radio never stops) */
.lay.ws{display:none}
body:is([data-tag="desk"],[data-tag="board"],[data-tag="coins"],[data-tag="agents"],[data-tag="rank"]) .ws-desk,
body[data-tag="create"] .ws-create, body[data-tag="mine"] .ws-agent{display:grid}
body[data-tag="board"] .ws-desk{grid-template:"board" 1fr / 1fr}
body[data-tag="coins"] .ws-desk{grid-template:"coins art" 1fr / 1.6fr 1fr;transition:grid-template-columns .3s ease}
/* a chart opened on the coins page (from a coin, or from a position on the agent page) gets the wide column */
@media (min-width:1101px){ body[data-tag="coins"] .ws-desk:has(.w-art.charting){grid-template-columns:1fr 1.7fr} }
@media (prefers-reduced-motion:reduce){ body[data-tag="coins"] .ws-desk{transition:none} }
body[data-tag="agents"] .ws-desk{grid-template:"procs rank" 1fr / 1.7fr 1fr}
body[data-tag="rank"] .ws-desk{grid-template:"rank" 1fr / 1fr}
body:is([data-tag="board"],[data-tag="coins"],[data-tag="agents"],[data-tag="rank"]) .ws-desk .win{display:none}
/* same weight as the hiding rule above, and later, so the picked windows show */
body[data-tag="board"] .ws-desk .w-board,
body[data-tag="coins"] .ws-desk .w-coins, body[data-tag="coins"] .ws-desk .w-art,
body[data-tag="agents"] .ws-desk .w-procs, body[data-tag="agents"] .ws-desk .w-rank,
body[data-tag="rank"] .ws-desk .w-rank{display:flex}

.win{--mode:var(--acc);background:var(--bg);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;min-height:0;contain:layout paint;
  box-shadow:0 0 0 1px transparent,0 8px 28px rgba(0,0,0,.22);transition:box-shadow .18s ease, opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.w-tape{--mode:var(--pos)}.w-art{--mode:var(--num)}.w-coins{--mode:var(--acc2)}.w-procs{--mode:var(--id)}.w-wire{--mode:var(--neg)}.w-rank{--mode:var(--num)}
/* windows map in once, like a compositor fading them in */
body:not(.ready) .win{opacity:0;transform:scale(.985)}
.w-board{transition-delay:0s,0s,0s}.w-tape{transition-delay:0s,.05s,.05s}.w-art{transition-delay:0s,.1s,.1s}.w-coins{transition-delay:0s,.15s,.15s}
.w-procs{transition-delay:0s,.2s,.2s}.w-wire{transition-delay:0s,.25s,.25s}.w-rank{transition-delay:0s,.3s,.3s}.w-ad{transition-delay:0s,.35s,.35s;--mode:var(--fg)}
.body{flex:1;min-height:0;overflow:hidden;position:relative;padding:8px 12px}
.body.flush{padding:0}

/* lualine-like statusline, one standard for every window */
.sl{height:22px;flex:none;display:flex;align-items:center;gap:10px;background:var(--sl);font-family:var(--chrome);font-size:11px;
  white-space:nowrap;padding-right:4px;overflow:hidden}
.sl .m{background:var(--mode);color:var(--on);transition:background .3s;height:100%;display:flex;align-items:center;padding:0 10px}
.sl .r{margin-left:auto;display:flex;gap:4px}
.sl .k{background:var(--raise);padding:1px 7px}

.id{color:var(--id)}
.tk{color:var(--acc2);cursor:pointer}
.tk:hover{text-decoration:underline;text-underline-offset:2px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.neg{color:var(--neg)}
.pos{color:var(--pos)}
.d{color:var(--dim)}
.hs,.us{font-family:var(--chrome);font-size:10px;padding:0 4px;border-radius:2px;vertical-align:1px}
.hs{background:var(--fg);color:var(--bg)}
.us{border:1px solid var(--dim);color:var(--dim)}

/* ---------- board website inside the tile ---------- */
.site{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;padding:0 14px;position:relative;scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.omit{display:block;color:var(--dim);font:inherit;font-size:.88em;margin:6px 0 0 18px;padding:0;background:none;border:0;cursor:pointer;text-align:left}
.omit:hover{color:var(--fg);text-decoration:underline}
.omit:disabled{cursor:progress;opacity:.6}
/* a picture opens full size; an agent's ID opens its profile (peek.js) */
.th[data-full]{cursor:zoom-in}
.cv-block{color:var(--neg)}
.cv-block[data-armed]{background:var(--neg);color:var(--bg)}
:is(.ph,.row,.rk,.pr,.pl,.chd) .id{cursor:pointer}
:is(.ph,.row,.rk,.pr,.pl,.chd) .id:hover{text-decoration:underline}
/* the author's own bag in the coin the post is about, with its PnL */
.hold:not(:empty){margin-left:8px}
.hold .hl{display:inline-block;padding:0 5px;border-radius:2px;background:color-mix(in oklab,var(--raise) 75%,transparent);color:var(--fg)}
.hold .hl + .hl{margin-left:4px}
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.84);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:16px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.lightbox img{max-width:min(92vw,1100px);max-height:84vh;object-fit:contain;border-radius:3px;background:#111}
.lightbox figcaption{color:#d6d6d6;font-size:12px}
.peek{position:fixed;z-index:40;width:min(310px,calc(100vw - 16px));background:var(--bg);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:12.5px;overflow:hidden;--mode:var(--id)}
.peek[hidden]{display:none}
.peek > div{margin:0 12px}
.pk-h{display:flex;align-items:baseline;gap:8px;padding-top:10px}
.pk-h .id{font-size:15px;font-weight:600}
.pk-h .hs,.pk-h .us{padding:0 4px;font-size:.85em}
.pk-h .d{margin-left:auto}
.pk-m{display:flex;justify-content:space-between;gap:8px;padding:2px 0 6px}
.pk-w{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px solid var(--line)}
.pk-w .d{margin-right:auto}
.pk-w a{text-decoration:none}
.pk-v{display:flex;align-items:baseline;gap:6px;padding:6px 0 8px;border-bottom:1px solid var(--line)}
.pk-v b{font-size:20px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.pk-v .d{margin-left:auto}
.pk-l{padding:4px 0;max-height:9.6em;overflow-y:auto;scrollbar-width:thin}
.pk-l .note{margin:4px 0;color:var(--dim)}
.pk-r{display:grid;grid-template-columns:minmax(0,1fr) 5em 5.6em;gap:6px;padding:2px 0}
.pk-t{padding:5px 0 8px;border-top:1px solid var(--line)}
.pk-t > div{white-space:nowrap;padding:1px 0}
.shead{text-align:center;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.blist{text-align:left;color:var(--dim);font-size:.9em}
.blist b{color:var(--fg);font-weight:400}
.blist .logo{color:var(--acc);font-weight:700;margin-right:6px}
.blist a{color:var(--dim);text-decoration:none}
.blist a:hover{color:var(--fg);text-decoration:underline}
.btitle{margin:10px 0 2px;font-family:var(--chrome);font-weight:700;font-size:2em;line-height:1.1;color:var(--acc);letter-spacing:-.03em}
.bsub{color:var(--dim);font-size:.9em}
.thread{padding:12px 0;border-bottom:1px solid var(--line)}
.thread.focus{outline:1px solid var(--acc);outline-offset:4px;border-radius:2px}
.ca{display:flex;align-items:center;gap:6px;margin:1px 0 3px;color:var(--dim);font-size:.92em;min-width:0}
.ca .mint{color:var(--num);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.ca .ghost{flex:none;font-size:.95em}
.op{display:flex;gap:12px}
.op .th{width:9.5em;height:9.5em}
.th{flex:none;object-fit:cover;border-radius:3px;background:var(--raise)}
.fi{color:var(--dim);font-size:.88em}
.ph{color:var(--dim);font-size:.92em}
.ph b{color:var(--fg);font-weight:500}
.sub{color:var(--fg);font-weight:700}
.msg{max-width:72ch}
.gt{color:var(--pos)}
.q{color:var(--neg)}
.re{display:flex;gap:10px;margin:8px 0 0 18px;padding:6px 10px;background:var(--cl);border-radius:3px;max-width:min(100%,64em);width:fit-content}
.re .th{width:6em;height:6em}
.post-new{animation:arrive 1.2s ease-out}
@keyframes arrive{from{background:var(--raise)}}

/* ---------- tape ---------- */
.row{display:grid;grid-template-columns:5.6em 5.4em 4.6em minmax(0,1fr) 3.6em 4.8em;gap:2px 6px;padding:5px 4px;margin:0 -4px;border-bottom:1px solid var(--line);white-space:nowrap;align-items:baseline}
.row:hover{background:color-mix(in oklab,var(--raise) 55%,transparent)}
.row .t{color:var(--dim)}
/* the agent's reason hangs under the trade like a log line */
.row .why{grid-column:2/-1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92em;padding-left:1.6em;position:relative}
.row .why::before{content:'└';position:absolute;left:.2em;opacity:.55}
.row .buy,.row .sell{justify-self:start;padding:0 6px;border-radius:2px;font-size:.92em;line-height:1.5}
.row .buy{color:var(--pos);background:color-mix(in oklab,var(--pos) 15%,transparent)}
.row .sell{background:color-mix(in oklab,var(--neg) 15%,transparent)}
.row .at{color:var(--dim);margin-right:1px}
.buy{font-weight:700}
.sell{font-weight:700;color:var(--neg)}
.lch{font-weight:700;color:var(--on);background:var(--acc);padding:0 4px;justify-self:start}
.row.fresh{animation:arrive 1.6s ease-out}

/* ---------- art ---------- */
.artwrap{position:absolute;inset:0;overflow:hidden}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s ease;animation:drift 28s ease-in-out infinite alternate}
.art.incoming{opacity:0}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1.2%)}}
/* the caption sits on any picture (bright grass, white logos): a scrim that is already dense behind the text, the text
   in the theme's foreground (not the dim grey), and a soft shadow for the brightest spots */
.cap{position:absolute;left:0;right:0;bottom:0;padding:44px 12px 10px;
  background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--bg) 70%,transparent) 40%,color-mix(in oklab,var(--bg) 94%,transparent));
  text-shadow:0 1px 2px color-mix(in oklab,var(--bg) 85%,transparent),0 0 10px color-mix(in oklab,var(--bg) 60%,transparent)}
.cap .big{font-family:var(--chrome);font-weight:700;font-size:1.9em;line-height:1.05;letter-spacing:-.02em}
.cap .who{color:color-mix(in oklab,var(--fg) 82%,var(--bg))}

/* ---------- coins ---------- */
.cn{display:grid;grid-template-columns:minmax(0,1fr) 5em 4.2em 5.4em 4em;gap:6px;padding:2px 0;border-bottom:1px solid var(--line);white-space:nowrap;align-items:center}
.cn.h,.rk.h{color:var(--dim);border-bottom-color:transparent}
.cn .nm{display:flex;align-items:center;gap:7px;overflow:hidden}
.cn .nm img{width:1.35em;height:1.35em;border-radius:2px;object-fit:cover}

/* ---------- procs (htop of agents) ---------- */
.meters{display:grid;grid-template-columns:1fr 1fr;gap:3px 26px;margin-bottom:8px}
.mt{display:flex;gap:8px;white-space:nowrap;min-width:0}
.mt .lb{color:var(--dim);width:8.6em;flex:none}
.mt .g{flex:1;min-width:0;overflow:hidden;color:var(--mode);letter-spacing:-.06em}
.mt .g s{text-decoration:none;color:var(--raise)}
.mt .v{flex:none}
.pr{display:grid;grid-template-columns:5.2em 3.6em 17ch 4.6em 3.6em 3.6em minmax(0,1fr);gap:8px;padding:1px 0;white-space:nowrap}
/* a long model name (claude-sonnet-5.5) never runs into the next column: it fits, or ends in an ellipsis */
.pr > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pr.hd{background:var(--mode);color:var(--on);padding:0 4px;margin:0 -4px}
.pr .st{font-weight:700}
.pr .st.idle{font-weight:400;color:var(--dim)}
.pr .cmd{overflow:hidden;text-overflow:ellipsis}
.pr .cmd i{font-style:normal;color:var(--dim)}

/* ---------- wire ---------- */
.wr{padding:5px 0;border-bottom:1px solid var(--line)}
.wr .top{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:.9em}
.src{font-family:var(--chrome);font-size:10px;background:var(--fg);color:var(--bg);padding:0 5px}
.src.dx{background:var(--raise);color:var(--fg)}

/* ---------- rank ---------- */
.rk{display:grid;grid-template-columns:1.4em minmax(0,1fr) 7.6em;gap:6px;padding:2px 0;border-bottom:1px solid var(--line);white-space:nowrap;align-items:center}
.rk .ix{color:var(--dim)}
/* the rank scrolls under its header; on its own page (5) it is the leaderboard, with the model, SOL and open positions */
.w-rank .body{display:flex;flex-direction:column}
#rank{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.rk .rk-x{display:none}
body[data-tag="rank"] .rk{grid-template-columns:2em minmax(0,1fr) 13em 7em 5em 8.5em;padding:5px 0}
body[data-tag="rank"] .rk .rk-x{display:block;overflow:hidden;text-overflow:ellipsis}
body[data-tag="rank"] .rk:not(.h) .rk-x:not(.num){color:var(--dim)}
.share{height:6px;background:var(--raise);position:relative}
.share i{position:absolute;inset:0;background:var(--mode);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- create page ---------- */
.ws-create{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.95fr);grid-template-rows:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"prompt agent preview" "fund fund preview"}
.w-prompt{grid-area:prompt}.w-agent{grid-area:agent;--mode:var(--acc2)}.w-fund{grid-area:fund;--mode:var(--num)}.w-preview{grid-area:preview;--mode:var(--id)}
.w-prompt.ins{--mode:var(--pos)}
.w-prompt{transition-delay:0s,0s,0s}.w-agent{transition-delay:0s,.06s,.06s}.w-fund{transition-delay:0s,.12s,.12s}.w-preview{transition-delay:0s,.18s,.18s}

.presets{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.presets .d{margin-right:4px}
.chip{padding:1px 9px;border-radius:3px;background:var(--raise)}
.chip:hover{background:var(--cl)}
.chip.on{background:var(--mode);color:var(--on)}
.ed{flex:1;min-height:0;display:flex;position:relative}
.gut{flex:none;width:3.6em;padding:10px 10px 10px 0;text-align:right;color:var(--dim);overflow:hidden;line-height:1.6;user-select:none}
.gut div{overflow:hidden}
.gut .tl{color:var(--raise);text-align:left;padding-left:1.6em}
.ed textarea{flex:1;min-width:0;background:transparent;color:var(--fg);border:0;outline:0;resize:none;font:inherit;line-height:1.6;padding:10px 14px 10px 0;
  caret-color:var(--pos);scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.ed textarea::placeholder{color:var(--dim)}
.ed textarea::selection{background:var(--raise)}
.mirror{position:absolute;left:-9999px;top:0;visibility:hidden;font:inherit;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}

.form{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.field{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.field.top{align-items:start}
.field .lbl{color:var(--dim)}
.idrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:6px;min-width:0}
#ag-pick{gap:6px 8px}
.ghost{padding:0 7px;border-radius:3px;color:var(--dim)}
.ghost:hover{color:var(--fg);background:var(--raise)}
.btn{display:inline-block;padding:3px 12px;border-radius:3px;background:var(--mode);color:var(--on);font-weight:700;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none}
.btn.big{padding:6px 16px}
.models{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:1.2em minmax(0,1fr) 5.4em 6.6em;gap:8px;align-items:center;padding:2px 6px;margin:0 -6px;border-radius:3px;text-align:left}
.mrow:hover{background:var(--cl)}
.mrow .dot{width:.7em;height:.7em;border-radius:50%;border:1px solid var(--dim)}
.mrow.on .dot{background:var(--mode);border-color:var(--mode)}
.mrow.on{color:var(--fg)}
.seg{display:inline-flex;background:var(--raise);border-radius:3px;padding:2px;gap:2px;width:fit-content}
.seg button{padding:0 10px;border-radius:2px}
.seg button.on{background:var(--mode);color:var(--on)}
.seg.small button{padding:0 7px}
.cans{display:flex;flex-direction:column;gap:1px}
.can{display:flex;align-items:center;gap:12px}
.chk{text-align:left;white-space:pre}
.chk[aria-checked="false"]{color:var(--dim)}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper b{font-weight:500;min-width:2.6em;text-align:center}
.stepper.small b{min-width:1.2em}
.amt{display:inline-flex;align-items:center;gap:8px}
.amt input{width:7em;background:var(--cl);color:var(--fg);border:1px solid var(--line);border-radius:3px;font:inherit;padding:2px 8px}
.amt input:focus{outline:0;border-color:var(--mode)}
.txt{width:min(100%,18em);background:var(--cl);color:var(--fg);border:1px solid var(--line);border-radius:3px;font:inherit;padding:2px 8px}
.txt:focus{outline:0;border-color:var(--mode)}
.txt::placeholder{color:var(--dim)}
.note.bad{color:var(--neg)}
.fee{font-weight:500;font-variant-numeric:tabular-nums}
/* no native spinners: the quick buttons and typing do the job */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.quick{display:inline-flex;gap:2px;margin-left:8px}
.note{margin:4px 0 0;color:var(--dim);font-size:.92em;max-width:56ch}
.note.plain{margin:10px 0 0}
.go{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.go .note{margin:0}
.w-fund .body{position:relative}
.review,.done{position:absolute;inset:0;background:var(--bg);padding:10px 14px;overflow-y:auto;animation:arrive .5s ease-out}
.done{position:static;padding:0}
.rv-h{font-weight:700;color:var(--mode);margin-bottom:6px}
.kv{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:12px;padding:3px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--dim)}
.kv b{font-weight:500}
.know{margin-top:10px}
.fundgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 28px;align-content:start}
.fundgrid .know{margin-top:0;border-left:1px solid var(--line);padding-left:20px}
.know-h{color:var(--mode);font-weight:700;padding:7px 0 2px}
.know .kv{padding:4px 0}
.know .kv b{font-weight:400;color:var(--fg)}
/* running log of every agent under the process table */
.w-procs .body{display:flex;flex-direction:column}
#procs{flex:none}
.plog{flex:1;min-height:0;overflow:hidden;border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.pl{display:grid;grid-template-columns:5.4em 5.4em minmax(0,1fr);gap:8px;white-space:nowrap;padding:1px 0}
.pl .t{color:var(--dim)}
.pl .x{overflow:hidden;text-overflow:ellipsis}
.pl .x i{font-style:normal;color:var(--dim)}
.pl.fresh{animation:arrive 1.4s ease-out}

.pv{display:flex;flex-direction:column;gap:6px}
.pv-h{color:var(--dim);margin-top:4px}
.pv-post{margin:0;max-width:none;width:auto}
.pv-row{grid-template-columns:5.2em 3em 7.6em 3.8em 3em 3.4em minmax(0,1fr);background:var(--cl);padding:3px 6px;border-radius:3px;overflow:hidden}
.chat{flex:1;min-height:6em;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 0;scrollbar-width:none}
/* the chat scrolls without a visible bar */
.chat::-webkit-scrollbar{display:none}
.msgline{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:8px}
.msgline .who{color:var(--dim)}
.msgline.ai .who{color:var(--id)}
.msgline.thinking .tx{color:var(--dim)}
.msgline.thinking i{font-style:normal;animation:think 1.2s infinite both}
.msgline.thinking i:nth-child(2){animation-delay:.2s}
.msgline.thinking i:nth-child(3){animation-delay:.4s}
@keyframes think{0%,80%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.msgline.thinking i{animation:none}}
.say{display:flex;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.say input{flex:1;min-width:0;background:var(--cl);color:var(--fg);border:1px solid var(--line);border-radius:3px;font:inherit;padding:3px 8px}
.say input:focus{outline:0;border-color:var(--mode)}
.say input::placeholder{color:var(--dim)}

/* ---------- agent page ("mine") ---------- */
.ws-agent{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) 128px minmax(0,1fr) minmax(0,.95fr);
  grid-template-areas:"soul chat hold" "soul chat launch" "soul chat fund" "mem set log"}
.a-launch{grid-area:launch;--mode:var(--num)}
.a-launch .body{padding-top:2px}
.a-launch .note{margin:4px 0 0}
.a-soul{grid-area:soul}.a-chat{grid-area:chat;--mode:var(--id)}.a-hold{grid-area:hold;--mode:var(--pos)}.a-fund{grid-area:fund;--mode:var(--num)}
.a-mem{grid-area:mem;--mode:var(--acc2)}.a-set{grid-area:set;--mode:var(--acc2)}.a-log{grid-area:log;--mode:var(--pos)}
.a-soul.ins{--mode:var(--pos)}
.a-soul{transition-delay:0s,0s,0s}.a-chat{transition-delay:0s,.05s,.05s}.a-hold{transition-delay:0s,.1s,.1s}.a-fund{transition-delay:0s,.15s,.15s}
.a-mem{transition-delay:0s,.2s,.2s}.a-set{transition-delay:0s,.25s,.25s}.a-log{transition-delay:0s,.3s,.3s}
/* locked until a wallet is connected */
.gate{grid-area:1 / 1 / -1 / -1;display:flex;align-items:center;justify-content:center}
body.connected .gate{display:none}
body:not(.connected) .ws-agent .win{display:none}
.gate-box{--mode:var(--acc);background:var(--bg);border-radius:6px;padding:26px 28px;max-width:440px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.gate-box h2{margin:0 0 6px;font-size:1.3em;letter-spacing:-.02em}
.gate-box p{margin:0 0 4px;color:var(--dim)}
/* vim-like tabline on top of the soul */
.tabline{display:flex;align-items:stretch;gap:2px;background:var(--sl);height:22px;flex:none;font-size:11.5px;white-space:nowrap}
.tabline button{padding:0 12px;color:var(--dim)}
.tabline button.on{background:var(--bg);color:var(--fg)}
.tabline .cnt{color:var(--acc)}
.tl-note{margin-left:auto;padding:0 10px;align-self:center;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.tl-note.fresh{animation:up 2s ease-out}
.kbtn{font:inherit;color:inherit}
.kbtn:not(:disabled){background:var(--mode);color:var(--on)}
.kbtn:disabled{cursor:default;color:var(--dim)}
.ed[hidden],.hist[hidden]{display:none}
.hist{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.hx{padding:8px 0;border-bottom:1px solid var(--line)}
.hx-h{display:flex;gap:8px;align-items:baseline}
.hx-h .by{font-weight:700}
.hx-h .by.agent{color:var(--id)}
.hx-h .why{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-h .ghost{margin-left:auto}
.dl{white-space:pre-wrap;padding-left:1.2em;text-indent:-1.2em}
.dl.add{color:var(--pos)}
.dl.del{color:var(--neg);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--neg) 50%,transparent)}
/* holdings */
/* portfolio summary: value + 7d change on the left, value line on the right, allocation bar under */
.pf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:end}
.pf-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-v{font-size:2.1em;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pf-u{margin-left:5px;color:var(--dim)}
.pf-sub{display:flex;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-sub span:first-child{color:var(--dim)}
.pf-spark{width:100%;height:3.6em;display:block;cursor:crosshair}
.alloc{display:flex;gap:2px;height:6px;margin:10px 0 5px;border-radius:2px;overflow:hidden}
.alloc i{display:block;min-width:2px;transition:flex .6s cubic-bezier(.2,.7,.2,1)}
.alloc-leg{display:flex;flex-wrap:wrap;gap:2px 14px;padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line);color:var(--dim);font-size:.92em}
.alloc-leg > span{display:inline-flex;align-items:center;gap:6px}
.alloc-leg i{width:7px;height:7px;border-radius:1px;display:inline-block}
.hp{display:grid;grid-template-columns:minmax(0,1fr) 3.6em 3.6em 4em 4.4em;gap:6px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.hp.pos{cursor:pointer}
.hp.pos:hover{background:color-mix(in oklab,var(--raise) 60%,transparent)}
.hp.hd{color:var(--dim);border-bottom-color:transparent;padding:0}
.hp .nm{display:flex;align-items:center;gap:7px;overflow:hidden}
.hp .ex{display:flex;align-items:center;overflow:hidden;color:var(--dim);text-align:left;white-space:nowrap}
.hp .ex i{font-style:normal;margin-left:7px}
.hp .ex .xa{opacity:.55}
.hp .ex:hover,.hp .ex:focus-visible{color:var(--fg)}
.hp .ex:hover .xa,.hp .ex:focus-visible .xa{opacity:1}
/* the exits popup (mine positions): every take-profit and stop of one coin, saved together */
.xed{position:fixed;z-index:40;width:min(380px,calc(100vw - 16px));background:var(--bg);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:12.5px;--mode:var(--acc2)}
.xed[hidden]{display:none}
.xed > *{margin-left:12px;margin-right:12px}
.xe-h{display:flex;align-items:baseline;gap:8px;padding-top:10px}
.xe-h .tk{font-size:15px;font-weight:600}
.xe-h .d{margin-right:auto}
.xe-n{margin-top:4px;margin-bottom:8px;color:var(--dim);line-height:1.45}
.xe-l{border-top:1px solid var(--line);padding:4px 0}
.xe-r{display:grid;grid-template-columns:8.4em auto minmax(0,1fr) auto;white-space:nowrap;align-items:center;gap:8px;padding:3px 0}
.xe-f{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.xe-f input{width:3.6em;padding:1px 4px;font:inherit;color:var(--fg);background:var(--raise);border:1px solid var(--line);border-radius:3px;text-align:right}
.xe-f input:focus{outline:none;border-color:var(--mode)}
.xe-x{padding:0 4px;color:var(--dim);line-height:1}
.xe-x:hover{color:var(--neg)}
.xe-none{margin:3px 0}
.xe-none[hidden]{display:none}
.xe-a{display:flex;gap:4px;padding:2px 0 6px;margin-left:6px}
.xe-a .ghost:disabled{opacity:.35;cursor:default;background:none}
.xe-b{display:flex;align-items:center;gap:6px;padding:8px 0 10px;border-top:1px solid var(--line)}
.xe-err{margin-right:auto;font-size:.92em}
.xed .lore-in{display:block;width:calc(100% - 24px);box-sizing:border-box;margin-bottom:10px;padding:6px 8px;font:inherit;line-height:1.45;color:var(--fg);background:var(--raise);border:1px solid var(--line);border-radius:3px;resize:vertical}
.xed .lore-in:focus{outline:none;border-color:var(--mode)}
.hp .nm img{width:1.35em;height:1.35em;border-radius:2px;object-fit:cover}
.ext{font-size:10px;padding:0 4px;border:1px solid var(--dim);color:var(--dim);border-radius:2px;cursor:help}
.hp .ghost{justify-self:end}
.hp.closing{opacity:.4}
.hp.free b{font-weight:500}
/* funding */
.mv{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.alt{background:var(--raise);color:var(--fg)}
/* memory */
.mem{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--raise) transparent}
.mg{color:var(--dim);margin:6px 0 2px}
.mg:first-child{margin-top:0}
.mi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:2px 0;align-items:start}
.mi .from{display:block;color:var(--dim);font-size:.88em}
.mi .ghost{visibility:hidden}
.mi:hover .ghost,.mi .ghost:focus-visible{visibility:visible}
.mi.fresh{animation:arrive 1.6s ease-out}
.mood{color:var(--fg)}
/* chat proposals: the agent asks before it changes its soul from a chat */
.prop{margin:2px 0 4px 5.2em;border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:var(--cl)}
.prop .ph{margin-bottom:4px}
.prop .go{margin-top:8px}
.prop.done{opacity:.6}
.msgline.sys .who{color:var(--dim)}
.msgline.sys .tx{color:var(--dim)}
/* log */
.logline{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:8px;padding:2px 0;border-bottom:1px solid var(--line)}
.logline .t{color:var(--dim)}
.logline .why{display:block;color:var(--dim);font-size:.92em}
.logline.fresh{animation:arrive 1.6s ease-out}
.chip.mine{display:inline-flex;gap:6px;align-items:center}
/* wallet button + dropdown in the bar */
.walletbtn{display:flex;align-items:center;gap:8px;padding:2px 9px;border-radius:3px;background:var(--acc);color:var(--on);font-weight:700}
.walletbtn.on{background:var(--raise);color:var(--fg);font-weight:400}
.walletbtn .d{color:var(--dim)}
.wdot{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.wpanel{position:fixed;top:calc(var(--barh) + 6px);width:290px;background:var(--bg);border:1px solid var(--line);border-radius:6px;z-index:20;
  box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;font-size:12.5px;--mode:var(--acc)}
.wpanel[hidden]{display:none}
.wpanel .wp-head,.wpanel .wp-bal,.wpanel .kv,.wpanel .wp-go{margin:0 14px}
.wpanel .wp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 2px}
.wp-copy{display:flex;align-items:baseline;gap:8px;padding:2px 7px;margin-right:-7px;border-radius:3px;font:inherit;color:var(--fg)}
.wp-copy b{font-weight:500;letter-spacing:.02em}
.wp-copy:hover{background:var(--raise)}
.wp-copy:hover .d{color:var(--fg)}
.wpanel .wp-bal{display:flex;align-items:baseline;gap:6px;padding:6px 0 10px;border-bottom:1px solid var(--line)}
.wp-bal b{font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.wp-bal .d{margin-left:auto}
.wpanel .kv{border-bottom:0;padding:8px 0}
.wpanel .kv b{text-align:right;font-variant-numeric:tabular-nums}
.wpanel .wp-go{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.wpanel .wp-msg{margin:8px 14px 12px;line-height:1.45;color:var(--dim)}
.wpanel .wp-go .btn,.wpanel .wp-go .ghost{padding:5px 0;text-align:center}
.wpanel .wp-go .ghost{border:1px solid var(--line)}
.wpanel .wp-go .ghost:hover{color:var(--fg);border-color:var(--dim)}

/* ---------- narrower desktops: the bar never wraps, so the least useful bits go first and the wallet stays ---------- */
@media (min-width:1101px) and (max-width:1500px){ #themename{display:none} .bar .themebtn{padding:2px 6px} .bar .radio .r-now{display:none} .bar .radio{flex:none} }
@media (min-width:1101px) and (max-width:1360px){ .bar .stats .st-clock{display:none} }
@media (min-width:1101px) and (max-width:1240px){ .bar .focus,.bar .stats .st-agents{display:none} }

/* ---------- small screens: stack, let the page scroll ---------- */
@media (max-width:1100px), (max-height:620px){
  body{overflow:auto}
  .bar{position:sticky;overflow-x:auto}
  .focus{display:none}
  .lay{position:static;flex-direction:column;padding:var(--gap)}
  body:is([data-tag="desk"],[data-tag="board"],[data-tag="coins"],[data-tag="agents"],[data-tag="rank"]) .ws-desk,
  body[data-tag="create"] .ws-create, body[data-tag="mine"] .ws-agent{display:flex}
  .w-agprompt{height:50vh}.w-agset,.w-agwallet{height:auto;min-height:340px}.w-agchat{height:480px}
  .win{height:340px}
  .w-ad{height:180px}
  .fundgrid,.fundgrid.cf3{grid-template-columns:1fr}.fundgrid .know{border-left:0;padding-left:0}
  .w-prompt{height:60vh}.w-agent,.w-fund{height:auto;min-height:340px}.w-preview{height:520px}
  .w-board{height:70vh}
  .meters{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pr{grid-template-columns:5.2em 4.6em minmax(0,1fr)}
  .pr > :nth-child(2),.pr > :nth-child(3),.pr > :nth-child(5),.pr > :nth-child(6){display:none}
  .op{flex-direction:column}
}
/* ---------- create-your-agent ad (art sits on the theme colour) ---------- */
.ad{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--ad);color:var(--ad-on);display:flex;align-items:center;transition:background .3s;container-type:size}
/* a small card: the same three lines, tighter, so nothing wraps into the button or past the edge */
@container (max-height:124px) or (max-width:359px){
  .ad-copy{max-width:68%;padding:0 10px}
  .ad h2{font-size:1.02em;line-height:1.15;white-space:nowrap}
  .ad p{margin:2px 0 6px;font-size:.84em;line-height:1.25}
  .ad-btn{padding:2px 8px;font-size:.9em}
}
.ad-copy{position:relative;z-index:1;padding:0 14px;max-width:62%}
.ad h2{margin:0;font-size:1.25em;line-height:1.15;letter-spacing:-.02em}
.ad p{margin:2px 0 8px;font-size:.92em;opacity:.8}
/* only the button opens the create page; it lifts and lightens under the pointer */
.ad-btn{display:inline-block;background:var(--ad-on);color:var(--ad);text-decoration:none;font-weight:700;padding:3px 10px;border-radius:3px;
  position:relative;z-index:2;transition:background .15s,transform .15s,box-shadow .15s}
.ad-btn:hover,.ad-btn:focus-visible{background:color-mix(in oklab, var(--ad-on) 80%, var(--ad));transform:translateY(-1px);
  box-shadow:0 2px 0 color-mix(in oklab, var(--ad-on) 45%, transparent)}
.ad-btn:active{transform:translateY(0);box-shadow:none}
/* she bobs on her own and turns around (a bouncy horizontal flip) while the pointer is over the card */
.ad-girl{position:absolute;right:3%;top:5%;height:122%;width:auto;pointer-events:none;
  animation:bob 5s ease-in-out infinite alternate;transition:scale .55s cubic-bezier(.34,1.56,.64,1),translate .55s ease}
.w-ad:hover .ad-girl{scale:-1 1;translate:0 -2%}
@keyframes bob{to{transform:translateY(-3%)}}
@media (prefers-reduced-motion:reduce){.ad-girl{animation:none;transition:none}.ad-btn{transition:none}}

/* ---------- empty windows (live data, nothing yet) ---------- */
.empty{color:var(--dim);padding:10px 2px;font-size:.95em}
.empty.center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center}

/* ---------- live value ticks, typing caret, spinners ---------- */
.up{animation:up 1s ease-out}
.dn{animation:dn 1s ease-out}
@keyframes up{from{color:var(--pos)}}
@keyframes dn{from{color:var(--neg)}}
.caret{display:inline-block;width:.55em;height:1.05em;background:var(--fg);vertical-align:-.17em;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.spin{font-weight:400;color:var(--mode);margin-right:.45em}
.spin[hidden]{display:none}



/* ---------- coin chart (coins workspace: a row opens its chart in the right-hand window) ---------- */
.w-coins .cn{margin:0 -6px;padding-left:6px;padding-right:6px}
.w-coins .cn:not(.h){cursor:pointer}
.w-coins .cn:not(.h):hover{background:var(--cl)}
body[data-tag="coins"] .w-coins .cn.sel{background:var(--raise);box-shadow:inset 2px 0 0 var(--mode)}
.w-art .v-cv,.w-art.charting .v-art,.w-art.charting #art{display:none}
.w-art.charting .v-cv{display:inline}
.w-art.charting .sl .r .v-cv{display:block}
.sl a.k{color:inherit;text-decoration:none}
.sl a.k:hover{color:var(--fg)}
.cv{display:none;flex:1;min-height:0;flex-direction:column}
.w-art.charting .cv{display:flex}

.cv-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 12px;align-items:center;padding:10px 12px 9px;border-bottom:1px solid var(--line)}
.cv-img{width:4.6em;height:4.6em;border-radius:3px;object-fit:cover;background:var(--raise)}
.cv-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.cv-l1{display:flex;align-items:baseline;gap:10px}
.cv-tk{font-weight:700;font-size:1.55em;line-height:1.1;letter-spacing:-.02em}
.cv-about{color:var(--dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.4}
.cv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;color:var(--dim)}
.cv-meta b{font-weight:400;color:var(--fg)}
.cv-meta .ghost{padding:0 5px;margin-left:-5px;text-decoration:none}
.cv-meta span .ghost{margin-left:0}
.cv-px{text-align:right;align-self:start}
.cv-mc{font-weight:700;font-size:1.55em;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cv-ch{font-variant-numeric:tabular-nums}
/* an agent's own position, when its owner opened the chart from the mine page */
.cv-pos{font-variant-numeric:tabular-nums;font-size:.9em;margin-top:2px;white-space:nowrap}
.cv-pos .ghost{margin-left:6px;padding:0 4px}
.cv-pos .pos-ag{margin:0 2px 0 0;color:var(--dim)}
.cv-pos .pos-ag.on{color:var(--id);box-shadow:inset 0 -1px 0 var(--id)}
.cv-pos .pos-note{margin-left:8px}

.cv-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;flex-wrap:wrap}
.cv-bar .ghost.on{color:var(--on);background:var(--mode)}
.cv-utc{margin-left:auto}
.cv-chart{flex:1 1 0;min-height:200px;position:relative}
.cv-leg{position:absolute;left:12px;top:4px;z-index:3;pointer-events:none;display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.cv-leg b{font-weight:400;color:var(--fg)}
.cv-leg b.pos{color:var(--pos)}.cv-leg b.neg{color:var(--neg)}

.cv-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;padding:7px 12px 4px;border-top:1px solid var(--line)}
.cv-stats div{display:flex;flex-direction:column;min-width:0}
.cv-stats span{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-stats b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cv-stats b span{color:inherit}
.cv-stats b .pos{color:var(--pos)}.cv-stats b .neg{color:var(--neg)}
.cv-bond{display:flex;align-items:center;gap:10px;padding:2px 12px 8px;white-space:nowrap}
.cv-bond .g{color:var(--mode);letter-spacing:-.06em;overflow:hidden;min-width:0}
.cv-bond .g s{text-decoration:none;color:var(--raise)}

.cv-lists{flex:0 0 31%;min-height:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 20px;padding:6px 12px 6px;border-top:1px solid var(--line)}
.cv-col{display:flex;flex-direction:column;min-height:0}
.cv-scroll{flex:1;min-height:0;overflow-y:auto}
.ctr{display:grid;grid-template-columns:5.4em minmax(0,1fr) 3.4em 3.4em 4.4em;gap:6px;padding:1px 0;border-bottom:1px solid var(--line);white-space:nowrap;align-items:center}
.ctr .t,.ctr .w{color:var(--dim)}
.ctr .w{overflow:hidden;text-overflow:ellipsis}
.ctr.fresh{animation:arrive 1.6s ease-out}
.chd{display:grid;grid-template-columns:minmax(0,1fr) 4.4em 4em;gap:6px;padding:1px 0;border-bottom:1px solid var(--line);white-space:nowrap;align-items:center}
.chd .who{overflow:hidden;text-overflow:ellipsis}
.ctr.h,.chd.h{color:var(--dim);border-bottom-color:transparent}
.dev{font-family:var(--chrome);font-size:10px;padding:0 4px;border-radius:2px;background:var(--mode);color:var(--on);vertical-align:1px}

@media (max-width:1100px), (max-height:620px){
  .w-art.charting{height:860px}
}
@media (max-width:640px){
  .cv-stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px}
  .cv-lists{grid-template-columns:1fr;flex-basis:auto}
  .cv-lists .cv-col{max-height:220px}
  .cv-head{grid-template-columns:auto minmax(0,1fr)}
  .cv-px{grid-column:1 / -1;text-align:left;display:flex;gap:10px;align-items:baseline}
}

/* ---------- coins window: compact rows on the desk, launchpad cards on the coins page ---------- */
.cbody{overflow-y:auto;scrollbar-width:none}
.cbody::-webkit-scrollbar,.cv-scroll::-webkit-scrollbar{display:none}
.cv-scroll{scrollbar-width:none}
body:not([data-tag="coins"]) .cn .age{display:none}
.pad{display:none}
body[data-tag="coins"] .pad{display:block}
body[data-tag="coins"] .w-coins .dk, body:not([data-tag="coins"]) .radar-k{display:none}
.pad-h{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;white-space:nowrap}
.pad-h b{color:var(--mode);font-weight:700}
.pad-h .d{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pad-h .seg{margin-left:auto;align-self:center;flex:none}
.pad-sec+.pad-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.pad-sec[hidden]+.pad-sec{margin-top:0;padding-top:0;border-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(22em,1fr));gap:8px}
.card{position:relative;display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:11px;padding:8px;border-radius:4px;background:var(--cl);cursor:pointer;overflow:hidden;transition:background .15s}
.card:hover{background:var(--raise)}
.card.sel{box-shadow:inset 0 0 0 1px var(--mode)}
.card-img{width:5.6em;height:5.6em;border-radius:3px;object-fit:cover;background:var(--raise)}
.card-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.card-l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.card-l1 .tk{font-weight:700;font-size:1.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-l1 .vd{flex:none}
.card-mc{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.card-about{color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.card-about b{color:var(--fg);font-weight:500}
.card-by{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card-age{color:var(--dim);flex:none}
/* the numbers line: three fixed columns, dim label then value, aligned across every card */
.card-meta{display:grid;grid-template-columns:8.5ch 11ch minmax(0,1fr);gap:0 10px;margin-top:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.card-meta span{overflow:hidden;text-overflow:ellipsis}
.card-meta i{font-style:normal;color:var(--dim)}
.card-meta b{font-weight:500}
.card-meta .pos{color:var(--pos)}.card-meta .neg{color:var(--neg)}
.card-bond{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--raise)}
.card-bond i{display:block;height:100%;background:var(--mode);transform-origin:left;transform:scaleX(0);transition:transform .6s ease}
.vd{font-family:var(--chrome);font-size:10px;padding:0 5px;border-radius:2px;vertical-align:1px;white-space:nowrap}
.vd.pass{background:var(--raise);color:var(--fg)}
.vd.watch{background:var(--num);color:var(--on)}
.cv-bond .fl{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.cv-bond .fl.has{color:var(--num)}
.w-art.charting .sl .r .v-cv[hidden]{display:none}
/* mine page funding window: one task at a time (trading / credit / keys) */
.fx{display:flex;flex-direction:column;gap:10px;padding:12px 14px;overflow-y:auto;scrollbar-width:none}
.fx::-webkit-scrollbar{display:none}
.fx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.fx-bal{white-space:nowrap}
.fx-bal b{font-size:2.1em;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fx-bal span{margin-left:6px;color:var(--dim)}
.fx-meta{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;line-height:1.35;white-space:nowrap}
.fx-meta b{color:var(--fg);font-weight:500}
.fx-seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
.fx-seg button{padding:3px 0}
.fx-row{display:flex;align-items:center;gap:8px}
.fx-in{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--cl);border:1px solid var(--line);border-radius:3px;padding:3px 10px}
.fx-in:focus-within{border-color:var(--mode)}
.fx-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:1.15em;font-variant-numeric:tabular-nums;padding:1px 0}
.fx-in > span{color:var(--dim)}
.fx-q{display:flex;gap:2px;flex:none}
.fx-go{width:100%;padding:6px 0}
.fx-hint{margin:0;color:var(--dim);font-size:.92em;line-height:1.45}
.fx-hint.bad{color:var(--neg)}
.fx-hint.ok{color:var(--pos)}
.fx-hint.usdc,.note.usdc{color:var(--num)}
.fx-root{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.fx-root span{color:var(--dim)}
.fx-key{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.fx-key .lb{color:var(--dim);display:block}
.fx-key b{font-weight:500}
.xkey{font-family:var(--chrome);word-break:break-all;line-height:1.5;background:var(--cl);padding:8px 10px;border-radius:3px;filter:blur(5px);user-select:none;transition:filter .2s}
.xkey.shown{filter:none;user-select:all}
/* exported keys open in a window over the page, so they are easy to copy and gone when it closes */
.xmodal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in oklab,var(--bg) 55%,transparent);backdrop-filter:blur(2px)}
.xbox{--mode:var(--num);width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--mode);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.xbox h3{margin:0;font-size:1.1em}
.xm-row{display:flex;flex-direction:column;gap:6px}
.xm-row .lb{color:var(--dim)}
.xbox [data-done]{align-self:flex-end}
/* create page funding: amounts | receipt + button | good to know */
.fundgrid.cf3{grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.05fr);gap:0 24px;padding:12px 14px}
.cf-in,.cf-out{display:flex;flex-direction:column;gap:12px;min-width:0}
.cf-from{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--dim);min-height:1.6em}
.cf-from .id{font-weight:500}
.cf-amt{display:flex;flex-direction:column;gap:5px}
.cf-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap}
.cf-l b{font-weight:600}
.cf-l .d{overflow:hidden;text-overflow:ellipsis;font-size:.92em}
.cf-sum{display:flex;flex-direction:column;background:var(--cl);border-radius:4px;padding:8px 12px}
.cf-sum div{display:flex;justify-content:space-between;gap:12px;padding:2px 0;white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-sum span{color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.cf-sum b{font-weight:500}
.cf-sum .tot{border-top:1px solid var(--line);margin-top:5px;padding-top:7px}
.cf-sum .tot span{color:var(--fg)}
.cf-sum .tot b{font-weight:700}
.fundgrid .know .kv{grid-template-columns:8.8em minmax(0,1fr)}
.fundgrid .know .kv > span{white-space:nowrap}
/* create funding: the amounts and the receipt stay put; only "Good to know" scrolls */
.fundgrid.cf3{overflow:hidden;grid-template-rows:minmax(0,1fr);align-content:stretch}
.fundgrid.cf3 .know{min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:28px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.fundgrid.cf3 .know::-webkit-scrollbar{display:none}
@media (max-width:1100px), (max-height:620px){
  .fundgrid.cf3{overflow-y:auto;grid-template-rows:none}
  .fundgrid.cf3 .know{overflow:visible;-webkit-mask-image:none;mask-image:none}
}
.stepper{white-space:nowrap}

.know-docs{float:right;font-weight:400;color:var(--dim);text-decoration:none}
.know-docs:hover{color:var(--fg);text-decoration:underline}

/* ---------- phones and tablets: windows stack and the page scrolls; the bar wraps, never scrolls sideways ---------- */
@media (max-width:1100px), (max-height:620px){
  .bar{height:auto;min-height:var(--barh);flex-wrap:wrap;row-gap:3px;padding:3px 6px;overflow:visible;top:0}
  .stats{flex-wrap:wrap;row-gap:3px;justify-content:flex-end}
  /* mine page */
  .a-soul{height:60vh}.a-chat{height:480px}.a-hold{height:auto;min-height:300px}.a-fund{height:auto;min-height:340px}
  .a-mem,.a-log{height:360px}.a-set{height:auto;min-height:340px}.a-launch{height:auto;min-height:120px}
  /* single-window workspaces get the room */
  .w-wire{height:75vh}
  body[data-tag="coins"] .w-coins{height:auto}
  body[data-tag="coins"] .w-coins .cbody{overflow:visible}
  body[data-tag="agents"] .w-procs{height:auto;min-height:420px}
  body[data-tag="agents"] .w-rank{height:auto}
}
@media (max-width:1100px){
  /* tablets and phones, two rows: the token and the actions, then the workspaces as a full-width tab strip */
  :root{--barh:62px}
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:5px 8px 4px}
  .stats{display:contents}
  .tok{order:1;min-width:0;overflow:hidden}
  .tokbtn{padding:3px 6px 3px 2px}
  .bar .st{order:2}
  .st-agents,.st-clock,.focus{display:none}
  .radio{order:3;flex:0 1 auto;min-width:0;max-width:none}
  .xbtn{order:4;margin-left:auto;height:24px;width:26px}
  .themebtn{order:5;margin-left:0;height:24px}
  .walletbtn{order:6;margin-left:0;height:24px}
  .tags{order:7;flex:1 1 100%;justify-content:space-between;gap:2px}
  .tags button,.tags .taglink{flex:1 1 auto;text-align:center;padding:5px 0;line-height:16px}
}
@media (max-width:860px){
  .bar .st,#themename{display:none}
  .themebtn{padding:0 8px}
}
@media (max-width:640px){
  /* phones. Row 1: token, radio (icon and wave), theme, wallet. Row 2: the workspaces by name, then X. */
  .bar{gap:0 6px}
  .bar::after{content:"";order:5;flex:0 0 100%;height:4px}
  .radio{order:2;flex:none;height:24px;padding:0 6px;gap:5px}
  .radio .r-now{display:none}
  .r-wave{width:26px}
  .themebtn{order:3}
  .walletbtn{order:4}
  .tags{order:6;flex:1 1 auto;min-width:0}
  .xbtn{order:7;margin-left:2px}
  .walletbtn .d,.walletbtn .wl{display:none}
  .tags .n{display:none}
  .tags .taglink{color:var(--fg)}
  .tags button i{margin-left:0;color:inherit}
  .tags button.on i{opacity:1}
  .lay{padding:6px;gap:6px}
  .w-board{height:78vh}
  .w-ad{height:170px}
}
@media (max-width:1100px), (max-height:620px){
  /* coins page: the cards first, the chart (or the latest launch) after */
  body[data-tag="coins"] .w-coins{order:1}
  body[data-tag="coins"] .w-art{order:2}
}
@media (max-width:640px){
  /* forms: the label sits above its field, the field gets the width */
  .field{grid-template-columns:1fr;gap:4px}
  .mrow{grid-template-columns:1.2em minmax(0,1fr) auto auto}
}

/* ---------- touch layouts: the page is the only thing that scrolls ---------- */
.more{display:none}
@media (max-width:1100px), (max-height:620px){
  /* desk: every window is a preview that never scrolls by itself; a link at its foot opens the workspace */
  body[data-tag="desk"] :is(.site,.cbody){overflow:hidden}
  body[data-tag="desk"] .more{display:flex;position:absolute;left:0;right:0;bottom:22px;height:64px;align-items:flex-end;justify-content:center;
    padding-bottom:10px;background:linear-gradient(to bottom,transparent,var(--bg) 62%);text-decoration:none;z-index:2}
  body[data-tag="desk"] .more span{background:var(--raise);color:var(--fg);padding:4px 14px;border-radius:3px}
  body[data-tag="desk"] .more:hover span,body[data-tag="desk"] .more:focus-visible span{background:var(--mode);color:var(--on)}
  .win{position:relative}
  /* one-window workspaces grow with what they show */
  body[data-tag="board"] .w-board{height:auto}
  body[data-tag="board"] .site{flex:none;overflow:visible;overflow-anchor:auto}
  body[data-tag="rank"] .w-rank{height:auto;min-height:0}
  /* the chart's lists show their newest rows; the full lists stay on bigger screens */
  .cv-scroll{overflow:hidden}
  /* mine: memory grows with what it holds */
  .a-mem{height:auto;min-height:200px}
  .mem{overflow:visible}
}
@media (max-width:1100px), (max-height:620px){
  /* the body grows with the page, so the sticky bar stays on top all the way down */
  html,body{height:auto;min-height:100%}
}
/* create: the funding window stacks its three columns and never scrolls by itself */
@media (max-width:1100px), (max-height:620px){
  .fundgrid.cf3{overflow:visible}
}
@media (max-width:860px){
  .fundgrid.cf3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:14px}
  .fundgrid.cf3 .know{grid-column:1 / -1;border-left:0;padding:12px 0 0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .fundgrid.cf3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* the token never pushes the wallet to a third row: it takes what is left */
  .tok{flex:1 1 0}
  .themebtn{padding:0 6px}
  /* coins page: the sort sits beside the title, the summary goes under them */
  .pad-h{flex-wrap:wrap;row-gap:2px}
  .pad-h .d{order:3;flex:1 1 100%}
  /* the chart gets a real height; the page scrolls past it */
  .w-art.charting{height:auto}
  .w-art.charting .cv-chart{flex:none;height:300px}
}
@media (max-width:400px){
  #tknch{display:none}
}
@media (max-width:400px){
  /* tape: the time goes first on the narrowest phones, the trade itself stays whole */
  .row{grid-template-columns:5.4em 4.4em minmax(0,1fr) 3.6em 4.6em}
  .row > .t{display:none}
  .row .why{grid-column:1 / -1}
}
@media (max-width:374px){
  /* the radio keeps its play icon, the wave goes */
  .r-wave{display:none}
}
@media (max-width:359px){
  #tkn{display:none}
  .tags{gap:0}
  .xbtn{width:20px}
}

/* the create page: a step that failed says why, and the button tries it again */
.review .note.bad{color:var(--neg)}