@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Cookie&display=swap");
/* Site chrome, landing page, and the shared tool layout.
   The circle tool also loads styles.css for its canvas. */

:root {
  --page: #f6f4fc;
  --surface: #ffffff;
  --surface-2: #faf9ff;
  --line: #e7e3f4;
  --ink: #1d1a36;
  --ink-soft: #6c6891;
  --brand: #6d4bdb;
  --brand-2: #8b6fe8;
  --brand-soft: #efeafe;
  --good: #0f9f6e;
  --warn-bg: #fff6e3;
  --warn-ink: #7a4f10;
  --err-bg: #fde9ee;
  --err-ink: #9c1f38;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(29, 26, 54, 0.04), 0 12px 32px -18px rgba(29, 26, 54, 0.22);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: radial-gradient(1100px 480px at 50% -200px, #e6dfff 0%, transparent 70%), var(--page);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  padding: 0 16px 48px;
}

a { color: var(--brand); }
button, input, select, textarea { font: inherit; }

/* ---------- site nav ---------- */

/* ---------- buttons + inputs (shared) ---------- */
.btn {
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 10px 22px -12px rgba(109, 75, 219, 0.9);
  transition: transform 0.12s, filter 0.15s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--coffee { background: #ffdd00; color: #1d1a36; box-shadow: 0 10px 22px -12px rgba(255, 190, 0, 0.95); }

.field {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}

.field input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 36px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s;
}

.field input[type="date"] { padding-left: 14px; }
.field input:focus { border-color: var(--brand-2); }
.field input[aria-invalid="true"] { border-color: #f79fb1; }
.field__at { position: absolute; left: 13px; font-weight: 700; color: var(--brand); pointer-events: none; }

:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

/* ---------- landing ---------- */
.hero {
  max-width: 820px;
  margin: 32px auto 8px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

.hero h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.hero p.lede {
  margin: 16px auto 0;
  max-width: 600px;
  color: var(--ink-soft);
  font-size: 16px;
}

.hero__actions { margin-top: 22px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.section { max-width: 1120px; margin: 36px auto 0; }
.section__head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.section__head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }

.groups { display: grid; gap: 28px; margin-top: 18px; }
.group__title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tool-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid #efecf8;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.14s, border-color 0.14s;
}

.tool-card:hover { transform: translateY(-2px); border-color: #d9cfff; }

.tool-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-card__icon { font-size: 26px; }
.tool-card h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.tool-card p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.tool-card__go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--brand); }

.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  white-space: nowrap;
}

.badge--live { background: #e3f8ef; color: #0b7a53; }
.badge--local { background: #fff3d6; color: #8a5a12; }

.note-box {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid #efecf8;
  font-size: 14px;
  color: var(--ink-soft);
}

.note-box strong { color: var(--ink); }

.honesty { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }

/* Coffee ask: playful, not pleading. The tools stay free either way. */
.coffee-card {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 26px 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1f1640 0%, #3b1f63 100%);
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(31, 22, 64, 0.8);
}

.coffee-card h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.coffee-card p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 14.5px; max-width: 620px; }
.coffee-card .btn { height: 52px; }

/* ---------- tool page shell ---------- */
.tool {
  max-width: 1120px;
  margin: 18px auto 0;
  display: grid;
  gap: 20px;
}

.tool__head h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.tool__head p { margin: 8px 0 0; color: var(--ink-soft); max-width: 720px; font-size: 15px; }

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #efecf8;
  padding: 22px 24px;
}

.panel__head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.panel__head p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }

.form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.form .btn { flex: 0 0 auto; }
.form-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.form-hint.hint--error { color: var(--err-ink); }

.status { padding: 13px 16px; border-radius: 14px; font-weight: 600; font-size: 14.5px; }
.status--error { background: var(--err-bg); color: var(--err-ink); }
.status--info { background: var(--brand-soft); color: #4a2fa3; }
.status--warn { background: var(--warn-bg); color: var(--warn-ink); }

.loading-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: #4a2fa3;
  font-weight: 600;
  font-size: 14.5px;
}

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid #d9cfff;
  border-top-color: var(--brand);
  animation: spin 0.9s linear infinite;
  flex: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  padding: 22px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14.5px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px dashed #d8d2ec;
}

.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stat { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid #efecf8; }
.stat__label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.stat__value { margin-top: 4px; font-size: 22px; font-weight: 700; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: #4a2fa3;
  font-size: 12.5px;
  font-weight: 600;
}

.chip--muted { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); }

.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post-list li { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid #efecf8; }
.post-list a { color: var(--ink); font-weight: 600; text-decoration: none; word-break: break-word; font-size: 14.5px; }
.post-list a:hover { color: var(--brand); text-decoration: underline; }
.post-list .meta { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }

.two-col { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* Tables: radar, lost, ghosts */
.rows { display: grid; gap: 8px; }
.row {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid #efecf8;
}
.row__rank {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
}
.row__who { min-width: 0; }
.row__who a, .row__who b { font-size: 14.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.row__who a:hover { color: var(--brand); }
.row__who span { display: block; font-size: 12px; color: var(--ink-soft); }
.row__value { font-size: 14px; font-weight: 700; color: var(--brand); text-align: right; }
.row__bar { grid-column: 2 / 4; height: 5px; border-radius: 6px; background: #ece8f9; overflow: hidden; }
.row__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); }

/* Heatmap */
.heat-wrap { overflow-x: auto; }
.heat {
  display: grid;
  grid-template-columns: 44px repeat(24, minmax(16px, 1fr));
  gap: 3px;
  min-width: 560px;
  align-items: center;
}
.heat__label { font-size: 11px; color: var(--ink-soft); text-align: right; padding-right: 4px; }
.heat__hour { font-size: 10px; color: var(--ink-soft); text-align: center; }
.heat__cell {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: #efebfb;
  border: none;
  padding: 0;
  cursor: default;
}
.heat__cell[data-level="1"] { background: #d9ccfb; }
.heat__cell[data-level="2"] { background: #b59cf6; }
.heat__cell[data-level="3"] { background: #8b6fe8; }
.heat__cell[data-level="4"] { background: #6d4bdb; }
.heat__cell[data-level="5"] { background: #4a2fa3; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); margin-top: 12px; }
.legend i { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }

/* Tone */
.tone-row { display: grid; gap: 8px; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; font-size: 13px; }
.tone-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #efebfb; }
.tone-bar i { display: block; height: 100%; }
.tone-chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; }
.mood--chill { background: #3aa7a0; }
.mood--hyped { background: #f59e0b; }
.mood--angry { background: #e5484d; }
.mood--sad { background: #5b7ddb; }
.mood--neutral { background: #cfc9e4; }

/* Vibe */
.ring-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring { position: relative; width: 150px; height: 150px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring__value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; font-weight: 800; }

/* Timeline (bio snapshots, drift) */
.timeline { display: grid; gap: 12px; }
.timeline__item { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid #efecf8; position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -7px; top: 18px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px #efeafe;
}
.timeline__item .when { font-size: 12px; font-weight: 700; color: var(--brand); }
.timeline__item .what { margin-top: 4px; font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }
.timeline { padding-left: 14px; border-left: 2px solid #e3dcf7; margin-left: 6px; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 8px 0 0; }
.bars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bars__bar { width: 100%; max-width: 64px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); min-height: 3px; }
.bars__label { margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); }
.bars__count { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.disclaimer { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

/* ---------- footer ---------- */
.site-footer {
  max-width: 1120px;
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid #e5e0f4;
  display: grid;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

.site-footer__row { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--ink-soft); }
.site-footer details summary { cursor: pointer; font-weight: 600; }
.site-footer details p { margin: 8px 0 0; max-width: 760px; }

@media (max-width: 720px) {
  .coffee-card { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 30px minmax(0, 1fr); }
  .row__value { grid-column: 2; text-align: left; }
  .row__bar { grid-column: 2; }
  .tone-row { grid-template-columns: 80px minmax(0, 1fr); }
  .tone-row .tone-chip { grid-column: 2; justify-self: start; }
  .panel { padding: 18px; }
  .ring { width: 124px; height: 124px; }
}

/* Small section heading inside a panel. */
.minor { margin: 18px 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.tool-results { display: grid; gap: 18px; }
.tool-results > * { margin: 0; }


/* Footer badge: who built it, with a link to the profile. */
.built-by { display: flex; justify-content: center; }
.built-by a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.built-by a:hover { transform: translateY(-1px); border-color: #d9cfff; }
.built-by img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.built-by__handle { color: var(--ink-soft); font-size: 12.5px; }

/* Top Followers Banner: controls and preview. */
.customise { margin-bottom: 18px; }
.controls-grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 14px; }
.control { display: grid; gap: 6px; min-width: 0; }
.control--wide, .control--range { grid-column: span 2; }
.control__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.control__label b { color: var(--brand); letter-spacing: 0; }
.control input[type="text"], .control select {
  height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14.5px; font-family: inherit;
}
.control input[type="color"] { width: 100%; height: 42px; padding: 3px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.control input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--brand); }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 24px 10px; }
.bg-chip {
  height: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.bg-chip[aria-checked="true"] { border-color: var(--ink); }
.bg-chip::after {
  content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%);
  font-size: 10.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; pointer-events: none;
}
.banner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.banner-panel { padding: 14px; background: #0f0b1f; overflow: hidden; }
.banner-panel canvas { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 600px) { .control--wide, .control--range { grid-column: span 1; } }

/* ==========================================================================
   Features built since the first design: circle page, result cards,
   banner text and customise, share row. Landing styles above are the first design.
   ========================================================================== */

/* ---- Circle page: scoped to .circle-page so it cannot leak into the tools ---- */
.circle-page {
  --page: #f5f3fb;
  --surface: #ffffff;
  --surface-2: #faf9ff;
  --line: #e7e3f4;
  --ink: #1d1a36;
  --ink-soft: #6c6891;
  --brand: #6d4bdb;
  --brand-2: #8b6fe8;
  --brand-ink: #ffffff;
  --good: #0f9f6e;
  --warn-bg: #fff6e3;
  --warn-ink: #7a4f10;
  --err-bg: #fde9ee;
  --err-ink: #9c1f38;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(29, 26, 54, 0.04), 0 12px 32px -18px rgba(29, 26, 54, 0.22);
}
.circle-page button, .circle-page input { font: inherit; }
.circle-page .masthead {
  text-align: center;
  padding: 56px 12px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.circle-page .eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.circle-page .masthead h1 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.circle-page .lede {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 15px;
  color: var(--ink-soft);
}
.circle-page .shell {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}
.circle-page .search {
  background: linear-gradient(135deg, #1f1640 0%, #3b1f63 100%);
  border-radius: var(--radius);
  padding: 26px 28px;
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(31, 22, 64, 0.8);
}
.circle-page .search__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #d9d0ff;
  margin-bottom: 10px;
}
.circle-page .search__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.circle-page .search__field {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
}
.circle-page .search__at {
  position: absolute;
  left: 16px;
  font-weight: 700;
  color: #b9a7ff;
  pointer-events: none;
}
.circle-page .search__field input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 40px;
  border-radius: 14px;
  border: 1.5px solid rgba(185, 167, 255, 0.45);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.circle-page .search__field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.circle-page .search__field input:focus {
  border-color: #c4b5fd;
  background: rgba(255, 255, 255, 0.12);
}
.circle-page .search__field input[aria-invalid="true"] { border-color: #f79fb1; }
.circle-page .search__hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(217, 208, 255, 0.72);
}
.circle-page .search__hint.hint--error, .circle-page .search__form .hint--error { color: #fca5b8; }
.circle-page .btn {
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.12s, background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.circle-page .btn:active { transform: translateY(1px); }
.circle-page .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.circle-page .btn:focus-visible, .circle-page .link-btn:focus-visible, .circle-page .swatch:focus-visible, .circle-page .toggle input:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.circle-page .btn--brand {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  box-shadow: 0 10px 22px -12px rgba(109, 75, 219, 0.9);
}
.circle-page .btn--brand:hover:not(:disabled) { filter: brightness(1.06); }
.circle-page .btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.circle-page .btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.circle-page .link-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.circle-page .link-btn:hover { text-decoration: underline; }
.circle-page .status {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}
.circle-page .status--error { background: var(--err-bg); color: var(--err-ink); }
.circle-page .loading {
  padding: 48px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.circle-page .loading__orb {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
}
.circle-page .loading__orb span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid #ebe6fb;
  animation: loading-spin 1.6s linear infinite;
}
.circle-page .loading__orb span:nth-child(1) { border-top-color: var(--brand); }
.circle-page .loading__orb span:nth-child(2) { inset: 16px; border-right-color: #0f9f6e; animation-duration: 2.2s; animation-direction: reverse; }
.circle-page .loading__orb span:nth-child(3) { inset: 32px; border-bottom-color: #f59e0b; animation-duration: 1.1s; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.circle-page .loading__title { margin: 0; font-size: 16px; font-weight: 700; }
.circle-page .loading__title span { color: var(--brand); }
.circle-page .loading__sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.circle-page .results { display: grid; gap: 22px; }
.circle-page .profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.circle-page .profile img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px #d8ccff;
}
.circle-page .profile__name { margin: 0; font-size: 19px; font-weight: 700; }
.circle-page .profile__meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.circle-page .warnings {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #f6e0a8;
}
.circle-page .studio {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.circle-page .stage { width: 100%; max-width: 640px; margin: 0 auto; }
.circle-page .mosaic {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(20, 12, 46, 0.7);
  --accent: #a78bfa;
  --ring: rgba(221, 214, 254, 0.42);
  --chip: rgba(12, 8, 26, 0.62);
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.72);
  --pod-ring: rgba(255, 255, 255, 0.6);
  --scrim: transparent;
  --dot: transparent;
}
.circle-page .mosaic__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--bg-a) 0%, var(--bg-b) 100%);
  transition: background 0.35s ease;
}
.circle-page .mosaic__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 42% at 50% 46%, var(--accent) 0%, transparent 70%);
  opacity: 0.45;
}
.circle-page .mosaic__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: 28px 28px;
  opacity: 0.9;
}
.circle-page .mosaic__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.circle-page .mosaic__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}
.circle-page .mosaic__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.circle-page .mosaic__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.circle-page .guide {
  fill: none;
  stroke: var(--ring);
  stroke-width: 1.4;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.circle-page .mosaic__line {
  stroke: var(--ring);
  stroke-linecap: round;
  transition: opacity 0.2s, stroke 0.2s;
}
.circle-page .pod {
  position: absolute;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  container-type: inline-size;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.circle-page .pod:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 4; }
.circle-page .pod img, .circle-page .pod__fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.circle-page .pod__fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
  background: linear-gradient(140deg, #7c5cc4, #4b3390);
  
  font-size: 36cqw;
}
.circle-page .pod__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
  pointer-events: none;
}
.circle-page .pod--subject { cursor: default; }
.circle-page .pod--subject:hover { transform: translate(-50%, -50%); }
.circle-page .pod--subject img, .circle-page .pod--subject .pod__fallback {
  box-shadow: 0 0 0 5px var(--chip), 0 0 0 8px var(--accent), 0 16px 36px rgba(0, 0, 0, 0.45);
}
.circle-page .pod__handle {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--chip);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes pod-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.circle-page .pod--enter { animation: pod-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.circle-page .mosaic.is-focused .pod:not(.is-active) { opacity: 0.22; }
.circle-page .mosaic.is-focused .mosaic__line:not(.is-active) { opacity: 0.08; }
.circle-page .mosaic.is-focused .pod.is-active { transform: translate(-50%, -50%) scale(1.16); z-index: 5; }
.circle-page .mosaic.is-focused .pod.is-active .pod__ring { border-color: #fff; }
.circle-page .mosaic__line.is-active { stroke: #fff; opacity: 1; }
.circle-page .mosaic__badge {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--chip);
  backdrop-filter: blur(8px);
  line-height: 1.25;
  color: var(--text);
}
.circle-page .mosaic__badge--left { left: 14px; }
.circle-page .mosaic__badge--right { right: 14px; font-size: 11px; font-weight: 700; opacity: 0.8; padding: 6px 10px; }
.circle-page .mosaic__badge strong { display: block; font-size: 14px; font-weight: 700; }
.circle-page .mosaic__badge span { display: block; font-size: 11px; font-weight: 600; color: var(--text-soft); }
.circle-page .mosaic__tip {
  position: absolute;
  z-index: 8;
  min-width: 168px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(14, 10, 30, 0.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
}
.circle-page .mosaic__tip strong { display: block; font-size: 13px; font-weight: 700; }
.circle-page .mosaic__tip em { display: block; color: rgba(255, 255, 255, 0.55); font-style: normal; font-size: 11px; }
.circle-page .mosaic__tip span { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.circle-page .mosaic__empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 40px;
  text-align: center;
  color: var(--text);
  font-weight: 600;
  pointer-events: none;
}
.circle-page .mosaic[data-theme="midnight"] { --bg-a: #2d1c52; --bg-b: #120b26; --accent: #a78bfa; --ring: rgba(221, 214, 254, 0.42); --chip: rgba(12, 8, 26, 0.62); --dot: rgba(255, 255, 255, 0.07); }
.circle-page .mosaic[data-theme="aurora"] { --bg-a: #0f5c56; --bg-b: #06201d; --accent: #6ee7b7; --ring: rgba(167, 243, 208, 0.42); --chip: rgba(6, 24, 30, 0.6); --dot: rgba(255, 255, 255, 0.06); }
.circle-page .mosaic[data-theme="ember"] { --bg-a: #7a2f22; --bg-b: #2b1020; --accent: #fdba74; --ring: rgba(253, 186, 116, 0.42); --chip: rgba(40, 14, 12, 0.6); --dot: rgba(255, 220, 190, 0.07); }
.circle-page .mosaic[data-theme="ocean"] { --bg-a: #1e4fa3; --bg-b: #0a1733; --accent: #7dd3fc; --ring: rgba(186, 230, 253, 0.42); --chip: rgba(6, 18, 40, 0.6); --dot: rgba(186, 230, 253, 0.08); }
.circle-page .mosaic[data-theme="forest"] { --bg-a: #1f5a34; --bg-b: #071f12; --accent: #bef264; --ring: rgba(217, 249, 157, 0.4); --chip: rgba(5, 25, 14, 0.6); --dot: rgba(190, 242, 100, 0.07); }
.circle-page .mosaic[data-theme="rose"] { --bg-a: #9d174d; --bg-b: #2a0a1e; --accent: #f9a8d4; --ring: rgba(251, 207, 232, 0.42); --chip: rgba(40, 6, 22, 0.6); --dot: rgba(251, 207, 232, 0.08); }
.circle-page .mosaic[data-theme="sunset"] { --bg-a: #f97316; --bg-b: #4c1d6b; --accent: #fde68a; --ring: rgba(255, 237, 213, 0.5); --chip: rgba(40, 14, 40, 0.55); --dot: rgba(255, 237, 213, 0.1); }
.circle-page .mosaic[data-theme="graphite"] { --bg-a: #3f3f46; --bg-b: #0b0b0e; --accent: #e4e4e7; --ring: rgba(228, 228, 231, 0.38); --chip: rgba(10, 10, 14, 0.62); --dot: rgba(255, 255, 255, 0.06); }
.circle-page .mosaic[data-theme="starfield"] { --bg-a: #1e1b4b; --bg-b: #03020b; --accent: #c4b5fd; --ring: rgba(196, 181, 253, 0.42); --chip: rgba(8, 6, 22, 0.66); --dot: rgba(255, 255, 255, 0.32); }
.circle-page .mosaic[data-theme="paper"] {
  --bg-a: #fbf8f1; --bg-b: #e9e1cf; --accent: #7c3aed; --ring: rgba(60, 40, 110, 0.32);
  --chip: rgba(255, 255, 255, 0.86); --text: #1f1b33; --text-soft: rgba(31, 27, 51, 0.62);
  --pod-ring: rgba(31, 27, 51, 0.5); --dot: rgba(60, 40, 110, 0.1);
}
.circle-page .mosaic[data-theme="ink"] {
  --bg-a: #f4f2fa; --bg-b: #ded7ef; --accent: #6d4bc3; --ring: rgba(76, 60, 130, 0.3);
  --chip: rgba(255, 255, 255, 0.86); --text: #1f1b45; --text-soft: rgba(31, 27, 69, 0.6);
  --pod-ring: rgba(31, 27, 69, 0.5); --dot: rgba(76, 60, 130, 0.08);
}
.circle-page .mosaic[data-bg="custom"] { --scrim: linear-gradient(180deg, rgba(8, 5, 20, 0.35), rgba(8, 5, 20, 0.6)); }
.circle-page .mosaic[data-bg="custom"] .mosaic__bg { background: none; }
.circle-page .mosaic[data-bg="custom"] .mosaic__bg::before, .circle-page .mosaic[data-bg="custom"] .mosaic__bg::after { display: none; }
.circle-page .ties { position: sticky; top: 16px; }
.circle-page .ties__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  padding-right: 4px;
}
.circle-page .ties__list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
}
.circle-page .ties__list li:hover, .circle-page .ties__list li.is-active { background: #f1ecff; border-color: #ddd2ff; }
.circle-page .ties__list .rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
}
.circle-page .ties__list .who { min-width: 0; }
.circle-page .ties__list .who b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circle-page .ties__list .who span { display: block; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circle-page .ties__list .w { font-size: 13px; font-weight: 700; color: var(--brand); }
.circle-page .ties__list .bar { grid-column: 2 / 4; height: 4px; border-radius: 4px; background: #ece8f9; overflow: hidden; }
.circle-page .ties__list .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
.circle-page .card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  border: 1px solid #efecf8;
}
.circle-page .card__head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.circle-page .card__sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.circle-page .minor { margin: 22px 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.circle-page .controls {
  display: grid;
  gap: 18px 28px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
.circle-page .controls__group--bg { grid-column: 1 / -1; }
.circle-page .controls__group--actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.circle-page .controls__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.circle-page .controls__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 10px; }
.circle-page .controls__label b { color: var(--brand); letter-spacing: 0; text-transform: none; font-size: 13px; }
.circle-page .controls__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
.circle-page .swatches { display: flex; flex-wrap: wrap; gap: 14px 10px; margin-bottom: 18px; }
.circle-page .swatch {
  width: 56px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s, border-color 0.12s;
}
.circle-page .swatch:hover { transform: translateY(-1px); }
.circle-page .swatch[aria-checked="true"] { border-color: var(--ink); }
.circle-page .swatch::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  pointer-events: none;
}
.circle-page .swatch[data-id="midnight"] { background: linear-gradient(135deg, #a78bfa, #2d1c52); }
.circle-page .swatch[data-id="aurora"] { background: linear-gradient(135deg, #6ee7b7, #0f5c56); }
.circle-page .swatch[data-id="ember"] { background: linear-gradient(135deg, #fdba74, #7a2f22); }
.circle-page .swatch[data-id="ocean"] { background: linear-gradient(135deg, #7dd3fc, #1e4fa3); }
.circle-page .swatch[data-id="forest"] { background: linear-gradient(135deg, #bef264, #1f5a34); }
.circle-page .swatch[data-id="rose"] { background: linear-gradient(135deg, #f9a8d4, #9d174d); }
.circle-page .swatch[data-id="sunset"] { background: linear-gradient(135deg, #fde68a, #f97316 45%, #4c1d6b); }
.circle-page .swatch[data-id="graphite"] { background: linear-gradient(135deg, #e4e4e7, #3f3f46); }
.circle-page .swatch[data-id="starfield"] { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 1.5px), linear-gradient(135deg, #1e1b4b, #03020b); }
.circle-page .swatch[data-id="paper"] { background: linear-gradient(135deg, #fbf8f1, #e9e1cf); }
.circle-page .swatch[data-id="ink"] { background: linear-gradient(135deg, #ffffff, #ded7ef); }
.circle-page .custom-bgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.circle-page .custom-bgs:empty { display: none; }
.circle-page .custom-bg {
  position: relative;
  width: 56px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.circle-page .custom-bg[aria-checked="true"] { border-color: var(--ink); }
.circle-page .custom-bg__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1d1a36;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
  padding: 0;
  cursor: pointer;
}
.circle-page .range { width: 100%; accent-color: var(--brand); }
.circle-page input[type="range"] { width: 100%; accent-color: var(--brand); }
.circle-page .toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.circle-page .toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.circle-page .toggle input { accent-color: var(--brand); width: 16px; height: 16px; margin: 0; }
.circle-page .tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.circle-page .tile {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid #efecf8;
}
.circle-page .tile__label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.circle-page .tile__value { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.circle-page .chart {
  position: relative;
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 12px 10px 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid #efecf8;
}
.circle-page .chart .bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  opacity: 0.85;
  transition: opacity 0.12s;
}
.circle-page .chart .bar:hover { opacity: 1; }
.circle-page .chart .bar--zero { background: #e4dff5; opacity: 1; min-height: 2px; }
.circle-page .chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}
.circle-page .posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.circle-page .posts li {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid #efecf8;
}
.circle-page .posts a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-size: 14.5px;
  word-break: break-word;
}
.circle-page .posts a:hover { color: var(--brand); text-decoration: underline; }
.circle-page .metrics { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.circle-page .metrics span {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.circle-page .metrics .metrics__score { background: #efeafe; border-color: #ddd2ff; color: var(--brand); }
.circle-page .empty { color: var(--ink-soft); font-size: 14px; }
.circle-page .footer { max-width: 1100px; margin: 36px auto 0; text-align: center; }
.circle-page .disclosure { display: inline-block; text-align: left; }
.circle-page .disclosure summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.circle-page .disclosure__body { margin-top: 12px; max-width: 720px; font-size: 13px; color: var(--ink-soft); }
.circle-page .disclosure__body p { margin: 0 0 10px; }
.circle-page .disclosure code { font-size: 12px; background: #ece8f9; padding: 1px 5px; border-radius: 5px; }
@media (min-width: 1020px) {
  .circle-page .studio { grid-template-columns: minmax(0, 1fr) 340px; }
  .circle-page .stage { margin: 0; max-width: none; }
}
@media (max-width: 860px) {
  .circle-page .controls { grid-template-columns: minmax(0, 1fr); }
  .circle-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .circle-page .ties { position: static; }
  .circle-page .ties__list { max-height: 420px; }
}
@media (max-width: 520px) {
  .circle-page .masthead { padding-top: 36px; }
  .circle-page .search { padding: 20px; }
  .circle-page .btn { width: 100%; }
  .circle-page .profile { padding: 14px 16px; }
  .circle-page .mosaic__badge--right { display: none; }
  .circle-page .mosaic__badge--left strong { font-size: 13px; }
  .circle-page .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .circle-page .loading__orb span, .circle-page .pod--enter { animation: none; }
  .circle-page .pod, .circle-page .ties__list li, .circle-page .btn { transition: none; }
}

/* ---- Page frame: the footer always sits at the bottom of the viewport ---- */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > * { width: 100%; }
body > main, body > .tool, body > .shell, body > .results { flex: 1 0 auto; }
.site-footer, .footer { margin-top: 48px; padding-bottom: 28px; flex-shrink: 0; }

/* Credit inside the footer, not a separate block on every tool. */
.credit { display: inline-flex; align-items: center; gap: 6px; }
.credit a { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; }
.credit a:hover { color: var(--brand); }
.credit img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.credit-line { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ---- Reply radar card: an "inner circle" card, not a circle ---- */
.radar-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 30px 28px 24px;
  background:
    radial-gradient(900px 300px at 100% -10%, rgba(139, 111, 232, 0.35), transparent 60%),
    linear-gradient(160deg, #1d1436 0%, #2a1a4f 60%, #161032 100%);
  color: #fff;
  box-shadow: 0 30px 60px -32px rgba(20, 12, 46, 0.7);
}
.radar-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #c4b5fd; }
.radar-card__title { margin: 8px 0 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.radar-card__meta { margin: 6px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.radar-card__note { margin: 16px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.radar-card__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 22px; font-size: 12px; }

.podium { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; align-items: end; }
.podium__slot {
  display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; min-width: 0;
}
.podium__slot--1 { padding-top: 26px; background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(255, 255, 255, 0.05)); border-color: rgba(251, 191, 36, 0.45); }
.podium__slot--2 { background: linear-gradient(180deg, rgba(203, 213, 225, 0.16), rgba(255, 255, 255, 0.04)); }
.podium__slot--3 { background: linear-gradient(180deg, rgba(251, 146, 60, 0.16), rgba(255, 255, 255, 0.04)); }
.podium__place { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.podium__slot--1 .podium__place { color: #fbbf24; }
.podium__handle { font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__count { font-size: clamp(34px, 6vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.podium__slot--1 .podium__count { color: #fbbf24; }
.podium__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.podium__when { margin-top: 6px; font-size: 12px; }

.radar-tally { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; }
.radar-tally__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05);
}
.radar-tally__rank { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }
.radar-tally__handle { font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.radar-tally__handle:hover { color: #c4b5fd; }

/* Tally marks: strokes, with every fifth one crossing the four before it. */
.tally { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-height: 18px; }
.tally__stroke { width: 2px; height: 16px; border-radius: 2px; background: #a78bfa; display: inline-block; }
.tally__cross { width: 2px; height: 16px; border-radius: 2px; background: #a78bfa; display: inline-block; position: relative; margin-left: -5px; transform: rotate(-22deg); }
.tally__cross::after { content: ""; position: absolute; left: -7px; top: 6px; width: 16px; height: 2px; border-radius: 2px; background: #a78bfa; transform: rotate(0deg); }
.tally__more { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.6); margin-left: 6px; }

/* Recency: colour by how long ago the last reply was. */
.recency { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.recency--hot { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.recency--warm { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.recency--cool { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.recency--cold { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }
.recency--none { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }
.podium__when.recency--hot, .podium__when.recency--warm, .podium__when.recency--cool, .podium__when.recency--cold { display: inline-block; }

@media (max-width: 560px) {
  .radar-card { padding: 22px 16px 18px; }
  .podium { gap: 8px; }
  .podium__slot { padding: 12px 6px; }
  .radar-tally__row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .radar-tally__row .tally { grid-column: 2 / 4; }
}

/* Refresh row at the top of every tool's results. */
.refresh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.refresh-btn { height: 40px; padding: 0 16px; font-size: 14px; }
.refresh-note { font-size: 13px; color: var(--ink-soft); }

/* ---- Radar: avatars, medals and ranks ---- */
.avatar {
  position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #8b5cf6, #4c1d95); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__fallback { font-weight: 800; color: #fff; font-size: 40%; }

.podium { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); gap: 14px; align-items: end; padding-top: 12px; }
.podium__slot { position: relative; padding-top: 34px; gap: 6px; }
.podium__slot--1 { padding-top: 40px; transform: translateY(-16px); }
.medal {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #1d1436; z-index: 2;
  background: linear-gradient(140deg, #cbd5e1, #94a3b8); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.medal--1 { width: 34px; height: 34px; font-size: 15px; top: -16px; background: linear-gradient(140deg, #fde68a, #f59e0b); }
.medal--3 { background: linear-gradient(140deg, #fdba74, #c2410c); color: #fff; }
.podium__slot--1 .avatar { box-shadow: 0 0 0 3px #fbbf24, 0 0 26px rgba(251, 191, 36, 0.45); }
.podium__slot--2 .avatar { box-shadow: 0 0 0 3px #cbd5e1; }
.podium__slot--3 .avatar { box-shadow: 0 0 0 3px #fb923c; }
.podium__name { font-size: 12px; color: rgba(255, 255, 255, 0.6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.radar-tally__row { grid-template-columns: 26px 40px minmax(0, 1fr) auto auto; padding: 10px 14px 10px 12px; }
.radar-tally__rank { font-size: 13px; text-align: right; }
.radar-tally__who { display: grid; min-width: 0; }
.radar-tally__name { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-tally__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .radar-tally__row { grid-template-columns: 22px 34px minmax(0, 1fr) auto; }
  .radar-tally__row .tally { grid-column: 3 / 5; }
  .podium__slot--1 .avatar { width: 76px !important; height: 76px !important; }
}

/* Stretching the page frame must not stretch the grid rows inside it. */
.tool, .shell, .results, .studio { align-content: start; }

/* ---- Time Capsule: compact year cards ---- */
.capsule-summary { padding: 18px 22px; border-radius: 20px; background: var(--surface); border: 1px solid #efecf8; box-shadow: var(--shadow); }
.capsule-summary__title { margin: 0; font-size: 18px; font-weight: 700; }
.capsule-summary__meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.capsule-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.capsule-year { padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid #efecf8; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; min-width: 0; }
.capsule-year__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.capsule-year__year { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.capsule-year__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.capsule-post { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid #efecf8; min-width: 0; }
.capsule-post a { color: var(--ink); font-weight: 600; text-decoration: none; font-size: 13.5px; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.capsule-post a:hover { color: var(--brand); }
.capsule-post .meta { margin-top: 6px; font-size: 11.5px; color: var(--ink-soft); }
.capsule-year__toggle { justify-self: start; }

/* Text-style button used for inline actions such as "Show more". */
.link-btn { background: none; border: none; padding: 2px 4px; color: var(--brand); font-weight: 600; font-size: 13px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---- Vibe match: a duel between two photos, with the shared words floating ---- */
.vibe-card {
  position: relative; overflow: hidden; border-radius: 28px; padding: 28px 26px 22px;
  background:
    radial-gradient(700px 320px at 50% -10%, rgba(244, 114, 182, 0.28), transparent 60%),
    radial-gradient(600px 300px at 110% 110%, rgba(56, 189, 248, 0.22), transparent 60%),
    linear-gradient(160deg, #1b1338 0%, #2b1a4c 55%, #151036 100%);
  color: #fff; box-shadow: 0 30px 60px -32px rgba(20, 12, 46, 0.7);
}
.vibe-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #f9a8d4; }
.vibe-card__section { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

.duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 18px; }
.duel__person { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: #fff; min-width: 0; padding: 12px 8px; border-radius: 22px; transition: transform 0.15s; }
.duel__person:hover { transform: translateY(-3px); }
.duel__person .avatar { box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.6), 0 0 34px rgba(244, 114, 182, 0.35); }
.duel__person:last-child .avatar { box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.6), 0 0 34px rgba(56, 189, 248, 0.35); }
.duel__name { font-size: 15px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel__handle { font-size: 12px; color: rgba(255, 255, 255, 0.6); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel__meter { display: grid; justify-items: center; gap: 4px; text-align: center; }
.duel__verdict { margin: 8px 0 0; font-size: clamp(18px, 2.6vw, 24px); font-weight: 800; letter-spacing: -0.02em; }
.duel__line { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); max-width: 240px; }

.vibe-ring { position: relative; width: 190px; height: 190px; }
.vibe-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vibe-ring__track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 14; }
.vibe-ring__fill { fill: none; stroke: url(#vibeGrad); stroke: #f472b6; stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vibe-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.vibe-ring__number { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vibe-ring__unit { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, 0.7); margin-top: 12px; }

.constellation { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; min-height: 90px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); }
.constellation__word { font-weight: 700; line-height: 1.1; color: #fff; padding: 4px 8px; border-radius: 12px; animation: word-in 0.5s ease both; }
.constellation__word:nth-child(3n) { color: #f9a8d4; }
.constellation__word:nth-child(3n+1) { color: #7dd3fc; }
.constellation__empty { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
@keyframes word-in { from { opacity: 0; transform: translateY(6px) scale(0.92); } to { opacity: 1; transform: none; } }

.vibe-card__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.vibe-card__foot .chip { background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (max-width: 560px) {
  .duel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duel__meter { grid-column: 1 / -1; order: -1; }
  .vibe-ring { width: 160px; height: 160px; }
  .duel__person .avatar { width: 84px !important; height: 84px !important; }
}
@media (prefers-reduced-motion: reduce) { .constellation__word { animation: none; } .vibe-ring__fill { transition: none; } }

/* Time Capsule: year strip that jumps to each year's card. */
.year-rail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.year-rail__pill {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: transform 0.12s, border-color 0.12s;
}
.year-rail__pill:hover { transform: translateY(-1px); border-color: #d9cfff; }
.year-rail__count { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }

/* ---- Banner customise: two tidy columns; wide sections span both ---- */
#banner { cursor: grab; touch-action: none; user-select: none; }
#banner.is-dragging { cursor: grabbing; }
.custom-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.custom-block { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px; border-radius: 18px; background: var(--surface-2); border: 1px solid #efecf8; }
.custom-block--full { grid-column: 1 / -1; }
.custom-block__title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.custom-block__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* Uploader: a soft drop zone that lights up when a file is dragged over it. */
.uploader {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; border-radius: 18px; cursor: pointer; text-align: center;
  border: 2px dashed #cfc4f5; background: #ffffff; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.uploader:hover, .uploader:focus-visible { border-color: var(--brand-2); }
.uploader.is-over { border-color: var(--brand); background: var(--brand-soft); transform: scale(1.01); }
.uploader__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
  background: var(--brand); color: #fff;
}
.uploader__text { font-size: 14px; color: var(--ink); }
.uploader__hint { font-size: 12px; color: var(--ink-soft); }
.uploader.has-image { padding: 14px; }
#bg-drop.has-image .uploader__icon, #bg-drop.has-image .uploader__text, #bg-drop.has-image .uploader__hint { display: none; }
#bg-drop.has-image::after { content: "Drop another image to replace it"; font-size: 12px; color: var(--ink-soft); }
.uploader__current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uploader__current img { width: 96px; height: 54px; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); }
.uploader__name { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* Resolution: preset sizes and custom width and height. */
.res-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.res-preset {
  display: grid; gap: 2px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: left; transition: border-color 0.12s, transform 0.12s;
}
.res-preset:hover { transform: translateY(-1px); }
.res-preset[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.res-preset__dims { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.res-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.res-custom__x { padding-bottom: 12px; font-size: 18px; color: var(--ink-soft); }
.res-custom input[type="number"] { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14.5px; font-family: inherit; font-variant-numeric: tabular-nums; }

.bg-chip--image { background-size: cover; background-position: center; }
.custom-block .control { display: grid; gap: 6px; }
.custom-block .control select { height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14.5px; font-family: inherit; }
.custom-block .control input[type="color"] { width: 100%; height: 42px; padding: 3px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; }
.custom-block .control input[type="range"] { width: 100%; accent-color: var(--brand); }
@media (max-width: 560px) { .res-custom { grid-template-columns: minmax(0, 1fr); } .res-custom__x { display: none; } }


/* ---- Banner text: fonts, controls, and the segmented alignment ---- */
.text-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.text-layout__main, .text-layout__side { display: grid; gap: 14px; min-width: 0; }
.text-layout textarea {
  width: 100%; min-height: 70px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; resize: vertical;
}
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.font-chip {
  display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; text-align: left; transition: border-color 0.12s, transform 0.12s;
}
.font-chip:hover { transform: translateY(-1px); }
.font-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.font-chip__sample { font-size: 30px; line-height: 1; }
.font-chip__name { font-size: 12px; font-weight: 700; }
.font-chip__kind { font-size: 11px; color: var(--ink-soft); }
.seg { display: inline-flex; border-radius: 12px; border: 1.5px solid var(--line); overflow: hidden; background: var(--surface); }
.seg button { padding: 8px 14px; border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.text-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.text-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#text-weight, #text-size { width: 100%; }
#text-weight { height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; color: var(--ink); }
#banner.is-over-text { cursor: move; }
@media (max-width: 760px) { .text-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- Result cards: one dark card look for every tool, no raw lists ---- */
.fx-card {
  position: relative; overflow: hidden; border-radius: 28px; padding: 30px 28px 26px; color: #fff;
  background:
    radial-gradient(700px 320px at 100% -10%, rgba(139, 111, 232, 0.4), transparent 60%),
    radial-gradient(520px 300px at -10% 110%, rgba(236, 72, 153, 0.22), transparent 60%),
    linear-gradient(160deg, #1d1436 0%, #2a1a4f 60%, #161032 100%);
  box-shadow: 0 30px 60px -32px rgba(20, 12, 46, 0.7);
}
.fx-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #c4b5fd; }
.fx-title { margin: 8px 0 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.fx-sub { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.66); overflow-wrap: anywhere; }
.fx-note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.fx-big {
  margin-top: 22px; font-size: clamp(56px, 12vw, 100px); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; background: linear-gradient(120deg, #ffffff, #c4b5fd 60%, #f472b6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.fx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 22px; }
.fx-stat { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.fx-stat b { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }

.fx-people { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 24px; }
.fx-person {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 18px 10px 14px;
  border-radius: 22px; text-decoration: none; color: #fff; text-align: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.15s ease, background 0.15s ease;
}
.fx-person:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }
.fx-person .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), 0 10px 22px -8px rgba(0, 0, 0, 0.55); }
.fx-person__name { max-width: 100%; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-person__handle { max-width: 100%; font-size: 12px; color: rgba(255, 255, 255, 0.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-person__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 4px; }

.fx-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #e5e7eb; white-space: nowrap; }
.fx-pill--hot { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.fx-pill--warm { background: rgba(244, 114, 182, 0.16); color: #f9a8d4; }
.fx-pill--cool { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.fx-pill--cold { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }

/* Mutual orbit: a chain of people with glowing links. */
.fx-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.fx-chain .fx-person { width: 160px; }
.fx-chain__link { position: relative; width: 52px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #a78bfa, #f472b6); box-shadow: 0 0 14px rgba(244, 114, 182, 0.55); }
.fx-chain__link::after { content: ""; position: absolute; right: -3px; top: -4px; border: 5px solid transparent; border-left: 8px solid #f472b6; }

/* Year tiles: height and glow follow the count. */
.fx-years { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 10px; margin-top: 26px; }
.fx-year {
  --s: 0.3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 84px; height: calc(74px + 70px * var(--s)); padding: 0 14px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, rgba(167, 139, 250, calc(0.14 + 0.5 * var(--s))), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 calc(30px * var(--s)) rgba(167, 139, 250, calc(0.1 + 0.35 * var(--s)));
}
.fx-year__y { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.66); }
.fx-year__n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-year__s { font-size: 11px; color: rgba(255, 255, 255, 0.55); }

/* Heatmap: the best three slots as big time cards. */
.fx-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fx-slot {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 16px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.fx-slot--1 { background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(255, 255, 255, 0.05)); border-color: rgba(251, 191, 36, 0.45); }
.fx-slot__rank { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); }
.fx-slot--1 .fx-slot__rank { color: #fbbf24; }
.fx-slot__time { font-size: clamp(30px, 6vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.fx-slot__day { font-size: 14px; font-weight: 700; color: #c4b5fd; }
.fx-slot__meta { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }

/* Tone: one orb for the mood of the account, and a share tile per mood. */
.fx-mood-orb {
  --c: #a78bfa;
  display: grid; place-items: center; width: 150px; height: 150px; margin: 26px auto 0; border-radius: 50%;
  font-size: 58px; line-height: 1;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.5), var(--c) 38%, rgba(20, 12, 46, 0.2) 75%);
  box-shadow: 0 0 70px -6px var(--c);
}
.fx-moods { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 26px; }
.fx-mood {
  --c: #a78bfa; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 3px solid var(--c);
}
.fx-mood b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-mood span { font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }

/* Bio: the bio as a quote, then each snapshot as a card. */
.fx-me { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.fx-quote {
  margin: 16px 0 0; padding: 18px 20px; border-radius: 20px; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.45;
  background: rgba(255, 255, 255, 0.06); border-left: 3px solid #c4b5fd; white-space: pre-wrap; overflow-wrap: anywhere;
}
.fx-h { margin: 28px 0 0; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: #e9e3ff; }
.fx-snaps { display: grid; gap: 10px; margin-top: 14px; }
.fx-snap { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.fx-snap .fx-pill { justify-self: start; }
.fx-snap__text { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: #f5f3ff; }
.fx-btn {
  margin-top: 22px; height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700;
  color: #e9e3ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer;
}
.fx-btn:hover { background: rgba(255, 255, 255, 0.14); }

@media (max-width: 560px) {
  .fx-card { padding: 22px 16px 20px; border-radius: 22px; }
  .fx-people { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .fx-chain .fx-person { width: 130px; }
  .fx-slots { grid-template-columns: 1fr; }
  .fx-mood-orb { width: 120px; height: 120px; font-size: 46px; }
}


/* ---- Site-wide polish: tool page hero, floating form, share row, X button ---- */
body[data-tool] { background: #f6f4fd; }

.tool { padding: 0 24px; }
.tool__head {
  position: relative; overflow: hidden; padding: 44px 40px 84px; border-radius: 30px; color: #fff;
  background:
    radial-gradient(620px 320px at 100% 0%, rgba(168, 85, 247, 0.45), transparent 60%),
    radial-gradient(480px 300px at 0% 120%, rgba(236, 72, 153, 0.3), transparent 60%),
    linear-gradient(160deg, #120d28 0%, #1d1245 60%, #14102e 100%);
}
.tool__head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.tool__head h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(32px, 4.8vw, 50px); letter-spacing: -0.035em; line-height: 1.05; }
.tool__head p { position: relative; z-index: 1; margin-top: 14px; max-width: 640px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }

/* The lookup form floats up over the bottom of the hero. */
.tool__head + .panel {
  position: relative; z-index: 2; margin: -60px 22px 0; border-radius: 24px; border: 1px solid #ece7fb;
  box-shadow: 0 30px 60px -32px rgba(60, 30, 140, 0.45);
}
.tool .panel { border-radius: 24px; }
.tool .note-box { border-radius: 20px; }

/* Share row at the foot of every result card. */
.fx-share {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fx-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.fx-brand__mark { font-size: 16px; }
.fx-brand__name { font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.fx-brand__tool { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11.5px; font-weight: 700; color: #c4b5fd; }
.fx-share__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-share__x {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  background: #fff; color: #0f0f14; font-weight: 800; font-size: 14.5px; text-decoration: none;
  box-shadow: 0 12px 28px -14px rgba(255, 255, 255, 0.7); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fx-share__x:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(255, 255, 255, 0.85); }
.fx-share__copy {
  height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06); color: #f5f3ff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.fx-share__copy:hover { background: rgba(255, 255, 255, 0.12); }

/* Share on X for the canvas tools (banner and map). */
.btn.btn--x, .circle-page .btn.btn--x { background: #0f0f14; color: #fff; border-color: #0f0f14; box-shadow: 0 12px 26px -14px rgba(15, 15, 20, 0.8); text-decoration: none; }
.btn.btn--x::before { content: "𝕏"; margin-right: 8px; font-weight: 800; }
.btn.btn--x:hover { filter: none; background: #26262e; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Lucide icons: sized to sit on the text line. */
.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; vertical-align: -0.2em; }

/* ---- Tool personality: each tool has a hue, its avatar, and tinted surfaces (no raw white) ---- */
.tool-card__avatar { width: 64px; height: 64px; display: block; }
.tool-avatar { width: 56px; height: 56px; flex: none; }
.tool__head h1 { display: flex; align-items: center; gap: 14px; }

a.tool-card { --hue: #6d4bdb; background: color-mix(in srgb, var(--hue) 11%, #ffffff); border-color: color-mix(in srgb, var(--hue) 26%, #ffffff); }
a.tool-card:hover { border-color: var(--hue); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--hue) 70%, transparent); }
a.tool-card h3 { color: #1d1a36; }
a.tool-card .tool-card__go { color: var(--hue); }
a.tool-card[href$="/vibe"] { --hue: #ec4899; }
a.tool-card[href$="/radar"] { --hue: #8b5cf6; }
a.tool-card[href$="/active"] { --hue: #f59e0b; }
a.tool-card[href$="/ghosts"] { --hue: #38bdf8; }
a.tool-card[href$="/mutual"] { --hue: #22c55e; }
a.tool-card[href$="/capsule"] { --hue: #fb923c; }
a.tool-card[href$="/drift"] { --hue: #6366f1; }
a.tool-card[href$="/lost"] { --hue: #f43f5e; }
a.tool-card[href$="/heatmap"] { --hue: #eab308; }
a.tool-card[href$="/tone"] { --hue: #14b8a6; }
a.tool-card[href$="/bio"] { --hue: #a3e635; }
a.tool-card[href$="/circle"] { --hue: #06b6d4; }

body[data-tool="vibe"] { --hue: #ec4899; }
body[data-tool="radar"] { --hue: #8b5cf6; }
body[data-tool="active"] { --hue: #f59e0b; }
body[data-tool="ghosts"] { --hue: #38bdf8; }
body[data-tool="mutual"] { --hue: #22c55e; }
body[data-tool="capsule"] { --hue: #fb923c; }
body[data-tool="drift"] { --hue: #6366f1; }
body[data-tool="lost"] { --hue: #f43f5e; }
body[data-tool="heatmap"] { --hue: #eab308; }
body[data-tool="tone"] { --hue: #14b8a6; }
body[data-tool="bio"] { --hue: #a3e635; }

body[data-tool] .tool__head {
  background: color-mix(in srgb, var(--hue) 20%, #ffffff); color: #1d1a36;
  border: 1px solid color-mix(in srgb, var(--hue) 30%, #ffffff);
}
body[data-tool] .tool__head h1 { color: #1d1a36; }
body[data-tool] .tool__head p { color: #4a4670; }
body[data-tool] .tool__head::before, body[data-tool] .tool__head::after { display: none; }
body[data-tool] .tool .panel, .tool .panel {
  background: color-mix(in srgb, var(--hue, #6d4bdb) 6%, #ffffff);
  border-color: color-mix(in srgb, var(--hue, #6d4bdb) 22%, #ffffff);
}

/* ---- Tool pages: a hero with the tool's character, a steps strip, tinted controls ---- */
body[data-tool] .tool__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center;
  padding: 44px 44px 40px; border-radius: 28px; overflow: hidden; position: relative;
  background:
    radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--hue) 45%, #ffffff), transparent 70%),
    color-mix(in srgb, var(--hue) 16%, #ffffff);
}
body[data-tool] .tool__head h1 { display: block; grid-column: 1; margin: 0; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.035em; line-height: 1.05; }
body[data-tool] .tool__head p { grid-column: 1; max-width: 620px; font-size: 16.5px; line-height: 1.6; }
body[data-tool] .tool__art {
  grid-column: 2; grid-row: 1 / span 2; width: clamp(120px, 18vw, 190px); height: auto; filter: drop-shadow(0 18px 24px rgba(29, 26, 54, 0.18));
}
.masthead__art { display: block; width: 140px; height: 140px; margin: 0 auto 6px; }

/* How it works: three quiet steps under the header. */
.tool__steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tool__steps li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; font-size: 14.5px; font-weight: 600;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--hue, #6d4bdb) 22%, #ffffff); color: var(--ink);
}
.tool__steps li span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 13px;
  background: var(--hue, #6d4bdb); color: #1d1a36;
}

/* Controls take the tool's colour. */
body[data-tool] #submit { background: var(--hue); color: #1d1a36; box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--hue) 90%, #000); }
body[data-tool] #submit:hover:not(:disabled) { filter: brightness(1.04); }
body[data-tool] .field:focus-within { border-color: var(--hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 22%, transparent); }
body[data-tool] .field input:focus { border-color: transparent; }

/* Results enter with a short rise, so they do not appear abruptly. */
#results:not([hidden]) { animation: rise 0.45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  body[data-tool] .tool__head { grid-template-columns: 1fr; padding: 28px 24px 26px; }
  body[data-tool] .tool__art { grid-column: 1; grid-row: auto; justify-self: center; order: -1; width: 128px; }
  .tool__steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #results:not([hidden]) { animation: none; }
  .tool-card__avatar, .tool__art { animation: none; }
}

/* ---- Banner page: preview first ---- */

/* ==========================================================================
   Share cards: every result is a bold card in the tool's own colour.
   ========================================================================== */
body[data-tool] { --on-hue: #ffffff; }
body[data-tool="active"], body[data-tool="capsule"], body[data-tool="ghosts"], body[data-tool="mutual"],
body[data-tool="heatmap"], body[data-tool="bio"] { --on-hue: #111111; }

.sc {
  position: relative; overflow: hidden; border-radius: 30px; padding: 30px 30px 26px;
  color: var(--on-hue); background: var(--hue); border: 0;
  box-shadow: 0 28px 50px -30px color-mix(in srgb, var(--hue) 75%, #000);
  animation: sc-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.sc::after {
  content: ""; position: absolute; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  background: color-mix(in srgb, var(--on-hue) 10%, transparent); pointer-events: none;
}
@keyframes sc-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.sc__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.sc__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.82; }
.sc__badge {
  font-size: 12px; font-weight: 800; padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--on-hue) 16%, transparent);
}
.sc__title { position: relative; z-index: 1; margin: 16px 0 0; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 900; text-wrap: balance; }
.sc__stat { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; }
.sc__num { font-size: clamp(68px, 12vw, 120px); font-weight: 900; line-height: 0.88; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sc__label { font-size: 16px; font-weight: 800; opacity: 0.85; }
.sc__body { position: relative; z-index: 1; margin-top: 24px; }
.sc__line { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; opacity: 0.92; }
.sc .fx-note { position: relative; z-index: 1; margin-top: 18px; color: inherit; opacity: 0.72; }

/* Tiles and lists inside a card take the card's colour. */
.sc .fx-person { background: color-mix(in srgb, var(--on-hue) 14%, transparent); border: 0; color: inherit; }
.sc .fx-person:hover { background: color-mix(in srgb, var(--on-hue) 22%, transparent); }
.sc .fx-person__handle { color: inherit; opacity: 0.78; }
.sc .fx-person .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-hue) 40%, transparent); }
.sc .fx-pill { background: color-mix(in srgb, var(--on-hue) 16%, transparent); color: inherit; }
.sc .fx-pill--hot, .sc .fx-pill--warm, .sc .fx-pill--cool, .sc .fx-pill--cold { color: inherit; }
.sc .fx-people { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sc .fx-year { background: color-mix(in srgb, var(--on-hue) 16%, transparent); border: 0; color: inherit; }
.sc .fx-year__y { color: inherit; opacity: 0.8; }
.sc .fx-year__s { color: inherit; opacity: 0.75; }
.sc .fx-chain__link { background: color-mix(in srgb, var(--on-hue) 50%, transparent); box-shadow: none; }
.sc .fx-chain__link::after { border-left-color: color-mix(in srgb, var(--on-hue) 50%, transparent); }
.sc .fx-slot { background: color-mix(in srgb, var(--on-hue) 16%, transparent); border: 0; color: inherit; }
.sc .fx-slot--1 { background: color-mix(in srgb, var(--on-hue) 26%, transparent); }
.sc .fx-slot__rank, .sc .fx-slot__day, .sc .fx-slot__meta { color: inherit; opacity: 0.85; }
.sc .fx-mood { background: color-mix(in srgb, var(--on-hue) 14%, transparent); border: 0; border-top: 4px solid var(--c); color: inherit; }
.sc .fx-mood span { color: inherit; opacity: 0.85; }
.sc .fx-mood b { color: inherit; }
.sc .fx-mood .lucide { color: inherit; }
.sc .fx-quote { background: color-mix(in srgb, var(--on-hue) 14%, transparent); border-left-color: var(--on-hue); color: inherit; }
.sc .fx-snap { background: color-mix(in srgb, var(--on-hue) 12%, transparent); border: 0; }
.sc .fx-snap__text { color: inherit; }
.sc .fx-h { color: inherit; }
.sc .fx-me .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-hue) 40%, transparent); }
.sc .fx-stat { background: color-mix(in srgb, var(--on-hue) 14%, transparent); border: 0; color: inherit; }
.sc .fx-stat span { color: inherit; opacity: 0.8; }
.sc .fx-stat b { color: inherit; }
.sc .fx-big { color: inherit; background: none; }
.sc .fx-sub, .sc .fx-title, .sc .fx-eyebrow { color: inherit; }

/* Bold, friendly list used by Radar in cards. */
.sc__list { display: grid; gap: 8px; }
.sc__row {
  display: grid; grid-template-columns: 28px 46px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 14px 10px 12px; border-radius: 18px; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--on-hue) 13%, transparent);
}
.sc__row:hover { background: color-mix(in srgb, var(--on-hue) 22%, transparent); }
.sc__rank { font-size: 14px; font-weight: 900; opacity: 0.8; text-align: right; }
.sc__who { display: grid; min-width: 0; }
.sc__who b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc__who span { font-size: 12.5px; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc__score { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sc__words { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin-top: 18px; }
.sc__word { font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.sc__duo { display: flex; align-items: center; justify-content: space-around; gap: 12px; }
.sc__duo .fx-person { width: 180px; }
.sc__vs { font-size: 14px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }

/* The share strip inside a card. */
.sc .fx-share { position: relative; z-index: 1; border-top-color: color-mix(in srgb, var(--on-hue) 26%, transparent); }
.sc .fx-brand, .sc .fx-brand__name, .sc .fx-brand__tool { color: inherit; }
.sc .fx-brand__tool { background: color-mix(in srgb, var(--on-hue) 16%, transparent); }
.sc .fx-share__x { background: var(--on-hue); color: var(--hue); box-shadow: none; }
.sc .fx-share__x:hover { background: var(--on-hue); filter: brightness(1.05); }
.sc .fx-share__copy { color: inherit; border-color: color-mix(in srgb, var(--on-hue) 40%, transparent); background: color-mix(in srgb, var(--on-hue) 10%, transparent); }
.sc .fx-share__copy:hover { background: color-mix(in srgb, var(--on-hue) 20%, transparent); }
.sc .podium__slot { background: color-mix(in srgb, var(--on-hue) 14%, transparent); border: 0; color: inherit; }
@media (max-width: 560px) {
  .sc { padding: 24px 20px 22px; border-radius: 26px; }
  .sc__duo .fx-person { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .sc { animation: none; } }

/* ---- Vibe match: four signals with their reasons, and the people you both talk to ---- */
.vibe-signals { display: grid; gap: 16px; margin-top: 24px; }
.vibe-signal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vibe-signal__label { font-size: 14px; font-weight: 800; color: #f5f3ff; }
.vibe-signal__value { font-size: 14px; font-weight: 800; color: #f9a8d4; font-variant-numeric: tabular-nums; }
.vibe-signal__track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 8px; }
.vibe-signal__fill { display: block; height: 100%; border-radius: 999px; background: #ec4899; transition: width 0.6s ease; }
.vibe-signal__hint { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.vibe-shared { display: flex; flex-wrap: wrap; gap: 10px; }
.vibe-shared__chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  text-decoration: none; color: #f5f3ff; font-size: 14px; font-weight: 700; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.vibe-shared__chip:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Insight tools: follower tier rows ---- */
.tier-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); margin-top: 8px; }
.tier-row b { font-size: 15px; font-weight: 800; }
.tier-row__count { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier-row__names { grid-column: 1 / -1; font-size: 13px; color: rgba(255, 255, 255, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Result cards: the dark card, used by the insight pages (text stays readable on any tool) ---- */
body[data-tool] .sc {
  background: #101012; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px; box-shadow: 0 30px 60px -32px rgba(20, 12, 46, 0.7);
}
body[data-tool] .sc::after { display: none; }
body[data-tool] .sc__eyebrow { color: #9fb4ff; opacity: 1; font-size: 11px; letter-spacing: 0.22em; }
body[data-tool] .sc__badge { background: rgba(255, 255, 255, 0.08); color: #e7e7e4; }
body[data-tool] .sc__title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
body[data-tool] .sc__num { font-size: clamp(40px, 7vw, 64px); font-weight: 800; color: #ffffff; }
body[data-tool] .sc__label { font-size: 13px; color: rgba(255, 255, 255, 0.6); opacity: 1; }
body[data-tool] .sc .fx-note, body[data-tool] .sc .fx-sub { color: rgba(255, 255, 255, 0.55); opacity: 1; }
body[data-tool] .sc .fx-share__x { background: #ffffff; color: #111111; }
body[data-tool] .sc .fx-person { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
body[data-tool] .sc .fx-pill { background: rgba(255, 255, 255, 0.1); color: #e5e7eb; }
body[data-tool] .sc .fx-stat { background: rgba(255, 255, 255, 0.05); border: 0; }
body[data-tool] .sc .fx-share { border-top-color: rgba(255, 255, 255, 0.1); }

/* ---- Insight cards: proportional bars and stat tiles ---- */
.ins-bar { margin-top: 16px; }
.ins-bar__head { display: flex; align-items: center; gap: 10px; }
.ins-bar__label { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar__value { font-size: 15px; font-weight: 800; color: #9fb4ff; font-variant-numeric: tabular-nums; }
.ins-bar__track { height: 10px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ins-bar__fill { display: block; height: 100%; border-radius: 999px; background: #9fb4ff; }
.ins-bar__detail { margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.ins-bar .avatar { width: 40px; height: 40px; }
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.ins-tiles .fx-stat { padding: 16px; }
.ins-tiles .fx-stat b { font-size: 22px; }

/* ---- People in results: circle photo with the @username beside it ---- */
.person-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; }
.person-chip .avatar { width: 36px; height: 36px; }
.ins-people { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ins-people__chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #f5f3ff; }
.ins-people__chip .avatar { width: 28px; height: 28px; }
.ins-people__none { font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* ---- Streak heatmap: one square per day, in the card's colour ---- */
.ins-heat { display: flex; gap: 4px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px; }
.ins-heat__col { display: grid; grid-template-rows: repeat(7, 13px); gap: 4px; }
.ins-heat__cell { width: 13px; height: 13px; border-radius: 3px; display: inline-block; background: rgba(255, 255, 255, 0.07); }
.ins-heat__cell[data-level="1"] { background: rgba(159, 180, 255, 0.28); }
.ins-heat__cell[data-level="2"] { background: rgba(159, 180, 255, 0.5); }
.ins-heat__cell[data-level="3"] { background: rgba(159, 180, 255, 0.75); }
.ins-heat__cell[data-level="4"] { background: #9fb4ff; }
.ins-heat__cell[data-level="none"] { background: transparent; }
.ins-heat__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.ins-heat__legend .ins-heat__cell { width: 11px; height: 11px; }

/* ==========================================================================
   Night theme: one dark, grown-up look for every page and every result.
   Near-black surfaces, thin borders, white type, and each tool's hue used
   only as an accent. This layer comes last so it wins over earlier styles.
   ========================================================================== */
:root {
  --n-bg: #fafafa;
  --n-surface: #ffffff;
  --n-raised: #f4f4f5;
  --n-line: rgba(9, 9, 11, 0.08);
  --n-line-strong: rgba(9, 9, 11, 0.16);
  --n-ink: #09090b;
  --n-soft: #52525b;
  --n-faint: #71717a;
  --n-accent: #7c3aed;
  --c-surface: #111114;
  --c-raised: #19191f;
  --c-line: rgba(255, 255, 255, 0.08);
  --c-line-strong: rgba(255, 255, 255, 0.16);
  --c-ink: #f4f4f5;
  --c-soft: #a1a1aa;
  --c-faint: #8a8a93;
}

html { background: var(--n-bg); }
body, body.landing, body[data-tool], body.circle-page { background: var(--n-bg); color: var(--n-ink); }
body ::selection { background: rgba(124, 58, 237, 0.18); }

/* Navigation */

/* Buttons */
body .btn { background: var(--n-ink); color: #ffffff; border: 1px solid var(--n-ink); box-shadow: none; }
body .btn:hover:not(:disabled) { background: #27272a; filter: none; }
body .btn--ghost { background: transparent; color: var(--n-ink); border: 1px solid var(--n-line-strong); }
body .btn--ghost:hover:not(:disabled) { background: rgba(9, 9, 11, 0.04); }
body .link-btn { color: var(--n-accent); }

/* Landing */
body .hero { padding: 96px 0 72px; }
body .hero .eyebrow { color: var(--n-accent); letter-spacing: 0.22em; }
body .hero h1 { color: var(--n-ink); font-size: clamp(42px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; max-width: 920px; margin-left: auto; margin-right: auto; }
body .hero .lede, body .hero p.lede { color: var(--n-soft); font-size: 18px; max-width: 640px; }
body .hero__actions .btn { height: 52px; padding: 0 24px; border-radius: 12px; font-size: 15.5px; }
body .section__head h2 { color: var(--n-ink); letter-spacing: -0.03em; }
body .section__head p { color: var(--n-soft); }
body .group__title { color: var(--n-faint); border-bottom: 1px solid var(--n-line); padding-bottom: 10px; }

body a.tool-card, body .tool-card {
  background: var(--n-surface); border: 1px solid var(--n-line); border-radius: 18px; color: var(--n-ink);
  box-shadow: none; transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
body a.tool-card:hover { background: var(--n-raised); border-color: var(--hue, var(--n-accent)); transform: translateY(-2px); box-shadow: none; }
body a.tool-card h3 { color: var(--n-ink); }
body a.tool-card p { color: var(--n-soft); }
body a.tool-card .tool-card__go { color: var(--hue, var(--n-accent)); }
body .tool-card__avatar { width: 60px; height: 60px; }
body .badge, body .badge--live { background: #f4f4f5; color: var(--n-soft); border: 1px solid var(--n-line); }
body .badge--live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #34d399; margin-right: 6px; vertical-align: 1px; }

body .note-box { background: var(--n-surface); border: 1px solid var(--n-line); color: var(--n-soft); }
body .note-box strong { color: var(--n-ink); }
body .coffee-card { background: var(--n-surface); border: 1px solid var(--n-line); box-shadow: none; }
body .coffee-card h3 { color: var(--n-ink); }
body .coffee-card p { color: var(--n-soft); }

body .site-footer { color: var(--n-faint); border-top: 1px solid var(--n-line); }
body .site-footer a, body .credit a { color: var(--n-soft); }
body .site-footer details p { color: var(--n-faint); }

/* Tool pages */
body[data-tool] .tool__head {
  background: var(--n-surface); border: 1px solid var(--n-line); color: var(--n-ink);
  box-shadow: inset 0 3px 0 var(--hue, var(--n-accent));
}
body[data-tool] .tool__head h1 { color: var(--n-ink); }
body[data-tool] .tool__head p { color: var(--n-soft); }
body[data-tool] .tool__art { filter: drop-shadow(0 16px 24px rgba(9, 9, 11, 0.14)); }
body .tool__steps li { background: var(--n-surface); border: 1px solid var(--n-line); color: var(--n-ink); }
body .tool__steps li span { background: var(--hue, var(--n-accent)); color: #09090b; }

body .panel, body[data-tool] .tool .panel, body .tool__head + .panel {
  background: var(--n-surface); border: 1px solid var(--n-line); color: var(--n-ink); box-shadow: none;
}
body .panel__head h2 { color: var(--n-ink); }
body .panel__head p, body .form-hint { color: var(--n-faint); }
body .field input, body input[type="text"], body input[type="date"], body input[type="number"], body select, body textarea {
  background: #ffffff; color: var(--n-ink); border-color: var(--n-line-strong);
}
body .field input::placeholder, body textarea::placeholder { color: var(--n-faint); }
body .field__at { color: var(--hue, var(--n-accent)); }
body[data-tool] .field:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue, #a78bfa) 30%, transparent); }
body[data-tool] #submit { background: var(--hue, var(--n-ink)); color: #09090b; border-color: transparent; box-shadow: none; font-weight: 800; }

body .refresh-row .btn--ghost { color: var(--n-ink); }
body .refresh-note, body .loading-line { color: var(--n-soft); }
body .status--error { background: #fff1f2; color: #be123c; }
body .status--warn { background: #fffbeb; color: #b45309; }
body .status--info { background: #f5f3ff; color: #6d28d9; }

/* Every result card: one flat dark surface with a hairline border and a hue rule on top */
body .fx-card, body .radar-card, body .vibe-card, body[data-tool] .sc {
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink);
  border-radius: 22px; box-shadow: inset 0 3px 0 var(--hue, var(--c-accent)), 0 30px 60px -36px rgba(9, 9, 11, 0.35);
}
body .fx-eyebrow, body .radar-card__eyebrow, body .vibe-card__eyebrow, body[data-tool] .sc__eyebrow { color: var(--hue, var(--c-accent)); }
body .fx-title, body .radar-card__title, body[data-tool] .sc__title { color: var(--c-ink); letter-spacing: -0.025em; }
body .fx-sub, body .radar-card__meta, body .fx-note, body .radar-card__note, body[data-tool] .sc .fx-note { color: var(--c-faint); }
body .fx-person, body .podium__slot, body .radar-tally__row, body .fx-stat, body .fx-year, body .fx-slot, body .fx-mood, body .fx-snap, body .tier-row, body .vibe-shared__chip, body .sc__row {
  background: var(--c-raised); border: 1px solid var(--c-line);
}
body .podium__slot--1 { border-color: rgba(245, 197, 66, 0.45); }
body .fx-share { border-top-color: var(--c-line); }
body .fx-share__x { background: #ffffff; color: #09090b; }
body .fx-share__copy { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
body .fx-brand__name { color: var(--c-ink); }
body .fx-brand__tool { background: rgba(255, 255, 255, 0.06); color: var(--c-soft); }
body .ins-bar__fill, body .vibe-signal__fill { background: var(--hue, var(--c-accent)); }
body .ins-bar__value, body .vibe-signal__value { color: var(--hue, var(--c-accent)); }
body .ins-bar__track, body .vibe-signal__track { background: rgba(255, 255, 255, 0.07); }
body .vibe-ring__fill { stroke: var(--hue, #ec4899); }
body .chip { background: rgba(255, 255, 255, 0.08); color: var(--c-soft); }

/* Banner editor */
body .custom-block { background: var(--n-raised); border: 1px solid var(--n-line); }
body .custom-block__title, body .control__label { color: var(--n-soft); }
body .font-chip { background: var(--n-surface); border-color: var(--n-line); color: var(--n-ink); }
body .font-chip[aria-pressed="true"] { border-color: var(--hue, var(--n-accent)); background: var(--n-raised); }
body .font-chip__kind { color: var(--n-faint); }
body .seg { background: var(--n-surface); border-color: var(--n-line); }
body .seg button { color: var(--n-soft); }
body .seg button[aria-pressed="true"] { background: var(--n-ink); color: #ffffff; }
body .uploader { background: var(--n-surface); border-color: var(--n-line-strong); color: var(--n-soft); }
body .bg-chip span, body .res-presets button { color: var(--n-soft); }
body .res-presets button { background: var(--n-surface); border-color: var(--n-line); }
body .res-presets button[aria-pressed="true"] { border-color: var(--hue, var(--n-accent)); color: var(--n-ink); }
body .banner-panel--top { background: var(--n-surface); border: 1px solid var(--n-line); }

/* Engagement map page */
body.circle-page .masthead h1 { color: var(--n-ink); }
body.circle-page .masthead .lede, body.circle-page .eyebrow { color: var(--n-soft); }

/* Hues for the tools added after the first set, on their pages and on the landing cards */
body[data-tool="roast"] { --hue: #ef4444; }
body[data-tool="main"] { --hue: #a855f7; }
body[data-tool="engage"] { --hue: #10b981; }
body[data-tool="streak"] { --hue: #f97316; }
body[data-tool="year"] { --hue: #0ea5e9; }
body[data-tool="tiers"] { --hue: #94a3b8; }
body[data-tool="monthly"] { --hue: #3b82f6; }
body[data-tool="circle"] { --hue: #06b6d4; }
a.tool-card[href$="/roast"] { --hue: #ef4444; }
a.tool-card[href$="/main"] { --hue: #a855f7; }
a.tool-card[href$="/engage"] { --hue: #10b981; }
a.tool-card[href$="/streak"] { --hue: #f97316; }
a.tool-card[href$="/year"] { --hue: #0ea5e9; }
a.tool-card[href$="/tiers"] { --hue: #94a3b8; }
a.tool-card[href$="/monthly"] { --hue: #3b82f6; }

/* Tool pages carried an older, more specific light nav rule */

/* Banner editor controls that kept their light styles */
body[data-tool] .text-layout textarea,
body[data-tool] #text-weight,
body[data-tool] .res-custom input,
body[data-tool] .custom-block select,
body[data-tool] .custom-block input[type="number"],
body[data-tool] .custom-block input[type="text"] {
  background: #ffffff; color: var(--n-ink); border: 1px solid var(--n-line-strong);
}
body[data-tool] #text-color { background: #ffffff; border: 1px solid var(--n-line-strong); }
body[data-tool] .res-presets button { background: var(--n-surface); border: 1px solid var(--n-line); color: var(--n-ink); }
body[data-tool] .res-presets button[aria-pressed="true"] { background: var(--n-raised); border-color: var(--hue, var(--n-accent)); color: var(--n-ink); }
body[data-tool] .res-presets button span, body[data-tool] .res-presets button small { color: var(--n-faint); }
body[data-tool] .uploader__text, body[data-tool] .uploader__text b, body[data-tool] .uploader__text strong { color: var(--n-ink); }
body[data-tool] .uploader__hint { color: var(--n-faint); }
body[data-tool] .uploader__icon { background: var(--hue, var(--n-accent)); color: #09090b; }
body[data-tool] .btn.btn--x { background: transparent; color: var(--n-ink); border: 1px solid var(--n-line-strong); }
body[data-tool] .btn.btn--x:hover { background: rgba(9, 9, 11, 0.04); }
body[data-tool] .toggle span, body[data-tool] .view-controls__hint { color: var(--n-soft); }

/* Engagement map: the search panel matches the other tool pages */
body.circle-page .search { background: var(--n-surface); border: 1px solid var(--n-line); box-shadow: none; }
body.circle-page .search__label { color: var(--n-soft); }
body.circle-page .search .btn--brand, body.circle-page .btn--brand { background: #06b6d4; color: #09090b; box-shadow: none; }

/* The coffee buttons keep their original yellow look */
body .btn.btn--coffee, body .btn.btn--coffee:hover:not(:disabled) {
  background: #ffdd00; color: #1d1a36; border-color: #ffdd00; box-shadow: 0 10px 22px -12px rgba(255, 190, 0, 0.95);
}

/* ==========================================================================
   Home: the landing page, rebuilt. White, editorial, one violet accent.
   ========================================================================== */
body.home { background: #ffffff; }
body.home main { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

body.home .home-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center;
  padding: 88px 0 96px; text-align: left;
}
body.home .home-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(9, 9, 11, 0.1); background: #fafafa; font-size: 13px; font-weight: 700; color: #3f3f46;
}
body.home .home-kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
body.home .home-hero h1 {
  margin: 22px 0 0; font-size: clamp(46px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.05em; font-weight: 800; color: #09090b;
}
body.home .home-mark { color: #7c3aed; }
body.home .home-lede { margin: 24px 0 0; max-width: 520px; font-size: 18.5px; line-height: 1.6; color: #52525b; }
body.home .home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.home .home-btn { height: 52px; padding: 0 22px; border-radius: 12px; font-size: 15.5px; gap: 8px; }
body.home .home-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; color: #52525b; }
body.home .home-trust li { display: inline-flex; align-items: center; gap: 7px; }
body.home .home-trust .lucide { width: 16px; height: 16px; color: #16a34a; }

/* The preview stack: three result cards, fanned */
body.home .home-stage { position: relative; height: 470px; }
body.home .mock {
  position: absolute; width: 300px; padding: 22px; border-radius: 22px; color: #f4f4f5; background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 40px 70px -36px rgba(9, 9, 11, 0.55);
}
body.home .mock--roast { top: 8px; left: 0; transform: rotate(-6deg); box-shadow: inset 0 3px 0 #ef4444, 0 40px 70px -36px rgba(9, 9, 11, 0.55); }
body.home .mock--streak { top: 196px; left: 30px; transform: rotate(3deg); box-shadow: inset 0 3px 0 #f97316, 0 40px 70px -36px rgba(9, 9, 11, 0.55); }
body.home .mock--vibe { top: 40px; right: 0; width: 290px; transform: rotate(4deg); z-index: 2; box-shadow: inset 0 3px 0 #ec4899, 0 50px 90px -40px rgba(9, 9, 11, 0.6); }
body.home .mock__eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
body.home .mock__title { margin: 10px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
body.home .mock__title--center { text-align: center; }
body.home .mock__big { margin: 10px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
body.home .mock__label { font-size: 12px; color: #a1a1aa; }
body.home .mock__track { height: 8px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
body.home .mock__track i { display: block; height: 100%; border-radius: 999px; }
body.home .mock__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
body.home .mock__grid i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
body.home .mock__grid i.l1 { background: rgba(249, 115, 22, 0.3); }
body.home .mock__grid i.l2 { background: rgba(249, 115, 22, 0.55); }
body.home .mock__grid i.l3 { background: rgba(249, 115, 22, 0.8); }
body.home .mock__grid i.l4 { background: #f97316; }
body.home .mock__duel { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
body.home .mock__face {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px;
  background: #27272a; color: #f4f4f5; box-shadow: 0 0 0 3px #ec4899;
}
body.home .mock__face--b { box-shadow: 0 0 0 3px #38bdf8; }
body.home .mock__ring { width: 120px; height: 120px; }
body.home .mock__share { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #a1a1aa; }
body.home .mock__share b { padding: 7px 12px; border-radius: 999px; background: #ffffff; color: #09090b; letter-spacing: 0; font-size: 12.5px; }

/* Sections */
body.home .home-section { padding: 72px 0 0; }
body.home .home-head { max-width: 680px; margin-bottom: 32px; }
body.home .home-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #7c3aed; }
body.home .home-head h2 { margin: 10px 0 0; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; color: #09090b; }
body.home .home-head p:not(.home-eyebrow) { margin: 12px 0 0; font-size: 16px; color: #52525b; }

body.home .home-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
body.home .home-steps li { padding: 24px; border-radius: 18px; border: 1px solid rgba(9, 9, 11, 0.08); background: #fafafa; }
body.home .home-steps span { font-size: 13px; font-weight: 800; color: #7c3aed; letter-spacing: 0.1em; }
body.home .home-steps b { display: block; margin-top: 10px; font-size: 19px; letter-spacing: -0.02em; color: #09090b; }
body.home .home-steps p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #52525b; }

body.home .home-limits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.home .home-limits div { padding: 22px; border-radius: 18px; border: 1px solid rgba(9, 9, 11, 0.08); background: #ffffff; }
body.home .home-limits b { display: block; font-size: 15.5px; color: #09090b; }
body.home .home-limits p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #52525b; }

body.home .home-coffee {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 36px 40px; border-radius: 22px; border: 1px solid rgba(9, 9, 11, 0.08); background: #fafafa;
}
body.home .home-coffee h3 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.03em; color: #09090b; }
body.home .home-coffee p { margin: 8px 0 0; max-width: 560px; font-size: 15.5px; line-height: 1.6; color: #52525b; }
body.home .home-coffee .btn--coffee { height: 50px; padding: 0 22px; border-radius: 12px; gap: 8px; }
body.home .site-footer { max-width: 1160px; margin: 88px auto 0; padding: 26px 24px 40px; }

@media (max-width: 960px) {
  body.home .home-hero { grid-template-columns: 1fr; padding: 56px 0 40px; }
  body.home .home-stage { height: 430px; max-width: 520px; width: 100%; margin: 0 auto; }
  body.home .home-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.home .home-stage { height: 520px; }
  body.home .mock { width: 260px; }
  body.home .mock--roast { left: 0; }
  body.home .mock--vibe { top: 150px; right: 0; width: 260px; }
  body.home .mock--streak { top: 330px; left: 10px; }
  body.home .home-steps, body.home .home-limits { grid-template-columns: 1fr; }
  body.home .home-coffee { padding: 26px 22px; }
}

/* Hero preview: spread the three cards so none hides another's text */
body.home .home-stage { height: 520px; }
body.home .mock--roast { top: 0; left: 0; width: 250px; transform: rotate(-5deg); }
body.home .mock--vibe { top: 64px; right: 0; width: 256px; transform: rotate(4deg); }
body.home .mock--streak { top: 300px; left: 46px; width: 270px; transform: rotate(-2deg); z-index: 3; }
@media (max-width: 600px) {
  body.home .home-stage { height: 640px; }
  body.home .mock--roast { top: 0; left: 0; width: 250px; }
  body.home .mock--vibe { top: 210px; right: 0; width: 250px; }
  body.home .mock--streak { top: 430px; left: 8px; width: 260px; }
}

/* ---- Home, below the hero ---- */
body.home .home-section { padding-top: 104px; }
body.home .home-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; }
body.home .home-head--row > p { max-width: 360px; margin: 0; color: #52525b; font-size: 15px; }

/* Marquee of tools */
body.home .marquee { overflow: hidden; margin: 8px 0 0; padding: 18px 0; border-top: 1px solid rgba(9, 9, 11, 0.08); border-bottom: 1px solid rgba(9, 9, 11, 0.08);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
body.home .marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
body.home .marquee__track span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid rgba(9, 9, 11, 0.08); background: #fafafa; font-size: 14.5px; font-weight: 700; color: #18181b; white-space: nowrap; }
body.home .marquee__track img { width: 34px; height: 34px; }
body.home .marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.home .marquee__track { animation: none; } }

/* Featured cards */
body.home .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.home .feat { display: flex; flex-direction: column; border-radius: 24px; border: 1px solid rgba(9, 9, 11, 0.08); background: #ffffff; text-decoration: none; color: #09090b; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
body.home .feat:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(9, 9, 11, 0.35); border-color: rgba(9, 9, 11, 0.16); }
body.home .feat__visual { height: 200px; padding: 26px; background: #111114; color: #f4f4f5; display: flex; flex-direction: column; justify-content: center; }
body.home .feat--vibe .feat__visual { flex-direction: row; align-items: center; justify-content: space-around; box-shadow: inset 0 3px 0 #ec4899; }
body.home .feat--roast .feat__visual { box-shadow: inset 0 3px 0 #ef4444; }
body.home .feat--year .feat__visual { box-shadow: inset 0 3px 0 #0ea5e9; }
body.home .feat__face { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #27272a; box-shadow: 0 0 0 3px #ec4899; }
body.home .feat__face--b { box-shadow: 0 0 0 3px #38bdf8; }
body.home .feat__ring { width: 118px; height: 118px; }
body.home .feat__line { margin: 0; font-size: 18px; font-weight: 700; color: #e4e4e7; }
body.home .feat__line b { color: #ffffff; }
body.home .feat__big { margin: 6px 0 0; font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
body.home .feat__track { height: 8px; margin-top: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
body.home .feat__track i { display: block; height: 100%; border-radius: 999px; }
body.home .feat__bars { display: flex; align-items: flex-end; gap: 7px; height: 110px; }
body.home .feat__bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(14, 165, 233, 0.45); }
body.home .feat__bars i:nth-child(8) { background: #0ea5e9; }
body.home .feat__caption { margin: 14px 0 0; font-size: 14px; color: #a1a1aa; }
body.home .feat__caption b { color: #ffffff; }
body.home .feat__body { position: relative; padding: 24px 24px 26px; }
body.home .feat__avatar { position: absolute; top: -26px; right: 22px; width: 52px; height: 52px; }
body.home .feat__body h3 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
body.home .feat__body p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #52525b; }
body.home .feat__go { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 800; color: #09090b; }

/* Every tool: one flat grid of horizontal cards */
body.home .groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.home .groups > div, body.home .tool-grid { display: contents; }
body.home .group__title { display: none; }
body.home a.tool-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px; align-items: start;
  padding: 18px; border-radius: 18px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08);
}
body.home a.tool-card:hover { background: #fafafa; }
body.home .tool-card__top { display: contents; }
body.home .tool-card__avatar { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; }
body.home .tool-card .badge { display: none; }
body.home a.tool-card h3 { grid-column: 2; margin: 2px 0 0; font-size: 16.5px; }
body.home a.tool-card p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.5; }
body.home .tool-card__go { grid-column: 2; margin-top: 6px; padding: 0; font-size: 13px; }

/* How it works */
body.home .how { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
body.home .how::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 1px; background: rgba(9, 9, 11, 0.12); }
body.home .how li { position: relative; }
body.home .how__num { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #09090b; color: #ffffff; font-size: 20px; font-weight: 800; }
body.home .how b { display: block; margin-top: 18px; font-size: 19px; letter-spacing: -0.02em; }
body.home .how p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #52525b; max-width: 300px; }

/* Limits */
body.home .honest { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; padding: 40px; border-radius: 26px; background: #fafafa; border: 1px solid rgba(9, 9, 11, 0.08); }
body.home .honest__intro h2 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.03em; }
body.home .honest__intro p:not(.home-eyebrow) { margin: 12px 0 0; color: #52525b; font-size: 15px; }
body.home .honest__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
body.home .honest__list li { display: flex; gap: 14px; }
body.home .honest__list .lucide { width: 22px; height: 22px; color: #7c3aed; margin-top: 2px; }
body.home .honest__list b { display: block; font-size: 15.5px; }
body.home .honest__list span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.55; color: #52525b; }

/* FAQ */
body.home .faq { display: grid; gap: 10px; max-width: 820px; }
body.home .faq details { border: 1px solid rgba(9, 9, 11, 0.08); border-radius: 16px; padding: 18px 22px; background: #ffffff; }
body.home .faq summary { cursor: pointer; font-size: 16.5px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
body.home .faq summary::-webkit-details-marker { display: none; }
body.home .faq summary::after { content: "+"; color: #7c3aed; font-weight: 800; }
body.home .faq details[open] summary::after { content: "−"; }
body.home .faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #52525b; }

/* Final call to action */
body.home .cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 44px 48px; border-radius: 28px; background: #09090b; color: #ffffff; }
body.home .cta h3 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.035em; }
body.home .cta p { margin: 10px 0 0; max-width: 520px; color: #a1a1aa; font-size: 15.5px; line-height: 1.6; }
body.home .cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
body.home .cta__try { background: #ffffff; color: #09090b; border-color: #ffffff; height: 50px; padding: 0 22px; border-radius: 12px; }
body.home .cta__try:hover:not(:disabled) { background: #f4f4f5; }
body.home .cta .btn--coffee { height: 50px; padding: 0 22px; border-radius: 12px; gap: 8px; }

/* Footer */
body.home .home-footer { border-top: 1px solid rgba(9, 9, 11, 0.08); }
body.home .home-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 8px 0 28px; }
body.home .home-footer__grid > div { display: grid; gap: 8px; align-content: start; }
body.home .home-footer__grid p { margin: 6px 0 0; max-width: 300px; font-size: 14px; color: #52525b; }
body.home .home-footer__grid b { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #09090b; }
body.home .home-footer__grid a:not(.brand) { font-size: 14px; color: #52525b; text-decoration: none; }
body.home .home-footer__grid a:not(.brand):hover { color: #09090b; }
body.home .home-footer .brand { font-weight: 800; letter-spacing: -0.01em; color: #09090b; text-decoration: none; }

@media (max-width: 960px) {
  body.home .feat-grid, body.home .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .honest { grid-template-columns: 1fr; padding: 30px; }
}
@media (max-width: 600px) {
  body.home .home-section { padding-top: 76px; }
  body.home .feat-grid, body.home .groups, body.home .how, body.home .home-footer__grid { grid-template-columns: 1fr; }
  body.home .how::before { display: none; }
  body.home .cta { padding: 30px 24px; }
}

/* "Built by Sharad" credit as a pill, on every page */
body .credit {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px;
  border: 1px solid rgba(9, 9, 11, 0.12); background: #ffffff; font-size: 13px; font-weight: 600; color: #52525b;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.05);
}
body .credit a { display: inline-flex; align-items: center; gap: 6px; color: #09090b; font-weight: 800; text-decoration: none; }
body .credit a:hover { color: #7c3aed; }
body .credit img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
body .credit-line .credit { margin: 0 auto; }

/* More breathing room inside the credit pill */
body .credit { padding: 8px 18px 8px 8px; gap: 10px; }
body .credit img { width: 26px; height: 26px; }
body .credit { padding: 8px 18px; }

/* ---- Home: tools grouped under clear section headers, each in its own tidy grid ---- */
body.home .groups { display: grid; grid-template-columns: 1fr; gap: 44px; }
body.home .groups > div { display: block; }
body.home .group__title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 0;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #09090b;
}
body.home .group__title::after { content: ""; flex: 1; height: 1px; background: rgba(9, 9, 11, 0.1); }
body.home .tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.home .groups > div:has(.tool-card) { min-width: 0; }
@media (max-width: 960px) { body.home .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { body.home .tool-grid { grid-template-columns: 1fr; } body.home .group__title { font-size: 11.5px; } }


/* ---- Home tool cards: the same dark card as the result cards ---- */
body.home a.tool-card {
  background: #111114; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; color: #f4f4f5;
  box-shadow: inset 0 3px 0 var(--hue, #7c3aed), 0 30px 60px -40px rgba(9, 9, 11, 0.6);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
body.home a.tool-card:hover { background: #17171c; border-color: rgba(255, 255, 255, 0.12); transform: translateY(-3px); }
body.home .tool-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.home .tool-card__avatar { width: 46px; height: 46px; margin: 0; flex: none; }
body.home .tool-card .badge { display: inline-block; font-size: 10.5px; padding: 4px 9px; background: rgba(255, 255, 255, 0.07); color: #d4d4d8; border: 0; }
body.home .tool-card .badge--live::before { display: none; }
body.home .tool-card .badge--local { background: rgba(255, 255, 255, 0.07); color: #d4d4d8; }
body.home a.tool-card h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hue, #a78bfa); margin: 12px 0 0; line-height: 1.3;
}
body.home a.tool-card p { font-size: 19px; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; line-height: 1.2; margin: 6px 0 0; }
body.home .tool-card__go { color: var(--hue, #a78bfa); font-size: 13px; font-weight: 800; margin-top: 12px; padding: 0; }

/* ---- Home tool cards, final: dark visual panel on top, white body below (as the featured cards) ---- */
body.home a.tool-card {
  display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; align-items: stretch;
  background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); border-radius: 22px; color: #09090b;
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04); transform: none;
}
body.home a.tool-card:hover { background: #ffffff; border-color: rgba(9, 9, 11, 0.16); transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(9, 9, 11, 0.35); }
body.home .tool-card__top {
  display: flex; align-items: center; justify-content: center; position: relative; height: 170px; margin: 0; padding: 0;
  background: #111114; box-shadow: inset 0 3px 0 var(--hue, #7c3aed);
}
body.home .tool-card__avatar { width: 104px; height: 104px; margin: 0; }
body.home .tool-card .badge { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.1); color: #e4e4e7; border: 0; font-size: 10.5px; padding: 4px 9px; }
body.home .tool-card .badge--live::before { display: none; }
body.home a.tool-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #09090b; text-transform: none; margin: 20px 22px 0; line-height: 1.25; }
body.home a.tool-card p { font-size: 14.5px; font-weight: 400; color: #52525b; letter-spacing: 0; line-height: 1.55; margin: 8px 22px 0; }
body.home .tool-card__go { color: var(--hue, #7c3aed); font-size: 14px; font-weight: 800; margin: 16px 22px 22px; padding: 0; }

/* Hero handle field */
body.home .home-handle { margin-top: 30px; max-width: 540px; }
body.home .home-handle__label { display: block; font-size: 13px; font-weight: 700; color: #3f3f46; margin-bottom: 8px; }
body.home .home-handle__row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.14); box-shadow: 0 16px 36px -26px rgba(9, 9, 11, 0.4); }
body.home .home-handle__row:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); }
body.home .home-handle__at { font-size: 17px; font-weight: 800; color: #7c3aed; }
body.home .home-handle input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 600; color: #09090b; padding: 10px 4px; }
body.home .home-handle input::placeholder { color: #a1a1aa; }
body.home .home-handle .home-btn { height: 48px; padding: 0 20px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
body.home .home-browse { margin: 12px 0 0; font-size: 14px; color: #52525b; }
body.home .home-browse a { color: #09090b; font-weight: 700; }
/* Phones: the button drops under the handle, with the same 8px inset on every side. */
@media (max-width: 600px) {
  body.home .home-handle__row { flex-wrap: wrap; padding: 8px; gap: 6px; border-radius: 20px; }
  body.home .home-handle__at { margin-left: 12px; }
  body.home .home-handle input { padding: 12px 4px; }
  body.home .home-handle .home-btn { width: 100%; height: 52px; border-radius: 13px; justify-content: center; font-size: 16px; }
}

/* Partial last rows centre under the grid instead of leaving gaps */
body.home .tool-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body.home .tool-grid > a.tool-card { flex: 0 0 calc((100% - 24px) / 3); max-width: calc((100% - 24px) / 3); }
@media (max-width: 960px) { body.home .tool-grid > a.tool-card { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); } }
@media (max-width: 600px) { body.home .tool-grid > a.tool-card { flex-basis: 100%; max-width: 100%; } }

/* "Keep this free": a quiet, optional link after the share buttons on any result card */
.fx-keep {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px; font-size: 13px; font-weight: 600;
  color: inherit; opacity: 0.6; text-decoration: none; border-bottom: 1px solid transparent; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.fx-keep:hover { opacity: 1; border-bottom-color: currentColor; }
.fx-keep .lucide, .fx-keep__icon { width: 15px; height: 15px; }

/* Buy Me a Coffee: the official button, a rounded rectangle with the Cookie script, in the platform's yellow */
body .coffee-pill, body .btn.btn--coffee, body .home .cta .btn--coffee {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 0; border-radius: 6px; background: #ffdd00; color: #000000; box-shadow: 0 1px 2px rgba(190, 190, 190, 0.5);
  font-family: "Cookie", cursive; font-size: 20px; font-weight: 400; line-height: 1; text-decoration: none; white-space: nowrap;
}
body .coffee-pill:hover, body .btn.btn--coffee:hover:not(:disabled), body .home .cta .btn--coffee:hover { background: #ffdd00; color: #000000; filter: brightness(0.97); transform: none; }
body .coffee-pill .lucide, body .btn.btn--coffee .lucide { width: 18px; height: 18px; color: #000000; }

/* ---- Typography: Sora for headlines and names, Inter for everything else, Cookie only on the coffee buttons ---- */
:root {
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-family: var(--font-text); }
h1, h2, h3, .brand, .sc__title, .sc__num, .fx-title, .fx-big, .radar-card__title, .vibe-card__title,
.mock__title, .mock__big, .feat__body h3, .how__num, .home-steps b, .tool__head h1, .masthead h1,
.specimen__title, .home-hero h1, .home-head h2, .cta h3, .honest__intro h2, .home-coffee h3 {
  font-family: var(--font-display);
}
.home-hero h1, .home-head h2, .section__head h2, .tool__head h1 { letter-spacing: -0.035em; }
body.home .home-hero h1 { font-size: clamp(40px, 5.4vw, 74px); }

/* Coffee buttons use the site font (Inter), not the Cookie script */
body .coffee-pill, body .btn.btn--coffee, body .home .cta .btn--coffee {
  font-family: var(--font-text); font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}

/* ---- The self-marketing loop: one pitch at a time, cycling, pausing on hover ---- */
.loop { margin: 72px auto 0; max-width: 1160px; padding: 0 24px; }
.loop__stage { position: relative; min-height: 136px; border-radius: 24px; border: 1px solid rgba(9, 9, 11, 0.08); background: #fafafa; overflow: hidden; }
.loop__slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 34px;
  text-decoration: none; color: #09090b; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.loop__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.loop__tag { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hue); }
.loop__line { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.loop__cta { font-size: 14.5px; font-weight: 800; color: var(--hue); }
.loop__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.loop__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(9, 9, 11, 0.2); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.loop__dots button.is-active { width: 24px; background: #09090b; }
@media (max-width: 600px) { .loop__slide { padding: 22px 22px; } .loop__stage { min-height: 150px; } }
@media (prefers-reduced-motion: reduce) { .loop__slide { transition: none; } }
body.home .loop { padding: 0; }
@media (max-width: 600px) { body.home .loop__stage { min-height: 150px; } }

/* ==========================================================================
   Result cards, lively: solid tinted cards in each tool's colour. No black, no gradients.
   ========================================================================== */
body[data-tool] .fx-card, body[data-tool] .radar-card, body[data-tool] .vibe-card, body[data-tool] .sc {
  background: color-mix(in srgb, var(--hue, #7c3aed) 10%, #ffffff); color: #09090b;
  border: 1px solid color-mix(in srgb, var(--hue, #7c3aed) 24%, #ffffff);
  box-shadow: inset 0 5px 0 var(--hue, #7c3aed), 0 24px 44px -34px color-mix(in srgb, var(--hue, #7c3aed) 60%, #000);
  border-radius: 26px;
}
body[data-tool] .fx-eyebrow, body[data-tool] .radar-card__eyebrow, body[data-tool] .vibe-card__eyebrow, body[data-tool] .sc__eyebrow,
body[data-tool] .vibe-card__section { color: var(--hue, #7c3aed); }
body[data-tool] .fx-title, body[data-tool] .radar-card__title, body[data-tool] .sc__title, body[data-tool] .vibe-card__head h2,
body[data-tool] .duel__verdict, body[data-tool] .fx-big, body[data-tool] .sc__num, body[data-tool] .fx-stat b, body[data-tool] .fx-year__n { color: #09090b; }
body[data-tool] .fx-sub, body[data-tool] .radar-card__meta, body[data-tool] .fx-note, body[data-tool] .radar-card__note, body[data-tool] .duel__line,
body[data-tool] .sc .fx-note, body[data-tool] .sc__label, body[data-tool] .fx-stat span, body[data-tool] .fx-year__y, body[data-tool] .fx-year__s { color: #52525b; opacity: 1; }
body[data-tool] .fx-person, body[data-tool] .podium__slot, body[data-tool] .radar-tally__row, body[data-tool] .fx-stat, body[data-tool] .fx-year,
body[data-tool] .fx-slot, body[data-tool] .fx-mood, body[data-tool] .fx-snap, body[data-tool] .tier-row, body[data-tool] .vibe-shared__chip,
body[data-tool] .sc__row, body[data-tool] .fx-quote, body[data-tool] .vibe-signal, body[data-tool] .duel__person {
  background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue, #7c3aed) 20%, #ffffff); color: #09090b;
}
body[data-tool] .fx-person__name, body[data-tool] .fx-person__handle, body[data-tool] .radar-tally__handle, body[data-tool] .podium__handle,
body[data-tool] .podium__name, body[data-tool] .radar-tally__name, body[data-tool] .duel__name, body[data-tool] .duel__handle, body[data-tool] .sc__who b,
body[data-tool] .sc__who span, body[data-tool] .sc__word, body[data-tool] .vibe-signal__label { color: #09090b; }
body[data-tool] .fx-person__handle, body[data-tool] .sc__who span, body[data-tool] .podium__label, body[data-tool] .podium__count, body[data-tool] .duel__handle { color: #52525b; }
body[data-tool] .fx-pill, body[data-tool] .sc .fx-pill, body[data-tool] .chip, body[data-tool] .recency { background: color-mix(in srgb, var(--hue, #7c3aed) 14%, #ffffff); color: #09090b; border: 0; }
body[data-tool] .ins-bar__label { color: #09090b; }
body[data-tool] .ins-bar__value, body[data-tool] .vibe-signal__value { color: var(--hue, #7c3aed); }
body[data-tool] .ins-bar__track, body[data-tool] .vibe-signal__track { background: rgba(9, 9, 11, 0.08); }
body[data-tool] .ins-bar__fill, body[data-tool] .vibe-signal__fill { background: var(--hue, #7c3aed); }
body[data-tool] .ins-bar__detail, body[data-tool] .ins-people__chip, body[data-tool] .ins-people__none, body[data-tool] .tier-row__names { color: #52525b; }
body[data-tool] .ins-people__chip { color: #09090b; }
body[data-tool] .vibe-ring__track { stroke: rgba(9, 9, 11, 0.08); }
body[data-tool] .vibe-ring__number, body[data-tool] .vibe-ring__unit, body[data-tool] .vibe-ring__value { color: #09090b; }
body[data-tool] .vibe-card__foot .chip { background: color-mix(in srgb, var(--hue, #7c3aed) 16%, #ffffff); color: #09090b; }
body[data-tool] .fx-slot__time, body[data-tool] .fx-slot__rank, body[data-tool] .fx-slot__day { color: #09090b; }
body[data-tool] .fx-slot__rank, body[data-tool] .fx-slot__day { color: var(--hue, #7c3aed); }
body[data-tool] .fx-mood span, body[data-tool] .fx-mood b { color: #09090b; }
body[data-tool] .fx-mood-orb { background: var(--c, var(--hue, #7c3aed)); box-shadow: none; color: #ffffff; }
body[data-tool] .fx-mood-orb .lucide { color: #ffffff; }
body[data-tool] .fx-snap__text, body[data-tool] .fx-quote { color: #09090b; }
body[data-tool] .fx-chain__link { background: var(--hue, #7c3aed); box-shadow: none; }
body[data-tool] .fx-chain__link::after { border-left-color: var(--hue, #7c3aed); }
body[data-tool] .fx-year { box-shadow: none; }
body[data-tool] .fx-year__n { color: #09090b; }
body[data-tool] .fx-share { border-top-color: color-mix(in srgb, var(--hue, #7c3aed) 22%, #ffffff); }
body[data-tool] .fx-share__x { background: #09090b; color: #ffffff; }
body[data-tool] .fx-share__copy { background: #ffffff; color: #09090b; border-color: color-mix(in srgb, var(--hue, #7c3aed) 30%, #ffffff); }
body[data-tool] .fx-brand__name { color: #09090b; }
body[data-tool] .fx-brand__tool { background: color-mix(in srgb, var(--hue, #7c3aed) 16%, #ffffff); color: #09090b; }
body[data-tool] .fx-btn { background: #ffffff; color: #09090b; border-color: color-mix(in srgb, var(--hue, #7c3aed) 30%, #ffffff); }
body[data-tool] .sc .fx-share__copy { color: #09090b; }

/* Signal rows are plain rows, not boxes; avatar fallbacks are solid, not gradients */
body[data-tool] .vibe-signal { background: none; border: 0; padding: 0; }
.avatar { background: #7c3aed; }
body[data-tool] .vibe-signal__hint { color: #52525b; }

/* The streak grid scrolls inside its own card, never across the page */
body[data-tool] .sc__body { min-width: 0; max-width: 100%; }
body[data-tool] .sc { min-width: 0; }
.ins-heat { max-width: 100%; }

/* The page column never grows wider than the screen, whatever a result contains */
.tool { grid-template-columns: minmax(0, 1fr); }
.tool > * { min-width: 0; }
.tool-results, #results { grid-template-columns: minmax(0, 1fr); min-width: 0; }
#out { min-width: 0; max-width: 100%; }
body[data-tool] .sc__badge { color: #09090b; background: color-mix(in srgb, var(--hue, #7c3aed) 16%, #ffffff); }

/* ---- Banner customise on narrow screens ---- */
@media (max-width: 760px) { .custom-grid { grid-template-columns: minmax(0, 1fr); } }

/* Banner page: the lookup panel sits below the header, not over it */
body[data-tool="active"] .tool__head + .panel { margin: 18px 0 0; }
@media (max-width: 560px) { .font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Site navigation: one light, blurred bar on every page. The bar spans the
   screen; its contents line up with the page column below it.
   ========================================================================== */
.site-nav {
  position: sticky; top: 0; z-index: 40; box-sizing: border-box;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 max(24px, calc((100% - 1120px) / 2 + 24px));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(29, 26, 54, 0.08);
  font-family: var(--font-text);
}
.site-nav .brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.025em;
  color: var(--ink); text-decoration: none;
}
.site-nav .brand::before {
  content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: url("/brand/yapcard.svg?v=2") center / contain no-repeat;
}
.site-nav__links { display: flex; align-items: center; gap: 2px; }
.site-nav__links a {
  padding: 8px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav__links a:hover { background: rgba(29, 26, 54, 0.05); color: var(--ink); }
.site-nav__links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.site-nav__links a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }

.site-nav .coffee-pill {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: #ffdd00; color: #1d1a36;
  font-family: var(--font-text); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-nav .coffee-pill:hover {
  background: #ffdd00; color: #1d1a36; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 18px -10px rgba(170, 130, 0, 0.7);
}
.site-nav .coffee-pill .lucide { width: 16px; height: 16px; color: #1d1a36; }

/* Phone: brand and coffee share the first row; the links scroll along the second. */
@media (max-width: 720px) {
  .site-nav { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 12px; padding-bottom: 0; padding-inline: 16px; }
  .site-nav .brand { order: 1; margin-right: auto; }
  .site-nav .coffee-pill { order: 2; height: 34px; padding: 0 14px; font-size: 13px; }
  .site-nav__links {
    order: 3; width: 100%; margin: 10px -16px 0; padding: 0 16px 10px;
    overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(29, 26, 54, 0.06); padding-top: 8px;
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .site-nav__links a { font-size: 13.5px; }
}

/* Landing: a small launch set sits in one row of four */
body.home .tool-grid--few > a.tool-card { flex-basis: calc((100% - 36px) / 4); max-width: calc((100% - 36px) / 4); }
@media (max-width: 960px) { body.home .tool-grid--few > a.tool-card { flex-basis: calc((100% - 12px) / 2); max-width: calc((100% - 12px) / 2); } }
@media (max-width: 600px) { body.home .tool-grid--few > a.tool-card { flex-basis: 100%; max-width: 100%; } }

/* Launch set: the reused hero and featured cards take their own tool colours */
body.home .mock--roast { box-shadow: inset 0 3px 0 #0ea5e9, 0 40px 70px -36px rgba(9, 9, 11, 0.55); }
body.home .mock--streak { box-shadow: inset 0 3px 0 #f59e0b, 0 40px 70px -36px rgba(9, 9, 11, 0.55); }
body.home .feat--roast .feat__visual { box-shadow: inset 0 3px 0 #7c3aed; }

/* ---- Result cards: who the result is about, with their real X photo ---- */
.sc-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-id__photo { flex: none; display: block; border-radius: 50%; line-height: 0; }
.sc-id .avatar { border-radius: 50%; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--hue, #7c3aed), 0 10px 24px -10px rgba(9, 9, 11, 0.45); }
.sc-id__photo:hover .avatar { transform: scale(1.04); transition: transform 0.15s ease; }
.sc-id__photo:focus-visible { outline: 2px solid var(--hue, #7c3aed); outline-offset: 6px; }
.sc-id__text { display: grid; gap: 2px; min-width: 0; }
.sc-id__name {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #09090b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-id__meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sc-id__handle { flex: none; font-size: 13.5px; font-weight: 600; color: #52525b; }
.sc-id__label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hue, #7c3aed); overflow: hidden; text-overflow: ellipsis; }
.sc__top:has(.sc-id) { align-items: center; flex-wrap: nowrap; }
.sc__top > .sc-id { flex: 1 1 auto; }
.sc__top:has(.sc-id) > .sc__badge { flex: none; }
.fx-card > .sc-id, .radar-card__head > .sc-id { margin-bottom: 14px; }
@media (max-width: 480px) { .sc-id__label { display: none; } .sc-id .avatar { width: 46px !important; height: 46px !important; } }

/* ---- Share on X: link or image ---- */
.fx-share-menu { position: relative; display: inline-flex; }
.fx-share-menu__list {
  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 0; min-width: 250px; padding: 6px;
  background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.1); border-radius: 16px;
  box-shadow: 0 18px 40px -16px rgba(9, 9, 11, 0.35);
}
.fx-share-menu__list[hidden] { display: none; }
.fx-share-menu__item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px;
  background: transparent; color: #09090b; text-align: left; cursor: pointer; font: inherit;
}
.fx-share-menu__item:hover, .fx-share-menu__item:focus-visible { background: #f4f4f5; outline: none; }
.fx-share-menu__icon { width: 18px; height: 18px; flex: none; color: var(--hue, #7c3aed); }
.fx-share-menu__words { display: grid; gap: 1px; }
.fx-share-menu__words b { font-size: 14px; font-weight: 700; }
.fx-share-menu__words span { font-size: 12.5px; color: #71717a; }

/* The compact card drawn for "Post as image": off screen, fixed width, the card's own look. */
.share-export { position: fixed; left: -10000px; top: 0; width: 600px; padding: 22px; background: #f4f4f5; box-sizing: border-box; }
.share-export > article { margin: 0 !important; width: 100% !important; max-width: none !important; box-shadow: 0 10px 30px -18px rgba(9, 9, 11, 0.35) !important; }
.share-export .sc-id__photo:hover .avatar { transform: none; }
.share-export__foot { display: flex; align-items: center; gap: 8px; padding: 14px 4px 0; font-size: 12.5px; color: #52525b; }
.share-export__brand { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.1em; color: #09090b; }
.share-export__tool { padding: 2px 9px; border-radius: 999px; background: #e4e4e7; font-weight: 700; color: #09090b; }
.share-export__made { margin-left: auto; }

/* The image window. */
.share-dialog { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; background: #ffffff; color: #09090b; box-shadow: 0 30px 80px -20px rgba(9, 9, 11, 0.5); }
.share-dialog::backdrop { background: rgba(9, 9, 11, 0.45); backdrop-filter: blur(3px); }
.share-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.share-dialog__head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.share-dialog__close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f4f4f5; font-size: 20px; line-height: 1; cursor: pointer; }
.share-dialog__preview { display: grid; place-items: center; min-height: 160px; margin: 14px 18px 0; padding: 10px; border-radius: 14px; background: #f4f4f5; }
.share-dialog__preview img { display: block; max-width: 100%; max-height: 52vh; border-radius: 10px; }
.share-dialog__wait { margin: 0; font-size: 14px; color: #52525b; }
.share-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 0; }
.share-dialog__actions .btn { text-decoration: none; }
.share-dialog__hint { margin: 0; padding: 10px 18px 18px; font-size: 13px; color: #52525b; }
.share-export, .share-export * { animation: none !important; transition: none !important; }
.share-export .ins-tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* In the shared image, year strips sit in tight equal columns so a long history stays a small card. */
.share-export .fx-years { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 18px; }
.share-export .fx-year { width: auto; min-width: 0; padding: 10px 4px; }
.share-export .fx-year__n { font-size: 22px; }

/* ==========================================================================
   Banner editor: settings on the left, the banner pinned on the right so every
   change is visible while you work. On narrow screens the banner pins to the top
   and the settings scroll under it.
   ========================================================================== */
body[data-tool="active"] .tool { max-width: 1400px; }
.editor { display: grid; gap: 18px; grid-template-columns: minmax(340px, 390px) minmax(0, 1fr); grid-template-areas: "controls preview"; align-items: start; }
.editor__preview { grid-area: preview; position: sticky; top: 80px; z-index: 5; min-width: 0; }
.editor__controls { grid-area: controls; min-width: 0; }
.editor .customise { margin: 0; padding: 18px; }
.editor .customise .panel__head { margin-bottom: 4px; }
.editor .custom-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.editor .custom-block { padding: 16px; }
.editor .text-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.editor .font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editor .font-chip__sample { font-size: 24px; }
.editor .bg-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 18px 8px; }
.editor .res-presets { gap: 6px; }
.editor .banner-panel--top { margin: 0; box-shadow: 0 18px 40px -26px rgba(9, 9, 11, 0.35); }

@media (max-width: 980px) {
  .editor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "controls"; }
  .editor__preview { top: 72px; }
  .editor .custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor .custom-block--full { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .editor__preview { top: 120px; }
  .editor .banner-panel--top { padding: 10px; }
  .editor .banner-panel--top .banner-actions { margin-top: 8px; gap: 8px; }
  .editor .banner-panel--top .banner-actions .btn { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .editor .custom-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The pinned banner sits on the page colour, so settings scrolling under it never show through. */
.editor__preview { top: 64px; padding-top: 16px; margin-top: -16px; background: #fafafa; }
@media (max-width: 980px) { .editor__preview { top: 64px; } }
@media (max-width: 720px) { .editor__preview { top: 112px; padding-top: 8px; margin-top: -8px; padding-bottom: 6px; } }

/* ---- Banner settings as tabs: one group at a time, no scrolling ---- */
.ctabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 12px; }
.ctabs [role="tab"] {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 40px; padding: 0 10px;
  border: 1px solid rgba(9, 9, 11, 0.1); border-radius: 12px; background: #ffffff; color: #3f3f46;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ctabs [role="tab"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctabs [role="tab"] .lucide { width: 16px; height: 16px; flex: none; }
.ctabs [role="tab"]:hover { border-color: rgba(9, 9, 11, 0.22); color: #09090b; }
.ctabs [role="tab"][aria-selected="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
.ctabs [role="tab"]:focus-visible { outline: 2px solid var(--hue, #f59e0b); outline-offset: 2px; }
.cpane { margin: 0; }
.cpane[hidden] { display: none; }
.cpane__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cpane .text-actions { margin-top: 2px; }
@media (max-width: 980px) and (min-width: 721px) { .ctabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ctabs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .ctabs [role="tab"] { flex-direction: column; gap: 3px; height: 54px; padding: 0 2px; font-size: 10.5px; }
}
/* Phone: the banner is pinned above, so every settings tab is trimmed to fit the rest of the screen. */
@media (max-width: 720px) {
  .editor .customise { padding: 12px; }
  .editor .customise .panel__head h2 { font-size: 16px; }
  .editor .customise .panel__head p { display: none; }
  .ctabs { margin: 8px 0; }
  .editor .cpane { padding: 12px; gap: 10px; }
  .editor .cpane .control__label { font-size: 11px; }
  .editor .bg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 6px; }
  .editor .bg-grid .bg-chip { height: 34px; }
  .editor .bg-grid .bg-chip span { font-size: 9.5px; }
  .editor .uploader { padding: 12px; gap: 4px; }
  .editor .uploader__icon { width: 30px; height: 30px; font-size: 14px; }
  .editor .uploader__hint { display: none; }
  .editor #text-value { min-height: 52px; }
  .editor .font-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .editor .font-chip { padding: 7px 8px; }
  .editor .font-chip__sample { font-size: 18px; }
  .editor .font-chip__name { font-size: 10.5px; }
  .editor .font-chip__kind { display: none; }
}
@media (max-width: 720px) {
  .editor .bg-grid { gap: 24px 6px; margin-bottom: 14px; }
  .editor .bg-grid .bg-chip span { font-size: 9px; letter-spacing: -0.01em; white-space: nowrap; }
  .ctabs [role="tab"] { font-size: 10px; letter-spacing: -0.01em; }
}

/* ---- Banner editor: smooth tab changes and real switches ---- */
.ctabs [role="tab"] {
  transition: background 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.12s ease, box-shadow 0.22s ease;
}
.ctabs [role="tab"]:active { transform: scale(0.96); }
.ctabs [role="tab"][aria-selected="true"] { box-shadow: 0 8px 18px -10px rgba(9, 9, 11, 0.55); }
.cpane:not([hidden]) { animation: cpane-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cpane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Italic, Caps and Shadow as sliding switches. */
.editor .text-toggles { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.editor .toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: #3f3f46; user-select: none; }
.editor .toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border-radius: 999px; background: #d4d4d8; cursor: pointer;
  transition: background 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease;
}
.editor .toggle input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 3px rgba(9, 9, 11, 0.3); transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.editor .toggle input[type="checkbox"]:checked { background: #09090b; }
.editor .toggle input[type="checkbox"]:checked::before { transform: translateX(16px); }
.editor .toggle input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45); }
.editor .toggle:hover input[type="checkbox"]:not(:checked) { background: #c4c4cc; }

@media (prefers-reduced-motion: reduce) {
  .cpane:not([hidden]) { animation: none; }
  .ctabs [role="tab"], .editor .toggle input[type="checkbox"], .editor .toggle input[type="checkbox"]::before { transition: none; }
}

/* ---- Site link: on every card, and in its image ---- */
.fx-stamp {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 7px 13px; border-radius: 999px;
  background: #ffffff; border: 1.5px solid color-mix(in srgb, var(--hue, #7c3aed) 55%, #ffffff);
  font-size: 13px; font-weight: 700; color: #18181b; text-decoration: none; white-space: nowrap;
}
.fx-stamp span { overflow: hidden; text-overflow: ellipsis; }
.fx-stamp__icon { width: 14px; height: 14px; flex: none; color: var(--hue, #7c3aed); }
.fx-stamp:hover { border-color: var(--hue, #7c3aed); }
.share-export__who { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: #09090b; }
.share-export__stamp {
  margin-left: auto; padding: 6px 14px; border-radius: 999px; background: #ffffff;
  border: 1.5px solid color-mix(in srgb, var(--hue, #7c3aed) 55%, #ffffff); font-size: 13.5px; font-weight: 700; color: #18181b;
}

/* ---- Banner: profiles found and how many to show ---- */
.found { margin: 0; padding: 10px 12px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); font-size: 13.5px; font-weight: 600; color: #18181b; }
.found:empty { display: none; }
.count-quick { display: flex; gap: 6px; margin-top: 4px; }
.count-quick button {
  flex: 1; height: 32px; border: 1px solid rgba(9, 9, 11, 0.12); border-radius: 10px; background: #ffffff;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #3f3f46; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.count-quick button[aria-pressed="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
.count-quick button:disabled { opacity: 0.4; cursor: default; }
#count { width: 100%; accent-color: var(--brand); }

/* ==========================================================================
   Share posters: the YapCard trading card. Ring photos, stat tiles and a
   ticket stub, in the tool's own colour. 4:5 for a post, 9:16 for a story.
   ========================================================================== */
.poster-wrap { display: grid; justify-items: center; gap: 12px; margin-top: 22px; }
.poster-format { display: inline-flex; padding: 3px; border-radius: 999px; background: #f4f4f5; border: 1px solid rgba(9, 9, 11, 0.08); }
.poster-format button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: #52525b; cursor: pointer; transition: background 0.2s, color 0.2s; }
.poster-format button[aria-pressed="true"] { background: #09090b; color: #ffffff; }
.poster {
  --hue-soft: color-mix(in srgb, var(--hue, #7c3aed) 14%, #ffffff);
  --hue-deep: color-mix(in srgb, var(--hue, #7c3aed) 70%, #09090b);
  position: relative; display: flex; flex-direction: column; width: 360px; max-width: 100%; aspect-ratio: 4 / 5;
  box-sizing: border-box; padding: 14px; border-radius: 30px; background: var(--hue, #7c3aed);
  box-shadow: 0 24px 50px -30px rgba(9, 9, 11, 0.55); color: #09090b;
}
.poster--story { aspect-ratio: 9 / 16; }
.poster__inner { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 16px 16px 0; border-radius: 20px; background: #ffffff; overflow: hidden; }
.poster__top { display: flex; align-items: center; gap: 8px; }
.poster__mark { width: 18px; height: 18px; flex: none; background: url("/brand/yapcard.svg?v=2") center / contain no-repeat; }
.poster__tool { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.poster__meta { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--hue-soft); color: var(--hue-deep); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.poster__people { position: relative; display: flex; justify-content: center; align-items: center; margin: 14px 0 6px; flex: 1 1 auto; min-height: 96px; }
.poster__halo { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--hue-soft); }
.poster--story .poster__halo { width: 190px; height: 190px; }
.poster__face { position: relative; border-radius: 50%; line-height: 0; }
.poster__face .avatar { border-radius: 50% !important; box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px var(--hue, #7c3aed), 0 12px 24px -12px rgba(9, 9, 11, 0.5) !important; }
.poster__people--2 .poster__face + .poster__face { margin-left: -18px; }
.poster__who { margin: 6px 0 0; text-align: center; font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster__hero { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.poster__big { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -0.05em; background: linear-gradient(transparent 72%, color-mix(in srgb, var(--hue, #7c3aed) 35%, #ffffff) 72%); padding: 0 6px; }
.poster--story .poster__big { font-size: 76px; }
.poster__label { margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hue-deep); text-align: center; }
.poster__sub { margin: 6px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: #3f3f46; }
.poster__tiles { display: grid; grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.poster__tile { min-width: 0; padding: 8px 8px 7px; border-radius: 12px; background: var(--hue-soft); text-align: left; }
.poster__tile b { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster__tile span { display: block; margin-top: 1px; font-size: 10px; font-weight: 700; color: #52525b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster__meter { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: rgba(9, 9, 11, 0.08); overflow: hidden; }
.poster__meter i { display: block; height: 100%; border-radius: inherit; background: var(--hue, #7c3aed); }
.poster__stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px -16px 0; padding: 11px 16px 13px; border-top: 2px dashed color-mix(in srgb, var(--hue, #7c3aed) 30%, #ffffff); }
.poster__stub::before, .poster__stub::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--hue, #7c3aed); }
.poster__stub::before { left: -8px; }
.poster__stub::after { right: -8px; }
.poster__foot { font-size: 11.5px; font-weight: 700; color: #52525b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster__url { font-size: 11px; font-weight: 800; color: #09090b; white-space: nowrap; }
.poster-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.poster-actions .btn { height: 44px; padding: 0 20px; }
.poster-actions__post { min-width: 140px; }

/* ---- My X Year video recap ---- */
.vrecap { display: grid; justify-items: center; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 18px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); }
.vrecap__toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 700; color: #09090b; user-select: none; }
.vrecap__toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 42px; height: 24px; margin: 0;
  border-radius: 999px; background: #d4d4d8; cursor: pointer; transition: background 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vrecap__toggle input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 3px rgba(9, 9, 11, 0.3); transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.vrecap__toggle input[type="checkbox"]:checked { background: #09090b; }
.vrecap__toggle input[type="checkbox"]:checked::before { transform: translateX(18px); }
.vrecap__body { display: grid; justify-items: center; gap: 10px; width: 100%; }
.vrecap__body[hidden] { display: none; }
.vrecap__preview { width: 300px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(9, 9, 11, 0.5); }
.vrecap__status, .vrecap__note { margin: 0; font-size: 13px; color: #52525b; text-align: center; }
.vrecap__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vrecap__actions .btn { height: 42px; padding: 0 18px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .vrecap__toggle input[type="checkbox"], .vrecap__toggle input[type="checkbox"]::before { transition: none; } }

/* Poster layout: fixed photo area, the tiles and stub held at the bottom, so nothing collides. */
.poster__people { flex: 0 0 auto; height: 112px; min-height: 0; margin: 10px 0 2px; }
.poster--story .poster__people { height: 176px; margin-top: 26px; }
.poster__halo { width: 128px; height: 128px; }
.poster--story .poster__halo { width: 176px; height: 176px; }
.poster__big { font-size: 56px; }
.poster--story .poster__hero { margin-top: 18px; }
.poster__tiles { margin-top: auto; padding-top: 10px; }
.poster__tile b { font-size: 14px; }
.poster__inner > * { flex-shrink: 0; }
.poster--post .poster__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Live loader steps: public facts only ---- */
.loading-line--steps { display: grid; gap: 6px; align-items: start; }
.loading-step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.loading-step--done { color: #52525b; }
.loading-step__tick { width: 18px; text-align: center; font-weight: 800; color: #16a34a; }
.loading-step--now { font-weight: 700; color: #09090b; }
.loading-step__detail { display: block; font-size: 12.5px; font-weight: 600; color: #52525b; }

/* Engagement Map: the handle field on the light page (it kept the old dark theme's white text). */
body.circle-page .search__field input#username {
  background: #ffffff; color: #09090b; border: 1.5px solid rgba(9, 9, 11, 0.16); caret-color: #7c3aed;
}
body.circle-page .search__field input#username::placeholder { color: #a1a1aa; }
body.circle-page .search__field input#username:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
body.circle-page #form-hint { color: #71717a; }

/* ---------- Poster pictures (mosaic, map, clock, vintage) ---------- */
.poster__inner > .poster__art { flex: 1 1 auto; min-height: 0; width: 100%; margin-top: 12px; object-fit: contain; border-radius: 16px; }
.poster__art--wide { flex: 0 1 auto; background: var(--hue-soft); padding: 6px; box-sizing: border-box; }
.poster__art + .poster__who { margin-top: 8px; }
.poster__big--long { font-size: 38px !important; letter-spacing: -0.04em; text-align: center; }
.poster--story .poster__big--long { font-size: 46px !important; }

/* ==========================================================================
   Follower Mosaic, Follower World Map, Follower Vintage, Posting Clock, Poster Archetype
   ========================================================================== */
body[data-tool="mosaic"] { --hue: #d946ef; }
body[data-tool="map"] { --hue: #0ea5e9; }
body[data-tool="archetype"] { --hue: #7c3aed; }
body[data-tool="vintage"] { --hue: #b45309; }
body[data-tool="clock"] { --hue: #2563eb; }
a.tool-card[href$="/mosaic"] { --hue: #d946ef; }
a.tool-card[href$="/map"] { --hue: #0ea5e9; }
a.tool-card[href$="/archetype"] { --hue: #7c3aed; }
a.tool-card[href$="/vintage"] { --hue: #b45309; }
a.tool-card[href$="/clock"] { --hue: #2563eb; }

/* Canvases: drawn large, shown at the width they have. */
.fmosaic, .worldmap, .vintage, .clock { position: relative; margin-top: 20px; }
.fmosaic__canvas, .worldmap__canvas, .vintage__rings, .clock__dial {
  display: block; width: 100%; height: auto; border-radius: 20px; background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--hue) 20%, #ffffff);
}
.fmosaic__canvas { max-width: 560px; margin: 0 auto; aspect-ratio: 1; cursor: crosshair; touch-action: manipulation; }
.vintage__rings, .clock__dial { max-width: 460px; margin: 0 auto; aspect-ratio: 1; }
.fmosaic__tip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 12px)); padding: 5px 10px; border-radius: 999px;
  background: #09090b; color: #ffffff; font-size: 12.5px; font-weight: 700; white-space: nowrap; pointer-events: none;
}
.fmosaic__progress { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: #3f3f46; }
.fmosaic__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: 18px; }
.fmosaic__tint { min-width: 180px; }
.fmosaic__tint .control__label { font-size: 13px; font-weight: 700; color: #3f3f46; }
.fmosaic__tint input[type="range"] { accent-color: var(--hue); }
.fmosaic__controls .toggle, .vrecap .toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; font-weight: 600; color: #3f3f46; user-select: none; }
.fmosaic__controls .toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border-radius: 999px; background: #d4d4d8; cursor: pointer; transition: background 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fmosaic__controls .toggle input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 3px rgba(9, 9, 11, 0.3); transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fmosaic__controls .toggle input[type="checkbox"]:checked { background: #09090b; }
.fmosaic__controls .toggle input[type="checkbox"]:checked::before { transform: translateX(16px); }
.fmosaic__controls .toggle input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 45%, transparent); }

.worldmap__list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.worldmap__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto minmax(60px, 120px) auto; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 14px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 16%, #ffffff);
}
.worldmap__flag { font-size: 20px; line-height: 1; }
.worldmap__name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worldmap__faces { display: inline-flex; }
.worldmap__faces a { line-height: 0; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px #ffffff; }
.worldmap__faces a:first-child { margin-left: 0; }
.worldmap__faces .avatar, .worldmap__faces .avatar img { border-radius: 50%; }
.worldmap__bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 14%, #ffffff); overflow: hidden; }
.worldmap__bar i { display: block; height: 100%; border-radius: inherit; background: var(--hue); }
.worldmap__count { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.worldmap__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) {
  .worldmap__row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .worldmap__faces, .worldmap__bar { display: none; }
}

.vintage__line { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: #3f3f46; }
.vintage__brag {
  margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 20%, #ffffff);
  font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.vintage__bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 18px; padding: 0 2px; }
.vintage__bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 0; min-width: 0; height: 100%; }
.vintage__bar i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--hue) 45%, #ffffff); }
.vintage__bar.is-median i { background: var(--hue); }
.vintage__bar.is-you i { background: #09090b; }
.vintage__bar span { margin-top: 4px; font-size: 9.5px; font-weight: 700; color: #71717a; text-align: center; white-space: nowrap; overflow: hidden; }
.vintage__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 10px 0 0; font-size: 12px; font-weight: 600; color: #52525b; }
.vintage__key::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.vintage__key--median::before { background: var(--hue); }
.vintage__key--you::before { background: #09090b; }
.vintage__oldest {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px; border-radius: 16px; text-decoration: none; color: inherit;
  background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 18%, #ffffff);
}
.vintage__oldest .avatar, .vintage__oldest .avatar img { border-radius: 50%; }
.vintage__oldest b { display: block; font-size: 14px; }
.vintage__oldest span span { font-size: 13px; color: #52525b; }

.archetype {
  display: grid; justify-items: center; gap: 4px; margin-top: 20px; padding: 26px 18px 22px; border-radius: 22px; text-align: center;
  background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 22%, #ffffff);
}
.archetype__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--hue) 75%, #09090b); }
.archetype__word { font-family: var(--font-display); font-size: clamp(36px, 8vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -0.045em; padding: 0 8px; background: linear-gradient(transparent 70%, color-mix(in srgb, var(--hue) 30%, #ffffff) 70%); }
.archetype__line { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: #3f3f46; }
.archetype__pace { margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 12%, #ffffff); color: color-mix(in srgb, var(--hue) 75%, #09090b); font-size: 12px; font-weight: 800; }
.archetype__evidence h3 { margin: 22px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #52525b; }
.archetype__evidence .fx-stats { margin-top: 10px; }
.archetype__details { margin-top: 16px; }
.archetype__details summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: #3f3f46; }
.archetype__numbers { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 12px 0 0; font-size: 13.5px; }
.archetype__numbers dt { color: #52525b; }
.archetype__numbers dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.poster__big--long { background: none; padding: 0; line-height: 1.02; }
/* Posters fit narrow phones: the column never grows past the screen. */
.poster-wrap { grid-template-columns: minmax(0, 1fr); width: 100%; }
.poster { width: min(360px, 100%); }
.poster-actions { max-width: 100%; }
/* A highlight that follows the words when they wrap onto two lines. */
.archetype__word {
  background: none; text-decoration: underline; text-decoration-thickness: 0.3em; text-underline-offset: -0.18em;
  text-decoration-skip-ink: none; text-decoration-color: color-mix(in srgb, var(--hue) 30%, #ffffff);
}
.poster__inner > .poster__art--wide { min-height: 92px; }
/* Narrow posters (small phones): smaller headline, no extra line, so nothing spills past the card. */
.poster { container-type: inline-size; }
@container (max-width: 320px) {
  .poster__big { font-size: 46px !important; }
  .poster__big--long { font-size: 32px !important; }
  .poster--post .poster__sub { display: none; }
  .poster__people { height: 92px !important; }
  .poster__halo { width: 104px !important; height: 104px !important; }
  .poster__inner > .poster__art--wide { min-height: 76px; }
  .poster__tile { padding: 6px 7px 6px; }
}
@container (max-width: 320px) {
  .poster__people { height: 82px !important; margin-top: 6px !important; }
  .poster__halo { width: 96px !important; height: 96px !important; }
  .poster__who { font-size: 13.5px; }
}
/* World map with follower faces: hover a face for the handle. On phones the map keeps a readable size and scrolls sideways in its box. */
.worldmap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 20px; }
.worldmap__canvas { cursor: crosshair; touch-action: pan-x pan-y; }
@media (max-width: 640px) { .worldmap__canvas { width: 720px; max-width: none; } }
.worldmap__hint { display: none; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #52525b; text-align: center; }
@media (max-width: 640px) { .worldmap__hint { display: block; } }

/* ==========================================================================
   Landing grid, final: one grid of every live tool. The server sets --cols (3 or 4) so rows
   come out as even as they can. Every card is the same height, with its "Try it free" on one
   line across a row; a short last row starts at the left, under the columns. Chips filter it.
   ========================================================================== */
body.home .groups { display: block; }
body.home .groups > .tool-grid--all {
  --gap: 14px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gap);
}
body.home .tool-grid--all > a.tool-card { flex: none; min-width: 0; max-width: none; height: 100%; box-sizing: border-box; }
body.home .tool-grid--all > a.tool-card[hidden] { display: none; }
@media (max-width: 960px) {
  body.home .groups > .tool-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  body.home .groups > .tool-grid--all { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
/* Shorter cards: a smaller picture panel, so more tools fit on screen. */
body.home .tool-grid--all .tool-card__top { height: 124px; }
body.home .tool-grid--all .tool-card__avatar { width: 84px; height: 84px; }
body.home .tool-grid--all a.tool-card h3 { margin-top: 16px; font-size: 18px; }
body.home .tool-grid--all .tool-card__go { margin-bottom: 18px; margin-top: auto; padding-top: 12px; }

body.home .tool-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
body.home .tool-filter button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(9, 9, 11, 0.12); background: #ffffff; color: #3f3f46; font: inherit; font-size: 13.5px; font-weight: 700;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
body.home .tool-filter button span { font-size: 12px; font-weight: 800; color: #a1a1aa; }
body.home .tool-filter button:hover { border-color: rgba(9, 9, 11, 0.3); }
body.home .tool-filter button[aria-pressed="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
body.home .tool-filter button[aria-pressed="true"] span { color: #a1a1aa; }
body.home .tool-filter button:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
@media (max-width: 600px) {
  body.home .tool-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  body.home .tool-filter::-webkit-scrollbar { display: none; }
  body.home .tool-filter button { flex: none; }
}
/* Phones: compact rows, picture on the left, so the whole list is a short scroll. */
@media (max-width: 600px) {
  body.home .groups > .tool-grid--all { --gap: 10px; }
  body.home .tool-grid--all > a.tool-card {
    display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: start;
  }
  body.home .tool-grid--all .tool-card__top { grid-row: 1 / span 3; height: 100%; min-height: 112px; }
  body.home .tool-grid--all .tool-card__avatar { width: 58px; height: 58px; }
  body.home .tool-grid--all a.tool-card h3 { grid-column: 2; margin: 14px 16px 0; font-size: 16.5px; }
  body.home .tool-grid--all a.tool-card p { grid-column: 2; margin: 4px 16px 0; font-size: 13.5px; line-height: 1.45; }
  body.home .tool-grid--all .tool-card__go { grid-column: 2; margin: 8px 16px 14px; padding-top: 0; font-size: 13px; }
}

/* ==========================================================================
   X Stories: 9:16 story cards in a story player. Each card has its own solid colour.
   ========================================================================== */
body[data-tool="stories"] { --hue: #f43f5e; }
a.tool-card[href$="/stories"] { --hue: #f43f5e; }

.stories { display: grid; justify-items: center; gap: 14px; margin-top: 8px; }
.stories__phone {
  position: relative; width: min(360px, 100%); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #09090b; box-shadow: 0 40px 70px -40px rgba(9, 9, 11, 0.6);
}
.stories__bars { position: absolute; z-index: 3; top: 9px; left: 12px; right: 12px; display: flex; gap: 4px; }
.stories__bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.stories__bar i { display: block; width: 0; height: 100%; background: #ffffff; }
.stories__stage { position: absolute; inset: 0; outline: none; }
.stories__stage:focus-visible { box-shadow: inset 0 0 0 3px #a78bfa; }
.stories__zone { position: absolute; z-index: 2; top: 0; bottom: 0; width: 38%; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stories__zone--prev { left: 0; cursor: w-resize; }
.stories__zone--next { right: 0; width: 62%; cursor: e-resize; }
.stories__controls { display: flex; align-items: center; gap: 10px; }
.stories__nav, .stories__play {
  height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(9, 9, 11, 0.14); background: #ffffff;
  font: inherit; font-size: 15px; font-weight: 800; color: #09090b; cursor: pointer;
}
.stories__nav { font-size: 22px; line-height: 1; padding: 0; }
.stories__play { min-width: 82px; font-size: 13.5px; }
.stories__count { min-width: 52px; text-align: center; font-size: 13px; font-weight: 700; color: #52525b; font-variant-numeric: tabular-nums; }
.stories__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.stories__actions .btn { height: 44px; padding: 0 18px; }
.stories__note { margin: 0; max-width: 420px; text-align: center; font-size: 13px; color: #52525b; }
.stories__share { margin-top: 18px; padding: 4px 18px 16px; border-radius: 20px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); }
.stories__share .fx-note { color: #52525b; }

/* A card: 360 x 640 design size, drawn at 3x for export. */
.story {
  --bg: #7c3aed; --ink: #ffffff; --soft: rgba(255, 255, 255, 0.78); --panel: rgba(255, 255, 255, 0.14);
  position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%;
  padding: 30px 22px 0; background: var(--bg); color: var(--ink); font-family: var(--font-body, Inter, sans-serif); overflow: hidden;
}
.story[hidden] { display: none; }
.story--intro { --bg: #7c3aed; }
.story--people { --bg: #ec4899; }
.story--fan { --bg: #f59e0b; --ink: #09090b; --soft: rgba(9, 9, 11, 0.72); --panel: rgba(9, 9, 11, 0.08); }
.story--type { --bg: #2563eb; }
.story--clock { --bg: #0f172a; }
.story--words { --bg: #10b981; --ink: #052e1c; --soft: rgba(5, 46, 28, 0.75); --panel: rgba(255, 255, 255, 0.3); }
.story--best { --bg: #f43f5e; }
.story--numbers { --bg: #fde047; --ink: #09090b; --soft: rgba(9, 9, 11, 0.7); --panel: rgba(255, 255, 255, 0.55); }
.story--outro { --bg: #09090b; }
/* Decorative circles in each card, drawn as solid shapes rather than gradients. */
.story::before, .story::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; background: var(--panel); pointer-events: none; }
.story::before { width: 260px; height: 260px; right: -110px; top: -70px; }
.story::after { width: 180px; height: 180px; left: -80px; bottom: 60px; }
.story > * { position: relative; z-index: 1; }

.story__top { display: flex; align-items: center; gap: 8px; }
.story__mark { width: 18px; height: 18px; flex: none; border-radius: 5px; background: url("/brand/yapcard.svg?v=2") center / contain no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.story__brand { font-family: var(--font-display); font-size: 13px; font-weight: 800; }
.story__kicker { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--panel); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.story__body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.story__stub {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -22px; padding: 13px 22px 16px;
  border-top: 2px dashed var(--panel); font-size: 11.5px; font-weight: 700; color: var(--soft);
}
.story__stub b { color: var(--ink); font-weight: 800; }

.story__face { line-height: 0; border-radius: 50%; }
.story__face .avatar, .story__face .avatar img { border-radius: 50% !important; }
.story__face .avatar { box-shadow: 0 0 0 5px var(--bg), 0 0 0 9px var(--ink); }
.story__face--plain .avatar { box-shadow: 0 0 0 2px var(--ink); }
.story__name { margin: 14px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.story__handle { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--soft); }
.story__big { margin: 10px 0 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.045em; line-height: 0.98; overflow-wrap: anywhere; }
.story__big--sm { font-size: 26px; margin-bottom: 14px; }
.story__big--md { font-size: 34px; margin-top: 22px; }
.story__big--lg { font-size: 44px; }
.story__big--xl { font-size: 54px; }
.story__line { margin: 10px 0 0; max-width: 290px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--soft); }
.story__line--sm { font-size: 13px; margin-top: 4px; }
.story__eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.story__stat { margin: 14px 0 0; font-family: var(--font-display); font-size: 56px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
.story__stat--top { margin: 0 0 14px; font-size: 30px; }
.story__tag { margin: 14px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--panel); font-size: 12.5px; font-weight: 800; }
.story__url { margin: 18px 0 0; padding: 8px 14px; border-radius: 999px; background: #ffffff; color: #09090b; font-size: 13.5px; font-weight: 800; }

.story__lead { position: relative; margin-top: 4px; }
.story__rank { position: absolute; right: -6px; bottom: -4px; padding: 4px 9px; border-radius: 999px; background: #09090b; color: #ffffff; font-size: 13px; font-weight: 900; box-shadow: 0 0 0 3px var(--bg); }
.story__heart { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e11d48; color: #ffffff; font-size: 20px; box-shadow: 0 0 0 4px var(--bg); }
.story__people { width: 100%; margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.story__people li { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border-radius: 14px; background: var(--panel); text-align: left; }
.story__people-rank { font-size: 12.5px; font-weight: 900; }
.story__people-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story__people-count { font-size: 13px; font-weight: 800; color: var(--soft); font-variant-numeric: tabular-nums; }

.story__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; margin-top: 22px; }
.story__chip { padding: 10px 6px; border-radius: 14px; background: var(--panel); }
.story__chip b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.story__chip span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--soft); line-height: 1.25; }

.story__bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 150px; margin-top: 24px; }
.story__bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: rgba(255, 255, 255, 0.32); }
.story__bars i.is-peak { background: #38bdf8; }
.story__axis { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--soft); }

.story__words { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.story__words li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 14px; background: var(--panel); }
.story__words b { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story__words li.is-top { padding: 12px 14px; background: #ffffff; }
.story__words li.is-top b { font-size: 28px; }
.story__words span { flex: none; font-size: 12px; font-weight: 800; color: var(--soft); }
.story__emoji { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.story__emoji span { display: grid; justify-items: center; }
.story__emoji b { font-size: 32px; line-height: 1.1; }
.story__emoji small { font-size: 11.5px; font-weight: 800; color: var(--soft); }
.story--words .story__eyebrow { margin-top: 20px; }

.story__post { width: 100%; margin: 0; padding: 16px; box-sizing: border-box; border-radius: 18px; background: #ffffff; color: #09090b; text-align: left; box-shadow: 0 24px 40px -26px rgba(9, 9, 11, 0.6); }
.story__post-head { display: flex; align-items: center; gap: 9px; }
.story__post-head span { display: grid; min-width: 0; }
.story__post-head b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story__post-head small { font-size: 12px; color: #71717a; }
.story__post-head .story__face--plain .avatar { box-shadow: none; }
.story__post p { margin: 12px 0 0; font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.story__post-metrics { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(9, 9, 11, 0.08); font-size: 13px; font-weight: 700; color: #3f3f46; }

.story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.story__tile { padding: 14px 12px; border-radius: 16px; background: var(--panel); text-align: left; }
.story__tile b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.story__tile span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--soft); }

/* Each card animates in when it shows. Still copies (for images and video) never animate. */
@media (prefers-reduced-motion: no-preference) {
  .story:not([hidden]):not(.story--still) .story__body > * { animation: story-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .story:not([hidden]):not(.story--still) .story__body > *:nth-child(2) { animation-delay: 0.06s; }
  .story:not([hidden]):not(.story--still) .story__body > *:nth-child(3) { animation-delay: 0.12s; }
  .story:not([hidden]):not(.story--still) .story__body > *:nth-child(4) { animation-delay: 0.18s; }
  .story:not([hidden]):not(.story--still) .story__body > *:nth-child(n+5) { animation-delay: 0.24s; }
}
@keyframes story-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.story--still, .story--still * { animation: none !important; transition: none !important; }
.story-export { position: fixed; left: -10000px; top: 0; width: 360px; height: 640px; }
.story-export > .story { position: relative; width: 360px; height: 640px; }
/* Story cards keep their design size in the player and are scaled to fit it. */
.stories__stage > .story { inset: auto; left: 0; top: 0; width: 360px; height: 640px; transform: scale(var(--story-scale, 1)); transform-origin: 0 0; }

/* X Stories: every card at once, as images under the player. */
.story-gallery { margin-top: 26px; padding: 20px; border-radius: 22px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); }
.story-gallery__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.story-gallery__head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.story-gallery__head p { margin: 2px 0 0; font-size: 13px; color: #52525b; }
.story-gallery__head .btn { height: 42px; padding: 0 18px; }
.story-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.story-gallery__item { margin: 0; min-width: 0; }
.story-gallery__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  cursor: zoom-in; background: #09090b; box-shadow: 0 14px 28px -20px rgba(9, 9, 11, 0.6);
  transition: transform 0.18s ease;
}
.story-gallery__frame:hover { transform: translateY(-2px); }
.story-gallery__frame:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
/* The copy keeps its 360 x 640 design size; stories.js scales it to the tile. */
.story-gallery__frame > .story { inset: auto; left: 0; top: 0; width: 360px; height: 640px; transform: scale(var(--story-scale, 0.42)); transform-origin: 0 0; pointer-events: none; }
.story-gallery__bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.story-gallery__bar span { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #3f3f46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-gallery__btn { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(9, 9, 11, 0.14); background: #ffffff; font: inherit; font-size: 12px; font-weight: 800; color: #09090b; cursor: pointer; }
.story-gallery__btn--post { background: #09090b; border-color: #09090b; color: #ffffff; }
@media (max-width: 600px) { .story-gallery { padding: 16px; } .story-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.story-gallery__bar span.story-gallery__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f4f4f5; font-size: 11.5px; font-weight: 800; color: #3f3f46; }
.story-gallery__bar .story-gallery__btn { flex: 1; }

/* ==========================================================================
   Daily X Stats
   ========================================================================== */
body[data-tool="daily"] { --hue: #16a34a; }
a.tool-card[href$="/daily"] { --hue: #16a34a; }
.daily__hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; }
.daily__followers { font-family: var(--font-display); font-size: clamp(44px, 9vw, 68px); font-weight: 900; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.daily__label { font-size: 15px; font-weight: 700; color: #52525b; }
.daily__change { flex-basis: 100%; font-size: 15px; font-weight: 800; color: #52525b; }
.daily__change.is-up, .daily__changes b.is-up, .daily__table td.is-up { color: #15803d; }
.daily__change.is-down, .daily__changes b.is-down, .daily__table td.is-down { color: #dc2626; }
.daily__note { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #71717a; }
.daily__facts { margin: 16px 0 0; font-size: 14.5px; font-weight: 700; color: #3f3f46; }
.daily__chartbox { margin-top: 18px; padding: 10px; border-radius: 18px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 18%, #ffffff); }
.daily__chart { display: block; width: 100%; height: auto; }
.daily__axis { font: 700 12px Inter, sans-serif; fill: #71717a; }
.daily__tablewrap { margin-top: 14px; max-height: 360px; overflow: auto; border-radius: 16px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 18%, #ffffff); }
.daily__table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.daily__table th { position: sticky; top: 0; padding: 10px 14px; background: #fafafa; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #52525b; }
.daily__table td { padding: 9px 14px; border-top: 1px solid rgba(9, 9, 11, 0.06); font-weight: 600; }
.daily__table td small { font-weight: 600; color: #71717a; }
.daily__keep { margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: #ffffff; border: 1px dashed color-mix(in srgb, var(--hue) 35%, #ffffff); }
.daily__keep p { margin: 0; font-size: 13.5px; color: #3f3f46; }
.daily__keep .daily__stop { margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #dc2626; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* Posters with six tiles: two rows, a smaller photo, so it all fits the card. */
.poster__inner:has(.poster__tiles--two) .poster__people { height: 86px; margin-top: 6px; }
.poster__inner:has(.poster__tiles--two) .poster__halo { width: 100px; height: 100px; }
.poster__inner:has(.poster__tiles--two) .poster__face .avatar { width: 72px !important; height: 72px !important; }
.poster__inner:has(.poster__tiles--two) .poster__big { font-size: 46px; }
.poster__inner:has(.poster__tiles--two) .poster__sub { display: none; }
.poster__tiles--two { row-gap: 6px; }
.poster__tiles--two .poster__tile { padding: 7px 8px 6px; }
.poster--story .poster__inner:has(.poster__tiles--two) .poster__people { height: 150px; }
.poster--story .poster__inner:has(.poster__tiles--two) .poster__face .avatar { width: 104px !important; height: 104px !important; }
.poster--story .poster__inner:has(.poster__tiles--two) .poster__big { font-size: 60px; }
@container (max-width: 320px) {
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__people { height: 62px !important; margin: 4px 0 0 !important; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__halo { width: 70px !important; height: 70px !important; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__face .avatar { width: 52px !important; height: 52px !important; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__big { font-size: 36px !important; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__who { font-size: 12.5px; margin-top: 2px; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__tiles { padding-top: 6px; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__tile b { font-size: 13px; }
}
/* A small line of values under a poster's headline (Daily X Stats). */
.poster__spark { display: block; width: 100%; height: 46px; margin-top: 10px; color: var(--hue, #7c3aed); }
.poster__inner:has(.poster__tiles--two) .poster__sub { display: block; }
.poster--story .poster__spark { height: 70px; margin-top: 18px; }
@container (max-width: 320px) {
  .poster--post .poster__spark { height: 30px; margin-top: 4px; }
  .poster--post .poster__inner:has(.poster__tiles--two) .poster__sub { display: none; }
}
@container (max-width: 320px) { .poster--post .poster__spark { display: none; } }
/* Full-width 4:5 posters: two photos keep their line to one row; six tiles take a slightly smaller photo. */
.poster--post .poster__inner:has(.poster__people--2) .poster__sub { -webkit-line-clamp: 1; }
.poster--post .poster__inner:has(.poster__tiles--two) .poster__people { height: 76px; }
.poster--post .poster__inner:has(.poster__tiles--two) .poster__halo { width: 92px; height: 92px; }

/* ==========================================================================
   Result cards at a balanced size: never page-wide on desktop, centred, with
   the poster and panels below lined up in the same column. Phones are unchanged.
   ========================================================================== */
body[data-tool] .tool-results .fx-card,
body[data-tool] .tool-results .sc,
body[data-tool] .tool-results .radar-card,
body[data-tool] .tool-results .vibe-card,
body[data-tool] .tool-results .refresh-row,
body[data-tool] .tool-results .vrecap,
body[data-tool] .tool-results .stories__share {
  width: 100%; max-width: 720px; margin-inline: auto; box-sizing: border-box;
}
body[data-tool] .tool-results .story-gallery { max-width: 900px; margin-inline: auto; }
@media (min-width: 761px) {
  body[data-tool] .tool-results .fx-card,
  body[data-tool] .tool-results .sc,
  body[data-tool] .tool-results .radar-card,
  body[data-tool] .tool-results .vibe-card { padding: 26px 26px 22px; }
  body[data-tool] .tool-results .fx-stats { gap: 8px; margin-top: 18px; }
  body[data-tool] .tool-results .fx-stat { padding: 12px 14px; border-radius: 16px; }
  body[data-tool] .tool-results .fx-stat b { font-size: 21px; }
  body[data-tool] .tool-results .fx-title { font-size: clamp(24px, 3.2vw, 30px); }
}
/* A saved result shown because X is busy. */
.stale-note { width: 100%; max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: 10px 14px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13.5px; font-weight: 600; }

/* ==========================================================================
   Card Pack
   ========================================================================== */
body[data-tool="pack"] { --hue: #d97706; }
a.tool-card[href$="/pack"] { --hue: #d97706; }
.pack__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pack__tab { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(9, 9, 11, 0.14); background: #ffffff; font: inherit; font-size: 13px; font-weight: 800; color: #3f3f46; cursor: pointer; }
.pack__tab[aria-selected="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
.pack__stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.pack__open { display: block; margin: 16px auto 0; height: 46px; padding: 0 26px; }
.pack__haul { margin: 16px 0 0; font-size: 14.5px; font-weight: 800; color: #3f3f46; text-align: center; }
.pack__rules { margin-top: 14px; font-size: 13.5px; color: #3f3f46; }
.pack__rules summary { cursor: pointer; font-weight: 700; }
.pack__rules ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; }

/* A slot flips from the pack's back to the card's face. */
.tslot { perspective: 900px; }
.tslot__inner { position: relative; aspect-ratio: 5 / 7.4; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tslot.is-open .tslot__inner { transform: rotateY(180deg); }
.tslot__back, .tslot__front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tslot__front { transform: rotateY(180deg); }
.tslot__back {
  display: grid; place-content: center; justify-items: center; gap: 10px; border-radius: 16px; background: #09090b;
  box-shadow: inset 0 0 0 6px var(--hue), 0 14px 26px -18px rgba(9, 9, 11, 0.7);
}
.tslot__mark { width: 34px; height: 34px; border-radius: 10px; background: url("/brand/yapcard.svg?v=2") center / contain no-repeat; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.tslot__brand { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: #ffffff; letter-spacing: 0.02em; }
.tslot__actions { display: flex; gap: 6px; margin-top: 8px; visibility: hidden; }
.tslot.is-open .tslot__actions { visibility: visible; }
.tslot__actions .story-gallery__btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .tslot__inner { transition: none; } }

/* The card face. */
.tcard {
  --rare: #71717a;
  position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; box-sizing: border-box; overflow: hidden;
  padding: 10px 10px 8px; border-radius: 16px; background: #ffffff; color: #09090b; text-align: center;
  box-shadow: inset 0 0 0 5px var(--rare), 0 14px 26px -18px rgba(9, 9, 11, 0.7);
}
.tcard--legendary { --rare: #f59e0b; background: #fffbeb; }
.tcard--epic { --rare: #7c3aed; background: #f5f3ff; }
.tcard--rare { --rare: #2563eb; background: #eff6ff; }
.tcard--uncommon { --rare: #16a34a; background: #f0fdf4; }
/* Legendary cards shine: a solid bar sweeping across, not a gradient. */
.tcard--legendary::after {
  content: ""; position: absolute; top: -20%; left: -60%; width: 30%; height: 140%; background: rgba(255, 255, 255, 0.55);
  transform: rotate(20deg); animation: tcard-shine 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes tcard-shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .tcard--legendary::after { display: none; } }
.tcard__top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tcard__rarity { padding: 3px 8px; border-radius: 999px; background: var(--rare); color: #ffffff; font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.tcard__rank { font-size: 11px; font-weight: 900; color: #52525b; }
.tcard__photo { margin-top: 8px; line-height: 0; border-radius: 50%; }
.tcard__photo .avatar, .tcard__photo .avatar img { border-radius: 50% !important; }
.tcard__photo .avatar { width: 64% !important; height: auto !important; aspect-ratio: 1; margin: 0 auto; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--rare); }
.tcard__name { margin: 8px 0 0; max-width: 100%; font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__handle { margin: 1px 0 0; max-width: 100%; font-size: 11px; font-weight: 700; color: #52525b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 5px; }
.tcard__badge { padding: 2px 6px; border-radius: 999px; background: rgba(9, 9, 11, 0.07); font-size: 9px; font-weight: 800; }
.tcard__badge--vintage { background: #fde68a; }
.tcard__badge--rookie { background: #bbf7d0; }
.tcard__badge--verified { background: #bfdbfe; }
.tcard__badge--machine { background: #fecaca; }
.tcard__stats { display: grid; gap: 2px; width: 100%; margin: auto 0 0; padding-top: 6px; }
.tcard__stats div { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; }
.tcard__stats dt { color: #52525b; font-weight: 600; }
.tcard__stats dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.tcard__bond { width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(9, 9, 11, 0.15); font-size: 10px; line-height: 1.3; }
.tcard__bond b { display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rare); }
.tcard__owner { margin-top: 3px; font-size: 8.5px; font-weight: 700; color: #a1a1aa; }

/* ==========================================================================
   Starting Lineup
   ========================================================================== */
body[data-tool="lineup"] { --hue: #0f766e; }
a.tool-card[href$="/lineup"] { --hue: #0f766e; }
.pitch {
  position: relative; display: grid; gap: 18px; margin-top: 18px; padding: 22px 12px; border-radius: 22px; overflow: hidden;
  background: #15803d; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.pitch__halfway { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: rgba(255, 255, 255, 0.45); }
.pitch__circle { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); }
.pitch__row { position: relative; display: flex; justify-content: space-evenly; gap: 12px; }
.player { display: grid; justify-items: center; gap: 4px; width: 150px; max-width: 46%; text-align: center; color: #ffffff; }
.player__role { padding: 3px 9px; border-radius: 999px; background: #09090b; font-size: 10.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.player--captain .player__role { background: #fde047; color: #09090b; }
.player__photo { line-height: 0; border-radius: 50%; }
.player__photo .avatar, .player__photo .avatar img { border-radius: 50% !important; }
.player__photo .avatar { box-shadow: 0 0 0 3px #ffffff, 0 10px 18px -10px rgba(0, 0, 0, 0.6); }
.player--captain .player__photo .avatar { box-shadow: 0 0 0 3px #fde047, 0 10px 18px -10px rgba(0, 0, 0, 0.6); }
.player__name { max-width: 100%; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__why { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); line-height: 1.3; }
.player__empty { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.7); font-size: 24px; font-weight: 900; }
.player.is-empty .player__name { opacity: 0.85; }
.bench { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding: 10px 14px; border-radius: 16px; background: #ffffff; border: 1px solid color-mix(in srgb, var(--hue) 18%, #ffffff); }
.bench__label { font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #52525b; }
.bench__player { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #09090b; font-size: 13px; font-weight: 700; }
.bench__player .avatar, .bench__player .avatar img { border-radius: 50%; }
/* Packs deal as centred rows (3 + 2 on desktop), and each card keeps its name in view. */
.pack__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pack__stage > .tslot { flex: 0 0 160px; }
@media (max-width: 600px) { .pack__stage > .tslot { flex-basis: calc(50% - 6px); } }
.tslot__inner { aspect-ratio: 5 / 8; }
.tcard__photo .avatar { width: 50% !important; }
.tcard__photo { margin-top: 6px; }
.tcard__name { margin-top: 6px; }
@media (max-width: 600px) {
  .tslot__inner { aspect-ratio: 5 / 8.8; }
  .tcard { padding: 8px 8px 7px; }
  .tcard__photo .avatar { width: 46% !important; }
  .tcard__name { font-size: 13px; }
  .tcard__stats div { font-size: 10px; }
  .tcard__bond { font-size: 9.5px; }
}
/* Card lines never shrink; spare room goes to the gap above the stats. */
.tcard > * { flex-shrink: 0; }
.tcard__name { line-height: 1.2; min-height: 1.2em; }
.tcard__handle { line-height: 1.3; }
.tslot__inner { aspect-ratio: 5 / 8.5; }
@media (max-width: 600px) { .tslot__inner { aspect-ratio: 5 / 9.4; } }

/* X Stories: which days to read. */
.range { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.range legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 800; color: #09090b; }
.range__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.range__chips button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(9, 9, 11, 0.14); background: #ffffff; color: #3f3f46; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.range__chips button[aria-pressed="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
.range__chips button:focus-visible { outline: 3px solid color-mix(in srgb, var(--hue) 50%, transparent); outline-offset: 2px; }
.range__custom { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.range__custom[hidden] { display: none; }
.range__custom label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: #3f3f46; }
.range__custom input { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(9, 9, 11, 0.16); background: #ffffff; color: #09090b; font: inherit; font-size: 14px; }
.range__note { margin: 8px 0 0; font-size: 12.5px; color: #52525b; }
.story__range { margin: 6px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 800; }

/* ==========================================================================
   Landing, v2: the launch tools lead, everything light, calm motion.
   ========================================================================== */

/* Hero tool picker: which tool the handle opens in. */
body.home .hx-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
body.home .hx-pick__label { margin-right: 4px; font-size: 13px; font-weight: 700; color: #71717a; }
body.home .hx-pick button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(9, 9, 11, 0.12); background: #ffffff; color: #3f3f46; font: inherit; font-size: 13px; font-weight: 700;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
body.home .hx-pick button img { width: 22px; height: 22px; }
body.home .hx-pick button:hover { border-color: rgba(9, 9, 11, 0.3); transform: translateY(-1px); }
body.home .hx-pick button[aria-pressed="true"] { background: #09090b; border-color: #09090b; color: #ffffff; }
body.home .hx-pick button:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }

/* The stage: a live X Stories card with smaller cards floating round it. Light, solid colours. */
body.home .hx-stage { position: relative; height: 520px; }
body.home .hx-story {
  position: absolute; left: 50%; top: 10px; width: 270px; height: 480px; margin-left: -135px; padding: 26px 20px 18px; box-sizing: border-box;
  display: flex; flex-direction: column; border-radius: 30px; background: #7c3aed; color: #ffffff; overflow: hidden;
  box-shadow: 0 0 0 8px #ffffff, 0 40px 70px -30px rgba(76, 29, 149, 0.55); transform: rotate(-2deg);
  animation: hx-float 7s ease-in-out infinite;
}
body.home .hx-story::before { content: ""; position: absolute; width: 240px; height: 240px; right: -110px; top: -70px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
body.home .hx-story__bars { position: relative; display: flex; gap: 4px; }
body.home .hx-story__bars i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
body.home .hx-story__bars i::after { content: ""; position: absolute; inset: 0; background: #ffffff; transform-origin: left; transform: scaleX(0); animation: hx-bar 12s linear infinite; }
body.home .hx-story__bars i:nth-child(2)::after { animation-delay: 4s; }
body.home .hx-story__bars i:nth-child(3)::after { animation-delay: 8s; }
@keyframes hx-bar { 0% { transform: scaleX(0); } 33.3% { transform: scaleX(1); } 33.34%, 100% { transform: scaleX(0); } }
body.home .hx-slide {
  position: absolute; left: 20px; right: 20px; top: 70px; bottom: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; opacity: 0; animation: hx-slide 12s ease-in-out infinite;
}
body.home .hx-slide--2 { animation-delay: 4s; }
body.home .hx-slide--3 { animation-delay: 8s; }
@keyframes hx-slide { 0% { opacity: 0; transform: translateY(14px); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-10px); } }
body.home .hx-tag { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
body.home .hx-slide b { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
body.home .hx-slide small { font-size: 13px; opacity: 0.85; }
body.home .hx-huge { font-size: 38px !important; line-height: 0.98 !important; letter-spacing: -0.04em !important; }
body.home .hx-faces { display: flex; }
body.home .hx-faces span { display: grid; place-items: center; width: 62px; height: 62px; margin-left: -12px; border-radius: 50%; background: var(--c); color: #ffffff; font: 800 22px var(--font-display); box-shadow: 0 0 0 4px #7c3aed; }
body.home .hx-faces span:first-child { margin-left: 0; width: 78px; height: 78px; box-shadow: 0 0 0 4px #7c3aed, 0 0 0 7px #ffffff; }
body.home .hx-chips { display: flex; gap: 6px; }
body.home .hx-chips span { padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700; }
body.home .hx-post { width: 100%; padding: 14px; box-sizing: border-box; border-radius: 16px; background: #ffffff; color: #09090b; text-align: left; }
body.home .hx-post p { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 600; }
body.home .hx-post small { display: block; margin-top: 10px; color: #52525b; opacity: 1; font-size: 12px; font-weight: 700; }
body.home .hx-story__foot { position: relative; margin-top: auto; font-size: 11px; font-weight: 700; opacity: 0.75; text-align: center; }

body.home .hx-card {
  position: absolute; display: grid; gap: 4px; padding: 14px 16px; border-radius: 20px; background: #ffffff;
  box-shadow: 0 0 0 1px rgba(9, 9, 11, 0.06), 0 24px 40px -26px rgba(9, 9, 11, 0.4); animation: hx-float 8s ease-in-out infinite;
}
body.home .hx-card__k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k); }
body.home .hx-card b { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
body.home .hx-card b small { font-size: 13px; font-weight: 700; color: #71717a; }
body.home .hx-card--map { --k: #0ea5e9; right: 0; top: 30px; width: 190px; animation-delay: -2s; }
body.home .hx-dots { position: relative; height: 72px; border-radius: 12px; background: #e0f2fe; background-image: radial-gradient(#bae6fd 1.3px, transparent 1.3px); background-size: 9px 9px; }
body.home .hx-dots i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #0ea5e9; box-shadow: 0 0 0 3px #ffffff; animation: hx-ping 2.8s ease-out infinite; }
body.home .hx-dots i:nth-child(2) { animation-delay: 0.5s; } body.home .hx-dots i:nth-child(3) { animation-delay: 1s; } body.home .hx-dots i:nth-child(4) { animation-delay: 1.5s; } body.home .hx-dots i:nth-child(5) { animation-delay: 2s; }
@keyframes hx-ping { 0% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 3px rgba(14, 165, 233, 0.45); } 70%, 100% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 16px rgba(14, 165, 233, 0); } }
body.home .hx-card--daily { --k: #16a34a; left: 0; bottom: 70px; width: 180px; animation-delay: -4s; }
body.home .hx-card--daily b { color: #15803d; }
body.home .hx-card--daily svg { width: 100%; height: 34px; }
body.home .hx-card--daily path { fill: none; stroke: #16a34a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: hx-draw 2.4s 0.6s ease forwards; }
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
body.home .hx-card--vibe { --k: #ec4899; right: 14px; bottom: 40px; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; animation-delay: -6s; }
body.home .hx-card--vibe svg { width: 52px; height: 52px; }
body.home .hx-ring-bg { fill: none; stroke: #fce7f3; stroke-width: 7; }
body.home .hx-ring { fill: none; stroke: #ec4899; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 163; stroke-dashoffset: 163; transform: rotate(-90deg); transform-origin: 32px 32px; animation: hx-ring 1.8s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes hx-ring { to { stroke-dashoffset: 23; } }
body.home .hx-card--vibe span { display: grid; }
body.home .hx-card--vibe small { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ec4899; }
@keyframes hx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 960px) {
  body.home .hx-stage { height: 470px; max-width: 460px; width: 100%; margin: 0 auto; }
  body.home .hx-story { width: 240px; height: 420px; margin-left: -120px; }
}
@media (max-width: 600px) {
  /* On phones the stage is a compact preview, so the tools aren't pushed a screen away. */
  body.home .hx-stage { height: 360px; transform: scale(0.82); transform-origin: top center; margin-bottom: -60px; }
  body.home .hx-card--map { right: -14px; } body.home .hx-card--daily { left: -14px; } body.home .hx-card--vibe { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .hx-story, body.home .hx-card, body.home .hx-dots i { animation: none; }
  body.home .hx-slide { animation: none; } body.home .hx-slide--1 { opacity: 1; }
  body.home .hx-story__bars i::after { animation: none; } body.home .hx-story__bars i:first-child::after { transform: scaleX(1); }
  body.home .hx-card--daily path, body.home .hx-ring { animation: none; stroke-dashoffset: 0; } body.home .hx-ring { stroke-dashoffset: 23; }
}

/* Tool cards: light panels in each tool's own colour instead of black. */
body.home .tool-grid--all .tool-card__top { background: color-mix(in srgb, var(--hue, #7c3aed) 16%, #ffffff); box-shadow: inset 0 4px 0 var(--hue, #7c3aed); }
body.home .tool-grid--all .tool-card__avatar { transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
body.home .tool-grid--all a.tool-card:hover .tool-card__avatar { transform: translateY(-4px) rotate(-4deg) scale(1.06); }

/* The coffee box: light, in the brand yellow. */
body.home .cta { background: #fff7cc; color: #09090b; box-shadow: inset 0 0 0 1px rgba(161, 98, 7, 0.18); }
body.home .cta h3 { color: #09090b; }
body.home .cta p { color: #57534e; }
body.home .cta .cta__try { background: #09090b; color: #ffffff; }
body.home .hx-card--daily { bottom: 24px; left: -6px; }
body.home .hx-card--vibe { bottom: 96px; right: 0; }

/* ---------- public stats page ---------- */
.st { max-width: 920px; padding: 0 20px; }
.st-totals { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-num { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid #efecf8; box-shadow: var(--shadow); }
.st-num b { font: 800 clamp(28px, 4vw, 38px)/1 "Sora", sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.st-num span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
.st-num small { color: var(--ink-soft); font-size: 12px; }
.st-num--lead { background: var(--brand-soft); border-color: #ddd3fb; }
.st-num--lead b { font-size: clamp(40px, 6vw, 60px); color: #4a2fa3; }
.st-days { display: flex; align-items: flex-end; gap: 4px; height: 150px; margin-top: 18px; }
.st-days span { flex: 1; height: var(--h); min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--brand); transform-origin: bottom; animation: st-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.st-days span:nth-child(odd) { background: var(--brand-2); }
.st-days span.is-zero { background: var(--line); }
.st-days__axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-soft); font-size: 12px; }
@keyframes st-grow { from { transform: scaleY(0); } }
.st-tools { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.st-tools li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.st-tools a { color: var(--ink); font-weight: 600; text-decoration: none; }
.st-tools a:hover { color: var(--hue); }
.st-tools b { font-variant-numeric: tabular-nums; }
.st-tools i { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--hue) 14%, #fff); position: relative; overflow: hidden; }
.st-tools i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 4px; border-radius: inherit; background: var(--hue); animation: st-fill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes st-fill { from { width: 0; } }
@media (max-width: 760px) {
  .st { padding: 0 16px; }
  .st-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-num--lead { grid-column: 1 / -1; }
  .st-days { gap: 2px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .st-days span, .st-tools i::after { animation: none; } }
/* Stats page: light header like the tool pages, no floating panel. */
body.stats-page { background: #f6f4fd; }
.stats-page .tool__head { padding: 36px 36px 34px; background: var(--brand-soft); border: 1px solid #ddd3fb; color: var(--ink); }
.stats-page .tool__head::after { display: none; }
.stats-page .tool__head h1 { color: var(--ink); }
.stats-page .tool__head p { color: #4a4670; }
.stats-page .tool__head + .panel, .stats-page .tool__head + .status { margin: 0; }
.stats-page .st-num--lead { background: var(--surface); }
.st-tools li.is-zero i::after { display: none; }
@media (max-width: 760px) {
  .stats-page .tool__head { padding: 26px 22px; }
  .st-totals { grid-template-columns: 1fr; gap: 10px; }
  .st-num:not(.st-num--lead) { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px 20px; }
}

/* ---------- sponsor slots (landing card, tool banner) ---------- */
.ad {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
a.ad:hover { border-color: #cfc5f3; box-shadow: 0 14px 30px -22px rgba(60, 30, 140, 0.5); }
.ad__tag { align-self: start; padding: 3px 8px; border-radius: 6px; background: #f1eff8; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ad__logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #f1eff8; }
.ad__logo--demo { display: grid; place-items: center; background: #ffe4d6; color: #c2410c; font: 800 20px "Sora", sans-serif; }
.ad__body { display: grid; gap: 2px; min-width: 0; }
.ad__body b { font-size: 15px; }
.ad__body > span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.ad__cta { padding: 9px 14px; border-radius: 999px; background: var(--brand-soft); color: #4a2fa3; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.ad:not(:has(.ad__logo)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.groups > .ad--card { margin-top: 18px; }
.ad--empty { background: transparent; border-style: dashed; }
.ad--empty .ad__cta { background: transparent; padding: 0; }

.ad-slot { max-width: 1120px; margin: 34px auto 0; padding: 0 24px; }
.ad--banner { max-width: 760px; margin: 0 auto; }
.ad--image { display: block; position: relative; max-width: 728px; padding: 0; overflow: hidden; border-radius: 14px; }
.ad__banner-img { display: block; width: 100%; height: auto; aspect-ratio: 728 / 90; object-fit: cover; }
.ad__tag--over { position: absolute; top: 6px; left: 6px; background: rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) {
  .ad, .ad:not(:has(.ad__logo)) { grid-template-columns: auto minmax(0, 1fr); }
  .ad__tag { grid-column: 1 / -1; justify-self: start; }
  .ad__cta { grid-column: 1 / -1; justify-self: start; }
  .ad-slot { padding: 0 16px; }
}

/* Landing hero: live count linking to /stats. */
.hx-count { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; text-decoration: none; }
.hx-count b { font-variant-numeric: tabular-nums; }
.hx-count__dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: hx-live 2s infinite; }
.hx-count__go { color: var(--brand); font-weight: 700; }
.hx-count:hover { border-color: #cfc5f3; }
@keyframes hx-live { 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .hx-count__dot { animation: none; } }

/* ---------- advertise page ---------- */
.adv-kicker { margin: 0 0 10px; color: #4a2fa3; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.stats-page .adv-head h1 { max-width: 16ch; }
.adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.btn.adv-btn { background: var(--ink); color: #fff; text-decoration: none; }
.adv-link { color: #4a2fa3; font-weight: 700; text-decoration: none; }
.adv-format { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.adv-format:first-of-type { margin-top: 16px; }
.adv-format h3 { margin: 0; font-size: 17px; }
.adv-format p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.adv-format ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.adv-format__demo { padding: 22px; border-radius: 16px; background: #f6f4fd; }
.adv-rules { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.adv-rules li { padding-left: 26px; position: relative; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.adv-rules li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--good); font-weight: 800; }
.adv-rules b { color: var(--ink); }
.adv-steps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-soft); font-size: 14.5px; }
.adv-steps b { color: var(--ink); }
.adv-note { margin: 16px 0 18px; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 760px) {
  .adv-format, .adv-rules { grid-template-columns: 1fr; }
  .adv-format__demo { padding: 14px; }
}

/* ---------- growth loops: "your turn" bar, card call to action, welcome back ---------- */
.your-turn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 auto 18px; max-width: 760px;
  padding: 12px 12px 12px 18px; border-radius: 18px; background: #fff7cc; border: 1px solid #f5df70;
  box-shadow: 0 14px 30px -22px rgba(120, 90, 0, 0.6);
}
.your-turn__copy { flex: 1 1 260px; margin: 0; color: #4a3a00; font-size: 14.5px; line-height: 1.4; }
.your-turn__copy b { color: #1d1a36; }
.your-turn__field { display: flex; align-items: center; flex: 1 1 180px; max-width: 240px; padding: 0 10px; border-radius: 12px; background: #fff; border: 1px solid #ecd98a; }
.your-turn__at { color: #a07c00; font-weight: 700; }
.your-turn__field input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; padding: 0 6px; font: 600 15px Inter, sans-serif; color: #1d1a36; background: transparent; }
.your-turn__field input[aria-invalid="true"] { color: var(--err-ink); }
.btn.your-turn__go { height: 42px; background: #1d1a36; color: #fff; }
@media (max-width: 560px) { .your-turn__field { max-width: none; } .btn.your-turn__go { flex: 1 1 100%; } }

.poster__url small, .story__stub b small { font-size: 0.85em; font-weight: 600; opacity: 0.6; }

body.home .hx-back {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px -22px rgba(60, 30, 140, 0.5);
}
body.home .hx-back__hi { margin-right: 4px; font-size: 14px; color: var(--ink-soft); }
body.home .hx-back__hi b { color: var(--ink); }
body.home .hx-back a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--brand-soft); color: #4a2fa3; font-size: 13.5px; font-weight: 700; text-decoration: none; }
body.home .hx-back a:hover { background: #e2d9fd; }
body.home .hx-back a img { width: 18px; height: 18px; }
body.home .hx-back button { margin-left: auto; border: 0; background: none; color: var(--ink-soft); font-size: 12.5px; cursor: pointer; text-decoration: underline; }

/* ---------- Follower Milestone ---------- */
body[data-tool="milestone"] { --hue: #ca8a04; }
a.tool-card[href$="/milestone"] { --hue: #ca8a04; }
.milestone { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 26px; align-items: start; max-width: 980px; margin: 0 auto; }
.milestone__canvas { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--hue) 70%, transparent); }
.milestone__side { display: grid; gap: 12px; align-content: start; }
.milestone__side h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.milestone__lead { margin: 0; font-size: 16.5px; color: var(--ink); }
.milestone__note { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.milestone__text { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); font: 500 15px/1.5 Inter, sans-serif; color: var(--ink); resize: vertical; background: #fff; }
.milestone__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.milestone__thanks { margin: 0; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) { .milestone { grid-template-columns: 1fr; } }
.field--goal { flex: 0 1 220px; }
.milestone__goal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--hue) 9%, #ffffff); border: 1px solid color-mix(in srgb, var(--hue) 24%, #ffffff); }
.milestone__goal-label { font-weight: 700; font-size: 14px; }
.milestone__goal input { flex: 1 1 110px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font: 700 15px Inter, sans-serif; color: var(--ink); background: #fff; }
.milestone__goal input[aria-invalid="true"] { border-color: var(--err-ink); }
.milestone__goal .btn { height: 40px; }
@media (max-width: 640px) { .field--goal { flex: 1 1 100%; } }
.milestone__own, .milestone__remind, .milestone__hits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.milestone__own input { flex: 1 1 200px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font: 600 15px Inter, sans-serif; color: var(--ink); background: #fff; }
.milestone__remind input { height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); font: 700 15px Inter, sans-serif; color: var(--ink); background: #fff; }
.milestone__remind .btn { height: 40px; }
.milestone__hits { align-items: flex-start; flex-direction: column; }
.milestone__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.milestone__chip { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 12%, #ffffff); color: color-mix(in srgb, var(--hue) 55%, #09090b); font-weight: 700; font-size: 13px; }
.milestone__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.milestone__pick button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 13.5px Inter, sans-serif; cursor: pointer; }
.milestone__pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.milestone__stage { position: relative; }
.milestone__burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 18px; }
.milestone__burst i { position: absolute; top: -12px; left: var(--x); width: 10px; height: 16px; border-radius: 3px; opacity: 0; animation: ms-fall 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) forwards; }
@keyframes ms-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(560px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .milestone__burst { display: none; } }

/* ---------- Revenue Milestone ---------- */
body[data-tool="revenue"] { --hue: #059669; }
a.tool-card[href$="/revenue"] { --hue: #059669; }
.form--revenue .field--key { flex: 1 1 260px; }
.form--revenue .field--money { flex: 1 1 200px; }
.form--revenue .field--currency { flex: 0 1 130px; }
.form--revenue .field--currency select { width: 100%; height: 100%; border: 0; background: transparent; font: 700 15px Inter, sans-serif; color: var(--ink); padding: 0 12px; cursor: pointer; }
.form--revenue [hidden] { display: none !important; }
.revenue__source { display: grid; gap: 6px; margin: 16px 0 12px; max-width: 360px; }
.revenue__source-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.revenue__select { position: relative; display: block; }
.revenue__select select {
  width: 100%; height: 48px; padding: 0 40px 0 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface, #fff);
  color: var(--ink); font: 700 15px Inter, sans-serif; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.revenue__select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg);
}
.revenue__select select:focus-visible { outline: 3px solid color-mix(in srgb, var(--hue) 45%, transparent); outline-offset: 2px; border-color: var(--hue); }
@media (max-width: 600px) { .revenue__source { max-width: none; } }
.key-help { margin-top: 12px; font-size: 14px; color: var(--ink-soft); }
.key-help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.key-help ol { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.key-help code { padding: 1px 6px; border-radius: 6px; background: #f1f5f4; font-size: 13px; }
.key-help p { margin: 4px 0 0; }

/* ---------- Creator cards ---------- */
body[data-tool="shoutout"] { --hue: #db2777; }
a.tool-card[href$="/shoutout"] { --hue: #db2777; }
body[data-tool="counter"] { --hue: #2563eb; }
a.tool-card[href$="/counter"] { --hue: #2563eb; }
body[data-tool="shiplog"] { --hue: #ea580c; }
a.tool-card[href$="/shiplog"] { --hue: #ea580c; }
body[data-tool="github"] { --hue: #15803d; }
a.tool-card[href$="/github"] { --hue: #15803d; }
body[data-tool="bestpost"] { --hue: #7c3aed; }
a.tool-card[href$="/bestpost"] { --hue: #7c3aed; }
.form--creator .field--money { flex: 1 1 180px; }
.form--creator .field--label { flex: 1 1 220px; }
.form--creator .field--line { flex: 1 1 100%; }
.revenue__store { display: grid; gap: 10px; margin: 10px 0 0; }
.revenue__store textarea { width: 100%; min-height: 96px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font: 500 12.5px/1.4 ui-monospace, Menlo, monospace; color: var(--ink); background: #fff; resize: vertical; }

/* Footer on phones: the "Built by" badge above the copyright line, both on the left. */
@media (max-width: 600px) {
  .site-footer__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__row .credit { order: -1; }
}

/* Landing filter chips: a flex row with real gaps. (".groups > div" is display: block and would win otherwise.) */
body.home .groups > .tool-filter { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 600px) {
  /* Chips wrap into tidy rows on phones, all of them visible. */
  body.home .groups > .tool-filter { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 8px; }
  /* "Open in" on its own line, the tool chips evenly spaced under it. */
  body.home .hx-pick { gap: 8px; }
  body.home .hx-pick__label { flex-basis: 100%; margin: 0 0 2px; }
  /* Tool cards: the mascot on its own tinted tile inside the card, the same inset all round. */
  body.home .groups > .tool-grid--all { --gap: 12px; }
  body.home .tool-grid--all > a.tool-card { grid-template-columns: 96px minmax(0, 1fr); padding: 10px; column-gap: 4px; }
  body.home .tool-grid--all .tool-card__top { box-shadow: none; border-radius: 14px; min-height: 0; height: 100%; }
  body.home .tool-grid--all a.tool-card h3 { margin: 6px 8px 0; }
  body.home .tool-grid--all a.tool-card p { margin: 4px 8px 0; }
  body.home .tool-grid--all .tool-card__go { margin: 8px 8px 4px; }
}

/* "Post it as text": every tool's result as a ready-to-post X post. */
.textpost {
  width: 100%; max-width: 720px; margin: 22px auto 0; box-sizing: border-box; padding: 22px 22px 18px;
  border-radius: 22px; background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.1); box-shadow: 0 18px 40px -30px rgba(9, 9, 11, 0.35);
}
.textpost__title { margin: 0; font: 800 19px/1.2 Sora, Inter, sans-serif; letter-spacing: -0.01em; color: #09090b; }
.textpost__lead { margin: 6px 0 14px; font-size: 14px; color: #71717a; }
.textpost__text {
  display: block; width: 100%; box-sizing: border-box; min-height: 120px; padding: 16px 18px; border-radius: 14px; resize: vertical;
  border: 1px solid rgba(9, 9, 11, 0.1); background: #fafaf9; color: #09090b; white-space: pre-wrap; overflow: hidden;
  font: 500 16px/1.6 Inter, -apple-system, "Segoe UI", sans-serif;
}
.textpost__text:focus { outline: none; border-color: #09090b; background: #ffffff; }
.textpost__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.textpost__actions .btn { height: 44px; padding: 0 20px; font-size: 15px; text-decoration: none; display: inline-flex; align-items: center; }
.textpost__count { margin-left: auto; font-size: 13px; font-weight: 700; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.textpost__count--over { color: #dc2626; }
@media (max-width: 600px) {
  .textpost { padding: 18px 16px 16px; border-radius: 18px; }
  .textpost__text { font-size: 15px; padding: 14px; }
  .textpost__actions .btn { flex: 1; justify-content: center; }
  .textpost__count { flex-basis: 100%; margin-left: 0; text-align: right; }
}

/* ==========================================================================
   Sponsor rail: three cards down each side on wide screens, a row above the footer elsewhere.
   ========================================================================== */
.rail-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: 100%;
  padding: 14px 16px 16px; border-radius: 18px; text-decoration: none; color: #09090b;
  background: linear-gradient(160deg, #ffffff 0%, #fbfaf7 60%, #f6f4ff 100%);
  border: 1px solid rgba(9, 9, 11, 0.08); box-shadow: 0 10px 26px -22px rgba(9, 9, 11, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rail-card:nth-child(3n + 2) { background: linear-gradient(160deg, #ffffff 0%, #fbfaf7 60%, #f2fbf8 100%); }
.rail-card:nth-child(3n) { background: linear-gradient(160deg, #ffffff 0%, #fbfaf7 60%, #fffbea 100%); }
a.rail-card:hover { transform: translateY(-2px); border-color: rgba(9, 9, 11, 0.16); box-shadow: 0 18px 34px -24px rgba(9, 9, 11, 0.45); }
.rail-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.rail-card__logo {
  width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; flex: none;
  background: #ffffff; border: 1px solid rgba(9, 9, 11, 0.08); font: 800 18px Sora, Inter, sans-serif; color: #09090b;
}
.rail-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.rail-card__logo--add { background: #f4f4f5; border-color: transparent; color: #a1a1aa; font: 300 26px Inter, sans-serif; }
.rail-card__tag { font: 600 10.5px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; padding-top: 2px; }
.rail-card--empty .rail-card__tag { text-transform: none; letter-spacing: 0; font-size: 12px; color: #71717a; }
.rail-card__name { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1.25 Inter, sans-serif; color: #09090b; }
.rail-card__arrow { width: 12px; height: 12px; color: #71717a; flex: none; }
.rail-card__line { font-size: 13.5px; line-height: 1.4; color: #71717a; }

/* Side columns: only where there's room beside the page. */
.rail { display: none; }
@media (min-width: 1600px) {
  .rail { position: fixed; top: 110px; z-index: 5; display: flex; flex-direction: column; gap: 12px; width: 204px; }
  .rail--left { left: max(20px, calc((100vw - 1180px) / 2 - 204px - 32px)); }
  .rail--right { right: max(20px, calc((100vw - 1180px) / 2 - 204px - 32px)); }
  .rail-row { display: none; }
}
/* The row: everywhere else, above the footer. */
.rail-row { max-width: 1180px; margin: 48px auto 0; padding: 0 20px; box-sizing: border-box; }
.rail-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; }
.rail-row__head a { color: #71717a; text-decoration: none; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 13px; }
.rail-row__head a:hover { color: #09090b; }
.rail-row__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
@media (max-width: 600px) {
  .rail-row { padding: 0 16px; margin-top: 36px; }
  .rail-row__cards { grid-template-columns: 1fr; }
}

/* ---------- the sponsor page ---------- */
.sp-head { max-width: 760px; margin: 0 auto 28px; }
.sp-head h1, .sp-status h1 { font: 800 clamp(30px, 4.6vw, 48px)/1.08 Sora, Inter, sans-serif; letter-spacing: -0.035em; margin: 6px 0 12px; }
.sp-lead { font-size: 17px; line-height: 1.6; color: #52525b; }
.sp-lead b { color: #09090b; }
.sp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.sp-facts div { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(9, 9, 11, 0.08); }
.sp-facts b { display: block; font: 800 24px Sora, Inter, sans-serif; letter-spacing: -0.02em; }
.sp-facts span { font-size: 13px; color: #71717a; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.sp-form { display: grid; gap: 16px; padding: 22px; }
.sp-field { display: grid; gap: 6px; }
.sp-field > span { font-size: 13px; font-weight: 700; color: #3f3f46; }
.sp-field input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(9, 9, 11, 0.14); font: inherit; font-size: 15px; background: #fff; }
.sp-field input:focus { outline: none; border-color: #09090b; box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.08); }
.sp-field small { font-size: 12.5px; color: #a1a1aa; }
.sp-url { display: flex; gap: 8px; }
.sp-url input { flex: 1; min-width: 0; }
.sp-url .btn { height: 46px; white-space: nowrap; }
.sp-submit { height: 50px; font-size: 16px; justify-content: center; }
.sp-hint { min-height: 1.2em; margin: 0; font-size: 14px; color: #52525b; }
.sp-preview { position: sticky; top: 90px; display: grid; gap: 14px; }
.sp-preview__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; }
.sp-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: #52525b; }
.sp-steps b { color: #09090b; }
.sp-status { max-width: 820px; margin: 0 auto; }
.sp-status__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.sp-status__panel { padding: 22px; display: grid; gap: 14px; }
.sp-status__price { margin: 0; font: 700 18px Inter, sans-serif; }
.sp-status__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-keep { margin: 0; font-size: 12.5px; color: #a1a1aa; }
@media (max-width: 760px) {
  .sp-grid, .sp-status__grid { grid-template-columns: 1fr; }
  .sp-preview { position: static; }
  .sp-facts b { font-size: 20px; }
  .sp-url { flex-direction: column; }
}