/* Everything under the prism hero on the home page. The section structure, sizes and rhythm come from
   sui.io's home page (statement, typed list, numbered stack cards, ASCII cone, two columns of pills,
   category cards, "Start ..." rows, the loop block and the tree footer), reworded for Longshot, set in
   Geist instead of Sui's licensed TWK Everett. Paper mode is all white, Serious mode is all black.
   Copied to site/hm/ by tools/retext.mjs; the markup is app/below.html, the behaviour app/below.js. */
.lb {
  --b-bg: var(--ds-background-200, #fafafa); --b-ink: #0a0a0a; --b-mute: #6c7584; --b-card: #f0f1f3; --b-card-2: #e0e2e6;
  --b-line: rgba(0, 0, 0, .1); --b-dash: rgba(0, 0, 0, .22); --b-blue: #298dff; --b-art: rgba(10, 10, 10, .42); --b-dim: #c5c9d0;
  --b-sans: var(--font-sans, Geist), system-ui, sans-serif; --b-mono: var(--font-mono, 'Geist Mono'), ui-monospace, monospace;
  position: relative; background: var(--b-bg); color: var(--b-mute); font: 400 16px/1.25 var(--b-sans); overflow-x: clip;
}
.dark .lb { --b-ink: #fff; --b-card: #131518; --b-card-2: #23262b; --b-line: rgba(255, 255, 255, .12); --b-dash: rgba(255, 255, 255, .26); --b-art: rgba(255, 255, 255, .42); --b-dim: #33373e; }
.lb *, .lb *::before, .lb *::after { box-sizing: border-box; }
.lb a { color: inherit; text-decoration: none; }
.lb h2, .lb h3, .lb h4, .lb p, .lb ul { margin: 0; padding: 0; font-weight: 400; }
.lb ul { list-style: none; }
.lb svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* type scale, as sui's */
.lb-h90 { font-size: clamp(48px, 6.25vw, 90px); line-height: 1; letter-spacing: -.06em; color: var(--b-ink); }
.lb-h78 { font-size: clamp(34px, 5.42vw, 78px); line-height: 1.1; letter-spacing: -.05em; color: var(--b-ink); }
.lb-h60 { font-size: clamp(36px, 4.17vw, 60px); line-height: 1.1; letter-spacing: -.05em; color: var(--b-ink); }
.lb-h44 { font-size: clamp(30px, 3.06vw, 44px); line-height: 1.1; letter-spacing: -.05em; color: var(--b-ink); }
.lb-tag { display: inline-block; padding: 6px; background: var(--b-card-2); color: var(--b-ink); font: 400 12px/12px var(--b-mono); letter-spacing: -.03em; }
.lb-mono { font: 400 12px/1.4 var(--b-mono); color: var(--b-ink); }
.lb-small { font: 400 10px/1.2 var(--b-mono); text-transform: uppercase; color: var(--b-ink); }
.lb-small b { font-weight: 400; margin-right: 6px; }

/* ---- coins strip */
.lb-strip { padding: 120px 0 0; }
.lb-strip-t { text-align: center; color: var(--b-ink); font-size: 16px; letter-spacing: -.02em; }
.lb-strip-row { display: flex; align-items: center; margin-top: 30px; border-bottom: 1px solid var(--b-line); }
.lb-burger { flex: none; display: grid; gap: 3px; width: 56px; padding: 0 20px; }
.lb-burger i { height: 1.5px; background: var(--b-mute); }
.lb-marquee { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lb-marquee-in { display: flex; width: max-content; animation: lb-slide 70s linear infinite; }
.lb-marquee:hover .lb-marquee-in { animation-play-state: paused; }
.lb-coin { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 28px; color: var(--b-mute); font-size: 15px; letter-spacing: -.02em; white-space: nowrap; transition: color .2s; }
.lb-coin img, .lb-coin i { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .75; background: var(--b-card-2); transition: filter .2s, opacity .2s; }
.lb-coin b { font-weight: 500; color: var(--b-ink); }
.lb-coin:hover { color: var(--b-ink); }
.lb-coin:hover img { filter: none; opacity: 1; }
@keyframes lb-slide { to { transform: translateX(-50%); } }

/* ---- the statement */
.lb-say { padding: 150px 20px 92px; }
.lb-say .lb-h78 { margin-top: 30px; max-width: 1400px; }
.lb-say .w { color: var(--b-dim); transition: color .35s; }
.lb-say .w.on { color: var(--b-ink); }

/* ---- "Longshot is" typed list */
.lb-sel { padding: 0 20px 140px; }
.lb-sel-top { display: grid; grid-template-columns: 280px 1fr; align-items: center; justify-items: start; height: 24px; }
.lb-sel-list { margin: 20px 0 0 280px; }
.lb-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 12px 20px 0; border-bottom: 1px solid var(--b-line); cursor: pointer; }
.lb-row h3 { min-height: 1.1em; font-size: clamp(28px, 3.06vw, 44px); line-height: 1.1; letter-spacing: -.04em; color: var(--b-ink); }
.lb-row h3.typing::after { content: ''; display: inline-block; width: .5em; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--b-blue); animation: lb-blink .8s steps(1) infinite; }
.lb-row p { max-width: 560px; max-height: 0; overflow: hidden; opacity: 0; font-size: 18px; line-height: 1.4; letter-spacing: -.02em; transition: max-height .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, margin .45s; }
.lb-row:hover p, .lb-row:focus-visible p { max-height: 60px; opacity: 1; margin-top: 10px; }
.lb-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--b-blue); color: #fff; }
.lb-ico svg { width: 22px; height: 22px; }
.lb-row:hover .lb-ico { transform: rotate(-8deg); }
.lb-row .lb-ico { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes lb-blink { 50% { opacity: 0; } }

/* ---- the stack: a sticky title, numbered cards scroll past it on dashed lines */
.lb-stack { position: relative; padding-bottom: 120px; }
.lb-stack-head { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.lb-stack-head::before { content: ''; position: absolute; right: -18vw; top: 10%; width: 46vw; height: 80%; background: radial-gradient(closest-side, rgba(41, 141, 255, .55), rgba(41, 141, 255, .12) 55%, transparent); filter: blur(30px); opacity: .5; }
.dark .lb-stack-head::before { opacity: 1; }
.lb-stack-head h2 { position: relative; }
.lb-stack-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; margin-top: -40vh; padding: 0 20px; }
.lb-col { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--b-dash); }
.lb-col:nth-child(1) { left: 25%; } .lb-col:nth-child(2) { left: 50%; } .lb-col:nth-child(3) { left: 75%; }
.lb-col::before, .lb-col::after { content: ''; position: absolute; left: -4px; width: 7px; height: 7px; background: var(--b-ink); }
.lb-col:nth-child(1)::before { top: 22%; } .lb-col:nth-child(1)::after { top: 64%; }
.lb-col:nth-child(2)::before { top: 8%; } .lb-col:nth-child(2)::after { top: 48%; }
.lb-col:nth-child(3)::before { top: 36%; } .lb-col:nth-child(3)::after { top: 82%; }
.lb-card { grid-column: var(--c); grid-row: var(--r) / span 2; align-self: center; justify-self: center; width: min(310px, 100%); background: var(--b-card); border: 1px solid var(--b-line); }
.lb-card header { display: flex; gap: 10px; align-items: center; height: 34px; padding: 0 10px; border-bottom: 1px solid var(--b-line); font: 400 11px/1 var(--b-mono); color: var(--b-ink); letter-spacing: -.02em; }
.lb-card header b { font-weight: 400; padding: 3px 4px; background: var(--b-card-2); }
.lb-card footer { display: flex; gap: 8px; align-items: center; height: 36px; padding: 0 12px; border-top: 1px solid var(--b-line); font-size: 13px; color: var(--b-mute); }
.lb-card footer span { font-family: var(--b-mono); }
.lb-iso { height: 200px; display: grid; place-items: center; color: var(--b-art); }
.lb-iso svg { width: 78%; height: 88%; overflow: visible; stroke-width: 1; }
.lb-iso .hi { fill: var(--b-blue); stroke: var(--b-blue); }
.lb-iso .hi-s { fill: rgba(41, 141, 255, .55); stroke: var(--b-blue); }
.lb-iso .hi-d { fill: rgba(41, 141, 255, .3); stroke: var(--b-blue); }
.lb-iso .face { fill: var(--b-card); }
.lb-iso .float { animation: lb-float 3.2s ease-in-out infinite alternate; }
@keyframes lb-float { to { transform: translateY(-8px); } }

/* ---- ASCII cone */
.lb-ascii { display: grid; place-items: center; padding: 40px 20px 120px; overflow: hidden; }
.lb-ascii pre { margin: 0; font: 400 clamp(7px, .82vw, 12px)/1.18 var(--b-mono); color: var(--b-mute); white-space: pre; opacity: .9; }
.lb-ascii pre b { font-weight: 400; color: var(--b-ink); }
.lb-ascii pre u { text-decoration: none; color: var(--b-blue); }

/* ---- two columns of pills */
.lb-two { position: relative; padding: 16px 20px 36px; border-top: 1px solid var(--b-line); }
.lb-two-grid { display: grid; grid-template-columns: 1fr 1fr; }
.lb-two-col { padding: 0 16px 16px; }
.lb-two-col + .lb-two-col { border-left: 1px solid var(--b-line); }
.lb-two-col h2 { padding: 64px 0 150px; text-align: center; }
.lb-two-col li { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 20px 16px; background: var(--b-card); color: var(--b-ink); font-size: 18px; line-height: 1.4; letter-spacing: -.02em; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.lb-two-col li:hover { transform: translateX(6px); }
.lb-two-col li i { flex: none; width: 8px; height: 8px; background: var(--b-blue); }
.lb-cta { display: flex; width: max-content; align-items: center; gap: 12px; margin: 36px auto 0; padding: 7px 15px 7px 7px; background: var(--b-blue); color: #fff !important; font-size: 16px; transition: gap .25s; }
.lb-cta:hover { gap: 18px; }
.lb-cta-ico { display: grid; place-items: center; width: 32px; height: 32px; background: rgba(255, 255, 255, .18); }
.lb-cta svg, .lb-arrow svg, .lb-start-r a svg { width: 14px; height: 14px; stroke-width: 1.8; }

/* ---- category cards */
.lb-cats { padding: 210px 20px 0; }
.lb-cats > .lb-h90 { text-align: center; }
.lb-cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 140px; }
.lb-cat { display: flex; flex-direction: column; min-height: 418px; padding: 16px; background: var(--b-card); transition: background .3s; }
.lb-cat:hover { background: var(--b-card-2); }
.lb-cat-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lb-cat-name { display: flex; align-items: center; gap: 12px; }
.lb-cat .lb-ico { width: 48px; height: 48px; background: none; color: var(--b-ink); border: 1px solid var(--b-line); }
.lb-cat .lb-ico svg { width: 30px; height: 30px; }
.lb-cat h3 { font-size: 21px; letter-spacing: -.02em; color: var(--b-ink); }
.lb-cat-coins { display: flex; gap: 10px; }
.lb-cat-coins img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; filter: grayscale(1); opacity: .8; }
.lb-cat:hover .lb-cat-coins img { filter: none; opacity: 1; }
.lb-cat-lead { margin-top: auto; color: var(--b-ink); font-size: 18px; letter-spacing: -.02em; }
.lb-cat ul { margin: 14px 0 0; }
.lb-cat li { position: relative; padding: 6px 0 6px 32px; color: var(--b-ink); font-size: 18px; letter-spacing: -.02em; }
.lb-cat li::before { content: ''; position: absolute; left: 10px; top: -6px; width: 14px; height: 24px; border-left: 1px solid var(--b-mute); border-bottom: 1px solid var(--b-mute); }
.lb-arrow { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--b-line); color: var(--b-ink); font-size: 14px; }
.lb-arrow i { display: grid; place-items: center; width: 24px; height: 24px; background: var(--b-blue); color: #fff; transition: width .3s cubic-bezier(.2, .8, .2, 1); }
.lb-cat:hover .lb-arrow i { width: 40px; }

/* ---- Start ... rows */
.lb-start { display: grid; gap: 70px; padding: 220px 0 0; }
.lb-start-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lb-start-t { display: flex; align-items: flex-start; gap: 24px; }
.lb-start-t i { flex: none; width: 12px; height: 12px; margin-top: 4px; background: var(--b-blue); }
.lb-start-r p { max-width: 350px; font-size: 18px; line-height: 1.4; letter-spacing: -.02em; color: var(--b-mute); }
.lb-start-r a { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding: 8px; background: var(--b-blue); color: #fff; font-size: 18px; letter-spacing: -.02em; transition: padding .3s cubic-bezier(.2, .8, .2, 1); }
.lb-start-r a i { display: grid; place-items: center; width: 24px; height: 24px; background: rgba(255, 255, 255, .18); }
.lb-start-r a:hover { padding-left: 16px; }

/* ---- the loop block */
.lb-loop { padding: 184px 20px; text-align: center; }
.lb-loop-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.lb-loop-ico { display: grid; place-items: center; width: clamp(48px, 6.25vw, 90px); height: clamp(48px, 6.25vw, 90px); background: var(--b-blue); }
.lb-loop-ico img { width: 55%; height: 55%; object-fit: contain; filter: brightness(0) invert(1); }
.lb-loop-sub { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--b-ink); font-size: 18px; letter-spacing: -.02em; }
.lb-loop-sub i { width: 8px; height: 8px; background: var(--b-blue); }
.lb-loop-grid { display: grid; grid-template-columns: 1fr 137px 137px; gap: 8px; width: min(932px, 100%); margin: 72px auto 0; text-align: left; }
.lb-feat { grid-column: 1 / -1; width: min(420px, 100%); padding: 10px; background: var(--b-card); }
.lb-feat-t { display: block; margin-bottom: 14px; font: 400 10px/1 var(--b-mono); text-transform: uppercase; color: var(--b-ink); }
.lb-feat a { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.lb-feat img, .lb-feat a > i { flex: none; width: 52px; height: 52px; object-fit: cover; background: var(--b-card-2); }
.lb-feat span { flex: 1; color: var(--b-ink); font-size: 15px; line-height: 1.4; letter-spacing: -.02em; }
.lb-feat small { display: block; color: var(--b-mute); font-size: 13px; }
.lb-feat svg { width: 16px; height: 16px; color: var(--b-ink); transition: transform .25s; }
.lb-feat a:hover svg { transform: translateX(4px); }
.lb-tvl { display: flex; flex-direction: column; justify-content: space-between; min-height: 122px; padding: 10px; background: var(--b-card); }
.lb-tvl-v { font-size: clamp(40px, 4.8vw, 69px); line-height: 1.1; letter-spacing: -.045em; color: var(--b-ink); font-variant-numeric: tabular-nums; }
.lb-tile { display: flex; flex-direction: column; justify-content: space-between; height: 122px; padding: 10px; background: var(--b-card); transition: background .25s; }
.lb-tile svg { align-self: center; width: 44px; height: 44px; margin-bottom: 14px; color: var(--b-ink); }
.lb-tile:hover { background: var(--b-blue); }
.lb-tile:hover svg, .lb-tile:hover .lb-small { color: #fff; }

/* ---- tree footer and the stepped bars */
.lb-foot { position: relative; padding: 36px 20px 0; border-top: 1px solid var(--b-line); }
.lb-foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 80px; }
.lb-foot h4 { font: 400 14px/1.1 var(--b-mono); text-transform: uppercase; letter-spacing: .0175em; color: var(--b-ink); }
.lb-foot ul { margin-top: 20px; display: grid; gap: 11px; }
.lb-foot li a, .lb-foot li button { display: inline-flex; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 13px/1.25 var(--b-mono); letter-spacing: -.065em; color: var(--b-mute); transition: color .15s; }
.lb-foot li a::before, .lb-foot li button::before { content: '\2514\2500'; color: var(--b-mute); }
.lb-foot li a:hover, .lb-foot li button:hover, .lb-foot li button[aria-pressed="true"] { color: var(--b-ink); }
.lb-foot-copy { display: flex; align-items: center; gap: 10px; margin-top: 110px; font: 400 13px/1.25 var(--b-mono); letter-spacing: -.08em; color: var(--b-mute); }
.lb-foot-copy img { width: 32px; height: 32px; padding: 7px; background: var(--b-mute); object-fit: contain; }
.lb-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; height: 300px; margin: 40px -20px 0; }
.lb-bars i { position: relative; height: var(--h); border-left: 1px dashed var(--b-dash); background: linear-gradient(180deg, rgba(41, 141, 255, .5), rgba(41, 141, 255, .06) 70%, transparent), var(--b-card); animation: lb-bar 4s ease-in-out infinite alternate; }
.lb-bars i:nth-child(1), .lb-bars i:nth-child(7) { --h: 34%; animation-delay: -1s; }
.lb-bars i:nth-child(2), .lb-bars i:nth-child(6) { --h: 52%; animation-delay: -2s; }
.lb-bars i:nth-child(3), .lb-bars i:nth-child(5) { --h: 74%; animation-delay: -3s; }
.lb-bars i:nth-child(4) { --h: 100%; }
@keyframes lb-bar { to { height: calc(var(--h) * .82); } }

/* ---- the Paper / Serious switch, top right on every page */
.ls-top { position: fixed; top: 16px; right: 24px; z-index: 60; display: flex; align-items: center; gap: 8px; }
.ls-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(250, 250, 250, .7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #171717; transition: background .2s, color .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.ls-x svg { width: 14px; height: 14px; fill: currentColor; }
.ls-x:hover { background: #171717; color: #fff; transform: translateY(-1px); }
.dark .ls-x { background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #ededed; }
.dark .ls-x:hover { background: #ededed; color: #000; }
/* under 1024px the header shows its menu button at the far right: sit just left of it */
@media (max-width: 1023px) { .ls-top { right: 56px; } }
.ls-mode { display: flex; padding: 2px; border-radius: 999px; background: rgba(250, 250, 250, .7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 13px/1 var(--font-sans, Geist), system-ui, sans-serif; }
.ls-mode button { cursor: pointer; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #666; font: inherit; transition: background .2s, color .2s; }
.ls-mode button:hover { color: #000; }
.ls-mode button[aria-pressed="true"] { background: #171717; color: #fff; }
.dark .ls-mode { background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dark .ls-mode button { color: #a1a1a1; }
.dark .ls-mode button:hover { color: #fff; }
.dark .ls-mode button[aria-pressed="true"] { background: #ededed; color: #000; }

@media (max-width: 991px) {
  .lb-sel-top { grid-template-columns: 1fr auto; }
  .lb-sel-list { margin-left: 0; }
  .lb-stack-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 16px; margin-top: -60vh; }
  .lb-card { grid-column: auto !important; grid-row: auto !important; }
  .lb-col { display: none; }
  .lb-cats-grid, .lb-start-row { grid-template-columns: 1fr; }
  .lb-start-r a { margin-top: 20px; }
  .lb-foot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ls-top { position: absolute; top: 14px; right: 56px; gap: 6px; }
  .ls-x { width: 30px; height: 30px; }
  .ls-mode button { padding: 0 10px; height: 26px; font-size: 12px; }
  .lb-strip { padding-top: 64px; }
  .lb-say { padding: 96px 16px 64px; }
  .lb-sel { padding: 0 16px 96px; }
  .lb-row p { max-height: none; opacity: 1; margin-top: 8px; font-size: 16px; }
  .lb-stack-head { position: relative; height: auto; padding: 96px 16px 48px; }
  .lb-stack-grid { grid-template-columns: 1fr; margin-top: 0; padding: 0 16px; }
  .lb-card { width: 100%; }
  .lb-two-grid { grid-template-columns: 1fr; }
  .lb-two-col + .lb-two-col { border-left: 0; }
  .lb-two-col h2 { padding: 48px 0 32px; }
  .lb-two-col li { font-size: 16px; }
  .lb-cats { padding: 120px 16px 0; }
  .lb-cats-grid { margin-top: 64px; }
  .lb-cat { min-height: 360px; }
  .lb-cat li, .lb-cat-lead { font-size: 16px; }
  .lb-start { gap: 48px; padding-top: 120px; }
  .lb-loop { padding: 120px 16px; }
  .lb-loop-grid { grid-template-columns: 1fr 1fr; }
  .lb-tvl { grid-column: 1 / -1; }
  .lb-tile { height: 110px; }
  .lb-foot-grid { grid-template-columns: 1fr 1fr; padding-top: 40px; }
  .lb-bars { height: 160px; }
}
/* ---- entrances (below.js sets data-a on elements and adds .lb-in once each one is reached):
   things slide in from outside the page, words rise out of a mask, labels type themselves,
   lines draw across, buttons wipe open, the footer bars grow up */
.lb [data-a] { transition: transform 1.15s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), opacity .8s ease var(--d, 0s), clip-path 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.lb [data-a="up"] { opacity: 0; transform: translateY(48px); }
.lb [data-a="left"] { opacity: 0; transform: translateX(-70vw) rotate(-3deg); }
.lb [data-a="right"] { opacity: 0; transform: translateX(70vw) rotate(3deg); }
.lb [data-a="pop"] { opacity: 0; transform: scale(.3) rotate(-25deg); }
.lb [data-a="wipe"] { clip-path: inset(0 100% 0 0); }
.lb [data-a="grow"] { transform: scaleY(0); transform-origin: 50% 100%; }
.lb [data-a].lb-in { opacity: 1; transform: none; clip-path: inset(0 -20px 0 0); }
.lb [data-a="words"] .lb-w { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.lb [data-a="words"] .lb-w > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.16, 1, .3, 1) calc(var(--d, 0s) + var(--i) * 55ms); }
.lb [data-a="words"].lb-in .lb-w > span { transform: none; }
.lb .lb-typing::after { content: ''; display: inline-block; width: .55em; height: .95em; margin-left: 3px; vertical-align: -.1em; background: var(--b-blue); animation: lb-blink .7s steps(1) infinite; }
.lb .lb-tag.lb-typing::after { height: 10px; width: 6px; vertical-align: -1px; }
/* the list rows draw their rule across and their icon spins in once typed */
.lb-row { position: relative; border-bottom-color: transparent; }
.lb-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--b-line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
.lb-row.lb-in::after { transform: none; }
.lb-row:not(.lb-in) .lb-ico { transform: scale(0) rotate(-120deg); }
.lb-row.lb-in .lb-ico { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) .2s; }
.lb-row.lb-in:hover .lb-ico { transform: rotate(-8deg); transition-delay: 0s; }
/* the ASCII cone builds from the top */
.lb-ascii pre { transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) {
  .lb-marquee-in, .lb-bars i, .lb-iso .float { animation: none; }
  .lb [data-a] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .lb [data-a="words"] .lb-w > span { transform: none !important; }
}

/* ---- the contract address pill, moved under the hero's buttons by below.js once React has hydrated them */
.ls-ca { display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(100%, calc(100vw - 32px)); height: 44px; margin-top: 14px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; cursor: pointer; font: 400 13px/1 var(--font-mono, 'Geist Mono'), ui-monospace, monospace; color: #171717; animation: ls-up .9s cubic-bezier(.16, 1, .3, 1) .99s both; }
.ls-ca-k { display: grid; place-items: center; flex: none; height: 32px; padding: 0 11px; border-radius: 999px; background: #171717; color: #fff; font-size: 12px; letter-spacing: .04em; }
.ls-ca-v { display: flex; min-width: 0; letter-spacing: -.02em; }
.ls-ca-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-ca-t { flex: none; }
.ls-ca-copy { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); color: inherit; cursor: pointer; font: 500 12px/1 var(--font-sans, Geist), system-ui, sans-serif; transition: background .2s, color .2s; }
.ls-ca-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ls-ca:hover .ls-ca-copy, .ls-ca.copied .ls-ca-copy { background: #171717; color: #fff; }
.dark .ls-ca { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #ededed; }
.dark .ls-ca-k { background: #ededed; color: #000; }
.dark .ls-ca-copy { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.dark .ls-ca:hover .ls-ca-copy, .dark .ls-ca.copied .ls-ca-copy { background: #ededed; color: #000; }
@media (max-width: 767px) { .ls-ca { gap: 8px; } .ls-ca-copy span { display: none; } .ls-ca-copy { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .ls-ca { animation: none; } }