/* Shade: graphite at night, one warm sodium-amber accent for the light at the edge of the shade. Green only for what
   went up, red only for what went down. Space Grotesk for headlines, Inter for words, JetBrains Mono for numbers.
   No grid backgrounds, no glow. Footer pure black, square. */
:root{--bg:#0c0c0e;--panel:#141417;--tile:#1c1c20;--tile2:#24242a;--line:#232328;--line2:#33333a;--ink:#f1efe9;--dim:#a3a19b;--faint:#6b6a66;--acc:#f2b84b;--acc-ink:#1a1206;--up:#4ade80;--down:#f87171}
*{box-sizing:border-box}html,body{margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:-20% -10% auto auto;width:900px;height:900px;background:radial-gradient(closest-side,rgba(242,184,75,.10),transparent 70%);pointer-events:none;z-index:-1}
a{color:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:var(--ink);background:none;border:0;outline:none}
::selection{background:var(--acc);color:var(--acc-ink)}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--bg)}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.mono{font-family:"JetBrains Mono",monospace}.muted{color:var(--faint)}.up{color:var(--up)}.down{color:var(--down)}.acc{color:var(--acc)}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;font-weight:600;transition:transform .1s,background .15s,opacity .15s}
.btn:active{transform:scale(.98)}.btn-acc{background:var(--acc);color:var(--acc-ink)}.btn-acc:hover{background:#f6c76a}.btn-ghost{border:1px solid var(--line2)}.btn-ghost:hover{background:var(--tile)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up);display:inline-block}.dot.off{background:var(--acc)}

/* header */
.top{display:flex;align-items:center;gap:28px;height:84px}
.logo{display:flex;align-items:center;gap:10px;font:700 22px "Space Grotesk",sans-serif;text-decoration:none;letter-spacing:-.01em}.logo svg{width:32px;height:32px}
.top nav{display:flex;gap:26px;margin-left:auto;color:var(--dim);font-weight:500}.top nav a{text-decoration:none}.top nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:64px;align-items:start;padding:40px 0 90px}
.state{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);color:var(--dim);font-size:13px;font-weight:600}
h1{font:700 clamp(46px,6vw,78px)/1 "Space Grotesk",sans-serif;letter-spacing:-.035em;margin:22px 0 22px}
.lead{color:var(--dim);font-size:18px;max-width:560px;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:34px 0 28px;max-width:560px}
.stats div{background:var(--panel);padding:18px 20px}.stats small{display:block;color:var(--faint);font-size:12.5px}.stats b{font:600 26px "JetBrains Mono",monospace}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--dim)}.ticks li{padding-left:26px;position:relative}.ticks li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:6px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}

/* swap card */
.swap{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:14px;position:sticky;top:20px}
.box{background:var(--tile);border-radius:20px;padding:16px 18px;border:1px solid transparent;transition:border-color .15s}.box:focus-within{border-color:var(--line2)}
.row-top{display:flex;justify-content:space-between;color:var(--dim);font-size:13.5px;font-weight:500}
.bal{display:flex;align-items:center;gap:6px}.bal b{color:var(--ink);font-weight:500;font-family:"JetBrains Mono",monospace;font-size:13px}
.bal button{height:24px;padding:0 9px;border-radius:999px;background:var(--tile2);color:var(--acc);font-size:12px;font-weight:700}
.row-mid{display:flex;align-items:center;gap:12px;margin:10px 0 6px}
.row-mid input,.out{flex:1;min-width:0;font:500 32px "JetBrains Mono",monospace;padding:0}.row-mid input::placeholder{color:var(--faint)}
.tok{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 6px;border-radius:999px;background:var(--tile2);border:1px solid var(--line2);font-weight:700;flex:none}.tok:hover{border-color:var(--faint)}
.tok img,.tok .noimg{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--line2);display:block}
.row-bot{min-height:20px;color:var(--faint);font-size:13px}
.flip{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:-14px auto;position:relative;z-index:2;border-radius:14px;background:var(--tile2);border:4px solid var(--panel);color:var(--dim)}.flip:hover{color:var(--acc)}
.opts{display:grid;gap:10px;margin:14px 4px 4px}.opts>div{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}.lbl{color:var(--dim);font-size:13.5px;white-space:nowrap}.lbl b{color:var(--acc);font-weight:500;font-size:12.5px;margin-left:6px}
.seg{display:flex;gap:4px;background:var(--tile);border-radius:999px;padding:3px}.seg button{height:30px;padding:0 12px;border-radius:999px;color:var(--dim);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.seg button small{font:500 11px "JetBrains Mono",monospace;color:var(--faint)}.seg button.on{background:var(--tile2);color:var(--ink)}.seg button.on small{color:var(--acc)}
#speed small:empty{display:none}
.details{display:grid;gap:7px;margin:14px 6px 0;font-size:13.5px;color:var(--dim)}.details:empty{display:none}.details div{display:flex;justify-content:space-between;gap:12px}.details b{color:var(--ink);font-weight:500;text-align:right}.details .err{color:var(--down);justify-content:center}
.go{width:100%;height:56px;margin-top:14px;font-size:16px;border-radius:18px}
.done{display:none;margin-top:12px;background:var(--tile);border-radius:18px;padding:16px 18px;font-size:14px}.done.show{display:block}
.done-t{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}.done-t .ok{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--up);color:#062b14;font-size:12px}
.done-r{display:flex;justify-content:space-between;color:var(--dim);padding:3px 0}.done-r b{color:var(--ink);font-weight:500}.done-l{display:inline-block;margin-top:8px;color:var(--acc);font-weight:600}

/* sections */
h2{font:700 clamp(28px,3.4vw,40px)/1.1 "Space Grotesk",sans-serif;letter-spacing:-.025em;margin:0 0 28px}
.how{padding:30px 0 90px}
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.layers article{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px}
.ln{color:var(--acc);font:600 12px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.layers h3{font:600 22px "Space Grotesk",sans-serif;margin:12px 0 10px}.layers p{color:var(--dim);margin:0}
.vs{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.vs>div{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:16px;padding:16px 26px;border-top:1px solid var(--line);align-items:center}.vs>div:first-child{border-top:0}
.vs span{color:var(--dim)}.vs em{font-style:normal;color:var(--faint)}.vs em.acc{color:var(--ink)}.vs-h b{font:600 15px "Space Grotesk",sans-serif}.vs-h b.acc{color:var(--acc)}
.feed-sec{padding:10px 0 90px}.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px}.sec-h h2{margin-bottom:20px}
.feed{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.frow{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 70px;gap:12px;padding:15px 24px;border-top:1px solid var(--line);text-decoration:none;align-items:center}.frow:first-child{border-top:0}.frow:hover{background:var(--tile)}
.fpair{display:flex;align-items:center;gap:8px}.fpair svg{color:var(--faint)}.frow .g{color:var(--acc);font-weight:600}
.empty{padding:46px 20px;text-align:center;color:var(--faint)}
.faq{padding:10px 0 100px}.faq>*{max-width:820px;margin-left:auto;margin-right:auto}.faq h2{text-align:center}
details{border-top:1px solid var(--line);padding:18px 0}details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:600 17px "Space Grotesk",sans-serif;list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";color:var(--acc);font-size:22px;line-height:1}details[open] summary::after{content:"–"}
details p{color:var(--dim);margin:12px 0 0}
.foot{background:#000;padding:46px 0 56px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}.fcols>div{display:flex;flex-direction:column;gap:8px}.fcols b{font-size:13px;color:var(--dim)}.fcols a{text-decoration:none;color:var(--ink)}.fcols a:hover{color:var(--acc)}

/* modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:10vh 16px;z-index:50}.modal.open{display:flex}
.sheet{width:min(440px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:22px;padding:18px}
.sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sheet-h b{font:600 18px "Space Grotesk",sans-serif}.x{width:32px;height:32px;border-radius:50%;color:var(--dim)}.x:hover{background:var(--tile)}
#tsearch{width:100%;height:46px;border-radius:14px;background:var(--tile);border:1px solid var(--line2);padding:0 14px;margin-bottom:8px}#tsearch:focus{border-color:var(--acc)}
.tlist{max-height:52vh;overflow:auto}
.topt{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 8px;border-radius:14px;text-align:left}.topt:hover{background:var(--tile)}
.topt img,.topt .noimg{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--line2);display:block}
.tn,.tp{display:flex;flex-direction:column;min-width:0}.tn small,.tp small{color:var(--faint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tp{text-align:right}.tp b{font:500 14px "JetBrains Mono",monospace}.vf{font-style:normal;color:var(--acc);font-size:12px}
.wopt{width:100%;display:flex;align-items:center;gap:12px;height:54px;padding:0 12px;border-radius:14px;font-weight:600}.wopt:hover{background:var(--tile)}.wopt img{width:30px;height:30px;border-radius:8px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;background:var(--tile2);border:1px solid var(--line2);padding:12px 18px;border-radius:14px;font-weight:500;transition:.25s;z-index:60;max-width:min(560px,92vw)}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{border-color:var(--down)}

/* docs */
.doc{padding:20px 0 100px;max-width:820px}.doc h1{font-size:clamp(40px,5vw,60px)}.doc h2{margin:48px 0 14px;font-size:28px}.doc p,.doc li{color:var(--dim)}.doc code{font:13px "JetBrains Mono",monospace;background:var(--tile);padding:2px 6px;border-radius:6px;color:var(--ink)}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}.doc td,.doc th{border-top:1px solid var(--line);padding:11px 8px;text-align:left;vertical-align:top}.doc th{color:var(--faint);font-weight:600}.doc pre{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;overflow:auto;font:13px/1.6 "JetBrains Mono",monospace;color:var(--dim)}

@media(max-width:980px){.hero{grid-template-columns:minmax(0,1fr);gap:40px}.swap{position:static}.layers{grid-template-columns:1fr}.top nav{display:none}.top .btn{margin-left:auto}.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.stats{grid-template-columns:1fr 1fr 1fr}.stats div{padding:14px 12px}.stats small{font-size:11px}.swap{padding:10px}.box{padding:14px}.tok{padding:0 10px 0 5px}.vs>div{grid-template-columns:1fr;gap:4px}.vs-h{display:none!important}.frow{grid-template-columns:1fr auto;}.frow>span:nth-child(3),.frow>span:nth-child(4){display:none}.stats b{font-size:20px}.row-mid input,.out{font-size:26px}}

/* logo art, landing hero actions and live panel */
.logo-img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.top nav a.on{color:var(--ink)}
.cta{display:flex;gap:12px;margin:30px 0 30px;flex-wrap:wrap}.btn.big{height:54px;padding:0 28px;font-size:16px}
.live{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:8px 0;position:sticky;top:20px}
.live-h{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font:600 15px "Space Grotesk",sans-serif}.live-h span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);margin-right:8px;vertical-align:1px}
.live-sec{padding:18px 22px;border-top:1px solid var(--line)}.live-sec small{display:block;color:var(--faint);font-size:12.5px;margin-bottom:10px}
.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tips div{background:var(--tile);border-radius:14px;padding:12px}.tips span{display:block;color:var(--dim);font-size:12.5px}.tips b{font:500 14px "JetBrains Mono",monospace;color:var(--acc)}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats3 small{margin-bottom:4px}.stats3 b{font:600 24px "JetBrains Mono",monospace}
.addr{color:var(--ink);text-decoration:none;font-size:15px}.addr:hover{color:var(--acc)}
/* inside a swap */
.anatomy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start;padding:10px 0 90px}.anatomy .lead{margin-bottom:18px}
.an-list{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.an-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 22px;border-top:1px solid var(--line)}.an-list li:first-child{border-top:0}
.an-n{width:30px;height:30px;border-radius:50%;background:var(--tile);display:grid;place-items:center;font:500 13px "JetBrains Mono",monospace;color:var(--dim)}
.an-list b{display:block;font-weight:600}.an-list small{color:var(--faint);font-size:13px}.an-list em{font-style:normal;color:var(--faint);font-size:13px}
.an-list li.hl{background:rgba(242,184,75,.06)}.an-list li.hl .an-n{background:var(--acc);color:var(--acc-ink)}.an-list li.hl em{color:var(--acc);font-weight:600}
.cmp{padding:0 0 90px}
.safe{padding:0 0 90px}.safe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.safe-grid div{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px}.safe-grid b{font:600 18px "Space Grotesk",sans-serif}.safe-grid p{color:var(--dim);margin:10px 0 0;font-size:14.5px}
/* app page */
.app-main{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;align-items:start;padding:20px 0 90px}
.app-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.app-h{font-size:40px;margin:0}
.app-col .swap{position:static}.app-note{color:var(--faint);font-size:13px;text-align:center;margin-top:14px}
.app-feed{padding-top:58px}.app-feed .frow{grid-template-columns:1.4fr 1fr 1fr 70px}.app-feed .frow>span:nth-child(4){display:none}
@media(max-width:980px){.anatomy,.app-main{grid-template-columns:minmax(0,1fr);gap:30px}.safe-grid{grid-template-columns:1fr 1fr}.live{position:static}.app-feed{padding-top:0}}
@media(max-width:620px){.safe-grid{grid-template-columns:1fr}.tips b{font-size:12px}.stats3 b{font-size:19px}}
/* footer always at the bottom: the page is a column, main takes the free height */
body{display:flex;flex-direction:column;min-height:100vh}body>main{flex:1 0 auto}.foot{flex-shrink:0}

/* token contract plate */
.ca-plate{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 0 26px;padding:8px 8px 8px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel)}
.ca-l{color:var(--acc);font-weight:700;font-size:13px;white-space:nowrap}.ca-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:var(--ink)}
.ca-b{height:34px;padding:0 14px;border-radius:12px;background:var(--tile2);font-weight:600;font-size:13px;flex:none}.ca-b:hover{color:var(--acc)}
.app-col .ca-plate{margin:14px 0 0;max-width:none}