/* Stash · app surface */
:root{
  --bg:#eff0e8;
  --sage:#a9b4a3;
  --sage-2:#c3cabb;
  --cream:#f6f3e8;
  --panel:#fffefa;
  --panel-2:#f4f2ea;
  --line:#e0dccf;
  --line-2:#cdc7b6;
  --ink:#15140f;
  --ink-2:#575245;
  --ink-3:#8b8474;
  --accent:#0052ff;
  --accent-soft:#0052ff14;
  --pos:#137a4d;
  --neg:#a03c2a;
  --tan:#a98c5f;
  --r:16px;
  --bar:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  color:var(--ink);
  background:
    url("../img/grid.svg") 0 0/72px 72px repeat,
    radial-gradient(120% 90% at 100% 100%, #fbf9f0 0%, rgba(251,249,240,0) 55%),
    linear-gradient(118deg, var(--sage) 0%, var(--sage-2) 26%, var(--cream) 62%, #fbf9f1 100%);
  background-attachment:fixed;
  font-family:"Jost",system-ui,-apple-system,sans-serif;
  font-size:14.5px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.005em;font-feature-settings:"tnum"}
code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em;background:#00000008;padding:1px 5px;border-radius:4px;color:var(--ink-2)}
a{color:var(--accent)}
button{font:inherit;cursor:pointer}

/* ───────────────────────────────────────────────────────────────── topbar */
#bar{
  position:sticky;top:0;z-index:20;
  height:var(--bar);
  display:flex;align-items:center;gap:14px;
  padding:0 16px;
  background:#f7f6efd9;backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid #d9d4c5;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto;min-height:36px}
.mk{width:26px;height:26px;background:url("../img/mark.svg") center/100% no-repeat}
.wm{font-weight:500;font-size:15.5px;letter-spacing:.075em;display:inline-flex;align-items:baseline}
.wm .lam{width:.70em;height:.755em;margin:0 .045em;align-self:center;overflow:visible}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chain{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:11.5px;font-weight:500;color:var(--ink-3);
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
}
.chain i{width:6px;height:6px;border-radius:999px;background:var(--ink-3)}
.chain.live i{background:var(--pos);box-shadow:0 0 0 3px #137a4d22}
.chain.snap i{background:var(--tan);box-shadow:0 0 0 3px #a98c5f22}

#tabs{display:flex;gap:2px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
#tabs button{
  border:0;background:none;color:var(--ink-3);
  font-size:13px;font-weight:500;
  padding:8px 13px;min-height:36px;border-radius:8px;white-space:nowrap;
  transition:color .15s,background .15s;
}
#tabs button:hover{color:var(--ink);background:#00000008}
#tabs button.on{color:var(--ink);background:#0000000f;font-weight:600}

.ghostlink{
  flex:0 0 auto;text-decoration:none;color:var(--ink-2);
  font-size:13px;font-weight:400;
  padding:0 13px;min-height:36px;display:inline-flex;align-items:center;
  border:1px solid var(--line-2);border-radius:8px;background:#ffffff8c;
  transition:background .15s,color .15s;
}
.ghostlink:hover{background:#fff;color:var(--ink)}

.wallet{
  flex:0 0 auto;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:13px;font-weight:500;
  padding:0 15px;min-height:36px;border-radius:8px;
  transition:opacity .15s;
}
.wallet:hover{opacity:.86}
.wallet.on{background:var(--panel);color:var(--ink);border-color:var(--line-2);font-family:"IBM Plex Mono",monospace;font-size:11.5px}

#notice{
  padding:9px 18px;font-size:12.5px;
  background:#a98c5f1a;border-bottom:1px solid var(--line);color:#6b5836;
}
#notice b{color:#4e4128}

/* ───────────────────────────────────────────────────────────────── layout */
main{max-width:1160px;margin:0 auto;padding:22px 16px 72px}
.view{display:none}
.view.on{display:block}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{
  background:var(--panel);
  border:1px solid #e8e4d7;
  border-radius:var(--r);
  padding:20px;
  box-shadow:0 1px 1px #2b2a1e08, 0 6px 18px -8px #2b2a1e1f;
  min-width:0;
}
.span2{grid-column:1/-1}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

.lab{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.big{font-size:clamp(28px,3.6vw,38px);font-weight:400;line-height:1.08;margin:9px 0 4px;letter-spacing:-.015em}
.big.no{color:var(--ink-3);font-size:clamp(20px,2.4vw,26px)}
.sub{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* héros */
.hero{
  display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:center;overflow:hidden;
  padding:26px 24px;
  background:
    radial-gradient(90% 130% at 100% 0%, #eef1e6 0%, rgba(238,241,230,0) 62%),
    linear-gradient(160deg,#fffefa 0%,#faf8ef 100%);
}
.hero-txt h1{font-size:clamp(22px,2.8vw,31px);font-weight:400;letter-spacing:-.012em;line-height:1.16;margin-bottom:9px;max-width:22ch}
.hero-txt p{color:var(--ink-2);max-width:56ch;font-size:13.5px}
#mono{
  width:clamp(120px,16vw,168px);height:auto;display:block;justify-self:center;
  opacity:.95;
  filter:drop-shadow(0 10px 22px #15140f14);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.hero:hover #mono{transform:translateY(-3px) rotate(-2deg)}

/* boutons */
.btn{
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:13px;font-weight:500;padding:0 15px;min-height:38px;border-radius:8px;
  transition:opacity .15s;
}
.btn:hover:not(:disabled){opacity:.86}
.btn:disabled{opacity:.34;cursor:not-allowed}
.btn.ghost{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.btn.wide{width:100%;min-height:46px;font-size:14px;margin-top:16px;background:var(--accent);border-color:var(--accent)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:0 0 9px;border-bottom:1px solid var(--line);
}
.tbl td{padding:11px 0;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .nm{font-weight:600}
.tbl .nm{display:flex;align-items:center;gap:10px}
.logo{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px #00000010;
}
.logo img{width:17px;height:17px;display:block}

/* swap */
.swapcard{min-width:0}
.seg{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{border:0;background:none;color:var(--ink-3);font-size:12.5px;font-weight:500;padding:6px 12px;min-height:32px;border-radius:7px}
.seg button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #0000000f}
.field{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel-2)}
.field span{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.field input{
  width:100%;border:0;background:none;outline:none;color:var(--ink);
  font:inherit;font-size:28px;font-weight:400;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.quote{list-style:none;margin-top:14px;border-top:1px solid var(--line)}
.quote li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.quote li span{color:var(--ink-3)}
.quote .tot{border-bottom:0;border-top:1px solid var(--line-2);margin-top:4px}
.quote .tot span{color:var(--ink);font-weight:600}
.quote .tot b{font-size:17px;color:var(--pos)}

.kv{list-style:none;border-top:1px solid var(--line)}
.kv li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv li:last-child{border-bottom:0}
.kv li span{color:var(--ink-3)}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:#137a4d18;color:var(--pos)}

/* drift */
.drow{display:grid;grid-template-columns:78px 1fr 132px;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.dname{font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:9px}
.dtrack{position:relative;height:10px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.dfill{position:absolute;inset:0 auto 0 0;background:var(--tan);border-radius:3px;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.dmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.dval{text-align:right;font-size:11.5px;color:var(--ink-3);line-height:1.45}
.dval b{color:var(--ink);font-weight:500;font-size:12.5px}
.dval em{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums}
.next{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

.window{display:grid;grid-template-columns:1fr 1.1fr auto;align-items:center;gap:22px}
.window .sub{max-width:44ch;margin-top:4px}
.wbar{height:10px;border-radius:3px;background:var(--panel-2);overflow:hidden;box-shadow:inset 0 0 0 1px #0000000d}
.wbar span{display:block;height:100%;width:0;border-radius:3px;background:var(--tan);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.wtxt{font-size:13px;color:var(--ink-2);white-space:nowrap}
@media (max-width:860px){.window{grid-template-columns:1fr;gap:12px}.wtxt{white-space:normal}}

/* docs */
.docs .card p+p{margin-top:.85em}
.docs .card p:not(.big):not(.lab):not(.sub){color:var(--ink-2);font-size:14px;line-height:1.62}
.doc-lede h2{font-size:clamp(22px,2.9vw,32px);font-weight:400;letter-spacing:-.015em;line-height:1.15;margin:10px 0 12px}
.doc-lede p{font-size:15.5px;max-width:62ch}
.lead{max-width:70ch}
.risks{list-style:none;margin-top:4px}
.risks li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:13.5px;line-height:1.55}
.risks li:last-child{border-bottom:0}
.risks b{color:var(--ink)}
.basket{margin-top:16px;border-top:1px solid var(--line)}
.brow{display:grid;grid-template-columns:150px 1fr 56px;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.bname{display:flex;align-items:center;gap:10px;font-weight:500;font-size:13.5px}
.bsub{color:var(--ink-3);font-size:11.5px;font-weight:400}
.bbar{height:9px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.bbar i{display:block;height:100%;border-radius:3px}
.bw{text-align:right;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* how */
.steps,.refuse{list-style:none;counter-reset:s}
.steps li,.refuse li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:0 14px;padding:13px 0;border-bottom:1px solid var(--line)}
.steps li:last-child,.refuse li:last-child{border-bottom:0}
.steps li::before,.refuse li::before{content:counter(s,decimal-leading-zero);font-size:11px;font-weight:500;color:var(--tan);padding-top:3px;letter-spacing:.06em}
.steps b,.refuse b{grid-column:2;display:block;font-weight:600;margin-bottom:3px}
.steps span{grid-column:2;color:var(--ink-3);font-size:13px}
.refuse code{grid-column:2;display:inline-block;margin-top:5px;font-size:11px;overflow-wrap:anywhere;max-width:100%}
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat .big{margin:6px 0 3px}
footer{grid-column:1/-1;padding:18px 2px 0;border-top:1px solid var(--line)}
.small{font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.warn{margin-top:10px;font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:82ch}

/* ─────────────────────────────────────────────────────────── responsive */
@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  #mono{width:100%;height:150px;justify-self:center}
  .stat{grid-template-columns:1fr 1fr;gap:14px}
  #bar{gap:10px;padding:0 12px}
  .chain span{display:none}
  #tabs{margin:0}
}
@media (max-width:560px){
  .brand b{display:none}
  .ghostlink{display:none}
  .brow{grid-template-columns:1fr 64px;grid-template-areas:"n w" "b b";gap:8px 10px}
  .bname{grid-area:n}.bw{grid-area:w}.bbar{grid-area:b}
  .drow{grid-template-columns:96px 1fr;grid-template-areas:"n b" "v v";gap:6px 10px}
  .dname{grid-area:n}.dtrack{grid-area:b}.dval{grid-area:v;text-align:left}
  .tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
}
@media (prefers-reduced-motion:reduce){.dfill{transition:none}}