/* ===== web-style layout, copper palette ===== */
body{font:400 15px/1.6 var(--sans);background:var(--bg) radial-gradient(ellipse 60% 40% at 55% 0%,rgba(80,140,255,.08),transparent 70%) fixed}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.035em}
.num,.mono,td.num,.kp b,.stats b,.addr,.tape,.feed,.wpath,.wmeta{font-family:var(--mono)}
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.app.mini{grid-template-columns:72px minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:14px 12px;background:#070a0f;border-right:1px solid #141b26;z-index:25}
.sbrand{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px}
.brand{font-size:21px;gap:10px}
.brand canvas{width:34px;height:34px}
.brand .bw{position:relative}
.brand .bw::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--acc);border-radius:2px}
.collapse{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--bg3);color:var(--ink2);font-size:14px;line-height:1}
.snav{display:grid;gap:3px}
.snav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;border:1px solid transparent;font-size:15px}
.snav a:hover{background:var(--bg3);color:var(--ink)}
.snav a[aria-current=page]{background:#111823;border-color:#243041;color:var(--ink);font-weight:600}
.snav a[aria-current=page] svg{color:var(--acc)}
.sfeed{margin-top:auto;padding:0 8px 6px}
.sidefoot{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid #141b26;text-decoration:none;color:var(--ink2);border-radius:10px}
.sidefoot:hover{background:var(--bg3)}
.sidefoot canvas{width:30px;height:30px}
.sidefoot div{flex:1;line-height:1.25}.sidefoot b{display:block;color:var(--ink);font-size:14px}.sidefoot small{font-size:12px}
.app.mini .side{padding:14px 10px}.app.mini .bw,.app.mini .snav span,.app.mini .sidefoot div,.app.mini .sidefoot svg,.app.mini .sfeed{display:none}
.app.mini .sbrand{flex-direction:column;gap:10px}.app.mini .collapse{transform:rotate(180deg)}.app.mini .snav a{justify-content:center}
header.top{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:16px;padding:0 22px;background:rgba(5,7,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid #141b26}
.gsearch{flex:1;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border:1px solid var(--line2);background:#0a0e14;border-radius:999px;color:var(--ink3)}
.gsearch:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(213,219,228,.12)}
.gsearch input{flex:1;background:transparent;border:0;outline:none;color:var(--ink);font:14px var(--sans)}
header.top .right{display:flex;gap:8px;align-items:center}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--bg3);color:var(--ink)}
.iconbtn:hover{background:#162030}
.btn{border-radius:999px}
.btn.sm{height:38px;padding:0 18px}
.tape{border-bottom:1px solid #141b26}
.panel,.tbl,.stats,.movers,.kp,fieldset,.step,.empty,.pairbox,.drop,.callout,.docs pre{border-radius:14px}
.tbl{overflow:hidden;overflow-x:auto}
.mkts button,.idea,.addr,.inp,.tip{border-radius:10px}
textarea.inp{border-radius:12px}
.filters button,.search,.tag,.seg{border-radius:999px}
.seg{overflow:hidden}
.modal .box{border-radius:18px}
.toast{border-radius:999px}
fieldset legend{font-family:var(--sans)}
footer{border-top:1px solid #141b26;margin-top:30px}
/* home */
.heroc{text-align:center;padding:46px 0 34px}
.heroc .orb{width:148px;height:148px;max-width:none;margin:0 auto 22px;display:block}
.heroc h1{font-size:clamp(40px,5.4vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.heroc .dotp{color:var(--acc)}
.heroc p{color:var(--ink2);font-size:17px;max-width:40em;margin:20px auto 26px;line-height:1.7}
.heroc .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cards{display:grid;gap:16px;padding-bottom:40px}
.g2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.g3 > :last-child{grid-column:1/-1}}
@media (max-width:860px){.g2,.g3{grid-template-columns:1fr}.g3 > :last-child{grid-column:auto}}
.win{background:var(--bg2);border:1px solid #1d2736;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.wbar{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-bottom:1px solid var(--line);background:#0f151e}
.wbar .dots{display:flex;gap:5px}.wbar .dots i{width:9px;height:9px;border-radius:50%;background:#2a3442;display:block}
.wpath{flex:1;min-width:0;height:24px;border:1px solid var(--line2);background:#080b10;border-radius:7px;font-size:12.5px;font-weight:500;display:flex;align-items:center;padding:0 10px;color:#dfe8f3;white-space:nowrap;overflow:hidden}
.wpath::after{content:"_";color:var(--acc);animation:blink 1s steps(2) infinite}
.wmeta{font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:7px;white-space:nowrap}
.wmeta.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.wb{padding:16px;flex:1;min-width:0}
.wf{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-weight:600;font-size:14px}
.wf a{color:var(--acc);text-decoration:none}
.wf a:hover{color:var(--acc2)}
.win .tbl{border:0;border-radius:0;background:transparent}
.prompt{font:13.5px var(--mono);color:var(--ink2);margin:2px 0 12px}.prompt b{color:var(--acc);font-weight:600}
.urlbar{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);background:#080b10;border-radius:999px;padding:5px 5px 5px 16px;color:var(--ink3)}
.urlbar:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(213,219,228,.12)}
.urlbar input{flex:1;min-width:0;background:transparent;border:0;outline:none;font:14px var(--mono);color:var(--ink)}
.urlbar .btn{height:34px}
.hint{font-size:13px;color:var(--ink3);margin:12px 4px 22px}
.log a{display:flex;gap:10px;font:13.5px var(--mono);color:var(--ink2);text-decoration:none;padding:3px 0}
.log a span{color:var(--ink3);width:40px}.log a b{color:var(--ink);font-weight:600}.log a:hover b{color:var(--acc)}
.frow{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);background:var(--bg3);border-radius:12px;padding:10px 12px;text-decoration:none;margin-bottom:8px}
.frow:last-child{margin-bottom:0}
.frow:hover{border-color:#36506f}
.frow canvas{border-radius:8px}
.frow .nm{min-width:0}.frow .nm b{display:block;font-size:14.5px;font-weight:600}.frow .nm small{color:var(--ink3);font-size:12px}
.frow .pr{margin-left:auto;text-align:right;font:12.5px var(--mono);line-height:1.5}
.frow .pr b{display:block;color:var(--ink);font-weight:600}
.big{font:600 46px/1 var(--sans);letter-spacing:-.04em;margin:6px 0 4px}
.sub{font-size:13px;color:var(--ink3)}
.bars{display:grid;gap:7px;margin-top:20px}
.bars div{display:grid;grid-template-columns:62px minmax(0,1fr) 58px;gap:10px;align-items:center;font:12px var(--mono);color:var(--ink2)}
.bars i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#8a96a8,#dfe5ec)}
.bars i.dn{background:linear-gradient(90deg,#36445a,#3d4a5e)}
.bars em{font-style:normal;text-align:right}
.ctiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct{text-decoration:none;min-width:0}
.ct .im{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--bg3)}
.ct .im .cimg,.ct .im canvas{width:100%!important;height:100%!important;object-fit:cover;display:block;border:0}
.ct .age{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);border-radius:999px;padding:1px 8px;font:11.5px var(--mono)}
.ct .chip{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.66);border-radius:999px;padding:3px 9px 3px 4px;display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600}
.ct .chip canvas{width:18px!important;height:18px!important}
.ct b{display:block;margin-top:8px;font-size:14px}.ct b span{color:var(--ink3);font-weight:400}
.ct small{font:12.5px var(--mono);color:var(--ink2)}
.route{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-family:var(--mono)}
.rb{border:1px dashed var(--line2);border-radius:8px;padding:10px 12px;min-width:0}
.rb.hot{border:1px solid var(--acc);box-shadow:inset 0 0 0 1px rgba(213,219,228,.15),0 0 26px -10px rgba(150,175,210,.6)}
.rb small{display:block;font-size:10px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase}
.rb b{display:block;font-size:17px;margin:2px 0;font-weight:600}
.rb span{font-size:11px;color:var(--ink2);line-height:1.4;display:block}
.rarrow{grid-column:1/-1;text-align:center;color:var(--acc);font:12px var(--mono);letter-spacing:.3em}
.mbrand{display:none}
@media (max-width:820px){.app{display:block}.side{display:none}header.top{padding:0 12px;gap:10px}header.top .tl,#xlink{display:none}.mbrand{display:block;flex:none}.mbrand canvas{width:32px;height:32px;display:block}.gsearch{min-width:0;padding:0 12px}#wallet{padding:0 12px;font-size:13px}}

/* top flow diagram */
.flow{position:relative;aspect-ratio:1200/380;margin:30px 0 6px}
.flow > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow path{fill:none;stroke:#3a4658;stroke-width:1.4;stroke-dasharray:4 5}
.flow rect{fill:var(--acc);filter:drop-shadow(0 0 4px rgba(213,219,228,.8))}
.fgrid,.fcoin,.fc{position:absolute}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:16px;background:#0c1118;border:1px solid #243041;border-radius:14px}
.fgrid span{display:grid;place-items:center;min-width:0;min-height:0;background:#111823;border:1px solid #1d2736;border-radius:10px}
.fgrid canvas{width:70%!important;height:70%!important}
.fchip{position:absolute;transform:translateX(-50%);background:#f2f5f9;color:#05070b;font:600 12.5px var(--mono);padding:4px 10px;border-radius:6px;white-space:nowrap}
.fcoin{border-radius:18px;overflow:hidden;border:1px solid #243041;background:#111823;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.fcoin .cimg,.fcoin canvas{width:100%!important;height:100%!important;object-fit:cover;display:block;border:0}
.fcoin .fbig{display:grid;place-items:center;width:100%;height:100%}.fcoin .fbig canvas{width:66%!important;height:66%!important}
.flab{position:absolute;transform:translateX(-50%);font:13px var(--mono);color:var(--ink2);white-space:nowrap}
.fc{background:#0c1118;border:1px solid #243041;border-radius:12px;padding:1.4% 1.8%;display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
.fc b{font:600 clamp(18px,12cqw,34px)/1.1 var(--mono);letter-spacing:-.02em;color:#f2f5f9}
.fc small{font:clamp(11px,5.4cqw,14px) var(--mono);color:var(--ink2);margin-top:4px}
.fc .ft{position:absolute;top:12px;right:12px;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);background:#162030;border:1px solid #243041;border-radius:6px;padding:2px 7px}
.fc.hot{border-color:rgba(213,219,228,.55);box-shadow:0 0 0 1px rgba(213,219,228,.12) inset,0 0 30px -12px rgba(150,175,210,.6)}
@media (max-width:900px){
  .flow{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
  .flow > svg{display:none}
  .fgrid,.fcoin,.fc,.fchip,.flab{position:static;transform:none;width:auto!important;height:auto!important}
  .fgrid,.fcoin{aspect-ratio:1}.fchip,.flab{text-align:center;justify-self:center}
  .fchip{grid-row:2;grid-column:1}.flab{grid-row:2;grid-column:2;white-space:normal}
  .flow > *{min-width:0}.fgrid{padding:12px;gap:8px}
  .fc{padding:14px 16px;min-height:96px}.fc b{font-size:26px}.fc small{font-size:12.5px}
}
.paused{border:1px solid rgba(213,219,228,.35);background:rgba(213,219,228,.06);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;color:var(--ink2)}
.paused b{color:var(--ink)}.paused a{color:var(--acc)}