/* =====================================================================
   MEMESLY :: design system
   Palette sampled directly from the Memesly logo:
     core blue #0070FD · cyan #02A5F5 · ice #7FE1FF · glow #0289BD · black
   ===================================================================== */

:root{
  --blue:#0070FD;
  --blue-2:#0A84FF;
  --cyan:#02A5F5;
  --ice:#7FE1FF;
  --glow:#0289BD;

  --bg:#000308;
  --bg-2:#04070E;
  --surface:#080D16;
  --surface-2:#0D1420;
  --surface-3:#131C2B;
  --line:rgba(2,165,245,.16);
  --line-2:rgba(2,165,245,.30);

  --text:#E8F3FF;
  --text-2:#9FB4CC;
  --text-3:#63788F;

  --ok:#00E5A0;
  --bad:#FF4D6D;
  --gold:#FFC846;

  /* THE QUIET HALF OF THE MENU.
     Battle, Cooking, Top 100, Tokenomics and Design Services used to carry
     five separate colours, one each. That was five hues competing in a column
     eleven rows tall, and the rows that are actually meant to pull, Launch,
     Ignited and Leader Board, had nothing left to pull against. These five
     share one light tone now and read as a group.

     Cooler and clearly under Launch's platinum on purpose. The first version
     of this was #D6E2F0, and measured against Launch's own base stop, #CFD6DE,
     that came out at about 5 dE: the same colour, in other words, so the one
     row in the menu that is supposed to be the brightest thing on it was
     sitting at the same tone as the five that are supposed to recede. This is
     about 10 dE off it, which together with Launch's 900 weight and its sweep
     makes three separate signals rather than one marginal one. Still plainly a
     light row: about 9:1 on the page background. */
  --menu-quiet:#B4C7DC;
  --menu-quiet-glow:rgba(160,192,230,.32);
  --menu-quiet-glow-hi:rgba(200,224,255,.7);

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 8px 40px rgba(0,0,0,.6);
  --glow-sm:0 0 12px rgba(2,165,245,.35);
  --glow-md:0 0 28px rgba(0,112,253,.45);
  --glow-lg:0 0 60px rgba(0,112,253,.35);
  --nav-h:62px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
::selection{background:var(--blue);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:#16273d;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#1e3a5c}

/* ============================ BACKGROUND ============================ */
#meme-rain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.55;
}
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -5%, rgba(0,112,253,.20), transparent 60%),
    radial-gradient(800px 500px at 92% 8%, rgba(2,165,245,.14), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(2,137,189,.12), transparent 60%);
}
.page{position:relative;z-index:1}

/* ============================== NAV ================================= */
.nav{
  position:sticky; top:0; z-index:60;
  height:var(--nav-h);
  background:rgba(4,7,14,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1440px; margin:0 auto; height:100%;
  display:flex; align-items:center; gap:18px; padding:0 20px;
}
.brand{display:flex;align-items:center;flex-shrink:0}
/* line-height:0 so the wrapper is exactly the image box and nothing else, which
   is what lets the shine layer sit on inset:0 and line its mask up with the
   artwork without a single magic number. */
.brand-wrap{position:relative;display:block;line-height:0;isolation:isolate}
.brand-logo{
  height:38px; width:auto; display:block;
  filter:drop-shadow(0 0 16px rgba(0,112,253,.55));
}

/* Shine. Masked with the logo PNG's own alpha channel, so the highlight only
   lands on the mark and the wordmark, never on the empty box around them. The
   url is relative to this stylesheet, not to the page, so it resolves the same
   from /faq/ as it does from /creator/pepe/. */
.brand-shine{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;
  -webkit-mask-image:url(../img/logo.png);mask-image:url(../img/logo.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* The band itself. Animated with transform rather than background-position so
   the browser can hand it to the compositor: this sits in a sticky header on
   every page, next to a canvas that is already animating.

   THE TRANSFORM WAS NOT ENOUGH ON ITS OWN.
   A transform animation is only cheap if the browser gives the element its own
   layer, and it will not do that here by itself: the parent carries a
   mask-image, so the band had to be re-rasterized THROUGH the mask on every
   frame, on the main thread, inside a bar that is also re-running a 16px
   backdrop blur over a live canvas. The band crawls at roughly 3px a frame, so
   each of those repaints landed on a whole-pixel boundary and the highlight
   stepped instead of sliding. will-change pins the layer, the mask is
   rasterized once, and the motion moves to the compositor where the header's
   own repaints cannot reach it.

   The old cubic-bezier(.45,0,.25,1) had its x control points crossed, which
   put peak velocity at about two and a half times the average: the band idled,
   lurched through the middle of the logo and stopped dead. This curve is an
   in-out sine, so it still eases at both ends without the lurch. */
.brand-shine::before{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:42%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(190,235,255,.5) 38%,
    rgba(255,255,255,.92) 50%, rgba(190,235,255,.5) 62%, rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-20deg);
  will-change:transform;
  animation:brand-sweep 4.2s cubic-bezier(.37,0,.63,1) infinite;
}
/* Sweeps across, then waits. A shine with no rest reads as a loading bar. */
@keyframes brand-sweep{
  0%       {transform:translateX(-160%) skewX(-20deg)}
  42%,100% {transform:translateX(340%) skewX(-20deg)}
}
/* A soft bloom travelling just behind the mark, so the light reads as passing
   around the logo and not only over it. Its travel stops at the wordmark's
   right edge rather than following the band all the way out: past that point
   there is nothing to light and it reads as a stray blob floating in the
   header. Kept dim for the same reason. */
.brand-wrap::before{
  content:"";position:absolute;top:-55%;bottom:-55%;left:-8%;width:26%;z-index:-1;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(40,165,255,.34) 0%, rgba(0,112,253,.14) 45%, transparent 70%);
  filter:blur(9px);
  /* Same layer hint and the same curve as the band. The hint matters more here
     than it does on the band: a moving element carrying a 9px blur has that
     blur recomputed on every repaint, so without a layer the halo was the most
     expensive thing in the header. The curve has to match or the halo and the
     band drift apart mid-sweep and the light reads as two objects. */
  will-change:transform;
  animation:brand-halo 4.2s cubic-bezier(.37,0,.63,1) infinite;
}
@keyframes brand-halo{
  0%       {transform:translateX(-100%);opacity:0}
  14%      {opacity:1}
  30%      {opacity:1}
  40%,100% {transform:translateX(205%);opacity:0}
}
/* Someone who has asked the OS to stop moving things gets the logo and its
   glow, and nothing that travels. */
@media (prefers-reduced-motion:reduce){
  .brand-shine::before,.brand-wrap::before{animation:none}
  .brand-shine{display:none}
  .brand-wrap::before{display:none}
}
/* Spans the whole bar: starts right after the logo, ends at the action cluster.
   No max-width and no auto margin, so it takes every pixel the two fixed ends
   leave over rather than sitting in a lane of its own on the right. */
.nav-search{
  flex:1 1 auto; min-width:120px; position:relative;
}
.nav-search input{
  width:100%; height:38px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line);
  padding:0 14px 0 38px; font-size:14px; outline:none;
}
.nav-search input:focus{border-color:var(--line-2);box-shadow:var(--glow-sm)}
.nav-search svg{position:absolute;left:13px;top:11px;opacity:.5}
/* The one thing on the page that is meant to be clicked, so it gets a brighter
   gradient, a rim light, a bigger halo and its own travelling shine. Everything
   else in the header is deliberately quieter than this. */
/* THE HALO NO LONGER KEYFRAMES box-shadow, AND THAT IS THE WHOLE FIX.
   buy-pulse used to animate box-shadow on this element. box-shadow is a paint
   property: it cannot go to the compositor, so the button was repainted on the
   main thread sixty times a second, and every one of those repaints took the
   ::after sweep down with it, because a child cannot be composited past a
   parent that is re-rasterizing underneath it. The sweep was therefore being
   redrawn rather than moved, which is exactly what the stutter was. The halo
   is static now and the breathing moved to ::before as opacity, which does
   composite. */
.btn-buy{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(96deg,#0A63FF 0%,#0090FF 48%,#22C1FF 100%)!important;
  color:#fff!important;font-weight:800!important;
  /* inset hairline reads as a lit edge, then two halos: a tight one for
     definition and a wide soft one so it glows against the dark bar. Sat at
     the midpoint of the old pulse so the button's resting brightness is
     unchanged. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             0 0 0 1px rgba(80,190,255,.34),
             0 2px 11px rgba(0,90,220,.48),
             0 0 31px rgba(2,165,245,.60);
}
/* The breath. Inside the pill rather than a wider glow outside it, because the
   pill clips its own children and an outer shadow on a pseudo element would be
   cut off at the border. Small amplitude on purpose: this sits in a sticky bar
   on every page and a big throb becomes irritating within a minute. */
.btn-buy::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(125% 190% at 50% 118%,
    rgba(160,230,255,.55) 0%, rgba(90,190,255,.20) 44%, transparent 74%);
  opacity:.22;
  animation:buy-pulse 3.6s ease-in-out infinite;
}
/* Shine. Clipped by the pill's own overflow, so no mask is needed here: the
   button is a solid rounded rectangle, unlike the logo.

   will-change keeps the band on its own layer even while the button is hovered
   or the header's backdrop blur is re-running, so the sweep is a texture the
   compositor slides rather than pixels somebody has to draw again. Same in-out
   sine as the logo: the old curve had crossed control points and lurched
   through the middle of the travel. */
.btn-buy::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:38%;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 45%,
    rgba(255,255,255,.75) 50%, rgba(255,255,255,.42) 55%, rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-20deg);
  will-change:transform;
  animation:buy-sweep 4.2s cubic-bezier(.37,0,.63,1) infinite;
}
/* Offset from the logo's sweep so the two do not fire in lockstep, which reads
   as a page-wide flash rather than two separate objects catching the light. */
.nav-buy::after{animation-delay:1.1s}
@keyframes buy-sweep{
  0%       {transform:translateX(-170%) skewX(-20deg)}
  40%,100% {transform:translateX(360%) skewX(-20deg)}
}
@keyframes buy-pulse{
  0%,100%{opacity:.18}
  50%    {opacity:.62}
}
.btn-buy>*{position:relative;z-index:2}   /* label stays above the shine */
/* animation-play-state has to name the pseudo now that the animation lives
   there. It is not inherited from the element the pseudo hangs off. */
.btn-buy:hover::before{animation-play-state:paused}
.btn-buy:hover{filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
             0 0 0 1px rgba(140,220,255,.55),
             0 2px 14px rgba(0,90,220,.55),
             0 0 46px rgba(2,165,245,.85)}
@media (prefers-reduced-motion:reduce){
  .btn-buy::before{animation:none;opacity:.4}
  .btn-buy::after{display:none}
}
.nav-burger{display:none}

/* ============================ LAYOUT ================================ */
.shell{max-width:1440px;margin:0 auto;padding:22px 20px 80px;display:grid;
  grid-template-columns:236px minmax(0,1fr);gap:26px}
.shell > main{min-width:0;max-width:100%}
.shell.wide{grid-template-columns:236px minmax(0,1fr)}
.shell.wide > main{min-width:0}
/* STICKY MEANS STICKY.
   This was already position:sticky and it still scrolled away, because a sticky
   element taller than the viewport scrolls until its BOTTOM reaches the sticky
   offset and only then stops. The sidebar plus the suggested-creators card is
   taller than most laptop screens, so in practice it never stuck at all.
   Capping the height and letting it scroll internally is what makes it stay. */
.side{
  position:sticky;top:calc(var(--nav-h) + 22px);align-self:start;
  max-height:calc(100dvh - var(--nav-h) - 40px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  transition:opacity .18s;
}
.side::-webkit-scrollbar{width:7px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.side::-webkit-scrollbar-track{background:transparent}

/* ---- collapse ----
   The sidebar is 236px of a 1440px page. On a laptop that is real estate people
   sometimes want back, and the top bar already carries search and the burger, so
   nothing is lost by hiding it. The choice is remembered. */
.side-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 22px;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:transparent;color:var(--text-3);
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;cursor:pointer;transition:.16s;
}
.side-toggle:hover{background:var(--surface-2);color:var(--text-2);border-color:var(--line-2)}
.side-toggle-i{
  width:7px;height:7px;flex:none;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}

/* the collapsed state, set on .shell so the grid can respond */
.shell.side-off{grid-template-columns:minmax(0,1fr)}
/* EVERYTHING goes, not just the links. The Launch Meme button is a child of
   the sidebar, so when only .side-nav and the cards were hidden it stayed
   behind: a full-width green button floating over the hero next to a bare
   restore arrow. Collapsed means collapsed; the header still carries the
   action. */
/* .side > .launch-cta used to be named here as well. The Launch control is a
   row inside .side-nav now, so the first selector already takes it, and a
   button that is no longer a child of .side cannot be hidden by naming it. */
.shell.side-off .side-nav,
.shell.side-off .side > .card{display:none}
/* FIXED, NOT ABSOLUTE.
   Absolute positions it against the page, so it scrolled away with everything
   else and the only way back to the menu vanished the moment you read past the
   first screen. Fixed pins it to the viewport, so it is there at any scroll
   position, which is the whole job of a control that restores navigation.

   The left offset tracks the content column on wide screens and falls back to
   the viewport edge on narrow ones, so the button sits beside the content
   rather than stranded in the margin of a 2560px display. */
.shell.side-off .side{
  position:fixed;
  top:calc(var(--nav-h) + 22px);
  left:calc(max(0px, (100vw - 1440px) / 2) + 20px);
  max-height:none;overflow:visible;
  width:auto;z-index:40;
}
.shell.side-off{position:relative;padding-left:70px}
/* COLLAPSED, THE BUTTON HAS TO ANNOUNCE ITSELF.
   Open, it is a labelled row inside a menu and nobody has to find it. Collapsed
   it is a 33px square floating in the margin, and it is the ONLY way back to
   the menu on desktop. A dim grey square there is a dead end, so it glows the
   brand blue and pulses gently until it is hovered. */
.shell.side-off .side-toggle{
  margin:0;padding:9px 10px;width:auto;border-radius:10px;
  color:var(--ice);
  background:rgba(0,112,253,.14);
  border-color:rgba(0,112,253,.45);
  box-shadow:0 0 0 1px rgba(0,112,253,.25), 0 0 14px rgba(0,112,253,.45);
  animation:side-pulse 2.6s ease-in-out infinite;
}
.shell.side-off .side-toggle:hover{
  color:#fff;
  background:linear-gradient(96deg,var(--blue),var(--cyan));
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(0,112,253,.5), 0 0 22px rgba(0,112,253,.75);
  animation:none;
}
@keyframes side-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(0,112,253,.25), 0 0 12px rgba(0,112,253,.35)}
  50%    {box-shadow:0 0 0 1px rgba(0,112,253,.45), 0 0 22px rgba(0,112,253,.70)}
}
@media (prefers-reduced-motion:reduce){
  .shell.side-off .side-toggle{animation:none}
}
.shell.side-off .side-toggle-t{display:none}
.shell.side-off .side-toggle-i{transform:rotate(-135deg)}

/* Below the sidebar breakpoint the drawer is the menu, so neither the sidebar
   nor its toggle should exist. */
@media (max-width:900px){
  .side-toggle{display:none}
  .shell.side-off{padding-left:20px}
}
/* 10px, not 22px: the Hide menu button now follows the links and belongs to
   them, so the breathing room goes below the button instead of above it. */
.side-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.side-nav a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  font-weight:650;color:var(--text-2);transition:.16s;font-size:17px;
  letter-spacing:-.01em;
}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a.on{background:rgba(0,112,253,.13);color:var(--ice);box-shadow:inset 0 0 0 1px var(--line-2)}

.card{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:13px;letter-spacing:.9px;text-transform:uppercase;color:var(--text-2)}
.card-b{padding:16px}

/* ============================= HOME ================================= */
.hero{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);margin-bottom:26px;
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(0,112,253,.35), transparent 65%),
    radial-gradient(600px 320px at 88% 100%, rgba(2,165,245,.22), transparent 65%),
    linear-gradient(150deg,#050B15,#02060C);
  padding:44px 40px;
  box-shadow:var(--glow-lg);
}
/* The h1 sits in a column roughly half the viewport wide, so sizing it on vw
   overflows the column and the browser re-wraps the line, turning the intended
   two lines into three. cqi is 1% of the containing column, so the type scales
   to the space the text actually has. vw clamp is the fallback for browsers
   without container queries; balance keeps any forced wrap even. */
.hero,.hero-copy{container-type:inline-size}
/* No forced <br> in any hero title. They used to be hardcoded, which meant a
   short title like "Battle of the Chains" was split in half on a 1440px screen
   with room to spare, and a long one broke at the same word on a phone whether
   it fitted or not. text-wrap:balance picks the break, so short titles sit on
   one line and long ones split evenly at whatever width they are read. */
.hero h1{
  font-size:clamp(28px,4.2vw,44px);
  font-size:clamp(28px,7.4cqi,50px);
  text-wrap:balance;
  font-weight:900;letter-spacing:-1.5px;line-height:1.05;
  background:linear-gradient(100deg,#fff,var(--ice) 45%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;
}
.hero p{color:var(--text-2);max-width:640px;font-size:16px}
/* THE HERO BUTTON ROW HAD NO RULE AT ALL.
   It was a bare div, so the two buttons inherited whatever the .launch-cta
   base happened to say, which was sized for a 236px sidebar: full width, 2px
   of margin above. On the hero that put a full-bleed button hard against the
   last line of the paragraph and running to the edge of the column. This gives
   the row its own spacing and lets the buttons be their own width. */
.hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin:28px 0 4px;
}
.hero-cta .launch-cta{
  width:auto;min-width:236px;margin:0;
  min-height:52px;padding:15px 34px;
  font-size:16.5px;border-radius:14px;
}
.hero-cta .btn{min-height:52px;display:inline-flex;align-items:center}
@media (max-width:560px){
  /* Side by side stops fitting well before the layout breaks, and a 200px
     button next to a 150px one reads as two half-buttons. */
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:24px}
  .hero-cta .launch-cta,.hero-cta .btn{width:100%;min-width:0;justify-content:center}
}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ice);background:rgba(2,165,245,.12);
  border:1px solid var(--line-2);padding:6px 13px;border-radius:99px;margin-bottom:16px;
}
/* LIVE READS GREEN, NOT BLUE, AND NEVER AS A WARNING TRIANGLE.
   The launch page wore a ⚠️ here, which is the glyph a browser puts on a
   certificate error. Three dots on a green pill is the sign every status page
   uses for "up", and it is the only green in the chrome, so it cannot be
   mistaken for one of the blue chips. */
.kicker-live{
  color:#7DF0B4;
  background:rgba(18,206,107,.12);
  border-color:rgba(18,206,107,.42);
  box-shadow:0 0 0 1px rgba(18,206,107,.08), 0 0 18px rgba(18,206,107,.16);
}
.kicker-live .live-dot{width:7px;height:7px;box-shadow:0 0 10px var(--ok)}
/* Staggered, so they read as a pulse travelling across rather than three
   lights blinking in unison, which looks like a fault indicator. */
.kicker-live .live-dot:nth-child(2){animation-delay:.24s}
.kicker-live .live-dot:nth-child(3){animation-delay:.48s}
/* Devnet and preview keep an icon, but an inline SVG that inherits the pill's
   colour rather than an emoji that is a different picture per platform. */
.kicker-test .k-ic{display:inline-flex;width:14px;height:14px}
.kicker-test .k-ic svg{width:14px;height:14px;display:block}

/* explicit 2 or 4 across, never a 3+1 orphan row */
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-top:26px}
@media (max-width:1100px) and (min-width:700px){.hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-stats div span{display:block}
.hero-stats .n{font-size:24px;font-weight:900;color:#fff}
.hero-stats .l{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);font-weight:700}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:21px;font-weight:800;letter-spacing:-.4px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 14px;border-radius:99px;font-size:13px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);transition:.16s;
}
.chip:hover{color:var(--text);border-color:var(--line-2)}
.chip.on{background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;border-color:transparent;box-shadow:var(--glow-sm)}
/* A sort chip with no live data behind it yet. Reads as pending rather than as
   a button that works but does nothing, which is what it looked like before. */
.chip:disabled{opacity:.42;cursor:progress}
.chip:disabled:hover{color:var(--text-2);border-color:var(--line)}

/* creator grid: two up on phones, three at the top end, never more */
/* ===============================================================
   TOP 100 STRIP
   One full-width row per creator instead of a three-column wall of
   tiles. Same information plus the live market cap and 24h move that
   the tile had no room for, in roughly a third of the vertical space,
   and the eye tracks a single column far faster than a grid.

   Order is still CSS `order`, set per card by the live ranking, so the
   trending sort keeps working exactly as it did.
   =============================================================== */
.grid{display:flex;flex-direction:column;gap:8px}

.cc{
  background:linear-gradient(100deg,var(--surface-2),var(--surface) 60%);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s;
  position:relative;display:flex;align-items:stretch;
}
.cc:hover{border-color:var(--line-2);box-shadow:0 8px 26px rgba(0,112,253,.16);
  transform:translateX(2px)}
/* the card hue survives as a spine rather than a banner: it kept each
   creator's identity colour without costing 74px of height per row */
.cc-spine{width:3px;flex-shrink:0;background:var(--cc,#0070FD);opacity:.85}
/* used by .live-dot and .hl-dot; it lived in the old card block */
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.cc-link{
  flex:1;min-width:0;display:grid;align-items:center;gap:14px;padding:11px 14px;
  grid-template-columns:44px 46px minmax(0,1fr) 132px;
}
.cc-rank{
  font-size:12px;font-weight:900;color:var(--ice);font-variant-numeric:tabular-nums;
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:99px;
  padding:3px 0;text-align:center;
}
.av{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid var(--surface);background:var(--surface-3);
  box-shadow:0 0 0 1px var(--line-2);
}
.av img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.cc-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.cc-name{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;
  letter-spacing:-.2px;min-width:0}
.cc-name .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}
.vf{flex-shrink:0;width:15px;height:15px}
.cc-handle{font-style:normal;font-size:12px;color:var(--text-3);font-weight:700;
  white-space:nowrap;flex-shrink:0}
.cc-tag{font-size:12.5px;color:var(--text-2);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cc-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-variant-numeric:tabular-nums}
.cc-mc{font-size:14px;font-weight:900;color:var(--text)}
.cc-mc:empty::before{content:"–";color:var(--text-3)}
.cc-ch{font-size:12.5px;font-weight:800;color:var(--text-3)}
.cc-ch.up{color:var(--ok)}
.cc-ch.dn{color:var(--bad)}
/* the column the current sort is based on gets the emphasis */
.cc-ch.lead{font-size:14px}

.cc-foot{display:flex;align-items:center;gap:10px;padding:11px 14px 11px 0;flex-shrink:0}
.cc-foot .chain-pill{height:26px;white-space:nowrap}
.cc-foot .btn-sm{
  width:110px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;font-size:12.5px;
}

@media (max-width:900px){
  .cc-link{grid-template-columns:38px 42px minmax(0,1fr) 104px;gap:11px;padding:10px 12px}
  .cc-foot .chain-pill .cp-t{display:none}
  .cc-foot .btn-sm{width:96px}
}
@media (max-width:640px){
  .cc{flex-wrap:wrap}
  .cc-link{grid-template-columns:34px 40px minmax(0,1fr) auto;width:100%;gap:10px}
  .cc-tag{display:none}
  .cc-foot{width:100%;padding:0 12px 11px 15px;justify-content:space-between}
  .cc-foot .chain-pill .cp-t{display:inline}
}
@media (max-width:380px){
  .cc-handle{display:none}
}

.cc-sub{font-size:12px;color:var(--text-3)}
.cc-sub b{color:var(--ice);font-size:13px}
.btn-sm{
  padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:800;
  background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;box-shadow:var(--glow-sm);
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
}
.btn-sm:hover{filter:brightness(1.14)}
.chain-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.4px;
  background:var(--surface-3);border:1px solid var(--line);padding:3px 9px 3px 4px;border-radius:99px;color:var(--text-2);
}
.chain-pill svg,.chain-pill img{width:14px;height:14px;border-radius:3px}

/* ============================ PROFILE =============================== */
.pf-ban{
  height:210px;border-radius:var(--r-xl) var(--r-xl) 0 0;position:relative;overflow:hidden;
  border:1px solid var(--line);border-bottom:none;
}
.pf-ban .g1{position:absolute;inset:0;background:linear-gradient(125deg,#04080F,#020509)}
.pf-ban .g2{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(500px 220px at 20% 130%,var(--cc),transparent 70%),
             radial-gradient(400px 200px at 80% -20%,var(--cc),transparent 70%)}
.pf-ban .marq{
  position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;opacity:.075;
  font-size:64px;font-weight:900;letter-spacing:-2px;white-space:nowrap;
}
.pf-ban .marq span{animation:slide 26s linear infinite;padding-right:40px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pf-head{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-xl) var(--r-xl);
  padding:0 26px 22px;margin-bottom:22px;
}
.pf-top{position:relative;z-index:2;display:flex;gap:20px;align-items:flex-end;margin-top:-52px;flex-wrap:wrap}
.av-lg{width:118px;height:118px;border-width:4px}
.pf-id{flex:1;min-width:220px;padding-bottom:6px}
.pf-id h1{font-size:27px;font-weight:900;letter-spacing:-.7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-id h1 .vf{width:20px;height:20px}
.pf-id .handle{color:var(--text-3);font-size:14.5px}
.pf-act{display:flex;gap:10px;padding-bottom:6px;flex-wrap:wrap}
.btn{
  /* inline-flex, not the button default, so .btn works on an <a> as well as a
     <button>. As a plain inline box an <a class="btn"> ignores width and its
     padding does not add height, so it overlaps whatever sits above it. */
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:11px 22px;border-radius:99px;font-weight:800;font-size:14px;
  background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;box-shadow:var(--glow-md);transition:.16s;
}
.btn:hover{filter:brightness(1.13);transform:translateY(-1px)}
.btn.ghost{background:var(--surface-3);border:1px solid var(--line-2);box-shadow:none;color:var(--text)}
.btn.ghost:hover{background:var(--surface-3);border-color:var(--cyan)}
.btn.on{background:linear-gradient(96deg,#00A86B,#00E5A0)}
.pf-tag{margin-top:14px;color:var(--ice);font-size:15px;font-style:italic;font-weight:600}

/* vanity counts row */
.pf-counts{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px}
.pf-counts span{font-size:13.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.pf-counts b{color:var(--text);font-weight:800;font-size:14.5px}

/* bio bullet lines */
.pf-lines{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.pf-lines div{font-size:14px;color:var(--text-2)}

/* official social buttons */
.pf-socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.soc{
  display:inline-flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;border-radius:99px;
  background:var(--surface-3);border:1px solid var(--line);font-size:13px;font-weight:700;
  color:var(--text);transition:.16s;
}
.soc:hover{border-color:var(--sb,var(--cyan));background:var(--surface-2);transform:translateY(-1px)}
.soc i{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.soc i svg{width:15px;height:15px;display:block}

/* subscription bundle bar */
.pf-bundle-h{margin-top:22px;font-size:15px;font-weight:800;color:var(--text)}
.bundle{
  width:100%;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px;border-radius:99px;font-size:14.5px;font-weight:800;text-align:left;
  background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;box-shadow:var(--glow-md);transition:.16s;
}
.bundle:hover{filter:brightness(1.1)}
.bundle b{font-size:17px;font-weight:900;white-space:nowrap}
.bundle.on{background:linear-gradient(96deg,#00A86B,#00E5A0)}

@media (max-width:560px){
  .pf-counts{gap:14px}
  .bundle{padding:13px 17px;font-size:13px}
  .soc{font-size:12px;padding:5px 12px 5px 5px}
  .soc i{width:23px;height:23px}
}

/* live ticker */
.ticker{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:20px;
}
.tk{background:var(--surface);padding:13px 15px;position:relative}
.tk .l{font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.tk .v{font-size:17px;font-weight:900;letter-spacing:-.4px;color:#fff;font-variant-numeric:tabular-nums}
.tk .s{font-size:11.5px;font-weight:700;margin-top:2px}
.tk .s.up{color:var(--ok)} .tk .s.dn{color:var(--bad)}
.tk.pulse .v{animation:pulse .6s ease}
@keyframes pulse{0%{color:var(--ice);text-shadow:0 0 18px var(--cyan)}100%{color:#fff}}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blip 1.6s infinite;display:inline-block}

/* CA row */
.ca{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);flex-wrap:wrap;
  /* THE INNER min-width:0 ON THE CODE WAS NOT ENOUGH.
     .ca is itself an item of .pf-head, which is a wrapping flex row, and as a
     flex item it keeps min-width:auto. Its own max-content width is the label
     plus all 44 characters plus the copy button, and that is what it was laid
     out at: 361px inside a 316px column, hanging 45px past the header and
     giving the page 8px of sideways scroll on a 390px screen.
     Every one of the 185 profiles does this. It only became visible scroll on
     $MEMESLY's own page, because that is the one profile carrying a real
     address rather than a short fictional one. */
  min-width:0;max-width:100%;
}
.ca .lb{font-size:10.5px;font-weight:900;letter-spacing:1.1px;color:var(--text-3)}
.ca code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ice);
  /* min-width:0 (not a px floor) so the 44 char address cannot set the card's
     min-content width and push the whole grid past the viewport on phones.
     It still ellipsizes; it just shrinks first. */
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy{
  padding:5px 12px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:800;color:var(--text-2);transition:.15s;
}
.copy:hover{color:var(--ice);border-color:var(--cyan)}
.copy.done{background:rgba(0,229,160,.15);color:var(--ok);border-color:var(--ok)}
/* .copy is a JS hook as well as a style, and it is declared after .btn, so at
   equal specificity it wins and any <button class="btn copy"> silently renders
   as the little grey CA pill. These put the button back: same hook, button
   sizing. Specificity, not source order, so the rules can live next to .copy. */
.btn.copy{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:99px;font-size:14px;
  background:linear-gradient(96deg,var(--blue),var(--cyan));border:0;color:#fff;
  box-shadow:var(--glow-md);
}
.btn.copy:hover{color:#fff;filter:brightness(1.13)}
.btn.ghost.copy{background:var(--surface-3);border:1px solid var(--line-2);
  box-shadow:none;color:var(--text)}
.btn.ghost.copy:hover{color:var(--text);border-color:var(--cyan);filter:none}
.btn.copy.done{background:rgba(0,229,160,.15);color:var(--ok);
  border:1px solid var(--ok);box-shadow:none}

/* content columns */
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.stack{display:flex;flex-direction:column;gap:22px}
.stack.sticky{position:sticky;top:calc(var(--nav-h) + 22px)}

.bio{font-size:15px;color:var(--text-2);line-height:1.7}
.hob{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hob span{
  background:var(--surface-3);border:1px solid var(--line);border-radius:99px;
  padding:7px 13px;font-size:13px;color:var(--text-2);
}
.hob span::before{content:"◆";color:var(--cyan);margin-right:7px;font-size:9px;vertical-align:1px}

.favchain{display:flex;align-items:center;gap:14px;padding:4px 0}
.favchain .ic{width:48px;height:48px;border-radius:14px;background:var(--surface-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.favchain .ic svg{width:30px;height:30px}
.favchain .n{font-weight:800;font-size:16px}
.favchain .d{font-size:12.5px;color:var(--text-3)}

/* posts */
.post{border-bottom:1px solid var(--line);padding:16px}
.post:last-child{border-bottom:none}
.post-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post-h .av{width:36px;height:36px;border-width:2px}
.post-h .nm{font-weight:800;font-size:13.5px;line-height:1.2}
.post-h .hd{font-size:11.5px;color:var(--text-3)}
.post-h .tm{margin-left:auto;font-size:11.5px;color:var(--text-3)}
/* overflow-wrap:anywhere because post bodies quote raw contract addresses, and a
   44 char unbreakable token otherwise sets the column min-content width and
   pushes the whole page sideways on a 360px phone. */
.post-t{font-size:14.5px;color:var(--text);line-height:1.6;margin-bottom:12px;overflow-wrap:anywhere}
.media{
  border-radius:var(--r);overflow:hidden;position:relative;
  height:104px;padding:0 20px;
  background:linear-gradient(110deg,var(--surface-3),var(--surface) 60%);
  border:1px solid var(--line);display:flex;align-items:center;gap:16px;
}
.media img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 2px var(--line-2),0 6px 18px rgba(0,0,0,.5);position:relative;z-index:2}
.media-tick{
  position:absolute;inset:0;display:flex;align-items:center;padding-left:98px;
  font-size:30px;font-weight:900;letter-spacing:-1px;white-space:nowrap;overflow:hidden;
  color:var(--text);opacity:.07;pointer-events:none;
}
/* locked posts still need room for the unlock pitch */
.media.lock{height:212px;justify-content:center;padding:0}
.media.lock img{width:84px;height:84px;box-shadow:none}
.media.lock img{filter:blur(14px);opacity:.35}
.media.lock::after{content:"";position:absolute;inset:0;backdrop-filter:blur(10px);background:rgba(2,6,14,.55)}
.lock-ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;padding:20px}
.lock-ov .ic{font-size:26px}
.lock-ov .t{font-weight:800;font-size:14.5px}
.lock-ov .s{font-size:12.5px;color:var(--text-2);max-width:280px}
.post-f{display:flex;gap:20px;margin-top:12px;font-size:12.5px;color:var(--text-3);font-weight:600}
.post-f b{color:var(--text-2)}

/* subscribe box */
.subbox .tier{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:var(--surface);
  transition:.16s;
}
.subbox .tier:hover{border-color:var(--line-2)}
.subbox .tier.best{border-color:var(--line-2);background:linear-gradient(120deg,rgba(0,112,253,.14),transparent)}
.subbox .tier .n{font-weight:800;font-size:13.5px}
.subbox .tier .d{font-size:11.5px;color:var(--text-3)}
.subbox .tier .p{font-weight:900;color:var(--ice);white-space:nowrap;font-size:14px}
/* Small print. margin set on all sides because .note is used on <p> as well as
   <div>, and a <p> would otherwise keep the 1em UA bottom margin. */
.note{font-size:11.5px;color:var(--text-3);line-height:1.5;margin:10px 0 0}

/* ============================== DM ================================== */
.dm{display:flex;flex-direction:column;height:440px}
.dm-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.msg.them{background:var(--surface-3);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:linear-gradient(100deg,var(--blue),var(--cyan));color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.tip{align-self:center;background:rgba(255,200,70,.12);border:1px solid rgba(255,200,70,.35);color:var(--gold);font-size:12px;font-weight:700;text-align:center;border-radius:99px}
.typing{display:flex;gap:4px;align-self:flex-start;padding:13px 16px;background:var(--surface-3);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.dm-in{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line);background:var(--surface)}
.dm-in input{flex:1;height:40px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line);padding:0 15px;font-size:13.5px;outline:none}
.dm-in input:focus{border-color:var(--line-2)}
.dm-in button{width:40px;height:40px;border-radius:50%;background:linear-gradient(100deg,var(--blue),var(--cyan));color:#fff;font-size:15px;flex-shrink:0;box-shadow:var(--glow-sm)}
.dm-quick{display:flex;gap:7px;padding:0 12px 12px;flex-wrap:wrap;background:var(--surface)}
.dm-quick button{font-size:11.5px;padding:5px 11px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line);color:var(--text-2)}
.dm-quick button:hover{color:var(--ice);border-color:var(--line-2)}

/* ============================= SWAP ================================= */
.swap-tabs{display:flex;gap:8px;margin-bottom:14px}
.swap-tabs button{
  flex:1;padding:9px;border-radius:10px;font-size:13px;font-weight:800;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
}
.swap-tabs button.on{background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;border-color:transparent}
.swap-frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);min-height:200px}
.swap-frame iframe{width:100%;height:600px;border:0;display:block}
.pending{
  padding:26px 20px;text-align:center;color:var(--text-2);font-size:13.5px;line-height:1.7;
}
.pending .big{font-size:34px;margin-bottom:10px}
.pending code{color:var(--ice);font-size:12px}

/* ============================ AGE GATE ============================== */
.gate{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 600px at 50% 40%,rgba(0,60,140,.35),rgba(0,2,6,.97) 70%);
  backdrop-filter:blur(20px);
}
.gate.hide{opacity:0;pointer-events:none;transition:opacity .45s}
.gate-box{
  max-width:560px;width:100%;background:linear-gradient(170deg,#070D18,#03060C);
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:36px 34px;
  box-shadow:0 0 100px rgba(0,112,253,.35),var(--shadow);text-align:center;
  max-height:92vh;overflow-y:auto;animation:gatein .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes gatein{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
.gate-box img{height:auto;width:min(320px,78%);margin:0 auto 22px;display:block;
  filter:drop-shadow(0 0 26px rgba(0,112,253,.55))}
.gate-box .warn{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:1.6px;color:#FF8098;
  background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.4);padding:6px 14px;border-radius:99px;margin-bottom:18px;
}
.gate-box h2{font-size:25px;font-weight:900;letter-spacing:-.6px;margin-bottom:14px;line-height:1.25}
.gate-box h2 em{font-style:normal;color:var(--ice)}
.gate-box p{color:var(--text-2);font-size:14.5px;line-height:1.65;margin-bottom:14px}
.gate-list{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:18px 0;font-size:13.5px;color:var(--text-2)}
.gate-list li{list-style:none;padding:5px 0 5px 26px;position:relative}
.gate-list li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}
.gate-btns{display:flex;gap:11px;margin-top:22px;flex-wrap:wrap}
.gate-btns button{flex:1;min-width:130px;padding:14px;border-radius:14px;font-weight:800;font-size:15px}
.g-yes{background:linear-gradient(96deg,var(--blue),var(--cyan));color:#fff;box-shadow:var(--glow-md)}
.g-yes:hover{filter:brightness(1.13)}
.g-no{background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-2)}
.g-no:hover{color:var(--text)}
.gate-fine{font-size:11.5px;color:var(--text-3);margin-top:18px;line-height:1.6}

/* toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(120px);
  bottom:calc(26px + env(safe-area-inset-bottom,0px));pointer-events:none;
  background:linear-gradient(100deg,var(--blue),var(--cyan));color:#fff;font-weight:700;font-size:13.5px;
  padding:12px 22px;border-radius:99px;box-shadow:var(--glow-md);z-index:9998;transition:transform .3s cubic-bezier(.2,.9,.3,1);
  max-width:90vw;text-align:center;
}
.toast.on{transform:translateX(-50%) translateY(0)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:60px;padding:34px 20px;text-align:center;color:var(--text-3);font-size:12.5px;line-height:1.8}
.foot a{color:var(--text-2)}
.foot a:hover{color:var(--ice)}
.foot .disc{max-width:760px;margin:14px auto 0;font-size:11.5px;opacity:.75}

/* misc */
.empty{padding:40px;text-align:center;color:var(--text-3)}
.badge-soon{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;background:rgba(255,200,70,.14);border:1px solid rgba(255,200,70,.4);color:var(--gold);padding:3px 9px;border-radius:99px;margin-left:8px;vertical-align:2px}

/* responsive */
@media (max-width:1180px){
  .pf-grid{grid-template-columns:1fr}
  .stack.sticky{position:static}
}
@media (max-width:900px){
  .shell,.shell.wide{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .nav-search{display:none}
}
@media (max-width:560px){
  .hero{padding:30px 22px}
  .pf-head{padding:0 16px 18px}
  .grid{gap:12px}
  .av-lg{width:88px;height:88px}
  .pf-top{margin-top:-40px}
  .gate-box{padding:26px 20px}
}

/* =====================================================================
   THE FUN LAYER
   ===================================================================== */

/* sound toggle */
.snd{
  width:34px;height:34px;border-radius:50%;font-size:15px;line-height:1;
  background:var(--surface-2);border:1px solid var(--line);margin-right:6px;transition:.16s;
}
.snd:hover{border-color:var(--line-2);background:var(--surface-3)}

/* confetti canvas */
.confetti-c{position:fixed;inset:0;z-index:9996;pointer-events:none}

/* notification stream */
.notes{position:fixed;left:18px;bottom:18px;z-index:9995;display:flex;flex-direction:column;gap:9px;max-width:330px}
/* Scoped under .notes on purpose. These toasts share the class name with the
   small print .note used all over the site; unscoped, this block won the
   cascade by source order and every caption on every page was silently
   rendered as a bordered, flex, animated toast. */
.notes .note{
  display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border-radius:16px;cursor:pointer;
  background:rgba(8,13,22,.94);border:1px solid var(--line-2);backdrop-filter:blur(12px);
  font-size:13px;color:var(--text-2);box-shadow:0 10px 34px rgba(0,0,0,.55);margin:0;
  animation:noteIn .38s cubic-bezier(.2,.9,.3,1);transition:opacity .35s,transform .35s;
}
.notes .note:hover{border-color:var(--cyan)}
.notes .note.out{opacity:0;transform:translateX(-24px)}
.notes .note img{width:30px;height:30px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--surface-3)}
.notes .note b{color:var(--text);font-weight:800}
@keyframes noteIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

/* generic modal (tips) */
.modal{
  position:fixed;inset:0;z-index:9997;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(1,3,8,.82);backdrop-filter:blur(14px);animation:fade .25s;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{
  max-width:460px;width:100%;text-align:center;padding:34px 30px;border-radius:var(--r-xl);
  background:linear-gradient(170deg,#070D18,#03060C);border:1px solid var(--line-2);
  box-shadow:0 0 90px rgba(0,112,253,.3);animation:gatein .4s cubic-bezier(.2,.9,.3,1);
}
.modal-ic{font-size:38px;margin-bottom:12px}
.modal-box h3{font-size:22px;font-weight:900;margin-bottom:10px}
.modal-box p{color:var(--text-2);font-size:14px;line-height:1.6}
.tip-amt{
  font-size:52px;font-weight:900;letter-spacing:-2px;margin:18px 0;
  background:linear-gradient(100deg,var(--ice),var(--cyan) 50%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.modal-btns{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.modal-btns button{flex:1;min-width:140px;padding:13px;border-radius:13px;font-weight:800;font-size:14px}

/* stories */
#stories{min-width:0;overflow:hidden}
.story-strip{
  display:flex;gap:14px;overflow-x:auto;padding:4px 2px 16px;margin-bottom:8px;
  scrollbar-width:none;
}
.story-strip::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:7px;flex-shrink:0;width:74px}
.story .ring{
  width:66px;height:66px;border-radius:50%;padding:3px;display:block;
  background:conic-gradient(from 210deg,var(--cyan),var(--blue),var(--ice),var(--cyan));
  transition:transform .16s;
}
.story:hover .ring{transform:scale(1.06)}
.story .ring img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:3px solid var(--bg);background:var(--surface-3);
}
.story .nm{font-size:11px;font-weight:800;color:var(--text-3);max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.story-view{
  position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(1,3,8,.93);backdrop-filter:blur(16px);
}
.story-bars{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:4px}
.story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.story-bars i.done{background:rgba(255,255,255,.4)}
.story-bars i.on{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.story-x{position:absolute;top:34px;right:20px;font-size:20px;color:var(--text-2);width:38px;height:38px}
.story-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text);font-size:24px;line-height:1;
}
.story-nav.prev{left:20px} .story-nav.next{right:20px}
.story-nav:hover{background:rgba(255,255,255,.14)}
.story-card{
  width:min(380px,92vw);text-align:center;padding:34px 28px;border-radius:var(--r-xl);
  background:linear-gradient(170deg,#08101C,#03070E);border:1px solid var(--line-2);
  box-shadow:0 0 80px rgba(0,112,253,.28);animation:gatein .35s cubic-bezier(.2,.9,.3,1);
}
.story-card img{width:104px;height:104px;border-radius:50%;margin:0 auto 16px;object-fit:cover;
  border:3px solid var(--surface);box-shadow:0 0 0 2px var(--cyan)}
.story-card .sn{font-size:21px;font-weight:900}
.story-card .sh{font-size:13px;color:var(--text-3);margin-bottom:14px}
.story-card .sl{font-size:16px;color:var(--ice);font-style:italic;margin-bottom:16px}
.story-card .sp{font-size:15px;font-weight:800;color:var(--text);margin-bottom:20px;font-variant-numeric:tabular-nums}
.story-card .sp b.up{color:var(--ok)} .story-card .sp b.dn{color:var(--bad)}

/* rug-o-meter */
.rug-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.rug-score{font-size:40px;font-weight:900;letter-spacing:-1.5px;color:#fff}
.rug-score i{font-size:16px;font-style:normal;color:var(--text-3);font-weight:700}
.rug-band{font-size:12px;font-weight:900;letter-spacing:1.2px;color:var(--ice);
  background:rgba(2,165,245,.12);border:1px solid var(--line-2);padding:5px 12px;border-radius:99px}
.rug-bar{height:11px;border-radius:99px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}
.rug-bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FF4D6D,#FFC846 45%,#00E5A0);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.rug-say{margin-top:12px;font-size:14px;color:var(--text-2);line-height:1.6}

/* cope calculator */
.cope-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;color:var(--text-2)}
.cope-row input{
  width:110px;height:38px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-2);
  padding:0 12px;font-size:15px;font-weight:800;color:var(--text);outline:none;
}
.cope-row input:focus{border-color:var(--cyan)}
.cope-out{margin-top:16px}
.cope-big{font-size:38px;font-weight:900;letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
.cope-big.up,.cope-diff.up{color:var(--ok)} .cope-big.dn,.cope-diff.dn{color:var(--bad)}
.cope-diff{font-size:15px;font-weight:800;margin-top:2px}
.cope-say{margin-top:10px;font-size:13.5px;color:var(--text-2);line-height:1.6}

/* countdown */
#countdown{margin-bottom:18px}
.cd{display:flex;gap:12px;flex-wrap:wrap}
.cd-u{
  flex:1;min-width:88px;text-align:center;padding:16px 10px;border-radius:var(--r);
  background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);
}
.cd-u b{display:block;font-size:32px;font-weight:900;letter-spacing:-1px;color:#fff;font-variant-numeric:tabular-nums}
.cd-u span{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3)}
.cd-live,.cd-soon{
  padding:18px 20px;border-radius:var(--r);border:1px solid var(--line-2);
  background:linear-gradient(120deg,rgba(0,112,253,.16),transparent);font-size:15px;font-weight:700;
}
.cd-soon{display:flex;flex-direction:column;gap:6px}
.cd-soon span{font-size:13px;font-weight:500;color:var(--text-2);line-height:1.6}
.cd-soon code{color:var(--ice);font-size:12.5px}

/* feed timeline */
.feed-list{display:flex;flex-direction:column;gap:16px}
.feed-list .post{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.feed-list .post:hover{border-color:var(--line-2)}
.feed-list .media{height:104px}
.feed-list .media.lock{height:212px}
.post-h .nm a:hover{color:var(--ice)}
.post-cta{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;align-items:center}
.post-cta .btn-sm{width:118px;height:34px;padding:0}
.post-cta .chip{height:34px;display:inline-flex;align-items:center}
.post-cta .chip{padding:7px 13px}

/* application form */
.form{display:flex;flex-direction:column;gap:15px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:700;color:var(--text-2)}
.form input,.form textarea,.form select{
  background:var(--surface-3);border:1px solid var(--line);border-radius:11px;padding:11px 14px;
  font-size:14px;color:var(--text);outline:none;font-weight:500;
}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--cyan)}
.form textarea{resize:vertical}
.verdict{
  margin-top:18px;padding:20px;border-radius:var(--r);border:1px solid rgba(255,77,109,.4);
  background:linear-gradient(120deg,rgba(255,77,109,.1),transparent);animation:gatein .4s;
}
.verdict h4{font-size:17px;font-weight:900;margin-bottom:9px;color:#FF8098}
.verdict p{font-size:14px;color:var(--text-2);line-height:1.65;margin-bottom:9px}
.verdict .score{font-size:12px;font-weight:900;letter-spacing:1px;color:var(--text-3)}

/* konami: god candle mode */
body.rich{--bad:#00E5A0}
body.rich .tk .s.dn,body.rich .cc-ch.dn,body.rich .ct-ch.dn,
body.rich .cb-val.dn,body.rich .cs b.dn{color:var(--ok)!important}
body.rich .cb-fill.dn{background:var(--ok)}
body.rich .hero::after{
  content:"GOD CANDLE MODE";position:absolute;top:14px;right:20px;font-size:11px;font-weight:900;
  letter-spacing:2px;color:var(--ok);
}

@media (max-width:700px){
  .notes{display:none}
  .story .ring{width:58px;height:58px}
  .story{width:64px}
  .cope-big{font-size:30px}
}


/* small screens: keep a readable Buy label and align the row evenly */



/* stat ticker: an even 3 across, 3 below, instead of an orphan tile */
.ticker{grid-template-columns:repeat(3,1fr)}
@media (max-width:1180px){.ticker{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ticker{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   NAV: buy on the left, drawer on mobile
   ===================================================================== */
.nav-buy{
  flex-shrink:0;height:36px;padding:0 16px;border-radius:99px;order:2;
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;white-space:nowrap;
}
.nav-actions .snd{
  height:36px;display:inline-flex;align-items:center;justify-content:center;
  flex-direction:row;flex-wrap:nowrap;
}
.btn-buy .ico{display:inline-flex;align-items:center;line-height:1;font-size:15px}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-actions .snd{order:1}
.nav-actions .burger{order:3}
/* No margin-left:auto here. That is what held the field against the right of
   the bar with dead space between it and the logo. It grows instead. */

.nav-actions .snd{width:36px;margin:0}

/* Burger. Hidden by default and switched on at the width the sidebar drops out
   (900px), so exactly one full nav is on screen at any size: the sidebar above
   that, the drawer below it. Never both, never neither. */
.nav-actions .burger{
  width:38px;height:36px;border-radius:11px;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  background:var(--surface-2);border:1px solid var(--line);transition:.16s;
}
.burger:hover{border-color:var(--line-2)}
.burger i{
  display:block;width:17px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .22s cubic-bezier(.2,.9,.3,1),opacity .16s;
}
.burger.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* drawer */
.drawer{
  position:absolute;left:0;right:0;top:100%;z-index:59;
  background:#04070E;
  border-bottom:1px solid var(--line-2);box-shadow:0 22px 50px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-10px);transition:opacity .22s,transform .22s cubic-bezier(.2,.9,.3,1);
  /* The menu is taller than a small phone. It has to scroll, or the last item
     and the Buy button simply cannot be reached, which is how a menu becomes a
     list of things you are not allowed to click. dvh rather than vh so the
     browser's own collapsing toolbar is accounted for. */
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* a thin scrollbar rather than the platform default, which on desktop is a
   14px grey slab down the side of a dark menu */
.drawer::-webkit-scrollbar{width:8px}
.drawer::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.drawer::-webkit-scrollbar-track{background:transparent}
.drawer{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.drawer.on{opacity:1;transform:none}
.drawer-in{max-width:1440px;margin:0 auto;padding:12px 14px 18px;display:flex;flex-direction:column;gap:2px}
.drawer-search{position:relative;margin-bottom:8px}
.drawer-search input{
  width:100%;height:42px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line);padding:0 14px 0 38px;font-size:15px;outline:none;
}
.drawer-search input:focus{border-color:var(--line-2)}
.drawer-search svg{position:absolute;left:14px;top:13px;opacity:.5}
.drawer a{
  display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:13px;
  font-size:18.5px;font-weight:700;color:var(--text-2);transition:.16s;
  letter-spacing:-.01em;
}
.drawer a:hover{background:var(--surface-2);color:var(--text)}
.drawer a.on{background:rgba(0,112,253,.13);color:var(--ice);box-shadow:inset 0 0 0 1px var(--line-2)}
/* No box-shadow here. There used to be one, and it never rendered: buy-pulse
   keyframed box-shadow on .btn-buy, and a running animation outranks any normal
   declaration, so the drawer's button silently wore the header's halo. Now that
   the pulse is an opacity animation on a pseudo element instead, this
   declaration would suddenly start winning and the drawer's Buy would lose its
   rim light and its hover glow. Dropping it keeps the two buttons identical,
   which is what they have always looked like. */
.dr-buy{
  margin-top:8px;justify-content:center;color:#fff!important;
  background:linear-gradient(96deg,var(--blue),var(--cyan));
}
.drawer-veil{position:fixed;inset:var(--nav-h) 0 0;z-index:58;background:rgba(1,3,8,.55);
  opacity:0;transition:opacity .22s}
.drawer-veil.on{opacity:1}

/* Desktop and laptop have the sidebar, so the burger and its drawer are dead
   weight there and stay off. Both switch on at 900px, the same breakpoint that
   removes the sidebar, so navigation never disappears in the handover. */
@media (min-width:901px){
  .drawer,.drawer-veil{display:none!important}
}
@media (max-width:900px){
  .nav-actions .burger{display:flex}
  .nav-actions{margin-left:auto}   /* header search is gone, so this pushes */
}
@media (max-width:560px){
  .nav-in{gap:8px;padding:0 12px}
  .brand-logo{height:28px}
  .nav-buy{padding:0 13px;font-size:13px}
}
@media (max-width:420px){
  /* The short label goes in the span, not in ::after. ::after on this button
     is the shine sweep: a positioned element with a gradient background and a
     transform on a loop. Putting text in it handed the word to the thing that
     paints over the button, and the header rendered as an empty blue pill on
     every phone under 420px. The span is already lifted above the shine by
     .btn-buy>*, so the text survives there and the sweep keeps running. */
  .nav-buy .lbl{font-size:0;letter-spacing:0}
  .nav-buy .lbl::before{content:"Buy";font-size:13px;font-weight:800;letter-spacing:.01em}
  .nav-buy{padding:0 14px;gap:6px}
  .nav-actions{gap:5px}
  .nav-in{gap:6px;padding:0 10px}
  .brand-logo{height:25px}
}

/* =====================================================================
   TOKENOMICS
   ===================================================================== */
.tk-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.donut-wrap{display:flex;justify-content:center;padding:6px 0 18px}
.donut{width:min(300px,74vw);height:auto;overflow:visible}
.donut .slice{transition:opacity .18s,stroke-width .18s;cursor:default}
.donut:hover .slice{opacity:.45}
.donut .slice:hover{opacity:1;stroke-width:34}
.donut .d-lab{fill:#fff;font-size:15px;font-weight:800;letter-spacing:-.3px;
  paint-order:stroke;stroke:rgba(2,6,12,.55);stroke-width:3px}
.donut .d-hero{fill:#fff;font-size:42px;font-weight:900;letter-spacing:-2px}
.donut .d-sub{fill:var(--text-3);font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}

.legend{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.lg-row{display:flex;gap:12px;align-items:flex-start}
.lg-dot{width:12px;height:12px;border-radius:4px;flex-shrink:0;margin-top:4px;
  box-shadow:0 0 0 2px var(--surface)}
.lg-dot.sm{width:9px;height:9px;display:inline-block;margin:0 8px 0 0;border-radius:3px}
.lg-body{min-width:0;flex:1}
.lg-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lg-top b{font-size:15px;font-weight:800}
.lg-pct{font-size:14px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}
.lg-n{font-size:13px;color:var(--ice);font-weight:700;font-variant-numeric:tabular-nums}
.lg-note{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:4px}

.alloc-bar{display:flex;gap:2px;height:16px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.alloc-bar span{display:block;height:100%}

.tk-big{font-size:34px;font-weight:900;letter-spacing:-1.4px;color:#fff;font-variant-numeric:tabular-nums}
.tk-big-sub{font-size:13px;font-weight:700;color:var(--text-3);margin-bottom:16px}
.tk-uses{display:flex;flex-direction:column;gap:12px}
.use{display:flex;gap:12px;padding:13px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.use .ic{font-size:20px;line-height:1.2}
.use b{display:block;font-size:14px;margin-bottom:3px}
.use span{font-size:13px;color:var(--text-2);line-height:1.55}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line)}
.tbl thead th{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);font-weight:800}
.tbl td{font-variant-numeric:tabular-nums;color:var(--text)}
.tbl tbody th{font-weight:700;color:var(--text)}
.tbl tr.tot th,.tbl tr.tot td{color:var(--ice);font-weight:900}
/* first total row keeps a hairline so "original" and "current" read as a pair */
.tbl tr.tot:first-of-type th,.tbl tr.tot:first-of-type td{border-top:1px solid var(--line-2)}
.tbl tr.tot:last-child th,.tbl tr.tot:last-child td{border-bottom:none}

/* The burn card. Magenta edge so it is findable at a glance without the number
   itself being a color the eye has to decode. */
.burn-card{border-color:rgba(224,71,158,.42)}
.burn-card .card-h{color:#F2A0CB}
.burn-card .card-b .btn{background:#E0479E;border-color:#E0479E;color:#12040B}
.burn-card .card-b .btn:hover{background:#EC64B0;border-color:#EC64B0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===============================================================
   BATTLE OF THE CHAINS
   One hue for the bars. Identity is carried by the chain mark and its
   name, never by the bar colour: nineteen categorical hues that a
   colour blind reader can separate do not exist, and colouring by rank
   is how a chart starts lying.
   =============================================================== */
.chain-note{font-size:12.5px;color:var(--text-3);margin:0 0 12px;line-height:1.5}

.champ-card{border-color:rgba(0,112,253,.42);
  background:linear-gradient(120deg,rgba(0,112,253,.14),transparent 60%),var(--surface-2)}
.champ{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.champ-wait,.cb-wait{color:var(--text-3);font-size:14px;padding:14px 4px}
.ch-ico{flex:0 0 auto;width:62px;height:62px;border-radius:16px;background:var(--surface-3);
  border:1px solid var(--line-2);display:grid;place-items:center}
.ch-ico svg{width:38px;height:38px}
.ch-b{flex:1 1 220px;min-width:0}
.ch-k{font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3)}
.ch-n{font-size:30px;font-weight:900;letter-spacing:-.8px;line-height:1.15;margin:2px 0 4px}
.ch-s{font-size:13.5px;color:var(--text-2)}
.ch-score{flex:0 0 auto;text-align:right}
.ch-score b{display:block;font-size:34px;font-weight:900;color:var(--ice);
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.ch-score span{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}

.chain-board{display:flex;flex-direction:column;gap:3px}
.cb-row{
  display:grid;grid-template-columns:26px 30px minmax(96px,150px) minmax(0,1fr) 86px;
  align-items:center;gap:12px;width:100%;text-align:left;
  padding:9px 10px;border-radius:11px;background:transparent;border:1px solid transparent;
  transition:background .14s,border-color .14s;cursor:pointer;
}
.cb-row:hover{background:var(--surface-2);border-color:var(--line)}
.cb-row.on{background:rgba(0,112,253,.13);border-color:var(--line-2)}
.cb-row.dead{opacity:.55}
.cb-rank{font-size:12px;font-weight:900;color:var(--text-3);font-variant-numeric:tabular-nums;text-align:right}
.cb-ico{width:26px;height:26px;display:grid;place-items:center;flex-shrink:0}
.cb-ico svg{width:22px;height:22px}
.cb-name{font-size:14px;font-weight:800;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-name .cb-n{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--text-3)}
/* thin mark, 4px rounded data-end, anchored to the baseline */
.cb-track{position:relative;height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.cb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;
  background:var(--blue);transition:width .5s cubic-bezier(.3,.9,.3,1)}
.cb-track.signed .cb-fill{left:50%;border-radius:0 4px 4px 0}
.cb-track.signed .cb-fill.dn{left:auto;right:50%;border-radius:4px 0 0 4px}
.cb-fill.up{background:var(--ok)}
.cb-fill.dn{background:var(--bad)}
.cb-mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line-2);z-index:1}
.cb-val{font-size:13px;font-weight:900;color:var(--text);text-align:right;
  font-variant-numeric:tabular-nums}
.cb-val.up{color:var(--ok)}
.cb-val.dn{color:var(--bad)}

/* selected chain detail */
.cp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cp-ico{width:46px;height:46px;border-radius:13px;background:var(--surface-3);
  border:1px solid var(--line-2);display:grid;place-items:center;flex-shrink:0}
.cp-ico svg{width:28px;height:28px}
.cp-head h3{font-size:21px;font-weight:900;letter-spacing:-.4px;margin:0}
.cp-sub{font-size:12.5px;color:var(--text-3);margin-top:2px}
.cp-toggle{margin-left:auto;display:flex;gap:7px}
.chip.sm{padding:5px 11px;font-size:12px}
.cp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.cs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px}
.cs b{display:block;font-size:19px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.cs b.up{color:var(--ok)}
.cs b.dn{color:var(--bad)}
.cs span{font-size:11px;color:var(--text-3);font-weight:700}

.ct-list{display:flex;flex-direction:column;gap:4px}
.ct-row{display:grid;grid-template-columns:22px 34px minmax(0,1fr) auto 78px;
  align-items:center;gap:11px;padding:8px 10px;border-radius:11px;
  border:1px solid transparent;transition:background .14s,border-color .14s}
.ct-row:hover{background:var(--surface-2);border-color:var(--line)}
.ct-i{font-size:11.5px;font-weight:900;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.ct-av{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--surface-3);
  border:1px solid var(--line-2)}
.ct-av img{width:100%;height:100%;object-fit:cover;display:block}
.ct-n{font-size:13.5px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-n em{font-style:normal;font-weight:700;color:var(--text-3);margin-left:7px;font-size:12px}
/* A token in the chain-wide top 100 that is also one of our creators. Marked so
   the ones you can click are obvious, rather than every row looking like a link
   and most of them going nowhere. */
.ct-n .ct-badge{
  font-size:9.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(0,112,253,.16);border:1px solid rgba(0,112,253,.4);color:#7FC4FF;
  padding:2px 7px;border-radius:99px;margin-left:8px;vertical-align:1px;white-space:nowrap;
}
.ct-row.ext{cursor:default}
.ct-row.ext:hover{background:transparent;border-color:transparent}
.ct-row.ext .ct-n{color:var(--text-2);font-weight:700}
/* ticker stand-in when the source has no logo for a token */
.ct-ph{
  width:100%;height:100%;display:grid;place-items:center;font-size:10px;font-weight:900;
  color:var(--text-3);background:var(--surface-3);letter-spacing:.3px;
}
.ct-mc{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.ct-ch{font-size:12.5px;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.ct-ch.up{color:var(--ok)}
.ct-ch.dn{color:var(--bad)}
.ct-empty{font-size:13px;color:var(--text-3);padding:16px 4px;line-height:1.6}

/* hover breakdown for the composite score */
.chain-tip{
  position:absolute;z-index:9990;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .13s,transform .13s;min-width:212px;
  background:#04070E;border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.chain-tip.on{opacity:1;transform:none}
.chain-tip b{display:block;font-size:13px;margin-bottom:8px}
.chain-tip i{display:flex;align-items:center;gap:8px;font-style:normal;font-size:12px;
  color:var(--text-2);padding:3px 0}
.chain-tip i em{margin-left:auto;font-style:normal;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums}
.chain-tip u{display:flex;text-decoration:none;font-size:12px;font-weight:800;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.chain-tip u em{margin-left:auto;font-style:normal;color:var(--ice)}
.chain-tip .sw{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.chain-tip .sw.mc{background:#0070FD}
.chain-tip .sw.mom{background:#C97F1A}
.chain-tip .sw.vol{background:#9B7BD4}

@media (max-width:640px){
  .cb-row{grid-template-columns:22px 26px minmax(74px,1fr) 66px;row-gap:8px}
  .cb-row .cb-track{grid-column:1/-1;order:5}
  .ch-n{font-size:24px}
  .ct-row{grid-template-columns:20px 30px minmax(0,1fr) 68px}
  .ct-mc{display:none}
}

/* ===============================================================
   LAUNCHPAD
   Only the teaser below is used on memesly.io right now. Everything
   after it styles the launch page, which builds for its own subdomain
   (LAUNCH_LIVE in build.py). Kept here so the two share one stylesheet
   and cannot drift apart.
   =============================================================== */
/* homepage teaser */
.teaser{
  display:block;margin-top:20px;border-color:rgba(0,112,253,.45);
  background:linear-gradient(115deg,rgba(0,112,253,.16),rgba(2,165,245,.05) 55%,transparent),
             var(--surface-2);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.teaser:hover{border-color:var(--cyan);box-shadow:0 12px 34px rgba(0,112,253,.2);
  transform:translateY(-2px)}
/* not a link yet: no hover lift, no pointer, nothing that suggests a click does
   something. It goes back to being a link when the subdomain is up. */
.teaser.is-soon{cursor:default}
.teaser.is-soon:hover{border-color:rgba(0,112,253,.45);box-shadow:none;transform:none}
.tz-go.soon{color:var(--text-3);letter-spacing:.5px}
.tz{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tz-ic{font-size:32px;line-height:1;flex-shrink:0}
.tz-b{flex:1 1 260px;min-width:0}
.tz-k{font-size:10.5px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--ice)}
.tz-b h3{font-size:20px;font-weight:900;letter-spacing:-.4px;margin:4px 0 6px;
  text-wrap:balance}
.tz-b p{font-size:13.5px;line-height:1.6;color:var(--text-2);margin:0}
.tz-go{flex-shrink:0;font-size:13px;font-weight:900;color:var(--ice);white-space:nowrap}
@media (max-width:560px){.tz-ic{font-size:26px}.tz-b h3{font-size:17px}}

/* 20px, not 16. This is a card, and the card rhythm on this site is 20px
   everywhere else including the wallet bar directly under it. Measured on a
   phone the difference was visible: the notice sat 4px closer to whatever
   followed it than every other pair of cards on the page. */
.lp-notice{border-color:rgba(255,200,70,.4);background:rgba(255,200,70,.05);
  margin-bottom:20px}
.lp-notice .card-b{padding:15px 17px}
.lp-notice-in{display:flex;gap:14px;align-items:flex-start}
/* A fixed column, not intrinsic width. The mode notice's icon is an emoji
   and the sandbox notice's is a dot, and left to themselves they are nowhere
   near the same width, which pushed the two headings out of line by 45px. */
.lp-notice-ic{flex:0 0 30px;width:30px;min-height:26px;display:flex;
  align-items:center;justify-content:center;font-size:24px;line-height:1}
/* The risk icon is an inline SVG now rather than the warning-triangle emoji.
   It inherits the notice's gold, so a mode notice and a mainnet one still
   line up in the same 30px column. */
.lp-notice-ic svg{width:23px;height:23px;display:block;color:var(--gold)}
.lp-notice b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--gold);
  line-height:1.35}
.lp-notice p{margin:0;font-size:13px;line-height:1.62;color:var(--text-2);max-width:88ch}

.lp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
@media (max-width:980px){.lp-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- add-ons, on the launch page --------------------------------------
   Three equal columns that collapse to one, never to a 2+1 orphan row. Each
   card is a full-height flex column with the price pinned to the bottom by
   margin-top:auto, so three cards of unequal copy still line their footers up:
   a row of cards whose calls to action sit at three different heights reads as
   a rendering fault, and it is the single most common way a card grid looks
   cheap. */
.lp-addons{margin-top:30px}
.lp-addons .sec-head{margin-bottom:6px}
.lp-addon-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px;
}
@media (max-width:1080px){.lp-addon-grid{grid-template-columns:minmax(0,1fr)}}
.lp-addon{
  display:flex;flex-direction:column;height:100%;
  padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);transition:.16s;
}
.lp-addon:hover{
  border-color:rgba(255,150,26,.5);background:var(--surface-2);
  transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lp-addon-tag{
  align-self:flex-start;font-size:10.5px;font-weight:900;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gold);background:rgba(255,200,70,.1);
  border:1px solid rgba(255,200,70,.32);padding:4px 10px;border-radius:99px;
}
.lp-addon b{display:block;margin:12px 0 8px;font-size:16.5px;font-weight:800;
  color:#fff;line-height:1.3;letter-spacing:-.01em}
.lp-addon p{margin:0;font-size:13.5px;line-height:1.66;color:var(--text-2);max-width:none}
.lp-addon-go{
  margin-top:auto;padding-top:14px;font-size:13px;font-weight:800;color:var(--ice);
  display:inline-flex;align-items:center;gap:6px;
}
.lp-addon-go::after{content:"\203A";font-size:17px;line-height:1;transition:transform .16s}
.lp-addon:hover .lp-addon-go::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .lp-addon:hover{transform:none}
  .lp-addon:hover .lp-addon-go::after{transform:none}
}

.lp-form{display:flex;flex-direction:column;gap:12px}
.lp-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:800;
  letter-spacing:.4px;color:var(--text-3);text-transform:uppercase}
.lp-f.req::after{content:" required";font-size:9.5px;color:var(--text-3);opacity:.7}
.lp-f input,.lp-f textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;color:var(--text);font-size:14px;font-weight:600;
  font-family:inherit;outline:none;text-transform:none;letter-spacing:0;
}
.lp-f input:focus,.lp-f textarea:focus{border-color:var(--cyan);box-shadow:var(--glow-sm)}
.lp-f textarea{resize:vertical;line-height:1.5}

/* board */
.lp-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.lp-card{
  display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px;transition:border-color .16s,transform .16s,box-shadow .16s;cursor:pointer;
}
.lp-card:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,112,253,.16)}
.lp-prev .lp-card{cursor:default}
.lp-prev .lp-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.lp-av{width:52px;height:52px;border-radius:14px;overflow:hidden;flex-shrink:0;
  background:var(--surface-3);border:1px solid var(--line-2);display:grid;place-items:center}
.lp-av.lg{width:56px;height:56px}
.lp-av img{width:100%;height:100%;object-fit:cover;display:block}
.lp-ph{font-size:13px;font-weight:900;color:var(--text-3);letter-spacing:.4px}
.lp-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.lp-n{font-size:15px;font-weight:900;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  letter-spacing:-.2px}
.lp-n em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--text-3)}
.lp-t{font-style:normal;font-size:15px;color:var(--text-3)}
.lp-demo{
  font-size:9.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--text-3);
  padding:2px 7px;border-radius:99px;
}
.lp-d{font-size:12.5px;color:var(--text-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-meter{display:block;height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.lp-meter i{display:block;height:100%;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s cubic-bezier(.3,.9,.3,1)}
.lp-s{font-size:11.5px;color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums}

.lp-detail{margin-top:20px;border-color:rgba(0,112,253,.4)}
.cv-wrap{margin:4px 0 18px}
.lp-buy{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.lp-buy label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:800;
  letter-spacing:.4px;color:var(--text-3);text-transform:uppercase}
.lp-buy input{
  width:130px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 12px;color:var(--text);font-size:14px;font-weight:700;outline:none;
}
.lp-warn{flex:1 1 240px;min-width:0;font-size:11.5px;color:var(--gold);line-height:1.5}

/* bonding curve chart. One series, so no legend: the card heading names it. */
/* The SVG viewBox is 620 units wide, so on a wide card it scaled past 3x and
   every label scaled with it. Capping the width keeps the chart at roughly the
   size it was drawn for instead of a blown up diagram. */
.curve{width:100%;height:auto;display:block}
.cv-wrap{max-width:900px}
.curve .cvg{stroke:var(--line);stroke-width:1}
.curve .cvl{fill:var(--text-3);font-size:10px;font-weight:700}
/* The axis caption sits above the plot now, clear of the top tick. */
.cvc{fill:var(--text-3);font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;opacity:.75}
.curve .cvp{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.curve .cva{fill:rgba(0,112,253,.16)}
.curve .cvx{stroke:var(--cyan);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.curve .cvd{fill:var(--cyan);stroke:var(--surface);stroke-width:2}
.cv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:12px}
.cv-stats .cs{padding:10px 11px}
.cv-stats .cs b{font-size:16px}

/* ===============================================================
   ABOUT / MISSION
   A vertical flight path rather than a bullet list: the connector
   line is what makes it read as stages of one journey instead of
   five unrelated claims.
   =============================================================== */
.ab-p{font-size:14.5px;line-height:1.68;color:var(--text-2);margin:0 0 14px}
.ab-p:last-child{margin-bottom:0}

.mission{display:flex;flex-direction:column}
.ms-row{display:flex;gap:16px}
.ms-mark{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:46px}
.ms-ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  background:var(--surface-2);border:1px solid var(--line-2);flex-shrink:0;
}
.ms-line{flex:1;width:2px;background:linear-gradient(var(--line-2),transparent);margin:6px 0 0}
.ms-row:last-child .ms-line{display:none}
.ms-body{padding:2px 0 26px;min-width:0;flex:1}
.ms-row:last-child .ms-body{padding-bottom:2px}
.ms-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.ms-alt{font-size:10.5px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3)}
.ms-badge{
  font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(0,112,253,.14);border:1px solid rgba(0,112,253,.38);color:#7FC4FF;
  padding:2px 8px;border-radius:99px;
}
.ms-body h3{font-size:18px;font-weight:900;letter-spacing:-.3px;margin:0 0 6px}
.ms-body p{font-size:13.5px;line-height:1.62;color:var(--text-2);margin:0}

@media (max-width:520px){
  .ms-mark{width:38px}
  .ms-ic{width:38px;height:38px;font-size:18px}
  .ms-body h3{font-size:16px}
}

/* ===============================================================
   FAQ
   Native <details> rather than a JS accordion: works with JS off,
   keyboard operable for free, and find-in-page can reach it.
   =============================================================== */
.faq-card{border-color:rgba(0,112,253,.4)}
.faq-card .card-h{color:#7FC4FF}
.faq-lede{font-size:14px;color:var(--text-2);line-height:1.62;margin:0 0 16px}

.faq-list{display:flex;flex-direction:column;gap:9px}
.faq-q{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;transition:border-color .16s,background .16s}
.faq-q[open]{border-color:var(--line-2);background:var(--surface-2)}
.faq-q:hover{border-color:var(--line-2)}
.faq-q>summary{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;list-style:none;
  padding:13px 15px;font-weight:800;font-size:14.5px;line-height:1.45;color:var(--text)}
.faq-q>summary::-webkit-details-marker{display:none}
/* Chevron drawn in CSS. An arrow glyph would depend on the font shipping one,
   and the sans stack here does not on every platform. */
.faq-q>summary::after{
  content:"";flex:0 0 auto;margin-left:auto;width:8px;height:8px;margin-top:5px;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);transition:transform .18s,border-color .18s}
.faq-q[open]>summary::after{transform:rotate(-135deg);border-color:var(--cyan)}
.faq-q>summary::before{
  content:"?";flex:0 0 auto;width:20px;height:20px;border-radius:6px;margin-top:-1px;
  background:rgba(0,112,253,.16);color:#7FC4FF;font-size:12px;font-weight:900;
  display:grid;place-items:center}
.faq-q>summary>span{min-width:0}
.faq-q>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.faq-q>p{margin:0;padding:0 15px 14px 46px;font-size:13.5px;line-height:1.68;color:var(--text-2)}

.faq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.faq-foot span{font-size:12px;color:var(--text-3);line-height:1.5;flex:1 1 220px;min-width:0}
.faq-foot .btn{flex:0 0 auto}

/* Section jump list. Wraps rather than scrolls, so no chevron affordance is
   needed and nothing hides off the right edge on a phone. */
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.faq-jump a{
  padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:800;color:var(--text-2);white-space:nowrap}
.faq-jump a:hover{border-color:var(--cyan);color:var(--text)}
/* the anchor targets sit under the sticky nav without this */
.faq-card,.page main>.card[id]{scroll-margin-top:88px}

@media (max-width:520px){
  .faq-q>summary{font-size:13.5px;padding:12px 13px}
  .faq-q>p{padding:0 13px 13px 42px;font-size:13px}
}

@media (max-width:1080px){.tk-grid{grid-template-columns:minmax(0,1fr)}}

/* footer: official channels + live CA */
.foot-soc{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot-soc a{
  padding:7px 16px;border-radius:99px;font-size:13px;font-weight:800;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);transition:.16s;
}
.foot-soc a:hover{color:var(--ice);border-color:var(--line-2);background:var(--surface-3)}
.foot-ca{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:9px 14px;border-radius:99px;background:var(--surface);border:1px dashed var(--line-2);
  max-width:100%;
}
.foot-ca span{font-size:10px;font-weight:900;letter-spacing:1.1px;color:var(--text-3)}
.foot-ca code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ice);
  overflow:hidden;text-overflow:ellipsis;max-width:min(420px,68vw);white-space:nowrap}

/* swap: plugin mount, chart embed and the hand-off cards */
.swap-frame{min-height:260px}
.jup-plugin{min-height:520px}
.swap-loading{padding:26px;text-align:center;color:var(--text-3);font-size:13.5px}
.chart-frame{width:100%;height:520px;border:0;display:block;background:var(--surface)}
.swap-cta{padding:30px 24px;text-align:center}
.swap-cta-t{font-size:19px;font-weight:900;margin-bottom:10px}
.swap-cta p{font-size:14px;color:var(--text-2);line-height:1.65;max-width:420px;margin:0 auto 18px}

/* hero: copy on the left, live token panel on the right, no dead space */
.hero-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;align-items:center}
.hero-copy{min-width:0}
.hero p{max-width:none}
.hero-live{
  background:rgba(2,6,14,.5);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:16px;backdrop-filter:blur(8px);min-width:0;
}
.hl-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ice);margin-bottom:12px}
.hl-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blip 1.6s infinite}
.hero-live .ticker{border-radius:var(--r)}
.hl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.hl-foot .btn{padding:10px 20px;font-size:13.5px}
.hl-state{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}
/* 1280, not 1100: the sidebar appears at 1120, so between those two widths the
   hero would split a column that is already short into two, leaving the
   headline about 400px to work with. Stay stacked until there is room. */
@media (max-width:1279px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-live{max-width:520px}
}

/* language switcher */
.lang{position:relative}
.lang-btn{
  width:40px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line);font-size:16px;line-height:1;transition:.16s;
}
.lang-btn:hover{border-color:var(--line-2)}
.lang.on .lang-btn{border-color:var(--cyan);background:var(--surface-3)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:186px;padding:7px;
  background:#04070E;border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 18px 46px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:.18s cubic-bezier(.2,.9,.3,1);
}
.lang.on .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:700;color:var(--text-2);text-align:left;transition:.14s;
}
.lang-menu button:hover{background:var(--surface-2);color:var(--text)}
.lang-menu button.on{background:rgba(0,112,253,.14);color:var(--ice)}
.lang-menu button span{font-size:14px;line-height:1.2}
.flag{width:22px;height:15px;border-radius:3px;flex-shrink:0;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lang-cur{display:flex;align-items:center;justify-content:center}
.lang-cur .flag{width:21px;height:14px}
@media (max-width:420px){
  .lang-btn{width:34px;height:34px;font-size:15px}
  .lang-menu{right:-40px}
}

/* narrow cards: the chain badge drops to its icon so it cannot collide with
   the Subscribe button, which takes the freed width */
@media (max-width:760px){
  .cc-foot{grid-template-columns:auto minmax(0,1fr);gap:9px}
  .cc-foot .chain-pill{
    width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;
  }
  .cc-foot .chain-pill .cp-t{display:none}
  .cc-foot .chain-pill svg{width:17px;height:17px}
  /* keep the fixed width where it fits; only shrink on the smallest phones */
  .cc-foot .btn-sm{justify-self:end;width:118px;max-width:100%;min-width:0;padding:0 10px}
}

/* =====================================================================
   RAID STATION
   ===================================================================== */
.raid-progress{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rp-bar{flex:1;min-width:180px;height:10px;border-radius:99px;background:var(--surface-3);
  border:1px solid var(--line);overflow:hidden}
.rp-bar span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .5s cubic-bezier(.2,.9,.3,1)}
.rp-txt{font-size:13px;font-weight:700;color:var(--text-2);white-space:nowrap}
.rp-txt b{color:#fff;font-size:16px}

.raid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:900px){.raid-grid{grid-template-columns:minmax(0,1fr)}}

.raid-card{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .18s;
}
.raid-card:hover{border-color:var(--line-2)}
.raid-card.done{border-color:rgba(0,229,160,.4);background:linear-gradient(170deg,rgba(0,229,160,.07),var(--surface))}
.raid-top{display:flex;align-items:center;gap:11px}
.raid-n{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-2);font-size:12px;font-weight:900;color:var(--ice);
}
.raid-ic{font-size:20px;line-height:1}
.raid-h{flex:1;min-width:0}
.raid-h h3{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.raid-tick{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--text-3);font-size:13px;font-weight:900;transition:.2s;
}
.raid-card.done .raid-tick{background:var(--ok);color:#02060C}
.raid-d{font-size:13.5px;color:var(--text-2);line-height:1.6}
.raid-out{
  background:#04070E;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;
  max-height:180px;overflow:auto;
}
.raid-acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:auto}
.raid-acts .btn-sm{width:auto;min-width:130px;height:36px;padding:0 18px}
.raid-acts .chip{height:36px;display:inline-flex;align-items:center}
.raid-card .note{margin-top:0}

@media (max-width:560px){
  .raid-acts .btn-sm{width:100%;min-width:0}
  .raid-acts .chip{flex:1;justify-content:center}
}

/* hero contract row */
.hl-ca{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 12px;
  background:rgba(2,6,14,.6);border:1px dashed var(--line-2);border-radius:var(--r);
}
.hl-ca .lb{font-size:10px;font-weight:900;letter-spacing:1.1px;color:var(--text-3)}
.hl-ca code{
  flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* selectable subscription tiers */
.subbox .tier{
  width:100%;text-align:left;cursor:pointer;font:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
  background:var(--surface);transition:.16s;
}
.subbox .tier:hover{border-color:var(--line-2);background:var(--surface-2);transform:translateY(-1px)}
.subbox .tier.on{
  border-color:var(--cyan);background:linear-gradient(120deg,rgba(0,112,253,.16),transparent);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.subbox .tier.on .n::after{content:" ✓";color:var(--ok)}

/* ============================ ROAD TO $1B ============================ */
.road{margin-bottom:22px}
.road .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd-state{font-size:10.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-3);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.rd-live .rd-state{color:var(--ok)}

.rd-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.rd-now{font-size:clamp(30px,5.4cqi,42px);font-weight:900;letter-spacing:-1.4px;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.rd-goal{text-align:right}
.rd-target{font-size:19px;font-weight:900;color:var(--ice);font-variant-numeric:tabular-nums;line-height:1}
.rd-l{font-size:11.5px;color:var(--text-3);font-weight:700;margin-top:6px}
.rd-l b{color:var(--ice);font-weight:900;font-variant-numeric:tabular-nums}

/* Track is a lighter step of the fill's own ramp, not a neutral gray, so the
   meter reads as one object across filled and unfilled. */
.rd-track{
  position:relative;height:14px;border-radius:99px;background:rgba(0,112,253,.16);
  border:1px solid rgba(0,112,253,.28);margin-bottom:34px;
}
.rd-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  /* min-width keeps the origin visible: at an early market cap the true fill is
     a fraction of a pixel, and an empty track reads as broken rather than small */
  min-width:8px;background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 14px rgba(2,165,245,.5);transition:width .9s cubic-bezier(.2,.9,.3,1);
}
.rd-track.sm{height:8px;margin-bottom:8px}
.rd-track.sm .rd-fill{min-width:6px;box-shadow:none}

.rd-tick{position:absolute;top:0;bottom:0;width:0;pointer-events:none}
.rd-tick i{position:absolute;left:-1px;top:-4px;bottom:-4px;width:2px;
  background:rgba(127,225,255,.42);border-radius:2px}
.rd-tick b{position:absolute;top:16px;left:0;transform:translateX(-50%);white-space:nowrap;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--text-3)}
.rd-tick:last-child b{transform:translateX(-100%)}

.rd-pct{font-size:13px;color:var(--text-2);font-weight:700;margin-bottom:20px}
.rd-pct b{color:#fff;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}

.rd-next{padding:14px 16px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);margin-bottom:18px}
.rd-next-h{font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px;display:flex;gap:8px;align-items:baseline}
.rd-next-h b{color:var(--ice);font-size:14px;letter-spacing:-.2px}

.rd-stops{display:flex;flex-wrap:wrap;gap:8px}
.rd-stop{
  font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:99px;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text-3);
  font-variant-numeric:tabular-nums;transition:.18s;
}
.rd-stop.on{background:rgba(0,229,160,.14);border-color:rgba(0,229,160,.45);color:var(--ok)}
.rd-stop.on::before{content:"✓ ";font-weight:900}
.rd-stop.next{background:rgba(2,165,245,.16);border-color:var(--cyan);color:var(--ice)}
.rd-stop.next::before{content:"◆ ";font-weight:900}

.rd-more{display:inline-block;margin-top:14px;font-size:13px;font-weight:800;color:var(--ice)}
.rd-more:hover{color:#fff}

@media (max-width:560px){
  .rd-top{gap:12px}
  .rd-goal{text-align:left}
  .rd-tick b{font-size:9.5px}
}

/* compact homepage variant: one summary line, no sub meter, no chip ladder */
.road-sm .rd-pct{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:0}
.road-sm .rd-pct b{font-size:14px}
.road-sm .rd-pct b[data-road-next-name]{color:var(--ice)}
.rd-sep{color:var(--line-2)}
.road-sm .rd-more{margin-top:0;margin-left:auto}
@media (max-width:640px){.road-sm .rd-more{margin-left:0}}
.rd-nx b{margin-left:6px}
/* the dot dangles at a line end once the summary wraps */
@media (max-width:700px){.rd-sep{display:none}}

/* ============================== COOKING ============================== */
.cooking{margin-top:22px}
.cooking .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-lede{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0 0 16px;max-width:76ch}
.ck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ck{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:.16s;min-width:0;
}
.ck:hover{border-color:var(--cyan);background:var(--surface-3)}
.ck-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid var(--line-2);background:var(--surface-3)}
.ck-av img{width:100%;height:100%;object-fit:cover}
.ck-b{flex:1;min-width:0}
.ck-n{font-size:13px;font-weight:800;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ck-s{font-size:11px;color:var(--text-3);font-weight:700}
.ck-ch{font-size:12.5px;font-weight:900;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.ck-ch.up{color:var(--ok)}
.ck-ch.dn{color:var(--bad)}

/* live ranking badge on the Top 100 heading */
.live-rank-note{
  margin-left:10px;font-size:10.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-3);display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
}
.live-rank-note.on{color:var(--ok)}

/* one block per burn, so the history stays visible as burns accumulate */
.burn-row{padding:12px 0;border-top:1px solid var(--line)}
.burn-row:first-of-type{border-top:none;padding-top:4px}
.br-n{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.br-m{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);margin-top:2px;display:inline-block}
.br-l{font-size:11.5px;font-weight:800;color:#F2A0CB;margin-left:10px}
.br-l:hover{color:#fff}

/* ---- wallet bar ----
   THE MOST IMPORTANT CARD ON THE PAGE, DRESSED LIKE THE LEAST.
   It was a plain surface card between two other plain surface cards, so the
   one control that has to be used before anything else works read as a footer
   note. It now carries the accent, and it changes colour as the state changes:
   blue while there is something to do, amber while the signature is
   outstanding, green once it is done. Green ONLY at the end. A card that turns
   green on connect alone tells somebody a half finished setup is finished. */
.lp-wallet{
  margin-bottom:20px;position:relative;overflow:hidden;
  border-color:rgba(2,165,245,.42);
  background:linear-gradient(120deg,rgba(2,165,245,.09),rgba(2,165,245,.02) 60%);
  box-shadow:0 0 0 1px rgba(2,165,245,.12), 0 6px 26px rgba(0,60,110,.24);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.lp-wallet .lp-wal-l b{font-size:16px;font-weight:800}
/* Connected, signature outstanding. Amber, and the sign in button is the only
   solid thing in the row so it is unmistakably the next step. */
.lp-wallet.needs-signin{
  border-color:rgba(255,180,40,.5);
  background:linear-gradient(120deg,rgba(255,180,40,.1),rgba(255,180,40,.02) 60%);
  box-shadow:0 0 0 1px rgba(255,180,40,.14), 0 6px 26px rgba(90,55,0,.26);
}
.lp-wallet.needs-signin [data-wallet-signin]{
  background:linear-gradient(96deg,#FF7A18,#FFA51F 45%,var(--gold));
  color:#1B1000;border-color:transparent;font-weight:900;
  animation:wal-nudge 2.4s ease-in-out infinite;
}
@keyframes wal-nudge{
  0%,100%{box-shadow:0 0 0 0 rgba(255,165,31,.5)}
  50%    {box-shadow:0 0 0 7px rgba(255,165,31,0)}
}
/* Connected and signed. Done, and it says so in the one colour nothing else
   on the page uses. */
.lp-wallet.is-ready{
  border-color:rgba(18,206,107,.55);
  background:linear-gradient(120deg,rgba(18,206,107,.12),rgba(18,206,107,.03) 60%);
  box-shadow:0 0 0 1px rgba(18,206,107,.18), 0 6px 26px rgba(0,70,35,.3);
}
.lp-wallet.is-ready .lp-wal-l b{color:#8CF0BC}
.lp-wallet.is-ready .lp-wal-l b::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:9px;vertical-align:middle;
  background:var(--ok);box-shadow:0 0 10px var(--ok);
}
.lp-wallet.is-ready [data-wallet-signin]{
  color:#8CF0BC;border-color:rgba(18,206,107,.4);background:rgba(18,206,107,.08);
  animation:none;
}
@media (prefers-reduced-motion:reduce){
  .lp-wallet.needs-signin [data-wallet-signin]{animation:none}
}
.lp-wal{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lp-wal-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.lp-wal-l b{font-size:15px;letter-spacing:.01em}
.lp-wal-l span{font-size:13px;color:var(--ink-3,#8b93a7);line-height:1.45}
.lp-wal-r{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lp-slip{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3,#8b93a7)}
.lp-slip select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:inherit;border-radius:9px;padding:8px 10px;font:inherit;font-size:13px}
.lp-quote{flex-basis:100%;font-size:12.5px;color:var(--ink-3,#8b93a7);min-height:1.2em}
@media (max-width:560px){.lp-wal{flex-direction:column;align-items:flex-start}
  .lp-wal-r{width:100%}.lp-wal-r .btn{flex:1}}

/* ---- supply picker ---- */
.lp-supply{display:block}
.lp-supply .lp-lab{display:block;font-size:13px;color:var(--ink-2,#c7cede);margin-bottom:8px}
/* Two per row. Eight narrow columns forced "highest unit price" and "lowest
   unit price" to wrap onto a second line in some cards and not others, which
   made the row heights disagree. At half width every label fits on one line. */
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media (max-width:380px){.sp-grid{grid-template-columns:1fr}}
.sp{position:relative;display:flex;flex-direction:column;gap:2px;padding:11px 12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.03);
  transition:border-color .14s,background .14s}
.sp:hover{border-color:rgba(125,211,252,.4);background:rgba(255,255,255,.06)}
.sp input{position:absolute;opacity:0;pointer-events:none}
.sp b{font-size:16px;letter-spacing:-.01em}
.sp span{font-size:11px;color:var(--ink-3,#8b93a7);font-variant-numeric:tabular-nums}
.sp em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#FFC846;margin-top:3px;white-space:nowrap}
.sp:has(input:checked){border-color:#02A5F5;background:rgba(2,165,245,.11);
  box-shadow:0 0 0 1px rgba(2,165,245,.5) inset}
.sp:has(input:focus-visible){outline:2px solid #7dd3fc;outline-offset:2px}
.lp-stake{margin-top:14px;padding:15px 17px;border:1px solid rgba(255,200,70,.22);
  border-radius:12px;background:rgba(255,200,70,.045)}
/* Only the panel's own heading is a block. This used to be `.lp-stake b`,
   which also caught every inline <b> inside the list, so "Launching costs
   0.1 SOL." rendered as three stacked lines with the full stop orphaned on
   the last one. The child combinator is the whole fix. */
.lp-stake > b{display:block;font-size:13.5px;color:#FFC846;margin-bottom:9px;
  letter-spacing:-.1px}
.lp-stake li b{display:inline;font-weight:800;color:#FFD87A;
  /* keep a value and its unit on one line: "0.1 SOL" wrapping mid phrase
     reads as two facts instead of one */
  white-space:nowrap}
/* Long phrases are marked up bold too, and those must be allowed to wrap. */
.lp-stake li b.wrap{white-space:normal}
.lp-stake ul{margin:0;padding-left:0;list-style:none;display:flex;
  flex-direction:column;gap:9px}
/* A gold dot instead of a browser bullet, so the list matches the panel it
   sits in rather than the browser default. */
.lp-stake li{position:relative;padding-left:18px}
.lp-stake li::before{content:"";position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:#FFC846;opacity:.75}
.lp-stake li{font-size:13px;line-height:1.6;color:var(--ink-2,#c7cede);margin:0}

/* ---- the hidden attribute actually hides things ---- */
/* The UA stylesheet says [hidden]{display:none}, and any author rule with an
   explicit display beats it because it is more specific. .btn is
   display:inline-flex and .chip is display:inline-block, so every button in
   this file ignored `el.hidden = true` and stayed on screen. That is why the
   wallet bar showed "Check your wallet...", "Sign in" and "Disconnect" all at
   once, with the first one disabled and therefore dead to clicks. */
[hidden]{display:none !important}

/* The signed in confirmation. Not a button any more in behaviour, so it should
   not look like one begging to be pressed. */
.btn.is-done,.chip.is-done{opacity:1;cursor:default;
  background:rgba(34,193,255,.10);border:1px solid rgba(34,193,255,.42);
  color:#9FE6FF;box-shadow:none}
.btn.is-done:hover,.chip.is-done:hover{filter:none;background:rgba(34,193,255,.10)}

/* ---- pay the launch fee with ---- */
.lp-pay{margin-top:2px}
.pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media (max-width:380px){.pay-grid{grid-template-columns:1fr}}
.pay{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 13px;
  cursor:pointer;border:1px solid rgba(255,255,255,.12);border-radius:11px;
  background:rgba(255,255,255,.03);transition:border-color .14s,background .14s}
.pay:hover{border-color:rgba(255,255,255,.24)}
.pay input{position:absolute;opacity:0;width:0;height:0}
.pay b{font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.pay span{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.pay em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#FFC846;margin-top:3px}
.pay.on{border-color:var(--acc,#0070FD);background:rgba(0,112,253,.10)}
/* The $MEMESLY option is the one with the discount, so it gets the emphasis
   even before it is picked. A cheaper option nobody notices is not an option. */
.pay-mem{border-color:rgba(255,200,70,.30)}
.pay-mem.on{border-color:#FFC846;background:rgba(255,200,70,.10)}
.pay:focus-within{outline:2px solid var(--acc,#0070FD);outline-offset:2px}

/* ---- the sandbox notice ---- */
/* Only the colour differs from the mode notice. Everything structural comes
   from .lp-notice so the two line up when stacked. */
.lp-notice.is-sandbox{border-color:rgba(34,193,255,.38);background:rgba(34,193,255,.05)}
.lp-notice.is-sandbox b{color:#9FE6FF}
/* A dot where the mode notice has an emoji, centred in the same column. */
.lp-dot{display:block;width:11px;height:11px;border-radius:50%;background:#22C1FF;
  box-shadow:0 0 12px rgba(34,193,255,.9)}

/* ---- launch detail header ---- */
/* Logo on the left, then name, ticker and description stacked, then the links
   and the close button pushed to the right edge. It used to be name and ticker
   on one line with the description under them and nothing on the right. */
.cp-head:has(.lp-id){align-items:flex-start}
.lp-id{flex:1 1 260px;min-width:0}
.lp-id h3{font-size:21px;font-weight:900;letter-spacing:-.4px;margin:0;
  overflow-wrap:anywhere}
.lp-tick{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--acc,#0070FD);
  margin-top:1px}
.lp-desc{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--text-3);
  overflow-wrap:anywhere;max-width:62ch}
.lp-head-r{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.lp-soc{display:flex;align-items:center;gap:7px}
.lp-soc-a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:var(--text-2,#A9C4E6);transition:color .14s,border-color .14s,background .14s}
.lp-soc-a:hover{color:#fff;border-color:rgba(34,193,255,.55);background:rgba(34,193,255,.12)}
.lp-soc-a svg{width:15px;height:15px;fill:currentColor}
/* On a phone the links wrap under the text rather than squeezing the name. */
@media (max-width:560px){
  .lp-head-r{margin-left:0;width:100%;justify-content:space-between}
}

/* the legal link row in the footer */
.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.foot-legal a{font-size:12px;color:var(--text-3);text-decoration:none;
  transition:color .14s}
.foot-legal a:hover{color:var(--ice,#9FE6FF)}

/* ---- suggested creators ---- */
/* These were inline-styled anchors with no hover state, so nothing about them
   said they were links. The whole row is the target, not just the name. */
.sug{display:flex;gap:11px;align-items:center;padding:6px 8px;margin:-6px -8px;
  border-radius:11px;text-decoration:none;
  transition:background .15s,transform .15s}
.sug:hover{background:rgba(34,193,255,.09);transform:translateX(2px)}
.sug-av{width:40px;height:40px;border-width:2px;flex-shrink:0;
  transition:border-color .15s,box-shadow .15s}
.sug:hover .sug-av{border-color:var(--cyan,#22C1FF);
  box-shadow:0 0 14px rgba(34,193,255,.45)}
.sug-t{min-width:0;flex:1}
.sug-n{font-weight:800;font-size:13px;display:flex;gap:5px;align-items:center;
  color:var(--text,#EAF2FF);transition:color .15s}
.sug:hover .sug-n{color:#fff}
.sug-h{font-size:11.5px;color:var(--text-3)}
.sug:hover .sug-h{color:var(--ice,#9FE6FF)}
/* The chevron only appears on hover, so the row stays quiet at rest. */
.sug-go{flex:0 0 auto;font-size:18px;line-height:1;color:var(--cyan,#22C1FF);
  opacity:0;transform:translateX(-4px);
  transition:opacity .15s,transform .15s}
.sug:hover .sug-go{opacity:1;transform:translateX(0)}
/* Touch devices have no hover, so the chevron would never appear and the row
   would just look like it was missing something. */
@media (hover:none){.sug-go{display:none}}

/* ---- spacing between stacked cards ---- */
/* Most cards carry an inline margin-top:20px, which means any card that was
   added without one sits flush against the card above it. Two panels touching
   read as one panel with a line through it. This makes the spacing a property
   of the layout instead of something every new card has to remember, and the
   value matches the inline one so nothing doubles up. */
main > .card + .card,
main > .card + .lg-grid,
main > .lg-grid + .card,
main > section + .card,
.stack > .card + .card,
.lp-grid > div > .card + .card{margin-top:20px}
/* A container that already spaces its children must not have margins added on
   top of its gap. */
.stack{display:flex;flex-direction:column;gap:0}

/* ---- the roadmap card, same shape as the whitepaper card ---- */
.rm-card{border-color:rgba(255,200,70,.30);
  background:linear-gradient(150deg,rgba(255,200,70,.08),rgba(255,160,40,.03) 55%,transparent)}
.rm-card:hover{border-color:var(--gold,#FFC846);
  box-shadow:0 14px 40px rgba(255,200,70,.16)}
.rm-card .wp-k{color:var(--gold,#FFC846)}
.rm-card .wp-ic{color:var(--gold,#FFC846)}
.rm-card .wp-ic svg{width:30px;height:30px;
  filter:drop-shadow(0 0 10px rgba(255,200,70,.55))}
.rm-card .wp-go{background:linear-gradient(96deg,#FFB020,var(--gold,#FFC846));
  color:#1a1200;box-shadow:0 0 22px rgba(255,200,70,.38)}

/* ---- the footer nav row ---- */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07)}
.foot-nav a{font-size:13px;font-weight:700;color:var(--text-2,#A9C4E6);
  text-decoration:none;transition:color .14s}
.foot-nav a:hover{color:#fff}
/* The legal row sits under it and is the quieter of the two. */
.foot-legal{border-top:0;margin-top:10px;padding-top:0}

/* ---- the whitepaper card on tokenomics ---- */
.wp-card{display:block;margin-top:20px;text-decoration:none;
  border-color:rgba(34,193,255,.32);
  background:linear-gradient(150deg,rgba(34,193,255,.09),rgba(0,112,253,.04) 55%,transparent);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.wp-card:hover{border-color:var(--cyan,#22C1FF);transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,112,253,.20)}
.wp-in{display:flex;align-items:center;gap:16px}
.wp-ic{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center}
.wp-ic img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 12px rgba(34,193,255,.75))}
.wp-t{min-width:0;flex:1}
.wp-k{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan,#22C1FF);margin-bottom:3px}
.wp-t b{display:block;font-size:16px;font-weight:900;letter-spacing:-.3px;color:#fff;
  margin-bottom:5px}
.wp-t p{margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
.wp-go{flex:0 0 auto;align-self:center;padding:9px 16px;border-radius:99px;
  font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(96deg,var(--blue,#0070FD),var(--cyan,#22C1FF));
  box-shadow:0 0 22px rgba(34,193,255,.40)}
.wp-card:hover .wp-go{filter:brightness(1.08)}
/* On a phone the row stacks and the button goes full width, because a 12px
   pill wedged next to three lines of text is not a tap target. */
@media (max-width:560px){
  .wp-in{flex-wrap:wrap}
  .wp-go{width:100%;text-align:center;margin-top:4px}
}

/* ---- legal and whitepaper pages ---- */
/* Long documents, so the job here is reading comfort rather than decoration:
   a measure that does not run past about 78 characters, generous line height,
   and headings that are findable when someone is scanning for one clause. */
.lg-hero h1{font-size:clamp(30px,5vw,46px);letter-spacing:-1.4px;margin:12px 0 10px}
.lg-sum{margin:0;font-size:15px;line-height:1.65;color:var(--text-2,#A9C4E6)}
.lg-meta{margin-top:14px;font-size:12px;color:var(--text-3);letter-spacing:.02em}
.lg-meta a{color:var(--cyan,#22C1FF);text-decoration:none}
.lg-meta a:hover{text-decoration:underline}

.lg-intro,.lg-toc,.lg-doc,.lg-foot{margin-top:20px}
/* One column, filling the card. The documents are long and the sidebar
   already narrows the page, so a second measure limit inside the card just
   left a column of empty space down the right hand side. */
.lg-doc .card-b,.lg-intro .card-b{padding:20px 22px}
.lg-doc .lg-s > *{max-width:none}
.lg-intro p{margin:0 0 13px;font-size:14.5px;line-height:1.78;color:var(--text-2,#A9C4E6)}
.lg-intro p:last-child{margin-bottom:0}

.lg-toc-l{display:flex;flex-wrap:wrap;gap:8px}
.lg-toc-l a{font-size:12.5px;padding:7px 12px;border-radius:99px;text-decoration:none;
  color:var(--text-2,#A9C4E6);border:1px solid var(--line,rgba(90,160,255,.22));
  background:rgba(255,255,255,.03);transition:border-color .14s,color .14s,background .14s}
.lg-toc-l a:hover{color:#fff;border-color:var(--cyan,#22C1FF);background:rgba(34,193,255,.10)}

.lg-s{padding:26px 0;border-top:1px solid rgba(255,255,255,.07)}
.lg-s:first-child{padding-top:4px;border-top:0}
.lg-s:last-child{padding-bottom:4px}
/* scroll-margin so an anchored heading is not hidden under the sticky nav */
.lg-s{scroll-margin-top:86px}
.lg-s h2{position:relative;margin:0 0 12px;font-size:18px;font-weight:900;
  letter-spacing:-.3px;color:#fff}
.lg-anchor{position:absolute;left:-18px;top:0;opacity:0;text-decoration:none;
  color:var(--text-3);font-weight:700;transition:opacity .14s}
.lg-s h2:hover .lg-anchor{opacity:.6}
.lg-anchor:hover{opacity:1 !important;color:var(--cyan,#22C1FF)}
.lg-s p{margin:0 0 13px;font-size:14px;line-height:1.8;color:var(--text-2,#A9C4E6)}
.lg-s p:last-child{margin-bottom:0}

.lg-ul{margin:0 0 13px;padding-left:0;list-style:none;display:flex;
  flex-direction:column;gap:10px}
.lg-ul li{position:relative;padding-left:19px;font-size:14px;line-height:1.75;
  color:var(--text-2,#A9C4E6)}
.lg-ul li::before{content:"";position:absolute;left:3px;top:.68em;width:5px;height:5px;
  border-radius:50%;background:var(--cyan,#22C1FF);opacity:.7}

.lg-note{margin:0 0 15px;padding:14px 17px;border-radius:11px;
  border:1px solid rgba(34,193,255,.28);background:rgba(34,193,255,.06);
  font-size:13.5px;line-height:1.74;color:var(--ice,#9FE6FF)}

/* The all-caps blocks are legally load bearing and visually punishing, so they
   get a smaller size and looser tracking to stay readable at length. */
.lg-caps{font-size:12px !important;line-height:1.78 !important;letter-spacing:.03em;
  color:var(--text-2,#A9C4E6);padding:15px 17px;border-radius:11px;
  border:1px solid rgba(255,200,70,.26);background:rgba(255,200,70,.05)}

.lg-tw{overflow-x:auto;margin:0 0 15px;
  border:1px solid var(--line,rgba(90,160,255,.22));border-radius:11px}
.lg-t{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.lg-t th{text-align:left;padding:11px 14px;font-size:11px;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  background:rgba(255,255,255,.035);border-bottom:1px solid var(--line,rgba(90,160,255,.22))}
.lg-t td{padding:11px 14px;color:var(--text-2,#A9C4E6);
  border-bottom:1px solid rgba(255,255,255,.055);font-variant-numeric:tabular-nums}
.lg-t tr:last-child td{border-bottom:0}

.lg-foot p{margin:0 0 11px;font-size:13.5px;line-height:1.74;color:var(--text-3)}
.lg-foot p:last-child{margin-bottom:0}
.lg-foot b{color:var(--text-2,#A9C4E6)}
.lg-foot a{color:var(--cyan,#22C1FF);text-decoration:none}
.lg-foot a:hover{text-decoration:underline}

/* the hub */
.lg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:20px}
.lg-card{display:flex;flex-direction:column;gap:5px;padding:18px 19px;border-radius:14px;
  text-decoration:none;border:1px solid var(--line,rgba(90,160,255,.22));
  background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  transition:border-color .14s,transform .14s,background .14s}
.lg-card:hover{border-color:var(--cyan,#22C1FF);transform:translateY(-2px);
  background:linear-gradient(170deg,rgba(34,193,255,.10),rgba(34,193,255,.03))}
.lg-card-k{font-size:10.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold,#FFC846)}
.lg-card b{font-size:16px;font-weight:900;letter-spacing:-.3px;color:#fff}
.lg-card-b{font-size:13px;line-height:1.6;color:var(--text-3)}
.lg-card-m{margin-top:6px;font-size:11px;color:var(--text-3);opacity:.75}

.lg-extra p{margin:0 0 13px;font-size:14px;line-height:1.78;color:var(--text-2,#A9C4E6)}
.lg-extra p:last-child{margin-bottom:0}

@media (max-width:560px){
  .lg-s{padding:22px 0}
  .lg-anchor{display:none}
  .lg-t{min-width:340px}
}

/* ---- comments ---- */
/* The panel is its own surface inside the detail card rather than a bare
   divider, so it reads as a section and not as leftover space. */
.lp-comments{margin-top:20px;padding:16px 17px;border-radius:12px;
  border:1px solid rgba(125,211,252,.14);
  background:linear-gradient(180deg,rgba(125,211,252,.05),rgba(125,211,252,.015));
  /* Comment bodies can contain one very long unbroken string. Without this the
     panel is what stretches, and the card it sits in gets clipped. */
  min-width:0;overflow-wrap:anywhere}
.lp-comments h4{display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ink-3,#8b93a7);margin:0 0 13px}
.lp-comments h4::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--acc,#0070FD);box-shadow:0 0 9px var(--acc,#0070FD)}
/* The empty and error states were plain grey text sitting on nothing. */
.lp-comments .cm-list > .note{margin:0;padding:14px 0 4px;text-align:center}
.cm{display:flex;gap:10px;align-items:flex-start;padding:10px 0;position:relative}
.cm+.cm{border-top:1px solid rgba(255,255,255,.06)}
.cm-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.07);display:block}
.cm-av img{width:100%;height:100%;object-fit:cover;display:block}
.cm b{font-size:13px}
.cm em{font-style:normal;font-size:11.5px;color:var(--ink-3,#8b93a7);margin-left:6px}
.cm p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2,#c7cede);
  overflow-wrap:anywhere}
.cm-x{position:absolute;right:0;top:8px;background:none;border:0;color:var(--ink-3,#8b93a7);
  font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.cm-x:hover{color:#FF4D6D;background:rgba(255,77,109,.1)}
.cm-post{display:flex;gap:8px;align-items:flex-end;margin-top:13px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
/* Signed out, the row holds one line of prose rather than a composer, and a
   flex-end row makes that line hug the bottom edge for no reason. */
.cm-post > .note{flex:1 1 100%;margin:0}
.cm-post textarea{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:inherit;border-radius:10px;padding:9px 11px;font:inherit;font-size:13.5px;resize:vertical}

/* ---- logo picker ---- */
.lp-img{display:block}
.lp-img input[type=file]{position:absolute;opacity:0;width:0;height:0}
.lp-drop{display:flex;align-items:center;gap:12px;min-height:74px;padding:12px 14px;cursor:pointer;
  border:1px dashed rgba(255,255,255,.20);border-radius:12px;background:rgba(255,255,255,.03);
  transition:border-color .14s,background .14s}
.lp-drop:hover{border-color:rgba(125,211,252,.5);background:rgba(255,255,255,.06)}
.lp-img input[type=file]:focus-visible + .lp-drop{outline:2px solid #7dd3fc;outline-offset:2px}
.lp-drop img{width:50px;height:50px;border-radius:11px;object-fit:cover;flex:0 0 50px;
  background:rgba(255,255,255,.06)}
/* The label of an .lp-f is uppercase and letter-spaced, and everything inside
   it inherited that, so the picker's hint and the sentence naming the minimum
   size were set in shouting caps. Prose is prose wherever it sits. */
.lp-drop-ph,.lp-drop-n,.lp-f .note,.lp-f .lp-drop-note{
  text-transform:none;letter-spacing:0;font-weight:600}
.lp-drop-ph{font-size:12.5px;color:var(--ink-3,#8b93a7)}
.lp-drop-n{font-size:12.5px;color:var(--ink-2,#c7cede);overflow-wrap:anywhere}
/* The empty state. A tile shaped like the picture being asked for, so the two
   boxes differ before either sentence is read, and one line that says the box
   takes a drop as well as a click, because a plain bordered rectangle reads as
   a disabled field rather than a target. */
.lp-drop-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.lp-drop-t b{font-size:13px;font-weight:800;color:var(--ink-2,#c7cede);
  text-transform:none;letter-spacing:0;line-height:1.35}
.lp-drop-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.24);border-radius:9px;
  background:rgba(255,255,255,.05);color:var(--ink-3,#8b93a7);
  transition:border-color .14s,color .14s,background .14s}
.lp-drop-ic svg{width:19px;height:19px;display:block}
.lp-drop-ic-logo{width:50px;height:50px}
/* 3:1, the banner's own ratio at a size that fits the row. */
.lp-drop-ic-banner{width:66px;height:22px;border-radius:6px}
.lp-drop-ic-banner svg{width:15px;height:15px}
.lp-drop:hover .lp-drop-ic{border-color:rgba(125,211,252,.55);color:#7dd3fc;
  background:rgba(125,211,252,.09)}

/* ---- wallet profile page ---- */
.pf-load{color:var(--ink-3,#8b93a7);font-size:14px}
.pf-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pf-av{flex:0 0 76px;width:76px;height:76px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.07);display:block}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-id{flex:1;min-width:0}
.pf-id h1{font-size:26px;letter-spacing:-.02em;margin:0 0 2px}
.pf-h{font-size:14px;color:var(--ice,#7dd3fc);margin-bottom:5px}
.pf-addr{font-size:11.5px;color:var(--ink-3,#8b93a7);font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;margin-bottom:8px}
.pf-bio{font-size:14px;color:var(--ink-2,#c7cede);margin:0 0 9px;line-height:1.5}
.pf-counts{font-size:13px;color:var(--ink-3,#8b93a7)}
.pf-counts b{color:var(--ink,#eef2fb);margin-right:2px}
.pf-counts b+ {margin-left:12px}
.pf-act{flex:0 0 auto}
.pf-rec{margin-top:20px}
.pf-standing{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#FFC846;border:1px solid rgba(255,200,70,.32);border-radius:999px;
  padding:6px 13px;margin-bottom:16px}
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.pf-note{margin-top:14px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;
  color:var(--ink-2,#c7cede);border:1px solid rgba(255,200,70,.22);background:rgba(255,200,70,.05)}
@media (max-width:560px){.pf-act{width:100%}.pf-act .btn{width:100%}}

/* ---- roster card variant ---- */
.cc-grad{--cc:#02A5F5}
.cc-grad-b{display:inline-block;margin-top:4px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#02060C;background:linear-gradient(100deg,#02A5F5,#7dd3fc);
  border-radius:999px;padding:3px 9px;font-weight:700;white-space:nowrap}

/* ---- scoreboard ---- */
.gr-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;
  margin-bottom:14px}
.gr-list{display:flex;flex-direction:column;gap:2px}
.tk-live{display:inline-block;margin-top:4px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#FFC846}

/* ===============================================================
   MENU HIGHLIGHTS
   ===============================================================
   Three items in the menu are the ones people actually come for, so
   they are lit rather than listed. One rule set, targeting both menus:
   .dr-* is the drawer, .sn-* is the sidebar, and both wrap their label
   in .lbl so the gradient lands on the text and not on the row, which
   would fight the hover background.

   The animated fill is on the LABEL only. Putting a background on the
   <a> would override .drawer a:hover and .side-nav a.on, and the
   active state matters more than the effect.

   Every animation here is switched off under prefers-reduced-motion.
   A shimmering menu is a nice touch; a shimmering menu somebody cannot
   look at is a bug.
   =============================================================== */

/* the moving highlight, shared by all three */
@keyframes ms-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* EVERY GRADIENT MENU LABEL HAS TO BE IN THIS LIST.
   This is the rule that clips the gradient to the glyphs and makes the text
   itself transparent. A row given a background-image below without being named
   here does not get a shimmering label: it gets a solid coloured rectangle
   behind ordinary text, which is exactly what M500 looked like, and it reads as
   a menu item somebody has accidentally selected. */
.dr-top100 .lbl, .sn-top100 .lbl,
.dr-cooking .lbl, .sn-cooking .lbl,
.dr-chains .lbl, .sn-chains .lbl,
.dr-launches .lbl, .sn-launches .lbl,
.dr-launch .lbl, .sn-launch .lbl,
.dr-m500 .lbl, .sn-m500 .lbl,
.dr-leaderboard .lbl, .sn-leaderboard .lbl,
.dr-tokenomics .lbl, .sn-tokenomics .lbl,
.dr-design .lbl, .sn-design .lbl,
.dr-graduated .lbl, .sn-graduated .lbl {
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
  animation: ms-shimmer 4.5s linear infinite;
  font-weight: 800;
}

/* ---- Top 100: cold light, sweeping ----
   THIS WAS WRITTEN AS .dr-top50 AND HAD NOT APPLIED TO ANYTHING FOR MONTHS.
   The menu key was renamed top50 to top100 and the stylesheet was not, so the
   row rendered as a plain grey item and this whole block was decoration on a
   selector that matched nothing. Nothing broke, nothing errored, and there was
   no way to see it except by noticing that a row which was supposed to shimmer
   did not. _check_menu_gradients now fails the build on a menu label rule
   naming a key that is not in MENU_ORDER, which is what would have caught it
   the day it happened. */
.dr-top100 .lbl, .sn-top100 .lbl {
  /* THE BASE USED TO BE --text-2, AND THAT WAS RIGHT AT THE TIME.
     Back then this was the only lit row in a menu of grey ones, so a grey
     base meant the sweep only ever ADDED light and the row was never dimmer
     than its neighbours between passes. Every row is lit now, and a grey base
     in a coloured menu reads as the one item that is switched off.

     Royal blue, which is the gap between M500's cyan five rows above and the
     violet on Battle. It is not the brand blue either: --blue at full
     saturation on black is where thin type goes muddy. */
  background-image: linear-gradient(
    100deg,
    #6e90ff 0%, #6e90ff 30%,
    #e6ecff 43%, #b4c6ff 50%, #4f6dff 58%, #2c48e8 66%,
    #6e90ff 78%, #6e90ff 100%);
  animation-duration: 5.5s;
  filter: drop-shadow(0 0 7px rgba(80, 120, 255, .55));
}
.dr-top100:hover .lbl, .sn-top100:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(110, 144, 255, .85));
}

/* ---- Cooking: fire ----
   Two animations at different speeds so the flicker never lines up with
   the sweep and the thing does not visibly loop. */
@keyframes ms-flicker {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 122, 0, .55))
                     drop-shadow(0 0 12px rgba(255, 60, 0, .28)); }
  38%      { filter: drop-shadow(0 0 9px rgba(255, 168, 0, .85))
                     drop-shadow(0 0 20px rgba(255, 80, 0, .45)); }
  57%      { filter: drop-shadow(0 0 4px rgba(255, 110, 0, .5))
                     drop-shadow(0 0 10px rgba(255, 50, 0, .24)); }
  76%      { filter: drop-shadow(0 0 11px rgba(255, 196, 40, .9))
                     drop-shadow(0 0 22px rgba(255, 90, 0, .5)); }
}
.dr-cooking .lbl, .sn-cooking .lbl {
  /* PUSHED FROM #ff9a3c TO #ff7a2e, AND THE MID STOPS WITH IT.
     Nothing was wrong with it on its own. It rested at 31 degrees of hue and
     Ignited rests at 44, and once every row in the menu carried a colour those
     thirteen degrees were the closest pair on the list: two warm rows six
     apart, one gold and one very nearly gold. Ignited cannot move, because
     gold is the paid placement board and is the reason that row looks
     expensive, so Cooking went the other way, further into the red where a
     pan over a flame belongs anyway. Twenty two degrees now. */
  background-image: linear-gradient(
    100deg,
    #ff7a2e 0%, #ff7a2e 26%,
    #ffd58a 42%, #ffab4a 50%, #ff5e0a 58%, #f04400 66%,
    #ff7a2e 80%, #ff7a2e 100%);
  animation: ms-shimmer 3.2s linear infinite, ms-flicker 2.3s ease-in-out infinite;
}

/* ---- Battle: violet, so it reads as a third thing rather than a
       warmer or cooler version of the other two ---- */
.dr-chains .lbl, .sn-chains .lbl {
  background-image: linear-gradient(
    100deg,
    #b79ae8 0%, #b79ae8 30%,
    #f6e9ff 44%, #e0b4ff 51%, #b26bff 59%, #8f3dff 66%,
    #b79ae8 78%, #b79ae8 100%);
  animation-duration: 5.4s;
  filter: drop-shadow(0 0 7px rgba(154, 78, 255, .55));
}
.dr-chains:hover .lbl, .sn-chains:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(154, 78, 255, .85));
}

/* ---- Launches: green, and a rocket ----
   The base stops are a mint rather than the brand green. #12CE6B is right on a
   button, where it is a filled shape carrying white text, and too dark as 15px
   type on a near black background: it reads as a dimmed item rather than a lit
   one. #7EE6B0 sits at about 11:1 here and the sweep takes it to white. */
.dr-launches .lbl, .sn-launches .lbl {
  background-image: linear-gradient(
    100deg,
    #7ee6b0 0%, #7ee6b0 30%,
    #eafff5 43%, #b7ffdd 50%, #35e58c 58%, #12ce6b 66%,
    #7ee6b0 78%, #7ee6b0 100%);
  animation-duration: 4.9s;
  filter: drop-shadow(0 0 7px rgba(18, 206, 107, .55));
}
.dr-launches:hover .lbl, .sn-launches:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(18, 206, 107, .85));
}
/* The rocket. It lifts rather than pulses, because a rocket that throbs on the
   spot reads as an alert. transform and opacity only, so the whole thing stays
   on the compositor and cannot stutter the way a keyframed shadow does. */
.nav-rocket {
  display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto;
  color: #35e58c;
  animation: nr-lift 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(18, 206, 107, .6));
}
.nav-rocket svg { width: 100%; height: 100%; display: block; }
.nav-rocket-fl { opacity: .9; animation: nr-burn 1.1s ease-in-out infinite; }
@keyframes nr-lift {
  0%, 100% { transform: translateY(1px); }
  50%      { transform: translateY(-2px); }
}
@keyframes nr-burn {
  0%, 100% { opacity: .45; transform: scaleY(.8); }
  50%      { opacity: 1;   transform: scaleY(1.25); }
}

/* ---- Launch: platinum, and a rocket ----
   The row that replaced the Launch Meme button. Same treatment as Ignited,
   in the metal the button was wearing, because the point of taking the slab
   out of the menu was to stop it being a different KIND of thing from the
   rows around it, not to make it quiet. Platinum is still the brightest label
   in the column and it is still first.

   The stops are the button's own gradient with the dark end lifted. On a
   button the metal has a lit face to sit against; as text on a near black
   page every dark stop is a moment where the word disappears, so the bottom
   of the ramp stops at #A8B0BA, which clears 7:1 on this background. */
.dr-launch .lbl, .sn-launch .lbl {
  background-image: linear-gradient(
    100deg,
    #cfd6de 0%, #cfd6de 28%,
    #ffffff 42%, #ffffff 50%, #e3e9f0 57%, #a8b0ba 66%,
    #cfd6de 78%, #cfd6de 100%);
  animation-duration: 4.9s;
  filter: drop-shadow(0 0 7px rgba(214, 232, 255, .45));
}
.dr-launch:hover .lbl, .sn-launch:hover .lbl {
  filter: drop-shadow(0 0 12px rgba(226, 240, 255, .8));
}
/* 900, not the 800 the shared rule gives every gradient label. Ignited is the
   other 900 in this menu, and these are the two rows that are not destinations:
   Ignited is what somebody pays for and Launch is the thing we want people to
   do. Weight is the only signal left once all eleven rows are lit. */
.dr-launch .lbl, .sn-launch .lbl { font-weight: 900; }
/* A SPARKLE, NOT A ROCKET. Launches, two rows below, has the rocket. This
   wore the same one in silver for about an hour and the two rows read as one
   item printed twice: at 15px the eye takes the silhouette long before it
   takes the colour. Launches is the board of what has already gone up;
   Launch makes a token that does not exist yet, and a sparkle is what every
   interface puts on "new". */
.nav-spark {
  display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto;
  color: #dbe2ea;
  filter: drop-shadow(0 0 5px rgba(214, 232, 255, .55));
}
.nav-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Each star scales about its own centre, so the pair twinkle rather than the
   icon pulsing as a block. The small one runs offset and swings further, which
   is what makes it read as a glint and not as a second heartbeat. */
.nav-spark-a {
  transform-origin: 10px 12.6px;
  animation: ns-twinkle 3.2s ease-in-out infinite;
}
.nav-spark-b {
  transform-origin: 19.6px 5.4px;
  animation: ns-glint 3.2s ease-in-out .9s infinite;
}
@keyframes ns-twinkle {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes ns-glint {
  0%, 100% { transform: scale(.72); opacity: .45; }
  50%      { transform: scale(1.1); opacity: 1; }
}

/* ---- Graduated: pink, and a mortarboard ----
   Pink rather than a second violet, so it does not read as a variant of
   Battle. #FF9AD5 clears 9:1 on this background and the sweep lifts it to
   near white without ever going grey. */
.dr-graduated .lbl, .sn-graduated .lbl {
  background-image: linear-gradient(
    100deg,
    #ff9ad5 0%, #ff9ad5 30%,
    #ffeaf7 43%, #ffc2e6 50%, #ff5fb8 58%, #ff2d9e 66%,
    #ff9ad5 78%, #ff9ad5 100%);
  animation-duration: 5.8s;
  filter: drop-shadow(0 0 7px rgba(255, 61, 165, .5));
}
.dr-graduated:hover .lbl, .sn-graduated:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(255, 61, 165, .8));
}
.nav-cap {
  display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto;
  color: #ff7ec8;
  filter: drop-shadow(0 0 5px rgba(255, 61, 165, .55));
}
.nav-cap svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Only the tassel moves, and it swings from where it is fixed to the board.
   The cap itself staying still is what makes the swing read as a swing. */
.nav-cap-t, .nav-cap-b {
  transform-origin: 21.4px 8.9px;
  animation: nc-swing 3.6s ease-in-out infinite;
}
@keyframes nc-swing {
  0%, 100% { transform: rotate(-9deg); }
  50%      { transform: rotate(9deg); }
}

/* The active row already has its own colour and background. Let the
   gradient go so the two do not fight, and keep the glow. */
.drawer a.on .lbl, .side-nav a.on .lbl {
  -webkit-text-fill-color: currentColor;
          text-fill-color: currentColor;
  background-image: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .dr-top100 .lbl, .sn-top100 .lbl,
  .dr-cooking .lbl, .sn-cooking .lbl,
  .dr-chains .lbl, .sn-chains .lbl,
  .dr-launches .lbl, .sn-launches .lbl,
  .dr-launch .lbl, .sn-launch .lbl,
  .dr-m500 .lbl, .sn-m500 .lbl,
  .dr-leaderboard .lbl, .sn-leaderboard .lbl,
  .dr-tokenomics .lbl, .sn-tokenomics .lbl,
  .dr-design .lbl, .sn-design .lbl,
  .dr-graduated .lbl, .sn-graduated .lbl {
    animation: none;
    background-position: 50% 0;
  }
  .nav-rocket, .nav-rocket-fl, .nav-cap-t, .nav-cap-b,
  .nav-index-d { animation: none; }
  /* Parked at full size and full opacity, not at the bottom of the keyframes,
     or the small star sits permanently at 45% and looks like a rendering
     fault rather than a second star. */
  .nav-spark-a, .nav-spark-b { animation: none; transform: none; opacity: 1; }
}

/* ===============================================================
   COOKING BOARD  (/cooking)
   ===============================================================
   One row per token, one hue for the heat bar. Colouring by rank is
   the thing that makes a chart lie: the reader infers a category that
   is not there. Rank is carried by the number in the first column,
   which is what a number is for.

   The bar is log scaled, because turnover is heavily skewed and a
   linear bar leaves ninety rows looking identical under one full one.
   =============================================================== */
.hb-explain p{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.hb-explain p:last-child{margin-bottom:0}
.hb-explain b{color:var(--text)}
.hb-explain .note{font-size:12.5px;color:var(--text-3)}

.hb-bar{margin:18px 0 14px}
.hb-chips{display:flex;gap:7px;flex-wrap:wrap}
.hb-state{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}
.hb-state.on{color:var(--up)}
.hb-state.on::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--up);margin-right:7px;vertical-align:middle;
  box-shadow:0 0 0 3px rgba(22,199,132,.16);
}

.hb-list{display:flex;flex-direction:column}
.hb-empty{padding:34px 20px;text-align:center;color:var(--text-3);font-size:14px}

.hb-row{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:38px 40px minmax(0,1fr) 110px 92px 92px 78px;
  padding:11px 16px;border-top:1px solid var(--line);
  transition:background .14s;
}
.hb-row:first-child{border-top:0}
.hb-row:hover{background:var(--surface-2)}

.hb-i{
  font-size:12.5px;font-weight:800;color:var(--text-3);text-align:center;
  font-variant-numeric:tabular-nums;
}
.hb-row:nth-child(-n+3) .hb-i{color:var(--ice)}

.hb-av{width:40px;height:40px;border-radius:99px;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.hb-av img{width:100%;height:100%;object-fit:cover}
.hb-ph{font-size:11px;font-weight:800;color:var(--text-3);letter-spacing:.02em}

.hb-n{min-width:0;display:flex;flex-direction:column;gap:2px}
.hb-n b{font-size:14.5px;font-weight:750;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-n em{font-style:normal;font-size:12px;font-weight:700;color:var(--text-3)}
.hb-chain{font-size:11px;color:var(--text-3);opacity:.8}

.hb-heat{display:flex;flex-direction:column;gap:5px}
.hb-heat-t{font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.hb-heat-t i{font-style:normal;font-size:10.5px;color:var(--text-3);margin-left:1px}
.hb-heat-b{display:block;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.hb-heat-b > span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#ff8a1f,#ff3d00);
}

.hb-mc,.hb-vol{
  display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:700;
  color:var(--text-2);font-variant-numeric:tabular-nums;
}
.hb-mc em,.hb-vol em{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3);
}
.hb-ch{font-size:13.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--text-3)}
.hb-ch.up{color:var(--up)}
.hb-ch.dn{color:var(--dn)}

/* Below the sidebar breakpoint the row drops the columns that are context
   rather than the point. Heat and change stay, because they are the reason
   somebody opened this page. */
/* THE COLUMN COUNT HAS TO MATCH THE CELLS THAT ARE ACTUALLY VISIBLE.
   The first version declared five columns and left six children showing, so the
   sixth wrapped onto its own line and the change percentage ended up floating
   under the row on every phone. CSS grid does not warn about this; it just
   silently starts a new row, which looks like a styling accident rather than a
   miscount. Each block below hides exactly what it drops and declares exactly
   what is left. */
.hb-sub{display:none}

/* five cells: rank, avatar, name, heat, change */
@media (max-width:900px){
  .hb-row{
    grid-template-columns:28px 34px minmax(0,1fr) 76px 66px;
    gap:10px;padding:11px 12px;
  }
  .hb-mc,.hb-vol{display:none}
  /* Three lines, not four. Stacking name, ticker, chain and the numbers each on
     their own line makes a 100px row, and ten of those is a phone screen with
     four coins on it. Ticker and chain share a line. */
  .hb-n{display:block}
  .hb-n b{display:block;font-size:14px}
  .hb-n em,.hb-chain{display:inline}
  .hb-chain::before{content:" · "}
  .hb-sub{
    display:block;font-size:11px;color:var(--text-3);
    font-variant-numeric:tabular-nums;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hb-heat-t{font-size:13px}
  .hb-ch{font-size:12.5px}
}
/* Under 400px the name column is roughly 120px wide, which is not enough for
   "$LONGTICKER · Robinhood Chain" or for the mcap and volume line, so both wrap
   and the row doubles. Ellipsis rather than wrap: a clipped chain name still
   tells you which chain, a row twice as tall costs you half the board. */
@media (max-width:520px){
  .hb-row{grid-template-columns:22px 30px minmax(0,1fr) 62px 56px;gap:8px;padding:10px}
  .hb-n{overflow:hidden}
  .hb-n em,.hb-chain{white-space:nowrap}
  .hb-n > em{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .hb-chain{display:none}
  .hb-n b{font-size:13.5px}
  .hb-n em{font-size:11.5px}
  .hb-chain{font-size:10.5px}
  .hb-sub{font-size:10.5px}
  .hb-heat-t{font-size:12px}
  .hb-ch{font-size:11.5px}
  .hb-av{width:30px;height:30px}
}

/* A card heading with a count opposite it. Scoped to .card-h-row rather than
   applied to every .card-h on the site: turning a hundred existing headings
   into flex containers to fix one of them is how a layout quietly breaks in a
   place nobody was looking. */
.card-h.card-h-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-h-sub{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap;
}

/* the home strip's footer: the caveat and the way through to the full board */
.ck-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ck-foot .note{flex:1 1 340px;min-width:0}
.ck-all{
  flex:none;font-size:13px;font-weight:800;color:var(--ice);white-space:nowrap;
  transition:.14s;
}
.ck-all:hover{filter:brightness(1.25)}
.card-h-right{display:flex;align-items:center;gap:14px;min-width:0}

/* ===============================================================
   PAGE THEMES
   ===============================================================
   Two items in the menu are lit, and each has its own colour: Cooking
   burns orange, Battle sweeps violet. A page that arrives blue after
   you click an orange thing reads as a different site, so the page
   picks up the colour of the thing you clicked to reach it.

   One mechanism, two palettes. Each theme sets five custom properties
   and every rule below is written against those, so adding a third
   theme is five lines rather than a copy of the block.

   This repaints ACCENTS only. Surfaces, body text and structure stay
   exactly as they are everywhere else, because a site whose furniture
   changes colour room to room is not themed, it is inconsistent.
   =============================================================== */
.theme-hot{
  --acc:#ff8a1f; --acc-2:#ffb45c; --acc-deep:#ff3d00;
  --acc-line:rgba(255,138,31,.32); --acc-wash:rgba(255,138,31,.12);
  --acc-glow-1:rgba(255,110,0,.30); --acc-glow-2:rgba(255,61,0,.20);
  --acc-bg-1:#150A04; --acc-bg-2:#0C0503;
  --acc-soft:rgba(255,138,31,.06); --acc-ring:rgba(255,138,31,.18);
  --acc-border:rgba(255,138,31,.14); --acc-shadow:rgba(255,110,0,.10);
}
.theme-violet{
  --acc:#b26bff; --acc-2:#d3a6ff; --acc-deep:#7b2cff;
  --acc-line:rgba(154,78,255,.34); --acc-wash:rgba(154,78,255,.13);
  --acc-glow-1:rgba(139,60,255,.32); --acc-glow-2:rgba(199,125,255,.20);
  --acc-bg-1:#0D0618; --acc-bg-2:#06030D;
  --acc-soft:rgba(154,78,255,.07); --acc-ring:rgba(154,78,255,.18);
  --acc-border:rgba(154,78,255,.16); --acc-shadow:rgba(139,60,255,.12);
}

/* the hero */
.theme-hot .hero,.theme-violet .hero{
  border-color:var(--acc-line);
  background:
    radial-gradient(700px 300px at 15% 0%, var(--acc-glow-1), transparent 65%),
    radial-gradient(600px 320px at 88% 100%, var(--acc-glow-2), transparent 65%),
    linear-gradient(150deg,var(--acc-bg-1),var(--acc-bg-2));
  box-shadow:0 0 60px var(--acc-shadow);
}
.theme-hot .hero h1,.theme-violet .hero h1{
  background:linear-gradient(100deg,#fff,var(--acc-2) 45%,var(--acc-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-hot .hero .kicker,.theme-violet .hero .kicker{
  color:var(--acc-2);background:var(--acc-wash);border-color:var(--acc-line);
}

/* the row you just clicked, in both menus */
.theme-hot .side-nav a.on,.theme-violet .side-nav a.on,
.theme-hot .drawer a.on,.theme-violet .drawer a.on{
  background:var(--acc-wash);color:var(--acc-2);
  box-shadow:inset 0 0 0 1px var(--acc-line);
}

/* controls and boards */
.theme-hot .chip.on,.theme-violet .chip.on{
  background:linear-gradient(96deg,var(--acc-deep),var(--acc));
  border-color:transparent;color:#fff;
}
.theme-hot .card,.theme-violet .card{border-color:var(--acc-border)}
.theme-hot .hb-row:nth-child(-n+3) .hb-i,
.theme-violet .hb-row:nth-child(-n+3) .hb-i{color:var(--acc)}
.theme-hot .hb-row:hover,.theme-violet .hb-row:hover{background:var(--acc-soft)}
.theme-hot .hb-state.on,.theme-violet .hb-state.on{color:var(--acc)}
.theme-hot .hb-state.on::before,.theme-violet .hb-state.on::before{
  background:var(--acc);box-shadow:0 0 0 3px var(--acc-ring);
}
.theme-hot .hb-explain b,.theme-violet .hb-explain b{color:var(--acc-2)}

/* the chain board on /battle, which has its own marks */
.theme-violet .ch-score b{color:var(--acc-2)}
.theme-violet .cb-fill{background:linear-gradient(90deg,var(--acc-deep),var(--acc))}
.theme-violet .cb-row.on{background:var(--acc-wash);box-shadow:inset 0 0 0 1px var(--acc-line)}
.theme-violet .cb-row:hover{background:var(--acc-soft)}
.theme-violet .ct-row:hover{background:var(--acc-soft)}
.theme-violet .rd-state.on{color:var(--acc)}

/* Up and down stay green and red in every theme. Recolouring those is how a
   page tells someone a token is up when it is down. */

/* ===============================================================
   PARAGRAPH RHYTHM
   ===============================================================
   The reset at the top sets margin:0 on everything, which is right for
   layout and wrong for prose: consecutive paragraphs ran together with
   no gap, so a three paragraph explanation read as one wall. Rather
   than styling p in every component that happens to contain copy, this
   gives a gap to any paragraph that FOLLOWS another one, in the places
   copy actually lives.

   p + p rather than p, so a single paragraph in a tight box does not
   grow a trailing gap it never asked for, and nothing that was already
   spaced deliberately gets double spacing.
   =============================================================== */
.card-b p + p,
.hero p + p,
.hb-explain p + p,
.prose p + p{margin-top:1.05em}

/* A list that follows copy, and copy that follows a list, need the same
   air or the block reads as one run-on. */
.card-b p + ul,.card-b ul + p,
.card-b p + ol,.card-b ol + p{margin-top:1.05em}

/* ===============================================================
   PRODUCTS
   ===============================================================
   Ignite boosts, votes, the live ticker, the launches board and the
   design service.

   ONE SPACING NUMBER FOR ALL OF IT, and it is the one already in this
   file: 20px between stacked cards, 20px between the columns and rows
   of every grid below. The rule at "spacing between stacked cards"
   above covers card-after-card; these pages also put grids and strips
   between cards, which that selector never saw, so the same value is
   stated for those pairs here rather than left to whatever margin the
   component happened to have.

   Every interactive target below is at least 44px on its shortest
   side. That is not a preference either: the launch pages are read on
   a phone far more than on a desk, and a 30px vote button next to a
   30px red flag button is a mis-tap that changes what a page says
   about somebody's token.
   =============================================================== */

/* The block level containers these pages introduce, spaced the same as
   the cards they sit between. */
main > .card + .sv-grid, main > .sv-grid + .card,
main > .card + .lx-grid, main > .lx-grid + .card,
main > .card + .lt, main > .lt + .card,
main > section + .sv-grid, main > section + .lx-grid, main > section + .lt,
main > .lt + .sec-head, main > .sv-grid + .sec-head,
main > .lt + .lp-grid{margin-top:20px}

/* Small and disabled buttons. .btn had neither, so a launch button that
   cannot be pressed yet looked exactly like one that could. */
.btn.sm{padding:9px 16px;font-size:13px;min-height:44px}
.btn:disabled,.btn[disabled]{opacity:.42;filter:grayscale(.35);box-shadow:none;
  cursor:not-allowed;transform:none}
.btn:disabled:hover,.btn[disabled]:hover{filter:grayscale(.35);transform:none}

/* ---------------------------------------------------------------
   THE GOLD ROW IN THE MENU
   ---------------------------------------------------------------
   Ignite is the paid placement board, so its menu row is the most
   expensive looking thing in either menu. It follows the pattern the
   three existing highlights use: the gradient is on the label, the
   animation is on the label, and the row's own hover and active states
   are left alone underneath.

   Two animations at different periods, so the metal never visibly
   loops, plus an ember before the label that is drawn in CSS rather
   than being a character in a font that may not have one.

   Under prefers-reduced-motion it holds at a static gold. A menu item
   that shimmers is a nice touch; one that somebody cannot look at is a
   bug, and turning the effect off must not turn the gold off with it.
   --------------------------------------------------------------- */
@keyframes ig-gleam{
  0%,100%{filter:drop-shadow(0 0 7px rgba(255,200,70,.55))
                drop-shadow(0 0 16px rgba(255,150,0,.22))}
  44%    {filter:drop-shadow(0 0 12px rgba(255,225,140,.92))
                drop-shadow(0 0 26px rgba(255,170,20,.45))}
  70%    {filter:drop-shadow(0 0 6px rgba(255,200,70,.5))
                drop-shadow(0 0 14px rgba(255,150,0,.2))}
}
@keyframes ig-ember{
  0%,100%{transform:scale(1);box-shadow:0 0 9px rgba(255,200,70,.85),0 0 20px rgba(255,150,0,.4)}
  50%    {transform:scale(1.18);box-shadow:0 0 14px rgba(255,225,140,1),0 0 30px rgba(255,160,0,.6)}
}
.dr-ignited .lbl,.sn-ignited .lbl{
  background-image:linear-gradient(100deg,
    #E4B23A 0%, #E4B23A 20%,
    #FFF4CB 36%, #FFFFFF 45%, #FFD65E 53%, #B8801A 63%,
    #E4B23A 78%, #E4B23A 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          text-fill-color:transparent;
  animation:ms-shimmer 3.4s linear infinite, ig-gleam 5.7s ease-in-out infinite;
  font-weight:900;
}
/* The ember sits on the row, not on the label: a pseudo element inside a
   background-clip:text box inherits the clip and disappears. */
.dr-ignited::before,.sn-ignited::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFF8DC,#FFC846 46%,#B8801A);
  animation:ig-ember 2.6s ease-in-out infinite;
}
.dr-ignited:hover .lbl,.sn-ignited:hover .lbl{
  filter:drop-shadow(0 0 14px rgba(255,214,94,1)) drop-shadow(0 0 30px rgba(255,160,0,.55));
}
@media (prefers-reduced-motion: reduce){
  .dr-ignited .lbl,.sn-ignited .lbl{animation:none;background-position:50% 0;
    filter:drop-shadow(0 0 8px rgba(255,200,70,.55))}
  .dr-ignited::before,.sn-ignited::before{animation:none;
    box-shadow:0 0 9px rgba(255,200,70,.85),0 0 20px rgba(255,150,0,.4)}
}

/* ---------------------------------------------------------------
   THE LIVE TICKER
   ---------------------------------------------------------------
   Two strips that move. The track holds the list twice, end to end,
   and slides by exactly half its width, so the second copy is what is
   on screen at the moment the first one wraps.

   THE OFFSET ONLY WORKS IF EACH ITEM CARRIES ITS OWN TRAILING SPACE.
   Using `gap` on the track puts a space between items but not after
   the last one, so half the track is half an item short and the loop
   visibly jumps every pass. margin-right on the item is the same
   spacing with a whole number behind it.

   Paused on hover and on keyboard focus, because a link that is moving
   is a link nobody can click.
   --------------------------------------------------------------- */
.lt{display:flex;flex-direction:column;gap:12px}
.lt-strip{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:9px 16px;
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.lt-lab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ok);
}
.lt-lab::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor}
.lt-dn .lt-lab{color:var(--bad)}
.lt-vp{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,
                     #000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22px,
                     #000 calc(100% - 22px),transparent);
}
.lt-track{display:flex;width:max-content;animation:lt-run var(--lt-dur,60s) linear infinite}
.lt-track.is-empty{animation:none;width:auto}
/* Nothing is scrolling, so nothing should be fading. The mask exists to make
   items enter and leave without a hard edge; over a sentence that sits still it
   just eats the first three characters of it. */
.lt-strip.is-empty .lt-vp{-webkit-mask-image:none;mask-image:none}
.lt-strip:hover .lt-track,.lt-strip:focus-within .lt-track{animation-play-state:paused}
@keyframes lt-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lt-item{
  display:inline-flex;align-items:center;gap:8px;margin-right:26px;
  white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--text-2);
  /* 11px, so the link is 44px tall. These are the smallest targets on the page
     and they are the only ones that also move, which is the combination worth
     being generous about. */
  padding:11px 0;
}
.lt-item:hover{color:var(--text)}
.lt-av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:0 0 22px;
  background:var(--surface-3);display:grid;place-items:center}
.lt-av img{width:100%;height:100%;object-fit:cover}
.lt-ph{font-size:9px;font-weight:900;color:var(--text-3)}
.lt-t{font-weight:900;color:var(--text);letter-spacing:-.01em}
.lt-mc,.lt-ch{font-variant-numeric:tabular-nums}
.lt-ch.up{color:var(--ok)}
.lt-ch.dn{color:var(--bad)}
.lt-ch.flat{color:var(--text-3);font-weight:600}
.lt-none{font-size:12.5px;color:var(--text-3);line-height:1.5;padding:6px 0;
  white-space:normal}
@media (prefers-reduced-motion: reduce){
  /* No movement, and no second copy of every link either: duplicated rows in a
     list somebody is now scrolling by hand read as a bug. */
  .lt-track{animation:none}
  .lt-dup{display:none}
  .lt-vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:560px){
  .lt-strip{flex-direction:column;align-items:flex-start;gap:8px;padding:11px 14px}
  .lt-vp{width:100%}
}

/* ---------------------------------------------------------------
   VOTES
   --------------------------------------------------------------- */
.vt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.vt-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:82px;padding:12px 8px;border-radius:15px;text-align:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .12s;
}
.vt-btn:hover{border-color:var(--vt);color:var(--text);background:var(--surface-2)}
.vt-btn:active{transform:translateY(1px)}
.vt-btn:focus-visible{outline:2px solid var(--vt);outline-offset:2px}
/* The caller's own vote is HELD, visibly, not just tinted on hover. A vote you
   cannot see you have cast is a vote you cast twice. */
.vt-btn.on{
  color:#fff;border-color:var(--vt);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--vt),0 10px 26px -14px var(--vt);
}
.vt-ic{display:grid;place-items:center;width:24px;height:24px;color:var(--vt)}
.vt-ic svg{width:24px;height:24px}
.vt-l{font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1.2}
.vt-n{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text)}
.vt-row.is-off .vt-btn{opacity:.55;cursor:default}
.vt-note{margin-top:12px}
@media (max-width:520px){
  .vt-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------
   THE IGNITED BOARD
   --------------------------------------------------------------- */
.ig-hero{border-color:rgba(255,200,70,.32);
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(255,170,30,.26), transparent 62%),
    radial-gradient(600px 320px at 90% 100%, rgba(255,120,0,.16), transparent 62%),
    linear-gradient(150deg,#0B0803,#02060C);
  box-shadow:0 0 70px rgba(255,160,20,.16)}
.ig-hero .kicker{color:var(--gold)}
.ig-hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.ig-buy{background:linear-gradient(96deg,#FFA51F,var(--gold));color:#1a1200;
  box-shadow:0 0 30px rgba(255,180,40,.4)}
.ig-buy:hover{filter:brightness(1.08)}

/* 12px, the same gap the launch board gives its cards. These are rows in a
   list rather than cards in a stack, so they do not take the 20px card
   rhythm, but they do take the one the site already uses for a list of
   bordered rows. */
.ig-list{display:flex;flex-direction:column;gap:12px}
.ig-row{
  display:grid;align-items:center;gap:8px 14px;
  grid-template-columns:26px 46px minmax(0,1fr) auto auto;
  grid-template-areas:"rank av main nums left";
  padding:12px 14px;border-radius:16px;min-height:68px;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .16s,background .16s,transform .16s;
}
.ig-row:hover{border-color:rgba(255,200,70,.42);background:var(--surface-2);
  transform:translateY(-1px)}
.ig-rank{grid-area:rank;font-size:13px;font-weight:900;color:var(--gold);
  text-align:right;font-variant-numeric:tabular-nums}
.ig-av{grid-area:av;width:46px;height:46px;border-radius:14px;overflow:hidden;
  background:var(--surface-3);border:1px solid var(--line-2);display:grid;place-items:center}
.ig-av img{width:100%;height:100%;object-fit:cover}
.ig-ph{font-size:12px;font-weight:900;color:var(--text-3)}
.ig-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:6px}
.ig-n{font-size:15px;font-weight:900;letter-spacing:-.2px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-n em{font-style:normal;font-weight:700;color:var(--text-3);margin-left:7px;font-size:12.5px}
.ig-tiers-on{display:flex;gap:6px;flex-wrap:wrap}
.ig-pill{
  display:inline-flex;align-items:center;font-size:10px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  color:var(--bt,#FFC846);border:1px solid var(--bt,#FFC846);
  background:rgba(255,200,70,.09);
}
.ig-pill.ig-off{color:var(--text-3);border-color:var(--line);background:transparent}
.ig-nums{grid-area:nums;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ig-mc{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.ig-ch{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.ig-ch.up{color:var(--ok)} .ig-ch.dn{color:var(--bad)} .ig-ch.flat{color:var(--text-3)}
.ig-left{grid-area:left;display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:11px;background:var(--surface-3);
  border:1px solid rgba(255,200,70,.2);min-height:44px}
.ig-left-ic{display:grid;place-items:center;width:15px;height:15px;color:var(--gold)}
.ig-left-ic svg{width:15px;height:15px}
.ig-left b{font-size:13.5px;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums;
  /* Fixed width digits and a fixed slot, so a countdown ticking from 10:00 to
     9:59 does not shove the row it is in one pixel to the left every second. */
  min-width:7ch;text-align:right;display:inline-block}
.ig-left span{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}

.ig-empty{padding:26px 22px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:12px;border:1px dashed rgba(255,200,70,.3);border-radius:18px;
  background:rgba(255,200,70,.04)}
.ig-empty b{font-size:16.5px;font-weight:900;color:var(--gold)}
.ig-empty p{margin:0;font-size:13.5px;line-height:1.66;color:var(--text-2);max-width:58ch}

/* 20px. These read as cards, so they get the card rhythm rather than the
   tighter gap a row of stat tiles would take. */
.ig-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:20px}
.ig-tier-c{display:flex;flex-direction:column;gap:6px;padding:16px 17px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.ig-tier-ic{display:grid;place-items:center;width:26px;height:26px;color:var(--bt,#FFC846)}
.ig-tier-ic svg{width:26px;height:26px}
.ig-tier-c b{font-size:16px;font-weight:900;letter-spacing:-.2px}
.ig-tier-x{font-size:12px;font-weight:800;color:var(--bt,#FFC846);
  font-variant-numeric:tabular-nums}
.ig-tier-p{font-size:22px;font-weight:900;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums}
.ig-tier-b{font-size:12.5px;line-height:1.5;color:var(--text-2)}
/* The button carries the tier's own colour. Three identical blue buttons under
   three differently priced products makes the reader work out which one they
   are pressing from the text alone. */
.ig-tier-c .btn{margin-top:auto;background:var(--bt,#FFC846);color:#180F00;
  box-shadow:0 8px 26px -12px var(--bt,#FFC846)}
.ig-tier-c .btn:hover{filter:brightness(1.09)}

@media (max-width:760px){
  /* Flex rather than a narrower grid. In a grid the second row has to reuse the
     first row's column widths, which put the market cap and the 24h move into
     the 72px the rank and the avatar need and wrapped "up the curve" down three
     lines. Wrapping flex gives the numbers the width and keeps the clock on the
     right where it was. */
  .ig-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
  .ig-rank{flex:0 0 20px;order:1}
  .ig-av{order:2}
  .ig-main{order:3;flex:1 1 150px}
  .ig-nums{order:4;flex:1 1 auto;flex-direction:row;align-items:baseline;gap:10px;
    justify-content:flex-start}
  .ig-left{order:5;flex:0 0 auto;margin-left:auto}
}
@media (max-width:430px){
  .ig-row{gap:10px;padding:11px 12px}
  .ig-av{width:40px;height:40px;border-radius:12px}
  .ig-n{font-size:14px}
  .ig-left{padding:7px 9px}
  .ig-empty{padding:22px 16px}
}

/* ---------------------------------------------------------------
   ONE TOKEN'S BOOSTS, on its own page
   --------------------------------------------------------------- */
.cp-act{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.tk-boost{background:linear-gradient(96deg,#FFA51F,var(--gold));color:#1a1200;
  box-shadow:0 0 26px rgba(255,180,40,.36);gap:8px;min-height:44px}
.tk-boost:hover{filter:brightness(1.08)}
.tk-boost-ic{display:grid;place-items:center;width:18px;height:18px}
.tk-boost-ic svg{width:18px;height:18px}
.tk-boosts:empty{display:none}
.tk-b-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line)}
.tk-b-lab{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.tk-b-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;
  font-size:11.5px;font-weight:800;color:var(--bt,#FFC846);
  border:1px solid var(--bt,#FFC846);background:rgba(255,200,70,.08)}
.tk-b-ic{display:grid;place-items:center;width:14px;height:14px}
.tk-b-ic svg{width:14px;height:14px}
.tk-b-pill b{font-variant-numeric:tabular-nums;min-width:7ch;text-align:right;
  color:var(--text)}
.tk-b-score{font-size:11.5px;color:var(--text-3);font-weight:700}
.tk-noboost{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-3)}
.tk-link{color:var(--gold);font-weight:800;text-decoration:underline;
  text-underline-offset:2px;padding:6px 2px;min-height:44px}

/* ---------------------------------------------------------------
   THE BOOST MODAL
   --------------------------------------------------------------- */
.bm{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;
  justify-content:center;padding:22px}
.bm[hidden]{display:none}
.bm-veil{position:absolute;inset:0;background:rgba(1,3,8,.74);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bm-box{
  position:relative;width:min(580px,100%);max-height:min(88vh,900px);overflow:auto;
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid rgba(255,200,70,.30);border-radius:var(--r-xl);
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 70px rgba(255,175,35,.10);
  overscroll-behavior:contain;
}
.bm-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.bm-head b{font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold)}
.bm-x{display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px -8px 0;
  border-radius:12px;color:var(--text-3)}
.bm-x svg{width:19px;height:19px}
.bm-x:hover{color:var(--text);background:var(--surface-3)}
.bm-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.bm-load{font-size:13.5px;color:var(--text-3);padding:14px 0}
.bm-lab{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:4px}

.bm-target{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:12px 14px;
  border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.bm-target b{font-size:14.5px;font-weight:900;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bm-target code{font-size:11px;color:var(--text-3);font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;flex:1 1 100%;min-width:0}
.bm-target .chip{min-height:44px;display:inline-flex;align-items:center}
.bm-target-pick{flex-direction:column;align-items:stretch}
.bm-target-pick input{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 13px;color:var(--text);font-size:14px;
  font-weight:600;outline:none;min-height:44px;width:100%}
.bm-target-pick input:focus{border-color:var(--cyan);box-shadow:var(--glow-sm)}

.bm-tiers{display:grid;gap:12px}
.bm-tier{
  display:grid;gap:5px;text-align:left;padding:14px 16px;border-radius:16px;min-height:44px;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.bm-tier:hover{border-color:var(--bt,#FFC846);background:var(--surface-2)}
.bm-tier.on{border-color:var(--bt,#FFC846);
  box-shadow:inset 0 0 0 1px var(--bt,#FFC846),0 12px 34px -18px var(--bt,#FFC846)}
.bm-tier-h{display:flex;align-items:center;gap:9px}
.bm-tier-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--bt,#FFC846)}
.bm-tier-ic svg{width:22px;height:22px}
.bm-tier-h b{font-size:16px;font-weight:900;letter-spacing:-.2px}
.bm-tier-x{font-size:12px;font-weight:800;color:var(--bt,#FFC846);
  font-variant-numeric:tabular-nums}
.bm-tier-p{font-size:21px;font-weight:900;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums}
.bm-tier-c{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.bm-tier-b{font-size:12.5px;line-height:1.5;color:var(--text-3)}

.bm-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bm-cur{display:flex;gap:8px}
.bm-cur .chip{min-height:44px;display:inline-flex;align-items:center;padding:9px 18px}

.bm-act{display:flex;gap:10px;flex-wrap:wrap}
.bm-act .btn{flex:1 1 160px;min-height:48px}
.bm-err{font-size:13px;line-height:1.6;color:var(--bad)}
.bm-err:empty{display:none}
.bm-sig{margin-top:8px;font-size:11px;color:var(--text-3);font-family:ui-monospace,monospace;
  overflow-wrap:anywhere}

.bm-preview{padding:16px 17px;border-radius:14px;border:1px solid rgba(255,200,70,.28);
  background:rgba(255,200,70,.05)}
.bm-preview b{display:block;font-size:14.5px;color:var(--gold);margin-bottom:8px;
  line-height:1.4}
.bm-preview p{margin:0;font-size:13px;line-height:1.65;color:var(--text-2)}
.bm-preview p + p{margin-top:10px}

.bm-quote{display:flex;flex-direction:column;gap:16px}
.bm-q-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:15px 16px;border-radius:16px;
  border:1px solid rgba(255,200,70,.3);background:rgba(255,200,70,.05)}
.bm-q-top b{display:block;font-size:24px;font-weight:900;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;line-height:1.15}
.bm-q-usd{display:block;font-size:12px;color:var(--text-2);margin-top:4px;
  font-variant-numeric:tabular-nums}
.bm-q-clock{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bm-q-ic{display:grid;place-items:center;width:17px;height:17px;color:var(--gold)}
.bm-q-ic svg{width:17px;height:17px}
.bm-q-clock b{font-size:19px;color:var(--gold);min-width:7ch;text-align:right;
  display:inline-block}
.bm-q-clock span{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);flex:1 1 100%;text-align:right}
.bm-q-to{padding:12px 14px;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bm-q-to code{flex:1 1 200px;min-width:0;font-size:11.5px;font-family:ui-monospace,monospace;
  color:var(--text-2);overflow-wrap:anywhere}
.bm-q-to .chip{min-height:44px;display:inline-flex;align-items:center}

.bm-steps{display:flex;flex-direction:column;gap:9px}
.bm-step{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text-3)}
.bm-step-i{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;
  border-radius:50%;font-size:11.5px;font-weight:900;
  background:var(--surface-3);border:1px solid var(--line);color:var(--text-3)}
.bm-step-i svg{width:13px;height:13px}
.bm-step.now{color:var(--text);font-weight:700}
.bm-step.now .bm-step-i{border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,200,70,.12)}
.bm-step.done{color:var(--text-2)}
.bm-step.done .bm-step-i{border-color:var(--ok);color:var(--ok)}
.bm-step em{font-style:normal;color:var(--text-3);font-weight:600}

.bm-manual summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--text-3);
  padding:11px 0;min-height:44px;display:flex;align-items:center}
.bm-manual summary:hover{color:var(--text-2)}
.bm-manual-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.bm-manual-row input{flex:1 1 200px;min-width:0;min-height:44px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;color:var(--text);font-size:13px;outline:none;
  font-family:ui-monospace,monospace}
.bm-manual-row input:focus{border-color:var(--cyan)}

.bm-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
  padding:18px 16px}
.bm-done-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  color:var(--ok);border:1px solid rgba(0,229,160,.4);background:rgba(0,229,160,.08)}
.bm-done-ic svg{width:26px;height:26px}
.bm-done b{font-size:18px;font-weight:900;letter-spacing:-.3px}
.bm-done p{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:46ch}

@media (max-width:560px){
  /* A sheet from the bottom rather than a box in the middle. A centred dialog
     on a phone leaves its action buttons under the thumb only by accident. */
  .bm{padding:0;align-items:flex-end}
  .bm-box{width:100%;max-height:92vh;border-radius:24px 24px 0 0;border-bottom:0}
  .bm-body{padding:16px 15px 26px}
  .bm-act .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------
   THE LAUNCHES BOARD
   ---------------------------------------------------------------
   min() in the track sizing, not a bare 330px. A bare minimum larger
   than the column it is in overflows the page rather than shrinking,
   and the column on a 360px phone is about 320px.
   --------------------------------------------------------------- */
.lx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:20px}
.lx-card{display:flex;flex-direction:column;padding:0}
.lx-ban{display:block;height:104px;overflow:hidden;position:relative;flex:0 0 104px;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(0,112,253,.34), transparent 65%),
    linear-gradient(120deg,var(--surface-3),var(--surface))}
.lx-ban img{width:100%;height:100%;object-fit:cover;display:block}
.lx-ban::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(4,7,14,.75))}
.lx-b{display:flex;flex-direction:column;gap:13px;flex:1;padding:0 17px 17px}
.lx-top{display:flex;align-items:flex-end;gap:13px;margin-top:-30px;position:relative;z-index:1}
.lx-av{flex:0 0 62px;width:62px;height:62px;border-radius:17px;overflow:hidden;
  background:var(--surface-3);border:2px solid var(--surface);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.5)}
.lx-av img{width:100%;height:100%;object-fit:cover}
.lx-ph{font-size:14px;font-weight:900;color:var(--text-3)}
.lx-id{min-width:0;flex:1;padding-bottom:4px}
.lx-n{display:block;font-size:16px;font-weight:900;letter-spacing:-.3px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-n em{font-style:normal;font-weight:700;color:var(--text-3);margin-left:7px;font-size:12.5px}
.lx-s{display:block;font-size:11.5px;font-weight:700;color:var(--text-3);margin-top:2px;
  font-variant-numeric:tabular-nums}
.lx-pitch{margin:0;font-size:13px;line-height:1.55;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lx-meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.lx-meter i{display:block;height:100%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--blue),var(--cyan))}
.lx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.lx-foot .lp-soc{display:flex;gap:7px}
.lx-by{display:flex;flex-direction:column;gap:1px;min-width:0;margin-left:auto;
  text-align:right}
.lx-by-l{font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3)}
.lx-by-a{font-size:12.5px;font-weight:800;color:var(--ice);font-family:ui-monospace,monospace}
.lx-by:hover .lx-by-a{color:#fff}
.lx-by-n{font-size:11px;color:var(--text-3)}
.lx-by-off .lx-by-a{color:var(--text-3);font-family:inherit;font-weight:700}
.lx-act{display:flex;gap:10px;margin-top:auto;padding-top:2px}
.lx-act .btn{flex:1 1 0;min-height:44px}
.lx-empty{padding:26px 20px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.lx-empty b{font-size:16.5px;font-weight:900}
.lx-empty p{margin:0;font-size:13.5px;line-height:1.66;color:var(--text-2);max-width:56ch}
@media (max-width:430px){
  .lx-b{padding:0 14px 14px}
  .lx-av{flex:0 0 54px;width:54px;height:54px;border-radius:15px}
  .lx-foot{gap:10px}
  .lx-by{margin-left:0;text-align:left}
}

/* ---------------------------------------------------------------
   THE DESIGN SERVICE
   --------------------------------------------------------------- */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:20px;align-items:stretch}
.sv-card{display:flex;position:relative;overflow:visible}
.sv-card > .card-b{display:flex;flex-direction:column;gap:12px;width:100%;padding:20px 19px}
.sv-card.is-pop{border-color:rgba(255,200,70,.45);
  box-shadow:0 16px 46px -20px rgba(255,190,60,.45)}
.sv-pop{position:absolute;top:-11px;left:19px;z-index:1;
  font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px;color:#1a1200;
  background:linear-gradient(96deg,#FFA51F,var(--gold));
  box-shadow:0 6px 20px rgba(255,180,40,.4)}
.sv-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.sv-h b{font-size:19px;font-weight:900;letter-spacing:-.4px}
.sv-price{font-size:26px;font-weight:900;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.sv-del{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice)}
.sv-sum{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.sv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.55;
  color:var(--text-2)}
.sv-list li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg)}
.sv-choose{margin-top:auto;min-height:46px}
.sv-card.is-pop .sv-choose{background:linear-gradient(96deg,#FFA51F,var(--gold));
  color:#1a1200;box-shadow:0 0 26px rgba(255,180,40,.34)}

.sv-form{gap:18px}
.sv-need{padding:15px 17px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface)}
.sv-need:empty{display:none}
.sv-need-h{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ice);margin-bottom:10px}
.sv-need-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sv-need-l li{font-size:13px;line-height:1.6;color:var(--text-2)}
.sv-need-l b{color:var(--text)}
.sv-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.sv-fields{grid-template-columns:minmax(0,1fr)}}
.sv-form .lp-f input,.sv-form .lp-f textarea{min-height:46px}
.sv-form .lp-f textarea{min-height:96px}
.sv-pick .sp{min-height:60px}
/* Three packages, three columns. It was inheriting .sp-grid's two, which is
   right for eight supply tiers and wrong for three named products: the third
   dropped to its own row and read as an afterthought rather than as the top
   of the range. */
.sv-pick .sp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.sv-pick .sp-grid{grid-template-columns:minmax(0,1fr)}}
/* The trap field. Off screen rather than display:none, because some form
   fillers skip anything that is not rendered and the point is that they do
   fill it in. */
.sv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sv-state{font-size:13.5px;line-height:1.6}
.sv-state:empty{display:none}
.sv-state.is-ok{padding:14px 16px;border-radius:13px;color:var(--text-2);
  border:1px solid rgba(0,229,160,.35);background:rgba(0,229,160,.07)}
.sv-state.is-ok b{color:var(--ok)}
.sv-state.is-bad{padding:14px 16px;border-radius:13px;color:var(--bad);
  border:1px solid rgba(255,77,109,.35);background:rgba(255,77,109,.07)}

/* ---------------------------------------------------------------
   LOGO AND BANNER PICKERS
   --------------------------------------------------------------- */
.lp-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.lp-imgs{grid-template-columns:minmax(0,1fr)}}
.lp-drop{min-height:76px}
/* Previewed at the shape it will be STORED at, not the shape of the file. The
   server crops to fill, so showing the whole picture would be showing something
   that is never going to exist. */
.lp-drop .lp-shot{display:block;flex:0 0 auto;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid var(--line)}
.lp-drop .lp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lp-shot-logo{width:54px;height:54px}
.lp-shot-banner{width:132px;height:44px}
.lp-drop-note{margin-top:9px;padding:9px 11px;border-radius:10px;font-size:11.5px;
  line-height:1.5;color:var(--text-2);border:1px solid var(--line);
  background:var(--surface);text-transform:none;letter-spacing:0;font-weight:600}
.lp-drop-note.is-warn{border-color:rgba(255,200,70,.34);background:rgba(255,200,70,.06);
  color:var(--gold)}
.lp-drop-note[hidden]{display:none}

/* ---------------------------------------------------------------
   THE LAUNCH AGREEMENT
   --------------------------------------------------------------- */
.ag{padding:16px 18px;border-radius:16px;border:1px solid rgba(255,200,70,.28);
  background:rgba(255,200,70,.05)}
.ag-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:11px}
.ag-head b{font-size:15px;font-weight:900;color:var(--gold);letter-spacing:-.2px}
.ag-ver{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-variant-numeric:tabular-nums}
.ag-list{margin:0;padding-left:21px;display:flex;flex-direction:column;gap:10px}
.ag-list li{font-size:13px;line-height:1.65;color:var(--text-2)}
.ag-list li::marker{color:var(--gold);font-weight:900}
.ag-off{font-size:13px;line-height:1.65;color:var(--text-2)}
.ag-off.is-stale{color:var(--bad)}
.ag-off .btn{margin-top:12px}
/* `label.ag-check` rather than `.ag-check`, and flex-direction stated rather
   than left to the cascade. `.form label` above sets column, it scores the
   same as a bare class, and it was winning: the box sat on its own line above
   the sentence it belongs to, which reads as two things instead of one. */
label.ag-check{display:flex;flex-direction:row;align-items:center;gap:12px;
  margin-top:15px;padding-top:14px;
  min-height:44px;cursor:pointer;font-size:13.5px;line-height:1.5;color:var(--text);
  font-weight:700;text-transform:none;letter-spacing:0;
  border-top:1px solid rgba(255,200,70,.22)}
.ag-check input{flex:0 0 22px;width:22px;height:22px;margin:0;cursor:pointer;
  accent-color:#FFC846}
/* The sentence sits beside the box, not under it, and rides the box's middle
   line. On a narrow phone it wraps to two lines and the box centers against
   the pair, which is still one object rather than two stacked ones. */
.ag-check > span{flex:1 1 auto;min-width:0}
.ag-check input:disabled{cursor:not-allowed;opacity:.5}

/* ---------------------------------------------------------------
   TAP TARGETS ON THE LAUNCHPAD
   ---------------------------------------------------------------
   44px on the short side, everywhere somebody can press.

   Scoped to the launchpad's own pages and its modal rather than
   raised on .btn and .chip globally. Those two classes are on every
   one of the 185 pages of the parody site at 38px and 31px, and
   re-sizing them there would re-flow a site that has nothing to do
   with this release. The pages that ask people to sign transactions
   get the bigger target; the ones that do not keep what they have.

   Measured rather than assumed: a .btn is 38px tall from its padding
   and line height, and a .chip is 31px. Neither is close enough to 44
   to leave to a guess.
   --------------------------------------------------------------- */
/* Scoped by a CLASS, not by the data attributes those pages already carry.
   package.sh refuses to ship any launchpad hook onto memesly.io and it is right
   to: those attributes are how the launchpad's own script finds its pages, and
   this stylesheet is shared with a site that has no launchpad in it. A class
   costs one word in the markup and keeps the file shippable to both. */
.lp-page .btn,.bm .btn,
.lp-page .chip,.bm .chip{
  min-height:44px;
  /* min-height on a button only centres its label if the box is a flex or grid
     container. Left as a plain button the text sits at the top of the taller
     box, which looks like a rendering fault rather than a bigger button. */
  display:inline-flex;align-items:center;justify-content:center;
}
.lp-page .lp-f input,.lp-page .lp-f textarea{min-height:44px}
.lp-page .lp-f textarea{min-height:66px}
.lp-page .lp-buy input,.lp-page .lp-buy select{min-height:44px}
/* The supply and package pickers are labels wrapping a hidden radio, so the
   label is the target and it is the one that has to be big enough. */
.lp-page .sp{min-height:56px}
.bm-recent{margin-top:12px}
.bm-recent:empty{display:none}
.bm-recent-l{display:flex;gap:8px;flex-wrap:wrap}
.bm-recent-l .chip{min-height:44px;display:inline-flex;align-items:center}
.bm-quote.is-expired .bm-q-top{border-color:rgba(255,77,109,.4);background:rgba(255,77,109,.05)}
.bm-quote.is-expired .bm-q-top b{opacity:.5;text-decoration:line-through}
.bm-quote.is-expired .bm-q-clock b{color:var(--bad);text-decoration:none;opacity:1}
/* The one call to action on an empty Ignite board wears the product's colour.
   A blue button under a gold headline reads as a different feature. */
.ig-empty .btn{background:linear-gradient(96deg,#FFA51F,var(--gold));color:#1a1200;
  box-shadow:0 0 26px rgba(255,180,40,.34)}
.ig-empty .btn:hover{filter:brightness(1.08)}
@media (max-width:560px){
  /* The boost button is the page's one paid action. Squeezed to the right of a
     wrapped header it reads as a footnote, so on a phone it takes the width. */
  .cp-act{margin-left:0;width:100%}
  .cp-act .btn{width:100%}
  .tk-b-row{gap:8px}
}

/* =====================================================================
   LAUNCH CTA
   =====================================================================
   One button, two homes: it sits above the sidebar menu on desktop and
   inside the drawer on a phone, so it is written to fill whatever box it
   is dropped into rather than to a fixed width.

   It wears the launchpad's fire palette, not the site blue. Blue is what
   every other button on the page is, and the point of this one is that it
   is not one of them.
   ===================================================================== */
/* The Launch button, above both menus.
   The flame gradient with near black type on it. Green was tried and rejected:
   it is the colour of every confirm button on the internet, and the point of
   this one is that it is not one of them. Gold is also the Ignited board's
   colour, which is the right association, because both are the launchpad.
   Sized narrower than the menu so it does not touch the rail. */
.launch-cta{
  /* overflow:hidden clips the sweep to the button. Without it the band, which
     is deliberately taller and wider than the button so it crosses cleanly,
     paints as a grey slab across whatever sits to the right. isolation keeps
     the pseudo elements' stacking to this button. */
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  /* NO SIZING HERE. This used to carry width:calc(100% - 12px) and
     margin:2px 6px 16px, which is right for a 236px sidebar rail and wrong
     everywhere else: dropped into the hero it went full bleed with two pixels
     of air above it, welded to the last line of the paragraph. Each context
     sizes it now, and the shared rule is only the look. */
  min-height:42px;padding:11px 18px;
  border-radius:12px;
  font-size:14.5px;font-weight:900;letter-spacing:.01em;line-height:1.15;
  /* PLATINUM, WITH DARK TYPE ON IT.
     Gold was the flame gradient, and the problem with it was not that it
     looked bad: it was that Ignited is gold, the flame beside it is gold,
     and the one button in the menu was wearing the colour of one of the rows
     underneath it. Platinum is the only other metal in this palette that is
     not already spoken for, it is the brightest thing in a very dark theme,
     and near black on it carries about 13:1, which is better than the gold
     version managed.

     The metal is a brushed gradient rather than a flat silver, because flat
     silver reads as a disabled button. Same shimmer keyframes as the Ignited
     label, on background-position, which is the one gradient property that
     animates without a repaint. */
  text-align:center;color:#0B1220;
  /* Neutral grey with a slight cool cast, which is what platinum is. The
     first ramp here leaned about thirty points of blue over red at its dark
     stops, and thirty points is not a cast, it is slate: the button read as
     blue-grey next to a menu that is already lit in cyan. Every stop below
     keeps blue within twenty of red. */
  background-image:linear-gradient(100deg,
    #8A939D 0%, #B4BCC6 12%, #E6EBF1 26%, #FFFFFF 34%,
    #D8DEE6 42%, #A5ADB8 54%, #79818C 63%,
    #C0C7D0 78%, #99A2AD 90%, #8A939D 100%);
  background-size:220% 100%;
  animation:ms-shimmer 5.2s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -1px 0 rgba(11,18,32,.22),
             0 0 0 1px rgba(200,220,245,.5),
             0 2px 12px rgba(0,20,45,.55);
  transition:filter .16s,transform .16s;
}
/* The moving highlight, same mechanism as the header Buy button: a band on a
   pseudo element that only ever animates transform. Never a keyframed
   box-shadow, which repaints on the main thread every frame and is what made
   the header sweep stutter. */
.launch-cta::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:22%;z-index:1;
  pointer-events:none;border-radius:inherit;
  /* NARROWER AND HARDER THAN THE GOLD ONE WAS.
     A soft 38% wide white wash is a highlight on orange and nothing at all on
     a metal whose own highlight stop is already #FFFFFF: it washed out over
     the light part of the gradient and left a grey film over the dark part.
     A specular glint is thin and has a hard core, and on platinum it is the
     dark stops it reads against, so it needs to be brighter, not softer. */
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 38%,
    rgba(255,255,255,.85) 50%, rgba(255,255,255,.18) 62%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-20deg);
  animation:lc-sweep 4.6s cubic-bezier(.37,0,.63,1) infinite;
  will-change:transform;
}
/* Offset from the header button so the two do not fire together, which reads
   as the page flashing rather than as two objects catching the light. */
@keyframes lc-sweep{
  0%       {transform:translateX(-170%) skewX(-20deg)}
  42%,100% {transform:translateX(360%) skewX(-20deg)}
}
/* The resting glow. Opacity only, for the same reason as the sweep.
   Cool white rather than the orange it used to be: an orange halo around a
   silver button reads as the button being lit from outside by something else
   on the page. */
.launch-cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 16px 1px rgba(214,232,255,.62),
             0 0 34px 4px rgba(150,190,240,.34);
  opacity:.3;
  animation:lc-breathe 3.8s ease-in-out infinite;
}
@keyframes lc-breathe{
  0%,100%{opacity:.26}
  50%    {opacity:.82}
}
/* The label sits above both pseudo elements. Without this the sweep passes
   over the text instead of under it and the word greys out as it crosses. */
.launch-cta>*{position:relative;z-index:2}
/* CONTRAST, NOT BRIGHTNESS. The old hover lifted brightness, which is right
   for a mid-tone orange and wrong for a metal whose highlight is already
   #FFFFFF: the white stops clip, the dark stops come up to meet them, and
   pointing at a polished button flattens it into a plain light grey slab.
   Contrast deepens the shadows instead, which is what a metal does when you
   move it. */
.launch-cta:hover{filter:contrast(1.09) brightness(1.03);transform:translateY(-1px)}
.launch-cta:hover::before{opacity:.9;animation-play-state:paused}
.launch-cta:active{transform:translateY(0)}
.launch-cta:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
/* An icon in the label, sized off the text so it tracks the mobile bump below */
.launch-cta svg{width:1.05em;height:1.05em;flex:0 0 auto;display:block}

/* THE BUTTON IS NOT IN EITHER MENU ANY MORE.
   There were eleven lines here re-stating its colour, width, padding and
   radius, because .drawer a and .side-nav a are each a class plus an element
   and outranked the bare .launch-cta rule. The menus have a Launch ROW now,
   .dr-launch / .sn-launch, which takes that row styling on purpose instead of
   fighting it, and .launch-cta is the hero's button and nowhere else. Nothing
   replaces this block. */
/* The hero's button, on a phone. The drawer half of this rule is gone with the
   drawer's button; the drawer's Launch row is a row and takes its size from
   .drawer a like the other ten. */
@media (max-width:900px){
  .launch-cta{font-size:16.5px;min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  .launch-cta::before{animation:none;opacity:.55}
  /* The metal stops travelling but keeps its highlight, parked where the
     gradient is brightest, so it still reads as polished rather than flat. */
  .launch-cta{transition:none;animation:none;background-position:34% 0}
  .launch-cta::after{animation:none;opacity:0}
  .launch-cta:hover{transform:none}
}

/* =====================================================================
   NAV FIRE
   =====================================================================
   The flame that stands in for the Ignited row's bullet. Sized in em and
   not in pixels because it lives in two menus at two different font
   sizes, and a 14px flame next to 18.5px text reads as a stray glyph.
   ===================================================================== */
.nav-fire{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:1em;height:1em;line-height:1;
  vertical-align:-.12em;
  color:var(--gold);
  animation:nf-heat 3.1s ease-in-out infinite;
}
/* currentColor rather than a literal, so the flame follows the row: gold at
   rest, and whatever the active or hover state sets when one of those is on. */
.nav-fire svg{
  width:100%;height:100%;display:block;
  fill:currentColor;
  /* A flame is anchored at its base. Scaling about the centre makes it bob up
     and down like a balloon instead of licking upward. */
  transform-origin:50% 88%;
  animation:nf-lick 2.3s ease-in-out infinite;
}
/* Two loops at lengths that do not divide into each other, so the lick and the
   heat never line up twice in the same place and the thing does not visibly
   repeat. Same trick as ms-flicker on the Cooking label. */
@keyframes nf-lick{
  0%,100%{transform:scale(1,1) skewX(0deg)}
  21%    {transform:scale(1.06,1.13) skewX(-3.5deg)}
  44%    {transform:scale(.97,.93) skewX(2.5deg)}
  67%    {transform:scale(1.04,1.09) skewX(-1.5deg)}
  85%    {transform:scale(.99,1.02) skewX(1deg)}
}
@keyframes nf-heat{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,150,20,.7))}
  36%    {filter:drop-shadow(0 0 6px rgba(255,205,90,.95))
                drop-shadow(0 0 13px rgba(255,110,0,.42))}
  63%    {filter:drop-shadow(0 0 2px rgba(255,140,10,.55))}
}
/* The Ignited row already draws an ember dot in ::before. Once the markup
   carries a real flame the two stack up as two bullets, so the pseudo stands
   down wherever a .nav-fire is present and stays put where it is not. */
.dr-ignited:has(.nav-fire)::before,
.sn-ignited:has(.nav-fire)::before{display:none}
@media (prefers-reduced-motion:reduce){
  .nav-fire{animation:none;filter:drop-shadow(0 0 4px rgba(255,150,20,.6))}
  .nav-fire svg{animation:none;transform:none}
}

/* ---------------------------------------------------------------
   THE HOMEPAGE LAUNCH PROMO
   ---------------------------------------------------------------
   Written after the markup shipped without it. Every class below was in the
   HTML and in no stylesheet, so the add-on rows rendered as one unbroken
   sentence: "Add-onsIgnite a launchPaid placement on the Ignited board, from
   12 hours.Design service..." A <b> and a <span> are both inline, so with no
   rule saying otherwise the browser did exactly what it was told.
   --------------------------------------------------------------- */
.lp-promo{margin:34px 0}
.lp-promo>.card-b{padding:26px 28px 28px}
.lp-promo-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:30px;align-items:start}
@media (max-width:900px){
  .lp-promo-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .lp-promo>.card-b{padding:22px 20px 24px}
}
.lp-promo-copy h2{margin:10px 0 14px;font-size:26px;line-height:1.2;
  letter-spacing:-.5px}
.lp-promo-l{list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:12px}
.lp-promo-l li{position:relative;padding-left:20px;font-size:14.5px;
  line-height:1.6;color:var(--text-2)}
.lp-promo-l li::before{content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--ice);opacity:.85}
.lp-promo-l b{color:var(--text);font-weight:800}

.lp-promo-card{display:flex;flex-direction:column;gap:10px;
  padding:18px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface)}
.lp-promo-card .lb{font-size:11px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
/* The row that was running together. Grid rather than block so the title and
   the line under it cannot end up on one line again by accident. */
.lp-promo-row{display:grid;gap:4px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  text-decoration:none;transition:border-color .15s,background .15s,transform .15s}
.lp-promo-row b{display:block;font-size:14.5px;font-weight:800;color:var(--text);
  line-height:1.3}
.lp-promo-row span{display:block;font-size:13px;line-height:1.55;color:var(--text-2)}
.lp-promo-row:hover{border-color:rgba(125,211,252,.45);
  background:rgba(125,211,252,.06);transform:translateY(-1px)}

/* The standfirst under a section heading. Also shipped without a rule, so it
   sat hard against both the heading above it and the grid below. */
.sec-sub{max-width:none;margin:2px 0 22px;font-size:15px;line-height:1.7;
  color:var(--text-2)}

/* Breathing room between the homepage's stacked sections. They were built as
   siblings with no margin of their own and read as one continuous wall. */
.hero+.lt{margin-top:26px}
.lt+.lp-promo{margin-top:30px}
main>.sec-head{margin-top:38px}
main>.grid+.card,main>.grid+section{margin-top:34px}

/* Card body prose runs the full width of its box. It was inheriting a reading
   measure meant for long-form legal copy, which in a wide card left a third of
   the box empty and made the text look mis-set. */
.card-b>p,.card-b>.note,.cook-note{max-width:none}

/* =====================================================================
   WALLET PICKER

   Opened by the connect button. Every wallet we support is listed
   whether or not it is installed, because "no Solana wallet found" is a
   dead end and five names with a link each is not.
   ===================================================================== */
.wp{position:fixed;inset:0;z-index:9995;display:flex;align-items:center;
  justify-content:center;padding:22px}
.wp[hidden]{display:none}
.wp-veil{position:absolute;inset:0;background:rgba(1,3,8,.76);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wp-box{
  position:relative;width:min(430px,100%);max-height:min(86vh,760px);overflow:auto;
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:0 30px 90px rgba(0,0,0,.72);
  overscroll-behavior:contain;
}
.wp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 18px 13px;border-bottom:1px solid var(--line)}
.wp-head b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.wp-x{background:none;border:0;color:var(--text-3);font-size:24px;line-height:1;
  cursor:pointer;padding:0 4px;transition:color .15s}
.wp-x:hover{color:#fff}
.wp-list{display:flex;flex-direction:column;gap:8px;padding:14px}
/* One grid, not a flex row, so the name column is the same width on every row
   and the status chips line up down the right rather than sitting wherever the
   name happened to end. */
.wp-w{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);font:inherit;text-align:left;
  cursor:pointer;transition:.15s;
}
.wp-w:hover{border-color:rgba(255,150,26,.5);background:var(--surface-2)}
.wp-w:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.wp-n{font-size:15px;font-weight:750;letter-spacing:-.01em;min-width:0}
.wp-s{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-3);white-space:nowrap}
.wp-s.wp-on{color:#8CF0BC}
.wp-off{opacity:.72}
.wp-off:hover{opacity:1}
/* The mark. Initials rather than a logo file: bundling six wallet logos means
   six more requests and a licence question each, and the name is right beside
   it anyway. */
/* THE WALLET'S OWN MARK, WITH THE INITIALS UNDERNEATH IT.
   The tile draws the initials; the logo is an image positioned over the whole
   tile. If the file is missing the script removes the image and the initials
   are already there, so the row never shows a broken image icon and a wallet
   we have never heard of still gets a mark. The art lives in
   assets/img/wallets/<slug>.svg: replacing a wallet's logo is replacing that
   one file. */
.wp-ic{
  position:relative;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:900;letter-spacing:.02em;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
}
.wp-ic::before{content:attr(data-i)}
.wp-ic img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;border-radius:inherit;
}
.wp-note{padding:0 16px 16px;font-size:12px;line-height:1.6;color:var(--text-3)}
@media (max-width:520px){
  .wp{padding:0;align-items:flex-end}
  .wp-box{width:100%;max-height:90vh;border-radius:24px 24px 0 0;border-bottom:0}
}

/* =====================================================================
   TOKEN PAGE: SHARE AND CHART

   The two things somebody does with a token in its first minute: send it
   to a group, then look at the candles. Both were missing.
   ===================================================================== */
.tk-share{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.tk-share-l{
  font-size:10.5px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-3);margin-right:2px;
}
.tk-share-b{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--text-2);
  font:inherit;font-size:13px;font-weight:750;cursor:pointer;transition:.15s;
}
.tk-share-b svg{width:14px;height:14px;flex:0 0 auto;display:block}
.tk-share-b:hover{background:var(--surface-2);color:#fff;border-color:var(--line-2)}
.tk-x:hover{border-color:rgba(255,255,255,.5)}
.tk-tg:hover{border-color:rgba(42,171,238,.6);color:#8ED8F8}
.tk-copy:hover{border-color:rgba(255,150,26,.55);color:var(--gold)}
@media (max-width:560px){
  /* Two full width rows rather than three squeezed pills. */
  .tk-share{gap:8px}
  .tk-share-l{flex:1 0 100%}
  .tk-share-b{flex:1 1 auto;justify-content:center}
}

.tk-chart .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.tk-chart-x{display:inline-flex;gap:8px;flex-wrap:wrap}
/* A FIXED ASPECT BOX, NOT A FIXED HEIGHT.
   A third party iframe with height:100% inside an auto height parent collapses
   to nothing, which renders as a card with a heading and a void under it.
   aspect-ratio gives the box a real height at every width without hardcoding
   one that is wrong on a phone. */
.tk-chart-f{
  position:relative;width:100%;aspect-ratio:16/10;
  min-height:320px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#0A0E17;
}
.tk-chart-f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:640px){.tk-chart-f{aspect-ratio:4/5;min-height:380px}}

/* ---- sidebar: live launches -------------------------------------------
   Reuses the .sug row so the panel does not change shape when the live data
   replaces the build time fallback. Only the badges are new. */
/* THE LIVE ROWS NEED MORE ROOM THAN THE OLD ONES DID.
   The fallback rows were a name and a handle, one short line each. These carry
   a badge that wraps to its own line and a subtitle that runs to two, and at
   the old 6px gap the three parts ran together into a block of text with an
   avatar next to it. */
.st-row{align-items:flex-start;padding:9px 8px;gap:12px}
.st-row .sug-av{margin-top:1px}
.st-row .sug-t{display:flex;flex-direction:column;gap:5px}
.st-row .sug-n{gap:7px;flex-wrap:wrap;align-items:center;line-height:1.35}
.st-row .sug-h{line-height:1.5}
.st-row .sug-go{align-self:center}
/* Its own line when it cannot sit beside the name, with air above and below
   rather than butting into both. */
.st-row .st-ig{margin:1px 0}
.st-ig{
  font-size:9.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;
  color:var(--gold);background:rgba(255,200,70,.12);
  border:1px solid rgba(255,200,70,.34);border-radius:99px;padding:2px 7px;
  line-height:1.4;white-space:nowrap;
}
.st-house .st-ig{color:#FFDE86;border-color:rgba(255,200,70,.5);
  background:linear-gradient(96deg,rgba(255,122,24,.24),rgba(255,200,70,.16))}
/* The computed one. It animates, because the claim it is making is that
   something is happening right now. */
.st-fire{display:inline-flex;width:13px;height:13px;color:#FF8A3D;
  animation:st-lick 1.5s ease-in-out infinite}
.st-fire svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes st-lick{
  0%,100%{transform:scale(1) translateY(0);opacity:.9}
  50%    {transform:scale(1.16) translateY(-1px);opacity:1}
}
.st-hot .sug-av{border-color:rgba(255,138,61,.75);
  box-shadow:0 0 0 1px rgba(255,138,61,.3),0 0 14px rgba(255,120,20,.35)}
.st-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:11px;font-weight:900;letter-spacing:.02em;color:var(--text-2);
  background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){.st-fire{animation:none}}

/* =====================================================================
   THE COMPARISON TABLE

   Three columns on a desktop, and on a phone the same table scrolled
   sideways rather than reflowed into stacked pairs. A comparison read as
   nine separate two-row blocks is not a comparison any more: the whole
   value is having the two numbers on one line, next to each other.
   ===================================================================== */
.cmp{margin-top:34px}
.cmp .sec-head{margin-bottom:6px}
.cmp-wrap{
  margin-top:16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.cmp-t{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.cmp-t th,.cmp-t td{
  padding:13px 16px;text-align:left;vertical-align:top;line-height:1.55;
  border-bottom:1px solid var(--line);
}
.cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:0}
.cmp-t thead th{
  font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-2);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}
.cmp-t thead th:nth-child(2){color:var(--gold)}
.cmp-t tbody th{
  font-weight:750;color:var(--text-2);width:29%;min-width:190px;
}
.cmp-t td{color:var(--text-2);width:35.5%}
/* The winning cell, marked once per row and never on both. */
.cmp-t td.cmp-win{color:#fff;font-weight:700;background:rgba(255,200,70,.055)}
.cmp-t tbody tr:hover th,.cmp-t tbody tr:hover td{background:rgba(255,255,255,.025)}
.cmp-t tbody tr:hover td.cmp-win{background:rgba(255,200,70,.085)}
.cmp-note{
  margin-top:14px;padding:15px 17px;border:1px solid rgba(255,200,70,.22);
  border-radius:12px;background:rgba(255,200,70,.045);
  font-size:13.5px;line-height:1.66;color:var(--text-2);max-width:none;
}
@media (max-width:760px){
  .cmp-t{font-size:13px}
  .cmp-t th,.cmp-t td{padding:11px 13px}
}

/* ---- the ticker's pinned SOL chip and per token price ------------------ */
.lt-sol{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  margin-right:2px;padding:5px 11px;border-radius:99px;
  border:1px solid rgba(153,69,255,.4);background:rgba(153,69,255,.11);
  font-size:12px;font-weight:800;white-space:nowrap;
}
.lt-sol[hidden]{display:none}
.lts-t{font-size:10px;font-weight:900;letter-spacing:1px;color:#C9A7FF}
.lts-p{color:#fff;font-variant-numeric:tabular-nums}
.lts-c{font-size:11px;font-weight:800;color:var(--text-3);font-variant-numeric:tabular-nums}
.lts-c.up{color:var(--ok)} .lts-c.dn{color:var(--bad)}
/* The unit price, between the cap and the move. Tabular figures so the row
   does not jitter sideways every time a digit changes width. */
.lt-pr{font-size:12.5px;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lt-pr:empty{display:none}
@media (max-width:560px){
  /* On a phone the strip is already tight, so the cap stays and the unit
     price goes: two dollar figures in a 390px row read as one long number. */
  .lt-pr{display:none}
}

/* ---- launches: the expanded half of a card ---------------------------- */
.lx-exp{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--text-3);font:inherit;font-size:12.5px;
  font-weight:800;cursor:pointer;transition:.15s;
}
.lx-exp:hover{color:#fff;border-color:var(--line-2);background:var(--surface-2)}
.lx-exp-i{
  width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .18s;
}
.lx-exp.is-open .lx-exp-i{transform:rotate(-135deg) translateY(-1px)}
.lx-more{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.lx-more[hidden]{display:none}
/* auto-fit, so two facts do not stretch to half the card each and four do not
   squeeze into a column apiece. */
.lx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lx-facts div{display:flex;flex-direction:column;gap:3px;min-width:0}
.lx-facts span{font-size:10.5px;font-weight:900;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-3)}
.lx-facts b{font-size:14px;font-weight:750;color:#fff}
.lx-ca{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding:9px 12px;border:1px dashed var(--line-2);border-radius:10px;
  background:var(--surface);
}
.lx-ca-l{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--text-3)}
.lx-ca code{font-size:12px;color:var(--text-2);word-break:break-all;min-width:0;flex:1}
.lx-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.lx-share .tk-share-b{padding:7px 12px;font-size:12.5px}

/* ---- the house coin's permanent ignite -------------------------------- */
/* The sidebar badge. Wider than the plain Ignited pill because it carries the
   flame and the multiplier, so the row wraps rather than clipping. */
.st-ig-perm{
  display:inline-flex;align-items:center;gap:5px;
  color:#1B1000;border-color:transparent;
  background:linear-gradient(96deg,#FF7A18,#FFA51F 45%,var(--gold));
  box-shadow:0 0 12px rgba(255,150,26,.4);
}
.st-ig-perm .nav-fire{width:11px;height:11px;display:inline-flex}
.st-ig-perm .nav-fire svg{width:100%;height:100%;display:block;fill:currentColor}

/* The banner on its own profile, above the header. */
.ig-perm{
  display:flex;align-items:center;gap:14px;
  margin:16px 0 2px;padding:13px 16px;border-radius:var(--r);
  border:1px solid rgba(255,150,26,.45);
  background:linear-gradient(100deg,rgba(255,122,24,.16),rgba(255,200,70,.05) 62%);
  box-shadow:0 0 0 1px rgba(255,150,26,.1),0 6px 26px rgba(90,45,0,.28);
}
.ig-perm > .nav-fire{
  flex:0 0 26px;width:26px;height:26px;display:flex;color:#FFA51F;
}
.ig-perm > .nav-fire svg{width:100%;height:100%;display:block;fill:currentColor}
.ig-perm-t{min-width:0;flex:1}
.ig-perm-t b{display:block;font-size:15.5px;font-weight:800;color:#FFD9A1;
  letter-spacing:-.01em;margin-bottom:4px}
.ig-perm-t span{display:block;font-size:13px;line-height:1.6;color:var(--text-2)}
.ig-perm-x{
  flex:0 0 auto;align-self:flex-start;
  font-size:10.5px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--gold);background:rgba(255,200,70,.12);
  border:1px solid rgba(255,200,70,.34);border-radius:99px;padding:5px 11px;
  white-space:nowrap;
}
@media (max-width:620px){
  .ig-perm{flex-wrap:wrap;gap:10px}
  .ig-perm-x{order:3;width:100%;text-align:center}
}

/* ---- the permanent house slot on the boards --------------------------- */
/* No clock, so no clock icon. The column keeps its width so the rows below
   still line up. */
.ig-forever{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.ig-forever b{font-size:13px;font-weight:800;color:var(--gold);white-space:nowrap}
.ig-forever span{font-size:10.5px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text-3)}
.ig-pill.ig-house{
  color:#1B1000;border-color:transparent;
  background:linear-gradient(96deg,#FF7A18,#FFA51F 45%,var(--gold));
  font-weight:900;
}
.tk-b-pill.tk-b-house{border-color:rgba(255,150,26,.55);
  box-shadow:0 0 14px rgba(255,150,26,.22)}

/* =====================================================================
   AFTER A LAUNCH

   The address, on screen, until they leave the page. It used to be a
   toast that took itself away while the person was still reading the
   thing they needed to copy.
   ===================================================================== */
.mint-ok{
  margin:0 0 20px;
  border-color:rgba(18,206,107,.5);
  background:linear-gradient(120deg,rgba(18,206,107,.12),rgba(18,206,107,.03) 62%);
  box-shadow:0 0 0 1px rgba(18,206,107,.16),0 8px 30px rgba(0,70,35,.3);
}
.mint-ok-h{display:flex;gap:13px;align-items:flex-start}
.mint-ok-tick{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;margin-top:1px;
  background:var(--ok);box-shadow:0 0 14px rgba(18,206,107,.55);position:relative;
}
/* The tick, drawn rather than an emoji or an icon font: two borders rotated. */
.mint-ok-tick::after{
  content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid #04150C;border-width:0 2.5px 2.5px 0;transform:rotate(43deg);
}
.mint-ok-h b{display:block;font-size:16px;font-weight:800;color:#8CF0BC;margin-bottom:4px}
.mint-ok-h span{display:block;font-size:13px;line-height:1.6;color:var(--text-2)}
.mint-ok-ca{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:14px;
  padding:11px 13px;border:1px dashed rgba(18,206,107,.42);border-radius:11px;
  background:rgba(0,0,0,.28);
}
/* user-select:all so a tap or a click selects the whole address rather than
   one word of it, for anybody who reaches for the mouse before the button. */
.mint-ok-ca code{
  flex:1;min-width:0;font-size:13.5px;color:#fff;word-break:break-all;
  user-select:all;-webkit-user-select:all;letter-spacing:.01em;
}
.mint-ok-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.mint-ok .note{margin-top:12px}
.mint-ok .note code{user-select:all;-webkit-user-select:all}
@media (max-width:560px){
  .mint-ok-ca{gap:9px}
  .mint-ok-ca code{flex:1 0 100%;font-size:12.5px}
  .mint-ok-ca .btn,.mint-ok-act .btn{flex:1 1 auto;justify-content:center}
}

/* ---- the code box in the boost modal ---------------------------------- */
.bm-code{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
}
.bm-code-l{
  display:block;font-size:11px;font-weight:900;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px;
}
.bm-code-r{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bm-code-r input{
  flex:1 1 230px;min-width:0;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:11px;
  background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
}
.bm-code-r input::placeholder{letter-spacing:.04em;color:var(--text-3);text-transform:none}
.bm-code-r input:focus{outline:2px solid var(--ice);outline-offset:1px;
  background:rgba(255,255,255,.07)}
.bm-code .note{margin-top:9px}
/* A comped slot on the board and on a token page. Same shape as a paid pill,
   deliberately not the same colour: the point is that they are different. */
.ig-pill.ig-comped,.tk-b-pill.tk-b-comped{
  border-color:rgba(125,211,252,.45);color:#9FE6FF;background:rgba(34,193,255,.09)
}

/* =====================================================================
   SEARCH RESULTS

   A panel under the header box. It exists because the box used to only
   hide cards on the current page, so on any page without cards it did
   nothing while still inviting you to type in it.
   ===================================================================== */
.srch-drop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:200;
  max-height:min(58vh,420px);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  padding:6px;
}
.srch-drop[hidden]{display:none}
.srch-hit{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:9px 10px;border-radius:10px;color:var(--text-2);text-decoration:none;
}
.srch-hit:hover{background:var(--surface-2);color:#fff}
.srch-av{
  width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);display:block;
}
.srch-av img{width:100%;height:100%;object-fit:cover;display:block}
.srch-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.srch-t b{font-size:14px;font-weight:750;color:inherit;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.srch-t span{font-size:11.5px;color:var(--text-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.srch-k{
  font-size:9.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:99px;padding:3px 8px;
  white-space:nowrap;
}
.srch-none{padding:14px 12px;font-size:13px;color:var(--text-3)}
@media (max-width:700px){
  /* Full width of the header on a phone rather than the width of the input,
     which is squeezed to a magnifying glass at that size. */
  .srch-drop{left:-8px;right:-8px;max-height:62vh}
}

/* ===========================================================================
   THE TRADING SURFACE
   The token page, rebuilt as something a trader can work from: a chart, a
   trade panel, the stats block, and the tape.

   Laid out as two columns that collapse to one. The trade panel comes FIRST in
   the source and is moved to the right by grid order on a wide screen, so on a
   phone somebody lands on the buy box rather than scrolling a chart to find it.
   =========================================================================== */
.ts{display:grid;grid-template-columns:1fr;gap:16px}
/* A grid item's min-width is auto, which means it refuses to be narrower than
   its widest child. The tape holds a 560px table that is meant to scroll inside
   its own box, and without this the table pushed the whole column wider than
   the phone and took the entire page with it. */
.ts > *{min-width:0}
@media (min-width:1040px){
  .ts{grid-template-columns:minmax(0,1fr) 344px;align-items:start}
  /* Every row is placed explicitly. The header spans both columns and the two
     side boxes stack beside a tall left column, and with only the left and
     right items placed, auto-placement pushed the header out of the grid
     entirely: it vanished off the top of the page, taking the contract address
     and the copy button with it. Placing all four leaves nothing to guess. */
  .ts-head{grid-column:1/-1;grid-row:1}
  .ts-main{grid-column:1;grid-row:2/span 2}
  .ts-side{grid-column:2;grid-row:2}
  .ts-side-2{grid-column:2;grid-row:3}
}

/* --- header ------------------------------------------------------------- */
.ts-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);margin-bottom:16px}
.ts-logo{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:0 0 auto;
  background:#0d1420;border:1px solid var(--line)}
.ts-id{min-width:0;flex:1 1 220px}
.ts-name{font-size:19px;font-weight:900;letter-spacing:-.3px;display:flex;
  gap:8px;align-items:center;flex-wrap:wrap}
.ts-sym{font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--text-3);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px}
/* THE CONTRACT ADDRESS ROW.
   Wraps, because on a phone the address, a COPY button and up to six links
   do not fit on one line and the alternative to wrapping is squeezing. */
.ts-ca{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:11.5px;
  color:var(--text-3);flex-wrap:wrap}
/* The code element is a flex row of two spans: everything but the last eight
   characters, which is allowed to ellipsize, and the last eight, which is
   not. See paintRecord. word-break:break-all used to live here and is what
   let this collapse into a column one character wide. */
/* SHRINK, BUT DO NOT GROW.
   flex:1 1 150px was tried and it fixed the phone by breaking the desktop:
   with room to spare the address stretched to fill the row and shoved COPY
   and the links across to the far right, so a 44 character string sat alone
   with 600px of nothing between it and its own copy button. 0 1 auto means
   natural width where there is room and ellipsis where there is not, which is
   the actual requirement at both ends. */
.ts-ca code{
  display:flex;align-items:baseline;min-width:0;flex:0 1 auto;
  font-size:11.5px;color:var(--text-2);white-space:nowrap;
}
.ts-ca-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ts-ca-t{flex:0 0 auto;white-space:nowrap}
.ts-ca .copy{flex:0 0 auto}
/* The links go to their own line rather than stealing width from the address.
   The first one drops its indent, which is only there to separate it from the
   one before it. */
.ts-ca [data-v="links"]{display:flex;flex-wrap:wrap;gap:0 4px;flex:0 0 auto}
.ts-ca [data-v="links"] .ts-link:first-child{margin-left:0}
.ts-px{margin-left:auto;text-align:right}
.ts-px-n{font-size:24px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.ts-px-c{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.up{color:var(--ok)}.down{color:var(--bad)}.flat{color:var(--text-3)}

/* --- chart -------------------------------------------------------------- */
.ts-chart{position:relative;height:320px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);overflow:hidden}
.ts-chart svg{display:block;width:100%;height:100%}
.ts-chart-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;color:var(--text-3);font-size:13.5px}
.ts-res{position:absolute;top:10px;right:10px;display:flex;gap:4px;z-index:2}
.ts-res button{font:800 11px/1 inherit;letter-spacing:.4px;color:var(--text-3);
  background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;cursor:pointer}
.ts-res button[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.08)}
.ts-embed{height:520px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ts-embed iframe{display:block;width:100%;height:100%;border:0}

/* --- stats block, the one from the screenshot --------------------------- */
.ts-stats{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  margin-top:16px;overflow:hidden}
.ts-stats-h{display:flex;align-items:center;gap:6px;padding:10px 12px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.ts-tab{font:800 13px/1 inherit;color:var(--text-3);background:transparent;border:0;
  border-radius:9px;padding:8px 12px;cursor:pointer}
.ts-tab[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.09)}
.ts-win{margin-left:auto;display:flex;gap:3px}
.ts-win button{font:800 11.5px/1 inherit;color:var(--text-3);background:transparent;
  border:0;border-radius:8px;padding:7px 11px;cursor:pointer;font-variant-numeric:tabular-nums}
.ts-win button[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.11)}
.ts-stats-b{padding:14px 16px 16px}
.ts-kv{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;margin-bottom:14px}
.ts-kv b{font-weight:800;font-variant-numeric:tabular-nums}
.ts-kv span{color:var(--text-3)}
/* A split row: two counts and one bar showing the ratio between them. The bar
   is one element with a green segment sized by percentage, not two elements
   fighting over a gap, so it can never round to 101%. */
.ts-split{margin-bottom:13px}
.ts-split-r{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;
  font-variant-numeric:tabular-nums}
.ts-split-r b{font-weight:800}
.ts-split-r .l{color:var(--ok)}.ts-split-r .r{color:var(--bad)}
.ts-split-r em{font-style:normal;color:var(--text-3);font-weight:600;margin-left:5px}
.ts-bar{height:6px;border-radius:99px;background:var(--bad);overflow:hidden}
.ts-bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.ts-audit{padding:2px 0}
.ts-audit .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.ts-audit .row:last-child{border-bottom:0}
.ts-audit .ok{color:var(--ok);font-weight:800}
.ts-audit .no{color:var(--bad);font-weight:800}
.ts-audit .meh{color:var(--text-3);font-weight:800}

/* --- trade panel -------------------------------------------------------- */
.ts-trade{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  overflow:hidden;position:sticky;top:14px}
.ts-sides{display:grid;grid-template-columns:1fr 1fr}
.ts-sides button{font:900 14px/1 inherit;padding:14px 0;border:0;cursor:pointer;
  background:transparent;color:var(--text-3);border-bottom:1px solid var(--line)}
.ts-sides button[aria-pressed="true"]{color:#04120A;background:var(--ok);border-bottom-color:var(--ok)}
.ts-sides button.sell[aria-pressed="true"]{color:#1B0308;background:var(--bad);border-bottom-color:var(--bad)}
.ts-trade-b{padding:14px}
.ts-amt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.26)}
.ts-amt input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;
  font:900 20px/1.2 inherit;font-variant-numeric:tabular-nums}
.ts-amt input::-webkit-outer-spin-button,.ts-amt input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.ts-amt input[type=number]{-moz-appearance:textfield}
.ts-amt .unit{font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.5px}
.ts-presets{display:flex;gap:6px;margin-top:9px}
.ts-presets button{flex:1;font:800 12px/1 inherit;color:var(--text-2);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;padding:8px 0;cursor:pointer}
.ts-presets button:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.ts-quote{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.75}
.ts-quote .row{display:flex;justify-content:space-between;gap:10px}
.ts-quote b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.ts-go{width:100%;margin-top:12px;padding:14px;border:0;border-radius:12px;cursor:pointer;
  font:900 15px/1 inherit;color:#04120A;background:var(--ok)}
.ts-go.sell{color:#1B0308;background:var(--bad)}
.ts-go[disabled]{opacity:.5;cursor:not-allowed}
.ts-slip{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px;color:var(--text-3)}
.ts-slip input{width:62px;background:rgba(0,0,0,.26);border:1px solid var(--line);
  border-radius:8px;color:#fff;padding:6px 8px;font:800 12px/1 inherit;text-align:right}
.ts-msg{margin-top:11px;font-size:12.5px;line-height:1.6;border-radius:10px;padding:10px 12px}
.ts-msg.err{color:#FFC9D4;background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.28)}
.ts-msg.ok{color:#B6FFE6;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.28)}

/* --- the tape ----------------------------------------------------------- */
.ts-tape{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  margin-top:16px;overflow:hidden}
.ts-tape-h{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.ts-tw{width:100%;overflow-x:auto}
table.ts-t{width:100%;border-collapse:collapse;font-size:12.5px;
  font-variant-numeric:tabular-nums;min-width:560px}
table.ts-t th{text-align:right;font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-3);font-weight:800;padding:9px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface)}
table.ts-t th:first-child,table.ts-t td:first-child{text-align:left}
table.ts-t td{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.045);text-align:right}
table.ts-t tr:last-child td{border-bottom:0}
table.ts-t a{color:inherit;text-decoration:none}
table.ts-t a:hover{text-decoration:underline}
.ts-empty{padding:34px 20px;text-align:center;color:var(--text-3);font-size:13.5px;line-height:1.7}
/* A row that just arrived. One flash, then it settles: a tape where every row
   is animated is a tape nobody can read. */
@keyframes tsIn{from{background:rgba(0,229,160,.16)}to{background:transparent}}
table.ts-t tr.fresh td{animation:tsIn 1.4s ease-out}
table.ts-t tr.fresh.sell td{animation-name:tsInSell}
@keyframes tsInSell{from{background:rgba(255,77,109,.16)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){table.ts-t tr.fresh td{animation:none}}

/* --- progress to graduation --------------------------------------------- */
.ts-prog{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:14px 16px;margin-top:16px}
.ts-prog-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:9px}
.ts-prog-h b{font-weight:800;font-variant-numeric:tabular-nums}
.ts-prog-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.ts-prog-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#02A5F5,#22C1FF)}
.ts-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media (min-width:560px){.ts-facts{grid-template-columns:repeat(4,1fr)}}
.ts-fact{min-width:0}
.ts-fact b{display:block;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis}
.ts-fact span{display:block;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text-3);font-weight:800;margin-top:2px}
table.ts-t td.ts-ty{font-weight:900}
.ts-ca .ts-link{color:var(--text-3);text-decoration:none;font-weight:700;margin-left:10px}
.ts-ca .ts-link:hover{color:var(--text)}

/* --- pay with, and the dollar hint under the amount ---------------------- */
.ts-pay{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;color:var(--text-3)}
.ts-pay span{margin-right:2px}
.ts-pay button{font:800 12px/1 inherit;color:var(--text-2);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer}
.ts-pay button[aria-pressed="true"]{color:#fff;background:rgba(2,165,245,.18);border-color:var(--line-2)}
.ts-usd{font-size:12px;color:var(--text-3);margin-top:6px;min-height:16px;
  font-variant-numeric:tabular-nums}

/* --- the two step notice ------------------------------------------------ */
.ts-steps{margin-top:11px;border:1px solid var(--line);border-radius:10px;
  background:rgba(2,165,245,.06);padding:11px 12px;font-size:12.5px;line-height:1.65;color:var(--text-2)}
.ts-steps b{color:var(--text);font-weight:800}
.ts-steps ol{margin:7px 0 0;padding-left:18px}
.ts-steps li{margin-bottom:4px}
.ts-steps a{color:var(--ice);font-weight:800}

/* --- Jupiter, as links -------------------------------------------------- */
.ts-swap{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  overflow:hidden;margin-bottom:16px}
.ts-swap-h{padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3)}
.ts-swap-b{padding:10px}
.ts-swap-go{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border:1px solid var(--line);border-radius:11px;text-decoration:none;
  margin-bottom:7px;background:rgba(0,0,0,.22)}
.ts-swap-go:hover{border-color:var(--line-2);background:rgba(2,165,245,.07)}
.ts-swap-go .pair{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);
  min-width:0;overflow:hidden}
.ts-swap-go .pair b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-swap-go .pair i{font-style:normal;color:var(--text-3)}
.ts-swap-go .go{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--text-3);flex:0 0 auto}
.ts-swap-go:hover .go{color:var(--ice)}
.ts-swap-n{margin:8px 2px 2px;font-size:11.5px;line-height:1.6;color:var(--text-3)}

/* --- the board and the index -------------------------------------------- */
table.bd-t{min-width:860px}
table.bd-t td.bd-tok{text-align:left}
.bd-tok a{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;min-width:0}
.bd-tok img,.bd-tok .ph{width:28px;height:28px;border-radius:9px;flex:0 0 auto;object-fit:cover;
  background:var(--surface-2);border:1px solid var(--line)}
.bd-tok .ph{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;
  color:var(--text-3)}
.bd-tok .nm{min-width:0}
.bd-tok b{display:block;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:190px}
.bd-tok span{display:block;font-size:10.5px;color:var(--text-3);font-weight:700}
.bd-tok a:hover b{color:var(--ice)}
/* The curve column is a bar, not a number: the question is "how close", and a
   bar answers it without anybody reading a percentage. */
.bd-curve{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.bd-curve i{display:block;width:64px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.09);overflow:hidden;flex:0 0 auto}
.bd-curve i b{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--ice))}
.bd-curve em{font-style:normal;font-size:11px;color:var(--text-3);font-weight:800}
.bd-grad{font-size:10px;font-weight:900;letter-spacing:.6px;color:#FF7ECB;
  border:1px solid rgba(255,126,203,.4);border-radius:99px;padding:2px 7px}
.bd-cr{font-size:11.5px;color:var(--text-3)}
.bd-cr a{color:var(--text-2);text-decoration:none;font-weight:700}
.bd-cr a:hover{color:var(--text)}
.bd-cr em{font-style:normal;display:block;font-size:10px;color:var(--text-3)}

.mx-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:20px 22px;margin-top:16px}
.mx-n{font-size:clamp(34px,7vw,52px);font-weight:900;letter-spacing:-1.6px;line-height:1;
  font-variant-numeric:tabular-nums}
.mx-c{font-size:15px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums}
.mx-facts{display:flex;gap:26px;flex-wrap:wrap}
@media (max-width:560px){.mx-facts{gap:18px}}

/* --- the launch form, grouped ------------------------------------------- */
.lf-step{display:flex;align-items:center;gap:9px;margin:22px 0 12px;
  font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}
.lf-step:first-child{margin-top:0}
.lf-step b{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:99px;background:rgba(2,165,245,.16);border:1px solid var(--line-2);
  color:var(--ice);font-size:11px;font-weight:900}
.lf-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;background:rgba(2,165,245,.06);
  padding:12px 14px}
.lf-sum-l b{display:block;font-size:14px;font-weight:800;color:var(--text)}
.lf-sum-l em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);margin-top:2px}
.lf-sum-b{font:800 12px/1 inherit;color:var(--ice);background:transparent;
  border:1px solid var(--line-2);border-radius:9px;padding:8px 13px;cursor:pointer;flex:0 0 auto}
.lf-sum-b:hover{background:rgba(2,165,245,.12)}
.lf-fold{margin-top:12px}
.lf-more{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lf-more>summary{list-style:none;cursor:pointer;padding:13px 15px;
  display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.02)}
.lf-more>summary::-webkit-details-marker{display:none}
.lf-more>summary>span{font-size:13.5px;font-weight:800;color:var(--text)}
.lf-more>summary>span::after{content:"  +";color:var(--text-3)}
.lf-more[open]>summary>span::after{content:"  -"}
.lf-more>summary>em{font-style:normal;font-size:11.5px;color:var(--text-3)}
.lf-more>summary:hover>span{color:var(--ice)}
.lf-more-b{padding:14px 15px 4px;border-top:1px solid var(--line)}

/* The launch page's hero is an argument; the form under it is the product.
   On a phone the argument was a screen and a half tall before anybody reached
   a field, so it gets shorter where the screen is small. */
@media (max-width:760px){
  .lp-page>.hero{padding:22px 20px !important}
  .lp-page>.hero h1{font-size:clamp(24px,7vw,32px)}
  .lp-page>.hero p{font-size:14px}
}

/* ---- M500: the index, in the brand cyan ----
   Ignited is gold, Launches is green, Graduated is pink. The index takes the
   brand's own cyan, which is the one strong colour in the palette none of the
   other rows are using, so five lit menu items still read as five different
   things rather than a gradient. */
.dr-m500 .lbl, .sn-m500 .lbl {
  background-image: linear-gradient(
    100deg,
    #7fe1ff 0%, #7fe1ff 30%,
    #eaf9ff 43%, #b7ecff 50%, #22c1ff 58%, #02a5f5 66%,
    #7fe1ff 78%, #7fe1ff 100%);
  animation-duration: 5.3s;
  filter: drop-shadow(0 0 7px rgba(2, 165, 245, .5));
}
.dr-m500:hover .lbl, .sn-m500:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(2, 165, 245, .8));
}
/* The dot at the end of the line travels the way a live tick does, and the line
   itself does not move: an index chart that wobbles is an index nobody trusts.
   transform and opacity only, so it stays on the compositor. */
.nav-index {
  display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto;
  color: #22c1ff;
  filter: drop-shadow(0 0 5px rgba(2, 165, 245, .55));
}
.nav-index svg { width: 100%; height: 100%; display: block; }
.nav-index-d { animation: ni-tick 2.6s ease-in-out infinite; transform-origin: 20.6px 3.6px; }
@keyframes ni-tick {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: .75; }
}

/* =====================================================================
   THE M500 METHOD LIST
   =====================================================================
   Six sentences explaining the index arithmetic. They used to be six .hob
   pills, which is the chip component from the profile pages: 99px radius,
   7px of padding, no leading. That component is sized for the word
   "fishing". Given a full sentence it produced a three line paragraph
   inside a capsule, six deep, with the capsules almost touching the card
   edge on a phone.

   A method note is a list, so this is a list. Dividers rather than a box
   per item, a marker that lines up with the first line at any width, and
   leading that lets a long sentence read as a sentence. */
.mth{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mth li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.65;color:var(--text-2);
}
.mth li:first-child{border-top:none;padding-top:2px}
.mth li:last-child{padding-bottom:2px}
/* The marker is a flex item, not a ::before on the text, so it cannot be
   dragged around by the first line's font metrics. Half the line box minus
   half its own height puts it on the middle of the first line and keeps it
   there when the sentence wraps to four. */
.mth li::before{
  content:"";flex:0 0 auto;
  width:7px;height:7px;margin-top:calc(.825em - 3.5px);
  background:var(--cyan);transform:rotate(45deg);border-radius:1.5px;
  box-shadow:0 0 8px rgba(2,165,245,.45);
}
/* THE SENTENCE IS ONE FLEX ITEM, WHICH IS WHY IT IS IN A SPAN.
   The li is the flex container. Written as "<li><b>Lead in.</b> rest of the
   sentence</li>" the bold run and the bare text after it become two separate
   flex items, so every entry laid out as two narrow columns: the lead-in
   stacked four words deep on the left and the rest of the sentence in a
   column beside it. It looked like a broken table. */
.mth li > span{min-width:0}
.mth b{color:var(--text);font-weight:800}
/* The card's own padding, opened up. 16px is right for a table and mean for
   a block of prose that runs to four lines on a 390px screen. */
.mth-card > .card-b{padding:6px 20px 16px}
@media (max-width:560px){
  .mth-card > .card-b{padding:4px 17px 14px}
  .mth li{font-size:14px;padding:13px 0;gap:11px}
}

/* =====================================================================
   BUY NOW, ON THE HOUSE COIN'S PROFILE
   =====================================================================
   Only $MEMESLY has this. It sits directly under the contract address,
   which is the moment somebody has decided they want the token and would
   otherwise copy the address and go looking for a market on their own.

   The button reuses .btn-buy from the header rather than inventing a
   second buy style, so the two places on the site that say "buy" look
   like the same object. The note under it is the sentence the removed
   launch banner used to carry: you sign it, we never hold keys. */
.pf-buy{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  /* .pf-head is a wrapping flex row, so without a basis this box shrinks to
     its two buttons and stops 70px short of the contract address block above
     it. Every other row in this header runs the full width of the column and
     this one has to as well, or it reads as a floating panel somebody dropped
     on the page. */
  flex:0 0 100%;width:100%;min-width:0;
  margin:16px 2px 2px;padding:14px 15px;
  background:linear-gradient(180deg,rgba(2,165,245,.07),rgba(2,165,245,.02));
  border:1px solid var(--line-2);border-radius:var(--r);
}
/* .btn-buy carries the look and nothing else: the header's copy gets its
   height, padding and radius from .nav-buy, and the drawer's from .drawer a.
   Dropped in here with neither, it renders as an inline gradient with the
   text against its edges. This is this button's version of that sizing. */
.pf-buy-go{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:99px;
  font-size:15px;font-weight:900;white-space:nowrap;text-decoration:none;
}
.pf-buy-alt{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
/* Its own line under the buttons at every width. Beside them it competed
   with the label on the thing it was explaining. */
.pf-buy-n{
  flex:1 0 100%;font-size:12.5px;line-height:1.55;color:var(--text-3);
}
@media (max-width:560px){
  .pf-buy{gap:10px;padding:13px 13px}
  /* Full width and stacked. Two 150px buttons side by side on a 390px
     screen read as two half buttons, and the real one should not be
     sharing a row with a link to somebody else's website. */
  .pf-buy-go,.pf-buy-alt{flex:1 0 100%;justify-content:center;text-align:center}
}

/* =====================================================================
   THE SIX ICONS THE MENU DID NOT HAVE
   =====================================================================
   Trophy, swords, pan, crown, pie, palette. Same box as the four that
   were already there, so every row's text starts at the same x whether
   its icon is a wide crown or a narrow flame.

   Colour follows the label, not the icon. A grey row with a coloured
   picture on it reads as a row that is half switched on. The four plain
   rows get plain icons and the two lit ones take their label's hue. */
.nav-cup, .nav-swords, .nav-pan, .nav-crown, .nav-pie, .nav-palette {
  display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto;
}
.nav-cup svg, .nav-swords svg, .nav-pan svg,
.nav-crown svg, .nav-pie svg, .nav-palette svg {
  width: 100%; height: 100%; display: block;
}

/* ---- the last four rows get their own colours ----
   These four were steel grey, icon and label both, on the reasoning that six
   lit rows need something to be lit against. Joe wanted them lit as well, so
   the menu is eleven rows in eleven hues and the thing they are lit against
   is each other.

   Which means the hues have to be chosen as a set rather than one at a time.
   Reading down: white, gold, mint, cyan, pink, LIME, violet, orange, ROYAL
   BLUE, CRIMSON, TEAL. Every neighbouring pair is far apart on the wheel, and
   the two that are closest, mint and cyan, were already neighbours before any
   of this. Gold is still only ever Ignited: it is the paid placement board and
   the one row somebody is paying to be on.

   Each icon takes a lighter tint of its label so it reads at 1em against the
   background rather than matching the label exactly and going muddy. */
.nav-cup     { color: #c7f45f; filter: drop-shadow(0 0 5px rgba(150, 220, 30, .5)); }
.nav-crown   { color: #8aa6ff; filter: drop-shadow(0 0 5px rgba(80, 120, 255, .5)); }
.nav-pie     { color: #ff8092; filter: drop-shadow(0 0 5px rgba(255, 70, 100, .5)); }
.nav-palette { color: #f866e2; filter: drop-shadow(0 0 5px rgba(224, 0, 196, .5)); }

/* ---- Leader Board: lime ----
   Between pink and violet in the running order, which is the one place on
   the list where a green is furthest from both its neighbours. Yellow green
   rather than the mint on Launches, and three rows away from it. */
.dr-leaderboard .lbl, .sn-leaderboard .lbl {
  background-image: linear-gradient(
    100deg,
    #b9f03f 0%, #b9f03f 30%,
    #f4ffd8 43%, #ddff8a 50%, #93d81e 58%, #6aa608 66%,
    #b9f03f 78%, #b9f03f 100%);
  animation-duration: 5.1s;
  filter: drop-shadow(0 0 7px rgba(150, 220, 30, .5));
}
.dr-leaderboard:hover .lbl, .sn-leaderboard:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(170, 240, 50, .85));
}

/* ---- Tokenomics: crimson ----
   The only warm red in the menu. It is not --bad: that colour means a price
   went down and it appears on every board on this site, so a menu row wearing
   it would read as a warning. */
.dr-tokenomics .lbl, .sn-tokenomics .lbl {
  background-image: linear-gradient(
    100deg,
    #ff6478 0%, #ff6478 30%,
    #ffe4e8 43%, #ffb0bc 50%, #ff3352 58%, #d8102f 66%,
    #ff6478 78%, #ff6478 100%);
  animation-duration: 6.1s;
  filter: drop-shadow(0 0 7px rgba(255, 70, 100, .5));
}
.dr-tokenomics:hover .lbl, .sn-tokenomics:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(255, 90, 120, .85));
}

/* ---- Design Services: magenta ----
   TEAL WAS TRIED FIRST AND IT DOES NOT FIT.
   Launches is mint at 155 degrees and M500 is cyan at 197, and a teal can
   only sit between them: closer to mint it is mint, closer to cyan it is
   cyan, and in the middle it is 22 units of Lab from mint, which is inside
   the range where two labels read as the same colour in different lighting.
   That corridor holds two greens and this is the third.
   Magenta instead, out where there is actually room: 36 from the pink on
   Graduated, 44 from the violet on Battle and 59 from the crimson directly
   above it. */
.dr-design .lbl, .sn-design .lbl {
  background-image: linear-gradient(
    100deg,
    #f03cd8 0%, #f03cd8 30%,
    #ffe0fa 43%, #ffa6f0 50%, #e100c4 58%, #a80092 66%,
    #f03cd8 78%, #f03cd8 100%);
  animation-duration: 5.7s;
  filter: drop-shadow(0 0 7px rgba(224, 0, 196, .5));
}
.dr-design:hover .lbl, .sn-design:hover .lbl {
  filter: drop-shadow(0 0 11px rgba(240, 60, 216, .85));
}

/* ---- Battle: violet, and the blades move ----
   Two degrees each, opposed, on a slow ease. Enough that the pair reads as
   two objects rather than one X, and small enough that a menu with a fight
   in it is not a menu you have to look away from. */
.nav-swords {
  color: #b78cf5;
  filter: drop-shadow(0 0 5px rgba(154, 78, 255, .5));
}
.nav-swords-a { transform-origin: 12px 12px; animation: nw-clash 4.2s ease-in-out infinite; }
.nav-swords-b { transform-origin: 12px 12px; animation: nw-clash 4.2s ease-in-out infinite reverse; }
@keyframes nw-clash {
  0%, 100% { transform: rotate(-2.4deg); }
  50%      { transform: rotate(2.4deg); }
}
/* .nav-swords-b is the INNER group. Its parent carries scale(-1,1) and is
   never animated, because a CSS transform replaces the transform attribute
   instead of composing with it: animating the mirrored group directly drops
   the mirror on frame one and puts both swords on top of each other pointing
   the same way. See SWORDS_SVG in build.py. */

/* ---- Cooking: the pan is warm and the steam rises ---- */
.nav-pan {
  color: #ff8a45;
  filter: drop-shadow(0 0 5px rgba(255, 100, 20, .55));
}
.nav-pan-s1 { animation: np-steam 2.9s ease-in-out infinite; }
.nav-pan-s2 { animation: np-steam 2.9s ease-in-out .8s infinite; }
@keyframes np-steam {
  0%, 100% { transform: translateY(.6px); opacity: .45; }
  50%      { transform: translateY(-.8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Safe to null the transform on both: the mirror lives on the parent of
     .nav-swords-b, not on it. */
  .nav-swords-a, .nav-swords-b,
  .nav-pan-s1, .nav-pan-s2 { animation: none; transform: none; opacity: 1; }
}

/* =====================================================================
   ONE BOX FOR ALL ELEVEN MENU ICONS
   =====================================================================
   Ten of these were 15px and the flame was 1em, which is 17px in the
   sidebar and 18.5px in the drawer. Two pixels on one row does not sound
   like anything, and it is not, until you look down the column: every
   label lined up except Ignited's, which started 2px further right in one
   menu and 4px in the other. Ragged for no reason anybody could see.

   The flame's rule was the one that was right. It is sized in em precisely
   because it lives in two menus at two different font sizes, and a 15px
   drawing beside 18.5px text reads as a stray glyph. So all eleven are em
   now and the labels line up in both menus at both sizes.

   This is the ONLY place the box is set. Each icon's own rule keeps its
   colour, its glow and its animation and says nothing about size. Being
   last in the file, this wins on equal specificity. */
.nav-fire, .nav-rocket, .nav-index, .nav-cap, .nav-spark,
.nav-cup, .nav-swords, .nav-pan, .nav-crown, .nav-pie, .nav-palette {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 1em; height: 1em; line-height: 1;
}
.nav-fire svg, .nav-rocket svg, .nav-index svg, .nav-cap svg, .nav-spark svg,
.nav-cup svg, .nav-swords svg, .nav-pan svg, .nav-crown svg,
.nav-pie svg, .nav-palette svg { width: 100%; height: 100%; display: block; }

/* THE ROCKET'S EXHAUST WAS SCALING ABOUT THE CORNER OF THE ICON.
   nr-burn animates scaleY between .8 and 1.25 and nothing set an origin, so
   it defaulted to 0,0: the top left of the viewBox, nine units above the
   flame. At .8 the flame slid up inside the rocket's body and at 1.25 it slid
   down past y=24 and was clipped away entirely. It was not flickering, it was
   sliding in and out of the picture, four times a second, at 15px, where
   nobody was ever going to see what it was actually doing.

   12 18.4 is where the flame meets the nozzle, which is the point a flame is
   attached to anything. */
.nav-rocket-fl { transform-origin: 12px 18.4px; }

/* =====================================================================
   THE FEE CLAIM PAGE
   =====================================================================
   Internal, unlisted, and the only page on this site whose entire job is
   moving money that already belongs to us. It is deliberately plain: a
   summary, one button, and a line per transaction as it happens. */
.cl-sum{display:flex;flex-direction:column;gap:0;margin-bottom:12px}
.cl-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-2)}
.cl-row:first-child{border-top:none}
.cl-row b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.cl-note{margin-bottom:14px;line-height:1.6}
.cl-act{display:flex;flex-wrap:wrap;gap:10px}
.cl-act .btn{flex:0 0 auto}
/* A running log rather than a spinner. Twelve transactions signed one at a
   time is a minute of somebody's life and they should be able to see which
   one they are on and what has already worked. */
.cl-log{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.cl-line{font-size:13px;line-height:1.55;padding:8px 11px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);
  word-break:break-word}
.cl-line.good{color:var(--ok);border-color:rgba(0,229,160,.3)}
.cl-line.bad{color:var(--bad);border-color:rgba(255,77,109,.3)}
.cl-line.muted{color:var(--text-3);opacity:.85}
@media (max-width:560px){
  .cl-act .btn{flex:1 0 100%;justify-content:center;text-align:center}
}
/* =====================================================================
   RECOVERED FROM THE DEPLOYED BUILD
   ---------------------------------------------------------------------
   Everything below this line was written in an earlier session, shipped,
   and then lost when this working tree rolled back to a morning snapshot.
   It was read back off the live site rather than rewritten from memory,
   so it is exactly what memesly.io is serving.

   It comes back without its original indentation, because the only channel
   available for reading it flattened leading whitespace. The rules and the
   comments are intact and CSS does not care, so it is left as recovered
   rather than re-indented by guesswork, which would risk changing a
   selector while trying to make it prettier.
   ===================================================================== */

/* ===============================================================
ROADMAP
---------------------------------------------------------------
A roadmap is the page most likely to be quietly lying, because
updating it is nobody's job. So the marks here mean three
different things and have to be told apart WITHOUT colour: about
one reader in twelve cannot separate the green from the grey, and
a page whose only signal is hue says nothing at all to them.

done     a filled disc with a tick punched out of it
watching a ring with a dot in it, pulsing, the same signal the
         live ticker uses
queued   an empty ring

Different shapes first, colour second.
=============================================================== */
.rm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rm-i{
display:flex;align-items:flex-start;gap:11px;
padding:9px 10px;border-radius:10px;
font-size:14px;line-height:1.55;color:var(--text-2);
transition:background .16s,color .16s;
}
.rm-i:hover{background:var(--surface-2)}
/* min-width:0 or a long line with no spaces in it pushes the mark off the
card. Same lesson as the CA row and the M500 method list. */
.rm-t{min-width:0}
.rm-ic{
flex:0 0 auto;width:18px;height:18px;position:relative;
margin-top:1px; /* optical, against a 1.55 line box */
}
.rm-mark{display:block;position:absolute;inset:0;color:var(--text-3)}
.rm-mark svg{width:18px;height:18px;display:block}

/* Ships with both marks in the DOM so a live item can flip without a repaint
of the list and without a flash of a tick that then vanishes. Which one is
visible is a class on the row, never a rewrite of the element. */
.rm-i .rm-done{display:none}
.rm-i .rm-wait{display:block}
.rm-i.rm-live .rm-wait{display:block}
.rm-i.on .rm-done{display:block}
.rm-i.on .rm-wait,.rm-i.on .rm-watch{display:none}

.rm-i.on{color:var(--text)}
.rm-i.on .rm-done{color:var(--ok)}
/* Struck through was tried and rejected: a finished milestone is the part of
the page worth reading, and striking it out is the typographic way of
saying "ignore this". Brighter, not crossed out. */
.rm-i.on .rm-t{font-weight:600}

.rm-i.rm-live{color:var(--text-2)}
.rm-i.rm-live .rm-watch{display:block;color:var(--ice)}
.rm-i.rm-live.on .rm-watch{display:none}
.rm-i.rm-live .rm-watch circle:last-child{animation:blip 1.9s infinite}
/* The feed is unreachable, so the ring stops pretending to watch anything.
A pulsing dot that is not connected to anything is the exact kind of
decoration-as-evidence this page argues against. */
.rm-i.rm-quiet .rm-watch{color:var(--text-3)}
.rm-i.rm-quiet .rm-watch circle:last-child{animation:none}

.rm-phase{margin-bottom:16px}
.rm-phase .card-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rm-h{flex:1 1 auto;min-width:0}
.rm-badge{
display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;
background:rgba(255,200,70,.14);border:1px solid rgba(255,200,70,.4);
color:var(--gold);padding:3px 9px;border-radius:99px;
}
.rm-badge.doing{background:rgba(2,165,245,.13);border-color:rgba(2,165,245,.42);color:var(--ice)}
.rm-badge.done{background:rgba(0,229,160,.14);border-color:rgba(0,229,160,.4);color:var(--ok)}
.rm-count{
font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--text-3);
font-variant-numeric:tabular-nums;
}

/* the summary card */
.rm-sum{margin-bottom:18px}
.rm-sum-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.rm-sum-n{font-size:15px;font-weight:700;color:var(--text-2)}
.rm-sum-n b{font-size:34px;font-weight:900;letter-spacing:-1.2px;color:#fff;
font-variant-numeric:tabular-nums;margin-right:6px}
.rm-sum-n2{font-size:26px;font-weight:900;color:var(--ice);
font-variant-numeric:tabular-nums;text-align:right}
.rm-sum-r{text-align:right}
.rm-l{font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
color:var(--text-3);margin-top:4px}
.rm-bar{
height:10px;border-radius:99px;background:var(--surface-3);
border:1px solid var(--line);overflow:hidden;margin:16px 0 12px;
}
.rm-bar-f{
display:block;height:100%;border-radius:99px;min-width:8px;
background:linear-gradient(90deg,var(--ok),var(--cyan));
box-shadow:0 0 14px rgba(0,229,160,.42);
transition:width .8s cubic-bezier(.22,1,.36,1);
}
@media (max-width:560px){
.rm-sum-top{flex-direction:column;align-items:flex-start;gap:12px}
.rm-sum-r,.rm-sum-n2{text-align:left}
.rm-i{font-size:13.5px;padding:8px 4px;gap:10px}
.rm-phase .card-h{gap:8px}
/* The count is the first thing worth dropping on a narrow header: the badge
already says where the phase stands. */
.rm-count{width:100%;order:3}
}

/* ===============================================================
THE FIVE QUIET MENU ROWS
---------------------------------------------------------------
Battle, Cooking, Top 100 Memes, Tokenomics and Design Services,
in one light tone instead of five colours.

MUST BE LAST. Tokenomics and Design set their own background-image
about two hundred lines above this, further down the file than the
block that parks the animation, so a rule of equal specificity has
to come after BOTH of them to take. There is nothing clever here:
it is the same five selectors written once more, at the end, and
the only thing keeping it working is its position in the file.

Written as a two stop gradient of the same colour rather than as a
plain `color`, because the shared rule above clips the background
to the glyphs and sets the text fill transparent. A flat colour
would paint nothing at all. It also keeps _check_menu_gradients
satisfied: these keys still have a background-image and are still
in the clip list, which is the pair that guard exists to enforce.
=============================================================== */
.dr-top100 .lbl, .sn-top100 .lbl,
.dr-cooking .lbl, .sn-cooking .lbl,
.dr-chains .lbl, .sn-chains .lbl,
.dr-tokenomics .lbl, .sn-tokenomics .lbl,
.dr-design .lbl, .sn-design .lbl {
background-image: linear-gradient(var(--menu-quiet), var(--menu-quiet));
filter: drop-shadow(0 0 6px var(--menu-quiet-glow));
}
/* The hover glows were the row colour too, so without these five the rows sat
light until you pointed at one and it flashed violet, orange or magenta. */
.dr-top100:hover .lbl, .sn-top100:hover .lbl,
.dr-cooking:hover .lbl, .sn-cooking:hover .lbl,
.dr-chains:hover .lbl, .sn-chains:hover .lbl,
.dr-tokenomics:hover .lbl, .sn-tokenomics:hover .lbl,
.dr-design:hover .lbl, .sn-design:hover .lbl {
filter: drop-shadow(0 0 11px var(--menu-quiet-glow-hi));
}
/* And the marks beside them. A light label next to a magenta palette is the
change half done: the row is an icon and a word, and the eye takes the
silhouette and its colour together. */
.nav-crown, .nav-pie, .nav-palette, .nav-swords, .nav-pan {
color: var(--menu-quiet);
filter: drop-shadow(0 0 5px var(--menu-quiet-glow));
}

/* =====================================================================
HEADER: SEARCH LEFT, THREE ACTIONS RIGHT
---------------------------------------------------------------------
The bar was logo, a search field that grew to fill everything, then one
button. Launch came out of the sidebar and Connect arrived, so there are
three controls on the right now and the field cannot have all the slack
any more.

It does not just shrink, it MOVES. flex:1 made the field grow from the
logo across to the buttons, so with three of them it would have ended up
a narrow strip pinned in the middle with dead air on both sides. A fixed
comfortable width with the slack after it puts the field beside the logo,
which is where a search field belongs and where it was asked to go.
===================================================================== */
.nav-search{
flex:0 1 400px; max-width:400px; margin-right:auto;
}

/* ---- Launch, in the bar ----
Same platinum and the same sparkle as the menu row it replaces, so the
treatment somebody learned on the left rail is the one they see here.
Sized off .nav-buy rather than off .launch-cta: it stands next to the Buy
pill and the two have to be the same object at a glance, differing in
colour and not in height, radius or padding. */
.nav-launch{
order:2;flex-shrink:0;height:36px;padding:0 15px;border-radius:99px;
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
font-size:14px;font-weight:900;letter-spacing:.01em;
background:var(--surface-2);border:1px solid rgba(214,232,255,.34);
transition:border-color .16s,box-shadow .16s,transform .16s;
}
.nav-launch:hover{
border-color:rgba(226,240,255,.7);
box-shadow:0 0 16px rgba(190,215,250,.28);
transform:translateY(-1px);
}
/* The label is the menu row's gradient, clipped to its glyphs, still
sweeping. Written out here rather than added to the shared .dr-/.sn- list
because this is not a menu row and the build guard that polices that list
would then expect a nav-launch row in MENU_ORDER. */
.nav-launch .lbl{
background-image:linear-gradient(100deg,
#cfd6de 0%, #cfd6de 28%,
#ffffff 42%, #ffffff 50%, #e3e9f0 57%, #a8b0ba 66%,
#cfd6de 78%, #cfd6de 100%);
background-size:220% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;text-fill-color:transparent;
animation:ms-shimmer 4.9s linear infinite;
}
.nav-launch .nav-spark{color:#e8eef7;filter:drop-shadow(0 0 6px rgba(214,232,255,.55))}

/* ---- Connect ---- */
.nav-wallet{order:4;position:relative;flex-shrink:0}
/* The burger was order:3, from when Buy was the only other thing in here. It
has to be last or it lands between Buy and Connect, which is where it was
sitting at every width under 900px. */
.nav-actions .burger{order:9}
.nav-conn{
height:36px;padding:0 14px;border-radius:99px;
display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
font-size:14px;font-weight:800;color:var(--text);
background:var(--surface-2);border:1px solid var(--line-2);
transition:.16s;
}
.nav-conn:hover{border-color:var(--cyan);background:var(--surface-3)}
.nav-wal{display:inline-flex;width:16px;height:16px;flex:0 0 auto;color:var(--ice)}
.nav-wal svg{width:100%;height:100%;display:block}
/* Connected is a state, so it gets a colour, and it is the ONE green in the
header. Amber in between, because connected-but-not-signed-in is a real
third state and the sign in step is the one people miss. */
.nav-wallet.is-on .nav-conn{border-color:rgba(255,200,70,.45);background:rgba(255,200,70,.09)}
.nav-wallet.is-on .nav-wal{color:var(--gold)}
.nav-wallet.is-ready .nav-conn{border-color:rgba(0,229,160,.45);background:rgba(0,229,160,.09)}
.nav-wallet.is-ready .nav-wal{color:var(--ok)}
.nav-conn .lbl{font-variant-numeric:tabular-nums}
.nav-conn[disabled]{opacity:.6}

.nav-wmenu{
position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:216px;
background:#04070E;border:1px solid var(--line-2);border-radius:14px;
box-shadow:0 22px 50px rgba(0,0,0,.6);padding:6px;
}
.nav-wmenu[hidden]{display:none}
.nav-wmenu .wm-head{
padding:9px 11px 7px;font-size:11px;font-weight:800;letter-spacing:1px;
text-transform:uppercase;color:var(--text-3);
}
.nav-wmenu .wm-addr{
padding:0 11px 9px;font-size:13px;font-weight:700;color:var(--text);
/* An address has no spaces in it, so without this it decides the width of
the menu and the menu decides the width of the header. */
word-break:break-all;
}
.nav-wmenu button,.nav-wmenu a{
display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
border-radius:10px;font-size:13.5px;font-weight:700;color:var(--text-2);
text-align:left;transition:.14s;
}
.nav-wmenu button:hover,.nav-wmenu a:hover{background:var(--surface-2);color:var(--text)}
.nav-wmenu .wm-out:hover{color:var(--bad)}
.nav-wmenu .wm-sep{height:1px;background:var(--line);margin:5px 7px}

@media (max-width:1120px){
/* Buy goes first. Launch and Connect are the two that were just added and
the two that do something you cannot do from the drawer; Buy is one tap
away in the menu and is also the whole of the buy page. */
.nav-search{flex:0 1 300px;max-width:300px}
}
@media (max-width:900px){
/* The field is display:none from here down, so the actions need pushing. */
.nav-launch .lbl{display:none}
.nav-launch{padding:0 11px;gap:0}
}
@media (max-width:620px){
.nav-buy{display:none}
.nav-conn .lbl{display:none}
.nav-conn{padding:0 11px;gap:0}
}
@media (max-width:420px){
.nav-launch{display:none} /* the drawer still has it, first row */
}

/* =====================================================================
HEADER, SECOND PASS: BUY MOVES RIGHT AND CALMS DOWN
---------------------------------------------------------------------
Buy used to be the only control in the bar, so it was the loud one on
purpose: a full blue gradient slab with a halo and a travelling shine,
and everything else in the header was deliberately quieter than it.

With Launch and Connect beside it that reasoning inverts. Three pills in
a row where one is a lit slab does not read as "this one matters most",
it reads as two disabled buttons next to an enabled one. So Buy keeps
its blue and gives up the slab: same height, same radius, same border
weight as its neighbours, with a blue wash and a blue rim instead of a
gradient fill.

It also goes LAST. It is the only one of the three that is a place
rather than an action, and the rightmost slot before the menu is where
the eye lands after reading the other two.
===================================================================== */
.nav-actions .nav-buy{
order:5;
/* !important, because .btn-buy sets background and colour with it. Fighting
a rule with the same weapon is ugly and it is also the only thing that
works without unpicking .btn-buy, which the drawer still uses as it was. */
background:rgba(2,120,253,.14)!important;
color:var(--text)!important;
border:1px solid rgba(90,175,255,.55);
font-weight:800!important;
box-shadow:none;
height:36px;padding:0 15px;
}
.nav-actions .nav-buy:hover{
background:rgba(2,120,253,.24)!important;
border-color:rgba(120,200,255,.85);
box-shadow:0 0 16px rgba(2,140,255,.3);
transform:translateY(-1px);
}
/* The halo and the sweep were both pseudo elements on .btn-buy. Left running,
a calm pill would still have a band of light crossing it every four seconds,
which is the loudest thing about the old button and the part that no longer
fits. The drawer's copy keeps both. */
.nav-actions .nav-buy::before,
.nav-actions .nav-buy::after{content:none}

/* ---- and the field gets the room back ----
400px was sized for a bar with one button in it. The actions are all pinned
right by their own margin, so the field can take everything up to a
comfortable reading width without pushing anything: past about 640px a
single line input stops looking like a field and starts looking like a gap
with a border. */
.nav-search{
flex:1 1 auto; max-width:640px; margin-right:auto;
}
@media (max-width:1240px){ .nav-search{max-width:440px} }
@media (max-width:1060px){ .nav-search{max-width:320px} }

/* "Open app" is a different promise from "Get it": one leaves the browser for
an app you already have, the other goes to a download page. Same row, so the
colour is the only thing that can say which. */
.wp-s.wp-app{color:var(--ok)}

/* ---- Roadmap: the quiet group's colour ----
   Sits between Tokenomics and Design Services, which are both part of the five
   rows that share one light tone, so it takes that tone rather than inventing
   a twelfth hue for a menu that already had too many.

   Written as its own self contained rule rather than added to the shared clip
   list: background-image and background-clip in the same block is one of the
   two shapes _check_menu_gradients accepts, and keeping them together means the
   pair cannot be separated by an edit somewhere else in the file. */
.dr-roadmap .lbl, .sn-roadmap .lbl{
background-image:linear-gradient(var(--menu-quiet,#D6E2F0),var(--menu-quiet,#D6E2F0));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;
filter:drop-shadow(0 0 6px var(--menu-quiet-glow,rgba(186,212,245,.34)));
animation:none;
}
.dr-roadmap:hover .lbl, .sn-roadmap:hover .lbl{
filter:drop-shadow(0 0 11px var(--menu-quiet-glow-hi,rgba(214,232,255,.72)));
}
.nav-route{
width:1em;height:1em;color:var(--menu-quiet,#D6E2F0);
filter:drop-shadow(0 0 5px var(--menu-quiet-glow,rgba(186,212,245,.34)));
}
.nav-route svg{width:100%;height:100%;display:block}

/* =====================================================================
   LAUNCH ALERTS AND THE BOOSTED STRIP
   ---------------------------------------------------------------------
   Two features, one colour rule: --bt is whatever tier a boost earned,
   and it is the same three values here, on the Ignited board and on a
   token page. A gold edge has to mean Inferno everywhere or it means
   nothing anywhere.
   ===================================================================== */

/* ---- a real launch, in the corner the parody notices already use ----
   .note carries the shape, position and exit animation. These rules are
   only what makes a real event look different from an invented one. */
.note-launch{border-color:var(--line-2)}
.note-launch b{color:var(--text)}
.note-ph,.tb-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:9.5px;font-weight:900;letter-spacing:.02em;
  background:var(--surface-3);color:var(--text-2);
}
/* Boosted, in the colour the boost bought. A left edge rather than a full
   tint: the notice still has to be readable, and four lines of gold-on-dark
   at 13px is not. */
.note-boost{
  border-color:color-mix(in srgb, var(--nb) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--nb) 22%, transparent),
             0 14px 34px rgba(0,0,0,.5),
             -3px 0 0 0 var(--nb);
}
/* color-mix is not everywhere yet. Without a fallback the whole declaration
   is dropped and a boosted notice looks exactly like an ordinary one, which
   is the one thing it must not do. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .note-boost{border-color:var(--nb);box-shadow:-3px 0 0 0 var(--nb),0 14px 34px rgba(0,0,0,.5)}
}
.note-tag{
  display:inline-block;margin-left:7px;font-style:normal;
  font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nb);
}

/* ---- top five, under the hero ---- */
.tb{margin:18px 0 4px}
.tb[hidden]{display:none}
.tb-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tb-fire{display:inline-flex;width:15px;height:15px;color:var(--gold)}
.tb-fire svg{width:100%;height:100%;display:block}
.tb-t{
  font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);
}
.tb-all{
  margin-left:auto;font-size:12px;font-weight:800;color:var(--text-3);
  transition:color .16s;
}
.tb-all:hover{color:var(--ice)}

/* Scrolls rather than wraps. Five cards wrapping to a second line on a phone
   pushes the launches board below the fold, and this is a strip, not a grid. */
.tb-row{
  display:flex;gap:10px;overflow-x:auto;
  /* PADDING, NOT DECORATION. overflow-x:auto is not a one axis instruction:
     the moment one axis is not `visible` the other computes to auto too, so
     this box clips vertically as well. The avatar's 2px boost ring and the
     hover glow both sit OUTSIDE the pill's border box, so with only 4px of
     bottom padding the top of every ring was sliced off and the pills looked
     cropped. The room has to be inside the scroller; nothing outside it can
     give the shadow anywhere to go.

     The negative margins hand the space back to the layout, so the strip
     still sits where it did rather than pushing the page down 20px. */
  padding:11px 2px 13px;margin:-11px 0 -9px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tb-row::-webkit-scrollbar{display:none}
.tb-c{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:8px 13px 8px 8px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--line);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.tb-c:hover{
  border-color:var(--bt);
  box-shadow:0 0 12px color-mix(in srgb, var(--bt) 30%, transparent);
  transform:translateY(-1px);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tb-c:hover{box-shadow:0 0 12px rgba(255,200,70,.3)}
}
.tb-av{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:var(--surface-3);
  /* The ring is the boost. It is the only thing on this card that says which
     tier paid for it, so it is on the avatar and not on the border, where it
     would compete with the hover state. */
  box-shadow:0 0 0 2px var(--bt);
}
.tb-av img{width:100%;height:100%;object-fit:cover;display:block}
.tb-n{
  font-size:13.5px;font-weight:800;color:var(--text);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tb-s{
  font-size:11.5px;font-weight:900;color:var(--bt);
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .tb-n{max-width:96px}
  .tb-c{padding:7px 11px 7px 7px}
}

/* ======================= DEV'S PROJECTS ==============================
   The homepage showcase. Two cards, and both of them carry the Ignited
   badge that the rest of the site sells, so the badge has to say the
   same thing here that it says on the board: these two are ours and
   neither was paid for. A showcase that quietly wears a paid badge it
   did not pay for is the exact thing the Ignited board exists not to be.

   The market cap in each card is the site's own .ticker component with
   a single tile in it, rather than a number baked into the build. A
   hardcoded market cap on a homepage is wrong within the hour and stays
   wrong until somebody rebuilds.
   ==================================================================== */
.dp{margin:38px 0 30px}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}

.dp-card{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.dp-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--glow-sm)}

.dp-av{
  width:54px;height:54px;flex:0 0 54px;border-radius:14px;overflow:hidden;
  border:2px solid var(--line-2);background:var(--surface-3);
}
.dp-av img{width:100%;height:100%;object-fit:cover;display:block}

.dp-t{min-width:0;flex:1}
.dp-n{
  font-weight:900;font-size:16px;letter-spacing:-.3px;color:#fff;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.dp-s{font-size:11.5px;font-weight:700;color:var(--text-3);margin-top:1px}
.dp-d{font-size:13px;line-height:1.6;color:var(--text-2);margin-top:9px}

/* The badge is the Inferno tier's own color, on purpose. Somebody who has
   seen the Ignited page recognises it, which is the point: same tier,
   same look, and the card says out loud that this one was not bought. */
.dp-badge{
  font-size:9.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);border-radius:999px;
  padding:2px 8px;line-height:1.5;white-space:nowrap;
}

/* One tile, so it must not stretch to the full auto-fit grid width. */
.dp-mc{margin-top:12px;grid-template-columns:1fr;max-width:170px}
.dp-mc .tk{padding:9px 12px}
.dp-mc .tk .v{font-size:15px}

@media (max-width:520px){
  .dp-card{padding:14px;gap:12px}
  .dp-av{width:46px;height:46px;flex:0 0 46px}
  .dp-mc{max-width:none}
}


/* ======================= PATCH 2 ===================================== */

/* --- Profile socials: the icon is the label ---------------------------
   The markup already carries a branded <i> with an SVG in it, followed by
   a bare text node. font-size:0 collapses the text without touching the
   DOM, so this applies to every profile that exists and every one built
   later, and the text stays in the accessibility tree where a screen
   reader still reads it. Hiding it visually is not the same as deleting
   it, and an icon row with no accessible names is a row of mysteries. */
.pf-socials .soc{font-size:0;line-height:0;gap:0;padding:0;border:0;background:none;
  box-shadow:none;width:auto;min-width:0}
/* grid + place-items is the centering, and it does not care how tall the
   glyph inside happens to be. The old pill centered the icon against the
   text baseline, which is why a row of different icons sat at different
   heights. */
.pf-socials .soc i{font-size:0;line-height:0;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease}
.pf-socials .soc i svg{width:17px;height:17px;display:block}
.pf-socials .soc:hover i{transform:translateY(-1px);box-shadow:var(--glow-sm)}
.pf-socials{gap:9px;flex-wrap:wrap}

/* --- One row of four, for a stat block that has four things in it ---- */
.ticker.tk4{grid-template-columns:repeat(4,1fr)}
@media (max-width:720px){ .ticker.tk4{grid-template-columns:repeat(2,1fr)} }

/* --- Dev's projects intro ------------------------------------------- */
.dp-intro{font-size:13.5px;line-height:1.7;color:var(--text-2);margin:10px 0 18px;max-width:none}

/* --- Mobile search ---------------------------------------------------
   It used to be display:none below the breakpoint, so the one control
   people reach for on a site with two hundred tokens on it was the one
   control missing on the device most of them are holding. It comes back
   as an icon and opens to a full width field, and initNavSearchMobile
   moves the node next to Launch so the two live together. */
@media (max-width:900px){
  .nav-search{
    display:flex!important;align-items:center;justify-content:center;
    width:38px;min-width:38px;max-width:38px;height:38px;padding:0;
    border-radius:50%;overflow:hidden;flex:0 0 38px;
    transition:max-width .22s ease,width .22s ease,border-radius .22s ease;
  }
  .nav-search svg{position:static!important;left:auto!important;top:auto!important;opacity:.85}
  .nav-search input{display:none}

  .nav-search.ns-open{
    position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);
    width:auto;max-width:none;min-width:0;height:40px;border-radius:12px;
    padding:0 12px;justify-content:flex-start;gap:9px;z-index:60;
    background:var(--surface-2);border:1px solid var(--line-2);
  }
  .nav-search.ns-open input{display:block;flex:1;min-width:0;background:none;border:0;outline:none}
}


/* ======================= PATCH 3 ===================================== */

/* Price and 24h change on the Ignited strip cards. :empty collapses them
   when a mint has no market, so a card with nothing to say takes up no
   room rather than holding a gap where a number should be. */
.tb-c .tb-px{
  font-size:11.5px;font-weight:800;color:var(--text-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.2px;
}
.tb-c .tb-ch{
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:-.2px;
}
.tb-c .tb-ch.up{color:var(--ok)}
.tb-c .tb-ch.dn{color:var(--bad)}
.tb-c .tb-ch.flat{color:var(--text-3)}
.tb-c .tb-px:empty,.tb-c .tb-ch:empty{display:none}

/* The pill grew by two numbers, so it needs to be allowed to breathe and
   the row needs to cope on a phone rather than pushing the page sideways. */
.tb-c{gap:8px;flex-wrap:nowrap}
.tb-row{flex-wrap:wrap;row-gap:9px}

@media (max-width:680px){
  /* The direction matters more than the exact price when there is no room
     for both, so the price is what goes. */
  .tb-c .tb-px{display:none}
}

/* --- Whose market cap is that -----------------------------------------
   "Road to $1B" leads with a big number and never says which token it
   belongs to. The coin's own mark answers that in the space it already
   had. Done as ::before rather than an <img> in the markup on purpose:
   the number itself is written by script on every refresh, and anything
   living inside that element would be wiped on the first update. */
.rd-now{display:flex;align-items:center;gap:13px}
.rd-now::before{
  content:"";flex:none;width:38px;height:38px;border-radius:50%;
  background:url(/assets/img/logos/memesly.png) center/cover no-repeat;
  border:2px solid var(--line-2);
  box-shadow:0 0 0 4px rgba(2,165,245,.07);
}
@media (max-width:560px){
  .rd-now{gap:10px}
  .rd-now::before{width:30px;height:30px}
}

/* Falling strip removed on request. The script takes the node out; this
   is the belt to that braces, for any page painted before it runs. */
.lt-strip.lt-dn{display:none}

/* Dev projects: the section becomes a panel. dp-panel is a marker for
   the installer, not a class anyone applies. Gold in the wash because
   both cards carry the Inferno badge and the tint should agree. */
.dp{position:relative;overflow:hidden;margin:38px 0 34px;padding:26px 26px 28px;
  border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--shadow);
  background:radial-gradient(700px 280px at 10% 0%,rgba(0,112,253,.17),transparent 62%),
    radial-gradient(560px 280px at 94% 104%,rgba(255,200,70,.10),transparent 62%),
    linear-gradient(160deg,#070D18,#03070E)}
.dp::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--gold) 46%,transparent 88%)}
.dp .sec-head{margin-bottom:14px}
.dp .dp-card{background:linear-gradient(170deg,rgba(20,30,46,.92),rgba(7,12,21,.94));
  border-color:var(--line-2);backdrop-filter:blur(2px)}
@media (max-width:640px){.dp{padding:18px 16px 20px;border-radius:var(--r-lg)}}

/* ---------------------------------------------------------------
   PROFILE INTERACTIONS
   States for the three things on a profile that became clickable:
   a tip button that answers back, a heart you can add exactly one
   of, and a locked post that actually opens when you subscribe.
   --------------------------------------------------------------- */
.pf-act .btn.tipped{transform:scale(.94);transition:transform .12s ease}
.pf-act .btn[data-tip]{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.pf-counts span[role=button]{border-radius:8px;padding:2px 6px;margin:-2px -2px;transition:background .15s ease,color .15s ease}
.pf-counts span[role=button]:hover{background:rgba(255,255,255,.07)}
.pf-counts span[role=button]:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pf-counts span.liked{color:#ff4d6d}
.pf-counts span.liked b{color:#ff4d6d}
.lock-ov.open{background:transparent!important;backdrop-filter:none!important;pointer-events:none;
  animation:lockOpen .45s ease both}
.lock-ov.open .ic{filter:none;opacity:.9}
.lock-ov.open .s{opacity:.85}
@keyframes lockOpen{from{opacity:.35;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lock-ov.open{animation:none}
  .pf-act .btn[data-tip],.pf-act .btn.tipped{transition:none;transform:none}
}

/* ---------------------------------------------------------------
   THE PERMANENT TICKER
   Sits above the nav and stays there. The nav is already sticky at
   top:0, so it gets pushed down by exactly the ticker's height
   rather than the two fighting over the same pixel.
   --------------------------------------------------------------- */
:root{--mtick-h:34px}
.mtick{position:sticky;top:0;z-index:60;height:var(--mtick-h);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
/* Centred with auto margins rather than justify-content:center, because a
   centred flex row that overflows clips its own first item and the price
   would be the thing scrolled off screen on a narrow phone. Auto margins
   collapse to zero the moment it overflows, so it degrades to a normal
   scrollable row instead of hiding the left edge. */
.mtick-in{height:100%;display:flex;align-items:center;justify-content:center;gap:20px;padding:0 14px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.mtick-in::-webkit-scrollbar{display:none}
.mtick-b{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:12px;
  letter-spacing:.04em;color:var(--ice);white-space:nowrap;flex:0 0 auto}
.mtick-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex:0 0 auto}
.mtick.live .mtick-dot{background:var(--ok);box-shadow:0 0 10px var(--ok);animation:mtickPulse 2.4s ease-in-out infinite}
@keyframes mtickPulse{0%,100%{opacity:1}50%{opacity:.45}}
.mtick-c{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;flex:0 0 auto}
.mtick-c i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.mtick-c i .sm{display:none}
.mtick-c b{font-size:12.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mtick-c b.up{color:var(--ok)} .mtick-c b.dn{color:var(--bad)}
html.has-mtick .nav{top:var(--mtick-h)}
@media (max-width:900px){
  .mtick-in{gap:16px}
  .mtick-c[data-mt="liq"]{display:none}
}
@media (max-width:680px){
  :root{--mtick-h:32px}
  .mtick-in{gap:13px;padding:0 10px}
  .mtick-t{display:none}
  .mtick-c[data-mt="vol"]{display:none}
  .mtick-c i .lg{display:none}
  .mtick-c i .sm{display:inline}
  .mtick-c{gap:5px}
  .mtick-c i{font-size:9px;letter-spacing:.05em}
  .mtick-c b{font-size:12px}
}
@media (max-width:380px){
  .mtick-in{gap:10px}
  .mtick-c i{display:none}
}

/* ---------------------------------------------------------------
   BATTLE OF THE MEMES
   One row per token. Numbers are tabular so the column does not
   jitter every time the board refreshes underneath the reader.
   --------------------------------------------------------------- */
.meme-board{display:flex;flex-direction:column;gap:6px}
.mb-row{display:grid;grid-template-columns:30px 40px minmax(0,1.5fr) auto repeat(3,minmax(0,1fr)) 62px;
  align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid transparent;text-decoration:none;color:inherit;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.mb-row:hover{background:var(--surface-3);border-color:var(--line-2);transform:translateX(2px)}
.mb-i{font-size:12px;font-weight:800;color:var(--text-3);text-align:center;font-variant-numeric:tabular-nums}
.mb-av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--surface-3);
  display:grid;place-items:center;flex:0 0 auto}
.mb-av img{width:100%;height:100%;object-fit:cover}
.mb-av i{width:16px;height:16px;border-radius:50%;background:var(--line-2)}
.mb-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.mb-id b{font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-id span{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-soc{display:flex;gap:6px}
.mb-soc .soc{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  background:var(--surface-3);color:var(--text-2);text-decoration:none;transition:color .15s ease,background .15s ease}
.mb-soc .soc:hover{color:var(--ice);background:var(--surface)}
.mb-n{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right}
.mb-n i{font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.mb-n.up{color:var(--ok)} .mb-n.dn{color:var(--bad)}
.mb-heat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,200,70,.16),rgba(255,200,70,.05));border:1px solid rgba(255,200,70,.25)}
.mb-heat b{font-size:16px;font-weight:800;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.mb-heat i{font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,200,70,.7)}
.champ-in{display:flex;align-items:center;gap:16px}
.champ-av{width:60px;height:60px;border-radius:16px;overflow:hidden;background:var(--surface-3);flex:0 0 auto}
.champ-av img{width:100%;height:100%;object-fit:cover}
.champ-in>div{min-width:0;flex:1}
.champ-k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin-bottom:3px}
.champ-in b{font-size:19px;font-weight:800;color:var(--text)}
.champ-in b span{font-size:13px;color:var(--text-3);font-weight:600}
.champ-in p{margin:4px 0 0;font-size:12.5px;color:var(--text-2);line-height:1.45}
.champ-heat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:10px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,200,70,.18),rgba(255,200,70,.05));border:1px solid rgba(255,200,70,.3)}
.champ-heat b{font-size:28px;font-weight:800;color:var(--gold);line-height:1}
.champ-heat i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,200,70,.75)}
[data-meme-chains]{display:flex;flex-wrap:wrap;gap:8px}
[data-meme-chains] .chip{text-transform:capitalize}
@media (max-width:980px){
  .mb-row{grid-template-columns:26px 36px minmax(0,1fr) auto 56px;row-gap:8px}
  .mb-row .mb-n:nth-of-type(n+2){display:none}
  .mb-row .mb-n:first-of-type{display:flex}
}
@media (max-width:560px){
  .champ-in{flex-wrap:wrap}
  .mb-soc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mtick.live .mtick-dot{animation:none}
  .mb-row:hover{transform:none}
}
/* row is a div with a stretched hit-link, so social links can live
   inside it without the parser closing the row anchor early */
.mb-row{position:relative}
.mb-hit{position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.mb-hit:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.mb-soc{position:relative;z-index:2}