:root{
  --bg:#07080a;
  --panel:#0f1216;
  --panel-2:#151a20;
  --panel-3:#1c222a;
  --line:#232a33;
  --line-2:#333c47;
  /* readability: lifted every text tone well clear of the background */
  --tx:#f2f5f9;
  --tx-dim:#c2cad6;
  --tx-faint:#98a2b0;
  --good:#5cf0ad;
  --good-dim:#2a8a66;
  --good-glow:rgba(92,240,173,.16);
  --warn:#ffc94d;
  --bad:#ff8080;
  --accent:#8ab9ff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--tx);
  font:16px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ambient backdrop -------------------------------------------------------- */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(920px 540px at 10% -10%, rgba(92,240,173,.11), transparent 62%),
    radial-gradient(780px 470px at 90% 2%, rgba(138,185,255,.075), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(92,240,173,.05), transparent 60%);
  animation:drift 22s ease-in-out infinite alternate;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(1200px 820px at 50% 0%,#000 8%,transparent 76%);
  -webkit-mask-image:radial-gradient(1200px 820px at 50% 0%,#000 8%,transparent 76%);
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-26px,0) scale(1.05)}}

/* ---------- scrollbars ----------
   The platform default is a wide light bar with stepper arrows on each end,
   which looks like it belongs to another application. These are sized once so
   nothing reflows, then simply painted transparent until the pointer is over
   the thing that scrolls. */
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:transparent}

html{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:#0a0c10}
html::-webkit-scrollbar-thumb{
  background:#252c35;border-radius:99px;border:3px solid #0a0c10;background-clip:content-box;
}
html::-webkit-scrollbar-thumb:hover{background:#3a4450;background-clip:content-box}

/* inner scrollers: same footprint always, ink only on hover */
.table-wrap,.map-wrap,.curve-wrap,.navlinks,.pulse,#pal-list,.dd-list,.doc pre,.snap{
  scrollbar-width:thin;scrollbar-color:transparent transparent;
  transition:scrollbar-color .25s var(--ease);
}
.table-wrap:hover,.map-wrap:hover,.curve-wrap:hover,.navlinks:hover,.pulse:hover,
#pal-list:hover,.dd-list:hover,.doc pre:hover,.snap:hover,
.table-wrap:focus-within,.map-wrap:focus-within,.curve-wrap:focus-within{
  scrollbar-color:var(--line-2) transparent;
}
.table-wrap::-webkit-scrollbar,.map-wrap::-webkit-scrollbar,.curve-wrap::-webkit-scrollbar,
.navlinks::-webkit-scrollbar,.pulse::-webkit-scrollbar,#pal-list::-webkit-scrollbar,
.dd-list::-webkit-scrollbar,.doc pre::-webkit-scrollbar,.snap::-webkit-scrollbar{
  width:10px;height:10px;background:transparent;
}
.table-wrap::-webkit-scrollbar-thumb,.map-wrap::-webkit-scrollbar-thumb,
.curve-wrap::-webkit-scrollbar-thumb,.navlinks::-webkit-scrollbar-thumb,
.pulse::-webkit-scrollbar-thumb,#pal-list::-webkit-scrollbar-thumb,
.dd-list::-webkit-scrollbar-thumb,.doc pre::-webkit-scrollbar-thumb,.snap::-webkit-scrollbar-thumb{
  background:transparent;border-radius:99px;border:3px solid transparent;background-clip:content-box;
}
.table-wrap:hover::-webkit-scrollbar-thumb,.map-wrap:hover::-webkit-scrollbar-thumb,
.curve-wrap:hover::-webkit-scrollbar-thumb,.navlinks:hover::-webkit-scrollbar-thumb,
.pulse:hover::-webkit-scrollbar-thumb,#pal-list:hover::-webkit-scrollbar-thumb,
.dd-list:hover::-webkit-scrollbar-thumb,.doc pre:hover::-webkit-scrollbar-thumb,
.snap:hover::-webkit-scrollbar-thumb{
  background:var(--line-2);background-clip:content-box;
}
.table-wrap:hover::-webkit-scrollbar-thumb:hover,.dd-list:hover::-webkit-scrollbar-thumb:hover{
  background:#47535f;background-clip:content-box;
}

/* a hint that a table continues past its edge, since the bar is now hidden */
.scroller{position:relative}
.scroller::before,.scroller::after{
  content:'';position:absolute;top:0;bottom:11px;width:44px;pointer-events:none;z-index:2;
  opacity:0;transition:opacity .25s var(--ease);
}
.scroller::before{left:0;background:linear-gradient(90deg,var(--panel) 12%,transparent)}
.scroller::after{right:0;background:linear-gradient(270deg,var(--panel) 12%,transparent)}
.scroller.can-left::before{opacity:1}
.scroller.can-right::after{opacity:1}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tiny{font-size:12.5px}
.sr{visibility:hidden}
a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:#b4d3ff;text-decoration:underline}
code{font-family:var(--mono);font-size:.9em;background:#1a2029;border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;color:#dce4ee}
strong{font-weight:650}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:22px;
  padding:14px 28px;
  background:rgba(7,8,10,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),padding .3s var(--ease);
}
.topbar.stuck{background:rgba(7,8,10,.92);border-bottom-color:var(--line);padding:11px 28px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
/* the wordmark: two interlocking rounded squares, drawn as inline SVG so the
   gradient and the glow stay crisp at any density */
.logo{
  width:15px;height:15px;flex:0 0 auto;display:block;overflow:visible;
  animation:logoPulse 3.4s var(--ease) infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 3px rgba(45,232,170,.30))}
  50%{filter:drop-shadow(0 0 8px rgba(45,232,170,.70))}
}
.brand-name{font-weight:700;letter-spacing:.19em;font-size:15px}
.brand-sub{color:var(--tx-faint);font-size:12.5px}
.navlinks{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  font-size:13.5px;color:var(--tx-faint);text-decoration:none;white-space:nowrap;
  padding:8px 11px;border-radius:8px;position:relative;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.navlinks a:hover{color:var(--tx);background:var(--panel-2);text-decoration:none}
.navlinks a.on{color:var(--good);background:rgba(92,240,173,.09)}
.navlinks a.ext{color:var(--tx-dim);margin-left:8px;
  border-left:1px solid var(--line);border-radius:0 8px 8px 0;padding-left:15px}
.navlinks a.ext:hover,.navlinks a.ext.on{color:var(--good)}
.pulse{display:flex;gap:26px;margin-left:auto}
.stat{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.stat .k{font-size:10.5px;letter-spacing:.12em;color:var(--tx-faint)}
.stat .v{font-size:13.5px;color:var(--tx-dim);transition:color .3s var(--ease)}
.stat .v.live{color:var(--good)}
.stat .v.tick{animation:tick .7s var(--ease)}
@keyframes tick{0%{color:var(--good);text-shadow:0 0 10px var(--good-glow)}100%{color:inherit;text-shadow:none}}
/* The nav moves to its own full-width row whenever it would otherwise be
   clipped. Toggled by measurement in viz.js, not a guessed breakpoint —
   the width it needs depends on how many section links there are. */
.topbar.nav-wrap{flex-wrap:wrap;row-gap:6px}
.topbar.nav-wrap .navlinks{
  order:4;flex:1 0 100%;margin:0 -11px;padding-top:7px;border-top:1px solid var(--line);
}
@media (max-width:900px){
  .topbar{gap:10px 14px;padding:11px 18px}
  .brand{flex:1 1 auto}
  #btn-wallet{order:2;flex:0 0 auto}
  .pulse{order:3;flex:1 0 100%;margin-left:0;gap:20px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .pulse .stat{flex:0 0 auto}
  .navlinks{order:4}
  .brand-sub{display:none}
}

/* ---------- layout ---------- */
main{max-width:1220px;margin:0 auto;padding:0 28px 40px}
section.band{padding:96px 0 12px;position:relative;scroll-margin-top:80px}

[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  body::before{animation:none}
  html{scroll-behavior:auto}
}

/* ======================= HERO ======================= */
.hero{
  min-height:calc(100svh - 62px);
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 0 36px;position:relative;
}
.hero-inner{display:grid;grid-template-columns:1.22fr .88fr;gap:58px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:11.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx-dim);
  padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:linear-gradient(180deg,rgba(28,34,42,.9),rgba(15,18,22,.9));
  margin-bottom:30px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 3px var(--good-glow);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero h1{
  font-size:clamp(34px,4.4vw,54px);line-height:1.1;margin:0 0 24px;
  letter-spacing:-.03em;font-weight:600;text-wrap:balance;
  background:linear-gradient(178deg,#ffffff 26%,#b9c3d1 106%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{margin:0;color:var(--tx-dim);font-size:18px;line-height:1.72;max-width:640px}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* live card ---------------------------------------------------------------- */
.hero-card{
  border:1px solid var(--line);border-radius:18px;padding:24px;
  background:linear-gradient(180deg,rgba(24,30,37,.94),rgba(13,16,20,.94));
  box-shadow:0 34px 90px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.045);
  position:relative;overflow:hidden;
}
.hero-card::before{
  content:'';position:absolute;inset:-40% -10% auto -10%;height:60%;
  background:radial-gradient(closest-side,var(--good-glow),transparent);
  pointer-events:none;
}
.hc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;position:relative}
.hc-live{display:inline-flex;align-items:center;gap:8px;font:11px/1 var(--mono);
  letter-spacing:.16em;color:var(--good)}
.hc-live .dot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:breathe 2.4s ease-in-out infinite}
.hc-blk{font-size:12px;color:var(--tx-faint)}
.hc-sym{font:12.5px/1 var(--mono);letter-spacing:.14em;color:var(--tx-faint);margin-bottom:9px}
.hc-price{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--good);
  text-shadow:0 0 44px var(--good-glow)}
.hc-sub{font-size:12.5px;color:var(--tx-faint);margin-top:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hc-bars{display:block;width:100%;height:auto;margin:24px 0 6px}
#hc-bars rect{fill:var(--good-dim);transform-origin:bottom;
  animation:barIn .8s var(--ease-out) forwards;animation-delay:var(--d,0ms);transform:scaleY(0)}
#hc-bars rect.best{fill:var(--good)}
@keyframes barIn{to{transform:scaleY(1)}}
.hc-foot{display:grid;grid-template-columns:1fr auto;gap:14px;
  border-top:1px solid var(--line);padding-top:18px;margin-top:12px}
.hc-foot .k{display:block;font:10.5px/1 var(--sans);letter-spacing:.13em;color:var(--tx-faint);margin-bottom:7px}
.hc-foot .v{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

.hero-stats{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hs{display:flex;flex-direction:column;gap:9px;min-width:0;padding:28px 28px 28px 0;position:relative}
.hs+.hs{padding-left:28px}
.hs+.hs::before{content:'';position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--line)}
.hs .k{font-size:10.5px;letter-spacing:.14em;color:var(--tx-faint)}
.hs .v{font-size:24px;font-weight:600;letter-spacing:-.018em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs .v.big{font-size:40px;letter-spacing:-.03em;color:var(--good);text-shadow:0 0 34px var(--good-glow)}
.hs .sub{font-size:12.5px;color:var(--tx-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* margin-top:auto pins the cue to the foot of the hero viewport and eats the
   slack, instead of leaving a dead band between it and the first section */
.scroll-cue{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:44px;
  font:11.5px/1 var(--mono);letter-spacing:.15em;color:var(--tx-faint);text-transform:uppercase}
.scroll-cue .arrow{display:inline-block;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

@media (max-width:1000px){
  .hero{min-height:0;padding:56px 0 24px}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-card{max-width:520px}
  .hero-stats{grid-template-columns:1fr 1fr;margin-top:44px}
  .hs{padding:22px 20px 22px 0}
  .hs:nth-child(3)::before{display:none}
  .hs .v.big{font-size:32px}
  .hero .lede{font-size:17px}
}

/* ---------- section heads ---------- */
.sec-head{display:flex;gap:22px;align-items:flex-start;margin-bottom:28px}
.sec-num{font:11.5px/1 var(--mono);letter-spacing:.12em;color:var(--good);
  padding:9px 11px;border:1px solid var(--good-dim);border-radius:7px;
  background:rgba(92,240,173,.06);flex:0 0 auto;margin-top:3px}
.sec-head h2{margin:0 0 7px;font-size:25px;font-weight:600;letter-spacing:-.02em}
.sec-head p{margin:0;color:var(--tx-faint);font-size:15px;line-height:1.68;max-width:760px}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,rgba(21,26,32,.86),rgba(14,17,21,.86));
  border:1px solid var(--line);border-radius:16px;padding:26px;
  position:relative;overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.panel:hover{border-color:var(--line-2);box-shadow:0 18px 50px -28px rgba(0,0,0,.9)}
.panel+.panel{margin-top:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:960px){.grid-2{grid-template-columns:1fr}}
.panel .sec-head h2{font-size:16px}
.panel .sec-head p{font-size:13.5px}

body.spin .panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.25s linear infinite;
}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* ---------- controls ---------- */
.row{display:flex;gap:24px;align-items:flex-start}
.row+.row{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.split-row{flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:11px;min-width:0}
.field.grow{flex:1 1 320px}
.field>label{font-size:10.5px;letter-spacing:.14em;color:var(--tx-faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:12.5px/1 var(--mono);letter-spacing:.04em;
  padding:10px 13px;border-radius:8px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);color:var(--tx-dim);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.chip:hover{border-color:var(--line-2);color:var(--tx);transform:translateY(-2px)}
.chip:active{transform:translateY(0)}
.chip.on{background:rgba(92,240,173,.1);border-color:var(--good-dim);color:var(--good);
  box-shadow:0 0 18px -6px var(--good-glow)}
.addr-row,.size-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input{
  background:#0b0e12;border:1px solid var(--line);color:var(--tx);
  border-radius:9px;padding:11px 14px;font-size:14.5px;min-width:0;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
input::placeholder{color:var(--tx-faint)}
input:focus{outline:none;border-color:var(--good-dim);box-shadow:0 0 0 3px rgba(92,240,173,.1)}
.addr-row input{flex:1 1 300px;font-size:13.5px}
#size-input{width:150px;font-size:16px}
.btn{
  background:var(--panel-2);border:1px solid var(--line);color:var(--tx-dim);
  padding:11px 18px;border-radius:9px;font:500 13.5px var(--sans);cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.btn:hover{border-color:var(--line-2);color:var(--tx);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:15px 26px;font-size:15px;border-radius:11px}
.btn.primary{background:linear-gradient(180deg,rgba(92,240,173,.18),rgba(92,240,173,.07));
  border-color:var(--good-dim);color:var(--good)}
.btn.primary:hover{box-shadow:0 0 30px -8px var(--good-glow)}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
a.btn{display:inline-block;text-decoration:none}
a.btn:hover{text-decoration:none}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:max-content;background:var(--panel-2)}
.seg button{background:transparent;border:0;color:var(--tx-faint);padding:11px 19px;
  font:13.5px var(--sans);cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--panel-3);color:var(--tx)}
.hint{font-size:13px;color:var(--tx-faint);line-height:1.65}
.hint.err{color:var(--bad)}

/* ---------- decision ---------- */
.headline-grid{display:grid;grid-template-columns:1.7fr repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.hcell{background:var(--panel-2);padding:19px 18px;display:flex;flex-direction:column;gap:7px;min-width:0;
  transition:background .3s var(--ease)}
.hcell:hover{background:var(--panel-3)}
.hcell .k{font-size:10.5px;letter-spacing:.14em;color:var(--tx-faint)}
.hcell .v{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcell .v.big{font-size:25px;letter-spacing:-.022em}
.hcell .sub{font-size:12.5px;color:var(--tx-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1120px){.headline-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.headline-grid{grid-template-columns:repeat(2,1fr)}}
.verdict{margin-top:18px;padding:16px 19px;border-radius:11px;font-size:14.5px;line-height:1.7;
  background:linear-gradient(180deg,rgba(92,240,173,.08),rgba(92,240,173,.025));
  border:1px solid var(--good-dim);color:#c2f2dc}
.verdict.warn{background:linear-gradient(180deg,rgba(255,201,77,.09),rgba(255,201,77,.025));
  border-color:#6b5314;color:#ffe3a3}
.verdict.bad{background:linear-gradient(180deg,rgba(255,128,128,.09),rgba(255,128,128,.025));
  border-color:#6d2c2e;color:#ffcaca}

/* ---------- route map ---------- */
.map-wrap{position:relative;width:100%;overflow-x:auto}
#routemap{display:block;width:100%;height:auto;min-width:680px}
#routemap .link{stroke:var(--line-2);stroke-width:1.5;fill:none;opacity:0;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw .9s var(--ease-out) forwards;animation-delay:var(--d)}
#routemap .link.best{stroke:var(--good);stroke-width:2.3}
@keyframes draw{to{stroke-dashoffset:0;opacity:.9}}
#routemap .flow{fill:var(--good)}
#routemap .node{fill:var(--panel-3);stroke:var(--line-2);stroke-width:1.3;opacity:0;
  animation:pop .55s var(--ease-out) forwards;animation-delay:var(--d)}
#routemap .node.best{stroke:var(--good);fill:rgba(92,240,173,.14)}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
#routemap text{font-family:var(--mono);fill:var(--tx-dim);font-size:12px;
  opacity:0;animation:fadeIn .6s var(--ease-out) forwards;animation-delay:var(--d)}
#routemap text.lbl{fill:var(--tx);font-size:13px}
#routemap text.best{fill:var(--good)}
@keyframes fadeIn{to{opacity:1}}

/* ---------- impact curve ---------- */
.curve-wrap{position:relative;overflow-x:auto}
#curve{display:block;width:100%;height:auto;min-width:600px}
#curve .grid{stroke:var(--line);stroke-width:1}
#curve .axis{fill:var(--tx-faint);font-family:var(--mono);font-size:12px}
#curve .line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw2 1.5s var(--ease-out) forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
#curve .area{opacity:0;animation:fadeIn 1.1s var(--ease-out) .5s forwards}
#curve .pt{opacity:0;animation:pop .4s var(--ease-out) forwards;animation-delay:var(--d)}
#curve .here{stroke:var(--good);stroke-width:1.3;stroke-dasharray:4 4;opacity:.6}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:10.5px/1 var(--sans);letter-spacing:.13em;color:var(--tx-faint);
  font-weight:600;padding:0 13px 13px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:15px 13px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;white-space:nowrap}
tbody tr{opacity:0;animation:rowIn .5s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background .2s var(--ease)}
tbody tr.clickable:hover{background:rgba(255,255,255,.045)}
tbody tr.best td{background:rgba(92,240,173,.06)}
tbody tr.best:hover td{background:rgba(92,240,173,.1)}
th.r,td.r{text-align:right}
td.empty,.empty{color:var(--tx-faint);font-size:14px;padding:18px 2px;text-align:left;line-height:1.7}
.tag{display:inline-block;font:10.5px/1 var(--mono);letter-spacing:.08em;
  padding:5px 8px;border-radius:5px;border:1px solid var(--line-2);color:var(--tx-faint);vertical-align:middle}
.tag.best{border-color:var(--good-dim);color:var(--good);background:rgba(92,240,173,.09)}
.tag.hop{border-color:#3b4a68;color:#a8c6ff;background:rgba(138,185,255,.09)}
.venue-name{font-weight:650;color:var(--tx)}
.pair{color:var(--tx-dim);font-family:var(--mono);font-size:13px}
.good{color:var(--good)}
.warn{color:var(--warn)}
.bad{color:var(--bad)}
.dim{color:var(--tx-faint)}

/* ---------- split / ladder ---------- */
.leg{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.leg:last-of-type{border-bottom:0}
.leg-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.leg .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--good-dim),var(--good));
  min-width:3px;width:0;animation:grow 1s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes grow{to{width:var(--w)}}
.leg .bar-wrap{background:#1b2129;border-radius:4px;overflow:hidden}
.leg .lbl{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.leg .lbl strong{font-size:14.5px;font-weight:650}
.leg .lbl em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--tx-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leg .pct{flex:0 0 auto;font-family:var(--mono);font-size:16px;color:var(--good);font-weight:650}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--tx-faint)}
.kv .v{font-family:var(--mono)}
.ladder-row{display:grid;grid-template-columns:92px 1fr 108px;gap:14px;align-items:center;
  padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;cursor:pointer;
  border-radius:9px;transition:background .2s var(--ease),transform .2s var(--ease)}
.ladder-row:last-child{border-bottom:0}
.ladder-row:hover{background:rgba(255,255,255,.045);transform:translateX(4px)}
.ladder-row.here{background:rgba(92,240,173,.06)}
.ladder-row .sz{font-family:var(--mono);color:var(--tx-dim)}
.ladder-row .vn{display:flex;flex-direction:column;gap:4px;min-width:0}
.ladder-row .vn strong{font-size:14px;font-weight:650}
.ladder-row .vn em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--tx-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladder-row .cost{text-align:right;font-family:var(--mono)}

/* ---------- proof ---------- */
.call{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:9px;
  background:#0b0e12;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  transition:border-color .2s var(--ease);
  opacity:0;animation:rowIn .5s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.call:hover{border-color:var(--line-2)}
.call .top{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:7px}
.call .who{color:var(--tx-dim)}
.call .data{color:var(--tx-faint);word-break:break-all;max-height:46px;overflow:hidden;font-size:12px}
.call button{background:transparent;border:1px solid var(--line);color:var(--tx-faint);
  border-radius:6px;padding:4px 10px;font:11.5px var(--sans);cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.call button:hover{color:var(--good);border-color:var(--good-dim)}

/* ---------- nav link ---------- */
.navlink{color:var(--tx-dim);font-size:13.5px;text-decoration:none;padding:8px 2px;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.navlink:hover{color:var(--tx);border-bottom-color:var(--good-dim);text-decoration:none}
.navlink.on{color:var(--good)}

/* ---------- documentation page ---------- */
.doc{max-width:820px}
.doc-hero{padding:76px 0 32px;max-width:820px}
.doc-hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.12;margin:0 0 20px;
  letter-spacing:-.03em;font-weight:600;text-wrap:balance;
  background:linear-gradient(178deg,#fff 26%,#b9c3d1 106%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.doc-hero p{margin:0;color:var(--tx-dim);font-size:18px;line-height:1.72;max-width:660px}
.toc{display:flex;flex-wrap:wrap;gap:9px;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.toc a{font:12.5px/1 var(--mono);color:var(--tx-dim);padding:9px 13px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-2);text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.toc a:hover{color:var(--good);border-color:var(--good-dim);transform:translateY(-2px);text-decoration:none}

.doc h2{font-size:26px;font-weight:600;letter-spacing:-.022em;margin:0 0 16px}
.doc h3{font-size:17px;font-weight:650;margin:32px 0 10px;color:var(--tx)}
.doc p{margin:0 0 17px;color:var(--tx-dim);font-size:16px;line-height:1.78}
.doc p:last-child{margin-bottom:0}
.doc ul,.doc ol{margin:0 0 17px;padding-left:22px;color:var(--tx-dim);font-size:16px;line-height:1.78}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--tx-faint)}
.doc strong{color:var(--tx)}
.doc pre{
  background:#0b0e12;border:1px solid var(--line);border-radius:11px;
  padding:17px 19px;overflow-x:auto;margin:0 0 20px;
  font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--tx-dim);
}
.doc pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
.doc pre .c{color:var(--tx-faint)}
.doc pre .g{color:var(--good)}
.doc table{margin-bottom:20px}
.doc td{white-space:normal;font-size:14.5px;color:var(--tx-dim)}
.doc td:first-child{white-space:nowrap;color:var(--tx);font-family:var(--mono);font-size:13px}
.doc .note{
  border-left:2px solid var(--good-dim);background:rgba(92,240,173,.045);
  border-radius:0 10px 10px 0;padding:16px 20px;margin:0 0 20px;
}
.doc .note p{margin:0;color:#c2f2dc;font-size:15px}
.doc .warn-note{border-left-color:#6b5314;background:rgba(255,201,77,.05)}
.doc .warn-note p{color:#ffe3a3}

/* ---------- extra layouts ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.grid-wide{display:grid;grid-template-columns:1.65fr 1fr;gap:18px;align-items:start}
@media (max-width:1100px){.grid-3{grid-template-columns:1fr 1fr}.grid-wide{grid-template-columns:1fr}}
@media (max-width:820px){.grid-3{grid-template-columns:1fr}}

/* ---------- dropdown (replaces <select>) ---------- */
.dd{position:relative;display:inline-block;min-width:0}
.dd-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  background:#0b0e12;border:1px solid var(--line);color:var(--tx);
  border-radius:9px;padding:10px 13px;font:13.5px var(--mono);cursor:pointer;text-align:left;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.dd-btn:hover{border-color:var(--line-2)}
.dd.open .dd-btn,.dd-btn:focus-visible{outline:none;border-color:var(--good-dim);
  box-shadow:0 0 0 3px rgba(92,240,173,.1)}
.dd-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}
.dd-caret{color:var(--tx-faint);font-size:11px;transition:transform .2s var(--ease)}
.dd.open .dd-caret{transform:rotate(180deg);color:var(--good)}
.dd-list{
  /* fixed, and re-parented to <body>, so a panel with overflow:hidden cannot
     flatten it — that bug made the menu render exactly one row tall */
  position:fixed;width:max-content;max-width:280px;z-index:70;
  background:linear-gradient(180deg,rgba(26,32,40,.99),rgba(16,20,25,.99));
  border:1px solid var(--line-2);border-radius:11px;padding:6px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.95);
  overflow-y:auto;overscroll-behavior:contain;animation:tipIn .16s var(--ease-out);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.dd-list[hidden]{display:none}
.dd-opt{
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:0;color:var(--tx-dim);cursor:pointer;text-align:left;
  padding:9px 11px;border-radius:8px;font:13.5px var(--mono);
}
.dd-list::-webkit-scrollbar{width:9px}
.dd-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:3px solid transparent;background-clip:content-box}
.dd-opt em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx-faint)}
.dd-opt:hover,.dd-opt.active{background:var(--panel-2);color:var(--tx)}
.dd-opt.on{color:var(--good);background:rgba(92,240,173,.09)}
.dd-dot{width:7px;height:7px;border-radius:2px;background:var(--good-dim);flex:0 0 auto}
.dd-opt.on .dd-dot{background:var(--good)}

/* ---------- range slider ---------- */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;
  padding:0;border:0;cursor:pointer;
}
input[type=range]:focus{outline:none;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--good) var(--pct,50%),#1e242c var(--pct,50%))}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#1e242c}
input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:var(--good)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--good);border:3px solid #0b0e12;margin-top:-6px;
  box-shadow:0 0 0 1px var(--good-dim),0 0 14px -2px var(--good-glow);
}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--good);border:3px solid #0b0e12;box-shadow:0 0 0 1px var(--good-dim)}

/* ---------- simulator controls ---------- */
.sim-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.sim-head .k{font-size:10.5px;letter-spacing:.14em;color:var(--tx-faint)}
.sim-head .v{font:600 17px var(--mono);color:var(--good)}
.sim-block{margin-bottom:18px}
.sim-block .chips{margin-top:10px}
.sim-note{font-size:12px;color:var(--tx-faint);margin-top:8px}
.sim-busy{opacity:.5;transition:opacity .2s var(--ease)}
.btn.tiny{padding:5px 10px;font-size:12px;border-radius:6px}

/* sortable headers + score pills */
th[data-sort]{cursor:pointer;transition:color .2s var(--ease)}
th[data-sort]:hover{color:var(--tx)}
th[data-sort].sorted{color:var(--good)}
.score-pill{
  display:inline-block;min-width:38px;text-align:center;font:600 13px var(--mono);
  padding:5px 9px;border-radius:7px;border:1px solid var(--line-2);color:var(--tx-dim);background:var(--panel-2);
}
.score-pill.good{color:var(--good);border-color:var(--good-dim);background:rgba(92,240,173,.09)}
.score-pill.warn{color:var(--warn);border-color:#6b5314;background:rgba(255,201,77,.08)}
.score-pill.bad{color:var(--bad);border-color:#6d2c2e;background:rgba(255,128,128,.08)}
.star{background:none;border:0;color:var(--tx-faint);cursor:pointer;font-size:15px;padding:0 4px;
  transition:color .2s var(--ease)}
.star:hover,.star.on{color:var(--warn)}
.chip .x{margin-left:8px;color:var(--tx-faint);padding:0 2px}
.chip .x:hover{color:var(--bad)}

/* score panel */
.score-big{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.score-big .n{font:700 46px var(--mono);letter-spacing:-.03em}
.score-big .d{font-size:13.5px;color:var(--tx-faint)}

/* checklist */
.check-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-bottom:12px;font-size:14px}
.check-head .dim{font-size:12px}
.check{display:grid;grid-template-columns:26px 1fr;gap:4px 10px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);opacity:0;
  animation:rowIn .5s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.check:last-child{border-bottom:0}
.check .mark{grid-row:span 2;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:700}
.check .mark.ok{background:rgba(92,240,173,.12);color:var(--good);border:1px solid var(--good-dim)}
.check .mark.no{background:rgba(255,201,77,.1);color:var(--warn);border:1px solid #6b5314}
.check .lbl{font-size:14px;font-weight:600}
.check .note{font-size:12.5px;color:var(--tx-faint);font-family:var(--mono)}

/* inspector */
.ins-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14.5px}
.ins-top .btn{margin-left:auto}
.ins-pool{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:12px;background:#0b0e12}
.ins-h{font:11px/1 var(--mono);letter-spacing:.13em;color:var(--good);margin-bottom:10px}
.ins-pool .kv{padding:7px 0;font-size:13px}
.ins-pool .v.tiny,.kv .v.tiny{font-size:11.5px;word-break:break-all}

/* compare */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.cmp-grid{grid-template-columns:1fr}}
.cmp-col h4{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:9px}
.cmp-col{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#0b0e12}
.cmp-col .kv{padding:9px 0;font-size:13.5px}
.cmp-col .kv .v{white-space:nowrap}
.cmp-grid{gap:18px}

/* share */
.snap{background:#0b0e12;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--tx-dim);
  white-space:pre-wrap;word-break:break-all;margin:0;overflow-x:auto}

/* trade feed */
.feed-row{display:grid;grid-template-columns:60px 1fr auto auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px;opacity:0;
  animation:rowIn .5s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
.feed-row:last-child{border-bottom:0}
.feed-row .side{font:700 11px var(--mono);letter-spacing:.1em;padding:4px 0;text-align:center;
  border-radius:5px;border:1px solid var(--line-2)}
.feed-row .side.good{color:var(--good);border-color:var(--good-dim);background:rgba(92,240,173,.08)}
.feed-row .side.bad{color:var(--bad);border-color:#6d2c2e;background:rgba(255,128,128,.08)}

/* command palette + sheets */
.palette,.sheet{position:fixed;inset:0;z-index:90;background:rgba(4,6,9,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:14vh 20px 20px;
  animation:fadeIn .2s var(--ease-out)}
.sheet{align-items:center;padding:20px}
/* an author `display` beats the user-agent's [hidden] rule, so these overlays
   would sit permanently on top of the page without this line */
.palette[hidden],.sheet[hidden]{display:none}
.pal-box,.sheet-box{
  width:min(620px,100%);background:linear-gradient(180deg,rgba(26,32,40,.99),rgba(15,19,24,.99));
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 100px -40px rgba(0,0,0,1);animation:tipIn .28s var(--ease-out)}
.sheet-box{padding:22px 24px}
#pal-input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;padding:18px 20px;font-size:16px}
#pal-input:focus{box-shadow:none;border-color:var(--good-dim)}
#pal-list{max-height:46vh;overflow-y:auto;padding:8px}
.pal-row{display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:11px 14px;border-radius:9px;cursor:pointer;font-size:14.5px}
.pal-row.on{background:rgba(92,240,173,.1);color:var(--good)}
.pal-foot{padding:11px 20px;border-top:1px solid var(--line);font:11.5px var(--mono);
  color:var(--tx-faint);letter-spacing:.06em}

/* ---------- guided tour ---------- */
.tour-hole{
  position:fixed;z-index:80;pointer-events:none;border-radius:16px;
  border:1px solid var(--good);box-shadow:0 0 0 9999px rgba(4,6,9,.8), 0 0 40px -6px var(--good-glow);
  transition:top .5s var(--ease-out),left .5s var(--ease-out),
             width .5s var(--ease-out),height .5s var(--ease-out);
}
.tour-tip{
  position:fixed;z-index:82;width:min(430px,calc(100vw - 36px));
  background:linear-gradient(180deg,rgba(26,32,40,.99),rgba(15,19,24,.99));
  border:1px solid var(--line-2);border-radius:15px;padding:20px 22px 16px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,1);
  transition:top .5s var(--ease-out),left .5s var(--ease-out);
  animation:tipIn .4s var(--ease-out);
}
@keyframes tipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour-tip .count{font:11px/1 var(--mono);letter-spacing:.16em;color:var(--good);margin-bottom:11px;display:block}
.tour-tip h4{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.015em}
.tour-tip p{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--tx-dim)}
.tour-tip .bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:14px}
.tour-tip .bar i{display:block;height:100%;background:var(--good);width:0;border-radius:2px}
.tour-tip .bar i.run{animation:tourStep var(--dur,3800ms) linear forwards}
@keyframes tourStep{from{width:0}to{width:100%}}
.tour-tip .acts{display:flex;gap:9px;align-items:center}
.tour-tip .acts .sp{margin-left:auto}
.tour-tip button{
  background:var(--panel-2);border:1px solid var(--line);color:var(--tx-dim);
  padding:9px 15px;border-radius:8px;font:500 13px var(--sans);cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.tour-tip button:hover{color:var(--tx);border-color:var(--line-2)}
.tour-tip button.go{background:linear-gradient(180deg,rgba(92,240,173,.18),rgba(92,240,173,.07));
  border-color:var(--good-dim);color:var(--good)}
.tour-tip button.skip{background:transparent;border-color:transparent;color:var(--tx-faint);padding-left:4px}
.tour-tip button.skip:hover{color:var(--tx-dim)}

/* ---------- footer / toast ---------- */
footer{margin-top:86px;padding:32px 0 24px;border-top:1px solid var(--line);
  color:var(--tx-faint);font-size:13.5px;line-height:1.75}
footer p{margin:0 0 10px}
footer strong{color:var(--tx-dim)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:#1a2029;border:1px solid var(--line-2);color:var(--tx);
  padding:14px 20px;border-radius:11px;font-size:14px;z-index:60;
  box-shadow:0 16px 44px rgba(0,0,0,.6);animation:toastIn .34s var(--ease-out)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
a.brand{text-decoration:none;color:inherit;cursor:pointer}
a.brand:hover{text-decoration:none}
a.brand:hover .brand-name{color:var(--good)}
a.brand .brand-name{transition:color .2s var(--ease)}