/* ==========================================================================
   CLONE — layout & components
   ========================================================================== */

/* ==========================================================================
   App shell — sidebar + content
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 14px;
  background: var(--panel);
  border-right: var(--border) solid var(--line);

  /*
   * The sidebar holds more than fits on a short window. Two things keep it
   * usable rather than clipped:
   *
   * 1. It scrolls. `overflow-y: auto` on a flex column lets the content be
   *    reached at any height. `overscroll-behavior: contain` stops the scroll
   *    from chaining out to the page behind it, which otherwise makes the
   *    whole app feel like it jumped when you reach the end of the list.
   *
   * 2. The flexible spacers shrink first. `min-height: 0` on the blocks below
   *    is what allows that — without it a flex item refuses to go under its
   *    content size, and the overflow happens anyway. The gaps collapse before
   *    any label or button is ever cut.
   */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* A slimmer, quieter bar than the default — it should not compete with the nav. */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar > * { min-height: 0; flex-shrink: 0; }

.side-top { padding: 2px 6px 14px; }

/* Logo lockup and the collapse control share one row. The logo takes the
   space, the button keeps its size — hence `flex: 1 1 auto` + `min-width: 0`
   on the logo, and `flex: none` on the button. */
.side-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.logo-text { display: block; min-width: 0; }
.logo-mark {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: var(--border) solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 3px 0 0 var(--accent-shadow);
}
.logo-word {
  font-family: var(--font-px);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}
.logo-tag {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
}

.side-nav { display: flex; flex-direction: column; gap: 4px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: var(--border) solid transparent;
  border-radius: 13px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
  transition: background .15s, color .15s, box-shadow .15s;
}
.side-link:hover { background: var(--panel-2); color: var(--ink); }
.side-link.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
.side-link .ic { flex: none; }

.side-cta { margin: 10px 0 4px; }

.side-mascot {
  display: flex;
  align-items: center;
  gap: 10px;
  /*
   * The auto margin pushes this block down when the sidebar has spare room,
   * and gives that room back first when it does not. `flex: 0 1 auto` lets the
   * block itself shrink, but never below its content, so the text is never
   * clipped — the space around it is what disappears.
   */
  margin: auto 6px 8px;
  flex: 0 1 auto;
  padding: 10px;
  background: var(--panel-2);
  border: var(--border) dashed var(--line-2);
  border-radius: 14px;
}
.side-mascot p { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.3; }

.side-ca { margin: auto 6px 8px; flex: 0 1 auto; }
.side-ca-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
}
.side-ca-label { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.side-ca-addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

.side-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: var(--border) solid var(--line);
}
.side-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.side-theme > .row { margin-left: auto; }

/* Toggle switch. */
.toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--panel-2);
  border: var(--border) solid var(--line-2);
  border-radius: 10px;
}
.toggle button {
  width: 30px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--faint);
  transition: background .15s, color .15s;
}
.toggle button.on { background: var(--panel); color: var(--accent-text); box-shadow: 0 1.5px 0 0 var(--shadow); }

/* ==========================================================================
   Content area + topbar
   ========================================================================== */

.content {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 40px;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border) solid var(--line);
}
.topbar-logo { display: none; }
.topbar .wallet-btn { margin-left: 0; }

.wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 4px 0 0 var(--accent-shadow);
  transition: transform 80ms, filter .15s;
  white-space: nowrap;
}
.wallet-btn:hover { filter: brightness(1.08); }
.wallet-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--accent-shadow); }

/* ==========================================================================
   Stats strip
   ========================================================================== */

.statgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.stat {
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 0 var(--shadow);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-family: var(--font-px);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
.stat-sub { font-size: 11px; color: var(--faint); }

/* ==========================================================================
   Pot banner
   ========================================================================== */

/* Countdown boxes. */

/* ==========================================================================
   Home three-column grid
   ========================================================================== */

/* ==========================================================================
   Cloneling avatar (pixel emoji)
   ========================================================================== */

.clone {
  flex: none;
  display: block;
  border-radius: 10px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  image-rendering: pixelated;
  overflow: hidden;
}

/* Rank badge used in leaderboards. */

/* ==========================================================================
   Leaderboard rows (Top clonelings / Today's race)
   ========================================================================== */

/* ==========================================================================
   Feed
   ========================================================================== */

/* Trade receipt attached to a post. */
.trade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 0 0 var(--shadow);
}

/* Blocked-action post gets a muted, dashed treatment. */

/* ==========================================================================
   Token rows
   ========================================================================== */

.trow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: var(--border) dashed var(--line-2);
  transition: background .15s;
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--panel-2); }
.trow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trow-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.trow-sub { font-size: 11px; color: var(--muted); }
.trow-right { text-align: right; flex: none; }
.trow-mcap { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tables
   ========================================================================== */

/* ==========================================================================
   Filter bar
   ========================================================================== */

/* ==========================================================================
   Cloneling detail page
   ========================================================================== */

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 12px;
}
.back:hover { color: var(--ink); }

/* The scene strip at the top of a cloneling page. */

/* Identity card that overlaps the scene. */

.idcard-name {
  font-family: var(--font-px);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}

/* Chart. */
.chart { position: relative; width: 100%; height: 210px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }

/* Fee-split bar. */

/* Rule list. */

.rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
}

/* ==========================================================================
   Whisper panel
   ========================================================================== */

/* ==========================================================================
   Pot page
   ========================================================================== */

/* ==========================================================================
   404
   ========================================================================== */

.center-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 20px;
}
.center-page .cp-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; }

/* ==========================================================================
   Timeline (activity)
   ========================================================================== */

/* ==========================================================================
   Toast/misc helpers
   ========================================================================== */

.statgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.mini-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 1300px) {
  .statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  
  
}

/*
 * Icon rail.
 *
 * The sidebar collapses to a 78px rail of icons in two situations:
 *
 *   1. Automatically, below 980px — there is no room for a full sidebar next
 *      to the content. (media query at the bottom of this block)
 *   2. On request, at any width — the collapse control in the sidebar's top
 *      row sets `data-side="rail"` on <html>. People split their screen, or
 *      just want the reading width back, and the auto breakpoint cannot know
 *      that.
 *
 * So the rules below are written once against the attribute and shared. The
 * media query only has to contribute the `--side-w` override that the
 * attribute selector cannot express (see the note there).
 *
 * Everything that carries words has to be hidden explicitly, and the rail
 * must not scroll sideways — a single visible text node makes the tagline wrap
 * into a vertical column and burst out of the rail, which is what happened
 * before.
 *
 * `overflow-x: hidden` is a belt-and-braces guard: it means even if a future
 * block forgets to hide its text, the rail degrades to a clipped icon rather
 * than a broken layout.
 */
/* `html[data-side]` (0,1,1) outranks the `:root` token below it (0,1,0), so the
   grid track and the sidebar both follow the collapsed width. */
html[data-side="rail"] { --side-w: 78px; }
html[data-side="rail"] .sidebar {
  align-items: center;
  padding: 14px 10px;
  overflow-x: hidden;
}
html[data-side="rail"] .side-top { padding: 2px 0 12px; }

/* Every word-bearing element, hidden together.
   Note: `.side-theme .row` is deliberately NOT in this list — it holds the
   toggle buttons themselves, so hiding it would remove the controls. Only
   the `.th-label` ("Theme" / "Candles") goes. */
html[data-side="rail"] .side-link span,
html[data-side="rail"] .logo-text,
html[data-side="rail"] .logo-word,
html[data-side="rail"] .logo-tag,
html[data-side="rail"] .side-cta span,
html[data-side="rail"] .side-mascot,
html[data-side="rail"] .side-theme > .th-label,
html[data-side="rail"] .side-theme .th-label { display: none !important; }

html[data-side="rail"] .side-link { justify-content: center; padding: 11px; }
html[data-side="rail"] .side-cta .btn { padding: 0 11px; }
html[data-side="rail"] .side-bottom { align-items: center; width: 100%; margin-top: auto; }

/*
 * The collapse control sits ON the sidebar's right edge, level with the logo.
 * It lives outside .sidebar (which scrolls, and would clip it) and is placed
 * from --side-w, so it rides the edge as the width animates.
 */
.side-collapse {
  position: fixed;
  top: calc(var(--top-h) / 2 - 14px);
  left: calc(var(--side-w) - 14px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: var(--border) solid var(--line-2);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 2px 0 0 var(--shadow);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.side-collapse:hover { color: #fff; border-color: var(--accent); background: var(--accent); transform: scale(1.08); }
/* The chevron points the way the sidebar will go, then mirrors once collapsed. */
.side-collapse .ic { transform: rotate(0deg); transition: transform .28s ease; }
html[data-side="rail"] .side-collapse .ic { transform: rotate(180deg); }

html[data-side="rail"] .side-head { justify-content: center; width: 100%; }
html[data-side="rail"] .logo { flex: none; justify-content: center; }

/* ---- the collapse animation ----
   Registering --side-w as a length lets it transition, so the grid track, the
   sidebar and the edge button all move together from one value. Labels are
   display:none in the rail and cannot fade out, so they fade IN on expand. */
@property --side-w { syntax: "<length>"; inherits: true; initial-value: 244px; }
html { transition: --side-w .3s cubic-bezier(.2, .8, .2, 1); }
.side-link span, .side-cta span, .logo-text, .side-mascot, .side-ca, .th-label {
  white-space: nowrap;
  animation: side-fade .35s ease both;
}
.side-mascot p { white-space: normal; }
@keyframes side-fade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

html[data-side="rail"] .side-theme {
  /*
   * Both toggles stay visible in the rail — they are the only interactive
   * controls down here, and they matter (theme and the candle convention).
   *
   * Each holds two buttons. At full size 2x30px + gaps + padding came to 88px,
   * wider than the 78px rail, so they are scaled down to fit: 2x24px + gap +
   * padding = 60px, comfortably inside.
   */
  padding: 6px 0;
  justify-content: center;
  width: 100%;
}
html[data-side="rail"] .side-theme .row { margin: 0; justify-content: center; }
html[data-side="rail"] .side-theme .toggle { margin: 0; padding: 2px; }
html[data-side="rail"] .side-theme .toggle button { width: 24px; height: 22px; }

@media (max-width: 980px) {
  /* The width cannot live on the attribute selector — below 980px the rail is
     forced whatever the preference says — so the media query owns it here. */
  :root { --side-w: 78px; }
  .sidebar {
    align-items: center;
    padding: 14px 10px;
    overflow-x: hidden;
  }
  .side-top { padding: 2px 0 12px; }

  /* Same stacked head as the manual rail: the logo keeps the top slot, and the
     collapse control is hidden below (see the end of this block). */
  .side-head { justify-content: center; width: 100%; }
  .logo { flex: none; justify-content: center; }

  .side-link span,
  .logo-text,
  .logo-word,
  .logo-tag,
  .side-cta span,
  .side-mascot,
  .side-theme > .th-label,
  .side-theme .th-label { display: none !important; }

  .side-link { justify-content: center; padding: 11px; }
  .side-cta .btn { padding: 0 11px; }
  .side-bottom { align-items: center; width: 100%; margin-top: auto; }

  .side-theme {
    padding: 6px 0;
    justify-content: center;
    width: 100%;
  }
  .side-theme .row { margin: 0; justify-content: center; }
  .side-theme .toggle { margin: 0; padding: 2px; }
  .side-theme .toggle button { width: 24px; height: 22px; }

  /* At this width the rail is forced, so the manual control has no job. */
  .side-collapse { display: none; }

  .agent-grid { grid-template-columns: minmax(0, 1fr); }
  
  
}

@media (max-width: 720px) {
  .content { padding: 14px 14px 32px; }
  .topbar { padding: 0 14px; }
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .idcard-name { font-size: 28px; }
  .search kbd { display: none; }
  
}

/* ==========================================================================
   Search results dropdown
   ========================================================================== */

.search-results {
  position: absolute;
  top: calc(var(--top-h) - 6px);
  left: 22px;
  width: min(460px, calc(100vw - 44px));
  max-height: 62vh;
  overflow-y: auto;
  z-index: 60;
  background: var(--panel);
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 0 var(--shadow);
}
.search-results .trow:last-child { border-bottom: none; }
.search-results .panel-head:first-child { border-top: none; }

/* ==========================================================================
   Nest — emoji picker
   ========================================================================== */

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 9px;
}
.emoji-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
  transition: transform .1s, border-color .15s, box-shadow .15s, background .15s;
}
.emoji-pick:hover { background: var(--panel-3); transform: translateY(-2px); }
.emoji-pick.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}
.emoji-pick-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.emoji-pick.on .emoji-pick-name { color: var(--accent-text); }

/* ==========================================================================
   Nest — option cards
   ========================================================================== */

/* ==========================================================================
   How it works — numbered steps
   ========================================================================== */

.steps { display: grid; gap: 10px; }
.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 14px;
}
.step-n {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: var(--border) solid var(--accent);
  border-radius: 11px;
  box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  font-family: var(--font-px);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-text);
}
.step-body { min-width: 0; }
.step-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.step-text { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Odds and ends
   ========================================================================== */

@media (max-width: 720px) {
  .search-results { left: 14px; width: calc(100vw - 28px); }
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}

/* ==========================================================================
   Short windows — keep the whole sidebar reachable
   --------------------------------------------------------------------------
   The sidebar carries a logo, seven nav links, a CTA, a mascot, the contract
   address and two toggles. Laid out at its natural rhythm that is ~800px, so
   on a laptop with a browser chrome, or any window under ~800px tall, the
   bottom block was pushed off screen.

   It scrolls now (see .sidebar above), which makes everything reachable. These
   queries go further and tighten the rhythm as height is lost, so on most
   ordinary window sizes nothing has to scroll at all. Each step is keyed to
   height only — width is irrelevant to a vertical overflow.
   ========================================================================== */

/* Under 860px: shave the generous spacing. Nothing is removed yet. */
@media (max-height: 860px) {
  .sidebar { gap: 4px; padding: 12px 12px 12px; }
  .side-top { padding: 2px 6px 10px; }
  .side-link { padding: 9px 12px; font-size: 14.5px; }
  
  .side-cta { margin: 8px 0 3px; }
  .side-mascot { padding: 8px; margin-bottom: 6px; }
  .side-ca { margin-bottom: 6px; }
  .side-bottom { padding-top: 8px; }
  .side-theme { padding: 5px 6px 5px 12px; }
}

/* Under 760px: drop the mascot. It is the most decorative block here and the
   least useful — the same line is repeated in the whisper panel on a cloneling
   page, where it is actually actionable. */
@media (max-height: 760px) {
  .side-mascot { display: none; }
  .side-top { padding-bottom: 8px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-word { font-size: 30px; }
  .side-collapse { top: 20px; }
}

/* Under 680px: tighten the nav to its icons-and-labels minimum. */
@media (max-height: 680px) {
  .sidebar { gap: 3px; padding: 10px 10px; }
  .side-link { padding: 7px 10px; font-size: 14px; border-radius: 11px; }
  
  .side-cta { margin: 6px 0 2px; }
  .side-cta .btn { padding-top: 7px; padding-bottom: 7px; }
  .side-ca-row { padding: 7px 9px; }
  .side-theme { padding: 4px 6px 4px 10px; font-size: 12.5px; }
  .toggle button { width: 27px; height: 21px; }
}

/* Under 620px: the icon+label nav is the tallest remaining block, so trim its
   leading. Still seven rows — nothing has been taken away. */
@media (max-height: 620px) {
  .side-nav { gap: 1px; }
  .side-link { padding: 6px 10px; font-size: 13.5px; }
  
  .side-link .ic { width: 16px; height: 16px; }
  .side-bottom { padding-top: 6px; }
  .side-theme { padding: 3px 6px 3px 10px; font-size: 12px; }
  .toggle { padding: 2px; }
  .toggle button { width: 25px; height: 20px; }
  .side-ca-row { padding: 6px 9px; }
}

/* Under 580px: the logo tagline and the CA label go. The nav, the CTA and both
   toggles still fit — those are the things you actually need to reach. */
@media (max-height: 580px) {
  .logo-tag { display: none; }
  .side-ca-label { display: none; }
  .side-top { padding: 0 4px 6px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-word { font-size: 20px; }
  .side-nav { gap: 2px; }
  .side-link { padding: 6px 9px; font-size: 13.5px; }
  .side-link .ic { width: 16px; height: 16px; }
}

/* Under 480px: last resort. Everything above has already tightened, so the
   remaining slack is in the CTA and the two toggles — stack them compactly and
   let the sidebar's own scroll handle anything still left over. */
@media (max-height: 480px) {
  .sidebar { padding: 8px 8px; gap: 2px; }
  .side-cta { margin: 4px 0 2px; }
  .side-theme { padding: 3px 4px 3px 8px; }
  .side-bottom { padding-top: 6px; gap: 0; }
}

/* ==========================================================================
   CLONE launchpad
   ========================================================================== */

/* A pixel emoji: one slice of assets/img/emojis.png (see assets/js/emojis.js). */
.emo {
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  background-image: url("/assets/img/emojis.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
  vertical-align: middle;
}
.emo-missing { background: var(--panel-3); border-radius: 6px; }
.logo-mark { overflow: hidden; }

/* A framed emoji, the avatar used in lists and on the coin page. */
.tile {
  flex: none;
  display: inline-grid;
  place-items: center;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 12px;
}
.tile-xs { width: 32px; height: 32px; border-radius: 9px; }
.tile-sm { width: 44px; height: 44px; }
.tile-lg { width: 84px; height: 84px; border-radius: 16px; }
.tile-xl { width: 124px; height: 124px; border-radius: 22px; box-shadow: 0 5px 0 0 var(--shadow); }

.wrap { flex-wrap: wrap; }
.panel-body.flush { padding: 0; }
.coin-row { grid-template-columns: auto minmax(0, 1fr) auto; }

/* ---- home ---- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 34px 34px 30px;
  overflow: hidden;
}
.hero-title {
  font-family: var(--font-px);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  font-weight: 700;
}
.hero-sub { margin-top: 14px; font-size: 15.5px; color: var(--muted); line-height: 1.55; max-width: 52ch; }
.hero-count { font-size: 13px; color: var(--muted); }
.hero-count b { color: var(--ink); font-family: var(--font-px); font-size: 20px; }
.hero-art { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-egg { animation: bob 3.4s ease-in-out infinite; }
.parade { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.parade-item { animation: bob 2.8s ease-in-out infinite; animation-delay: var(--d); }

.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.coin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 16px;
  text-align: center;
  transition: transform .1s, border-color .15s;
  min-width: 0;
}
.coin-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.coin-card .tile { margin-bottom: 6px; background: var(--panel); }
.coin-card-name { font-weight: 700; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-card-tick { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.coin-card-mcap { font-weight: 700; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.coin-card-age { font-size: 11px; color: var(--faint); }

/* ---- clone ---- */
.picker-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.picker-bar .tabs { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.picker-bar .tab { flex: none; }
.picker-search { width: 190px; flex: 0 1 190px; }
.emoji-grid { max-height: 460px; overflow-y: auto; padding: 2px 4px 4px 2px; }

.clone-form { display: grid; gap: 14px; }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 2px solid var(--line-2);
  box-shadow: inset 0 0 0 2px var(--panel);
}
.swatch.on { border-color: var(--ink); transform: translateY(-2px); }

.clone-side { position: sticky; top: calc(var(--top-h) + 16px); }
.preview-art {
  width: 100%;
  aspect-ratio: 1;
  max-width: 240px;
  margin-inline: auto;
  border-radius: 22px;
  overflow: hidden;
  border: var(--border) solid var(--line);
  background: var(--panel-2);
}
.preview-art img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.preview-name { text-align: center; font-family: var(--font-px); font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.preview-tick { text-align: center; color: var(--muted); font-size: 14px; }

.facts { display: grid; gap: 9px; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.facts li::marker { color: var(--accent); }

.notice {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
}
.notice-err { background: var(--down-soft); color: var(--down); border: var(--border) solid color-mix(in srgb, var(--down) 40%, transparent); }

.clone-status {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  font-size: 13px; line-height: 1.45;
}
.clone-status a { color: var(--accent-text); text-decoration: underline; }
.clone-status.is-err { background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 40%, transparent); color: var(--down); }
.clone-status.is-ok { background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 40%, transparent); color: var(--up); font-weight: 700; }
.btn.is-busy { cursor: progress; opacity: .85; }

.egg-wobble { display: inline-flex; animation: wobble .5s ease-in-out infinite; }
.cloneed-pop { display: inline-flex; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.2); } to { transform: scale(1); } }

/* ---- coin ---- */
.coin-id { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.about { font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.kv {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: var(--border) dashed var(--line-2);
  font-size: 13px;
}
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--muted); }
.kv-v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.kv-v a { color: var(--accent-text); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding: 24px; }
  .hero-art { order: -1; }
  .clone-side { position: static; }
}
@media (max-width: 560px) {
  .form-2 { grid-template-columns: 1fr; }
  .picker-search { width: 100%; flex-basis: 100%; }
  .kv { flex-direction: column; align-items: flex-start; }
}

/* ---- home: the cast showcase ---- */
.marquees { display: grid; gap: 12px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Items are rendered twice; sliding by exactly half loops with no seam.
   Spacing is a margin on each item (not `gap`) so the two halves are equal. */
.marquee-track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 110s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-dup { display: flex; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 96px;
  margin-right: 12px;
  padding: 8px 0 6px;
  border-radius: 16px;
  transition: transform .15s;
}
.marquee-item:hover { transform: translateY(-4px); }
.marquee-item:hover .tile { border-color: var(--accent); background: var(--accent-soft); }
.marquee-name { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.example-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.example { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.example-art {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--line-2);
  box-shadow: 0 5px 0 0 var(--shadow);
  margin-bottom: 8px;
  transition: transform .15s;
}
.example:hover .example-art { transform: translateY(-3px) rotate(-3deg); }
.example-name { font-weight: 700; font-size: 13.5px; }
.example-tick { font-family: var(--mono); font-size: 12px; color: var(--muted); }

@media (max-width: 1150px) { .example-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .example-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
  .marquee-dup { display: none; }
}

/* Pixel icon buttons (CA copy, pump.fun link). */
.px-ic { display: block; image-rendering: pixelated; }
.px-btn { color: var(--ink); }
.px-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.px-btn:disabled:active { transform: none; }
.side-ca-row .px-btn { width: 32px; height: 32px; }
/* The X box sits on top of the $CLONE box; only the first takes the auto margin. */
.side-x + .side-ca { margin-top: 0; }

/* In the rail the X / CA / pump.fun boxes keep their buttons: the labels go,
   the buttons stack into one icon column above the theme toggle. */
html[data-side="rail"] .side-ca { margin: auto 0 4px; width: 100%; }
html[data-side="rail"] .side-x + .side-ca { margin-top: 0; }
html[data-side="rail"] .side-ca-row { flex-direction: column; gap: 6px; padding: 4px 0; background: none; border: none; }
html[data-side="rail"] .side-ca-row > .grow { display: none; }
@media (max-width: 980px) {
  .side-ca { margin: auto 0 4px; width: 100%; }
  .side-x + .side-ca { margin-top: 0; }
  .side-ca-row { flex-direction: column; gap: 6px; padding: 4px 0; background: none; border: none; }
  .side-ca-row > .grow { display: none; }
}

/* ---- clone: optional dev buy ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.devbuy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.devbuy-presets { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.devbuy-presets .tab { flex: none; }
.devbuy-custom { position: relative; flex: 0 1 150px; }
.devbuy-custom .input { width: 100%; padding-right: 44px; }
.devbuy-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; }
.devbuy-cost {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  font-size: 13px;
}
.devbuy-cost b { font-family: var(--font-px); font-size: 17px; color: var(--ink); }
.devbuy-cost.is-warn { border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.devbuy-warn { color: var(--down); font-weight: 700; }
@media (max-width: 560px) { .devbuy-custom { flex-basis: 100%; } }

/* ---- clone: the egg row (up to 5 clonelings + the next egg) ---- */
.egg-box {
  padding: 22px 14px 16px;
  background: var(--panel-2); border: var(--border) dashed var(--line-2); border-radius: 16px;
}
.egg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.egg-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  width: 104px; min-height: 112px; padding: 10px 6px 8px;
  background: var(--panel); border: var(--border) solid var(--line); border-radius: 14px;
  transition: background .15s, border-color .15s, transform .1s;
}
button.egg-slot:hover { border-color: var(--accent); transform: translateY(-2px); }
.egg-slot.on { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.egg-slot-egg { border-style: dashed; background: transparent; }
.egg-slot-name { font-size: 12px; font-weight: 700; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egg-note { margin: 14px 0 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.egg-note b { font-family: var(--font-mono, monospace); color: var(--ink); }
@media (max-width: 560px) { .egg-slot { width: calc(33% - 8px); } }

/* Cloneing: the egg rattles harder and glows, then cracks into two shell
   halves that fly apart while the cloneling pops out in a burst of pixels. */
.egg-rattle { display: inline-flex; transform-origin: 50% 85%; animation: egg-rattle 1.3s ease-in both; }
@keyframes egg-rattle {
  0%   { transform: rotate(0);      filter: none; }
  10%  { transform: rotate(-4deg); }
  20%  { transform: rotate(4deg); }
  30%  { transform: rotate(0); }
  45%  { transform: rotate(-8deg) translateY(-2px); }
  52%  { transform: rotate(8deg); }
  59%  { transform: rotate(-8deg); }
  66%  { transform: rotate(0); }
  72%  { transform: rotate(-13deg) scale(1.04); }
  76%  { transform: rotate(13deg) scale(1.06); }
  80%  { transform: rotate(-13deg) scale(1.08); }
  84%  { transform: rotate(13deg) scale(1.1); }
  88%  { transform: rotate(-9deg) scale(1.12); }
  92%  { transform: rotate(9deg) scale(1.14); }
  100% { transform: rotate(0) scale(1.18); filter: brightness(1.6) drop-shadow(0 0 18px var(--accent)); }
}

/* Fixed 56px tracks (the size of a settled cloneling) so the flash, sparks and
   shells overflow visually but never push the emoji off-centre. */
.egg-burst { position: relative; display: grid; grid-template: 56px / 56px; place-items: center; }
.egg-burst > * { grid-area: 1 / 1; pointer-events: none; }
.egg-flash {
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  animation: egg-flash .6s ease-out both;
}
@keyframes egg-flash { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.egg-spark {
  width: 6px; height: 6px; background: var(--accent);
  animation: egg-spark .7s cubic-bezier(.2, .8, .3, 1) both;
}
.egg-spark:nth-child(odd) { background: var(--ink); width: 4px; height: 4px; }
@keyframes egg-spark {
  from { transform: rotate(var(--a)) translateY(0); opacity: 1; }
  to   { transform: rotate(var(--a)) translateY(-52px); opacity: 0; }
}
.egg-shell { display: inline-flex; z-index: 2; }
.egg-shell-top {
  clip-path: polygon(0 0, 100% 0, 100% 56%, 88% 46%, 75% 58%, 62% 46%, 50% 58%, 38% 46%, 25% 58%, 12% 46%, 0 56%);
  animation: shell-top .7s cubic-bezier(.3, .7, .4, 1) both;
}
.egg-shell-bot {
  clip-path: polygon(0 56%, 12% 46%, 25% 58%, 38% 46%, 50% 58%, 62% 46%, 75% 58%, 88% 46%, 100% 56%, 100% 100%, 0 100%);
  animation: shell-bot .7s cubic-bezier(.3, .7, .4, 1) both;
}
@keyframes shell-top { from { transform: scale(1.18); } 70% { opacity: 1; } to { transform: translate(-30px, -26px) rotate(-40deg); opacity: 0; } }
@keyframes shell-bot { from { transform: scale(1.18); } 70% { opacity: 1; } to { transform: translate(30px, 8px) rotate(35deg); opacity: 0; } }
.egg-burst .cloneed-pop { z-index: 1; animation: clone-pop .6s cubic-bezier(.2, 1.6, .4, 1) .08s both; }
@keyframes clone-pop {
  from { transform: translateY(14px) scale(.1); }
  60%  { transform: translateY(-10px) scale(1.15); }
  to   { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .egg-rattle, .egg-wobble, .cloneed-pop { animation: none; }
}


/* ==========================================================================
   CLONE — pixel + material layer. Flat tonal surfaces, full-pill controls,
   no gradients, no shadows; pixel type for titles, Geist for everything else.
   ========================================================================== */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='10' y='10' width='2' height='2' fill='%23dcdcd4'/%3E%3C/svg%3E");
}
[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect x='10' y='10' width='2' height='2' fill='%23262830'/%3E%3C/svg%3E");
}
.title-px, .hero-title, .ph-title, .logo-word, .clone-name, .clone-card-name, .ex-name, .step-title, .stat-value {
  font-family: var(--font-px); letter-spacing: .01em; font-weight: 400;
}
.panel-head .ph-title { font-size: 22px; font-weight: 400; letter-spacing: .01em; }
.title-px { font-size: 40px; line-height: 1; }
.stat-value { font-size: 34px; }
.step-title { font-size: 20px; }

/* surfaces */
.panel { border: 1px solid var(--line); border-radius: 24px; box-shadow: none; }
.panel-head { border-bottom: 1px solid var(--line); padding: 14px 20px; }
.panel-body { padding: 20px; }
.sidebar { background: var(--bg); border-right: 1px solid var(--line); }
.stat { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: none; }
.step { border: none; background: var(--panel-2); border-radius: 18px; box-shadow: none; }
.step-n { font-family: var(--font-px); background: var(--accent); color: var(--on-accent); border: none; box-shadow: none; border-radius: 10px; }
.side-mascot, .side-ca { border: 1px solid var(--line); border-style: solid; border-radius: 20px; background: var(--panel); box-shadow: none; }

/* controls */
.btn { border-radius: 999px; box-shadow: none !important; font-weight: 600; transform: none !important; }
.btn-sm { border-radius: 999px; }
.btn-lg { border-radius: 999px; height: 50px; padding: 0 24px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { background: var(--panel-2); border-color: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--panel-3); }
.btn:disabled { opacity: 1; background: var(--panel-3); color: var(--faint); }
.chip { border-radius: 999px; border: none; background: var(--panel-2); color: var(--ink-2); box-shadow: none; font-weight: 600; }
.chip-xs { border-radius: 999px; box-shadow: none; }
.chip-mint { background: #dcf5e6; color: #0f6b3a; }
[data-theme="dark"] .chip-mint { background: #143524; color: #7fe2aa; }
.chip-sun { background: #fff1c4; color: #7a5600; }
.input, .textarea, select.input { border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); box-shadow: none; }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tab { border-radius: 999px; }
.tab.on { background: var(--accent); color: var(--on-accent); box-shadow: none; border-color: transparent; }
.side-link { border-radius: 999px; border: none; font-weight: 600; padding: 11px 16px; }
.side-link.on { background: var(--accent-soft); color: var(--accent-text); border: none; box-shadow: none; }
.logo-mark { background: none; border: none; box-shadow: none; width: auto; height: auto; }
.logo-word { font-size: 30px; }
.toast { border-radius: 16px; box-shadow: none; }
.icon-btn { box-shadow: none; }

/* the agents */
.portrait { display: inline-block; flex: none; line-height: 0; border-radius: 22%; overflow: hidden; image-rendering: pixelated; cursor: pointer; }
.portrait svg { width: 100%; height: 100%; display: block; }
.agent-svg .ag-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ag-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--blink, 0s) * -1); }
@keyframes ag-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(.1px) scale(1.012, .988); }
  45% { transform: translateY(-.8px) scale(.992, 1.01); }
  60% { transform: translateY(-.9px) scale(.99, 1.012); }
  80% { transform: translateY(-.3px) scale(1.004, .996); }
}
.agent-svg .ag-lid { animation: ag-blink 5.2s linear infinite; animation-delay: var(--blink, 0s); }
@keyframes ag-blink {
  0%, 88%, 100% { transform: scaleY(0); }
  89% { transform: scaleY(.35); } 90% { transform: scaleY(.75); } 91%, 92% { transform: scaleY(1); }
  93% { transform: scaleY(.6); } 94% { transform: scaleY(.2); } 95% { transform: scaleY(0); }
}
.agent-svg[style*="--blink:1"] .ag-lid, .agent-svg[style*="--blink:3"] .ag-lid { animation-name: ag-blink2; }
@keyframes ag-blink2 {
  0%, 84%, 100% { transform: scaleY(0); }
  85% { transform: scaleY(.5); } 86%, 87% { transform: scaleY(1); } 88% { transform: scaleY(.3); } 89% { transform: scaleY(0); }
  90% { transform: scaleY(.5); } 91%, 92% { transform: scaleY(1); } 93% { transform: scaleY(.4); } 94% { transform: scaleY(0); }
}
.agent-svg .ag-pupils { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1); }
.logo-svg .logo-pupil { transform: translate(calc(max(var(--px, 1), 0) * 1px), calc(var(--py, 0) * 1px)); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1); }
.agent:hover .ag-body { animation: ag-wiggle .7s ease-in-out 1; }
.agent.hop .ag-body { animation: ag-hop .7s linear 1; }
@keyframes ag-wiggle {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); }
}
@keyframes ag-hop {
  0% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(.4px) scale(1.08, .9); }
  22% { transform: translateY(-1.5px) scale(.94, 1.08); }
  38% { transform: translateY(-4px) scale(.97, 1.04); }
  52% { transform: translateY(-4.4px) scale(1, 1); }
  68% { transform: translateY(-1.5px) scale(.97, 1.04); }
  80% { transform: translateY(.3px) scale(1.07, .92); }
  90% { transform: translateY(0) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

.arch-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  font: 400 17px/1 var(--font-px); letter-spacing: .02em; background: var(--accent-soft); color: var(--accent-text); }
.arch-sm { font-size: 15px; padding: 5px 10px; }

/* create page */
.clone-card { overflow: hidden; }
.clone-card-art { aspect-ratio: 1; display: grid; place-items: center; padding: 20px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.clone-card-art .agent-svg { width: 100%; height: auto; max-width: 300px; border-radius: 22%; image-rendering: pixelated; }
.clone-ghost { display: grid; justify-items: center; gap: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.clone-ghost .ic { width: 56px; height: 56px; opacity: .35; }
.clone-card-body { padding: 20px; }
.clone-card-name { font-size: 34px; line-height: 1; }
.clone-tagline { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.greet { position: relative; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--panel-2); font-size: 15px; line-height: 1.5; }
.greet-q { display: none; }
.clone-card.is-forming .clone-card-art .agent-svg, .clone-card.is-forming .clone-ghost { animation: forming .9s steps(3) infinite; }
@keyframes forming { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.lore-box { min-height: 120px; font-size: 15px; line-height: 1.55; }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }
.idea { padding: 8px 14px; border-radius: 999px; border: none; background: var(--panel-2); color: var(--ink-2); font-size: 13px; cursor: pointer; text-align: left; }
.idea:hover { background: var(--accent-soft); color: var(--accent-text); }
.chip:empty { display: none; }

/* coin page */
.clone-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px; }
.clone-name { font-size: clamp(40px, 5vw, 64px); line-height: .95; margin-top: 12px; }
.clone-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.catch { font: 400 24px/1.2 var(--font-px); color: var(--accent-text); }
.chat-panel { display: flex; flex-direction: column; }
.chat-log { height: 420px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--panel-2); }
.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.msg-text { padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.msg-assistant .msg-text { background: var(--panel); border-bottom-left-radius: 6px; }
.msg-user { align-self: flex-end; }
.msg-user .msg-text { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg-system { align-self: center; font-size: 13px; color: var(--muted); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; background: var(--muted); animation: dot 1s steps(1) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.chat-form .input { flex: 1; }
.chat-note { padding: 0 14px 14px; }
.coin-card-arch { font: 400 15px/1 var(--font-px); color: var(--accent-text); margin-top: 8px; }

/* home */
.hero-clone { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); }
.hero-clone .hero-title { margin-top: 18px; font-size: clamp(56px, 7vw, 104px); line-height: .9; }
.hero-grad { color: var(--accent); }
.hero-stage { position: relative; height: 380px; display: grid; place-items: center; }
.stage-glow { display: none; }
.stage-main { position: relative; }
.stage-side { position: absolute; right: 4%; bottom: 6%; }
.stage-bubble { position: absolute; left: -52%; top: -22%; max-width: 250px; padding: 12px 16px; border-radius: 18px 18px 18px 6px;
  background: var(--panel); border: 1px solid var(--line-2); font-size: 14px; line-height: 1.45; }
.stage-tag { position: absolute; left: 8px; bottom: 8px; font: 600 11px/1 var(--mono); color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.ex-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ex-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 22px; background: var(--panel-2); }
.ex-card .portrait { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.ex-name { margin-top: 8px; font-size: 24px; line-height: 1; }
.ex-say { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

@media (max-width: 1100px) { .ex-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hero-clone, .clone-hero, .clone-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { height: 320px; }
  .stage-bubble { left: 0; top: -6%; }
}
@media (prefers-reduced-motion: reduce) { .agent-svg .ag-body, .agent-svg .ag-lid { animation: none !important; } }
.hero-clone .hero-sub { margin-top: 22px; max-width: 560px; text-wrap: pretty; }
.hero-clone .hero-copy > .row { margin-top: 32px; }
.hero-clone .hero-count { margin-top: 18px; }
.music-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; margin-left: auto; margin-right: 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); cursor: pointer; }
.music-btn:hover { color: var(--ink); border-color: var(--accent); }
.music-btn.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; animation: music-pulse 1s steps(2) infinite; }
@keyframes music-pulse { 50% { transform: translateY(-1px); } }

/* home: live stage, try box, parade */
.hero-clone .hero-stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0 26px; }
.hero-clone .stage-main { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-clone .stage-bubble { position: relative; left: auto; top: auto; min-height: 66px; width: min(340px, 100%); max-width: none; border-radius: 18px; }
.hero-clone .stage-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: translateX(-50%) rotate(45deg); }
.stage-bubble.typing::before { content: ""; position: absolute; right: 12px; bottom: 12px; width: 7px; height: 12px; background: var(--accent); animation: dot .8s steps(1) infinite; }
.stage-agent .portrait { width: 230px !important; height: 230px !important; }
.stage-agent.pop { animation: stage-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stage-pop { 0% { transform: scale(.7) translateY(12px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.stage-meta { display: flex; align-items: center; gap: 10px; }
.stage-name { font: 400 22px/1 var(--font-px); }
.try-box { display: flex; gap: 8px; width: min(420px, 100%); padding: 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); }
.try-box:focus-within { border-color: var(--accent); }
.try-box .input { flex: 1; min-width: 0; border: none; background: transparent; box-shadow: none !important; border-radius: 999px; padding-left: 14px; }
.hero-clone .stage-tag { left: auto; right: 10px; top: 4px; bottom: auto; }
.parade { display: grid; gap: 12px; overflow: hidden; padding: 16px 0; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); }
.parade-row { overflow: hidden; }
.parade-track { display: flex; width: max-content; gap: 12px; animation: parade 48s linear infinite; }
.parade-dup { display: flex; gap: 12px; }
.parade-row.rev .parade-track { animation-direction: reverse; animation-duration: 56s; }
.parade:hover .parade-track { animation-play-state: paused; }
@keyframes parade { to { transform: translateX(calc(-50% - 6px)); } }
.parade-card { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--panel-2); }
.parade-card .portrait { width: 44px !important; height: 44px !important; }
.parade-name { font: 400 18px/1 var(--font-px); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .parade-track { animation: none; } }