/* layout 1:1 beavr, colours + motion 1:1 useagents. palette: 070707-0f0f0f-151515-1c1c1d-e2e5e9-8b8f96-f6f6f4-6fdc97 */
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/assets/fonts/geist-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/assets/fonts/geist-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --bg: #1f2025; --deep: #17181c; --glass: rgba(31,32,37,.86); --panel: #24262c; --panel-2: #2a2c33; --panel-3: #31333b;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.11); --line-3: rgba(255,255,255,.2);
  --text: #e3e4e8; --prose: #c8cad2; --strong: #f6f6f8; --muted: #8b909d; --dim: #6e7380;
  --btn: #7ee787; --on-btn: #0d1a10; --good: #7ee787; --accent: #7ee787; --accent-soft: #c49bff; --purple: #c49bff; --bad: #ff6367; --info: #9fb4d6; --warn: #f5c451;
  --r: 14px; --r-sm: 10px; --shadow: 0 30px 60px rgba(0,0,0,.55);
  --ease: cubic-bezier(.4,0,.2,1);
  --sans: "Geist", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 400 15px/1.6 var(--sans); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(1100px 760px at 18% 22%, rgba(126,231,135,.075), transparent 64%), radial-gradient(1000px 720px at 78% 30%, rgba(255,255,255,.035), transparent 66%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: auto, auto, 88px 88px, 88px 88px; background-attachment: fixed; }
img, svg, canvas, video { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--btn); color: var(--on-btn); }
[hidden] { display: none !important; }
.wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.sp { flex: 1; } .muted { color: var(--muted); } .small { font-size: 12px; }
.silver { background: linear-gradient(180deg, #fff 20%, #8d8d8d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.errbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; background: var(--bad); color: #000; padding: 8px 12px; font: 12px var(--mono); }

/* mascot tile */
.px { display: block; width: 32px; height: 32px; border-radius: 8px; background: var(--deep); padding: 0; flex: none; box-shadow: 0 0 0 1px var(--line-2); }
.px.big { width: 72px; height: 72px; border-radius: var(--r); padding: 0; box-shadow: 0 0 0 1px var(--line-2); }

/* top bar */
.top { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.topbar { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.wordmark { font: 600 20px/1 var(--sans); color: var(--strong); letter-spacing: -.02em; display: inline-flex; align-items: baseline; }
.wordmark.xl { font-size: clamp(46px, 5vw, 60px); font-weight: 700; letter-spacing: -.04em; }
.wm-caret { display: inline-block; width: .38em; height: .78em; margin-left: .07em; background: var(--strong); transform: translateY(.08em); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nav { display: flex; gap: 4px; }
.nav a { font-size: 14px; color: var(--muted); padding: 8px 12px; border-radius: 10px; transition: background .15s, color .15s; }
.nav a:hover { color: var(--strong); background: var(--panel-2); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: 500 12px var(--mono); color: var(--prose); background: var(--panel); white-space: nowrap; }
.chip .sq { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(126,231,135,.15); animation: waitpulse 1.6s var(--ease) infinite; }
@keyframes waitpulse { 50% { opacity: .35; } }

/* buttons: useagents */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--btn); background: var(--btn); color: var(--on-btn); font: 500 14px var(--sans); white-space: nowrap; transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease); }
.btn:hover { background: #95ef9d; border-color: #95ef9d; }
.btn:focus-visible, .nav a:focus-visible, .linkish:focus-visible, .ask input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active { transform: scale(.98); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn.xs { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn.lg { min-height: 48px; padding: 0 20px; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--strong); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--line-3); background: var(--panel-2); }
.btn.dark { background: var(--on-btn); color: var(--strong); border-color: var(--on-btn); }
.btn .arr { transition: transform .18s ease; } .btn:hover .arr { transform: translateX(3px); }

/* hero: beavr grid */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; padding: 64px 0 48px; }
.hero-l > * { animation: rise .95s var(--ease) both; }
.hero-l > :nth-child(2) { animation-delay: .08s; } .hero-l > :nth-child(3) { animation-delay: .16s; } .hero-l > :nth-child(4) { animation-delay: .26s; } .hero-l > :nth-child(5) { animation-delay: .36s; } .hero-l > :nth-child(6) { animation-delay: .44s; } .hero-l > :nth-child(7) { animation-delay: .52s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.comment { font: 400 13px var(--mono); color: var(--good); margin: 0 0 26px; display: flex; align-items: center; gap: 8px; }
.comment .ln { display: none; }
.cur { display: inline-block; width: 8px; height: 15px; background: var(--muted); animation: blink 1.1s steps(1) infinite; }
.lockup { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
h1 { font: 700 clamp(46px, 5.8vw, 76px)/1.02 var(--sans); letter-spacing: -.042em; color: var(--strong); margin: 0 0 20px; }
h1 span { display: block; }
h1 .acc { color: var(--accent); padding-bottom: .06em; }
.cur.big { display: none; }
.lede { font-size: 18px; line-height: 1.55; color: var(--prose); margin: 0 0 26px; max-width: 520px; }
.ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--strong); font: 500 15px var(--sans); transition: border-color .15s, background .15s; }
.link:hover { border-color: var(--line-3); background: var(--panel-2); }
.tri { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ca-box { display: inline-flex; gap: 10px; align-items: center; padding: 6px 14px 6px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); margin: 0 0 26px; cursor: pointer; max-width: 100%; min-width: 0; transition: border-color .15s; }
.ca-box:hover { border-color: var(--line-3); }
.ca-label { font: 600 11px var(--mono); background: var(--purple); color: #1d1030; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.ca-val { font: 500 14px var(--mono); color: var(--prose); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: waitpulse 1.6s var(--ease) infinite; flex: none; }
.ca-box.compact { margin: 16px 0 0; }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); font-size: 14px; }
.trust .ico { color: var(--good); margin-right: 10px; font-size: 11px; }

/* terminal card */
.term-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; animation: rise .95s .2s var(--ease) both; }
.tc-head { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); font: 500 13px var(--mono); }
.tc-head b { font-weight: 500; color: var(--strong); letter-spacing: .02em; }
.badge { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; background: #050505; padding: 0; flex: none; }
.badge img { width: 100%; height: 100%; display: block; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.live { background: rgba(126,231,135,.1); color: var(--good); border: 1px solid rgba(126,231,135,.25); }
.pill.hot { background: var(--btn); color: var(--on-btn); }
.tc-case { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 400 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; }
.tc-case > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tag { border: 1px solid var(--line-2); padding: 3px 8px; border-radius: 7px; font: 500 11px var(--mono); color: var(--prose); flex: none; }
.term { height: 300px; overflow: hidden; padding: 14px 0; background: var(--deep); }
.tl { display: grid; grid-template-columns: 78px minmax(0, 1fr) 86px; column-gap: 14px; padding: 0 16px; animation: tlin .45s var(--ease) both; }
@keyframes tlin { from { opacity: 0; transform: translateX(-6px); } }
.tl .t { font: 400 13px/26px var(--mono); color: var(--dim); }
.tl .h { font: 400 12px/26px var(--mono); color: var(--dim); text-align: right; }
.tl .stage { font: 500 11px/22px var(--mono); color: var(--accent); letter-spacing: .08em; margin-top: 6px; }
.tl .stage::before { content: "▸ "; }
.tl .m { font: 400 14.5px/26px var(--sans); color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .m .muted { color: var(--muted); }
.tl .m.type { animation: typein .6s var(--ease) both; }
@keyframes typein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ok { color: var(--good); font-weight: 600; } .bad { color: var(--bad); } .info { color: var(--info); } .vi { color: var(--muted); } .acc { color: var(--strong); }
.tc-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.diff { border-right: 1px solid var(--line); min-width: 0; }
.dh, .ph { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 400 13px var(--mono); color: var(--prose); white-space: nowrap; overflow: hidden; }
.plus { color: var(--good); }
.dbody { font: 400 13px/24px var(--mono); padding: 8px 0; height: 232px; overflow: hidden; background: rgba(126,231,135,.025); }
.dl { display: grid; grid-template-columns: 22px 14px minmax(0, 1fr) 34px; gap: 6px; padding: 0 16px; white-space: nowrap; animation: tlin .45s var(--ease) both; }
.dl .n { color: var(--dim); text-align: right; } .dl .s { color: var(--good); } .dl .s.m { color: var(--bad); }
.dl .x { overflow: hidden; text-overflow: ellipsis; color: var(--text); } .dl .v { color: var(--strong); text-align: right; }
.pbody { padding: 14px 16px; height: 232px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pbody .pt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pbody .pt img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-3); flex: none; border: 2px solid var(--line-2); }
.pbody .pt b { font: 600 17px var(--sans); color: var(--strong); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbody .pt span { font: 400 12px var(--sans); color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { flex: 1; min-height: 56px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; align-items: flex-end; gap: 4px; }
.spark i { flex: 1; background: linear-gradient(180deg, #fff, #8d8d8d); border-radius: 2px; min-height: 2px; transform-origin: bottom; animation: grow .95s var(--ease) both; }
@keyframes grow { from { transform: scaleY(0); } }
.pbody .facts { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font: 400 12px var(--mono); }
.pbody .facts span:nth-child(odd) { color: var(--muted); }
.tc-foot { padding: 14px 16px 16px; border-top: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.tc-foot .row { display: flex; margin-bottom: 8px; }
.tc-foot #nextScan { color: var(--strong); }
.meter { height: 8px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8d8d8d, #fff); border-radius: 999px; transition: width 1s linear; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; margin: 8px 0 0; }
.stat { padding: 18px 20px 16px; min-width: 0; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .k { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v { font: 600 28px/1.2 var(--sans); letter-spacing: -.02em; color: var(--strong); margin-top: 8px; white-space: nowrap; }
.stat .v small { font: 400 12px var(--mono); color: var(--muted); margin-left: 6px; letter-spacing: 0; }

/* sections */
.sec { padding: 88px 0 0; }
.kick { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--muted); margin: 0 0 12px; text-transform: uppercase; }
.kick .ln { display: none; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
h2 { font: 600 clamp(28px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--strong); margin: 0 0 10px; }
.sub { margin: 0; color: var(--muted); max-width: 620px; font-size: 16px; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .95s var(--ease), transform .95s var(--ease), border-color .18s, box-shadow .18s; }
.reveal.in { opacity: 1; transform: none; }

/* narratives: useagents fan + grid */
.cases { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px; align-items: stretch; }
.fan-wrap { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.fan { position: relative; height: 330px; display: grid; place-items: center; }
.fan-card { position: absolute; width: 232px; height: 288px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(180deg, #1a1a1b, #0f0f0f); box-shadow: var(--shadow); transition: transform .95s var(--ease), opacity .95s var(--ease), border-color .18s; cursor: pointer; }
.fan-card.front { border-color: rgba(255,255,255,.22); z-index: 3; }
.fan-card:hover { border-color: var(--line-3); }
.fan-top { width: 100%; display: flex; justify-content: center; font: 500 11px var(--mono); letter-spacing: .12em; margin-bottom: 18px; color: var(--muted); }
.fan-img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.12); background: var(--panel-3); }
.fan-name { margin-top: 18px; font-size: 1.3rem; font-weight: 600; color: var(--strong); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-amt { margin-top: 6px; font: 500 13px var(--mono); color: var(--muted); }
.fan-controls { display: flex; align-items: center; gap: 10px; font-size: 14px; justify-content: space-between; color: var(--muted); }
.fan-controls b { color: var(--strong); font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s ease, box-shadow .2s ease, border-color .18s; text-align: left; }
button.card:hover, a.card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.cc-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-h img, .cc-h .ph { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--panel-3); flex: none; border: 2px solid var(--line); }
.cc-h .nm { min-width: 0; }
.cc-h b { display: block; font: 600 16px var(--sans); color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-h span { display: block; font: 400 12px var(--mono); color: var(--muted); }
.cc-h .pill { margin-left: auto; flex: none; }
.quote { font: 400 14px/1.5 var(--sans); color: var(--prose); margin: 0; min-height: 42px; }
.chipline { display: none; }
.cmeta { display: flex; gap: 14px; font: 400 12px var(--mono); color: var(--muted); flex-wrap: wrap; }
.cmeta b { color: var(--strong); font-weight: 500; }
.cfoot { display: flex; font: 400 12px var(--mono); color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.heatline { height: 4px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.heatline i { display: block; height: 100%; background: linear-gradient(90deg, #8d8d8d, #fff); border-radius: 999px; transition: width .95s var(--ease); }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.stag { align-self: flex-start; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--strong); font: 500 12px var(--mono); }
.sico { display: none; }
.step b, .card > b { font: 600 17px var(--sans); color: var(--strong); letter-spacing: -.01em; }
.step p, .card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.feat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.feat .card { grid-column: span 2; }
.feat .card.big { grid-column: span 3; }
.votes, .sus { display: grid; gap: 10px; margin-top: 6px; }
.vote { font: 400 13px var(--mono); }
.vote .vr { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--text); }
.vote .vb { height: 6px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.vote .vb i { display: block; height: 100%; background: linear-gradient(90deg, #8d8d8d, #fff); border-radius: 999px; width: 0; transition: width .95s var(--ease); }
.vote:not(:first-child) .vb i { background: #4a4c51; }
.sline { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font: 400 13px var(--mono); padding: 8px 10px; border: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r-sm); }
.sline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--panel-3); }
.sline .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--strong); }

.act { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lh { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--strong); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.lh .acc { color: var(--good); }
.rows { display: grid; max-height: 520px; overflow: hidden; }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 13px var(--sans); color: var(--prose); }
.row .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font: 500 11px var(--mono); }
.row .ic.l { color: var(--good); } .row .ic.b { color: var(--bad); } .row .ic.p { color: var(--info); }
.row .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .tx b { color: var(--strong); font-weight: 600; }
.row > .muted { font: 400 12px var(--mono); }
.row.new { animation: tlin .45s var(--ease) both, flash 1.6s var(--ease) both; }
@keyframes flash { 0% { background: rgba(255,255,255,.08); } to { background: transparent; } }
.split .bar { display: flex; height: 12px; border-radius: 999px; background: var(--panel-3); margin: 10px 0 6px; overflow: hidden; gap: 2px; }
.split .bar i { display: block; height: 100%; transition: width .95s var(--ease); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 400 13px var(--sans); }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--prose); }
.legend li span:last-child { font-family: var(--mono); color: var(--strong); }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.cta-band { margin: 88px 0 64px; padding: 44px 40px; border: 1px solid var(--line-2); border-radius: var(--r); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: radial-gradient(600px 240px at 20% 0%, rgba(255,255,255,.08), transparent 70%), var(--panel); }
.cta-band h3 { font: 600 32px/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 8px; background: linear-gradient(180deg, #fff 20%, #8d8d8d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band p { margin: 0; color: var(--muted); }
.cta-band .btn.dark { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 32px 0 48px; border-top: 1px solid var(--line); }
.foot b { display: block; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.foot a:not(.brand) { display: block; color: var(--prose); font-size: 14px; margin-bottom: 8px; transition: color .15s; }
.foot a:not(.brand):hover { color: var(--strong); }
.foot .fbrand p { margin: 12px 0 0; font-size: 14px; max-width: 360px; }
.foot .copy { grid-column: 1 / -1; margin: 8px 0 0; color: var(--dim); }

.modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fadein .2s var(--ease) both; }
@keyframes fadein { from { opacity: 0; } }
.mbox { width: min(840px, 100%); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); }
.mh { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.mh b { font: 600 18px var(--sans); color: var(--strong); }
.mt { width: 100%; border-collapse: collapse; font: 400 13px var(--mono); }
.mt th { text-align: left; color: var(--muted); font-weight: 500; padding: 10px 18px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.mt td { padding: 9px 18px; border-top: 1px solid var(--line); white-space: nowrap; }
.mt td.r, .mt th.r { text-align: right; }
.mt tr.click { cursor: pointer; transition: background .15s; } .mt tr.click:hover { background: var(--panel-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); background: var(--btn); color: var(--on-btn); padding: 10px 16px; font: 500 13px var(--sans); opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; z-index: 90; border-radius: 10px; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat:nth-child(5) { border-left: 0; } .stat:nth-child(n+5) { border-top: 1px solid var(--line); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat .card, .feat .card.big { grid-column: span 3; }
  .act { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .topbar { gap: 10px; } .chip { display: none; }
  .hero { padding-top: 28px; gap: 32px; }
  .lede { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; } .stat:nth-child(even) { border-left: 1px solid var(--line); } .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat .v { font-size: 24px; }
  .cards, .steps { grid-template-columns: minmax(0, 1fr); }
  .feat .card, .feat .card.big { grid-column: 1 / -1; }
  .tc-split { grid-template-columns: minmax(0, 1fr); } .diff { border-right: 0; border-bottom: 1px solid var(--line); }
  .tl { grid-template-columns: 64px minmax(0, 1fr); } .tl .h { display: none; }
  .tc-head .muted, .tc-head .btn { display: none; }
  .sec { padding-top: 64px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .foot { grid-template-columns: 1fr 1fr; } .fbrand { grid-column: 1 / -1; }
  .cta-band { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } }
.term { -webkit-mask-image: linear-gradient(transparent 0, #000 56px); mask-image: linear-gradient(transparent 0, #000 56px); }
.cc-h span { display: inline; }
.cc-h .nm span { display: block; }
.cc-h .pill .d { display: inline-block; }
.answer { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin: 0 0 24px; max-width: 520px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--good); }
.answer .a-k { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--good); }
.answer b { font: 600 26px/1.15 var(--sans); letter-spacing: -.02em; color: var(--strong); }
.answer .a-s { font: 400 13px var(--mono); color: var(--muted); }
.act .card .lh .acc { color: var(--good); }

/* ===== coin check ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lede b { font-weight: 600; } .lede .g { color: var(--good); } .lede .y { color: var(--warn); } .lede .r { color: var(--bad); }
.ask { display: flex; gap: 8px; max-width: 560px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); margin: 0 0 12px; transition: border-color .18s, box-shadow .18s; }
.ask:focus-within { border-color: rgba(126,231,135,.45); box-shadow: 0 0 0 3px rgba(126,231,135,.08); }
.ask input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--strong); font: 400 15px var(--mono); padding: 0 12px; }
.ask input::placeholder { color: var(--dim); }
.ask .btn { margin: 0; }
.hint { margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.linkish { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; font-size: 14px; }
.linkish:hover { text-decoration-color: var(--accent); color: var(--accent); }
.term { height: 470px; }
.tl .m .g { color: var(--good); } .tl .m .y { color: var(--warn); } .tl .m .r { color: var(--bad); }
.pill.busy { background: rgba(245,196,81,.1); color: var(--warn); border: 1px solid rgba(245,196,81,.25); }
.pill.err { background: rgba(255,99,103,.1); color: var(--bad); border: 1px solid rgba(255,99,103,.25); }

.result { padding-top: 8px; scroll-margin-top: 80px; }
.verdict-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 28px; align-items: center; padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); animation: rise .95s var(--ease) both; }
.verdict-card.APE { box-shadow: var(--shadow), inset 4px 0 0 var(--good); }
.verdict-card.CAREFUL { box-shadow: var(--shadow), inset 4px 0 0 var(--warn); }
.verdict-card.RUN { box-shadow: var(--shadow), inset 4px 0 0 var(--bad); }
.v-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.v-left img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--panel-3); border: 2px solid var(--line-2); flex: none; }
.v-coin { min-width: 0; }
.v-coin b { display: block; font: 600 20px var(--sans); color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-coin span { display: block; font: 400 12px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-mid { display: flex; align-items: center; gap: 18px; min-width: 0; }
.v-light { display: flex; flex-direction: column; gap: 5px; padding: 7px 6px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; flex: none; }
.v-light i { width: 16px; height: 16px; border-radius: 50%; background: var(--panel-3); transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.verdict-card.RUN .v-light i:nth-child(1) { background: var(--bad); box-shadow: 0 0 6px rgba(255,99,103,.45); }
.verdict-card.CAREFUL .v-light i:nth-child(2) { background: var(--warn); box-shadow: 0 0 6px rgba(245,196,81,.45); }
.verdict-card.APE .v-light i:nth-child(3) { background: var(--good); box-shadow: 0 0 6px rgba(126,231,135,.45); }
.v-word { display: block; font: 700 40px/1 var(--sans); letter-spacing: -.03em; }
.verdict-card.RUN .v-word { color: var(--bad); } .verdict-card.CAREFUL .v-word { color: var(--warn); } .verdict-card.APE .v-word { color: var(--good); }
.v-why { margin: 6px 0 0; color: var(--prose); font-size: 15px; }
.v-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.v-right a { font: 400 13px var(--mono); color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.v-right .btn { margin-top: 6px; }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ck { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.ck.money { grid-column: 1 / -1; }
.ck-h { display: flex; align-items: center; gap: 10px; }
.ck-h .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ck.good .dot { background: var(--good); box-shadow: 0 0 0 4px rgba(126,231,135,.12); } .ck.warn .dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(245,196,81,.12); } .ck.bad .dot { background: var(--bad); box-shadow: 0 0 0 4px rgba(255,99,103,.12); } .ck.na .dot { background: var(--dim); }
.ck-h b { font: 600 16px var(--sans); color: var(--strong); }
.ck-h .st { margin-left: auto; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ck.good .st { color: var(--good); } .ck.warn .st { color: var(--warn); } .ck.bad .st { color: var(--bad); } .ck.na .st { color: var(--dim); }
.ck p { margin: 0; color: var(--prose); font-size: 15px; }
.ck table { width: 100%; border-collapse: collapse; font: 400 12px var(--mono); }
.ck td { padding: 6px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.ck td.r { text-align: right; } .ck td a { color: var(--text); } .ck td a:hover { color: var(--strong); }
.ck .tagx { font: 500 10px var(--mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
.ck .tagx.dead { color: var(--bad); border-color: rgba(255,99,103,.3); } .ck .tagx.alive { color: var(--good); border-color: rgba(126,231,135,.3); }
.flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.node { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); min-width: 150px; font: 400 12px var(--mono); }
.node b { font: 600 13px var(--sans); color: var(--strong); }
.node a { color: var(--text); }
.node.devn { border-color: var(--line-3); }
.node.home { border-color: rgba(255,99,103,.45); }
.arrowx { display: flex; flex-direction: column; justify-content: center; align-items: center; font: 400 11px var(--mono); color: var(--muted); padding: 0 2px; }
.arrowx::before { content: "→"; font-size: 18px; color: var(--strong); line-height: 1; }
.flow-label { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.feat .card { grid-column: span 2; }

@media (max-width: 1080px) {
  .verdict-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v-right { align-items: flex-start; }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .term { height: 340px; }
}
@media (max-width: 640px) {
  .ask { flex-direction: column; } .ask input { padding: 12px; }
  .v-word { font-size: 32px; }
  .feat .card { grid-column: 1 / -1; }
  .node { min-width: 0; flex: 1 1 100%; } .arrowx { flex: 1 1 100%; } .arrowx::before { content: "↓"; }
}

/* ===== case board ===== */
.board-head { margin: 40px 0 16px; } .board-head h2, .checks-h { margin: 0 0 6px; }
.checks-h { margin-top: 40px; font-size: 28px; }
.board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(40px, 6vw, 96px); padding: 28px 26px 30px; background: radial-gradient(700px 300px at 50% 0%, rgba(255,255,255,.05), transparent 70%), var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.strings path { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1.6; stroke-linecap: round; }
.strings path.red { stroke: var(--bad); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(255,99,103,.45)); }
.strings path.dim { stroke: rgba(255,255,255,.16); stroke-dasharray: 4 5; }
.strings path.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawl .9s var(--ease) forwards; }
.strings path.dim.draw { animation: none; stroke-dasharray: 4 5; stroke-dashoffset: 0; }
@keyframes drawl { to { stroke-dashoffset: 0; } }
.tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tagb { position: absolute; transform: translate(-50%, -50%); background: var(--panel-3); color: var(--strong); border: 1px solid var(--line-2); font: 500 11px/1 var(--mono); padding: 5px 7px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .4s var(--ease); }
.tagb.in { opacity: 1; } .tagb.red { background: var(--bad); color: #1a0505; border-color: var(--bad); }
.bcol { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bcol.wide { grid-column: 1 / -1; }
.bcol h3 { margin: 0; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row-stack { display: flex; flex-wrap: wrap; gap: 12px; }
.row-stack .pin { flex: 1 1 160px; max-width: 220px; }
.pin { position: relative; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 13px 10px; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .18s; }
.pin.in { opacity: 1; transform: none; }
.pin:hover { border-color: var(--line-3); }
.pin::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #d8d8d8; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.pin.red { border-color: rgba(255,99,103,.5); } .pin.red::before { background: var(--bad); }
.pin.dev { border-color: var(--line-3); background: var(--panel-3); padding: 14px 15px; } .pin.dev::before { background: #fff; }
.pin .r { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pin .w { display: block; font: 600 15px var(--sans); color: var(--strong); margin: 3px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin.dev .w { font-size: 18px; }
.pin a.w:hover { text-decoration: underline; }
.pin .x { font: 400 12px var(--mono); color: var(--muted); }
.pin .x.bad { color: var(--bad); } .pin .x.good { color: var(--good); }
.pin .amt { display: none; }
.pin.coin { display: flex; gap: 10px; align-items: center; } .pin.coin img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel-3); flex: none; }
.pin.coin.this { border-color: rgba(255,255,255,.35); }
.bempty { font: 400 13px var(--sans); color: var(--dim); }
@media (max-width: 900px) {
  .board { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .strings, .tags { display: none; }
  .pin .amt { display: inline-block; margin-top: 6px; font: 500 11px var(--mono); background: var(--panel-3); border: 1px solid var(--line-2); padding: 3px 7px; border-radius: 6px; color: var(--strong); }
  .pin .amt.red { background: var(--bad); color: #1a0505; border-color: var(--bad); }
  .row-stack .pin { max-width: none; }
}
.board { padding-top: 40px; }

/* ===== how it played out ===== */
.tl-wrap { margin: 40px 0 0; } .tl-wrap h2 { margin: 0 0 6px; } .tl-wrap .sub { margin-bottom: 18px; }
.timeline { list-style: none; margin: 0; padding: 8px 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); position: relative; }
.timeline::before { content: ""; position: absolute; left: 118px; top: 18px; bottom: 18px; width: 1px; background: var(--line-2); }
.ev { display: grid; grid-template-columns: 86px 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 20px; opacity: 0; transform: translateX(-8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.ev.in { opacity: 1; transform: none; }
.ev .when { font: 500 13px var(--mono); color: var(--strong); text-align: right; }
.ev .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--panel-3); border: 2px solid var(--line-3); justify-self: center; position: relative; z-index: 1; }
.ev.bad .dot { background: var(--bad); border-color: var(--bad); box-shadow: none; }
.ev.peak .dot { background: var(--good); border-color: var(--good); box-shadow: none; }
.ev.launch .dot { background: #fff; border-color: #fff; }
.ev .what { font: 400 15px var(--sans); color: var(--text); }
.ev.bad .what { color: var(--strong); }
.ev .abs { font: 400 11px var(--mono); color: var(--dim); white-space: nowrap; }
@media (max-width: 640px) {
  .timeline::before { left: 78px; }
  .ev { grid-template-columns: 52px 18px minmax(0, 1fr); padding: 9px 14px; }
  .ev .abs { display: none; } .ev .what { font-size: 14px; }
}
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck.network { grid-column: 1 / -1; }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ===== the trail ===== */
.trail-wrap { margin: 56px 0 0; }
.trail-head { display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.trail-head h2 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; color: var(--strong); }
.trail-head .sub { margin: 0; color: var(--muted); max-width: 640px; }
.trail-lede { margin: 22px 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 16px; color: var(--prose); }
.trail-lede .v { font: 600 12px var(--mono); letter-spacing: .1em; padding: 3px 8px; border-radius: 6px; margin-right: 6px; }
.trail-lede .v.RUN { color: var(--bad); background: rgba(255,99,103,.12); } .trail-lede .v.CAREFUL { color: var(--warn); background: rgba(245,196,81,.12); } .trail-lede .v.APE { color: var(--good); background: rgba(126,231,135,.12); }
.trail { list-style: none; margin: 0; padding: 0; position: relative; }
.trail::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.tr { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 0 0 14px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tr.in { opacity: 1; transform: none; }
.tr-n { position: relative; z-index: 1; align-self: start; margin-top: 16px; justify-self: center; font: 500 11px var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 7px; white-space: nowrap; }
.tr.bad .tr-n { color: var(--bad); border-color: rgba(255,99,103,.45); } .tr.warn .tr-n { color: var(--warn); border-color: rgba(245,196,81,.4); }
.tr-b { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 16px 18px; min-width: 0; }
.tr.bad .tr-b { border-color: rgba(255,99,103,.28); }
.tr-b h3 { margin: 0 0 4px; font-size: 17px; color: var(--strong); letter-spacing: -.01em; }
.tr-b p { margin: 0; color: var(--prose); font-size: 14.5px; }
.ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); overflow-x: auto; }
.ch + .ch { margin-top: 8px; }
.ch-node { display: inline-flex; flex-direction: column; gap: 1px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel-3); min-width: 0; }
.ch-node b { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ch-node a, .ch-node span { font: 500 13.5px var(--mono); color: var(--strong); white-space: nowrap; }
.ch-node a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.ch-node a:hover { text-decoration-color: var(--strong); }
.ch-node.dev { border-color: var(--line-3); }
.ch-node.bad { border-color: rgba(255,99,103,.5); } .ch-node.bad b { color: var(--bad); }
.ch-arrow { display: inline-flex; align-items: center; padding: 0 6px; font: 500 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.ch-arrow i { font-style: normal; position: relative; padding-right: 16px; }
.ch-arrow i::after { content: "→"; position: absolute; right: 0; }
.ch-arrow.red { color: var(--bad); }
@media (max-width: 640px) {
  .trail::before { left: 15px; } .tr { grid-template-columns: 32px 1fr; gap: 10px; } .tr-n { font-size: 10px; padding: 3px 5px; }
  .ch { flex-direction: column; align-items: flex-start; } .ch-arrow { padding: 2px 10px; }
  .ch-arrow i::after { content: "↓"; }
}
.ch-arrow.sep i { padding-right: 0; } .ch-arrow.sep i::after { content: none; }
@media (max-width: 640px) { .ch-arrow.sep { display: none; } }

/* facts strip + numbers in every check */
.facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); }
.facts > div, .kv > div { background: var(--panel); padding: 12px 14px; min-width: 0; }
.facts span, .kv span { display: block; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facts b, .kv b { font: 600 16px var(--sans); color: var(--strong); letter-spacing: -.01em; overflow-wrap: anywhere; }
.facts b.bad, .kv b.bad { color: var(--bad); } .facts b.warn, .kv b.warn { color: var(--warn); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.kv > div { background: var(--panel-2); padding: 10px 12px; }
.kv b { font-size: 15px; }
.ck.wide { grid-column: 1 / -1; }
.txl { font: 500 11.5px var(--mono); color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; white-space: nowrap; margin-left: 4px; }
.txl:hover { color: var(--strong); }
/* launch-wallet proof */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pf { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); padding: 12px 14px; min-width: 0; }
.pf.bad { border-color: rgba(255,99,103,.4); } .pf.warn { border-color: rgba(245,196,81,.35); }
.pf-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-w { font: 600 15px var(--mono); color: var(--strong); }
.pf-tag { font: 600 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; color: var(--muted); background: var(--panel-3); }
.pf-tag.bad { color: var(--bad); background: rgba(255,99,103,.12); } .pf-tag.warn { color: var(--warn); background: rgba(245,196,81,.12); }
.pf-n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; }
.pf-n span { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-n b { font: 600 13.5px var(--sans); color: var(--strong); overflow-wrap: anywhere; } .pf-n b a { color: var(--strong); text-decoration: underline; text-decoration-color: var(--line-3); }
.pf-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-l li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--prose); }
.pf-l li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.pf-l li.strong::before { background: var(--bad); } .pf-l li.medium::before { background: var(--warn); }
.pf-buys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pf-buys > span { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.pf-buys a { font: 500 12px var(--mono); color: var(--strong); padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 6px; }
.pf-buys a em { font-style: normal; color: var(--muted); } .pf-buys a.dead em { color: var(--bad); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof { grid-template-columns: minmax(0, 1fr); } .pf-n { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hint.cases { margin-top: 6px; } .hint.cases a { font: 500 12.5px var(--mono); color: var(--strong); border: 1px solid var(--line-2); border-radius: 7px; padding: 2px 8px; margin-left: 4px; transition: border-color .15s, background .15s; } .hint.cases a:hover { border-color: var(--line-3); background: var(--panel-2); }
.pf-how { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .pf-how b { color: var(--prose); font-weight: 600; }
.hint.cases { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; grid-template-columns: none; } .hint.cases a { margin-left: 0; display: inline-block; width: auto; }

/* refinement: tabular numerals on changing numbers, calmer secondary text */
.facts b, .kv b, .pf-n b, .tl .t, .timeline .when, .timeline .abs, .ck td.r, .amt, .tagb, .tr-n, .stat b, .v-word { font-variant-numeric: tabular-nums; }
.ch-node a { text-decoration-color: rgba(126,231,135,.35); } .ch-node a:hover { text-decoration-color: var(--accent); }
.pf-n b a, .ck td a, .pin .w { text-decoration-color: rgba(126,231,135,.35); }
.hint.cases a:hover { border-color: rgba(126,231,135,.45); color: var(--accent); background: transparent; }
.nav a:hover { color: var(--strong); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* live check: three panes like the reference terminal */
.term { height: 470px !important; }
.tc-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.tc-sub { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 12.5px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; }
.tc-sub .ic { width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 3px; flex: none; }
.tc-sub .sp { flex: 1; } .tc-sub .g { color: var(--good); } .tc-sub .r { color: var(--bad); }
.tc-ev { border-right: 1px solid var(--line); min-width: 0; }
.ev-body { height: 214px; overflow: hidden; background: rgba(126,231,135,.035); padding: 6px 0; font: 400 12px/22px var(--mono); }
.ev-l { display: grid; grid-template-columns: 30px 14px minmax(0, 1fr); padding-right: 10px; white-space: nowrap; animation: tlin .4s var(--ease) both; }
.ev-l .n { color: var(--dim); text-align: right; padding-right: 8px; } .ev-l .p { color: var(--good); } .ev-l .p.m { color: var(--bad); }
.ev-l .c { overflow: hidden; text-overflow: ellipsis; color: var(--prose); } .ev-l .c b { font-weight: 500; color: var(--strong); } .ev-l .c .k { color: var(--purple); } .ev-l .c .s { color: #f2cc8f; } .ev-l .c .cm { color: var(--dim); font-style: italic; }
.ev-l.hit { background: rgba(255,99,103,.07); } .ev-l.hit .p { color: var(--bad); }
.tc-pv { min-width: 0; display: flex; flex-direction: column; }
.tc-pv .tc-sub { padding: 0 10px; } .tc-pv .addr { flex: 1; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--deep); overflow: hidden; text-overflow: ellipsis; }
.pv-body { flex: 1; height: 214px; padding: 12px; background: var(--deep); overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.pv-top { display: flex; align-items: center; gap: 10px; } .pv-top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--panel-3); }
.pv-top b { display: block; font: 600 14px var(--sans); color: var(--strong); } .pv-top span { font: 400 11px var(--mono); color: var(--muted); }
.pv-v { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.pv-v .lt { display: flex; flex-direction: column; gap: 3px; } .pv-v .lt i { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-3); }
.pv-v.RUN .lt i:nth-child(1) { background: var(--bad); } .pv-v.CAREFUL .lt i:nth-child(2) { background: var(--warn); } .pv-v.APE .lt i:nth-child(3) { background: var(--good); }
.pv-v strong { font: 700 22px/1 var(--sans); letter-spacing: -.02em; } .pv-v.RUN strong { color: var(--bad); } .pv-v.CAREFUL strong { color: var(--warn); } .pv-v.APE strong { color: var(--good); }
.pv-v p { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--prose); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-bars { display: grid; gap: 7px; }
.pv-bars div { display: grid; grid-template-columns: 82px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font: 500 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv-bars em { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; } .pv-bars em i { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width .8s var(--ease); }
.pv-bars em i.bad { background: var(--bad); } .pv-bars em i.warn { background: var(--warn); } .pv-bars b { font-weight: 500; color: var(--strong); text-align: right; font-variant-numeric: tabular-nums; }
.pv-empty { margin: auto; text-align: center; font: 400 12px var(--mono); color: var(--dim); }
.tc-bar { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.tc-bar .row { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; } .tc-bar .row b { font: 500 13px var(--sans); letter-spacing: 0; color: var(--strong); text-transform: none; font-variant-numeric: tabular-nums; }
.tc-bar .bar { height: 16px; border: 1px solid var(--line-2); border-radius: 4px; padding: 2px; display: flex; gap: 2px; }
.tc-bar .bar i { flex: 1; border-radius: 2px; background: var(--panel-3); transition: background .25s var(--ease); } .tc-bar .bar i.on { background: var(--good); } .tc-bar .bar i.on.bad { background: var(--bad); } .tc-bar .bar i.on.warn { background: var(--warn); }
@media (max-width: 640px) { .tc-split { grid-template-columns: minmax(0, 1fr); } .tc-ev { border-right: 0; border-bottom: 1px solid var(--line); } .ev-body, .pv-body { height: 190px; } }

/* dense case dashboard */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 12px; }
.tabs a { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--prose); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); transition: border-color .16s var(--ease), color .16s var(--ease); }
.tabs a:first-child { color: var(--good); border-color: rgba(126,231,135,.4); } .tabs a:hover { border-color: var(--line-3); color: var(--strong); }
.dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dcol { display: grid; gap: 12px; min-width: 0; }
.pnl { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; min-width: 0; scroll-margin-top: 80px; }
.result > .pnl { margin-top: 12px; }
.pnl-h { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px 6px 14px; border-bottom: 1px solid var(--line); }
.pnl-h b { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--strong); white-space: nowrap; }
.pnl-h .meta { flex: 1; text-align: right; font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-h .btn { flex: none; min-height: 28px; font-size: 12px; }
.pnl-b { padding: 12px 14px; }
/* trail inside a panel: tighter */
.pnl .trail-lede { margin: 0 0 12px; padding: 10px 12px; font-size: 14px; background: var(--deep); border-radius: 8px; }
.pnl .tr { grid-template-columns: 44px 1fr; gap: 10px; padding-bottom: 10px; } .pnl .trail::before { left: 21px; }
.pnl .tr-b { padding: 12px 14px; background: var(--panel-2); border-radius: 8px; } .pnl .tr-b h3 { font-size: 15px; } .pnl .tr-b p { font-size: 13.5px; }
.pnl .ch { padding: 8px; margin-top: 10px; background: var(--deep); }
.pnl .tr-n { margin-top: 12px; }
/* wallets panel */
.pnl .pf-how { margin: 0 0 10px; } .pnl .proof { margin-top: 0; gap: 8px; } .pnl .pf { padding: 10px 12px; }
/* side column: checks as a stacked list, timeline compact */
.side .checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.side .ck { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 14px; box-shadow: none; }
.side .ck:last-child { border-bottom: 0; } .side .ck p { font-size: 13.5px; margin: 4px 0 0; }
.side .ck .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 2px; } .side .ck .kv > div { padding: 8px 10px; } .side .ck .kv b { font-size: 14px; }
.side .ck table { font-size: 12px; } .side .ck .flow { flex-wrap: wrap; } .side .ck .flow .node { min-width: 0; max-width: 100%; }
.side .timeline { margin: 0; } .side .ev { grid-template-columns: 54px 14px minmax(0, 1fr); gap: 8px; padding: 6px 0; } .side .ev .abs { display: none; } .side .ev .what { font-size: 13.5px; }
#pBoard .board { border: 0; border-radius: 0; margin: 0; background: transparent; }
@media (max-width: 1080px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.pnl .pf-n { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
.side .flow { flex-direction: column; align-items: stretch; gap: 4px; } .side .flow .arrowx { align-self: flex-start; padding-left: 14px; } .side .flow .node { width: 100%; }
.side .ck .flow-label { margin-top: 10px; }

/* cyan accent (chosen 2026-11-05): brand colour separate from the green 'good' signal */
:root { --btn: #6fd3f5; --on-btn: #06222c; --accent: #6fd3f5; }
body { background-image: radial-gradient(1100px 760px at 18% 22%, rgba(111,211,245,.09), transparent 64%), radial-gradient(1000px 720px at 78% 30%, rgba(255,255,255,.035), transparent 66%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important; }
.btn:hover { background: #8fdcf7; border-color: #8fdcf7; }
h1 .acc, .comment, .tl .stage { color: var(--accent) !important; }
.tabs a:first-child { color: var(--accent); border-color: rgba(111,211,245,.45); }
.ev-body { background: rgba(111,211,245,.035); } .ev-l .p { color: var(--accent); }
.tc-bar .bar i.on { background: var(--accent); }
.ask:focus-within { border-color: rgba(111,211,245,.5); box-shadow: 0 0 0 3px rgba(111,211,245,.1); }

/* white primary CTA, cyan stays the accent */

/* compact verdict card under the live check */
.tc-sum { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: grid; gap: 12px; animation: tlin .45s var(--ease) both; }
.ts-v { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ts-v .lt { display: flex; flex-direction: column; gap: 3px; padding: 5px 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--deep); } .ts-v .lt i { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-3); }
.tc-sum.RUN .lt i:nth-child(1) { background: var(--bad); } .tc-sum.CAREFUL .lt i:nth-child(2) { background: var(--warn); } .tc-sum.APE .lt i:nth-child(3) { background: var(--good); }
.ts-v strong { font: 700 26px/1 var(--sans); letter-spacing: -.02em; } .tc-sum.RUN strong { color: var(--bad); } .tc-sum.CAREFUL strong { color: var(--warn); } .tc-sum.APE strong { color: var(--good); }
.ts-v p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--prose); }
.ts-l { font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }
.ts-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); }
.ts-m div { background: var(--deep); padding: 8px 10px; min-width: 0; } .ts-m span { display: block; font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-m b { font: 600 16px var(--sans); color: var(--strong); font-variant-numeric: tabular-nums; } .ts-m b.bad { color: var(--bad); } .ts-m b.warn { color: var(--warn); }
@media (max-width: 640px) { .ts-v { grid-template-columns: auto auto minmax(0, 1fr); } .ts-l { display: none; } .ts-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } .term { height: 300px !important; } }

/* white primary CTA, cyan stays the accent */
:root { --btn: #f2f4f7; --on-btn: #0b0d11; } .btn:hover { background: #fff; border-color: #fff; }
/* carets like the reference: accent coloured blocks, one after the headline */
.wm-caret { background: var(--accent); width: .44em; height: .84em; margin-left: .06em; transform: translateY(.1em); }
.h-caret { display: inline-block; width: .3em; height: .6em; margin-left: .06em; background: var(--accent); vertical-align: baseline; animation: blink 1.1s steps(1) infinite; }
.comment { display: block; }
.comment .cur { width: .62em; height: 1.2em; margin-left: 10px; vertical-align: -.28em; background: var(--accent); opacity: .75; }
h1 .nw { display: inline; white-space: nowrap; } h1 .h-caret { display: inline-block; }
h1 .nw { position: relative; } h1 .h-caret { position: absolute; left: 100%; bottom: .14em; }
@media (min-width: 900px) { .comment { white-space: nowrap; } }
/* hero left at the reference's scale */
h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 18px; }
.wordmark.xl { font-size: clamp(40px, 3.8vw, 52px); }
.px.big { width: 60px; height: 60px; }
.lockup { gap: 14px; margin-bottom: 20px; }
.lede { font-size: 17px; line-height: 1.65; max-width: 500px; }

.trail-lede .v.INFO { color: var(--accent); background: rgba(111,211,245,.12); } .verdict-card.INFO .v-word { color: var(--accent); }

/* one blinking caret only: after the headline */
.wm-caret, .comment .cur { display: none !important; }

/* the one caret sits on the big wordmark */
.lockup .wm-caret { display: inline-block !important; } h1 .h-caret { display: none !important; }
/* dashboard flows top to bottom, full width, no empty gaps */
.dash { display: flex; flex-direction: column; gap: 12px; }
.dcol { display: contents; }
#trailWrap { order: 1; } #tlWrap { order: 2; } #pWallets { order: 3; } #pChecks { order: 4; }
.side .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.side .ck { background: var(--panel); border-bottom: 0; }
.side .ck.money, .side .ck.network { grid-column: 1 / -1; }
.side .ck.money .flow { flex-direction: row; flex-wrap: wrap; align-items: center; } .side .ck.money .flow .node { width: auto; } .side .ck.money .flow .arrowx { align-self: center; padding-left: 0; }
.side .ck .kv { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.side .ev .abs { display: inline; }
.pnl .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pnl .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .side .checks, .pnl .proof { grid-template-columns: minmax(0, 1fr); } }
.dash > .dcol > .pnl { width: 100%; }
.side .ev { grid-template-columns: 64px 14px minmax(0, 1fr) auto; } .side .ev .abs { font-size: 11px; color: var(--dim); white-space: nowrap; }
.side .timeline { max-width: none; }

/* blinking caret in the top bar wordmark */
.top .wm-caret, .brand .wm-caret { display: inline-block !important; }

.lockup .wm-caret { display: none !important; }

/* thin caret, same as the X banner */
.wm-caret { width: .12em !important; margin-left: .08em !important; }