/* Liquid glass: the homepage and the shared shell.
 *
 * Loaded after styles.css, glass.css and chrome.css. One material throughout: a smoked body that
 * is a shade lighter than the void, a light-catching rim (bright where the studio light falls,
 * top left), a specular top edge and soft depth below. Silver carries the chrome; soda orange is a
 * sparse accent (the robot's neon, selection, one reflection); green and red only ever mean price change.
 * The hero robot itself is drawn by glass-hero.js. */
:root {
  --lg-void: #000000;
  --lg-graphite: #0b0b0c;
  --lg-text: #f3f3f4;
  --lg-muted: #9a9ca2;
  --lg-faint: #6d6f75;
  --lg-orange: #ff8200;
  --lg-orange-hi: #ffad42;
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lg-r-xl: 24px;
  --lg-r-lg: 18px;
  --lg-r-md: 12px;
  --lg-hairline: rgba(255, 255, 255, 0.065);
  /* The body of a glass surface. */
  --lg-fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.012) 42%,
      rgba(255, 255, 255, 0.004)
    ),
    #0a0a0b;
  /* Its rim: brightest where the light falls. Painted by a masked ::after. */
  --lg-rim: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.07) 22%,
    rgba(255, 255, 255, 0.04) 60%,
    rgba(255, 255, 255, 0.09)
  );
  --lg-rim-hover: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.11) 24%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.16)
  );
  --lg-depth: 0 1px 0 rgba(255, 255, 255, 0.025), 0 26px 50px -30px rgba(0, 0, 0, 0.95);
  /* A small glass chip: tabs, pills, secondary buttons. */
  --lg-chip: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  --lg-chip-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* One inner edge for the two full-width panels (the hero's copy and the launch studio), and one
     corner inset for the stat shelf docked in the hero's stage. */
  --panel-pad: clamp(28px, 3.2vw, 48px);
  --hero-inset: clamp(20px, 2vw, 28px);
  /* One h2 scale for every section head, the studio's included. */
  --lg-h2: clamp(24px, 2vw, 28px);
}
body {
  background: var(--lg-void);
}

/* ---------- Shared shell: sidebar, top bar, buttons, launcher ---------- */
.sidebar {
  background: linear-gradient(180deg, #0a0a0b 0%, #060607 55%, #040405 100%);
  border-right: 1px solid var(--lg-hairline);
}
.brand-row {
  border-bottom: 0;
}
.brand span {
  letter-spacing: -0.035em;
}
.new-chat {
  border-radius: 10px;
}
.new-chat:hover {
  background: rgba(255, 255, 255, 0.04);
}
.new-chat > .icon {
  border-radius: 8px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #d9dadd; /* silver at rest: the page keeps its orange for the primary and the lit states */
  transition: color 0.2s;
}
.new-chat:hover > .icon,
.new-chat:focus-visible > .icon {
  color: var(--lg-orange-hi);
}
.group-label {
  color: #74767c;
  font-size: 12.5px;
  font-weight: 500;
}
.nav-link {
  border-radius: 10px;
  color: #b7b9be;
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.nav-link > .icon {
  color: #8a8c92;
  transition: color 0.2s;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.nav-link:hover > .icon {
  color: #d6d7da;
}
.nav-link.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 16px -10px rgba(0, 0, 0, 0.9);
  color: #ffffff;
}
.nav-link.active > .icon {
  color: var(--lg-orange);
}
.nav-bottom {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.history-item {
  border-radius: 8px;
}
/* Signed out, the sidebar's Sign in is the glass secondary with a thin silver rim, like "Chat with
   Stonkinator": the brightest thing on the page stays the hero's orange launch. The inner pages'
   top-bar primaries keep the solid silver. */
.nav-bottom .button.connect-button {
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(214, 216, 222, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 24px -16px rgba(0, 0, 0, 0.9);
  color: #ececee;
  font-weight: 550;
}
.nav-bottom .button.connect-button:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(230, 232, 238, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 12px 26px -16px rgba(0, 0, 0, 0.95);
  color: #ffffff;
}
.nav-bottom .button.connect-button .icon {
  color: #a9abb1;
}
/* The collapsed rail's own expand control, under the logo; it points the way the rail opens. */
.rail-expand {
  display: none;
}
.sidebar.collapsed .rail-expand {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 2px auto 4px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8a8c92;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.sidebar.collapsed .rail-expand:hover,
.sidebar.collapsed .rail-expand:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.rail-expand .icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .sidebar.collapsed .rail-expand {
    display: none; /* the drawer is always the full sidebar */
  }
}
.topbar {
  background: rgba(2, 2, 3, 0.74);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--lg-hairline);
}
.breadcrumbs strong {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.search-box {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* The mark beside the name in the phone top bar on the homepage. */
.topbar-logo {
  display: none;
  width: 30px;
  height: 30px;
  margin-right: -4px;
  object-fit: contain;
}
.topbar .mobile-menu {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--lg-chip);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.button {
  /* One button shape across the site: a pill. */
  border-radius: 999px;
}
.button.primary,
.button.light {
  background: linear-gradient(180deg, #ffffff 0%, #e9eaec 48%, #c9cbcf 100%);
  border-color: rgba(255, 255, 255, 0.9);
  color: #0d0d0e;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 22px -12px rgba(255, 255, 255, 0.35);
}
.button.primary:hover:not(:disabled),
.button.light:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f5 50%, #d9dbde 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 10px 28px -12px rgba(255, 255, 255, 0.45);
}
.button.ghost {
  background: var(--lg-chip);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px -14px rgba(0, 0, 0, 0.9);
}
.button.ghost:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 130, 0, 0.5);
}
.floating-ask {
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)), rgba(14, 14, 15, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 40px -14px rgba(0, 0, 0, 0.95);
  transition:
    transform 0.45s var(--lg-ease),
    opacity 0.3s,
    visibility 0s,
    border-color 0.2s;
}
.floating-ask:hover,
.floating-ask:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), rgba(20, 20, 22, 0.8);
  border-color: rgba(255, 130, 0, 0.6);
}
.floating-ask > span {
  border-radius: 12px;
  background: rgba(16, 16, 18, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Homepage rhythm ---------- */
.overview-page {
  padding-top: 40px;
}
.overview-page > .section {
  margin-top: 64px;
}
.section-head {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}
.section-title {
  min-width: 0;
}
.section-head h2 {
  font-family: Sora, Inter, sans-serif;
  font-size: var(--lg-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #f5f5f6;
}
.section-note {
  margin-top: 6px;
  font-size: 13px;
  color: #85878d;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.view-all {
  flex-shrink: 0;
  gap: 7px;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #c9cacd;
  font-size: 12.5px;
  font-weight: 500;
  transition:
    color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}
.view-all:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.view-all .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.35s var(--lg-ease);
}
.view-all:hover .icon {
  transform: translateX(2px);
}
.section-head > .source-note {
  flex-shrink: 0;
  padding-bottom: 6px;
  font-size: 12px;
  color: #85878d;
}
.source-note .status-dot {
  background: #c9cbd0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}
.count-label {
  margin-top: 16px;
  font-size: 12px;
  color: #6f7177;
}
/* The page ends on the brand (left) and its links (right), flush with the content edges. The chat
   launcher steps aside while the footer is on screen (home-hero.js), so nothing pads around it. */
.page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 72px;
  /* Room below the links for the chat launcher, which always floats in the bottom-right corner. */
  padding: 26px 0 100px;
  border-top: 1px solid var(--lg-hairline);
  color: #6f7177;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: normal;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f1f1f2;
}
.footer-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.footer-brand > span {
  display: grid;
  gap: 2px;
}
.footer-brand strong {
  font-family: Sora, Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.footer-brand small {
  color: #6f7177;
  font-size: 11.5px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}
.page-footer a:not(.footer-brand) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a9ca2;
  transition: color 0.2s;
}
.page-footer a .icon {
  width: 12px;
  height: 12px;
}
.page-footer a:not(.footer-brand):hover {
  color: #ffffff;
}

/* Tabs: a glass track with one lit chip. */
.tabs {
  gap: 2px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tab {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #8f9197;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.tab.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 12px -4px rgba(0, 0, 0, 0.8);
  color: var(--lg-orange-hi);
}
.home-tokens > .tabs,
.home-rankings > .tabs {
  margin-bottom: 18px;
}

/* ---------- Glass cards: featured projects and token cards ---------- */
.featured-grid,
.token-grid {
  gap: 16px;
}
.project-card,
.token-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow: var(--lg-depth);
  transition:
    transform 0.5s var(--lg-ease),
    box-shadow 0.4s;
}
/* The rim. */
.project-card::after,
.token-card::after,
.launch-studio::after,
.launch-step::after,
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: var(--lg-rim);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* The light it catches: a soft glow under the pointer and one orange reflection on the top edge. */
.project-card::before,
.token-card::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(
      380px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255, 255, 255, 0.065),
      transparent 60%
    ),
    linear-gradient(90deg, transparent, rgba(255, 160, 60, 0.95), transparent) 50% 0 / 54% 1px no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s;
}
.project-card:hover,
.token-card:hover {
  background: var(--lg-fill);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03),
    0 34px 60px -30px rgba(0, 0, 0, 1);
}
.project-card:hover::before,
.token-card:hover::before {
  opacity: 1;
}
.project-card:hover::after,
.token-card:hover::after {
  background: var(--lg-rim-hover);
}
.project-body,
.token-card > * {
  position: relative;
  z-index: 3;
}
.token-card > .token-head,
.token-card > .quick-buy {
  z-index: 3;
}

/* Featured projects: each card is washed with its own token art, seen through the glass. */
.project-aura {
  position: absolute;
  z-index: 0;
  top: -70px;
  left: -60px;
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  filter: blur(46px) saturate(1.5);
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.5s;
}
.project-card:hover .project-aura {
  opacity: 0.32;
}
.project-body {
  padding: 22px;
}
.project-heading {
  gap: 14px;
}
.project-heading > .token-avatar {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 10px 24px -10px rgba(0, 0, 0, 0.9);
}
.project-heading h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.project-heading .ticker {
  font-size: 12.5px;
  color: #8d8f95;
}
.project-open {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #a2a4aa;
  transition:
    color 0.25s,
    transform 0.45s var(--lg-ease);
}
.project-open .icon {
  width: 14px;
  height: 14px;
}
.project-card:hover .project-open {
  color: #ffffff;
  transform: translate(1px, -1px);
}
.project-description {
  margin: 18px 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #9a9ca2;
  text-wrap: pretty;
}
.project-badges {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.project-badges .badge {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #d4d5d8;
  font-size: 11px;
  font-weight: 500;
}
.project-badges .change {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.change.positive {
  color: var(--positive);
}
.change.negative {
  color: var(--negative);
}
.project-badges .change.positive {
  background: rgba(96, 217, 160, 0.1);
}
.project-badges .change.negative {
  background: rgba(240, 120, 133, 0.1);
}
.project-stats {
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--lg-hairline);
}
.project-stats span {
  font-size: 11.5px;
  color: #7d7f85;
}
.project-stats strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #f4f4f5;
}

/* Token cards */
.token-card {
  padding: 18px;
}
.token-head {
  gap: 12px;
  margin-bottom: 18px;
}
.token-head .token-avatar {
  width: 42px;
  height: 42px;
  border: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 18px -8px rgba(0, 0, 0, 0.9);
}
.token-name strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.token-name small {
  font-size: 12px;
  color: #8d8f95;
}
.token-name small > span {
  font-size: 10.5px;
  color: #6d6f75;
}
.copy-token {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #8d8f95;
}
/* The 24h change sits in the header's right slot, beside the copy action, so the market cap and
   the volume below share one right edge. */
.token-head .change {
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.token-head .change.positive {
  background: rgba(96, 217, 160, 0.1);
}
.token-head .change.negative {
  background: rgba(240, 120, 133, 0.1);
}
.token-head .change + .copy-token {
  margin-left: 2px;
}
/* A coin well down from its all-time high, or traded far beyond its size: a warning in words, not colour alone. */
.trade-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.4);
  color: var(--lg-orange-hi);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trade-chip .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
/* On a featured card it sits between the badges and the numbers. */
.project-body > .trade-chip {
  margin: -6px 0 16px;
}
/* The same warning on a table or chat row: one short line under the ticker. */
.row-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 3px;
  color: var(--lg-orange-hi);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.row-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-chip .icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.copy-token:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.token-numbers {
  margin: 9px 0;
}
.token-numbers > span {
  font-size: 12.5px;
  color: #85878d;
}
.token-numbers strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #f4f4f5;
}
.token-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--lg-hairline);
  font-size: 11.5px;
  color: #7d7f85;
}
/* A card's pair and stage pills, left of its tax; they wrap rather than push the card wider. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.card-tags .coin-tag,
.card-tags .coin-stage {
  padding: 2px 8px;
  font-size: 10.5px;
}
.quick-buy {
  gap: 6px;
  margin-top: 16px;
}
.quick-buy button {
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #cfd0d3;
  font-size: 12px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  transition:
    color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}
.quick-buy button:hover:not(:disabled) {
  background: rgba(255, 130, 0, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.55),
    inset 0 1px 0 rgba(255, 190, 120, 0.15);
  border-color: transparent;
  color: var(--lg-orange-hi);
}
/* With a pointer, the grid's chips rest as rims only and come up when their card is hovered or
   holds focus: a showcase first, a trading tool on approach. Touch keeps them at full strength. */
@media (hover: hover) and (pointer: fine) {
  .token-grid .quick-buy button:not(:hover) {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
    color: #85878d;
  }
  .token-grid .token-card:hover .quick-buy button:not(:hover),
  .token-grid .token-card:focus-within .quick-buy button:not(:hover) {
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #cfd0d3;
  }
}

/* Metric and balance tiles on the other pages share the material (rim drawn inset). */
.metric-card,
.balance-card {
  border: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    var(--lg-depth);
}

/* ---------- Ranked table ---------- */
.data-table-wrap {
  border: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    var(--lg-depth);
}
.data-table thead {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.data-table th {
  border-color: var(--lg-hairline);
  color: #85878d;
  font-size: 12px;
  font-weight: 500;
}
.data-table th button {
  position: relative;
}
.data-table th button:hover {
  color: #ffffff;
}
/* The sorted column alone carries an arrow; the others offer a faint one on hover or focus. The
   arrow hangs into the cell's padding, so every label ends flush with the numbers beneath it. */
.data-table th .sort-glyph {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 4px;
  transform: translateY(-50%);
  color: var(--lg-orange-hi);
}
.data-table th .sort-glyph:empty::after {
  content: '↕';
  color: #85878d;
  opacity: 0;
  transition: opacity 0.2s;
}
.data-table th button:hover .sort-glyph:empty::after,
.data-table th button:focus-visible .sort-glyph:empty::after {
  opacity: 0.7;
}
.data-table td {
  border-color: rgba(255, 255, 255, 0.045);
  color: #e6e7e9;
  font-size: 13px;
}
/* Numbers line up on the right, in tabular figures. */
.data-table th.num,
.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr {
  transition: background-color 0.2s;
}
.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.028);
}
.data-table .token-cell {
  color: #f5f5f6;
  font-size: 14px;
  font-weight: 600;
}
.data-table .symbol {
  color: #7d7f85;
  font-size: 12px;
  font-weight: 450;
}
.data-table .token-avatar {
  border: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.data-table .rank {
  min-width: 18px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #5f6167;
}
/* The top three ranks are cast in chrome. */
.data-table .rank.is-podium {
  background: linear-gradient(180deg, #ffffff, #b9bbc0 55%, #7c7e84);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.data-table .button.ghost {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}
/* The ranked table's Trade pills end at the same inset as the rank numbers start. */
.home-rankings .data-table th:last-child,
.home-rankings .data-table td:last-child {
  width: 1%;
  padding-right: 20px;
  text-align: right;
  white-space: nowrap;
}
.data-table .button.ghost .icon {
  width: 14px;
  height: 14px;
}

/* ---------- Launch studio: a real three-step flow ----------
 * The step tiles are solid smoked glass on one fine specular floor line, joined by a hairline rail
 * through their indices. The only motion: each step index lights in turn. */
.launch-studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.5fr);
  align-items: start;
  gap: 44px;
  margin-top: 20px;
  padding: var(--panel-pad);
  border-radius: var(--lg-r-xl);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, 0.045), transparent 60%),
    linear-gradient(180deg, #0c0c0d, #070708);
  box-shadow: var(--lg-depth);
}
.launch-studio-copy {
  position: relative;
  z-index: 1;
}
/* An eyebrow, not body text. */
.launch-studio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a7a9ae;
}
.launch-studio-kicker::before {
  content: '';
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6));
}
.launch-studio h2 {
  margin-top: 14px;
  font-family: Sora, Inter, sans-serif;
  font-size: var(--lg-h2);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.045em;
  color: #f6f6f7;
  text-wrap: balance;
}
.launch-studio-copy > p:not(.launch-studio-kicker) {
  max-width: 380px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #9a9ca2;
  text-wrap: pretty;
}
/* The hero carries the page's one primary; the studio's launch is the glass secondary. */
.hero-btn.launch-studio-cta {
  margin-top: 26px;
  height: 44px;
  padding: 0 18px 0 20px;
}
.launch-studio-cta .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.35s var(--lg-ease);
}
.launch-studio-cta:hover .icon {
  transform: translateX(3px);
}
.launch-flow {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  align-self: start;
  margin-top: 36px; /* the tiles' top edge on the heading's: the kicker's line and its 14px gap */
  padding-bottom: 26px; /* the floor line */
}
/* The floor: a crisp specular hairline under the tile row, over a soft contact shadow. */
.launch-flow::before,
.launch-flow::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.launch-flow::before {
  bottom: 1px;
  height: 22px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(0, 0, 0, 0.75), transparent 70%);
}
.launch-flow::after {
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 50%, transparent);
}
.launch-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.launch-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  align-content: start;
  column-gap: 12px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.018) 55%,
      rgba(255, 255, 255, 0.01)
    ),
    #0d0d0e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.02),
    0 22px 40px -22px rgba(0, 0, 0, 1);
}
.launch-step-index {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #d9dadd;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Each index lights in turn: the sequence, told once every six seconds. */
.launch-step-index::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 150, 40, 0.9),
    0 0 16px rgba(255, 130, 0, 0.5);
  opacity: 0;
  animation: launch-step-lit 6s linear infinite;
}
.launch-step:nth-child(1) .launch-step-index::after {
  animation-delay: 0.25s;
}
.launch-step:nth-child(2) .launch-step-index::after {
  animation-delay: 1.4s;
}
.launch-step:nth-child(3) .launch-step-index::after {
  animation-delay: 2.5s;
}
.launch-step strong {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #f4f4f5;
}
.launch-step > span:last-child {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8d8f95;
  text-wrap: pretty;
}
/* A hairline through the step indices, seen only in the gaps: it joins the tiles into one flow. */
.launch-rail {
  position: absolute;
  z-index: 0;
  top: 30px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18) 6%,
    rgba(255, 255, 255, 0.18) 94%,
    transparent
  );
  pointer-events: none;
}
@keyframes launch-step-lit {
  0%,
  100% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
}
.launch-studio:hover::after {
  background: var(--lg-rim-hover);
}
.launch-studio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mx, 70%) var(--my, 0%),
    rgba(255, 255, 255, 0.035),
    transparent 60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.launch-studio:hover::before {
  opacity: 1;
}

/* ---------- Hero: copy on the left, the glass robot standing on its stat shelf ---------- */
.home-hero {
  container: home-hero / inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lg-r-xl);
  background: radial-gradient(90% 120% at 0% 0%, #111113 0%, #070708 52%, #030303 100%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.home-hero::after {
  z-index: 5;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.06) 26%,
    rgba(255, 255, 255, 0.035) 60%,
    rgba(255, 255, 255, 0.1) 88%,
    rgba(255, 255, 255, 0.05)
  );
}
/* The shelf's height, from the same values its own rules use (padding, the label's 18px line and
   its 6px gap, the figure's 1.1 line): the copy is set by it, so the actions' top edge and the
   shelf's top edge are one line. */
.home-hero-copy,
.home-hero-stage {
  --shelf-pad: 37px;
  --shelf-fs: clamp(20px, 1.95vw, 27px);
}
.home-hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* the copy is one block, its actions level with the shelf */
  align-items: flex-start;
  width: 48%;
  min-height: clamp(540px, 32vw, 600px); /* a little taller on large screens, for the robot */
  padding: 50px 0 calc(var(--hero-inset) + var(--shelf-pad) + 24px + 1.1 * var(--shelf-fs) - 46px)
    var(--panel-pad);
  pointer-events: none;
}
.home-hero-copy > * {
  pointer-events: auto;
}
.home-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #b5b7bc;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition:
    box-shadow 0.3s,
    color 0.3s;
}
.home-hero-pill:hover {
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.home-hero-pill b {
  /* Graphite glass: the hero's launch button stays the page's only solid orange. */
  padding: 4px 9px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), #121213;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #d9dadd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  transition: color 0.3s;
}
.home-hero-pill:hover b,
.home-hero-pill:focus-visible b {
  color: var(--lg-orange-hi);
}
.home-hero-pill .icon {
  width: 13px;
  height: 13px;
  color: #85878d;
  transition: transform 0.3s var(--lg-ease);
}
.home-hero-pill:hover .icon {
  transform: translateX(2px);
  color: #ffffff;
}
.home-hero h1 {
  margin: 30px 0 0;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(34px, 4.3cqi, 58px); /* sized from the hero, not the viewport */
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: #f5f5f6;
}
.home-hero h1 .line {
  display: block;
}
.home-hero h1 .chrome {
  /* Mirror chrome: sky above the horizon line, a faint warm floor along every letter's foot
     (the baseline sits at ~84% of the 1.05em tile), cool silver below it. One light sweep. */
  padding-bottom: 0.08em;
  background-image:
    linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #e6e7ea 30%,
      #9c9ea5 50%,
      #5d5f65 58%,
      #a4a6ac 70%,
      #e9d8c6 80%,
      #cfd0d4 88%,
      #c9cbd0 100%
    );
  background-size:
    250% 100%,
    100% 1.05em;
  background-repeat: no-repeat, repeat-y;
  background-position:
    180% 0,
    0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-hero-copy > p {
  max-width: 432px;
  margin: 24px 0 0;
  color: #95979e;
  font-size: 15px;
  line-height: 1.66;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
/* The short line stands in on the shortest screens (a phone on its side), never a clipped one. */
.hero-p-short {
  display: none;
}
.home-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 36px;
}
.hero-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    transform 0.25s var(--lg-ease),
    box-shadow 0.3s,
    background 0.3s;
}
.hero-btn:active {
  transform: scale(0.975);
}
.hero-btn.is-primary {
  padding-right: 18px;
  background: linear-gradient(180deg, #ffa13a 0%, #ff8200 55%, #f57500 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.7),
    inset 0 -1px 0 rgba(120, 50, 0, 0.35),
    0 10px 30px -10px rgba(255, 120, 0, 0.75),
    0 0 0 1px rgba(255, 150, 40, 0.4);
  color: #1d0f00;
}
.hero-btn.is-primary:hover {
  background: linear-gradient(180deg, #ffb45a 0%, #ff8c12 55%, #f77c00 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.9),
    inset 0 -1px 0 rgba(120, 50, 0, 0.35),
    0 16px 40px -10px rgba(255, 120, 0, 0.95),
    0 0 0 1px rgba(255, 175, 80, 0.7);
}
.hero-btn.is-primary .icon {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
  transition: transform 0.35s var(--lg-ease);
}
.hero-btn.is-primary:hover .icon {
  transform: translateX(3px);
}
.hero-btn.is-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 30px -14px rgba(0, 0, 0, 0.9);
  color: #f1f1f2;
}
.hero-btn.is-glass:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.065));
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 32px -14px rgba(0, 0, 0, 0.95);
}
.hero-btn:hover:active {
  transform: translateY(0) scale(0.975);
}
/* One travelling sheen on hover. */
.hero-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.hero-btn:hover::after {
  transform: translateX(120%);
  transition: transform 0.9s var(--lg-ease);
}

/* The stage: the glass robot's canvas and the pre-rendered still. */
.home-hero-stage {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30%;
  touch-action: manipulation; /* quick taps on the robot never double-tap-zoom */
  -webkit-tap-highlight-color: transparent;
}
/* Clicking the robot again and again never selects it (the stat shelf stays selectable). */
.glass-canvas,
.glass-fallback {
  -webkit-user-select: none;
  user-select: none;
}
/* The robot winks at a hover and changes face at a tap (glass-hero.js); the stage holds no controls. */
.home-hero-stage.glass-poke {
  cursor: pointer;
}
/* The canvas fades in over whatever still is showing; glass-hero.js runs that fade as a script
   animation, which carries on through the kept hero's re-inserts (a transition would not). */
.glass-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  opacity: 0;
}
.glass-ready .glass-canvas {
  opacity: 1;
}
/* No WebGL (or a software renderer): a pre-rendered still of the same robot, placed where the
   live one would be. glass-hero.js positions it. */
.glass-fallback {
  position: absolute;
  display: none;
  left: 62%;
  top: 40%;
  width: min(560px, 80%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent);
  mask-image: radial-gradient(closest-side, #000 78%, transparent);
}
.glass-off .glass-canvas {
  display: none;
}
/* A still under the canvas: the poster while a slow shader compiles (it rises in with the copy),
   or the composed still while motion is off. It stays at full strength while the canvas fades in
   over it and is taken away once the canvas is fully up. */
.glass-off .glass-fallback,
.glass-still .glass-fallback {
  display: block;
}

/* The stat shelf: frosted glass with one fine reflection along its top edge. */
.home-hero-stats {
  position: absolute;
  z-index: 4;
  right: var(--hero-inset);
  bottom: var(--hero-inset);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(520px, 47cqi);
  padding: 19px 4px 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 30, 32, 0.5), rgba(14, 14, 15, 0.62));
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 60px -30px rgba(0, 0, 0, 0.95);
}
/* With WebGL the canvas renders the shelf's frost and lens itself (glass-hero.js). */
.glass-lens.glass-ready .home-hero-stats {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(180deg, rgba(34, 34, 37, 0.34), rgba(12, 12, 13, 0.5));
}
.home-hero-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55) 28%,
    #ffb35c 50%,
    rgba(255, 255, 255, 0.4) 72%,
    transparent
  );
  opacity: 0.8;
}
.home-stat {
  position: relative;
  min-width: 0;
  padding: 0 22px;
}
.home-stat + .home-stat::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}
.home-stat span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #a2a4aa;
}
.home-stat strong {
  display: block;
  margin-top: 6px;
  font-size: var(--shelf-fs);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #f7f7f8;
}
.live-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lg-orange);
  box-shadow:
    0 0 0 3px rgba(255, 130, 0, 0.16),
    0 0 10px rgba(255, 130, 0, 0.9);
}

/* Entrance, once: the copy rises, the chrome line catches one light sweep. A hero re-inserted by a
   re-render mid-entrance resumes it where it was (home-hero.js sets --lg-resume to minus the time
   since mount; re-insertion restarts the animations and the negative delay skips what played).
   Once it has played in full, the hero is .is-settled and never replays it. */
@keyframes lg-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes lg-sheen {
  from {
    background-position:
      180% 0,
      0 0;
  }
  to {
    background-position:
      -80% 0,
      0 0;
  }
}
.home-hero-copy > *,
.home-hero-stats {
  animation: lg-rise 1s var(--lg-ease) both;
}
.home-hero-copy > :nth-child(1) {
  animation-delay: calc(0.05s + var(--lg-resume, 0s));
}
.home-hero-copy > :nth-child(2) {
  animation-delay: calc(0.14s + var(--lg-resume, 0s));
}
.home-hero-copy > :nth-child(3) {
  animation-delay: calc(0.26s + var(--lg-resume, 0s));
}
.home-hero-copy > :nth-child(4) {
  animation-delay: calc(0.36s + var(--lg-resume, 0s));
}
.home-hero-stats {
  animation-delay: calc(0.55s + var(--lg-resume, 0s));
}
.home-hero h1 .chrome {
  animation: lg-sheen 2.2s cubic-bezier(0.45, 0, 0.2, 1) both;
  animation-delay: calc(0.9s + var(--lg-resume, 0s));
}
.home-hero.is-settled .home-hero-copy > *,
.home-hero.is-settled .home-hero-stats,
.home-hero.is-settled h1 .chrome {
  animation: none;
}

/* ---------- Motion off / reduced motion / reduced transparency ---------- */
.motion-off .home-hero-copy > *,
.motion-off .home-hero-stats,
.motion-off .home-hero h1 .chrome,
.motion-off .launch-step-index::after {
  animation: none;
}
.motion-off .hero-btn::after {
  display: none;
}
.motion-off .project-card:hover,
.motion-off .token-card:hover {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-copy > *,
  .home-hero-stats,
  .home-hero h1 .chrome,
  .launch-step-index::after {
    animation: none;
  }
  .hero-btn::after {
    display: none;
  }
  .project-card,
  .token-card {
    transition: none;
  }
  .project-card:hover,
  .token-card:hover {
    transform: none;
  }
}
/* Static frame for the launch flow: the first step's index stays lit. */
.motion-off .launch-step:first-child .launch-step-index::after {
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .launch-step:first-child .launch-step-index::after {
    opacity: 0.8;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .home-hero-stats,
  .glass-lens.glass-ready .home-hero-stats,
  .hero-btn.is-glass,
  .topbar,
  .floating-ask {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #161618;
  }
}

/* ---------- Responsive ---------- */
@media (min-width: 1500px) {
  .home-hero-copy {
    padding-top: 58px;
  }
  .home-hero-copy > p {
    max-width: 460px;
    font-size: 16px;
  }
}
/* The hero adapts to its own width (container queries), so it behaves the same whether the
   sidebar is open, collapsed or gone. */
@container home-hero (min-width: 1300px) {
  /* Wide heroes: draw the shelf (and the robot above it) in toward the copy. */
  .home-hero-stats {
    right: calc(var(--hero-inset) + (100cqi - 1300px) * 0.25);
  }
}
@container home-hero (max-width: 1040px) {
  .home-hero-copy > p {
    max-width: 370px;
    font-size: 14px;
  }
  .hero-btn {
    padding: 0 17px;
    font-size: 13px;
  }
  .hero-btn.is-primary {
    padding-right: 14px;
  }
  .home-hero-copy,
  .home-hero-stage {
    --shelf-pad: 31px;
    --shelf-fs: 21px;
  }
  .home-hero-stats {
    width: min(520px, 52cqi);
    padding: 16px 0 15px;
  }
  .home-stat {
    padding: 0 15px;
  }
}
/* Small laptops and tablet landscape (iPad Air at 1180): a narrower shelf, clear of the actions. */
@container home-hero (max-width: 960px) {
  .home-hero-stats {
    width: min(430px, 46cqi);
  }
  .home-hero-copy,
  .home-hero-stage {
    --shelf-fs: 19px;
  }
  .home-stat {
    padding: 0 12px;
  }
}
/* Stacked: copy and actions, then the robot standing on its shelf. */
@container home-hero (max-width: 860px) {
  /* The copy's edges are the launch studio's below it. */
  .home-hero-copy {
    width: 100%;
    min-height: 0;
    padding: max(34px, var(--panel-pad)) var(--panel-pad) 0;
  }
  .home-hero h1 {
    margin-top: 26px;
    font-size: clamp(33px, 7.4cqi, 56px);
    white-space: normal;
  }
  .home-hero-copy > p {
    max-width: 520px;
    margin-top: 18px;
    font-size: 15px;
  }
  .home-hero-actions {
    margin-top: 28px;
  }
  .home-hero-stage {
    position: relative;
    left: auto;
    height: clamp(360px, 78cqi, 600px);
    margin-top: -4px;
  }
  /* The live canvas fades in under the actions; the still keeps its own round feather. */
  .glass-canvas {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
  }
  /* The shelf's edges are the copy's (the headline's left, the paragraph's measure's right). */
  .home-hero-stats {
    left: var(--panel-pad);
    right: var(--panel-pad);
    bottom: var(--panel-pad);
    width: auto;
    padding: 17px 0 16px;
    border-radius: 18px;
  }
  .home-stat {
    padding: 0 20px;
  }
  .home-stat strong {
    font-size: clamp(18px, 4cqi, 26px);
  }
}
/* A stacked hero on a tablet or a short laptop window: the stage gives way to the viewport height,
   so the robot and its shelf land above the fold (portrait tablets still get 78cqi). */
@media (min-width: 701px) {
  @container home-hero (max-width: 860px) {
    .home-hero-stage {
      height: clamp(320px, min(78cqi, 100svh - 470px), 600px);
    }
  }
}
/* A wide window whose hero is only 700-860 px across (a laptop with the full sidebar open) stays
   side by side, as on the desktop: stacked, the stage would be cut to the height left under the
   copy and the robot shrunk to an ornament in a wide empty band. Portrait tablets, taller
   than wide, keep the stacked hero; phones on their side have their own rules below. */
@media (min-width: 701px) and (min-height: 501px) and (min-aspect-ratio: 5/4) {
  @container home-hero (min-width: 700px) and (max-width: 860px) {
    .home-hero-copy {
      width: 54%;
      min-height: 520px;
      padding: 44px 0 calc(var(--hero-inset) + var(--shelf-pad) + 24px + 1.1 * var(--shelf-fs) - 46px)
        var(--panel-pad);
    }
    .home-hero h1 {
      margin-top: 28px;
      font-size: clamp(30px, 4.9cqi, 40px);
      white-space: nowrap;
    }
    .home-hero-copy > p {
      max-width: 340px;
      margin-top: 18px;
      font-size: 14px;
    }
    .home-hero-actions {
      margin-top: 30px;
    }
    .home-hero-stage {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30%;
      height: auto;
      margin-top: 0;
    }
    .glass-canvas {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    }
    .home-hero-stats {
      left: auto;
      right: var(--hero-inset);
      bottom: var(--hero-inset);
      width: min(400px, 46cqi);
      padding: 16px 0 15px;
      border-radius: 20px;
    }
    .home-stat {
      padding: 0 12px;
    }
    .home-stat strong {
      font-size: var(--shelf-fs);
    }
  }
  /* The narrowest of these (700-800 px): the actions stack, their foot on the shelf's foot, and the
     shelf takes half the hero so its three figures keep their own columns. */
  @container home-hero (min-width: 700px) and (max-width: 800px) {
    .home-hero-copy {
      width: 50%;
      padding-bottom: var(--hero-inset);
    }
    .home-hero h1 {
      font-size: clamp(28px, 4.4cqi, 34px);
    }
    .home-hero-copy > p {
      max-width: 300px;
      font-size: 13.5px;
    }
    .home-hero-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .home-hero-stats {
      width: min(380px, 50cqi);
    }
    .home-stat {
      padding: 0 10px 0 12px;
    }
    .home-stat span {
      font-size: 11px;
    }
    .live-dot {
      display: none;
    }
  }
}
@container home-hero (max-width: 560px) {
  .home-hero-copy {
    padding: 28px 22px 0;
  }
  .home-hero h1 {
    margin-top: 22px;
    font-size: clamp(29px, 8.8cqi, 44px); /* "Launch on Stonkfun" holds one line */
  }
  .home-hero-copy > p {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.6;
  }
  .home-hero-actions {
    width: 100%;
    margin-top: 24px;
  }
  .home-hero-actions .hero-btn {
    flex: 1;
    padding: 0 12px;
  }
  .home-hero-stage {
    height: clamp(340px, 99cqi, 430px); /* the shelf's 22px inset comes out of the stage */
  }
  .home-hero-stats {
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 14px 0 13px;
    border-radius: 17px;
  }
  .home-stat {
    padding: 0 13px;
  }
  .home-stat span {
    font-size: 11px;
  }
  .home-stat strong {
    font-size: clamp(17px, 5.4cqi, 23px);
  }
}
@container home-hero (max-width: 440px) {
  .home-hero-actions {
    flex-direction: column;
    gap: 9px;
  }
  .home-hero-actions .hero-btn {
    flex: none;
    width: 100%;
  }
  .home-stat {
    padding: 0 8px 0 12px;
  }
  .home-stat strong {
    font-size: clamp(16px, 4.9cqi, 19px);
    letter-spacing: -0.04em;
  }
  .live-dot {
    display: none;
  }
}
/* Short screens (a phone on its side): the hero stays side by side and fits one screen, the
   robot and its shelf filling the right half. */
@media (max-height: 500px) {
  @container home-hero (min-width: 561px) {
    .home-hero-copy {
      justify-content: center;
      min-height: max(250px, calc(100svh - 96px)); /* the whole hero under the phone top bar */
      padding: 20px 0 20px 22px; /* the launch studio's edge below */
    }
    .home-hero-pill {
      display: none;
    }
    .home-hero h1 {
      margin-top: 0;
      font-size: clamp(24px, 4.2cqi, 38px);
      white-space: normal;
    }
    .home-hero-copy > p {
      max-width: 400px;
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.55;
    }
    .home-hero-actions {
      margin-top: 20px;
    }
    .hero-btn {
      height: 40px;
      padding: 0 15px;
      font-size: 12.5px;
    }
    .home-hero-stats {
      right: 16px;
      bottom: 16px;
      width: min(400px, 44cqi);
      padding: 13px 0 12px;
    }
    .home-stat {
      padding: 0 10px 0 12px;
    }
    .home-stat span {
      font-size: 10.5px;
    }
    .home-stat strong {
      margin-top: 4px;
      font-size: 18px;
    }
    .live-dot {
      display: none;
    }
  }
  @container home-hero (min-width: 561px) and (max-width: 860px) {
    .home-hero-copy {
      width: 52%;
    }
    .home-hero-stage {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 30%;
      height: auto;
      margin-top: 0;
    }
    .glass-canvas {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    }
    .home-hero-stats {
      left: auto;
      max-width: none;
      margin: 0;
      border-radius: 16px;
    }
  }
  /* The narrowest side-by-side heroes (a 640-667 px phone on its side): the actions stack, so they
     end well clear of the shelf, and the stats tighten to fit its third of the hero. */
  @container home-hero (min-width: 561px) and (max-width: 700px) {
    .home-hero-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .hero-btn {
      height: 36px;
    }
    .home-stat {
      padding: 0 8px 0 10px;
    }
    .home-stat span {
      font-size: 10px;
    }
    .home-stat strong {
      font-size: 16px;
    }
  }
}
/* Very short (a 360 px tall phone on its side): the copy tightens to fit under the top bar. */
@media (max-height: 380px) {
  @container home-hero (min-width: 561px) {
    .home-hero h1 {
      margin: 0;
    }
    .home-hero-copy > p {
      font-size: 12.5px;
    }
    .hero-p-long {
      display: none;
    }
    .hero-p-short {
      display: inline;
    }
    .home-hero-actions {
      margin-top: 14px;
    }
  }
}

@media (min-width: 1151px) {
  .featured-grid,
  .token-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1150px) {
  .launch-studio {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* One column: the tiles sit under the copy, and the floor goes. */
  .launch-flow {
    margin-top: 0;
    padding-bottom: 0;
  }
  .launch-flow::before,
  .launch-flow::after {
    display: none;
  }
  /* The ranked table sheds columns before it would scroll: the trade action (the row itself opens
     the token) goes first, then volume, then market cap. */
  .home-rankings .data-table {
    min-width: 0;
  }
  .home-rankings .data-table th:nth-child(6),
  .home-rankings .data-table td:nth-child(6) {
    display: none;
  }
}
@media (max-width: 1150px) and (min-width: 701px) {
  .featured-grid,
  .token-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two columns: keep the grids even (the featured three show two; six tokens make three rows). */
  .overview-page .featured-grid > .project-card:nth-child(3) {
    display: none;
  }
}
/* Narrow tiles side by side (small laptops): the index sits above its title, so every title keeps
   to one line and the three tiles read level. */
@media (min-width: 901px) {
  @container (max-width: 660px) {
    .launch-step {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 14px;
    }
    .launch-step > span:last-child {
      margin-top: -4px;
    }
  }
}
/* Steps stack; the rail runs down through the indices. */
@media (max-width: 900px) {
  .launch-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .launch-step {
    column-gap: 14px;
    padding: 16px;
  }
  .launch-step-index {
    grid-row: 1 / span 2;
    align-self: start;
  }
  .launch-step > span:last-child {
    grid-column: 2;
    margin-top: 3px;
  }
  .launch-rail {
    top: 0;
    bottom: 0;
    left: 30px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.16) 8%,
      rgba(255, 255, 255, 0.16) 92%,
      transparent
    );
  }
  .launch-step:nth-child(1) .launch-step-index::after {
    animation-delay: 0.45s;
  }
  .launch-step:nth-child(2) .launch-step-index::after {
    animation-delay: 1.55s;
  }
  .launch-step:nth-child(3) .launch-step-index::after {
    animation-delay: 2.65s;
  }
  .home-rankings .data-table th:nth-child(5),
  .home-rankings .data-table td:nth-child(5) {
    display: none;
  }
  /* Four columns that fit: the project takes what the numbers leave, nothing scrolls sideways. */
  .home-rankings .data-table {
    width: 100%;
    table-layout: fixed;
  }
  .home-rankings .data-table th,
  .home-rankings .data-table td {
    padding-left: 12px;
    padding-right: 12px;
  }
  .home-rankings .data-table th:nth-child(2) {
    width: 112px;
  }
  .home-rankings .data-table th:nth-child(3) {
    width: 104px;
  }
  .home-rankings .data-table th:nth-child(4) {
    width: 112px;
  }
  .home-rankings .data-table .token-cell {
    min-width: 0;
    max-width: none;
  }
  .home-rankings .data-table .token-cell > div {
    min-width: 0;
  }
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .overview-page {
    padding-top: 16px;
  }
  .home-hero {
    border-radius: 22px;
  }
  .overview-page > .section {
    margin-top: 48px;
  }
  .section-head {
    flex-wrap: nowrap;
    align-items: flex-end;
    margin-bottom: 16px;
  }
  .section-head h2 {
    font-size: 22px;
  }
  .section-note {
    font-size: 12.5px;
  }
  .section-head > .source-note {
    display: none;
  }
  /* Featured projects and trending tokens become swipeable rows; the next card peeks in. */
  .overview-page .featured-grid,
  .home-tokens .token-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 12px;
    margin: -6px -16px -14px;
    padding: 6px 16px 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .overview-page .featured-grid::-webkit-scrollbar,
  .home-tokens .token-grid::-webkit-scrollbar {
    display: none;
  }
  .overview-page .featured-grid > *,
  .home-tokens .token-grid > * {
    scroll-snap-align: start;
  }
  .featured-grid,
  .token-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .launch-studio {
    gap: 28px;
    margin-top: 16px;
    padding: 28px 22px 24px;
    border-radius: 22px;
  }
  .launch-studio h2 {
    font-size: 22px;
  }
  .launch-studio-copy > p:not(.launch-studio-kicker) {
    font-size: 14px;
  }
  .hero-btn.launch-studio-cta {
    width: 100%;
    margin-top: 22px;
  }
  .project-body {
    padding: 20px;
  }
  .token-card {
    padding: 18px;
  }
  /* The ranked table becomes a list on phones: project on the left, price over change on the
     right. The tabs above still choose the ranking. */
  .home-rankings .data-table,
  .home-rankings .data-table tbody {
    display: block;
  }
  .home-rankings .data-table thead {
    display: none;
  }
  .home-rankings .data-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  }
  .home-rankings .data-table tr:last-child {
    border-bottom: 0;
  }
  .home-rankings .data-table td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
  }
  .home-rankings .data-table td:first-child {
    grid-row: 1 / span 2;
    min-width: 0;
  }
  .home-rankings .data-table td:nth-child(2),
  .home-rankings .data-table td:nth-child(3) {
    grid-column: 2;
    text-align: right;
  }
  .home-rankings .data-table td:nth-child(2) {
    align-self: end;
    font-size: 13.5px;
    font-weight: 600;
  }
  .home-rankings .data-table td:nth-child(3) {
    align-self: start;
    font-size: 12px;
  }
  .home-rankings .data-table td:nth-child(n + 4) {
    display: none;
  }
  .home-rankings .data-table td.no-results {
    grid-column: 1 / -1;
  }
  .home-rankings .data-table .token-cell {
    min-width: 0;
    max-width: none;
  }
  .page-footer {
    align-items: flex-start;
    margin-top: 56px;
    padding-top: 22px;
    padding-bottom: 72px;
  }
  .footer-links {
    gap: 10px 20px;
  }
  /* The launcher shrinks to its logo on phones, so it covers less of what it floats over. */
  .floating-ask {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    padding: 3px;
    border-radius: 14px;
  }
  .floating-ask > video {
    width: 40px;
    height: 40px;
  }
  .topbar-logo {
    display: block;
  }
}
/* A phone on its side: two cards to a row, and the studio's button keeps its own width. */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 701px) {
  .overview-page .featured-grid,
  .home-tokens .token-grid {
    grid-auto-columns: calc(50% - 22px);
  }
  .hero-btn.launch-studio-cta {
    width: auto;
  }
}
/* Phone section heads: the title and "View all" share the first row, the note spans the second.
   The footer's links stack in one column under the brand. */
@media (max-width: 560px) {
  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .overview-page .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
  }
  .overview-page .section-title {
    display: contents;
  }
  .overview-page .section-head h2 {
    grid-column: 1;
    grid-row: 1;
  }
  .overview-page .section-head > :not(.section-title) {
    grid-column: 2;
    grid-row: 1;
  }
  .overview-page .section-head .section-note {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 6px;
  }
}
/* In the phone drawer, the rail's collapse toggle gives way to a plain close control. */
.drawer-close {
  display: none;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .sidebar .collapse-button,
  .sidebar.collapsed .collapse-button {
    display: none;
  }
  .sidebar .drawer-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: 12px;
    color: #b7b9be;
    transition:
      background-color 0.2s,
      color 0.2s;
  }
  .sidebar .drawer-close:hover,
  .sidebar .drawer-close:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }
  .drawer-close .icon {
    width: 18px;
    height: 18px;
  }
}

/* ---------- Dialogs: the launch flow and every other modal, in the same smoked glass ---------- */
dialog {
  border: 0;
  border-radius: var(--lg-r-xl);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.012) 36%,
      rgba(255, 255, 255, 0.004)
    ),
    #0b0b0c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 40px 120px -20px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.6);
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.modal-head {
  border-color: var(--lg-hairline);
}
.modal-head h2 {
  font-family: Sora, Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.modal-footer {
  border-color: var(--lg-hairline);
}
.modal-body {
  color: #a9abb0;
}
.form-field > span {
  color: #c9cacd;
  font-size: 12.5px;
  font-weight: 500;
}
.form-field > small {
  color: #75777d;
}
.input,
textarea.input,
select.input {
  border: 0;
  border-radius: var(--lg-r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  box-shadow: var(--lg-chip-edge);
  color: #f1f1f2;
  font-size: 13px;
  transition: box-shadow 0.2s;
}
.input::placeholder {
  color: #66686e;
}
.input:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 160, 60, 0.85),
    0 0 0 4px rgba(255, 130, 0, 0.14),
    0 0 18px -4px rgba(255, 130, 0, 0.45);
}
select.input option {
  background: #111112;
  color: #f1f1f2;
}
/* The artwork drop: a dashed glass well. */
.form-field > .upload-control,
.upload-control {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--lg-r-md);
  background: rgba(255, 255, 255, 0.025);
  color: #c9cacd;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.upload-control:hover,
.upload-control:focus-within {
  border-color: rgba(255, 160, 60, 0.6);
  background: rgba(255, 130, 0, 0.04);
}
.upload-control .icon {
  color: #a2a4aa;
}
.upload-control img {
  border-radius: 10px;
}
/* Launch mode: a glass segmented control; the selected option matches .tab.active. */
.field-options {
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.field-options span {
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8f9197;
  font-size: 12.5px;
  font-weight: 500;
  transition:
    color 0.2s,
    background-color 0.2s;
}
.field-options label:hover span {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.field-options input:checked + span {
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 12px -4px rgba(0, 0, 0, 0.8);
  color: var(--lg-orange-hi);
}
.field-options input:focus-visible + span {
  outline: 2px solid rgba(255, 160, 60, 0.8);
  outline-offset: 2px;
}
/* The launch dialog's banner: a crop of the hero's glass robot still. */
.launch-intro {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--lg-r-lg);
  background: radial-gradient(120% 140% at 0% 50%, #141415, #070708 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.launch-intro > img {
  object-fit: cover;
  mix-blend-mode: normal;
}
.launch-intro strong {
  font-family: Sora, Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #f5f5f6;
}
.launch-intro p {
  color: #8f9197;
}
/* The dialog's one primary: the hero's orange gel pill. */
dialog .button.primary.full {
  min-height: 46px;
  border: 0;
  background: linear-gradient(180deg, #ffa13a 0%, #ff8200 55%, #f57500 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 210, 0.7),
    inset 0 -1px 0 rgba(120, 50, 0, 0.35),
    0 10px 30px -12px rgba(255, 120, 0, 0.7),
    0 0 0 1px rgba(255, 150, 40, 0.4);
  color: #1d0f00;
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 0.25s var(--lg-ease),
    box-shadow 0.3s,
    background 0.3s;
}
dialog .button.primary.full:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffb45a 0%, #ff8c12 55%, #f77c00 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 220, 0.9),
    inset 0 -1px 0 rgba(120, 50, 0, 0.35),
    0 14px 36px -10px rgba(255, 120, 0, 0.9),
    0 0 0 1px rgba(255, 175, 80, 0.7);
}
/* The Launch Hub's last step: the ready-made post as X shows it, its length as X counts it, then what
   the bot does with it (the Command guide's composer, docs.css, in the dialog's glass). */
.hub-lead {
  margin: -4px 0 14px;
  color: #c9cacd;
  font-size: 13.5px;
  line-height: 1.55;
}
.hub-post {
  padding: 14px 16px 12px;
  border-radius: var(--lg-r-lg);
  background: #000000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hub-post-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e7e9ea;
  font-size: 13px;
}
.hub-post-head .icon {
  width: 14px;
  height: 14px;
}
.hub-post-head strong {
  font-weight: 600;
}
.hub-count {
  margin-left: auto;
  color: #7d7f85;
  font:
    500 11.5px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  font-variant-numeric: tabular-nums;
}
.hub-count.is-over {
  color: var(--lg-orange-hi);
}
.hub-post-text {
  margin: 10px 0 0;
  color: var(--lg-text);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hub-media {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: var(--lg-r-md);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #8f9197;
  font-size: 12px;
  line-height: 1.5;
}
.hub-media strong {
  color: #d4d5d8;
  font-weight: 600;
}
.hub-media img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}
.hub-media .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.hub-outlook {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.hub-outlook li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--lg-r-md);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #a9abb0;
  font-size: 12.5px;
  line-height: 1.55;
}
.hub-outlook .icon,
.hub-track .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: #a7a9ae;
}
.hub-outlook li.is-go .icon {
  color: #ffffff;
}
.hub-outlook li.is-cost {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #d4d5d8;
}
.hub-outlook li.is-stop {
  background: linear-gradient(90deg, rgba(255, 130, 0, 0.1), rgba(255, 130, 0, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.3);
  color: #e9e3dc;
}
.hub-outlook li.is-stop .icon {
  color: var(--lg-orange-hi);
}
.hub-outlook strong {
  color: var(--lg-text);
  font-weight: 600;
}
.hub-outlook code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: #e7e9ea;
  font:
    500 11.5px/1.4 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.hub-outlook a,
.hub-track a {
  color: var(--lg-orange-hi);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hub-track {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  color: #8f9197;
  font-size: 12.5px;
  line-height: 1.55;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  dialog {
    border-radius: 20px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.86);
  }
}

/* ---------- Inner pages: the same material on the trade controls and the notes ---------- */
/* Pills and chips, as everywhere else: the pair picker, the order-type chip, the flip disc. */
.token-picker {
  min-height: 38px;
  padding: 6px 14px 6px 8px;
  border: 0;
  border-radius: 99px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}
.token-picker:not(:has(.token-avatar)) {
  padding-left: 16px;
}
.token-picker:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.market-mode {
  padding: 5px 12px;
  border: 0;
  border-radius: 99px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #ececee;
  font-weight: 500;
}
.amount-selector {
  border: 0;
  border-radius: var(--lg-r-md);
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}
button.amount-selector:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.flip-button {
  display: grid;
  place-items: center;
  border: 4px solid #0b0b0c;
  border-radius: 50%;
  background: linear-gradient(180deg, #2c2c2f, #141416);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px -6px rgba(0, 0, 0, 0.9);
  color: #e6e6e8;
  transition:
    color 0.2s,
    box-shadow 0.2s;
}
.flip-button:hover {
  color: var(--lg-orange-hi);
  box-shadow:
    inset 0 0 0 1px rgba(255, 160, 60, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px -6px rgba(0, 0, 0, 0.9);
}
/* Notes (the Metrics source line, the docs and review notes) are glass panels with the rim. */
.info-box {
  border: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: #a3a5ab;
}

/* The launch dialog: no empty gap above the submit while there is no error to show, and the
   quote select wears the site's chevron instead of the native arrow. */
.modal-body .form-error:empty {
  min-height: 0;
  margin: 0;
}
select.input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ca2' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      no-repeat right 14px center / 15px 15px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  cursor: pointer;
}

/* ---------- $STONKR holders ----------
 * The homepage card wears the launch studio's glass, its tiers the studio's tiles; the account card and
 * the menu chip follow the account page. Orange marks only what is the visitor's own. */
.holder-market {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 22px 0 0;
}
.holder-market div {
  display: grid;
  gap: 4px;
}
.holder-market dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg-faint);
}
.holder-market dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lg-text);
}
.holder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.holder-band .holder-actions .hero-btn {
  height: 44px;
  padding: 0 18px;
  text-decoration: none;
}
.holder-actions .icon {
  width: 14px;
  height: 14px;
}
.holder-ca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font:
    500 12px/1.4 ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  color: var(--lg-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.holder-ca:hover,
.holder-ca:focus-visible {
  color: #ffffff;
}
.holder-ca .icon {
  width: 13px;
  height: 13px;
}
.holder-you {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 0, 0.32);
  font-size: 13px;
  color: #ffd3a0;
  text-decoration: none;
}
.holder-you b {
  color: #ffffff;
}
.holder-you .icon {
  width: 14px;
  height: 14px;
}
.holder-tier {
  align-items: start;
}
.holder-tier > .holder-min,
.holder-tier > .holder-perks {
  grid-column: 1 / -1;
}
.holder-min {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lg-orange-hi);
}
.holder-perks {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.45;
  color: #9a9ca2;
}
.holder-perks li {
  position: relative;
  padding-left: 12px;
  text-wrap: pretty;
}
.holder-perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 150, 40, 0.85);
}
.holder-tier.is-yours {
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.55),
    0 22px 40px -22px rgba(0, 0, 0, 1);
}
@media (max-width: 900px) {
  .holder-tier > .holder-min,
  .holder-tier > .holder-perks {
    grid-column: 2;
  }
}
/* The account page's tier card. */
.holder-status {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #ffffff0b;
  border-radius: 14px;
  background: #1b1b1b;
}
.holder-status > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.holder-status strong {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.holder-status small {
  font-size: 12px;
  color: #9a9a9a;
}
.holder-badge,
.holder-chip {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #ffffff1f;
  font-size: 12px;
  font-weight: 600;
  color: #cfcfcf;
}
.holder-badge.is-on,
.holder-chip {
  border-color: rgba(255, 130, 0, 0.45);
  background: rgba(255, 130, 0, 0.1);
  color: #ffc27a;
}
.holder-chip {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
}
.holder-line {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #cfcfcf;
}
.holder-perks-title {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.holder-perk-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
  color: #e2e2e2;
}
.holder-perk-list li {
  display: flex;
  gap: 8px;
}
.holder-perk-list .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--lg-orange-hi);
}
.account-card .holder-actions {
  margin-top: 16px;
}

/* ---------- Stonkinator coins: the Explore pages' switch and the robot on our coins ---------- */
/* Its own row above the toolbar (and under the Metrics heading), so the toolbar's pills keep their room. */
.coins-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.coins-switch {
  display: inline-flex;
  flex: none;
  max-width: 100%;
}
.coins-switch .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.coins-switch .tab img {
  flex: none;
  width: 16px;
  height: 16px;
}
.coins-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #8f9197;
}
/* The robot beside a coin launched with Stonkinator: a small orange-ringed mark after the ticker. */
.ours-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  vertical-align: -3px;
  background: rgba(255, 130, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 130, 0, 0.45);
}
/* Stronger than the chat's `.message.assistant img`, which sizes every picture in a reply. */
span.ours-badge > img.ours-mark {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
}
.coins-note .ours-badge {
  margin: 0 2px;
}
.being-listed {
  margin-left: 6px;
  color: var(--lg-orange-hi);
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .coins-bar {
    margin-bottom: 12px;
  }
  .coins-switch .tab {
    padding: 7px 12px;
  }
}

/* ---------- Coin pages: /terminal/coin/<mint> ----------
 * The coin's head (picture, name, tags and price) and its actions, then its facts and graduation beside the
 * chart, with how it launched and its links under them. One column on tablets and phones. */
.coin-page {
  text-wrap: pretty;
}
.coin-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  color: #8f9197;
  font-size: 12.5px;
  transition: color 0.2s;
}
.coin-back:hover {
  color: var(--lg-text);
}
.coin-back .icon {
  width: 14px;
  height: 14px;
  transform: scaleX(-1);
}
.coin-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.coin-head > .token-avatar {
  width: 60px;
  height: 60px;
  font-size: 22px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 14px 30px -16px rgba(0, 0, 0, 0.95);
}
.coin-title {
  flex: 1;
  min-width: 0;
}
.coin-title h1 {
  margin: 0;
  overflow: hidden;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coin-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 6px 0 0;
}
.coin-tags .ours-badge {
  margin-left: -2px;
}
.coin-ticker {
  color: #d4d5d8;
  font-size: 13px;
  font-weight: 600;
}
.coin-tag,
.coin-stage {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #b9bbc0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
/* Orange marks a coin close to graduating or still being listed; a graduated one wears silver. */
.coin-stage.is-soon,
.coin-stage.is-listing {
  background: rgba(255, 130, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.4);
  color: var(--lg-orange-hi);
}
.coin-stage.is-graduated {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: var(--lg-text);
}
/* The same pills on a table row, beside its ticker: one 17px line, and any pill that doesn't fit wraps out
 * of sight rather than widening the row. The line is never narrower than its widest pill (the stage), so
 * where a long ticker leaves too little room the pills move under the ticker instead of being cut short. */
.token-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
  margin-top: 3px;
}
.token-sub .symbol,
.token-sub .being-listed {
  flex: none;
  margin: 0;
}
.row-tags {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 0 4px;
  min-width: min-content;
  height: 17px;
  overflow: hidden;
}
.row-tags .coin-tag,
.row-tags .coin-stage {
  padding: 0 6px;
  font-size: 10px;
  line-height: 17px;
}
.coin-price {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex: none;
}
.coin-price .price-large {
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.coin-change {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.coin-change small {
  color: #7d7f85;
  font-size: 11px;
  font-weight: 500;
}
.coin-unpriced {
  color: #8f9197;
  font-size: 12.5px;
}
.coin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 24px;
}
.coin-actions .button {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 13px;
}
.coin-actions .button .icon {
  width: 15px;
  height: 15px;
}
.coin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-rows: auto 1fr;
  gap: 16px;
  align-items: start;
}
.coin-facts,
.coin-about {
  display: grid;
  gap: 16px;
  min-width: 0;
  grid-column: 2;
}
.coin-facts {
  grid-row: 1;
}
.coin-about {
  grid-row: 2;
}
/* The chart runs down beside both, and fills its panel when they are taller. */
.coin-chart {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    var(--lg-depth);
}
.coin-chart .gmgn-chart {
  flex: 1;
  min-height: 480px;
  margin-top: 0;
  border-radius: var(--lg-r-md);
}
.coin-chart .pair-empty {
  flex: 1;
  height: auto;
  min-height: 320px;
  padding: 0 24px;
  text-align: center;
}
.coin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.coin-stats > div,
.coin-panel {
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.coin-stats > div {
  min-width: 0;
  padding: 12px 14px;
}
.coin-stats dt {
  color: #7d7f85;
  font-size: 11px;
  line-height: 1.35;
}
.coin-stats dd {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--lg-text);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coin-panel {
  min-width: 0;
  padding: 16px;
}
.coin-panel h2 {
  margin: 0;
  color: var(--lg-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.coin-panel p {
  margin: 0;
  color: #8f9197;
  font-size: 12.5px;
  line-height: 1.55;
}
.coin-grad-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.coin-grad-head strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.coin-grad-track {
  height: 8px;
  margin: 12px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.coin-grad-track > span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffad42, #ff8200);
  box-shadow: 0 0 12px rgba(255, 130, 0, 0.45);
}
.coin-launch-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.coin-launch-head img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 130, 0, 0.45);
}
.coin-panel .coin-launch-head p {
  margin-top: 2px;
  font-size: 12px;
}
.coin-panel .coin-launch-text {
  margin-top: 12px;
  color: #c9cacd;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.coin-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #d4d5d8;
  font-size: 12px;
  font-weight: 500;
  transition:
    box-shadow 0.2s,
    color 0.2s;
}
.coin-chip:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--lg-text);
}
.coin-chip .icon {
  width: 13px;
  height: 13px;
  color: #9a9ca2;
}
.coin-panel .coin-links-label {
  margin-top: 14px;
  color: #7d7f85;
  font-size: 11px;
}
.coin-links-label + .coin-link-row {
  margin-top: 8px;
}
.coin-panel .coin-address {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lg-hairline);
  font-size: 11px;
}
.coin-address code {
  color: #c9cacd;
  font:
    500 11.5px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
@media (max-width: 1150px) {
  .coin-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .coin-facts,
  .coin-chart,
  .coin-about {
    grid-column: 1;
    grid-row: auto;
  }
  .coin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .coin-about {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
  }
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .coin-back {
    margin-bottom: 14px;
  }
  .coin-head {
    flex-wrap: wrap;
    gap: 12px 14px;
  }
  .coin-head > .token-avatar {
    width: 52px;
    height: 52px;
    font-size: 19px;
  }
  .coin-title h1 {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* The price takes its own row under the name, read left to right. */
  .coin-price {
    display: flex;
    flex-basis: 100%;
    align-items: baseline;
    gap: 10px;
  }
  .coin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 20px;
  }
  .coin-actions .button {
    min-width: 0;
    padding: 9px 10px;
    font-size: 12.5px;
  }
  /* Launch one like this takes a row of its own, and so does a last button left without a partner. */
  .coin-actions .button.primary,
  .coin-actions .button:nth-child(even):last-child {
    grid-column: 1 / -1;
  }
  .coin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .coin-chart {
    padding: 8px;
  }
  .coin-chart .gmgn-chart {
    min-height: 380px;
  }
  .coin-about {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Live on Stonkinator: the homepage band under the hero ----------
 * The same smoked panel as the launch studio: a head with today's free launches, then the launch of the
 * day beside the six newest coins. terminal.js repaints its inside every 30 seconds. */
.live-band {
  position: relative;
  isolation: isolate;
  margin-top: 20px;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--lg-r-xl);
  /* Its width, not the window's, decides how many figures fit in a row of .live-stats. */
  container: live-band / inline-size;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(255, 130, 0, 0.05), transparent 60%),
    linear-gradient(180deg, #0c0c0d, #070708);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--lg-depth);
}
.live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
}
.live-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: var(--lg-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #f5f5f6;
}
.live-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 130, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.4);
  color: var(--lg-orange-hi);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.live-pill .icon {
  width: 14px;
  height: 14px;
}
.live-pill.is-paused {
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #b9bbc0;
}
/* The band's numbers: one row of figures between hairlines, each cell divided from the last. */
.live-stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--lg-hairline);
  border-bottom: 1px solid var(--lg-hairline);
  list-style: none;
}
.live-stats li {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 0 16px;
}
.live-stats li:first-child {
  padding-left: 0;
}
.live-stats li + li {
  border-left: 1px solid var(--lg-hairline);
}
.live-stats strong {
  overflow: hidden;
  color: var(--lg-text);
  font-family: Sora, Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-stats span {
  color: #85878d;
  font-size: 11.5px;
  line-height: 1.35;
}
/* Two figures a row once the band is too narrow for five side by side (on phones, and beside an open
 * sidebar on a tablet), so a figure like $125.00K is never cut short. The hairlines sit between them as in
 * a table. */
@container live-band (max-width: 680px) {
  .live-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }
  .live-stats li {
    padding: 12px 0 12px 14px;
  }
  .live-stats li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .live-stats li:nth-child(n + 3) {
    border-top: 1px solid var(--lg-hairline);
  }
}
.live-body {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.live-body.is-list-only {
  grid-template-columns: minmax(0, 1fr);
}
/* Rows keep their own height: a short list sits at the top beside the launch of the day. */
.live-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.is-list-only .live-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.live-coin,
.live-top {
  display: flex;
  min-width: 0;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: inherit;
  transition: box-shadow 0.2s;
}
.live-coin:hover,
.live-top:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.live-list > li {
  display: flex;
  min-width: 0;
}
.live-coin {
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.live-coin .token-avatar,
.live-top .token-avatar {
  flex: none;
  overflow: hidden;
}
.live-coin-name {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.live-coin-name strong,
.live-coin-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-coin-name strong {
  color: var(--lg-text);
  font-size: 13.5px;
  font-weight: 600;
}
/* Under a band coin's name: its ticker and pair, which give way first, then its stage pill. */
.live-coin-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.live-coin-sub small {
  min-width: 0;
}
.live-coin-sub .coin-stage {
  flex: none;
  padding: 1px 7px;
  font-size: 10.5px;
}
.live-coin-name small,
.live-coin-cap small {
  color: #85878d;
  font-size: 11.5px;
}
.live-coin-cap {
  display: grid;
  flex: none;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
.live-coin-cap strong {
  color: #e4e5e7;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.live-top {
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.live-top-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lg-orange-hi);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.live-top-kicker .icon {
  width: 14px;
  height: 14px;
}
.live-top-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.live-top-head .token-avatar {
  width: 44px;
  height: 44px;
}
.live-top-head .change {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
}
.live-top-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lg-hairline);
}
.live-top-stats > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.live-top-stats small {
  color: #7d7f85;
  font-size: 11px;
}
.live-top-stats strong {
  overflow: hidden;
  color: var(--lg-text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-top-note {
  margin-top: auto;
  color: #85878d;
  font-size: 12px;
  line-height: 1.5;
}
.live-loading {
  min-height: 120px;
}
.live-note,
.live-empty p {
  margin: 0;
  color: #8f9197;
  font-size: 13px;
}
.live-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
/* My launches, linked from the studio's last step. */
.launch-step a {
  color: #d4d5d8;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
.launch-step a:hover {
  color: var(--lg-orange-hi);
}
@media (max-width: 1150px) {
  .live-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .is-list-only .live-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .live-band {
    padding: 18px 16px;
    border-radius: 22px;
  }
  .live-head h2 {
    font-size: 22px;
  }
  .live-stats strong {
    font-size: 18px;
  }
  .live-list,
  .is-list-only .live-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .live-coin {
    padding: 10px 12px;
  }
  .live-top {
    padding: 16px;
  }
}

/* ---------- My launches: /terminal/launches ----------
 * The allowances as a row of glass tiles, then one card per launch post: its outcome chip and time, the
 * post, what happened in plain words, the bot's reply folded away, and its links. */
.launches-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.5;
}
.launches-note .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--lg-orange-hi);
}
.allowances {
  margin-bottom: 20px;
}
.allowance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 0;
}
.allowance {
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.allowance.is-wide {
  grid-column: 1 / -1;
}
.allowance dt {
  color: #7d7f85;
  font-size: 11.5px;
}
.allowance dd {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
}
.allowance strong {
  color: var(--lg-text);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.allowance small {
  color: #8f9197;
  font-size: 12px;
  line-height: 1.45;
}
.allowance-nudge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 2px 0;
  color: #8f9197;
  font-size: 12.5px;
  line-height: 1.5;
}
.allowance-nudge .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--lg-orange-hi);
}
.allowance-nudge a,
.post-story a {
  color: #d4d5d8;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
.allowance-nudge a:hover,
.post-story a:hover {
  color: var(--lg-orange-hi);
}
.post-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-row {
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.post-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #b9bbc0;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* Green: it went live. Orange, with a pulse: on its way. Red: it didn't go out. */
.post-chip.is-go {
  background: rgba(96, 217, 160, 0.1);
  box-shadow: inset 0 0 0 1px rgba(96, 217, 160, 0.4);
  color: var(--positive);
}
.post-chip.is-busy {
  background: rgba(255, 130, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.4);
  color: var(--lg-orange-hi);
}
.post-chip.is-busy::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: post-pulse 1.6s ease-in-out infinite;
}
@keyframes post-pulse {
  50% {
    opacity: 0.3;
  }
}
.post-chip.is-stop {
  background: rgba(255, 99, 99, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 120, 0.35);
  color: #ff9a9a;
}
.post-coin {
  min-width: 0;
  overflow: hidden;
  color: var(--lg-text);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-coin span {
  color: #a7a9ae;
  font-weight: 500;
}
.post-head time {
  margin-left: auto;
  color: #7d7f85;
  font-size: 12px;
  white-space: nowrap;
}
.post-text {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--lg-r-md);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #d4d5d8;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.post-text.is-missing {
  color: #7d7f85;
  font-style: italic;
}
.post-story {
  margin: 10px 0 0;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.post-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  color: #ff9a9a;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.post-error .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}
.post-reply {
  margin-top: 10px;
  font-size: 12.5px;
}
.post-reply summary {
  width: fit-content;
  color: #9a9ca2;
  cursor: pointer;
}
.post-reply summary:hover {
  color: var(--lg-text);
}
.post-reply p {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  color: #b9bbc0;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.post-actions .button {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}
.post-actions .icon {
  width: 13px;
  height: 13px;
}
/* The pulse stops with the Settings pause, and for reduced motion. */
.motion-off .post-chip.is-busy::before {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .post-chip.is-busy::before {
    animation: none;
  }
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .allowance-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .post-row {
    padding: 14px;
  }
  .post-head time {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ---------- Release 2: no dead ends ---------- */
/* Hot pairs today: one row of chips under the most traded grid, wrapping (never scrolling sideways) on phones. */
.hot-pairs {
  margin-top: 18px;
}
.hot-pairs h3 {
  margin: 0;
  color: var(--lg-text);
  font-size: 13px;
  font-weight: 600;
}
.hot-pairs .hot-pairs-note {
  margin: 4px 0 10px;
  color: #7d7f85;
  font-size: 11.5px;
}
.hot-pair-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hot-pair {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #d4d5d8;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    color 0.2s;
}
.hot-pair:hover,
.hot-pair:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--lg-text);
}
.hot-pair .icon {
  width: 13px;
  height: 13px;
  color: #9a9ca2;
}
.hot-pair strong {
  color: var(--lg-text);
  font-weight: 600;
}
.hot-pair small {
  color: #8a8c92;
  font-size: 10.5px;
}
.hot-pair span {
  color: #a9abb0;
}
/* A review without artwork shows the ticker's letters, at the artwork's size. */
.review-token > .token-avatar {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  font-size: 22px;
}
/* The launch form's description counter, beside its label. */
.field-count {
  color: #75777d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Settings: a service that's off says what to do instead, with its button beside the words. */
.settings-item > .service-status + .button {
  margin-left: 0;
}

/* ---------- Your latest launch post: the homepage strip under the Live band ----------
 * One glass card: the newest launch post's outcome chip, coin and time, what happened in plain words, its
 * links, and one line on the account's free launch. Signed out (or without X), a slim one-line prompt. */
.my-latest {
  margin-top: 16px;
  padding: 18px clamp(16px, 2vw, 24px);
  border-radius: var(--lg-r-xl);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  min-width: 0;
}
.my-latest.is-prompt {
  padding: 12px clamp(16px, 2vw, 20px);
}
.latest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.latest-head h2 {
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.latest-post {
  min-width: 0;
}
.latest-empty {
  margin: 0;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.55;
}
.latest-free,
.latest-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.latest-free {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.latest-free p,
.latest-prompt p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: #c4c6cb;
  font-size: 13px;
  line-height: 1.5;
}
.latest-free .icon,
.latest-prompt p .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--lg-orange-hi);
}
.latest-free .button,
.latest-prompt .button {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 12.5px;
}
/* The coin page: one line when the signed-in poster launched this coin from X. */
.coin-mine p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.coin-mine .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--lg-orange-hi);
}
.coin-mine a {
  color: #d4d5d8;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}
.coin-mine a:hover {
  color: var(--lg-orange-hi);
}
/* Your tokens: the coins an X account's launch posts launched, one row each, opening the coin page. */
.x-launch-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.x-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--lg-r-lg);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: var(--lg-text);
}
.x-launch:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 130, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.x-launch time {
  margin-left: auto;
  color: #7d7f85;
  font-size: 12px;
  white-space: nowrap;
}
.x-launch > .icon {
  width: 14px;
  height: 14px;
  color: #9a9ca2;
}
/* Your tokens, when those coins can't be read: one line in their place. */
.x-launch-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.55;
}
.x-launch-note .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--lg-orange-hi);
}
.launch-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .my-latest {
    border-radius: 20px;
  }
  .latest-free .button,
  .latest-prompt .button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Live feed: the homepage's list under the Live band ----------
 * The same glass card as Your latest launch post: a head, then one row per event, each a text chip, a line
 * that wraps, and a time in tabular figures. Rows that arrive while the page is open fade in once; nothing
 * else moves. terminal.js repaints its inside every 30 seconds and ticks its times every second. */
.live-feed {
  margin-top: 16px;
  padding: 18px clamp(16px, 2vw, 24px);
  border-radius: var(--lg-r-xl);
  background: var(--lg-fill);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  min-width: 0;
}
.feed-head {
  margin-bottom: 12px;
}
.feed-head h2 {
  margin: 0;
  font-family: Sora, Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.feed-head .section-note {
  max-width: 72ch;
}
.feed-note {
  margin: 0;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.55;
}
.feed-list {
  /* One set of columns for every row (subgrid), so the lines start level whatever their chip says. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feed-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  min-width: 0;
}
.feed-row + .feed-row {
  border-top: 1px solid var(--lg-hairline);
}
.feed-chip {
  justify-self: start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lg-chip);
  box-shadow: var(--lg-chip-edge);
  color: #b9bbc0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
/* Green: a coin went live or graduated. Orange: a new high. Grey: a post that didn't launch. The words say
 * the same, so the colour is never all there is. */
.feed-chip.is-launched,
.feed-chip.is-graduated {
  background: rgba(96, 217, 160, 0.1);
  box-shadow: inset 0 0 0 1px rgba(96, 217, 160, 0.4);
  color: var(--positive);
}
.feed-chip.is-high {
  background: rgba(255, 130, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 160, 60, 0.4);
  color: var(--lg-orange-hi);
}
.feed-line {
  margin: 0;
  min-width: 0;
  color: #a3a5ab;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.feed-coin {
  color: var(--lg-text);
  text-decoration: none;
}
.feed-coin strong {
  font-weight: 600;
}
.feed-coin span {
  color: #9a9ca2;
}
.feed-coin:hover strong,
.feed-coin:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feed-row time {
  justify-self: end;
  color: #85878d;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed-row.is-new {
  animation: feed-in 0.6s ease-out both;
}
@keyframes feed-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.motion-off .feed-row.is-new {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .feed-row.is-new {
    animation: none;
  }
}
/* On phones the time goes under the line, beside the chip's column. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .live-feed {
    border-radius: 20px;
  }
  .feed-list {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .feed-row time {
    grid-column: 2;
    justify-self: start;
  }
}