/* Moorline: dark, one indigo, Bricolage headlines, mono numbers. The swap panel is the only box on the page. */
:root{--bg:#0a0a0b;--card:#111114;--tile:#16161b;--tile2:#1c1c23;--hair:#222229;--hair2:#2e2e38;--ink:#efeef5;--dim:#a2a1b0;--faint:#64636f;--acc:#ffb020;--acc2:#ffc95c;--acc-ink:#1f1300;--up:#4ade80;--down:#f87171;--head:"Bricolage Grotesque",system-ui,sans-serif;--sans:"Inter Tight",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
input{font:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.top{position:sticky;top:0;z-index:40;background:rgba(10,10,11,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;height:62px;gap:30px}
.brand{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--head);letter-spacing:-.02em}
.brand img{height:28px;width:auto;display:block}
.nav{display:flex;gap:24px;color:var(--dim);font-size:14.5px}
.nav a:hover,.nav a.on{color:var(--ink)}
.top .act{margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;border:1px solid var(--hair2);background:transparent;color:var(--ink);font:600 14.5px var(--sans);white-space:nowrap}
.btn:hover{border-color:var(--dim)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--acc2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{color:var(--acc2)}

/* hero: words left, the swap right */
.hero{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center;padding:84px 0 70px}
.hero h1{font:700 clamp(48px,6.6vw,88px)/.98 var(--head);letter-spacing:-.04em}
.hero h1 span{color:var(--acc)}
.hero p.lead{font-size:19px;color:var(--dim);margin-top:24px;max-width:540px}
.pts{display:flex;flex-direction:column;gap:10px;margin-top:28px;font-size:15.5px}
.pts div{display:flex;gap:12px;align-items:baseline}
.pts i{font:normal 500 13px var(--mono);color:var(--acc2)}
#caBox{margin-top:26px}
.ca{display:inline-flex;gap:12px;align-items:center;padding:8px 14px;border:1px solid var(--hair2);border-radius:10px;cursor:pointer;font:13px var(--mono);max-width:100%}
.ca b{color:var(--acc2);font-weight:500}.ca span{overflow:hidden;text-overflow:ellipsis}

/* the swap panel */
.swap{background:var(--card);border:1px solid var(--hair2);border-radius:22px;padding:18px}
.swap .hd{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 12px}
.swap .hd b{font:700 18px var(--head)}
.slip{display:flex;gap:4px}
.slip button{height:28px;padding:0 9px;border-radius:8px;border:1px solid var(--hair2);background:transparent;color:var(--faint);font:500 12px var(--mono)}
.slip button.on{color:var(--ink);border-color:var(--acc)}
.leg{background:var(--tile);border:1px solid var(--hair);border-radius:16px;padding:14px 14px 12px}
.leg .row{display:flex;align-items:center;gap:10px}
.leg label{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--faint);margin-bottom:8px}
.leg label a{color:var(--acc2);cursor:pointer}
.leg input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);font:600 30px var(--head);letter-spacing:-.02em}
.leg .out{flex:1;min-width:0;font:600 30px var(--head);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leg .usd{font:12.5px var(--mono);color:var(--faint);margin-top:6px}
.leg .tp{flex:none;width:150px}
.flip{display:grid;place-items:center;height:10px;position:relative;z-index:2}
.flip button{width:38px;height:38px;border-radius:12px;border:4px solid var(--card);background:var(--tile2);color:var(--dim);font-size:16px}
.flip button:hover{color:var(--ink)}
.lines{margin:14px 4px 14px;font-size:13.5px}
.lines div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;color:var(--dim)}
.lines b{color:var(--ink);font:500 13px var(--mono);text-align:right}
.lines .gap.ok{color:var(--up)}.lines .gap.bad{color:var(--down)}
.swap .go{width:100%;height:52px;border-radius:14px;font-size:16px}
.swap .note{font-size:12.5px;color:var(--faint);margin:10px 4px 0;text-align:center}

/* sections */
section.s{padding:90px 0 0}
.s h2{font:700 clamp(34px,4.4vw,54px)/1.02 var(--head);letter-spacing:-.035em;max-width:820px}
.s h2 span{color:var(--acc)}
.s p.sub{color:var(--dim);margin-top:14px;max-width:640px;font-size:17px}
.s .body{margin-top:34px}
table.t{width:100%;border-collapse:collapse;font-size:15px}
.t th{font:500 12px var(--mono);color:var(--faint);text-align:left;padding:0 12px 12px 0;border-bottom:1px solid var(--hair2)}
.t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.t td.n,.t th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:rgba(255,176,32,.04)}
.t .who{display:flex;align-items:center;gap:10px}
.t .who small{color:var(--faint)}
.t .yes{color:var(--acc2);font-family:var(--mono)}.t .no{color:var(--faint);font-family:var(--mono)}
.gapbar{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--hair);position:relative;vertical-align:middle;margin-left:10px}
.gapbar i{position:absolute;top:0;bottom:0;border-radius:3px}
.lg{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.lg.badge{display:inline-grid;place-items:center;background:var(--tile2);color:var(--dim);font-size:10px;font-weight:700}
.chg{font-family:var(--mono)}.chg.up{color:var(--up)}.chg.down{color:var(--down)}
.pos{color:var(--up)}.neg{color:var(--down)}.warn{color:#fb923c}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;margin-top:30px}
.qa div{padding-top:16px;border-top:1px solid var(--hair2)}
.qa h3{font:700 20px/1.25 var(--head);letter-spacing:-.02em}
.qa p{color:var(--dim);margin-top:6px;font-size:15.5px}

footer{background:#000;margin-top:120px;padding:64px 0 80px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
footer h4{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#5e5d6a;margin-bottom:14px}
footer a{display:block;color:#c8c7d4;margin-bottom:9px;font-size:14.5px}
footer a:hover{color:#fff}
footer p{color:#7b7a88;font-size:14px;margin-top:12px;max-width:340px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:center;z-index:90}
.modal.open{display:grid}
.modal .box{background:var(--card);border:1px solid var(--hair2);border-radius:16px;padding:22px;width:min(380px,92vw)}
.modal h3{font:700 20px var(--head);margin-bottom:14px}
.wbtn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;margin-bottom:8px;border-radius:10px;border:1px solid var(--hair2);background:var(--tile);color:var(--ink)}
.wbtn img{width:24px;height:24px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,40px);opacity:0;background:var(--acc);color:#1f1300;padding:11px 16px;border-radius:10px;font-weight:600;transition:.25s;z-index:99;max-width:92vw}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{background:var(--down)}

.docs{display:grid;grid-template-columns:210px 1fr;gap:48px;padding-top:64px}
.docs nav{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:9px;color:var(--dim);font-size:14.5px}
.docs h1{font:700 60px/1 var(--head);letter-spacing:-.04em;margin-bottom:18px}
.docs h2{font:700 28px var(--head);letter-spacing:-.02em;margin:46px 0 12px}
.docs p,.docs li{color:var(--dim);max-width:760px;margin-bottom:12px}
.docs ul{padding-left:20px}
.docs code{font:13px var(--mono);background:var(--tile);padding:2px 6px;border-radius:5px;color:var(--acc2)}
.docs table{width:100%;border-collapse:collapse}
.docs td{padding:12px 16px 12px 0;border-bottom:1px solid var(--hair);font-size:14px;word-break:break-all}

@media (max-width:1000px){.hero{grid-template-columns:1fr;gap:40px}.qa{grid-template-columns:1fr}.docs{grid-template-columns:1fr}.docs nav{display:none}}
@media (max-width:680px){
  .wrap{padding:0 16px}.nav{display:none}.hero{padding-top:44px}
  .leg .tp{width:130px}.leg input,.leg .out{font-size:24px}
  .t .hide-m{display:none}
  footer .wrap{grid-template-columns:1fr 1fr}footer .wrap>div:first-child{grid-column:1/-1}
}
.hero>*{min-width:0}
@media (max-width:680px){.gapbar{display:none}.leg .tp{width:118px}.t td,.t th{padding-right:8px}.t .who small{display:none}}
.leg .tp .tp-btn span{display:none}