/*MC 2026-10-17 Shy Exchange (/exchange). Only this page loads this file. The Jupiter Plugin reads its colours from these
  variables on :root, as comma separated RGB numbers (not hex). They are the site's own: coral #ff5d73 for buttons,
  the night violet #150f2e behind it, #1f1745 for the token rows, #2b2160 for anything you tap, white text and the
  sun yellow #ffd166 for warnings. */
:root{
  --jupiter-plugin-primary:255, 93, 115;
  --jupiter-plugin-background:21, 15, 46;
  --jupiter-plugin-primaryText:255, 255, 255;
  --jupiter-plugin-warning:255, 209, 102;
  --jupiter-plugin-interactive:43, 33, 96;
  --jupiter-plugin-module:31, 23, 69;
}

/* the sky: three slow orbs, a faint grid and gold coins drifting up */
.sx-hero{position:relative;padding:90px 0 70px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#150f2e,#130d2a 70%,#150f2e)}   /* its own night: the site glow behind the top of every page stopped in a hard line under the tall swap */
.sx-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sx-orb{position:absolute;border-radius:50%;opacity:.9}
.sx-orb.a{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(255,93,115,.85),rgba(255,93,115,.25) 40%,transparent 70%);animation:sxDrift 22s ease-in-out infinite alternate}
.sx-orb.b{width:600px;height:600px;right:-200px;top:80px;background:radial-gradient(circle,rgba(139,92,246,.85),rgba(139,92,246,.25) 40%,transparent 70%);animation:sxDrift 28s ease-in-out infinite alternate-reverse}
.sx-orb.c{width:440px;height:440px;left:35%;bottom:-220px;background:radial-gradient(circle,rgba(255,159,67,.8),rgba(255,159,67,.2) 40%,transparent 70%);opacity:.6;animation:sxDrift 32s ease-in-out infinite alternate}
@keyframes sxDrift{to{transform:translate(60px,40px) scale(1.08)}}
.sx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
#sx-coins{position:absolute;inset:0;width:100%;height:100%}

/* the title and the live numbers */
.sx-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:28px}
.sx-title{display:flex;gap:20px;align-items:flex-start}
.sx-seal{flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:18px;background:linear-gradient(150deg,#ff5d73,#c42a3f);color:#fff6e6;font:900 40px/1 "Shippori Mincho B1",serif;transform:rotate(-6deg);box-shadow:0 18px 40px -14px rgba(255,93,115,.8),inset 0 0 0 3px rgba(255,240,220,.35);margin-top:6px}
.sx-seal.big{width:84px;height:84px;font-size:46px;margin:0 auto 14px}
.sx-h1{margin:6px 0 10px}
.sx-h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-lead{max-width:56ch}
.sx-ticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;opacity:.55;transition:opacity .5s}
.sx-ticks.on{opacity:1}
.sx-tick{padding:12px 14px;border-radius:16px;background:rgba(20,12,44,.62);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-width:0}
.sx-tick small{display:block;font:600 11px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sx-tick b{display:block;font:800 18px "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tick.big{grid-column:span 2;background:linear-gradient(135deg,rgba(255,93,115,.2),rgba(20,12,44,.7));border-color:rgba(255,93,115,.45)}
.sx-tick.big b{font-size:26px}
.sx-tick.wide{grid-column:span 2}
.sx-tick b.up{animation:sxUp 1.2s}.sx-tick b.down{animation:sxDown 1.2s}
@keyframes sxUp{0%{color:#2ef0b0}100%{color:#fff}}@keyframes sxDown{0%{color:#ff5d73}100%{color:#fff}}
.sx-chg{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font:700 12px "Inter",sans-serif;background:rgba(255,255,255,.08)}
.sx-chg.up{color:#2ef0b0;background:rgba(46,240,176,.12)}.sx-chg.down{color:#ff8a9a;background:rgba(255,93,115,.14)}
.sx-bs{height:8px;border-radius:99px;background:rgba(255,93,115,.55);overflow:hidden;margin:6px 0 6px}
.sx-bs i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#2ef0b0,#4cc9f0);border-radius:99px;transition:width .8s var(--ease)}
.sx-bsn{font-size:12.5px;color:var(--muted)}.sx-bsn b{display:inline;font-size:13px;color:#fff}

/* the swap beside the chart; stacked on phones with the swap first */
.sx-main{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:24px;align-items:start}
.sx-swapcol{display:grid;gap:12px;min-width:0}
.sx-routes{display:flex;gap:8px;flex-wrap:wrap}
.sx-route{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(20,12,44,.6);color:#fff;font:700 13px "Inter",sans-serif;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.sx-route:hover{border-color:rgba(255,93,115,.6)}.sx-route:active{transform:scale(.97)}
.sx-route.on{background:linear-gradient(120deg,rgba(255,93,115,.3),rgba(255,159,67,.22));border-color:rgba(255,93,115,.8)}
.sx-route i{font-style:normal;color:var(--muted)}
.sx-tk{display:inline-flex;align-items:center;gap:5px}
.sx-tk::before{content:"";width:16px;height:16px;border-radius:50%;background:#888}
.sx-tk.sol::before{background:linear-gradient(135deg,#9945ff,#14f195)}.sx-tk.usdc::before{background:#2775ca}.sx-tk.shy::before{background:linear-gradient(135deg,#ff5d73,#ff9f43)}
.sx-swap{position:relative;border-radius:26px;padding:14px;background:linear-gradient(160deg,rgba(43,33,96,.85),rgba(21,15,46,.92));border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -30px rgba(255,93,115,.55),0 0 0 1px rgba(255,93,115,.08) inset;--mx:50%;--my:0%}
.sx-swap::before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:1px;background:conic-gradient(from 180deg,rgba(255,93,115,.9),rgba(139,92,246,.6),rgba(255,159,67,.9),rgba(255,93,115,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.sx-swap-glow{position:absolute;inset:0;border-radius:26px;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,93,115,.16),transparent 60%);pointer-events:none}
.sx-swap-top{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;padding:4px 6px 12px;font-size:12.5px;color:var(--muted)}
.sx-live{display:inline-flex;align-items:center;gap:7px;font:800 12px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sx-live i{width:8px;height:8px;border-radius:50%;background:#2ef0b0;box-shadow:0 0 0 0 rgba(46,240,176,.6);animation:sxPing 2s infinite}
@keyframes sxPing{70%{box-shadow:0 0 0 9px rgba(46,240,176,0)}100%{box-shadow:0 0 0 0 rgba(46,240,176,0)}}
.sx-by{text-align:end}
/* Jupiter's own box, the fallback: it needs a fixed height in integrated mode */
.sx-plugin{position:relative;height:600px;border-radius:20px;overflow:hidden;background:rgb(21,15,46)}
.sx-plugin[hidden]{display:none}
.sx-swap.plugin .sx-sides,.sx-swap.plugin .sx-rate,.sx-swap.plugin .sx-det,.sx-swap.plugin .sx-warn,.sx-swap.plugin .sx-go,.sx-swap.plugin .sx-by2,.sx-swap.plugin .sx-tools,.sx-swap.plugin .sx-slip{display:none!important}
.sx-swap.plugin-on .sx-plugin .sx-load{display:none}
.sx-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px}
.sx-load i{width:9px;height:9px;border-radius:50%;background:#ff5d73;animation:sxDot 1s infinite alternate}
.sx-load i:nth-child(2){animation-delay:.2s;background:#ff9f43}.sx-load i:nth-child(3){animation-delay:.4s;background:#ffd166}
.sx-load span{margin-left:6px}
@keyframes sxDot{to{transform:translateY(-8px);opacity:.4}}
.sx-fail{position:relative;padding:28px 18px;text-align:center;display:grid;gap:10px;justify-items:center}
.sx-fail[hidden]{display:none}
.sx-fail p{color:var(--muted);max-width:36ch}
.sx-disc{font-size:13px;line-height:1.55;color:var(--muted);padding:12px 14px;border-radius:14px;border:1px solid rgba(255,209,102,.3);background:rgba(255,209,102,.06)}
.sx-disc b{color:#ffd166}

/* Open in Phantom, for phones outside a wallet app */
.sx-open{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(120deg,rgba(171,159,242,.22),rgba(20,12,44,.7));border:1px solid rgba(171,159,242,.5)}
.sx-open[hidden]{display:none}
.sx-open-ic{flex:none;width:34px;height:34px;border-radius:10px;background:#ab9ff2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 13.5C4 8.8 7.6 5 12.2 5S20 8.4 20 12.4c0 3.7-2.6 6.6-5.1 6.6-1.3 0-1.6-1-2.3-1s-1.4 1-2.6 1C6.9 19 4 16.6 4 13.5Zm7.3-1.6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z'/%3E%3C/svg%3E") center/70% no-repeat}
.sx-open div{flex:1;min-width:0}.sx-open b{display:block;font-size:14px}.sx-open small{color:var(--muted);font-size:12.5px}

/* the chart */
.sx-chartcol{display:grid;gap:16px;min-width:0}
.sx-chart{border-radius:26px;border:1px solid var(--line);background:rgba(20,12,44,.7);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sx-chart-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sx-chart-t{display:flex;align-items:center;gap:10px;min-width:0}.sx-chart-t img{border-radius:50%}
.sx-chart-t b{display:block;font:800 16px "Bricolage Grotesque",sans-serif}.sx-chart-t small{color:var(--muted);font-size:12px}
.sx-tf{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06)}
.sx-tf button{border:0;background:none;color:var(--muted);font:700 12.5px "Inter",sans-serif;padding:6px 10px;border-radius:999px;cursor:pointer}
.sx-tf button.on{background:#ff5d73;color:#fff}
.sx-frame{position:relative;height:560px}
.sx-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s}
.sx-frame.on iframe{opacity:1}.sx-frame.on .sx-load{display:none}
.sx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sx-step{display:flex;gap:10px;padding:14px;border-radius:18px;background:rgba(20,12,44,.6);border:1px solid var(--line)}
.sx-step span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);font:800 13px "Inter",sans-serif}
.sx-step b{display:block;font-size:14px;margin-bottom:2px}.sx-step small{color:var(--muted);font-size:12.5px;line-height:1.4}

/* the contract and the links */
.sx-info{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 20px;margin-top:24px;padding:16px 18px;border-radius:22px;background:rgba(20,12,44,.7);border:1px solid var(--line)}
.sx-ca{display:grid;gap:6px;min-width:0;flex:1 1 420px}
.sx-ca small{font:600 11px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sx-ca-b{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;border:1px dashed rgba(255,209,102,.45);background:rgba(255,209,102,.06);color:#fff;cursor:pointer;text-align:start;transition:background .2s,border-color .2s}
.sx-ca-b:hover{background:rgba(255,209,102,.12)}
.sx-ca-b code{flex:1;min-width:0;font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.sx-ca-short{display:none}
.sx-ca-b em{font-style:normal;font:800 12px "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffd166}
.sx-copy{flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8V4h12v12h-4v4H4V8h4Zm2 0h6v6h2V6h-8v2Zm-4 2v8h8v-8H6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8V4h12v12h-4v4H4V8h4Zm2 0h6v6h2V6h-8v2Zm-4 2v8h8v-8H6Z'/%3E%3C/svg%3E") center/contain no-repeat;color:#ffd166}
.sx-ca-b.ok{border-color:#2ef0b0;background:rgba(46,240,176,.1)}.sx-ca-b.ok em,.sx-ca-b.ok .sx-copy{color:#2ef0b0}
.sx-links{display:flex;flex-wrap:wrap;gap:8px}
.sx-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:#fff;font:700 13px "Inter",sans-serif;text-decoration:none;transition:border-color .2s,transform .15s}
.sx-links a:hover{border-color:rgba(255,93,115,.6);transform:translateY(-1px)}
.sx-li{width:16px;height:16px;border-radius:50%}
.sx-li.solscan{background:linear-gradient(135deg,#14f195,#9945ff)}.sx-li.dex{background:#fff}.sx-li.home{background:var(--grad)}.sx-li.site{background:var(--grad-2)}

/* after a swap */
.sx-done{position:fixed;inset:0;z-index:1210;display:grid;place-items:center;padding:20px;background:rgba(8,5,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.sx-done[hidden]{display:none}.sx-done.in{opacity:1}
.sx-done-card{position:relative;width:min(460px,100%);padding:30px 24px 24px;border-radius:26px;text-align:center;background:linear-gradient(160deg,#2b2160,#150f2e);border:1px solid rgba(255,93,115,.5);box-shadow:0 30px 80px -20px rgba(255,93,115,.6);transform:translateY(16px) scale(.97);transition:transform .3s var(--ease)}
.sx-done.in .sx-done-card{transform:none}
.sx-done-card h2{font:800 28px "Bricolage Grotesque",sans-serif;margin-bottom:8px}
.sx-done-card p{color:var(--muted);margin-bottom:18px}
.sx-done-card .hero-actions{justify-content:center}
#sx-burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sx-done-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}

@media (max-width:1060px){
  .sx-head{grid-template-columns:1fr}
  .sx-main{grid-template-columns:minmax(0,1fr)}
  .sx-swapcol{max-width:520px;width:100%;margin:0 auto}
  .sx-frame{height:460px}
}
@media (max-width:640px){
  /* phones: the swap comes first; the numbers shrink to one strip you can swipe */
  .sx-head{gap:14px;margin-bottom:16px}
  .sx-lead{display:none}
  h1.display.sx-h1{font-size:40px;line-height:1.05;margin:6px 0 0}
  .sx-h1 em{display:inline}
  .sx-ticks{display:flex!important;overflow-x:auto;gap:8px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sx-ticks::-webkit-scrollbar{display:none}
  .sx-ticks .sx-tick{flex:none;padding:8px 12px}
  .sx-ticks .sx-tick.wide{display:none}
  .sx-ticks .sx-tick b{font-size:15px}.sx-ticks .sx-tick.big b{font-size:17px}
  .sx-ticks .sx-tick.big{display:flex;align-items:baseline;gap:8px}.sx-ticks .sx-tick.big small{display:none}
  .sx-chg{margin-top:0}
  .sx-open{padding:10px 12px}.sx-open small{display:none}
  /*MC 2026-10-17 the header already clears the iPhone clock; the notch inset was added a second time here, so the page
    started a third of the screen down */
  .sx-hero{padding-top:18px;padding-bottom:40px}
  .sx-head .eyebrow{font-size:10.5px;letter-spacing:.08em;padding:5px 10px}
  .sx-title{align-items:center}
  .sx-seal{margin-top:0}
  .sx-seal{width:56px;height:56px;font-size:30px;border-radius:14px}
  .sx-title{gap:14px}
  .sx-plugin{height:560px}
  .sx-swap{padding:10px;border-radius:22px}
  .sx-by{display:none}
  .sx-frame{height:380px}
  .sx-steps{grid-template-columns:1fr}
  .sx-ca-full{display:none}.sx-ca-short{display:inline}
  .sx-links a{flex:1 1 calc(50% - 8px);justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sx-orb,.sx-live i,.sx-load i{animation:none}}

/*MC 2026-10-17 our own swap: two token panels with the flip between them, the live rate, the details, one big button */
.sx-tools{display:flex;align-items:center;gap:6px}
.sx-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--muted);font:600 12px "Inter",sans-serif;cursor:pointer}
.sx-chip b{color:#fff}.sx-chip img{width:16px;height:16px;border-radius:4px}
.sx-me{color:#fff}.sx-me i{font-style:normal;color:var(--muted);margin-left:2px}
.sx-ring{position:relative;width:32px;height:32px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.sx-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.sx-ring circle{fill:none;stroke-width:2.5}.sx-ring .bg{stroke:rgba(255,255,255,.12)}.sx-ring .fg{stroke:#ff5d73;transition:stroke-dashoffset 1s linear;stroke-dashoffset:94.25}
.sx-ring span{font-size:14px;line-height:1}.sx-ring.spin span{animation:sxSpin .6s}
@keyframes sxSpin{to{transform:rotate(360deg)}}
.sx-slip{position:relative;display:grid;gap:8px;padding:12px;margin:0 0 10px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.sx-slip[hidden]{display:none}
.sx-slip>span{font:700 12px "Inter",sans-serif;color:#fff}
.sx-slip small{color:var(--muted);font-size:12px;line-height:1.45}
.sx-slip-o{display:flex;flex-wrap:wrap;gap:6px}
.sx-slip-o button{padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:#fff;font:700 12.5px "Inter",sans-serif;cursor:pointer}
.sx-slip-o button.on{background:#ff5d73;border-color:#ff5d73}
.sx-slip-c{display:inline-flex;align-items:center;gap:4px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.sx-slip-c input{width:64px;border:0;background:none;color:#fff;font:700 13px "Inter",sans-serif;padding:7px 0;outline:none}
.sx-slip-c i{font-style:normal;color:var(--muted)}
.sx-sides{position:relative;display:grid;gap:6px}
.sx-side{position:relative;padding:14px 16px;border-radius:20px;background:rgb(31,23,69);border:1px solid rgba(255,255,255,.08);transition:border-color .2s}
.sx-side.pay:focus-within{border-color:rgba(255,93,115,.6)}
.sx-side.get{background:rgba(31,23,69,.6)}
.sx-side-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 12.5px "Inter",sans-serif;color:var(--muted);margin-bottom:8px}
.sx-bal{display:inline-flex;align-items:center;gap:6px}.sx-bal b{color:#fff;font-variant-numeric:tabular-nums}
.sx-bal button{padding:2px 8px;border-radius:999px;border:1px solid rgba(255,93,115,.5);background:rgba(255,93,115,.1);color:#ff9fae;font:700 11px "Inter",sans-serif;cursor:pointer}
.sx-bal[hidden]{display:none}
.sx-row{display:flex;align-items:center;gap:10px}
.sx-tok{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 7px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.07);color:#fff;font:800 15px "Inter",sans-serif;cursor:pointer;transition:background .2s}
.sx-tok:hover{background:rgba(255,255,255,.12)}
.sx-tok img{width:28px;height:28px;border-radius:50%;background:#2b2160;object-fit:cover}
.sx-tok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.sx-amt,.sx-out{flex:1;min-width:0;width:100%;border:0;background:none;color:#fff;font:800 30px "Bricolage Grotesque",sans-serif;text-align:end;outline:none;font-variant-numeric:tabular-nums;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-amt::placeholder{color:rgba(255,255,255,.3)}
.sx-out.zero{color:rgba(255,255,255,.3)}
.sx-out.loading{animation:sxPulse 1s infinite alternate}
@keyframes sxPulse{to{opacity:.35}}
.sx-usd{font-size:12.5px;color:var(--muted);text-align:end;margin-top:4px;min-height:1.2em;font-variant-numeric:tabular-nums}
.sx-flip{position:absolute;left:50%;top:50%;z-index:2;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:14px;border:4px solid rgb(29,22,64);background:linear-gradient(135deg,#ff5d73,#ff9f43);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -6px rgba(255,93,115,.7);transition:transform .2s}
.sx-flip:hover{transform:scale(1.06)}
.sx-flip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-flip.turn svg{animation:sxTurn .35s var(--ease)}
@keyframes sxTurn{from{transform:rotate(180deg)}}
.sx-rate{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:0 4px;font:600 13px "Inter",sans-serif;color:var(--muted)}
.sx-rate[hidden]{display:none}
.sx-det-b{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:#fff;font:700 12.5px "Inter",sans-serif;cursor:pointer}
.sx-det-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}.sx-det-b.open svg{transform:rotate(180deg)}
.sx-det{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:10px 0 0;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.sx-det[hidden]{display:none}
.sx-det div{min-width:0}.sx-det div.wide{grid-column:1/-1}
.sx-det dt{font:600 11px "Inter",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sx-det dd{margin:2px 0 0;font:700 13.5px "Inter",sans-serif;color:#fff;overflow-wrap:anywhere}
.sx-det dd.good{color:#2ef0b0}.sx-det dd.warn{color:#ffd166}.sx-det dd.bad{color:#ff8a9a}
.sx-warn{margin-top:10px;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.45;background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.35);color:#ffe3a3}
.sx-warn.bad{background:rgba(255,93,115,.12);border-color:rgba(255,93,115,.45);color:#ffb3bd}
.sx-warn[hidden]{display:none}
.sx-go{position:relative;width:100%;margin-top:12px;padding:16px;font-size:16px;border-radius:18px;overflow:hidden}
.sx-go:disabled{opacity:.55;cursor:default;filter:saturate(.6)}
.sx-go.busy{opacity:1;filter:none}
.sx-go.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);animation:sxSheen 1.2s infinite}
@keyframes sxSheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.sx-by2{margin-top:10px;text-align:center;font-size:12px;color:var(--muted)}
.sx-alt{justify-self:center;border:0;background:none;color:var(--muted);font:600 12.5px "Inter",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.sx-alt[hidden]{display:none}

/* the token and wallet pickers: a sheet from the bottom on phones, a centered card on bigger screens */
html.sx-lock{overflow:hidden}
.sx-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(8,5,20,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.sx-modal[hidden]{display:none}.sx-modal.in{opacity:1}
.sx-sheet{width:min(460px,100%);max-height:min(680px,calc(100vh - 40px));display:flex;flex-direction:column;border-radius:24px;background:linear-gradient(160deg,#2b2160,#150f2e);border:1px solid var(--line-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);transform:translateY(12px);transition:transform .25s var(--ease);overflow:hidden}
.sx-modal.in .sx-sheet{transform:none}
.sx-sheet.small{max-height:none}
.sx-sheet-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 10px}
.sx-sheet-h b{font:800 18px "Bricolage Grotesque",sans-serif}
.sx-x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
.sx-search{display:flex;align-items:center;gap:8px;margin:0 18px 10px;padding:0 14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line-2)}
.sx-search:focus-within{border-color:rgba(255,93,115,.6)}
.sx-search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;flex:none}
.sx-search input{flex:1;min-width:0;border:0;background:none;color:#fff;font:500 16px "Inter",sans-serif;padding:12px 0;outline:none}
.sx-pop{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 10px}
.sx-pop button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:#fff;font:700 12.5px "Inter",sans-serif;cursor:pointer}
.sx-pop img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.sx-list{flex:1;min-height:180px;overflow-y:auto;padding:0 10px 12px;overscroll-behavior:contain;border-top:1px solid var(--line)}
.sx-lh{padding:10px 8px 4px;font:700 11px "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sx-list .sx-load{position:relative;inset:auto;padding:30px 0}
.sx-trow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;border-radius:14px;background:none;color:#fff;text-align:start;cursor:pointer}
.sx-trow:hover,.sx-trow:focus-visible{background:rgba(255,255,255,.06)}
.sx-trow img{flex:none;width:36px;height:36px;border-radius:50%;background:#2b2160;object-fit:cover}
.sx-trow span{flex:1;min-width:0;display:grid}
.sx-trow b{font:800 15px "Inter",sans-serif;display:flex;align-items:center;gap:5px}
.sx-trow small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-trow em{font-style:normal;font:700 13.5px "Inter",sans-serif;font-variant-numeric:tabular-nums}
.sx-ver{display:inline-block;width:14px;height:14px;border-radius:50%;background:#2ef0b0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23150f2e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat}
.sx-pick-n{padding:0 18px 16px;color:var(--muted);font-size:13px}
.sx-pick-n[hidden]{display:none}
.sx-wlist{display:grid;gap:8px;padding:0 18px}
.sx-wrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:#fff;font:800 15px "Inter",sans-serif;cursor:pointer;text-align:start}
.sx-wrow:hover{border-color:rgba(255,93,115,.6);background:rgba(255,93,115,.08)}
.sx-wrow img{width:32px;height:32px;border-radius:9px}
.sx-wrow b{flex:1}.sx-wrow span{font:600 12px "Inter",sans-serif;color:#2ef0b0}
.sx-wnone{display:grid;gap:10px;justify-items:center;padding:6px 18px;text-align:center}
.sx-wnone[hidden]{display:none}
.sx-wnone p{color:#fff;font-weight:700}.sx-wnone small{color:var(--muted)}
.sx-wnote{padding:14px 18px 18px;color:var(--muted);font-size:12.5px;line-height:1.45;text-align:center}
.sx-swap.working .sx-side{opacity:.7}
@media (max-width:640px){
  .sx-modal{place-items:end stretch;padding:0}
  .sx-sheet{width:100%;max-height:88vh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .sx-amt,.sx-out{font-size:26px}
  .sx-side{padding:12px 14px}
  .sx-det{grid-template-columns:1fr}
}