@font-face{font-family:"Space Grotesk";src:url(assets/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--ink:#f1f3ff;--mute:#a6aed3;--glass:rgba(10,8,30,.55);--edge:linear-gradient(120deg,#28ff8c,#4cc9ff 45%,#b06bff 75%,#ff2850);--g:#28ff8c;--r:#ff2850}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#04030d;color:var(--ink);font-family:Manrope,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.bg{position:fixed;inset:-4%;background:#04030d center/cover no-repeat;opacity:0;transition:opacity 4s ease;animation:drift 60s ease-in-out infinite alternate}
.bg.on{opacity:1}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,1%)}}
.veil{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(4,3,13,.15),rgba(4,3,13,.7) 75%),linear-gradient(180deg,rgba(4,3,13,.55),rgba(4,3,13,.1) 30%,rgba(4,3,13,.2) 70%,rgba(4,3,13,.75))}
#bubbles{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1}
h1,h2,b,button,.badge{font-family:"Space Grotesk",sans-serif}
.top{position:fixed;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 18px 6px;pointer-events:none}
.top>*{pointer-events:auto}
.brand h1{font-size:clamp(20px,2.6vw,30px);font-weight:700;letter-spacing:-.3px;background:linear-gradient(90deg,#fff 0%,#c9fbe0 45%,#7dfcb9 70%,#ff8aa0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(40,255,140,.25))}
.brand p{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--mute);margin-top:2px}
/* gradient-border pills */
.tabs{display:flex;padding:4px;border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
.tabs button{background:none;border:0;color:var(--mute);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}
.tabs button.on{color:#04030d;background:linear-gradient(120deg,#28ff8c,#4cc9ff);box-shadow:0 0 16px rgba(40,255,140,.45)}
.pill{position:relative;border:0;cursor:pointer;color:var(--ink);font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(rgba(10,8,30,.75),rgba(10,8,30,.75)) padding-box,var(--edge) border-box;border:1.5px solid transparent;backdrop-filter:blur(10px)}
.pill.neon{box-shadow:0 0 14px rgba(76,201,255,.35),inset 0 0 10px rgba(40,255,140,.15)}
.pill:hover{filter:brightness(1.2)}
.legend{position:fixed;z-index:3;left:18px;top:calc(76px + env(safe-area-inset-top));display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;max-width:70vw}
.chip{font-size:11px;color:#dfe3ff;padding:5px 10px;border-radius:999px;background:rgba(10,8,30,.5);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.chip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--c);box-shadow:0 0 8px var(--c)}
.chip i.liq{border-radius:2px;background:linear-gradient(0deg,#0a7846,#3cff96 60%,transparent 60%);box-shadow:0 0 8px #3cff96;border:1px solid #3cff96}
.bar{position:fixed;z-index:3;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px calc(14px + env(safe-area-inset-bottom));pointer-events:none}
.bar>*{pointer-events:auto}.btns{display:flex;gap:8px}
.badge{font-size:11.5px;color:var(--mute);padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--mute)}
.badge.live::before{background:var(--g);box-shadow:0 0 8px var(--g)}.badge.sample::before{background:#ffaa28}
.panel{position:fixed;z-index:5;right:18px;top:calc(76px + env(safe-area-inset-top));width:min(390px,calc(100vw - 36px));max-height:calc(100vh - 160px);overflow:auto;padding:20px;border-radius:22px;
  background:linear-gradient(rgba(9,7,26,.88),rgba(9,7,26,.88)) padding-box,var(--edge) border-box;border:1.5px solid transparent;backdrop-filter:blur(16px);box-shadow:0 0 30px rgba(76,201,255,.18),0 24px 60px rgba(0,0,0,.55)}
.panel h2{font-size:21px;letter-spacing:-.2px}
.panel p{font-size:13.5px;line-height:1.55;color:#d3d8f5;margin-top:8px}
.panel .fine{font-size:11.5px;color:var(--mute)}
.x{position:absolute;right:12px;top:10px;background:none;border:0;font-size:24px;color:var(--mute);cursor:pointer;padding:2px 8px}
.ph{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-right:30px}
.ph span{color:var(--mute);font-size:13px;text-transform:uppercase;letter-spacing:1px}.rank{margin-left:auto}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px}
.stats div{border-radius:14px;padding:9px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.stats span{display:block;font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.stats b{font-size:15px}
.up{color:var(--g)}.down{color:var(--r)}
#spark{width:100%;height:130px;display:block}
.cap{font-size:11px!important;color:var(--mute)!important;margin-top:2px!important}
.prog{margin-top:14px;padding:14px;border-radius:16px;background:rgba(40,255,140,.05);border:1px solid rgba(40,255,140,.22)}
.ptop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:600}
.ptop em{font-style:normal;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#04030d;background:#ffd36b;border-radius:6px;padding:1px 6px;margin-left:4px}
.ptop b{font-size:24px}
.pbar,.fbar{height:9px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.pbar i,.fbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#0a7846,#3cff96);box-shadow:0 0 12px #3cff96}
.fbar{height:5px;margin-top:5px}
.chain{font-size:12.5px!important;color:var(--mute)!important}
.factors{list-style:none;margin-top:8px}
.factors li{padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.fx{display:flex;justify-content:space-between;font-size:13px;font-weight:600}.fx b{font-size:13px;color:#c9fbe0}
.factors p{font-size:12px!important;margin-top:5px!important;color:#b9c0e3!important}
.plain{margin:8px 0 0 18px;font-size:13px;line-height:1.55;color:#d3d8f5}.plain li{margin-top:6px}
[hidden]{display:none!important}
@media (max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:10px}
  .legend{top:calc(118px + env(safe-area-inset-top));max-width:none;right:12px;left:12px}
  .chip{font-size:10px;padding:4px 8px}
  .panel{left:10px;right:10px;width:auto;top:auto;bottom:calc(72px + env(safe-area-inset-bottom));max-height:64vh}
  .pill{padding:9px 13px;font-size:12px}.badge{max-width:44vw}
}