/* Floatbasket · Float's own tokens (floatlaunch.xyz) + the basket pieces */
@font-face { font-family: Geist; src: url(/assets/fonts/geist-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Geist; src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #020713; --surface: #050f22; --card: #09172e; --card-hover: #0e2040; --border: #16294a; --border-strong: #223d6b;
  --text: #e8eef9; --muted: #8d9cba; --faint: #51617f; --accent: #3d8bff; --accent-text: #fff; --good: #6ee7a0; --bad: #f87171;
  --navy: #022866; --r: 16px; --r-sm: 12px;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font: Geist, 'Geist Fallback', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60rem 36rem at 50% -8rem, rgba(61, 139, 255, .13), transparent 70%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.up { color: var(--good); }
.dn { color: var(--bad); }
::selection { background: rgba(61, 139, 255, .35); }

/* header (Float's) */
.hdr { position: relative; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; max-width: 1280px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.hnav { display: flex; gap: 1.4rem; margin-left: 2rem; font-size: .875rem; color: var(--muted); }
.hnav a:hover, .hnav a.on { color: var(--text); }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.solp { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px; padding: .38rem .75rem; font-size: .75rem; font-weight: 700; }
.solp i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.wbtn, .hca { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border-strong); background: rgba(9, 23, 46, .6); border-radius: 999px; padding: .45rem .9rem; font: 700 .75rem var(--mono); white-space: nowrap; }
.wbtn:hover, .hca:hover { background: var(--card-hover); }
.wbtn img { width: 16px; height: 16px; border-radius: 4px; }
.hca { color: var(--muted); }
.hca b { color: var(--text); font-weight: 700; }

/* dock (Float's) */
.dock { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; }
.dock-in { display: flex; gap: .3rem; padding: .35rem; border-radius: 18px; background: rgba(5, 15, 34, .82); border: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .6); }
.dock a { position: relative; width: 46px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); transition: background .2s, color .2s; }
.dock a svg { width: 20px; height: 20px; }
.dock a:hover { color: var(--text); }
.dock a.on { background: var(--card-hover); color: var(--text); }
.dock a.on::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* hero */
.view { min-height: 70vh; padding-bottom: 7rem; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.25rem 3rem; max-width: 900px; margin: 0 auto; }
.stage { position: relative; width: min(620px, 94vw, 66svh); aspect-ratio: 1.32; margin-top: -.5rem; }
.stage canvas, .stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .poster { object-fit: contain; transition: opacity .6s ease; }
.stage.live .poster { opacity: 0; }
.stage canvas { opacity: 0; transition: opacity .6s ease; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.stage.live canvas { opacity: 1; }
.glow { position: absolute; left: 50%; top: 56%; width: 78%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 139, 255, .32), rgba(61, 139, 255, 0)); filter: blur(28px); animation: glow-breathe 6s ease-in-out infinite; }
@keyframes glow-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.h1 { margin: .4rem 0 0; font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; }
.sub { margin: 1rem auto 0; max-width: 34rem; font-size: .95rem; color: var(--muted); line-height: 1.55; }
.cta { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1.8rem; width: 100%; max-width: 20rem; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-text); padding: .9rem 1.2rem; font-size: .875rem; font-weight: 700; letter-spacing: .15em; box-shadow: 0 0 40px -8px var(--accent); transition: opacity .2s, transform .2s; }
.cta:hover { opacity: .9; }
.cta:active { transform: scale(.98); }
.cta[disabled] { opacity: .45; pointer-events: none; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); padding: .75rem 1.1rem; font-size: .875rem; font-weight: 600; background: rgba(9, 23, 46, .5); transition: background .2s; }
.btn2:hover { background: var(--card-hover); }
.btn2.sm { padding: .5rem .8rem; font-size: .8rem; }
#hero-pill { margin-top: 1rem; min-height: 2.4rem; display: flex; justify-content: center; }
.capill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--border); background: rgba(9, 23, 46, .6); border-radius: 999px; padding: .3rem .35rem .3rem .4rem; font-size: .8rem; max-width: 100%; }
.capill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.capill b { font-weight: 700; }
.capill .mono { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capill .cpy { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.capill .cpy svg { width: 13px; height: 13px; }
.capill .chart { border-radius: 999px; background: var(--card-hover); padding: .25rem .65rem; font-weight: 700; font-size: .72rem; }
.hlinks { margin-top: 1.4rem; display: flex; gap: .6rem; font-size: .75rem; color: var(--faint); }
.hlinks a:hover { color: var(--muted); }

/* sections */
.sec { max-width: 1120px; margin: 0 auto; padding: 4.5rem 1.25rem 0; }
.sh2 { margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.4rem); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; max-width: 46rem; }
.lead { margin: .9rem 0 0; color: var(--muted); max-width: 40rem; font-size: .98rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* one pair vs a basket */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.cmpc { padding: 1.4rem; position: relative; overflow: hidden; }
.cmpc h3 { margin: 0; font-size: .78rem; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.cmpc .coin { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; }
.cmpc .coin .av { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(145deg, #1d3c74, #0b1d3d); border: 1px solid var(--border-strong); display: grid; place-items: center; overflow: hidden; font: 800 1.1rem var(--mono); color: #cfe0ff; }
.cmpc .coin .av img { width: 100%; height: 100%; object-fit: cover; }
.cmpc .coin b { font-size: 1.05rem; }
.cmpc .coin small { display: block; color: var(--muted); font-size: .78rem; }
.cmpc.hi { border-color: rgba(61, 139, 255, .45); background: linear-gradient(180deg, rgba(61, 139, 255, .10), rgba(61, 139, 255, 0) 60%), var(--card); }
.cmpc p { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; }
.onepair { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: .35rem .8rem .35rem .4rem; font-weight: 700; font-size: .85rem; }
.onepair img { width: 24px; height: 24px; border-radius: 50%; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.st3 { padding: 1.3rem; }
.st3 .n { width: 30px; height: 30px; border-radius: 9px; background: var(--card-hover); border: 1px solid var(--border-strong); display: grid; place-items: center; font: 700 .8rem var(--mono); color: var(--accent); }
.st3 h4 { margin: .9rem 0 0; font-size: 1.02rem; }
.st3 p { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; }

/* weight bar + logo stack */
.wbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface); gap: 2px; }
.wbar i { display: block; height: 100%; min-width: 3px; }
.wbar.lg { height: 14px; }
.lstack { display: flex; align-items: center; }
.lstack img, .lstack .ini { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); margin-left: -7px; background: var(--surface); object-fit: cover; }
.lstack img:first-child, .lstack .ini:first-child { margin-left: 0; }
.lstack .more { margin-left: .4rem; font-size: .72rem; color: var(--muted); font-weight: 700; }
.ini { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card-hover); color: var(--text); font: 700 .62rem var(--mono); text-transform: uppercase; flex: none; }
.lgnd { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .7rem; font-size: .78rem; color: var(--muted); }
.lgnd span { display: inline-flex; align-items: center; gap: .35rem; }
.lgnd i { width: 8px; height: 8px; border-radius: 2px; }
.lgnd b { color: var(--text); font-weight: 600; }

/* builder */
.bld { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin-top: 2rem; align-items: start; }
.shelf { padding: 1rem; }
.tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: .45rem .8rem; border-radius: 10px; font-size: .8rem; font-weight: 600; color: var(--muted); border: 1px solid transparent; }
.tabs button.on { background: var(--card-hover); color: var(--text); border-color: var(--border-strong); }
.mkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-top: .8rem; max-height: 420px; overflow-y: auto; overflow-x: hidden; padding-right: .2rem; }
.mkgrid::-webkit-scrollbar { width: 6px; } .mkgrid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.mk { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; transition: border-color .15s, background .15s; min-width: 0; }
.mk:hover { border-color: var(--border-strong); background: var(--card-hover); }
.mk img, .mk .ini { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.mk .tx { min-width: 0; flex: 1; }
.mk b { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk small { display: block; font: 500 .68rem var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk.in { border-color: var(--accent); background: rgba(61, 139, 255, .12); }
.mk .ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; display: grid; place-items: center; }
.mk.in .ck { background: var(--accent); border-color: var(--accent); }
.mk.in .ck::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.mk.any { border-style: dashed; justify-content: center; color: var(--accent); font-weight: 700; font-size: .82rem; }
.anynote { margin: .7rem .2rem 0; font-size: .78rem; color: var(--faint); }
.bpane { padding: 1rem; position: sticky; top: 1rem; }
.bstage { position: relative; aspect-ratio: 1.35; margin: -.4rem -.4rem 0; }
.bstage canvas, .pstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.bstage .glow { width: 70%; height: 50%; }
.legs { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }
.leg { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 26px; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.leg img, .leg .ini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.leg .nm { min-width: 0; }
.leg .nm b { font-size: .82rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg .nm small { display: block; font-size: .66rem; color: var(--faint); }
.leg .lead-tag { color: var(--accent); font-weight: 700; }
.leg .x { width: 26px; height: 26px; display: grid; place-items: center; color: var(--faint); border-radius: 8px; }
.leg .x:hover { color: var(--text); background: var(--card-hover); }
.leg .x svg { width: 14px; height: 14px; }
.wnum { display: flex; align-items: center; gap: .3rem; }
.wnum button { width: 24px; height: 24px; border-radius: 7px; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); font-weight: 700; line-height: 1; }
.wnum button:hover { color: var(--text); border-color: var(--border-strong); }
.wnum output { width: 40px; text-align: center; font: 700 .8rem var(--mono); }
.btot { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; font-size: .8rem; color: var(--muted); }
.btot b { font-family: var(--mono); color: var(--text); }
.bnote { margin: .7rem 0 0; font-size: .78rem; color: var(--faint); }
.empty-legs { padding: 1rem; text-align: center; color: var(--faint); font-size: .85rem; border: 1px dashed var(--border-strong); border-radius: 12px; }

/* rules */
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.rule { padding: 1.2rem; display: flex; flex-direction: column; min-height: 15rem; }
.rule .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(61, 139, 255, .12); border: 1px solid rgba(61, 139, 255, .35); color: #9cc3ff; }
.rule .ic svg { width: 20px; height: 20px; }
.rule h4 { margin: 1rem 0 0; font-size: 1.05rem; }
.rule p { margin: .4rem 0 0; font-size: .86rem; color: var(--muted); }
.rule .now { margin-top: auto; padding-top: 1rem; font-size: .78rem; color: var(--faint); }
.rule .now .pick { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; color: var(--text); font-weight: 600; font-size: .85rem; }
.rule .now .pick img, .rule .now .pick .ini { width: 22px; height: 22px; border-radius: 50%; }

/* fee split */
.split { margin-top: 2rem; padding: 1.4rem; }
.sbar { display: flex; height: 54px; border-radius: 14px; overflow: hidden; gap: 3px; }
.sbar > div { position: relative; display: flex; align-items: flex-end; padding: .5rem .6rem; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .92); min-width: 0; }
.sbar > div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar .s-h { background: #16294a; flex: 15; }
.sbar .s-c { background: var(--accent); flex: 5; box-shadow: 0 0 30px -4px var(--accent); }
.sbar .s-f { background: #0e2040; flex: 35; }
.sbar .s-t { background: #0b1b36; flex: 35; }
.sbar .s-x { background: #081430; flex: 10; }
.skey { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-top: 1rem; }
.skey div { font-size: .8rem; color: var(--muted); }
.skey b { display: block; color: var(--text); font-size: .95rem; font-family: var(--mono); }
.skey .hl b { color: var(--accent); }
.vaultrow { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.vaultrow .vic { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); display: grid; place-items: center; }
.vaultrow .vic img { width: 34px; height: 34px; }
.vaultrow p { margin: 0; font-size: .88rem; color: var(--muted); }
.vaultrow p b { color: var(--text); font-weight: 600; }

/* coins */
.coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.cc { display: flex; flex-direction: column; padding: 1rem; transition: border-color .2s, background .2s, transform .2s; min-width: 0; }
.cc:hover { border-color: var(--border-strong); background: var(--card-hover); }
.cc .top { display: flex; gap: .8rem; align-items: center; min-width: 0; }
.cc .av { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--surface); flex: none; }
.cc .nm { min-width: 0; flex: 1; }
.cc .nm b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc .nm small { color: var(--muted); font-size: .78rem; font-family: var(--mono); }
.cc .mc { text-align: right; font: 700 .9rem var(--mono); }
.cc .mc small { display: block; font: 500 .68rem var(--font); color: var(--faint); }
.cc .wbar { margin-top: .9rem; }
.cc .bt { display: flex; justify-content: space-between; align-items: center; margin-top: .7rem; gap: .5rem; }
.cc .rl { font-size: .72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.cc.own { border-color: rgba(61, 139, 255, .5); }
.livechip { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--good); }
.livechip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.livechip.soon { color: var(--muted); }
.cc.open { align-items: center; justify-content: center; text-align: center; border-style: dashed; min-height: 160px; color: var(--muted); gap: .3rem; }
.cc.open .plus { width: 38px; height: 38px; border-radius: 12px; border: 1px dashed var(--border-strong); display: grid; place-items: center; color: var(--accent); }
.cc.open b { color: var(--text); font-size: .95rem; }
.cc.open small { font-size: .78rem; }

/* markets */
.mtape { margin-top: 2rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mtape .row { display: flex; gap: .6rem; width: max-content; animation: tape 70s linear infinite; }
.mtape .row.r2 { animation-duration: 90s; animation-direction: reverse; margin-top: .6rem; }
@keyframes tape { to { transform: translateX(-50%); } }
.mtape .t { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: .8rem; white-space: nowrap; }
.mtape .t img { width: 24px; height: 24px; border-radius: 50%; }
.mtape .t b { font-weight: 700; }
.mtape .t .mono { font-size: .72rem; color: var(--muted); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.4rem; }
.cat { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; transition: border-color .2s, background .2s; }
.cat:hover { border-color: var(--border-strong); background: var(--card-hover); }
.cat b { font-size: .95rem; }
.cat small { color: var(--muted); font-size: .78rem; }

/* pages */
.page { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 0; }
.ph1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.psub { margin: .6rem 0 0; color: var(--muted); max-width: 42rem; }
.xhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.tools { display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.inp, .ta { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .75rem .9rem; color: var(--text); font: 500 .92rem var(--font); outline: none; transition: border-color .15s; }
.inp:focus, .ta:focus { border-color: var(--accent); }
.inp::placeholder, .ta::placeholder { color: var(--faint); }
.ta { min-height: 84px; resize: vertical; }
.search { position: relative; flex: 1; min-width: 220px; }
.search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); }
.search .inp { padding-left: 2.4rem; }
.seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.seg button { padding: .5rem .85rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--card-hover); color: var(--text); }

/* create */
.cgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.2rem; margin-top: 1.6rem; align-items: start; }
.fcard { padding: 1.2rem; }
.fcard + .fcard { margin-top: 1rem; }
.fcard h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fcard h3 small { font-weight: 500; color: var(--faint); font-size: .78rem; }
.fcard .hint { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
.fld { margin-top: .9rem; }
.fld label:not(.upbox), .lbl { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .4rem; font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.upbox { display: flex; align-items: center; gap: 1rem; padding: .9rem; border: 1px dashed var(--border-strong); border-radius: 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; }
.upbox:hover, .upbox.drag { border-color: var(--accent); background: rgba(61, 139, 255, .06); }
.upbox .th { width: 64px; height: 64px; border-radius: 14px; background: var(--card); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--faint); }
.upbox .th img { width: 100%; height: 100%; object-fit: cover; }
.upbox .th svg { width: 26px; height: 26px; }
.upbox b { display: block; font-size: .9rem; }
.upbox small { color: var(--faint); font-size: .76rem; }
.upbox .pick { margin-left: auto; border-radius: 999px; border: 1px solid var(--border-strong); padding: .35rem .8rem; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.upbox input { display: none; }
.more-t { margin-top: .9rem; font-size: .82rem; color: var(--accent); font-weight: 600; }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .8rem; }
.ropt { text-align: left; padding: .8rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color .15s; }
.ropt b { display: block; font-size: .88rem; }
.ropt small { display: block; color: var(--muted); font-size: .76rem; margin-top: .2rem; }
.ropt.on { border-color: var(--accent); background: rgba(61, 139, 255, .1); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--surface) var(--p, 0%)); border: 1px solid var(--border); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); cursor: pointer; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer; }
.cutrow { display: flex; align-items: center; gap: .9rem; margin-top: .6rem; }
.cutrow output { font: 700 .9rem var(--mono); min-width: 3.2rem; text-align: right; }
.prev { position: sticky; top: 1rem; padding: 1.1rem; }
.prev .pstage { position: relative; aspect-ratio: 1.3; margin: -.5rem -.5rem 0; }
.prev .pstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcoin { display: flex; align-items: center; gap: .8rem; }
.pcoin .av { width: 50px; height: 50px; border-radius: 12px; background: var(--surface); overflow: hidden; display: grid; place-items: center; color: var(--faint); flex: none; }
.pcoin .av img { width: 100%; height: 100%; object-fit: cover; }
.pcoin b { font-size: 1.05rem; display: block; }
.pcoin small { color: var(--muted); font-size: .8rem; }
.sumrows { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .84rem; }
.sumrows div { display: flex; justify-content: space-between; gap: 1rem; }
.sumrows span { color: var(--muted); }
.sumrows b { font-weight: 600; text-align: right; }
.gate { margin-top: .8rem; text-align: center; font-size: .8rem; color: var(--faint); }
.err { color: var(--bad); font-size: .84rem; margin: .6rem 0 0; min-height: 1em; }

/* coin page */
.cphead { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.cphead .av { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; background: var(--surface); }
.cphead h1 { margin: 0; font-size: 1.8rem; letter-spacing: -.03em; }
.cphead .tk { color: var(--muted); font: 600 .9rem var(--mono); }
.cplinks { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.cpgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.4rem; align-items: start; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1rem; }
.stat { padding: .9rem; }
.stat small { display: block; color: var(--faint); font-size: .72rem; }
.stat b { font: 700 1.05rem var(--mono); }
.chartbox { padding: 1rem; }
.chartbox canvas { width: 100%; height: 240px; display: block; }
.ltab { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ltab th { text-align: left; color: var(--faint); font-weight: 600; font-size: .72rem; padding: .4rem .3rem; border-bottom: 1px solid var(--border); }
.ltab td { padding: .55rem .3rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ltab td.r, .ltab th.r { text-align: right; font-family: var(--mono); }
.ltab .tkc { display: flex; align-items: center; gap: .5rem; }
.ltab .tkc img, .ltab .tkc .ini { width: 24px; height: 24px; border-radius: 50%; }
.ltab tr.next td { background: rgba(61, 139, 255, .08); }
.nextpill { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 700; color: var(--accent); border: 1px solid rgba(61, 139, 255, .45); border-radius: 999px; padding: .08rem .45rem; margin-left: .4rem; white-space: nowrap; }
.votebar { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; margin-top: .3rem; }
.votebar i { display: block; height: 100%; background: var(--accent); }
.vbtn { border-radius: 8px; border: 1px solid var(--border-strong); padding: .3rem .6rem; font-size: .74rem; font-weight: 700; }
.vbtn:hover { background: var(--card-hover); }
.vbtn.on { background: var(--accent); border-color: var(--accent); }

/* markets page */
.mtab { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .88rem; }
.mtab th { text-align: left; color: var(--faint); font-weight: 600; font-size: .74rem; padding: .6rem .5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
.mtab td { padding: .6rem .5rem; border-bottom: 1px solid var(--border); }
.mtab td.r, .mtab th.r { text-align: right; font-family: var(--mono); }
.mtab .tkc { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.mtab .tkc img, .mtab .tkc .ini { width: 30px; height: 30px; border-radius: 50%; }
.mtab .tkc b { display: block; }
.mtab .tkc small { color: var(--faint); font-size: .74rem; }
.addb { border-radius: 9px; border: 1px solid var(--border-strong); padding: .35rem .7rem; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.addb.in { background: var(--accent); border-color: var(--accent); }
.bfloat { position: fixed; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 66px); transform: translateX(-50%); z-index: 29; display: none; align-items: center; gap: .7rem; padding: .45rem .5rem .45rem .6rem; border-radius: 999px; background: rgba(9, 23, 46, .92); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .7); }
.bfloat.on { display: flex; }
.bfloat .cta { margin: 0; width: auto; padding: .55rem 1rem; font-size: .74rem; }
.bfloat span { font-size: .8rem; font-weight: 600; white-space: nowrap; }

/* docs */
.doc { max-width: 760px; }
.doc h2 { margin: 2.2rem 0 .6rem; font-size: 1.3rem; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--muted); font-size: .95rem; }
.doc p b, .doc li b { color: var(--text); font-weight: 600; }
.doc ul { padding-left: 1.2rem; }
.doc .addr { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.doc .addr span { color: var(--muted); }
.doc .addr code { font: 500 .78rem var(--mono); color: var(--text); word-break: break-all; text-align: right; }
.toc { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.2rem; }
.toc a { font-size: .8rem; border: 1px solid var(--border); border-radius: 999px; padding: .3rem .75rem; color: var(--muted); }
.toc a:hover { color: var(--text); border-color: var(--border-strong); }

/* footer */
.ftr { max-width: 1120px; margin: 5rem auto 0; padding: 2rem 1.25rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .8rem; color: var(--faint); }
.ftr .fb { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.ftr .fb img { width: 22px; height: 22px; }
.ftr nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.ftr a:hover { color: var(--muted); }
.ftr .risk { width: 100%; margin: 0; }
.ftr .ca { font-family: var(--mono); color: var(--muted); cursor: pointer; word-break: break-all; }

/* modal + toast */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(1, 4, 12, .72); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1rem; }
.scrim.on { display: flex; }
.modal { width: min(440px, 100%); max-height: min(86vh, 760px); overflow-y: auto; background: var(--card); border: 1px solid var(--border-strong); border-radius: 18px; padding: 1.3rem; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.modal.wide { width: min(620px, 100%); }
.modal h3 { margin: 0; font-size: 1.15rem; }
.modal > p { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; }
.wl { display: flex; flex-direction: column; gap: .45rem; margin-top: 1rem; }
.wl button, .wl a { display: flex; align-items: center; gap: .7rem; padding: .75rem .85rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: .9rem; text-align: left; }
.wl button:hover, .wl a:hover { border-color: var(--border-strong); background: var(--card-hover); }
.wl img { width: 26px; height: 26px; border-radius: 7px; }
.wl small { margin-left: auto; color: var(--faint); font-weight: 500; font-size: .74rem; }
.mx { width: 100%; margin-top: 1rem; padding: .7rem; border-radius: 12px; border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: .86rem; }
.mx:hover { color: var(--text); border-color: var(--border-strong); }
.steps { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.1rem; }
.steps div { display: flex; align-items: center; gap: .65rem; font-size: .88rem; color: var(--faint); }
.steps i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.steps .now { color: var(--text); }
.steps .now i { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps .ok { color: var(--muted); }
.steps .ok i { background: var(--accent); border-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.done-coin { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .7rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.done-coin img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.mbtns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.mbtns a { display: flex; justify-content: center; padding: .75rem; border-radius: 12px; font-weight: 700; font-size: .86rem; }
.mbtns .p { background: var(--accent); }
.mbtns .s { border: 1px solid var(--border-strong); }
.cp { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.cp:hover { color: var(--text); background: var(--card-hover); }
.cp svg { width: 15px; height: 15px; }
.pk-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; max-height: 46vh; overflow-y: auto; }
.pk-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); text-align: left; }
.pk-item:hover { border-color: var(--border-strong); }
.pk-item.in { border-color: var(--accent); background: rgba(61, 139, 255, .1); }
.pk-item img, .pk-item .ini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pk-item .tx { flex: 1; min-width: 0; }
.pk-item b { display: block; font-size: .86rem; }
.pk-item small { color: var(--faint); font-size: .74rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-item .r { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.pk-note { margin: .6rem 0 0; color: var(--faint); font-size: .8rem; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); z-index: 60; background: var(--card-hover); border: 1px solid var(--border-strong); padding: .55rem 1rem; border-radius: 999px; font-size: .84rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* responsive */
@media (max-width: 980px) {
  .hnav { display: none; }
  .bld, .cgrid, .cpgrid { grid-template-columns: 1fr; }
  .bpane, .prev { position: static; }
  .rules { grid-template-columns: 1fr 1fr; }
  .cats { grid-template-columns: 1fr 1fr; }
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cmp { grid-template-columns: 1fr; }
  .skey { grid-template-columns: repeat(2, 1fr); }
  .sbar > div span { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .mtab .hide-s { display: none; }
}
@media (max-width: 560px) {
  .hdr { padding: .85rem 1rem; }
  .stage { width: min(94vw, 58svh); }
  .brand span { font-size: .95rem; }
  .solp { display: none; }
  .rules { grid-template-columns: 1fr; }
  .rule { min-height: 0; }
  .row2 { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: 1fr; }
  .sec { padding-top: 3.5rem; }
  .mkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 360px; }
  .stage { aspect-ratio: 1.08; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
  .wbtn { padding: .45rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { .glow, .mtape .row { animation: none; } .rv { opacity: 1; transform: none; transition: none; } }
/* grid items may shrink below their content (tab rows, legs) so nothing pushes the page wider than the phone */
.bld > *, .cgrid > *, .cpgrid > *, .cmp > *, .rules > *, .steps3 > *, .cats > * { min-width: 0; }