0xacfba7ce…4082·#25,751,058·view on Etherscan
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>zSwap</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23000'/%3E%3CclipPath id='frame'%3E%3Crect width='400' height='400'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23frame)'%3E%3Cpath d='M-60-20L460-20L460 90L80 310L460 310L460 420L-60 420L-60 310L320 90L-60 90Z' fill='white'/%3E%3C/g%3E%3C/svg%3E" type="image/svg+xml">
<meta name="theme-color" id="tc" content="#fafafa">
<style>:root{color-scheme:light;--b:#fafafa;--c:#fff;--p:#f6f6f6;--f:#000;--m:#6b6b6b;--n:#666;--e:#ddd;--k:#000;--kf:#fff;--kh:#333;--fh:#ebebeb;--e2:#ececec;--w:#c33;--s:0 1px 3px #0000000a,0 8px 24px #0000000f}
.d{color-scheme:dark;--b:#101010;--c:#181818;--p:#242424;--f:#eee;--m:#999;--n:#999;--e:#3d3d3d;--k:#fff;--kf:#000;--kh:#ddd;--fh:#303030;--e2:#2c2c2c;--w:#e57373;--s:0 1px 2px #0000004d,0 12px 32px #00000052}
:focus-visible{outline:2px solid var(--f);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.flip:hover{transform:none}}
body{background:var(--b);color:var(--f);font-family:system-ui,sans-serif;min-height:100dvh;margin:0;padding:1em .85em;display:flex;flex-direction:column;box-sizing:border-box}
.card{border:1px solid var(--e);border-radius:.5em;padding:.9em;background:var(--c);max-width:22em;width:100%;margin:auto;box-shadow:var(--s);box-sizing:border-box}
#addr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#addr.on{cursor:pointer}
#addr.on:hover{color:var(--f);text-decoration:line-through}
#logo{position:fixed;top:.85em;left:.85em;width:1.75em;height:1.75em;
pointer-events:none;z-index:1}
#logo rect{fill:#000}
#logo path{fill:#fff}
@media(max-width:32em){#logo{display:none}}
.meta{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto auto;align-items:center;gap:.4em;font-size:.85em;color:var(--n);margin-bottom:.75em}
#slipL{display:inline-flex;align-items:baseline;gap:.15em;font-size:.72em;color:var(--m);
letter-spacing:.04em;white-space:nowrap;margin-right:.15em}
.meta input{width:3em;font-size:.9em;padding:.15em .1em;border:0;border-bottom:1px solid var(--e2);transition:border-color .15s;border-radius:0;background:transparent;text-align:right;outline:0;color:var(--f);-moz-appearance:textfield}
.meta input::-webkit-outer-spin-button,.meta input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#slip{font-size:1.2em;width:2.4em;font-weight:600;font-variant-numeric:tabular-nums}
#th,#lk,#lq,#ln{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:.35em;background:transparent;cursor:pointer;color:var(--m);opacity:.8;width:1.8em;height:1.8em;line-height:1;transition:color .15s,opacity .15s,background .15s}
#th:hover,#lk:hover,#lq:hover,#ln:hover,#lq.on,#ln.on{opacity:1}
#th:hover,#lk:hover,#lq:hover,#ln:hover{background:var(--p);color:var(--f)}
.meta input:hover{border-bottom-color:var(--m)}
.meta input:focus{border-bottom-color:currentcolor}
.panel{background:var(--p);border:1px solid transparent;border-radius:.5em;padding:.82em .85em;margin:.32em 0;transition:border-color .15s}
.panel:hover,.dly:hover,.rcpt:hover,.lqin:hover{border-color:var(--e)}
.panel:focus-within,.dly:focus-within,.rcpt:focus-within,.lqin:focus-within{border-color:var(--f)}
.panel small{color:var(--m);font-size:.8em}
.hdr small{text-transform:uppercase;letter-spacing:.08em;font-size:.7em}
.row{display:flex;gap:.4em;align-items:center;margin-top:.35em}
.panel input{font-size:1.65em;font-weight:500;letter-spacing:-.02em;border:0;background:transparent;color:var(--f);outline:none;padding:0;flex:1;min-width:0;width:100%;font-variant-numeric:tabular-nums;transition:font-size .1s}
.panel input::placeholder{color:var(--m);opacity:.32}
.pill{display:inline-flex;align-items:center;gap:.4em;cursor:pointer;transition:opacity .15s}
.pill:hover,.pill:focus-within{opacity:.6}
.panel select,.dly select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 0 center;padding:0 .85em 0 0;max-width:8em;font-size:.9em;font-weight:600;color:var(--f);letter-spacing:.02em;cursor:pointer;text-overflow:ellipsis}
.panel select:focus{outline:0}
svg{vertical-align:middle;flex-shrink:0}
.flip{display:flex;align-items:center;justify-content:center;margin:-.62em auto;width:2em;height:2em;border-radius:50%;border:3px solid var(--c);background:var(--c);cursor:pointer;color:var(--m);padding:0;box-shadow:0 1px 2px #0000000f;transition:background .25s,color .25s,transform .25s}
.flip:hover{background:var(--fh);color:var(--f);transform:rotate(180deg)}
.primary{width:100%;box-sizing:border-box;border:1px solid transparent;min-height:3.1em;padding:.9em;overflow-wrap:anywhere;line-height:1.3;font-size:1em;border-radius:.5em;background:var(--k);color:var(--kf);cursor:pointer;margin-top:.75em;font-weight:600;text-transform:uppercase;letter-spacing:.08em;transition:background .15s,border-color .15s}
.primary:hover:not(:disabled){background:var(--kh)}
.primary:active:not(:disabled),.lqbtn:active:not(:disabled),.o button:active:not(:disabled),.p button:active:not(:disabled),.tabs button:active,.chtog:active,.bkc:active,.lnbtn:active{transform:translateY(1px)}
.primary:disabled{background:var(--p);border-color:transparent;color:var(--m);cursor:not-allowed}
.rcpt{width:100%;box-sizing:border-box;margin-top:.6em;padding:.66em .85em;border:1px solid transparent;border-radius:.5em;background:var(--p);transition:border-color .15s;color:var(--f);font-size:.75em;outline:0;font-family:inherit}
#lq.on,#ln.on{background:var(--k);color:var(--kf)}
.lqrow{padding:.62em .7em;background:var(--p);border:1px solid transparent;border-radius:.5em;margin:.35em 0}
.lqrow.out{opacity:.55}
.lqband{display:flex;align-items:center;gap:.4em;font-size:.82em}
.lqfee{color:var(--m);font-size:.72em}
.lqtag{font-size:.62em;padding:.1em .4em;border-radius:.35em;border:1px solid var(--e);color:var(--m)}
.lqmeta{font-size:.7em;color:var(--m);margin-top:.25em;display:flex;align-items:center;gap:.4em}
.lqmeta>.lqbtn,.lqmine>.lqbtn{margin-left:auto;min-width:7em}
.lqmine{font-size:.7em;margin-top:.25em;display:flex;align-items:center;gap:.4em}
.lqempty{padding:.9em .7em;font-size:.75em;color:var(--m);text-align:center}
.lqnewtog{width:100%;margin-top:.55em}
.lqnew{margin-top:.5em;display:flex;flex-direction:column;gap:.35em;text-align:left}
.lqnew .dly{margin-top:.4em;gap:.6em}
.lqnew .dly>select{flex:1;min-width:0;max-width:none;text-align:right;text-align-last:right}
.lqnew .dly .r{display:flex;gap:.4em;align-items:center}
.lqnew .dly .r input{width:6.5em}
.lqout{font-size:.72em;color:var(--m);line-height:1.55;min-height:1.1em}
.lqbar{position:relative;height:3px;border-radius:2px;background:var(--e);margin:.45em 0 .3em}
.lqbar>i{position:absolute;top:-2.5px;width:3px;height:8px;border-radius:1px;background:var(--f);
left:var(--at,50%);transform:translateX(-1.5px)}
.lqbar.out>i{background:var(--m)}
.lqbar>b{position:absolute;top:0;height:3px;border-radius:2px;background:var(--m);opacity:.45;
left:0;right:0}
.lqnew .primary{margin-top:.5em;min-height:2.6em;font-size:.85em}
#listNote{max-width:22em;margin:.4em auto 0;font-size:11px;opacity:.75;text-align:center}
.lqbtn{font-size:.9em;padding:.3em .7em;border-radius:.5em;cursor:pointer;border:1px solid var(--e);background:transparent;color:var(--f);font-family:inherit;font-weight:600;
white-space:nowrap;flex:0 0 auto;text-align:center;transition:background .15s,color .15s,border-color .15s}
.lqbtn:hover:not(:disabled),.lqbtn:focus-visible:not(:disabled){background:var(--k);color:var(--kf);border-color:var(--k)}
.lqbtn:disabled{opacity:.4;cursor:not-allowed}
.lqadd{margin-top:.45em;display:flex;flex-direction:column;gap:.35em}
.lqin{width:100%;box-sizing:border-box;padding:.5em .65em;font:inherit;font-size:.75em;border:1px solid transparent;border-radius:.5em;background:var(--p);transition:border-color .15s;color:var(--f);outline:0}
.lqzap{display:flex;align-items:center;gap:.45em;font-size:.7em;color:var(--m);cursor:pointer;margin-bottom:.1em}
.lqzap input{margin:0;cursor:pointer;accent-color:var(--f)}
.lqpv{font-size:.7em;opacity:.7;min-height:1.2em;line-height:1.5}
.lqadd .lqbtn{margin-left:0;align-self:stretch;font-size:.75em;padding:.5em .8em}
.rcpt.bad{border-color:var(--w)}
#rcvEl{display:block;font-size:.7em;color:var(--m);margin-top:.35em;word-break:break-all;text-align:center}
#rcvEl:empty{display:none}
#stat{font-size:.8em;color:var(--n);word-break:break-all;margin-top:.75em;text-align:center}
#stat:not(:empty){margin-bottom:.5em}
#stat a{color:var(--f);text-decoration:underline}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.tabs{display:flex;gap:.18em;margin-bottom:.75em;background:var(--p);padding:.18em;border-radius:.5em}
.tabs button{flex:1;padding:.5em;font-size:.75em;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:0;border-radius:.35em;background:transparent;color:var(--m);cursor:pointer;transition:background .15s,color .15s}
.tabs button.on{background:var(--k);color:var(--kf)}
.tabs button:hover:not(.on),.tabs button:focus-visible:not(.on){background:var(--fh);color:var(--f)}
.tabs button.on:hover,.tabs button.on:focus-visible{background:var(--kh)}
.hide{display:none!important}
#book{margin-top:.4em;max-height:17em;overflow-y:auto;overscroll-behavior:contain}
#book:empty{display:none}
#book h6{font-size:.7em;text-transform:uppercase;letter-spacing:.08em;color:var(--m);margin:.6em 0 .3em;font-weight:600;display:flex;justify-content:space-between}
.o{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:.5em;padding:.5em .7em;background:var(--p);border-radius:.5em;margin-bottom:.3em;font-size:.75em}
.o .l{display:flex;align-items:center;gap:.45em;min-width:0;flex:1 1 auto}
.o .l>span{min-width:0;flex:1 1 auto}
.o svg{flex-shrink:0}
.o svg+svg{margin-left:-.5em}
.o b{font-weight:600;font-variant-numeric:tabular-nums;display:block}
.o i{font-style:normal;color:var(--m);display:block;font-size:.9em;overflow-wrap:break-word}
.o i a{word-break:break-all}
.o a{color:var(--m)}
.o button{border:1px solid var(--e);border-radius:.5em;padding:.35em .7em;font-size:.95em;font-weight:600;background:transparent;color:var(--f);cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s,border-color .15s}
.o button:hover:not(:disabled),.o button:focus-visible:not(:disabled){background:var(--k);color:var(--kf);border-color:var(--k)}
#foot{display:flex;justify-content:center;gap:.5em;flex-wrap:wrap;margin-top:1.1em;font-size:.68em;color:var(--m);letter-spacing:.03em}
#foot span:empty{display:none}
#foot a{color:var(--m);text-decoration:none;border-bottom:1px solid var(--e)}
#foot a:hover{color:var(--f)}
.o button:disabled{background:transparent;border-color:transparent;color:var(--m);cursor:default;font-weight:400}
.bkf{display:flex;flex-wrap:wrap;gap:.3em;margin:.35em 0 .45em}
.bkc{font-size:.68em;padding:.35em .6em;border-radius:.35em;border:0;
background:transparent;color:var(--m);cursor:pointer;font-family:inherit;font-weight:600;
white-space:nowrap;transition:background .15s,color .15s}
.bkc:hover:not(.on),.bkc:focus-visible:not(.on){color:var(--f);background:var(--fh)}
.bkc.on{background:var(--k);color:var(--kf)}
.bkc.on:hover{background:var(--kh)}
.ow{margin-bottom:.3em}
.ow .o{margin-bottom:0}
.o.ins{cursor:pointer}
.o.ins:hover{background:var(--fh)}
.ic:empty{display:none}
.ic{padding:.5em .7em;background:var(--p);border:0;border-top:1px solid var(--e2);border-radius:0 0 .5em .5em;font-size:.72em;color:var(--n)}
.ic img{display:block;width:100%;max-width:15em;margin:.5em auto 0;border-radius:.35em}
.ic dl{display:grid;grid-template-columns:auto 1fr;gap:.15em .6em;margin:0}
.ic dt{color:var(--m)}
.ic dd{margin:0;color:var(--f);font-variant-numeric:tabular-nums;text-align:right}
.tg{display:inline-block;font-size:.85em;padding:.05em .35em;border-radius:.35em;background:var(--e2);color:var(--n);margin-left:.3em}
.tg.w{background:transparent;border:0;color:var(--w);font-weight:600;
text-transform:uppercase;font-size:.62em;letter-spacing:.1em;padding:0;
vertical-align:.1em;line-height:1;text-decoration:none;margin-left:.5em}
.o a.tg.w{color:var(--w)}
.dly{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:.75em;color:var(--n);margin-top:.55em;padding:.55em .8em;background:var(--p);border:1px solid transparent;border-radius:.5em;transition:border-color .15s}
.dly select{font-size:1em}
#lnArtNote{color:var(--n);font-variant-numeric:tabular-nums}
#lnArtNote.set{color:var(--f)}
.lnbtn{font:inherit;font-size:1em;color:var(--f);background:transparent;border:1px solid var(--e);border-radius:.35em;padding:.2em .6em;cursor:pointer}
.lnbtn:hover{background:var(--e)}
#lnArtRow{gap:.6em}
#lnArtRow>span{display:flex;align-items:center;gap:.6em}
#lnPrev{width:1.6em;height:1.6em;border-radius:.35em;object-fit:cover;display:none}
#lnPrev.set{display:block}
.lnon #chTog,.lnon #chBox,.lnon #bkTog,.lnon #book,.lnon #pos{display:none!important}
/* DOCS. The page already explains itself - 21 `title` tooltips, ~2.7 KB of it -
and every word is unreachable on a phone, because there is no hover. This is
the same explanation in a place a thumb can get to. Native <details> so it
costs no script and collapses to a scannable list of headings. */
.docs{margin-top:.5em}
.docs details{border-top:1px solid var(--e)}
.docs details:last-child{border-bottom:1px solid var(--e)}
.docs summary{cursor:pointer;list-style:none;padding:.7em .2em;font-size:.78em;font-weight:600;
letter-spacing:.02em;color:var(--f);display:flex;justify-content:space-between;align-items:center}
.docs summary::-webkit-details-marker{display:none}
.docs summary::after{content:"+";color:var(--m);font-weight:400}
.docs details[open] summary::after{content:"\2013"}
.docs p{margin:0 0 .7em;padding:0 .2em;font-size:.72em;line-height:1.6;color:var(--n)}
.docs b{color:var(--f);font-weight:600}
.docs em{font-style:normal;color:var(--m)}
.lngap{font-size:.6em;text-transform:uppercase;letter-spacing:.1em;color:var(--m);margin:.9em .2em .1em}
.lnhdr{margin-bottom:.2em}
#lnSub{color:var(--m);text-transform:none;letter-spacing:0}
#lnNote,#floorNote{display:block;font-size:.7em;line-height:1.45;color:var(--m);text-align:center;text-wrap:balance;margin:.55em .2em 0}
#lnNote:empty,#floorNote:empty{display:none}
.lnu{display:flex;align-items:baseline;gap:.3em;color:var(--m);flex:0 1 auto;min-width:0}
.lnu input{width:7em;flex:0 1 7em;min-width:0}
.tipr{display:flex;align-items:center;gap:.5em}
.tipr small{color:var(--m);font-size:.95em}
.dly input{width:9em;flex:0 1 9em;min-width:0;border:0;border-bottom:1px solid var(--e2);transition:border-color .15s;background:transparent;color:var(--f);text-align:right;outline:0;font:inherit;font-variant-numeric:tabular-nums}
.dly input[type=checkbox]{width:auto;border:0;cursor:pointer;accent-color:var(--f)}
.dly input:hover{border-bottom-color:var(--e)}
.dly input:focus{border-bottom-color:var(--f)}
#pos{margin-top:.4em}
#pos:empty{display:none}
.ph{margin:.9em 0 .45em;font-size:.9em;color:var(--f);font-weight:700}
.p{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5em;padding:.55em .7em;border:0;background:var(--p);border-radius:.5em;margin-bottom:.35em;font-size:.75em}
.p span{flex:1;min-width:8em}
.p b{display:block;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-word}
.p i{font-style:normal;color:var(--m);display:block;font-size:.9em}
.p button{border:0;border-radius:.35em;padding:.4em .7em;font-size:.95em;font-weight:600;background:var(--k);color:var(--kf);cursor:pointer;margin-left:auto}
.p button:hover:not(:disabled),.p button:focus-visible:not(:disabled){background:var(--kh)}
.p button:disabled{background:transparent;color:var(--m);cursor:default;font-weight:400}
#rate{text-wrap:balance}
#bal,#bal1,#rate{display:block;font-size:.75em;line-height:1.35;margin-top:.5em;text-align:right}
#bal:empty,#bal1:empty,#rate:empty{display:none}
#bal a,#bal1 a{color:var(--f);cursor:pointer;text-decoration:underline;font-weight:600}
.meta input.warn{color:var(--w);border-bottom-color:var(--w)}
#th:focus-visible,#lk:focus-visible,#lq:focus-visible,#ln:focus-visible{background:var(--p);color:var(--f)}
.chtog{width:100%;margin-top:.5em;padding:.5em;border:0;border-radius:.5em;background:transparent;color:var(--m);cursor:pointer;font:inherit;font-size:.7em;font-weight:600;text-transform:uppercase;letter-spacing:.08em;transition:color .15s,background .15s}
.chtog:hover{color:var(--f);background:var(--p)}
.chtog span{display:inline-block;transition:transform .2s}
.chtog[aria-expanded=true] span{transform:rotate(180deg)}
#chBox{margin-top:.4em}
.chtf{display:flex;gap:.18em;background:var(--p);padding:.18em;border-radius:.35em;margin-bottom:.4em}
.chtf button{flex:1;padding:.35em;font:inherit;font-size:.65em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border:0;border-radius:.35em;background:transparent;color:var(--m);cursor:pointer}
.chtf button.on{background:var(--k);color:var(--kf)}
.chtf button:disabled{opacity:.35;cursor:default}
.chtf .chk{flex:0 0 auto;padding:.35em .6em;border-left:1px solid var(--e);border-radius:0 .35em .35em 0;margin-left:.15em}
.chtf .chk:hover{color:var(--f)}
#chArt{touch-action:pan-y;position:relative;border:1px solid transparent;border-radius:.5em;overflow:hidden;background:var(--p)}
#chArt svg{display:block;width:100%;height:auto}
#chArt .hd{position:absolute;top:.4em;left:.55em;font-size:.7em;color:var(--m);font-variant-numeric:tabular-nums;pointer-events:none}
#chArt .hd b{color:var(--f);font-size:1.25em;font-weight:600}
#chArt .hd .ohlc{display:block;font-size:.9em;opacity:.85}
#chArt .msg{padding:2.2em .8em;text-align:center;font-size:.72em;color:var(--m);line-height:1.6}
#chNote{display:block;font-size:.65em;color:var(--m);margin-top:.35em;text-align:right;font-variant-numeric:tabular-nums}
.panel select.rich{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tkb{display:none;align-items:center;gap:.25em;border:0;background:transparent;padding:0;
font:inherit;font-size:.9em;font-weight:600;letter-spacing:.02em;color:var(--f);cursor:pointer}
.tkb.on{display:inline-flex}
.tkbc{font-size:.7em;color:var(--m)}
.tkp{position:absolute;z-index:40;width:min(20em,calc(100vw - 2em));max-height:min(32em,calc(100vh - 5em));
display:flex;flex-direction:column;background:var(--c);border:1px solid var(--e);
border-radius:.5em;box-shadow:0 4px 12px #0000001f,0 16px 40px #00000024;overflow:hidden}
#tkFind{border:0;border-bottom:1px solid var(--e);background:transparent;color:var(--f);
font:inherit;font-size:.8em;padding:.7em .8em;outline:0;flex:none}
#tkList{overflow-y:auto;overscroll-behavior:contain}
.tkg{padding:.55em .8em .25em;font-size:.62em;letter-spacing:.09em;text-transform:uppercase;color:var(--m)}
.tkr{display:flex;align-items:flex-start;gap:.55em;width:100%;box-sizing:border-box;
padding:.5em .8em;border:0;background:transparent;color:var(--f);font:inherit;
text-align:left;cursor:pointer}
.tkr:hover,.tkr.cur{background:var(--fh)}
.tkr[aria-disabled="true"]{opacity:.5;cursor:default}
.tkr[aria-disabled="true"]:hover{background:transparent}
.tkr img,.tkr svg{flex:none;border-radius:50%;margin-top:.1em}
.tki{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.tkt{min-width:0;flex:1}
.tks{display:flex;align-items:baseline;gap:.45em}
.tks b{font-size:.85em;font-weight:600}
.tkn{font-size:.7em;color:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkd{font-size:.66em;color:var(--m);line-height:1.45;margin-top:.15em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tkmark{flex:none;font-size:.75em;color:var(--m)}
.tkempty{padding:1.4em .8em;text-align:center;font-size:.72em;color:var(--m)}
@media(pointer:coarse){#th,#lk,#lq,#ln{width:2.4em;height:2.4em}
body:has(.tkp:not(.hide))::before{content:"";position:fixed;inset:0;z-index:39;
pointer-events:none;background:#0000008c}
.tkp{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;
max-height:82vh;border-radius:.75em .75em 0 0;box-shadow:0 -6px 32px #00000047;
padding-bottom:env(safe-area-inset-bottom,0)}
.tkp::before{content:"";flex:none;width:2.2em;height:.25em;border-radius:.2em;
background:var(--e);margin:.5em auto .1em}
.tkd{-webkit-line-clamp:1}
.tkr{padding:.75em .9em}
#tkFind{padding:.85em .9em;font-size:16px}.rcpt,.meta input,.dly input,.lqin{font-size:16px}.lnbtn{padding:.4em .8em}.p button,.tabs button,.o button,.lqbtn{padding:.6em .8em}.chtf button{padding:.5em}}</style>
<script>const H=document.documentElement;let LS;try{LS=localStorage}catch{LS={}}if(LS.t?LS.t=='d':matchMedia('(prefers-color-scheme:dark)').matches)H.className='d'</script>
<svg id="logo" viewBox="0 0 400 400" aria-hidden="true"><clipPath id="lgf"><rect width="400" height="400"/></clipPath><g clip-path="url(#lgf)"><rect width="400" height="400"/><path d="M-60-20L460-20L460 90L80 310L460 310L460 420L-60 420L-60 310L320 90L-60 90Z"/></g></svg>
<div class="card">
<div class="meta"><span id="addr">Not connected</span><label id="slipL">Slippage <input id="slip" type="number" value="0.5" min="0.01" max="10" step="0.1">%</label><button id="lq" title="Liquidity for this pair" aria-label="Toggle liquidity mode" aria-pressed="false"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.2c3.6 4 6 7.2 6 10.1a6 6 0 0 1-12 0c0-2.9 2.4-6.1 6-10.1z"/></svg></button><button id="ln" title="Launch a coin" aria-label="Toggle launch mode" aria-pressed="false"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/></svg></button><button id="lk" title="Copy shareable link" aria-label="Copy shareable link"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2.5"/><path d="M5.5 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v.5"/></svg></button><button id="th" title="Toggle theme" aria-label="Toggle theme"></button></div>
<div class="tabs" role="tablist"><button id="tabSwap" class="on" role="tab" aria-selected="true">Swap</button><button id="tabSend" role="tab" aria-selected="false">Send</button><button id="tabBook" role="tab" aria-selected="false">Orders</button></div>
<div class="panel"><div class="hdr"><small id="payL">You pay</small><span class="pill"><span id="fromIcon"></span><select id="fromSel"></select><button type="button" class="tkb" id="fromPick" aria-haspopup="listbox" aria-expanded="false"><span class="tkbs"></span><span class="tkbc">▾</span></button></span></div><div class="row" id="amtRow"><input id="amt" type="text" inputmode="decimal" placeholder="0.0" aria-label="Amount to pay" autocomplete="off" spellcheck="false"></div><small id="bal"></small></div>
<button id="flip" class="flip" title="Flip tokens" aria-label="Flip tokens"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m-5-5 5 5 5-5"/></svg></button>
<div class="panel" id="rcvPanel"><div class="hdr"><small id="rcvHdr">You receive</small><span class="pill"><span id="toIcon"></span><select id="toSel"></select><button type="button" class="tkb" id="toPick" aria-haspopup="listbox" aria-expanded="false"><span class="tkbs"></span><span class="tkbc">▾</span></button></span></div><div class="row" id="outRow"><input id="outAmt" type="text" inputmode="decimal" placeholder="0.0" aria-label="Amount to receive" autocomplete="off" spellcheck="false"></div><small id="bal1" class="hide"></small><small id="rate"></small></div>
<div id="lqPanel" class="hide"><div class="hdr"><small>Liquidity</small><small id="lqSub"></small></div><div id="lqList"></div></div>
<div id="lnPanel" class="hide