/* Fonts are served from this site, never from Google: a line where fonts.gstatic.com is slow or unreachable (an IPv6-only
   route, a filtering ISP) used to fall back to the system monospace (FreeMono on Linux). Latin subset, variable weights. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 94%; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); }
/* AgentHood. One stylesheet. Dark ink, amber signal, mono for anything a machine said. */
:root {
  /* the logo's palette: pure black, Robinhood lime (#CCFF00), white; lime at 16% for shaded surfaces */
  --bg: #000000; --accent: #CCFF00; --accent-soft: rgb(204 255 0 / .16);
  --ink: var(--bg); --panel: #0b0c09; --raise: #13150f; --line: #23271a; --line-hi: #363d27;
  --text: #FFFFFF; --dim: #a3a796; --faint: #6b705e;
  --amber: var(--accent); --amber-ink: #0b0e00; --link: #e2ff7a; --ok: #CCFF00; --bad: #ff6b6b;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --gutter: 16px; --max: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* no visible scrollbars anywhere (page, panels, lists): scrolling by wheel, touch and keys is unchanged */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--ink); color: var(--text); font: 15px/1.5 var(--sans); overflow-x: hidden; }
a { color: var(--link); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }

/* bar */
.bar { border-bottom: 1px solid var(--line); background: rgba(10,11,15,.92); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.bar .wrap { display: flex; align-items: center; gap: 20px; height: 56px; }
.mark { font: 700 16.5px var(--mono); color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.mark { display: inline-flex; align-items: center; gap: 9px; }
.mark img { width: 28px; height: 28px; border-radius: 7px; }
.mark i { font-style: normal; color: var(--amber); }
.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a { color: var(--dim); text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: var(--raise); }
.wbtn { font: 500 12px var(--mono); color: var(--text); background: transparent; border: 1px solid var(--line-hi); border-radius: 8px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wbtn:hover { border-color: var(--amber); }
.buybtn { font: 650 12px var(--sans); color: var(--amber-ink); background: var(--amber); border-radius: 8px; padding: 8px 12px; text-decoration: none; white-space: nowrap; margin-right: 8px; }
.buybtn:hover { filter: brightness(1.08); }
.wbtn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.wbtn[data-on] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* mascot: the image has a pure black background on purpose; screen blending keys it out against the dark page */
.mascot { position: relative; width: 230px; margin: 0 0 6px -14px; }
.mascot::before { content: ""; position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(204,255,0,.45), rgba(204,255,0,0)); filter: blur(18px); animation: glow 5s ease-in-out infinite; }
.mascot img { position: relative; width: 100%; height: auto; mix-blend-mode: screen; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .mascot::before, .mascot img { animation: none; } .mascot::before { opacity: .5; } }

/* type */
h1 { font-size: clamp(1.87rem, 5.95vw, 3.74rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 16px; font-weight: 700; max-width: 14ch; }
h2 { font-size: 1.125rem; letter-spacing: -.01em; margin: 0; font-weight: 650; }
.lede { color: var(--dim); font-size: 0.977rem; max-width: 52ch; margin: 0 0 28px; }

/* terminal prompt: the one memorable object */
.term { background: var(--panel); border: 1px solid var(--line-hi); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(204,255,0,.0), 0 24px 60px -30px rgba(204,255,0,.25); }
.term:focus-within { border-color: var(--amber); }
.term-head { display: flex; gap: 6px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font: 11px var(--mono); color: var(--faint); }
.term-head b { width: 8px; height: 8px; border-radius: 50%; background: var(--line-hi); }
.term-head span { margin-left: 8px; }
.term-body { display: flex; gap: 10px; padding: 14px; }
.term-body .ps { font: 700 16.5px/1.5 var(--mono); color: var(--amber); user-select: none; }
.term textarea { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; resize: vertical; color: var(--text); font: 16px/1.5 var(--mono); min-height: 96px; caret-color: var(--amber); }
.term textarea::placeholder { color: var(--faint); }
.term-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.count { font: 11px var(--mono); color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { font: 12px var(--mono); color: var(--dim); background: transparent; border: 1px dashed var(--line-hi); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-align: left; }
.chip:hover { color: var(--amber); border-color: var(--amber); }
.chip.hot { color: var(--text); border-style: solid; border-color: color-mix(in srgb, var(--amber) 45%, var(--line-hi)); }
.chip.hot i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 6px var(--amber); }
.chips.chips-in .chip { animation: chip-in .35s ease both; }
.chips.chips-in .chip:nth-child(2) { animation-delay: .04s; } .chips.chips-in .chip:nth-child(3) { animation-delay: .08s; }
.chips.chips-in .chip:nth-child(4) { animation-delay: .12s; } .chips.chips-in .chip:nth-child(5) { animation-delay: .16s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chips.chips-in .chip { animation: none; } }

/* buttons */
.btn { font: 650 14px var(--sans); background: var(--amber); color: var(--amber-ink); border: 0; border-radius: 8px; padding: 11px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-hi); }
.btn.ghost:hover { border-color: var(--amber); }
.btn.ghost.danger { border-color: var(--bad); color: var(--bad); }
/* create page: "Unfinished on this device" rows (js/create.js resume) */
.panel.unfinished { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.unfinished-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .unfinished-acts { width: 100%; } .unfinished-acts .btn { flex: 1; } }
.btn.big { padding: 14px 22px; font-size: 15px; }
.btn.block { width: 100%; }

/* sections */
.hero { padding: 56px 0 40px; }
.split { display: flex; gap: 10px; flex-wrap: wrap; font: 12px var(--mono); color: var(--dim); margin-top: 22px; }
.split span { border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; }
.split b { color: var(--text); font-weight: 500; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; }
.card:hover { border-color: var(--amber); }
.card img, .ph { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--raise); }
.ph { display: grid; place-items: center; font: 700 25px var(--mono); color: var(--faint); }
.card .meta { padding: 12px 14px 14px; }
.card h3 { margin: 0; font-size: 0.977rem; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sym { font: 500 12px var(--mono); color: var(--amber); }
.card p { margin: 6px 0 0; color: var(--dim); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { display: inline-block; margin-top: 10px; font: 11px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

.empty { border: 1px dashed var(--line-hi); border-radius: 12px; padding: 32px 24px; font-family: var(--mono); }
.empty .l { color: var(--faint); margin: 0 0 6px; font-size: 13px; }
.empty .l b { color: var(--amber); font-weight: 500; }
.empty h3 { font: 600 1.069rem var(--sans); margin: 14px 0 6px; }
.empty p { font-family: var(--sans); color: var(--dim); margin: 0 0 18px; max-width: 52ch; }

footer { border-top: 1px solid var(--line); margin-top: 72px; padding: 22px 0 40px; color: var(--faint); font: 12px var(--mono); }

/* create */
.page { padding-top: 36px; }
.page h1 { font-size: clamp(1.53rem, 4.25vw, 2.21rem); max-width: none; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 24px 0 24px; }
.tab { font: 600 14px var(--sans); color: var(--dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 18px 12px; cursor: pointer; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--text); border-color: var(--amber); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.stack > * + * { margin-top: 18px; }
label.f, .f > .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.f small { display: block; color: var(--faint); font-weight: 400; margin-top: 5px; font-size: 12px; }
.f small.dev-est { color: var(--amber); font-size: 12.5px; }
.f small.dev-est:empty { display: none; }
.f .opt { color: var(--faint); font-weight: 400; }
input[type=text], input[type=url], input[type=number], select, textarea.in { width: 100%; background: var(--ink); color: var(--text); border: 1px solid var(--line-hi); border-radius: 8px; padding: 11px 12px; font: 15px var(--sans); }
input:focus, select:focus, textarea.in:focus { border-color: var(--amber); outline: 0; }
textarea.in { resize: vertical; min-height: 96px; }
.row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.row2e { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drop { display: grid; place-items: center; text-align: center; gap: 4px; min-height: 150px; border: 1px dashed var(--line-hi); border-radius: 10px; cursor: pointer; padding: 16px; color: var(--dim); background: var(--ink); }
.drop:hover, .drop[data-over] { border-color: var(--amber); color: var(--text); }
.drop img { max-height: 160px; border-radius: 8px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-hi); border-radius: 8px; overflow: hidden; }
.seg label { cursor: pointer; text-align: center; padding: 10px 8px; font-weight: 600; color: var(--dim); position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg label:has(input:checked) { background: var(--amber); color: var(--amber-ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: -3px; }
.seg label + label { border-left: 1px solid var(--line-hi); }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg .vlogo { width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-right: 6px; }
/* agents: about strip (static, so it reads without JS) */
.about { margin-top: 40px; }
.about h2 { margin: 0 0 10px; font-size: 1.05rem; }
.about p { margin: 0 0 12px; color: var(--dim); max-width: 70ch; }
.about ul { margin: 0 0 16px; padding-left: 18px; color: var(--dim); font-size: 14px; }
.about li + li { margin-top: 4px; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.about-links a { color: var(--link); text-decoration: none; }
.about-links a:hover { text-decoration: underline; }
.note { border-left: 2px solid var(--line-hi); padding: 2px 0 2px 12px; color: var(--dim); font-size: 13px; }
.err { color: var(--bad); font-size: 13px; margin: 10px 0 0; }
.err:empty { display: none; }
.warn { border: 1px solid var(--amber); border-radius: 8px; padding: 12px 14px; font-size: 13px; background: rgba(204,255,0,.06); }
.warn code, .rec { font: 12px var(--mono); word-break: break-all; user-select: all; }

/* generated agent */
.agent { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }
.agent img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--raise); }
.agent h2 { font-size: 1.53rem; letter-spacing: -.02em; }
.agent .sym { font-size: 14px; }
.agent p { margin: 10px 0 0; }
details { margin-top: 14px; color: var(--dim); font-size: 13px; }
summary { cursor: pointer; color: var(--text); }
details pre { white-space: pre-wrap; font: 12px/1.55 var(--mono); background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0 0; max-height: 220px; overflow: auto; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* progress */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; color: var(--faint); }
.steps .g { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-hi); display: grid; place-items: center; font: 700 11px var(--mono); }
.steps li[data-s=active] { color: var(--text); }
.steps li[data-s=active] .g { border-color: var(--amber); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.steps li[data-s=done] { color: var(--dim); }
.steps li[data-s=done] .g { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.steps li[data-s=error] .g { background: var(--bad); border-color: var(--bad); color: var(--ink); }
.steps li[data-s=error] { color: var(--text); }
.steps small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bar-ind { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 14px; }
.bar-ind i { display: block; height: 100%; width: 35%; background: var(--amber); animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.done-box h2 { font-size: 1.35rem; }
.kv { font: 12px var(--mono); color: var(--dim); word-break: break-all; margin: 14px 0; display: grid; gap: 4px; }
.kv b { color: var(--text); font-weight: 500; }

/* agent page */
.aid { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; padding: 36px 0 24px; }
.aid img, .aid .ph { border-radius: 12px; }
.aid h1 { font-size: clamp(1.53rem, 4.25vw, 2.38rem); max-width: none; margin-bottom: 4px; }
.links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.chat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; height: min(560px, 70vh); }
.log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--amber); color: var(--amber-ink); }
.msg.bot { align-self: flex-start; background: var(--raise); }
.msg.sys { align-self: center; color: var(--dim); font-size: 13px; background: none; text-align: center; max-width: 100%; }
.msg.wait { color: var(--faint); font-family: var(--mono); }
.send { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.send input { flex: 1; min-width: 0; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line-hi); border-radius: 12px; padding: 20px; width: min(380px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog h2 { margin-bottom: 12px; }
.wlist { display: grid; gap: 8px; margin-bottom: 14px; }
.wlist button { display: flex; align-items: center; gap: 12px; background: var(--ink); color: var(--text); border: 1px solid var(--line-hi); border-radius: 8px; padding: 10px 12px; font: 600 14px var(--sans); cursor: pointer; }
.wlist button:hover { border-color: var(--amber); }
.wlist img { width: 28px; height: 28px; border-radius: 6px; }

@media (max-width: 640px) {
  .bar .wrap { gap: 2px; }
  .mark { font-size: 14px; margin-right: 4px; gap: 6px; }
  .mark img { width: 24px; height: 24px; }
  .nav { margin-left: 12px; }
  .nav a { padding: 6px 6px; font-size: 13px; }
  .wbtn { padding: 6px 9px; font-size: 11px; }
  .hero { padding-top: 20px; }
  .mascot { width: 150px; margin-left: -8px; }
  .agent, .aid { grid-template-columns: 1fr; }
  .agent img, .aid img, .aid .ph { max-width: 220px; }
  .row2, .row2e { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
  .term-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---- shell: rail, footer menu, dialogs ---------------------------------------------------------------------------- */
:root { --rail-w: 212px; }
:root[data-rail-c] { --rail-w: 60px; }
.grow { margin-right: auto; }
body { padding-left: var(--rail-w); padding-bottom: env(safe-area-inset-bottom); transition: padding-left .18s ease; }
.rail { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: var(--rail-w); background: var(--ink); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; padding: 10px 8px; transition: width .18s ease; }
.rg { display: flex; flex-direction: column; gap: 2px; }
.rg.rb { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.ri { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--dim); font: 500 13.5px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; width: 100%; text-align: left; }
.ri svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ri:hover { color: var(--text); background: var(--raise); }
.ri[aria-current="page"] { color: var(--amber); background: var(--raise); box-shadow: inset 2px 0 0 var(--amber); }
.rhead { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; min-width: 0; }
.ri.rt { width: 42px; flex: none; justify-content: center; padding: 0; }
.rbrand { display: flex; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 0 6px; border-radius: 8px; color: var(--text); text-decoration: none; font: 700 16px/1 var(--mono); letter-spacing: -.02em; }
.rbrand:hover { background: var(--raise); }
.rbrand img { flex: none; width: 20px; height: 20px; border-radius: 5px; }
.rbrand i { font-style: normal; color: var(--amber); }
.rbrand .rw { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.rbrand:focus-visible { outline-offset: -2px; }
/* collapsed: toggle with the mark under it; the wordmark stays in the accessibility tree but not on screen */
:root[data-rail-c] .rhead { flex-direction: column; gap: 2px; }
:root[data-rail-c] .rbrand { width: 42px; padding: 0; justify-content: center; }
:root[data-rail-c] .rbrand .rw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* the header's brand moves into the rail on desktop */
@media (min-width: 721px) { :root[data-shell] .bar .mark { display: none; } }
.ri.rt svg { transition: transform .18s ease; }
:root[data-rail-c] .ri.rt svg { transform: scaleX(-1); }
:root[data-rail-c] .ri .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-rail-c] .ri::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--raise); color: var(--text); border: 1px solid var(--line-hi); border-radius: 6px; padding: 4px 9px; font: 11.5px var(--mono); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30; }
:root[data-rail-c] .ri:hover::after, :root[data-rail-c] .ri:focus-visible::after { opacity: 1; visibility: visible; }
:root:not([data-rail-c]) .ri.rt .t { visibility: visible; }
.rail .ri:focus-visible { outline-offset: -2px; }
/* the house token under Docs: icon, $TICKER over the short address, copy icon on the right */
.ri.htok { height: 50px; margin-top: 8px; border: 1px solid var(--line); gap: 10px; }
.ri.htok img { flex: none; border-radius: 6px; }
.ri.htok .t { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; min-width: 0; }
.ri.htok .t b { color: var(--amber); font: 600 12.5px var(--mono); }
.ri.htok .hca { font: 11.5px var(--mono); color: var(--dim); }
.ri.htok svg { width: 15px; height: 15px; margin-left: auto; }
.ri.htok .i-ok, .ri.htok.done .i-copy { display: none; }
.ri.htok.done .i-ok { display: inline; color: var(--ok); }
.ri.htok[aria-disabled="true"] { cursor: default; }
.ri.htok[aria-disabled="true"] svg { opacity: .35; }
:root[data-rail-c] .ri.htok { width: 42px; padding: 0; justify-content: center; }
/* The fake-contract warning card beside the $AGENTH button (expanded rail; the collapsed rail keeps its short tip). */
.ri.htok { position: relative; overflow: visible; }
.ri.htok .htip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 260px; display: grid; gap: 6px; padding: 12px 13px;
  background: var(--raise); color: var(--dim); border: 1px solid var(--amber); border-radius: 10px; font: 12.5px/1.45 var(--sans); text-align: left; white-space: normal;
  box-shadow: 0 14px 34px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 40; pointer-events: none; }
.ri.htok .htip b { color: var(--text); font: 600 13px var(--sans); }
.ri.htok .htip .mono { font: 11px var(--mono); color: var(--amber); word-break: break-all; }
.ri.htok:hover .htip, .ri.htok:focus-visible .htip { opacity: 1; visibility: visible; }
:root[data-rail-c] .ri.htok .htip { display: none; }
:root[data-rail-c] .ri.htok svg { display: none; }

.fmenu { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.fmenu a { color: var(--dim); }
.fmenu a[aria-current] { color: var(--amber); }

/* dialogs */
.dlg { background: var(--panel); color: var(--text); border: 1px solid var(--line-hi); border-radius: 12px; padding: 20px 22px; width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.dlg::backdrop { background: rgba(0,0,0,.7); }
.dlg .dh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dlg h2 { margin: 0; font-size: 1.17rem; }
.dlg h3 { margin: 18px 0 6px; font-size: 0.93rem; }
.dlg .sm { font-size: 12.5px; margin: 0 0 10px; }
.dx { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: none; border: 1px solid var(--line-hi); border-radius: 8px; color: var(--dim); cursor: pointer; }
.dx:hover { color: var(--text); border-color: var(--amber); }
.dx svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dfoot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-hi); border-radius: 8px; cursor: pointer; background: var(--ink); }
.opt:hover { border-color: var(--faint); }
.opt:has(input:checked) { border-color: var(--amber); background: rgba(204,255,0,.06); }
.opt:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.opt input { accent-color: var(--amber); width: 18px; height: 18px; flex: none; }
.opt .mlogo { flex: none; width: 20px; height: 20px; }
.opt .ot { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opt .ot b { font-weight: 600; }
.opt .ot em { font: 500 11px var(--mono); font-style: normal; color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: 0 5px; margin-left: 8px; }
.opt small { color: var(--faint); font-size: 11px; overflow-wrap: anywhere; }
.opt .oc { font-size: 11.5px; color: var(--dim); text-align: right; flex: none; max-width: 38%; }
.ro { font-size: 12px; word-break: break-all; margin: 0; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
.hbody { color: var(--dim); font-size: 0.949rem; line-height: 1.6; min-height: 9.5em; margin: 8px 0 0; }
#help-h { margin-top: 6px; font-size: 1.35rem; letter-spacing: -.02em; }
#help-h:focus { outline: 0; }
.dots { display: flex; gap: 6px; margin-top: 14px; }
.dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--line-hi); }
.dots i[data-on] { background: var(--amber); }

/* prose pages */
.prose { max-width: 70ch; padding: 36px 0 0; }
.prose h1 { font-size: clamp(1.53rem, 4.25vw, 2.21rem); max-width: none; }
.prose h2 { margin: 34px 0 8px; font-size: 1.17rem; }
.prose p, .prose li { color: var(--dim); line-height: 1.65; overflow-wrap: anywhere; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code { font: 12px var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.draft { border: 1px solid var(--amber); background: rgba(204,255,0,.07); border-radius: 8px; padding: 12px 14px; color: var(--text); }
.flow { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; counter-reset: s; }
.flow li { counter-increment: s; position: relative; padding: 0 0 26px 52px; margin: 0; }
.flow li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber); display: grid; place-items: center; font: 700 13px var(--mono); background: var(--ink); }
.flow li::after { content: ""; position: absolute; left: 16.5px; top: 38px; bottom: 4px; width: 1px; background: var(--line-hi); }
.flow li:last-child::after { display: none; }
.flow h2 { margin: 3px 0 4px; font-size: 1.023rem; }
.flow p { margin: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.tbl th { color: var(--text); font-weight: 600; }
.tbl td { color: var(--dim); }

/* pair picker */
.pk { position: relative; }
.pk-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; background: var(--ink); color: var(--text); border: 1px solid var(--line-hi); border-radius: 8px; font: 15px var(--sans); text-align: left; cursor: pointer; }
.pk-btn:hover:not(:disabled), .pk-btn[aria-expanded="true"] { border-color: var(--amber); }
.pk-btn:disabled { opacity: .55; cursor: not-allowed; }
.pk-list { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line-hi); border-radius: 10px; max-height: min(320px, 50dvh); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.pk-list li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.pk-list li.on { background: var(--raise); }
.pk-list li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--amber); }
.pk-list li[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pk-sym { font-weight: 650; flex: none; }
.pk-name { color: var(--dim); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-liq { font-size: 12px; color: var(--dim); flex: none; margin-left: auto; }
.pk-car { color: var(--faint); flex: none; }
.pk-btn .pk-name { flex: 1; }
.av { position: relative; flex: none; width: var(--s, 24px); height: var(--s, 24px); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--c, #888) 22%, var(--ink)); color: var(--c, #ccc); font: 700 calc(var(--s, 24px) * .46) var(--mono); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* phone: the rail becomes a bottom bar; the rest of the pages live in the footer menu */
@media (max-width: 720px) {
  body { padding-left: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .rail { top: auto; width: auto; right: 0; height: calc(60px + env(safe-area-inset-bottom)); flex-direction: row; align-items: stretch; gap: 0; padding: 0 4px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--line); }
  .rail .rhead, .rail .rt, .rail .sec, .rail #rail-x, .rail .rg:not(.rb) .ri.sec { display: none; }
  .rg, .rg.rb { flex-direction: row; flex: 1; margin: 0; padding: 0; border: 0; gap: 0; }
  .rg .ri, .rg.rb .ri { flex: 1; flex-direction: column; justify-content: center; gap: 3px; height: auto; padding: 0 2px; font-size: 11px; width: auto; min-width: 0; border-radius: 0; text-align: center; }
  .ri[aria-current="page"] { box-shadow: inset 0 2px 0 var(--amber); }
  :root[data-rail-c] .ri .t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .ri .t[data-short] { font-size: 0; } .ri .t[data-short]::after { content: attr(data-short); font-size: 11px; }
  :root[data-rail-c] .ri::after { display: none; }
  .rail .ri { overflow: hidden; }
  .dlg { padding: 18px 16px; }
  .dfoot .btn { flex: 1; }
  .opt .oc { max-width: 42%; }
}
@media (prefers-reduced-motion: reduce) { body, .rail, .ri.rt svg, .ri::after { transition: none !important; } }

.ca { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 10px; background: none; border: 1px solid var(--line); border-radius: 6px; font: 12px var(--mono); color: var(--dim); cursor: pointer; }
.ca:hover, .ca:focus-visible { border-color: var(--amber); color: var(--text); outline: 0; }
.ca b { color: var(--amber); font-weight: 500; }
.ca svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca .i-ok, .ca.done .i-copy { display: none; }
.ca.done .i-ok { display: inline; color: var(--ok); }
.browse { margin: 14px 0 0; font: 400 10px/1.4 var(--sans); letter-spacing: .02em; }

/* settings: header and Done stay put, the model list scrolls */
/* display MUST stay on [open] only. An unqualified `#settings { display: flex }` beats the UA rule
   `dialog:not([open]) { display: none }`, so the CLOSED dialog renders in page flow below the footer —
   permanently visible, with no backdrop, and X/Done appear to do nothing because it is already closed. */
#settings { flex-direction: column; overflow: hidden; max-height: min(720px, calc(100dvh - 24px)); }
#settings[open] { display: flex; }
#settings .dh { flex: none; }
#settings .dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
#settings .dfoot { flex: none; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 14px; }

/* settings: the locked premium tier */
.grp.locked { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.grp.locked h3 { margin: 0; }
.opt.locked { cursor: default; }
.opt.locked .ot, .opt.locked input { opacity: .5; }
.opt.locked:hover { border-color: var(--line-hi); }
.opt .upg { font: 600 11px var(--mono); color: var(--amber-ink); background: var(--amber); border: 0; border-radius: 6px; padding: 6px 10px; cursor: pointer; opacity: 1; }
.grp.locked .btn { justify-self: start; max-width: 100%; white-space: normal; }
.rbrand { position: relative; }
.opt .oc { display: grid; gap: 6px; justify-items: end; }

/* ---- profile menu ------------------------------------------------------------------------------------------- */
.pmenu { position: fixed; z-index: 40; min-width: 232px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line-hi); border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.pmh { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: grid; gap: 2px; }
.pma { font: 11.5px var(--mono); color: var(--text); word-break: break-all; }
.pmi { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 9px 10px; color: var(--text); font: 13.5px var(--sans); cursor: pointer; text-decoration: none; }
.pmi:hover, .pmi:focus-visible { background: var(--ink); color: var(--amber); outline: 0; }

/* The page fills the window even when it is short, so the footer sits at the bottom instead of leaving a dead
   band below it — which is also what lines the rail's bottom group up with the footer, with no JS measurement.
   Deliberately NO panel border: the operator tried it and it reads as clutter on a dark page.
   The header spans the full width so the wallet chip sits at the window's right edge, not at the text column's. */
@media (min-width: 721px) {
  :root[data-shell] body { box-sizing: border-box; min-height: 100dvh; display: flex; flex-direction: column; }
  :root[data-shell] main { flex: 1 0 auto; }
  :root[data-shell] footer { flex: none; }
  :root[data-shell] .bar .wrap { max-width: none; padding-right: 16px; }
}

.pmi svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.pmi { display: flex; align-items: center; gap: 10px; }
.pmu { font: 600 13px var(--sans); color: var(--amber); }
.tin { width: 100%; box-sizing: border-box; background: var(--ink); border: 1px solid var(--line-hi); border-radius: 8px; padding: 10px 12px; color: var(--text); font: 14px var(--mono); margin: 10px 0 6px; }
.tin:focus { outline: 0; border-color: var(--amber); }
.btn.ghost { background: none; border: 1px solid var(--line-hi); color: var(--text); }

/* ---- editor: where both create paths land. Three columns like a cockpit: the coin, the agent, how it behaves. ---- */
/* width: 100% because the shell makes body a flex column, where an auto-margined item shrinks to its content */
main.ed-mode { max-width: 1400px; width: 100%; }
#editor { padding-bottom: 8px; }
.ed-top { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.ed-back { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-hi); background: transparent; color: var(--dim); cursor: pointer; flex: none; }
.ed-back:hover { color: var(--text); border-color: var(--amber); }
.ed-title { font-size: clamp(1.19rem, 2.55vw, 1.61rem); margin: 0; letter-spacing: -.02em; max-width: none; }
.ed-state { margin-left: auto; font: 11px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ed-state[data-s=ready] { color: var(--ok); border-color: rgba(91,227,161,.35); }

.ed-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.ed-col { min-width: 0; }
.ed-col.stack > * + * { margin-top: 18px; }

/* the face */
.ed-face { display: grid; place-items: center; }
.ed-avatar { width: 128px; height: 128px; border-radius: 28px; overflow: hidden; background: var(--raise); border: 1px solid var(--line-hi); box-shadow: 0 18px 50px -24px rgba(204,255,0,.45); }
.ed-avatar img, .ed-avatar .ph { width: 100%; height: 100%; object-fit: cover; }
.ed-avatar:empty { display: none; }
.ed-drop { display: grid; place-items: center; text-align: center; width: 100%; min-height: 150px; border: 1px dashed var(--line-hi); border-radius: 14px; cursor: pointer; padding: 16px; color: var(--dim); background: var(--ink); font-size: 13px; }
.ed-drop:hover, .ed-drop[data-over] { border-color: var(--amber); color: var(--text); }
.ed-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ed-drop img { width: 112px; height: 112px; object-fit: cover; border-radius: 22px; margin: 0 auto 8px; }

.ed-chain { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--amber); border-radius: 9px; padding: 8px 12px; font-weight: 600; font-size: 13px; background: rgba(204,255,0,.06); }
.ed-rh { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(204 255 0 / .6); }

.ed-fees { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: var(--ink); }
.ed-fees p { margin: 6px 0 4px; font-size: 14px; }
.ed-fees b { color: var(--amber); }
.ed-fees small { color: var(--faint); font-size: 11.5px; }
/* the "(optional)" marker. NOT .opt: that name is the settings dialog's bordered option card, and sharing it drew a box */
.optl { color: var(--faint); font-weight: 400; }

/* the agent */
.ed-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.ed-tab { font: 600 13px var(--sans); color: var(--dim); background: none; border: 0; border-radius: 7px; padding: 9px 10px; cursor: pointer; }
.ed-tab[aria-selected="true"] { background: var(--text); color: var(--ink); }
.ed-text { min-height: 190px !important; line-height: 1.55; }
.ed-text.mono { font: 13px/1.6 var(--mono); }
.ed-hint { display: block; color: var(--faint); font-size: 12px; margin-top: 6px; }

.ed-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ed-h h2 { font-size: 0.977rem; }
.ed-ico { width: 18px; height: 18px; color: var(--amber); flex: none; }
.ed-count { margin-left: auto; font: 11px var(--mono); color: var(--faint); }
.ed-p { margin: 0; font-size: 13px; }
input[type=search].ed-search { width: 100%; background: var(--ink); color: var(--text); border: 1px solid var(--line-hi); border-radius: 8px; padding: 10px 12px; font: 14px var(--sans); }
input[type=search].ed-search:focus { border-color: var(--amber); outline: 0; }

.sk-sec { margin-top: 14px; }
.sk-sec .lbl { display: block; margin-bottom: 8px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sk-grid:empty::before { content: "None yet"; color: var(--faint); font-size: 12px; }
.sk { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 30px 8px 12px; border: 1px solid var(--line-hi); border-radius: 10px; background: var(--ink); color: var(--text); cursor: pointer; font: 500 12px var(--mono); min-height: 84px; }
.sk:hover:not([aria-disabled=true]) { border-color: var(--amber); }
.sk svg { width: 20px; height: 20px; color: var(--dim); }
.sk small { font: 11px/1.3 var(--sans); color: var(--faint); }
.sk[aria-pressed=true] { border-color: var(--ok); background: rgba(91,227,161,.07); }
.sk[aria-pressed=true] svg { color: var(--ok); }
.sk[aria-disabled=true] { cursor: not-allowed; }
.sk[data-s=soon] { opacity: .55; }
.sk .tag { position: absolute; top: 6px; right: 6px; font: 600 9.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }
.sk-none { margin: 12px 0 0; font-size: 13px; }

/* how it behaves */
.cad { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cad li { display: grid; grid-template-columns: 10px 1fr; column-gap: 12px; align-items: baseline; font-size: 13px; }
.cad li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; grid-row: span 2; align-self: start; margin-top: 6px; }
.cad li[data-t=live]::before { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.cad li[data-t=slow]::before { background: var(--amber); }
.cad li[data-t=off]::before { background: var(--faint); }
.cad b { font-weight: 600; }
.cad span { color: var(--dim); grid-column: 2; }

/* the one button, floating where the thumb is */
.ed-dock { position: sticky; bottom: 14px; z-index: 4; display: grid; justify-items: center; gap: 8px; margin-top: 22px; pointer-events: none; }
.ed-dock > * { pointer-events: auto; }
.ed-dock .err { margin: 0; background: var(--panel); border-radius: 8px; padding: 0 10px; }
.ed-dock .err:empty { display: none; }
.ed-go { min-width: 240px; box-shadow: 0 14px 40px -12px rgba(204,255,0,.6); }

@media (max-width: 1180px) {
  .ed-grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .ed-grid > .ed-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .ed-grid > .ed-col:last-child > * + * { margin-top: 0; }
}
@media (max-width: 760px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-grid > .ed-col:last-child { display: block; }
  .ed-grid > .ed-col:last-child > * + * { margin-top: 18px; }
  .ed-go { width: 100%; }
  .ed-state { display: none; }
}

/* generating: the editor is already open and the model's fields shimmer until they arrive */
.ed-prompt { margin: -8px 0 18px 48px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-prompt:empty, #editor:not([data-gen]) .ed-prompt { display: none; }
.ed-prompt::before { content: "> "; color: var(--amber); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#editor[data-gen] :is(#ed-name, #ed-sym, #ed-desc, #ed-persona, .ed-avatar .ph) {
  color: transparent; border-color: transparent; cursor: progress;
  background: linear-gradient(90deg, var(--raise) 25%, var(--line-hi) 50%, var(--raise) 75%) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
#editor[data-gen] :is(#ed-name, #ed-sym, #ed-desc, #ed-persona)::placeholder { color: transparent; }
#editor[data-gen] .ed-title::after { content: "…"; }
#editor[data-gen] .ed-state { color: var(--amber); border-color: rgba(204,255,0,.35); }
@media (prefers-reduced-motion: reduce) { #editor[data-gen] :is(#ed-name, #ed-sym, #ed-desc, #ed-persona, .ed-avatar .ph) { animation: none; } }
@media (max-width: 760px) { .ed-prompt { margin-left: 0; } }

/* trading fee ("tax"): a slider for a pump.fun custom pair, the tier's rate for LaunchLab */
.fee-box small { color: var(--dim); }
.fee-row { display: flex; align-items: center; gap: 12px; }
.fee-row input[type=range] { flex: 1; accent-color: var(--amber); }
.fee-out { display: inline-flex; align-items: center; gap: 4px; color: var(--amber); }
input.fee-num { width: 76px; padding: 7px 8px; text-align: right; font: 14px var(--mono); color: var(--amber); background: var(--ink); border: 1px solid var(--line-hi); border-radius: 7px; }
input.fee-num:focus { border-color: var(--amber); outline: 0; }
.fee-pct { font: 13px var(--mono); }

input.fee-num[aria-invalid] { border-color: var(--bad); }

/* the face, drawn after the text */
.ed-face { gap: 10px; }
.ed-face-note { margin: 0; font-size: 12px; color: var(--dim); text-align: center; }
.ed-avatar .ph.drawing { background: linear-gradient(90deg, var(--raise) 25%, var(--line-hi) 50%, var(--raise) 75%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ed-avatar .ph.drawing { animation: none; } }

/* an agent's feed */
#feed-sec { margin-top: 28px; }
.feed { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.feed li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.feed li p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--faint); }
.feed-meta a { color: var(--link); }
.feed .feed-empty { background: none; border-style: dashed; }
#feed-more { margin-top: 12px; }

/* ---- docs: top bar, section menu, article, On this page. Built by js/docs.js around a page's <article id="doc">. ---- */
body.docs { --dk-top: 64px; --dk-side: 268px; --dk-toc: 224px; padding-left: 0; } /* no site rail on docs pages */
.dk-top { position: sticky; top: 0; z-index: 30; height: var(--dk-top); border-bottom: 1px solid var(--line); background: rgba(10,11,15,.92); backdrop-filter: blur(10px); }
.dk-topin { max-width: 1440px; margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; gap: 14px; }
.dk-top .grow { flex: 1; }
.dk-tag { font: 500 11px var(--mono); color: var(--amber); text-decoration: none; border: 1px solid rgba(204,255,0,.35); border-radius: 999px; padding: 3px 10px; }
.dk-search { display: flex; align-items: center; gap: 10px; width: min(300px, 32vw); height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--line-hi); border-radius: 10px; background: var(--panel); color: var(--faint); font: 13px var(--sans); cursor: pointer; }
.dk-search:hover { border-color: var(--amber); color: var(--dim); }
.dk-search .dk-ph { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-search .kbd { display: flex; gap: 3px; }
kbd { font: 11px var(--mono); color: var(--dim); border: 1px solid var(--line-hi); border-radius: 5px; padding: 1px 5px; background: var(--raise); }
.dk-app { padding: 9px 14px; font-size: 13px; }
.dk-menu { display: none; background: none; border: 0; color: var(--text); padding: 6px; margin-left: -6px; cursor: pointer; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dk-lay { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: var(--dk-side) minmax(0, 1fr) var(--dk-toc); gap: 48px; }
.dk-side { position: sticky; top: var(--dk-top); align-self: start; max-height: calc(100vh - var(--dk-top)); overflow-y: auto; padding: 28px 8px 28px 0; }
.dk-h { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.dk-h .ic { width: 15px; height: 15px; }
.dk-sec + .dk-sec { margin-top: 26px; }
.dk-side ul, .dk-toc ul { list-style: none; margin: 0; padding: 0; }
.dk-side a { display: flex; align-items: center; gap: 11px; padding: 7px 10px; margin: 1px 0; border-radius: 8px; color: var(--dim); text-decoration: none; font-size: 13.5px; line-height: 1.3; }
.dk-side a .ic { color: var(--faint); }
.dk-side a:hover { color: var(--text); background: var(--panel); }
.dk-side a[aria-current] { color: var(--amber); background: rgba(204,255,0,.08); font-weight: 600; }
.dk-side a[aria-current] .ic { color: var(--amber); }
.dk-sidefoot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.dk-sidefoot a { font-size: 12.5px; color: var(--faint); }

.dk-main { min-width: 0; padding: 32px 0 64px; }
.doc { max-width: 760px; }
.dk-crumbrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.doc .dk-crumb { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--amber); }
.dk-copy { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--panel); color: var(--text); font: 500 12px var(--sans); cursor: pointer; }
.dk-copy:hover { border-color: var(--amber); }
.dk-copy .ic { width: 15px; height: 15px; }
.dk-title { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dk-title .dk-ti { width: 34px; height: 34px; color: var(--amber); stroke-width: 1.5; }
.doc h1 { font-size: clamp(1.61rem, 3.91vw, 2.21rem); letter-spacing: -.03em; max-width: none; margin: 0; line-height: 1.1; }
.doc .lead { font-size: 1.042rem; color: var(--text); line-height: 1.65; margin: 0 0 8px; }
.doc p, .doc li { color: #c3c6d3; line-height: 1.72; font-size: 15px; overflow-wrap: anywhere; }
.doc strong, .doc b { color: var(--text); font-weight: 600; }
.doc h2 { font-size: 1.278rem; letter-spacing: -.015em; margin: 44px 0 10px; scroll-margin-top: calc(var(--dk-top) + 16px); }
.doc h3 { font-size: 1.004rem; margin: 28px 0 6px; scroll-margin-top: calc(var(--dk-top) + 16px); }
.doc h2, .doc h3 { display: flex; align-items: center; gap: 8px; }
.dk-anchor { opacity: 0; color: var(--faint); display: inline-flex; transition: opacity .12s; }
.dk-anchor .ic { width: 16px; height: 16px; }
:is(h2, h3):hover > .dk-anchor, .dk-anchor:focus-visible { opacity: 1; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--faint); }
.doc code { font: 12.5px var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--text); }
.doc pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font: 12px/1.6 var(--mono); color: var(--dim); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.doc .tbl-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc th, .doc td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc th { background: var(--panel); color: var(--text); font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.doc td { color: #c3c6d3; line-height: 1.55; }
.dk-hero { margin: 4px 0 28px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(60% 80% at 50% 45%, rgba(204,255,0,.18), transparent 70%), var(--panel); display: grid; place-items: center; padding: 18px; }
.dk-hero img { width: min(300px, 70%); height: auto; mix-blend-mode: screen; }
.dk-note { margin: 22px 0; padding: 14px 16px 14px 18px; border: 1px solid var(--line-hi); border-left: 3px solid var(--link); border-radius: 8px; background: var(--panel); color: #c3c6d3; line-height: 1.65; }
.dk-note.warn { border-left-color: var(--amber); }
.dk-note.bad { border-left-color: var(--bad); }
.dk-note > :first-child { margin-top: 0; } .dk-note > :last-child { margin-bottom: 0; }
.dk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; padding: 0; list-style: none; }
.dk-cards li { margin: 0; }
.dk-cards a { display: block; height: 100%; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; color: var(--text); transition: border-color .12s; }
.dk-cards a:hover { border-color: var(--amber); }
.dk-cards b { display: block; margin-bottom: 4px; }
.dk-cards span { color: var(--dim); font-size: 13px; line-height: 1.5; }
.dk-steps { list-style: none; padding: 0; counter-reset: s; margin: 20px 0; }
.dk-steps > li { counter-increment: s; position: relative; padding: 0 0 22px 50px; margin: 0; }
.dk-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber); display: grid; place-items: center; font: 700 12px var(--mono); background: var(--ink); }
.dk-steps > li::after { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 4px; width: 1px; background: var(--line-hi); }
.dk-steps > li:last-child::after { display: none; }
.dk-steps h3 { margin: 4px 0 4px; }
.dk-steps p { margin: 0; }
.doc pre.diagram { color: var(--text); line-height: 1.5; }
dl.dk-gloss { margin: 0; } .dk-gloss dt { color: var(--text); font-weight: 600; margin-top: 18px; } .dk-gloss dd { margin: 4px 0 0; color: #c3c6d3; line-height: 1.65; }
.doc details { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 10px 0; }
.doc summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--text); list-style-position: inside; }
.doc details > :not(summary) { margin: 0 16px 14px; }

.dk-pager { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.dk-pg { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .12s; }
.dk-pg:hover { border-color: var(--amber); }
.dk-pg small { color: var(--faint); font-size: 11.5px; }
.dk-pg span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dk-pg.next { text-align: right; } .dk-pg.next span { justify-content: flex-end; }
.dk-pg .ic { width: 16px; height: 16px; color: var(--amber); }

.dk-toc { position: sticky; top: var(--dk-top); align-self: start; max-height: calc(100vh - var(--dk-top)); overflow-y: auto; padding: 32px 0; }
.dk-toc ul { border-left: 1px solid var(--line); }
.dk-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--dim); text-decoration: none; font-size: 13px; line-height: 1.4; }
.dk-toc a.sub { padding-left: 26px; font-size: 12.5px; }
.dk-toc a:hover { color: var(--text); }
.dk-toc a[data-on] { color: var(--amber); border-left-color: var(--amber); }

.dk-foot { border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.dk-foot div { max-width: 1440px; margin: 0 auto; padding: 22px 24px; }

.dk-dlg { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 80px)); margin: 72px auto auto; padding: 0; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); overflow: hidden; }
.dk-dlg[open] { display: flex; flex-direction: column; }
.dk-dlg::backdrop { background: rgba(5,6,9,.7); backdrop-filter: blur(3px); }
.dk-qrow { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--faint); }
.dk-q { flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent; color: var(--text); font: 15px var(--sans); }
.dk-q::-webkit-search-cancel-button { display: none; }
.dk-res { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.dk-res a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.dk-res a .ic { color: var(--faint); }
.dk-res span { display: grid; min-width: 0; }
.dk-res b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-res small { color: var(--faint); font-size: 11.5px; }
.dk-res [aria-selected="true"] a, .dk-res a:hover { background: rgba(204,255,0,.09); }
.dk-res [aria-selected="true"] a .ic { color: var(--amber); }
.dk-res .none { padding: 18px 12px; color: var(--dim); }
.dk-scrim { position: fixed; inset: var(--dk-top) 0 0; z-index: 24; background: rgba(5,6,9,.6); }

@media (max-width: 1180px) {
  .dk-lay { grid-template-columns: var(--dk-side) minmax(0, 1fr); gap: 40px; }
  .dk-toc { display: none; }
}
@media (max-width: 880px) {
  body.docs { --dk-top: 58px; }
  .dk-topin, .dk-lay { padding: 0 var(--gutter); }
  .dk-lay { grid-template-columns: minmax(0, 1fr); }
  .dk-menu { display: inline-flex; }
  .dk-side { position: fixed; z-index: 25; top: var(--dk-top); left: 0; bottom: 0; width: min(300px, 86vw); max-height: none; padding: 20px 14px 32px; background: var(--ink); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .2s ease; }
  :root[data-dk-menu] .dk-side { transform: none; }
  .dk-search { width: 40px; padding: 0; justify-content: center; }
  .dk-search .dk-ph, .dk-search .kbd, .dk-tag { display: none; }
  .dk-main { padding-top: 22px; }
}
@media (max-width: 480px) {
  .dk-app { padding: 8px 11px; font-size: 12px; }
  .dk-pager { grid-template-columns: 1fr; }
  .dk-copy span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dk-side { transition: none; } }

/* creator earnings */
.earn .lede { margin-bottom: 26px; }
.earn-sec { margin-top: 30px; }
.earn-card { display: grid; gap: 14px; margin-bottom: 12px; }
.earn-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.earn-amt { font-size: clamp(1.44rem, 4.25vw, 1.95rem); font-weight: 700; margin: 4px 0 0; letter-spacing: -.02em; }
.earn-amt small { font-size: .5em; color: var(--dim); font-weight: 500; }
.earn-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.earn-coins .lbl { margin-right: 4px; }
.earn-coin { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-hi); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; }
.earn-coin:hover { border-color: var(--amber); }
.earn-coin .mono { color: var(--dim); font-size: 11px; }
.earn-pf { display: inline-flex; align-items: center; gap: 8px; }
.earn-status { margin: 0; }
.earn-status:empty { display: none; }
.earn-status.ok { color: var(--ok); }
.earn-empty { display: grid; gap: 14px; justify-items: start; }
.earn-empty p { margin: 0; }
.earn-foot { margin-top: 28px; }
@media (max-width: 640px) { .earn-top .btn { width: 100%; } }
.earn .lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.earn-card p.sm { font-size: 13px; margin: 0; }

/* intro: the hood rises in, the visor lights up, the word appears, out (about 2.4 s). js/loader.js draws the logo inline
   and shows it on a session's first page and on every reload. */
.intro-on, .intro-on body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 6px; animation: intro-out 2.4s ease forwards; cursor: pointer; }
.intro.intro-skip { animation: intro-skip .25s ease forwards; }
.intro:not(.go):not(.intro-skip), .intro:not(.go) * { animation-play-state: paused !important; }
.intro-logo { width: min(260px, 64vw); height: auto; overflow: visible; }
.intro-hood { transform-box: fill-box; transform-origin: 50% 60%; opacity: 0; animation: intro-hood 2.4s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-shade { opacity: 0; animation: intro-fade 2.4s ease forwards; }
.intro-visor { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: intro-visor 2.4s ease forwards; }
.intro-word { font: 700 22px var(--mono); letter-spacing: -.02em; color: var(--text); opacity: 0; animation: intro-word 2.4s ease forwards; }
.intro-word i { font-style: normal; color: var(--accent); }
@keyframes intro-hood { 0% { opacity: 0; transform: translateY(40px) scale(.86); } 22% { opacity: 1; transform: translateY(-6px) scale(1.03); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes intro-fade { 0%, 25% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes intro-visor { 0%, 34% { opacity: 0; transform: scaleX(.2); filter: none; } 44% { opacity: 1; transform: none; filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 40px var(--accent)); } 60%, 100% { opacity: 1; filter: drop-shadow(0 0 8px #fff); } }
@keyframes intro-word { 0%, 50% { opacity: 0; transform: translateY(6px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes intro-out { 0%, 86% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro, .intro-hood, .intro-shade, .intro-visor, .intro-word { animation: none !important; }
  .intro-hood, .intro-shade, .intro-visor, .intro-word { opacity: 1; }
  .intro.go { animation: intro-skip .3s ease .4s forwards !important; }
  .intro:not(.go) { animation: none !important; }
}

/* phones: iOS Safari zooms into any field under 16px when it is tapped, so fields keep 16px there */
@media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } }

/* venues that are not open yet (Pools, Flap): shown, never selectable */
.seg label.soon { opacity: .45; cursor: not-allowed; }
.seg label.soon small { font-size: 10px; color: var(--accent); margin-left: 2px; }
/* Memes: a picture in a post or a chat reply, always from /generated/. */
.post-img, .msg-img { display: block; width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-top: 10px; border: 1px solid var(--line); background: var(--panel); }

/* /chat: one conversation with Hood or a live agent. The agent is picked above it; the model, the picture and Send
   live inside the composer, like a chat app's. */
.cpage { padding-top: 28px; }
.chead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pickwrap { position: relative; }
.pick { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--text); border: 1px solid var(--line-hi); border-radius: 10px; padding: 6px 10px 6px 6px; font: 600 14px var(--sans); cursor: pointer; max-width: 100%; }
.pick:hover, .pick[aria-expanded="true"] { border-color: var(--amber); }
.pick .av, .pop .av { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; background: var(--panel); display: grid; place-items: center; font: 600 10px var(--mono); color: var(--dim); overflow: hidden; }
.pick .av img, .pop .av img { width: 100%; height: 100%; object-fit: cover; }
.pick .chev { width: 14px; height: 14px; stroke: var(--dim); fill: none; stroke-width: 2; }
.pick.slim { padding: 5px 8px; font: 500 12px var(--sans); border-color: transparent; background: transparent; color: var(--dim); gap: 6px; }
.pick.slim:hover, .pick.slim[aria-expanded="true"] { color: var(--text); border-color: var(--line-hi); }
.pick .mlogo, .pop .mlogo { width: 16px; height: 16px; flex: none; }
.pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: min(360px, calc(100vw - 32px)); max-height: min(420px, 60vh); overflow-y: auto; background: var(--panel); border: 1px solid var(--line-hi); border-radius: 12px; padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pickwrap.up .pop { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
.pop h4 { margin: 8px 8px 4px; font: 600 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pop .po { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 8px; padding: 8px; color: var(--text); font: 14px var(--sans); text-align: left; cursor: pointer; }
.pop .po:hover, .pop .po:focus-visible { background: var(--raise); outline: none; }
.pop .po[aria-checked="true"] { background: color-mix(in srgb, var(--amber) 14%, transparent); }
.pop .po .pt { flex: 1; min-width: 0; display: grid; }
.pop .po .pt small { color: var(--faint); font: 11px var(--mono); }
.pop .po.locked { color: var(--dim); }
.pop .tag { font: 10px var(--mono); color: var(--faint); border: 1px solid var(--line-hi); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.pop .upg, .cnote .upg { font: 600 11px var(--mono); color: var(--amber-ink); background: var(--amber); border: 0; border-radius: 6px; padding: 5px 9px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.pop .psearch { width: calc(100% - 8px); margin: 4px; }
.cmain { display: grid; gap: 10px; }
.clog { min-height: 340px; max-height: 58vh; background: none; padding: 4px 0; }
.composer { background: var(--panel); border: 1px solid var(--line-hi); border-radius: 16px; padding: 12px 12px 8px; display: grid; gap: 8px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--amber) 55%, var(--line-hi)); }
.composer.drop { border-color: var(--amber); border-style: dashed; }
.composer textarea { background: none; border: 0; outline: none; resize: none; color: var(--text); font: 15px/1.45 var(--sans); padding: 2px 4px; min-height: 26px; max-height: 200px; width: 100%; }
.crow { display: flex; align-items: center; gap: 6px; }
.cicon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-hi); background: none; color: var(--dim); cursor: pointer; }
.cicon:hover { color: var(--text); border-color: var(--dim); }
.cicon svg, .csend svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.csend { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 0; background: var(--raise); color: var(--faint); cursor: not-allowed; transition: background .15s, color .15s; }
.csend:not(:disabled) { background: var(--amber); color: var(--amber-ink); cursor: pointer; }
.att { display: flex; gap: 8px; }
.att .thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-hi); }
.att .thumb img { width: 100%; height: 100%; object-fit: cover; }
.att .thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font: 13px/20px var(--sans); cursor: pointer; padding: 0; }
.msg .mine { display: block; max-width: 220px; border-radius: 8px; margin-bottom: 6px; }
.cnote { min-height: 0; margin: 0; color: var(--dim); }
.cnote:empty { display: none; }
.cleft { margin: 0; }

/* The Agents board: compact live cards (picture, name, $TICKER, age; MC, volume, liquidity; launchpad), refreshed every 10 s. */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tcard { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .15s; }
.tcard:hover { border-color: var(--amber); }
.tc-img { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--raise); display: grid; place-items: center; }
.tc-img img, .tc-img .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.tc-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.tc-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tc-name { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tc-top .sym { color: var(--amber); font-size: 11.5px; flex: none; }
.tc-age { margin-left: auto; color: var(--faint); font-size: 11px; flex: none; }
.tc-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--faint); }
.tc-stats b { color: var(--text); font-weight: 600; }
.tc-venue { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--text); background: var(--raise); border: 1px solid var(--line-hi); border-radius: 999px; padding: 2px 8px 2px 4px; font-weight: 600; }
.tc-venue img { border-radius: 50%; flex: none; }
.tcard.up { animation: tc-up 1.2s ease; } .tcard.down { animation: tc-down 1.2s ease; }
@keyframes tc-up { 0% { box-shadow: 0 0 0 1px #3DF5A5, 0 0 18px rgba(61, 245, 165, .35); } 100% { box-shadow: none; } }
@keyframes tc-down { 0% { box-shadow: 0 0 0 1px #FF5C7A, 0 0 18px rgba(255, 92, 122, .3); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .tcard.up, .tcard.down { animation: none; } }

/* The main token ($AGENTH) on the Agents board: same card, lime edge and a "Main token" tag. */
.tcard.is-main { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: linear-gradient(135deg, rgb(204 255 0 / .07), var(--panel) 60%); }
.tc-main-tag { flex: none; font: 600 10px var(--mono); color: var(--amber-ink); background: var(--amber); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .04em; }