:root { --bg:#070b0a; --panel:rgba(255,255,255,.04); --panel2:rgba(255,255,255,.08); --line:rgba(255,255,255,.09); --text:#eef7f2; --muted:#7f9b91; --accent:#4cf2c0; --accent-ink:#03231a; --amber:#ffb547; --rose:#ff5c7a; --serif:"Instrument Serif",serif; --mono:"JetBrains Mono",ui-monospace,monospace; color-scheme:dark; }
[data-theme="light"] { --bg:#eef3f0; --panel:rgba(255,255,255,.55); --panel2:rgba(0,0,0,.06); --line:rgba(0,0,0,.09); --text:#08170f; --muted:#587068; --accent:#0a8f6b; --accent-ink:#fff; --amber:#a85900; --rose:#c42a50; color-scheme:light; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); }
body { font:14px/1.45 "Manrope",system-ui,sans-serif; color:var(--text); background-image:radial-gradient(900px 600px at 10% -10%,rgba(76,242,192,.14),transparent 60%),radial-gradient(700px 500px at 95% 20%,rgba(159,180,255,.12),transparent 60%),radial-gradient(600px 500px at 50% 110%,rgba(245,163,212,.10),transparent 60%); background-attachment:fixed; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button, select, input, textarea { font-family:inherit; }
svg { display:block; }
.nav-i svg, .bottom svg, .icon-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
::-webkit-scrollbar { height:6px; width:6px; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(76,242,192,.6);} 70% { box-shadow:0 0 0 9px rgba(76,242,192,0);} }
@keyframes slidein { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes orbit { to { transform:rotate(360deg);} }
@keyframes flow { 0% { left:0; opacity:0;} 10% { opacity:1;} 90% { opacity:1;} 100% { left:calc(100% - 10px); opacity:0;} }
@keyframes ring { 0% { stroke-dashoffset:364.4;} 70% { stroke-dashoffset:0;} 100% { stroke-dashoffset:0;} }
@keyframes blink { 0%,69% { opacity:.25;} 70%,100% { opacity:1;} }
@keyframes scan { 0% { transform:translateY(-100%);} 100% { transform:translateY(400%);} }

.shell { min-height:100vh; display:flex; position:relative; overflow-x:clip; }
.side { position:sticky; top:0; height:100vh; width:76px; flex:0 0 76px; border-right:1px solid var(--line); background:var(--panel); backdrop-filter:blur(20px); display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:8px; }
.logo { padding:0 0 16px; }
.orb { position:relative; width:30px; height:30px; display:grid; place-items:center; }
.orb i { position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); opacity:.3; } .orb i:nth-child(2) { inset:6px; opacity:.65; }
.orb b { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.nav-i { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:var(--muted); position:relative; border:0; background:transparent; cursor:pointer; }
.nav-i:hover { color:var(--text); background:var(--panel2); text-decoration:none; }
.nav-i.on { color:var(--text); background:var(--panel2); border:1px solid var(--line); }
.nav-i.on::before { content:""; position:absolute; left:-16px; top:13px; bottom:13px; width:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.side-foot { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.live { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-out infinite; margin-bottom:6px; }
.live.off { background:var(--rose); animation:none; }
.wallet-i { background:var(--text); color:var(--bg); } .wallet-i:hover { filter:brightness(1.08); color:var(--bg); background:var(--text); }
.wallet-i.conn { background:var(--panel2); color:var(--text); border:1px solid var(--line); }
.theme-i { border:1px solid var(--line); }
.theme-i svg, .icon-btn svg { width:16px; height:16px; stroke-width:2; }
[data-theme="dark"] .moon, [data-theme="light"] .sun { display:none; }

.col { flex:1; min-width:0; display:flex; flex-direction:column; }
.top { display:none; position:sticky; top:0; z-index:20; background:color-mix(in oklab,var(--bg) 84%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); height:56px; align-items:center; justify-content:space-between; padding:0 16px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--text); font-weight:800; font-size:17px; letter-spacing:-.03em; }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.top-r { display:flex; gap:8px; }
.icon-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:18px; line-height:1; }
.icon-btn:hover { background:var(--panel2); }
.pill-btn { height:36px; padding:0 12px; border-radius:10px; border:0; background:var(--text); color:var(--bg); font-weight:700; cursor:pointer; font-size:12px; white-space:nowrap; }
.pill-btn.conn { background:var(--panel2); color:var(--text); border:1px solid var(--line); }
main { width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(16px,3vw,40px) 90px; flex:1; }
.foot { border-top:1px solid var(--line); }
.foot { display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:12px; color:var(--muted); max-width:1240px; margin:0 auto; padding:20px clamp(16px,3vw,40px) 40px; width:100%; }
.bottom { display:none; position:fixed; left:0; right:0; bottom:0; z-index:30; height:64px; background:color-mix(in oklab,var(--panel) 90%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line); grid-template-columns:repeat(4,1fr); padding:6px 8px; }
.bottom a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:11px; font-weight:600; }
.bottom a.on { color:var(--accent); font-weight:700; }
.mono { font-family:var(--mono); }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.eyebrow.ac { color:var(--accent); }
h1.serif, h2.serif, h3.serif { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; margin:0; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(22px,4vw,44px) 0 10px; flex-wrap:wrap; }
.hero h1 { font-size:clamp(48px,6.5vw,76px); line-height:.95; }
.hero p { margin:8px 0 0; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:19px; }
.hero p em { color:var(--accent); }
.cta { height:48px; padding:0 22px; border-radius:14px; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:15px; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; white-space:nowrap; box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 50%,transparent),0 10px 36px -8px var(--accent); }
.cta:hover { filter:brightness(1.08); text-decoration:none; }
.cta.sm { height:40px; padding:0 16px; font-size:13px; border-radius:12px; box-shadow:none; flex:1; justify-content:center; }
.cta:disabled { opacity:.5; cursor:default; filter:none; }
.ghost { height:40px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; }
.ghost:hover { color:var(--text); background:var(--panel2); }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sec-head h2 { font-size:30px; }
.arrows { display:flex; gap:6px; }
.arrows button { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; display:grid; place-items:center; }
.arrows button:hover { background:var(--panel2); }
.arrows svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* trending rail */
.rail { display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.tcard { flex:0 0 auto; width:min(236px,68vw); scroll-snap-align:start; color:var(--text); display:flex; flex-direction:column; gap:12px; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.tcard:hover { text-decoration:none; transform:translateY(-4px); }
.art { aspect-ratio:1; border-radius:22px; overflow:hidden; position:relative; background:var(--panel2); isolation:isolate; border:1px solid var(--line); }
.art img, .art .gen { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.art .gen { display:grid; place-items:center; font-family:var(--serif); font-size:72px; color:rgba(255,255,255,.85); text-shadow:0 2px 24px rgba(0,0,0,.35); }
.art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 40%,rgba(0,0,0,.3)); }
.art .scan { position:absolute; left:0; right:0; height:60px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent); animation:scan 3s linear infinite; mix-blend-mode:overlay; z-index:1; }
.badge { position:absolute; z-index:2; height:28px; padding:0 10px 0 5px; border-radius:999px; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; display:flex; align-items:center; gap:6px; }
.badge.tr { top:12px; right:12px; } .badge.tl { top:12px; left:12px; padding:0 10px; letter-spacing:.08em; text-transform:uppercase; font-family:inherit; }
.badge .pdot, .pdot { width:18px; height:18px; border-radius:50%; color:#04120e; display:grid; place-items:center; font-size:9px; font-weight:800; flex:0 0 auto; }
.badge .ld { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.4s ease-out infinite; }
.ringbox { position:absolute; z-index:2; left:12px; bottom:12px; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); display:grid; place-items:center; }
.ring { transform:rotate(-90deg); } .ring .bgc { fill:none; stroke:rgba(255,255,255,.18); stroke-width:4; } .ring .fgc { fill:none; stroke-width:4; stroke-linecap:round; }
.taxbox { position:absolute; z-index:2; left:12px; right:12px; bottom:12px; border-radius:14px; background:rgba(0,0,0,.7); backdrop-filter:blur(10px); padding:10px 12px; color:#fff; }
.taxbox .r1 { display:flex; align-items:baseline; justify-content:space-between; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; }
.taxbox .r2 { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.taxbox .big { font-family:var(--mono); font-size:30px; font-weight:600; line-height:1; letter-spacing:-.04em; }
.taxbox .bar { height:3px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden; margin-top:8px; } .taxbox .bar i { display:block; height:100%; }
.tcard .nm { font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcard .nm .sym, .rowx .sym { color:var(--muted); font-weight:500; margin-left:4px; }
.tcard .mc { display:flex; align-items:baseline; gap:8px; font-family:var(--mono); } .tcard .mc b { font-size:22px; font-weight:600; letter-spacing:-.03em; }
.tcard .pw { font-size:13px; color:var(--muted); } .tcard .pw b { color:var(--text); }

/* toolbar + lists */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-bottom:1px solid var(--line); margin-top:34px; }
.tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.tabs button { height:44px; padding:0 14px; border:0; border-bottom:2px solid transparent; background:transparent; cursor:pointer; font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; margin-bottom:-1px; }
.tabs button:hover { color:var(--text); } .tabs button.on { color:var(--text); border-bottom-color:var(--text); }
.tool-r { display:flex; align-items:center; gap:8px; margin-left:auto; padding-bottom:8px; }
select.pairsel { height:38px; padding:0 32px 0 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:13px; font-weight:600; appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%237f9b91" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.seg { display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel); border:1px solid var(--line); }
.seg button { width:34px; height:30px; border-radius:999px; border:0; cursor:pointer; display:grid; place-items:center; background:transparent; color:var(--muted); }
.seg button.on { background:var(--text); color:var(--bg); }
.seg svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.thead, .rowx { display:grid; grid-template-columns:minmax(170px,2fr) minmax(96px,1fr) minmax(80px,120px) minmax(90px,.8fr) 112px; gap:12px; align-items:center; }
.thead { padding:16px 14px 10px; font-size:12px; color:var(--muted); } .thead span:first-child { padding-left:70px; } .thead .r { text-align:right; }
.rowx { padding:12px 14px; border-top:1px solid var(--line); border-radius:14px; color:var(--text); transition:background .15s; }
.rowx:hover { background:var(--panel); text-decoration:none; }
.rowx .tk { display:flex; align-items:center; gap:14px; min-width:0; }
.rowx .tk .img { width:56px; height:56px; border-radius:16px; object-fit:cover; flex:0 0 auto; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--serif); font-size:26px; color:rgba(0,0,0,.55); overflow:hidden; }
.rowx .tk .img img { width:100%; height:100%; object-fit:cover; }
.rowx .nm { font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowx .by { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rowx .pr { display:flex; align-items:center; gap:8px; min-width:0; font-weight:600; font-size:15px; } .rowx .pr .pdot { width:26px; height:26px; font-size:11px; }
.rowx .pr small { font-size:11px; color:var(--muted); font-family:var(--mono); white-space:nowrap; font-weight:400; }
.rowx .mc { text-align:right; font-family:var(--mono); } .rowx .mc b { font-size:17px; font-weight:600; letter-spacing:-.02em; display:block; } .rowx .mc span { font-size:12px; color:var(--muted); }
.rowx .gr { display:flex; align-items:center; justify-content:flex-end; gap:10px; } .rowx .gr .t { text-align:right; } .rowx .gr .t b { font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap; display:block; } .rowx .gr .t span { font-size:11px; color:var(--muted); white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; padding-top:18px; }
.grid .tcard { width:auto; } .grid .art { border-radius:20px; }
.cards { display:none; flex-direction:column; gap:10px; padding-top:14px; }
.mcard { display:block; border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:14px; color:var(--text); }
.mcard:hover { border-color:var(--muted); text-decoration:none; }
.mcard .r1 { display:flex; align-items:center; gap:12px; } .mcard .r1 .img { width:48px; height:48px; border-radius:14px; overflow:hidden; display:grid; place-items:center; font-family:var(--serif); font-size:22px; color:rgba(0,0,0,.55); flex:0 0 auto; } .mcard .img img { width:100%; height:100%; object-fit:cover; }
.mcard .r2 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.empty { padding:60px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:18px; margin-top:14px; }

/* how it works */
.how { margin-top:96px; display:flex; flex-direction:column; gap:56px; }
.how-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.how-head h2 { font-size:clamp(34px,4.5vw,54px); line-height:1; margin-top:8px; text-wrap:balance; max-width:620px; }
.how-head p { margin:0; max-width:380px; color:var(--muted); font-size:15px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.step { border-radius:24px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(20px); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s; }
.step:hover { transform:translateY(-4px); border-color:color-mix(in oklab,var(--c,var(--accent)) 50%,var(--line)); }
.step .vis { position:relative; height:220px; background:radial-gradient(circle at 50% 120%,color-mix(in oklab,var(--c,var(--accent)) 22%,transparent),transparent 65%); border-bottom:1px solid var(--line); overflow:hidden; }
.step .txt { padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; }
.step .num { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--c,var(--accent)); } .step .num::after { content:""; flex:1; height:1px; background:var(--line); }
.step h3 { margin:0; font-size:22px; font-weight:700; letter-spacing:-.015em; } .step p { margin:0; color:var(--muted); font-size:14px; }
.orbits { position:absolute; inset:0; display:grid; place-items:center; }
.orbits .o { position:absolute; border-radius:50%; border:1px dashed var(--line); } .orbits .o1 { width:104px; height:104px; } .orbits .o2 { width:168px; height:168px; }
.orbits .center { width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg,var(--accent),#9fb4ff); border:1px solid var(--line); box-shadow:0 0 40px -6px var(--accent); position:relative; z-index:2; }
.orbits .sat { position:absolute; animation:orbit var(--d) linear infinite; animation-delay:var(--dl,0s); } .orbits .sat > span { position:absolute; width:32px; height:32px; border-radius:50%; color:#04120e; display:grid; place-items:center; font-weight:800; font-size:12px; box-shadow:0 0 0 4px var(--bg); animation:orbit var(--d) linear infinite reverse; animation-delay:var(--dl,0s); }
.flowline { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 28px; }
.flowline .track { position:relative; width:100%; max-width:300px; display:flex; align-items:center; justify-content:space-between; } .flowline .track::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--line); }
.flowline .p { position:absolute; left:0; top:50%; margin-top:-5px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:flow 2.4s cubic-bezier(.4,0,.2,1) infinite; }
.flowline .chip { position:relative; z-index:2; height:40px; padding:0 14px; border-radius:999px; background:var(--panel2); color:var(--muted); font-family:var(--mono); font-size:13px; font-weight:700; display:inline-flex; align-items:center; box-shadow:0 0 0 6px var(--bg); border:1px solid var(--line); }
.flowline .chip.p1 { background:#8be04a; color:#04120e; border:0; } .flowline .chip.p2 { background:var(--accent); color:var(--accent-ink); border:0; }
.flowline .cap { position:absolute; bottom:14px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px; color:var(--muted); }
.gradvis { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:28px; }
.gradvis .dial { position:relative; width:132px; height:132px; display:grid; place-items:center; flex:0 0 auto; } .gradvis .dial svg { position:absolute; inset:0; transform:rotate(-90deg); }
.gradvis .dial .lbl { text-align:center; animation:blink 6s steps(1) infinite; } .gradvis .dial .lbl b { font-family:var(--serif); font-weight:400; font-size:34px; line-height:1; color:var(--amber); display:block; } .gradvis .dial .lbl span { font-size:11px; color:var(--muted); }
.gradvis .leg { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--muted); } .gradvis .leg div { display:flex; align-items:center; gap:8px; } .gradvis .leg i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.taxvis { position:absolute; inset:0; padding:18px 22px 14px; display:flex; flex-direction:column; }
.taxvis .r1 { display:flex; align-items:baseline; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .taxvis .r1 b { font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.04em; line-height:1; }
.taxvis svg { flex:1; width:100%; display:block; overflow:visible; margin-top:6px; }
.taxvis .r3 { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--muted); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.fact { background:var(--bg); padding:28px 26px; display:flex; flex-direction:column; gap:10px; } .fact:hover { background:var(--panel); }
.fact .big { font-family:var(--serif); font-size:clamp(44px,5vw,64px); line-height:.9; letter-spacing:-.03em; } .fact .big small { font-size:.45em; color:var(--muted); }
.fact b { font-size:15px; } .fact p { margin:0; color:var(--muted); font-size:13px; }
.fact code { font-family:var(--mono); font-size:12px; background:var(--panel2); padding:2px 6px; border-radius:6px; }
.ctabox { border-radius:26px; border:1px solid var(--line); background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 16%,var(--panel)),var(--panel)); backdrop-filter:blur(20px); padding:clamp(24px,4vw,44px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.ctabox h3 { font-size:clamp(28px,3.5vw,40px); line-height:1.05; } .ctabox p { margin:8px 0 0; color:var(--muted); font-size:14px; }

/* forms + panels */
.panel { border-radius:24px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(20px); padding:clamp(18px,3vw,28px); }
label { display:block; font-size:12px; color:var(--muted); margin:16px 0 6px; font-weight:600; } .panel > label:first-child, .f:first-child label { margin-top:0; }
input, textarea { width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); } textarea { min-height:80px; resize:vertical; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.note { background:var(--panel2); border-left:3px solid var(--c,var(--accent)); padding:10px 12px; border-radius:8px; margin:14px 0 0; font-size:13px; }
.note.warn { --c:var(--amber);} .note.bad { --c:var(--rose);} .note.good { --c:var(--accent);}
.actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; align-items:center; }
.page-head { padding:clamp(22px,4vw,44px) 0 18px; } .page-head h1 { font-size:clamp(40px,5.5vw,64px); line-height:.95; } .page-head p { margin:8px 0 0; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:19px; }
.coin-top { display:flex; gap:18px; align-items:center; padding:clamp(22px,4vw,40px) 0 10px; flex-wrap:wrap; }
.coin-top .img { width:84px; height:84px; border-radius:24px; overflow:hidden; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--serif); font-size:40px; color:rgba(0,0,0,.55); flex:0 0 auto; } .coin-top .img img { width:100%; height:100%; object-fit:cover; }
.coin-top h1 { font-size:clamp(36px,5vw,58px); line-height:.95; } .coin-top .sub { color:var(--muted); font-size:15px; margin-top:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tag { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--muted); } .tag.ac { color:var(--accent); border-color:color-mix(in oklab,var(--accent) 40%,transparent);} .tag.am { color:var(--amber); border-color:color-mix(in oklab,var(--amber) 40%,transparent);}
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:18px 0; }
.stat { border-radius:16px; border:1px solid var(--line); background:var(--panel); padding:14px 16px; } .stat b { display:block; font-family:var(--mono); font-size:20px; font-weight:600; letter-spacing:-.02em; } .stat span { font-size:12px; color:var(--muted); }
.trade { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.bs { display:flex; gap:6px; margin-bottom:14px; } .bs button { flex:1; height:40px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:700; cursor:pointer; } .bs button.on { color:var(--text); border-color:var(--accent); background:color-mix(in oklab,var(--accent) 10%,transparent); } .bs button.sell.on { border-color:var(--rose); background:color-mix(in oklab,var(--rose) 10%,transparent); }
.quote { margin:10px 0 0; font-size:13px; color:var(--muted); min-height:20px; } .quote b { color:var(--text); font-family:var(--mono); }
.slip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); } .slip input { width:64px; padding:6px 8px; font-size:12px; }
.cta.red { background:var(--rose); color:#fff; box-shadow:none; }
.addr { font-family:var(--mono); font-size:12px; color:var(--muted); word-break:break-all; margin:6px 0; } .addr b { color:var(--text); font-weight:600; margin-right:6px; }
.plist { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:14px; }
.prow { display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); color:var(--text); } .prow:first-child { border-top:0; } .prow:hover { background:var(--panel); text-decoration:none; }
.prow .pdot { width:34px; height:34px; font-size:13px; border-radius:12px; } .prow .nm { font-weight:700; } .prow .meta { font-size:12px; color:var(--muted); font-family:var(--mono); } .prow .r { margin-left:auto; text-align:right; }
#toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:60; background:color-mix(in oklab,var(--bg) 80%,transparent); backdrop-filter:blur(14px); border:1px solid var(--line); padding:10px 16px; border-radius:12px; max-width:90vw; font-size:13px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.4); animation:fade .2s; }
#toast.bad { border-color:var(--rose); } #toast.good { border-color:var(--accent); }
.skel { color:var(--muted); padding:30px 0; }

/* wallet panel */
.scrim { position:fixed; inset:0; background:rgba(3,10,8,.6); z-index:40; animation:fade .2s ease-out; }
.wpanel { position:fixed; top:0; right:0; bottom:0; width:min(400px,100vw); z-index:50; background:color-mix(in oklab,var(--bg) 78%,transparent); backdrop-filter:blur(28px); border-left:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.55); display:flex; flex-direction:column; animation:slidein .25s cubic-bezier(.2,.8,.2,1); }
.wp-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); } .wp-head .mono { font-size:14px; font-weight:600; margin-top:2px; }
.wp-body { padding:18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:20px; }
.wp-foot { padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:8px; }
.balcard { border-radius:18px; background:linear-gradient(160deg,color-mix(in oklab,var(--accent) 22%,var(--panel2)),var(--panel2)); border:1px solid var(--line); padding:16px; } .balcard .b { font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1.1; margin-top:4px; } .balcard .b small { font-size:15px; color:var(--muted); } .balcard .s { font-size:12px; color:var(--muted); }
.hlist { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; } .hrow { display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--text); } .hrow:last-child { border-bottom:0; } .hrow:hover { background:var(--panel); text-decoration:none; }
.hrow .img { width:34px; height:34px; border-radius:10px; overflow:hidden; display:grid; place-items:center; font-family:var(--serif); color:rgba(0,0,0,.55); flex:0 0 auto; } .hrow .img img { width:100%; height:100%; object-fit:cover; }
.hrow .t { min-width:0; flex:1; } .hrow .t b { font-size:13px; } .hrow .t span { color:var(--muted); font-weight:500; } .hrow .t div { font-size:11px; color:var(--muted); font-family:var(--mono); }
.hrow .v { text-align:right; font-family:var(--mono); font-size:13px; font-weight:600; }

@media (max-width: 1000px) { .thead, .rowx { display:none; } .cards { display:flex; } }
@media (max-width: 700px) {
  .side { display:none; } .top { display:flex; } .bottom { display:grid; }
  .two, .trade { grid-template-columns:1fr; } .hero h1 { font-size:48px; }
}

/* coin page */
.desc { max-width:760px; color:var(--muted); font-size:15px; margin:4px 0 0; }
.coin-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; margin-top:18px; align-items:start; }
.coin-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.coin-main .stats { margin:0; }
.coin-side { position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; }
.row { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.r { text-align:right; }
.grad .big { font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1; margin-top:4px; color:var(--accent); }
.pbar { height:10px; border-radius:6px; background:var(--panel2); overflow:hidden; margin-top:14px; }
.pbar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--amber)); box-shadow:0 0 16px var(--accent); min-width:4px; }
.ranges { display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); }
.ranges button { border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; cursor:pointer; } .ranges button.on { background:var(--text); color:var(--bg); }
.tlist { display:flex; flex-direction:column; margin-top:10px; }
.trow { display:grid; grid-template-columns:54px 1.2fr 1.2fr .9fr .7fr; gap:10px; align-items:center; padding:9px 4px; border-top:1px solid var(--line); color:var(--text); font-size:13px; }
.trow:hover { background:var(--panel); text-decoration:none; }
.tside { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; text-align:center; }
.tside.buy { color:var(--accent); background:color-mix(in oklab,var(--accent) 14%,transparent); } .tside.sell { color:var(--rose); background:color-mix(in oklab,var(--rose) 14%,transparent); }
.trade-card { box-shadow:0 20px 60px -30px color-mix(in oklab,var(--accent) 45%,transparent); }
.amt { display:flex; align-items:center; background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:0 14px 0 0; }
.amt input { border:0; background:transparent; font-family:var(--mono); font-size:24px; font-weight:600; padding:12px 14px; } .amt input:focus { outline:none; }
.amt span { color:var(--muted); font-weight:700; font-size:13px; }
.amt:focus-within { border-color:var(--accent); }
.chips { display:flex; gap:6px; margin-top:10px; } .chips button { flex:1; height:32px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); font-weight:700; font-size:12px; cursor:pointer; } .chips button:hover { color:var(--text); background:var(--panel2); }
.cta.wide { width:100%; justify-content:center; margin-top:14px; }
.slip-row { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.parent-card { display:flex; gap:12px; align-items:center; color:var(--text); } .parent-card:hover { text-decoration:none; border-color:var(--muted); } .parent-card .pdot { width:40px; height:40px; font-size:15px; border-radius:14px; }
.addr .copy { margin-left:8px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; } .addr .copy:hover { color:var(--text); }
button.tag { background:var(--panel2); } button.tag:hover { color:var(--text); }
@media (max-width: 900px) { .coin-grid { grid-template-columns:1fr; } .coin-side { position:static; } .trow { grid-template-columns:54px 1fr 1fr; } .trow span:nth-child(4), .trow span:nth-child(5) { display:none; } }