/* Float Chain · on top of Float's own design system (app.css): the chain hero, white link chips, chain strips,
 * market categories, the chain builder and the 3D preview. */
:root { --link: #f3f6fc; --link-ink: #06183d; --navy: #022866; }
.hide-xs { display: none; }
@media (min-width: 520px) { .hide-xs { display: inline-flex; } }

/* ---------------------------------------------------------------- hero: chains running round the headline */
.fhero { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 4.75rem); padding: 2rem 0 5.5rem; isolation: isolate; }
.fstage { position: absolute; left: 0; right: 0; top: -4.75rem; bottom: 0; z-index: -1; overflow: hidden; background: radial-gradient(70rem 42rem at 50% 46%, #0a2659 0%, #041232 46%, var(--bg) 78%); }
.fstage canvas, .fstage .fposter { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fstage .fposter { object-fit: cover; transition: opacity .7s ease; }
.fstage canvas { opacity: 0; transition: opacity .7s ease; }
.fstage.live canvas { opacity: 1; }
.fstage.live .fposter { opacity: 0; }
.fshade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(44% 34% at 50% 50%, #020713d9 0%, #020713a6 46%, #02071300 76%), linear-gradient(to bottom, #02071300 72%, var(--bg) 99%); }
.fhero-c { position: relative; max-width: 54rem; padding: 0 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.fh1 { font-size: clamp(3.1rem, 9.2vw, 7.6rem); line-height: .9; font-weight: 700; letter-spacing: -.048em; text-wrap: balance; text-shadow: 0 2px 30px #02071399; }
.fh1 span { color: #dfe9fb; }
.fsub { margin-top: 1.5rem; max-width: 35rem; font-size: clamp(.98rem, 1.5vw, 1.125rem); line-height: 1.55; color: #b9c7e2; text-wrap: pretty; text-shadow: 0 1px 16px #020713; }
.fctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.fcta { display: inline-flex; align-items: center; justify-content: center; min-width: 13.5rem; height: 3.25rem; padding: 0 1.75rem; border-radius: .875rem; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: .16em; box-shadow: 0 10px 40px -10px #3d8bffaa, inset 0 1px 0 #ffffff33; transition: transform .15s, box-shadow .15s; }
.fcta:hover { transform: translateY(-1px); box-shadow: 0 14px 44px -10px #3d8bffcc, inset 0 1px 0 #ffffff33; }
.fcta2 { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; padding: 0 1.5rem; border-radius: .875rem; border: 1px solid #ffffff26; background: #04122e99; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .875rem; font-weight: 600; color: var(--text); transition: background .15s, border-color .15s; }
.fcta2:hover { background: #0a1d40cc; border-color: #ffffff40; }
#hero-pill:empty { display: none; }
.fscroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
.fscroll i { width: 1px; height: 2rem; background: linear-gradient(#8d9cba, #8d9cba00); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 640px) {
  .fhero { min-height: calc(100svh - 4.25rem); padding: 1rem 0 6.25rem; }
  .fh1 { font-size: clamp(2.9rem, 14.2vw, 4.2rem); }
  .fsub { font-size: .95rem; margin-top: 1.1rem; }
  .fctas { width: 100%; flex-wrap: nowrap; gap: .6rem; margin-top: 1.6rem; }
  .fcta, .fcta2 { flex: 1 1 0; min-width: 0; height: 3.1rem; padding: 0 .8rem; }
  .fcta { letter-spacing: .1em; font-size: .8125rem; }
  .fshade { background: radial-gradient(80% 30% at 50% 50%, #020713c4 0%, #0207137a 55%, #02071300 85%), linear-gradient(to bottom, #02071300 80%, var(--bg) 99%); }
  .fscroll { display: none; }
}
@media (max-width: 480px) {
  .brand { font-size: 1.08rem; letter-spacing: .1em; gap: .5rem; }
  .brand img { width: 1.6rem; height: 1.6rem; }
}
@media (max-width: 400px) { .hdr .navlink { display: none; } }

/* ---------------------------------------------------------------- sections */
.fsec { margin: 6.5rem auto 0; max-width: 72rem; padding: 0 1rem; }
.fsec-h { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.fsec-p { margin-top: .9rem; max-width: 38rem; font-size: 1rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.fsec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lnk2 { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: .15rem; }
.lnk2:hover { border-color: var(--text); }

/* white link chips: one per link of a chain, joined by a small chain glyph */
.cstrip { display: flex; align-items: center; flex-wrap: wrap; row-gap: .6rem; }
.cl { display: inline-flex; align-items: center; gap: .45rem; height: 2.35rem; padding: 0 .9rem 0 .3rem; border-radius: 9999px; background: var(--link); color: var(--link-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: inset 0 -2px 0 #06183d1f, 0 6px 18px -8px #000; flex: none; }
.cl img, .cl .ini { width: 1.8rem; height: 1.8rem; border-radius: 9999px; object-fit: cover; flex: none; background: #dfe7f5; }
.cl .ini { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--link-ink); }
.cl.you { background: var(--accent); color: #fff; box-shadow: inset 0 -2px 0 #0003, 0 8px 22px -8px #3d8bff99; }
.cl.you img { background: #ffffff33; }
.cl.more { padding: 0 .9rem; background: transparent; color: var(--text); border: 1.5px dashed #ffffff40; box-shadow: none; }
.cj { width: 1.55rem; height: 1rem; flex: none; color: #c9d6ee; margin: 0 -.05rem; }
.cstrip.v { flex-direction: column; align-items: flex-start; row-gap: 0; }
.cstrip.v .cj { transform: rotate(90deg); margin: .2rem 0 .2rem .62rem; width: 1.5rem; height: 1rem; }
.cstrip.sm .cl { height: 1.9rem; font-size: .75rem; padding: 0 .7rem 0 .22rem; }
.cstrip.sm .cl img, .cstrip.sm .cl .ini { width: 1.45rem; height: 1.45rem; }
.cstrip.sm .cj { width: 1.15rem; }

/* how a chain works */
.how3 { margin-top: 2.25rem; display: grid; gap: 1rem; }
@media (min-width: 900px) { .how3 { grid-template-columns: repeat(3, 1fr); } }
.hcard { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 20rem; border-radius: 1.25rem; border: 1px solid var(--line); background: linear-gradient(180deg, #0b1d3c 0%, var(--card) 60%); padding: 1.5rem; }
.hcard .n { font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.hcard h3 { margin-top: .6rem; font-size: 1.6rem; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.hcard p { margin-top: .6rem; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.hcard .vis { margin-top: auto; padding-top: 1.75rem; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.mgrid span { position: relative; aspect-ratio: 1; border-radius: 9999px; overflow: hidden; background: #ffffff10; border: 1px solid #ffffff14; }
.mgrid span img { width: 100%; height: 100%; object-fit: cover; }
.mgrid span.on { outline: 2.5px solid var(--link); outline-offset: 2px; }

/* every market on Float */
.mcats { margin-top: 2.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (min-width: 900px) { .mcats { grid-template-columns: repeat(4, 1fr); } }
.mcat { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 10rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--card); padding: 1.1rem 1.1rem 1rem; transition: background .15s, border-color .15s; }
.mcat:hover { background: var(--card-hover); border-color: var(--line-strong); }
.mcat .t { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.mcat b { font-size: 1.05rem; font-weight: 700; }
.mcat .c { font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.mcat small { display: block; margin-top: .2rem; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.mcat .lg { display: flex; padding-left: 8px; }
.mcat .lg img { width: 32px; height: 32px; border-radius: 9999px; margin-left: -8px; border: 2px solid var(--card); background: #fff; object-fit: cover; }
.mcat:hover .lg img { border-color: var(--card-hover); }

/* Float coins you can chain onto + live chains */
.fgrid { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fgrid { grid-template-columns: 1fr 1fr 1fr; } }
.cc .chainon { position: absolute; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border-radius: 9999px; background: var(--link); color: var(--link-ink); font-size: .75rem; font-weight: 700; z-index: 2; }
.cc .chainon svg { width: .9rem; height: .9rem; }
.cc .chainon:hover { background: #fff; }
.cc .ftag { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .3rem; border-radius: 9999px; border: 1px solid var(--line-strong); background: #050f22cc; padding: .15rem .55rem; font-size: 10.5px; font-weight: 600; color: var(--muted); z-index: 2; }
.cc .ftag img { width: 12px; height: 12px; }
.cc.chainc { height: auto; min-height: 12.5rem; gap: 1rem; }
.cc.chainc .cstrip { position: relative; z-index: 1; }
.cc .livechip { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: 9999px; background: #3d8bff1f; border: 1px solid #3d8bff55; padding: .15rem .55rem; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #cfe0ff; z-index: 2; }
.cc .livechip i { width: .4rem; height: .4rem; border-radius: 9999px; background: #8fbcff; box-shadow: 0 0 0 3px #8fbcff33; animation: pulse 1.6s ease-in-out infinite; }
.cc .livechip.soon { background: #ffffff0d; border-color: var(--line-strong); color: var(--muted); }
.cc .livechip.soon i { background: var(--faint); box-shadow: none; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #8fbcff00; } }
.cc.own .ownact { position: absolute; right: 1rem; top: 1rem; display: flex; gap: .4rem; z-index: 2; }
.cc.own .ownact .livechip { position: static; }
.cc.own .ownchart { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid var(--line-strong); background: #050f22cc; padding: .15rem .6rem; font-size: 10.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.cc .offi { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: #cfe0ff; }
.cc .offi img { width: 14px; height: 14px; }

/* the fee split */
.fsplit { margin-top: 2rem; border-radius: 1.25rem; border: 1px solid var(--line); background: var(--card); padding: 1.25rem; }
.fbar { display: flex; height: 3.25rem; border-radius: .9rem; overflow: hidden; gap: 3px; }
.fbar div { display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; background: #12284f; color: var(--muted); }
.fbar div.me { background: var(--link); color: var(--link-ink); }
.fbar div.hd { background: #1d3f7a; color: var(--text); }
.flegend { margin-top: 1.1rem; display: grid; gap: .75rem 1.5rem; }
@media (min-width: 760px) { .flegend { grid-template-columns: repeat(5, 1fr); } }
.flegend div b { display: block; font-size: .875rem; font-weight: 700; }
.flegend div small { display: block; margin-top: .2rem; font-size: .75rem; line-height: 1.45; color: var(--muted); }
.flegend div.me b { color: #fff; }

/* footer */
.ffoot { margin: 7rem auto 0; max-width: 72rem; padding: 2.5rem 1rem 8rem; border-top: 1px solid var(--line); display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .ffoot { grid-template-columns: 1.4fr 1fr 1fr; } }
.ffoot .fb { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; }
.ffoot .fb img { width: 28px; height: 28px; }
.ffoot p { margin-top: .6rem; max-width: 22rem; font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.ffoot h4 { font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--faint); }
.ffoot ul { margin-top: .7rem; list-style: none; display: grid; gap: .45rem; font-size: .875rem; }
.ffoot ul a { color: var(--muted); } .ffoot ul a:hover { color: var(--text); }
.ffoot .fca { margin-top: .9rem; display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; border-radius: .7rem; border: 1px solid var(--line); background: var(--surface); padding: .45rem .7rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); word-break: break-all; text-align: left; }
.ffoot .risk { grid-column: 1 / -1; font-size: .75rem; color: var(--faint); }

/* ---------------------------------------------------------------- launch: the chain builder */
.c3d { position: relative; height: 13.5rem; margin-top: 1rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(28rem 14rem at 50% 50%, #0d2a5e, #04112b 70%); }
.c3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.c3d .cap { position: absolute; left: .85rem; bottom: .7rem; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #8d9cbacc; }
.chained { margin-top: 1rem; display: grid; gap: .5rem; }
.lrow { display: flex; align-items: center; gap: .75rem; border-radius: .9rem; border: 1px solid var(--line); background: var(--surface); padding: .55rem .6rem .55rem .7rem; min-width: 0; }
.lrow .ix { width: 1.6rem; flex: none; font-family: var(--mono); font-size: .75rem; color: var(--faint); text-align: center; }
.lrow img, .lrow .ini { width: 34px; height: 34px; border-radius: 9999px; flex: none; object-fit: cover; background: var(--card-hover); }
.lrow .ini { display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--muted); }
.lrow .tx { min-width: 0; flex: 1; }
.lrow .tx b { display: block; font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .tx small { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .kind { flex: none; border-radius: 9999px; border: 1px solid var(--line-strong); padding: .1rem .5rem; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lrow .ops { display: flex; gap: .2rem; flex: none; }
.lrow .ops button { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; color: var(--muted); }
.lrow .ops button:hover { background: var(--card-hover); color: var(--text); }
.lrow .ops button:disabled { opacity: .3; }
.lrow .ops svg { width: 15px; height: 15px; }
.lrow.first { border-color: #3d8bff66; background: #3d8bff12; }
.lrow.first .kind { border-color: #3d8bff66; color: #cfe0ff; }
.addlink { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 3rem; border-radius: .9rem; border: 1.5px dashed var(--line-strong); color: var(--text); font-size: .875rem; font-weight: 600; transition: background .15s, border-color .15s; }
.addlink:hover { background: #09172e; border-color: #3d8bff88; }
.hint2 { margin-top: .7rem; font-size: .75rem; color: var(--muted); }
.quick { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.quick button { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .7rem 0 .25rem; border-radius: 9999px; border: 1px solid var(--line); background: var(--surface); font-size: .75rem; font-weight: 600; color: var(--muted); transition: all .15s; }
.quick button img { width: 1.5rem; height: 1.5rem; border-radius: 9999px; object-fit: cover; }
.quick button:hover { color: var(--text); border-color: var(--line-strong); }
.quick button.any { padding: 0 .8rem; border-style: dashed; color: var(--text); }

/* the link picker (modal) */
.modal.wide { max-width: 34rem; }
.pk-tabs { margin-top: .9rem; display: flex; gap: .35rem; border-radius: .8rem; background: var(--surface); padding: .25rem; border: 1px solid var(--line); }
.pk-tabs button { flex: 1; height: 2.1rem; border-radius: .6rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.pk-tabs button.on { background: var(--card-hover); color: var(--text); }
.pk-list { margin-top: .75rem; display: grid; gap: .4rem; max-height: min(52vh, 24rem); overflow-y: auto; padding-right: .2rem; }
.pk-list::-webkit-scrollbar { width: 8px; } .pk-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.pk-item { display: flex; align-items: center; gap: .7rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--surface); padding: .5rem .65rem; text-align: left; min-width: 0; transition: border-color .15s; }
.pk-item:hover { border-color: var(--line-strong); }
.pk-item img, .pk-item .ini { width: 32px; height: 32px; border-radius: 9999px; flex: none; object-fit: cover; background: var(--card-hover); }
.pk-item .ini { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--muted); }
.pk-item .tx { min-width: 0; flex: 1; }
.pk-item b { display: block; font-size: .875rem; }
.pk-item small { display: block; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-item .r { flex: none; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-item.in { opacity: .45; pointer-events: none; }
.pk-note { margin-top: .6rem; font-size: .75rem; color: var(--muted); }

/* coin page: the chain card */
.chainc2 { padding: 1.25rem; }
.chainc2 .kk { font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--muted); }
.chainc2 .cstrip { margin-top: 1rem; }
.chainc2 .pnote { margin-top: 1rem; font-size: .8125rem; color: var(--muted); line-height: 1.55; }

/* markets page */
.mk-head { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.mk-head .inp { max-width: 22rem; }
.tbl .mkt-t { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tbl .mkt-t img, .tbl .mkt-t .ini { width: 30px; height: 30px; border-radius: 9999px; flex: none; object-fit: cover; background: var(--card-hover); }
.tbl .mkt-t .ini { display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--muted); }
.tbl .mkt-t b { display: block; font-size: .875rem; }
.tbl .mkt-t small { display: block; font-size: .75rem; color: var(--muted); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.usebtn { display: inline-flex; align-items: center; height: 1.9rem; padding: 0 .8rem; border-radius: 9999px; background: var(--link); color: var(--link-ink); font-size: .75rem; font-weight: 700; }
.usebtn:hover { background: #fff; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .fscroll i { animation: none; } }

/* category tabs scroll sideways on phones instead of widening the page */
#mk-t { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#mk-t::-webkit-scrollbar { display: none; }
#mk-t button { flex: none; white-space: nowrap; }
.page { min-width: 0; }
.tbl { min-width: 0; max-width: 100%; }

@media (max-width: 560px) {
  .lrow .kind { display: none; }
  .lrow { gap: .55rem; }
  .tbl.mk th:nth-child(2), .tbl.mk td:nth-child(2), .tbl.mk th:last-child, .tbl.mk td:last-child { display: none; }
  .tbl.mk td:first-child { white-space: normal; }
}

/* inline icons inside buttons and links keep their size */
.btn svg, .lnk2 svg, .btn-ghost svg { width: 1rem; height: 1rem; flex: none; }