:root {
  --ink-0:#0b0907; --ink-1:#12100e; --ink-2:#1c1915; --ink-3:#28241e; --ink-4:#362f27;
  --rule:#3a342b; --rule-strong:#4d453a;
  --bone-0:#fbf8f0; --bone-1:#ede6d7; --bone-2:#c4baa3; --bone-3:#8f8670; --bone-4:#645c4c;
  --brick-0:#d45a52; --brick-1:#b8413a; --brick-2:#8f2d27;
  --brick-wash:rgba(184,65,58,.10); --brick-rule:rgba(184,65,58,.32);
  --moss:#6b9460; --amber:#c8872e; --rust:#c85a3c; --slate:#7a8a9c;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:9999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 4px 12px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }

body {
  margin:0; min-height:100vh; color:var(--bone-1);
  background:
    radial-gradient(circle at 16% -4%, rgba(184,65,58,.10), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(122,138,156,.05), transparent 24rem),
    var(--ink-1);
  font:14px/1.5 "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* paper grain on canvas — never on cards */
.grain {
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button { font:inherit; cursor:pointer; }
a { color:inherit; }

.shell { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:40px 28px 80px; }

/* ── header ───────────────────────────────────────── */
.top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--rule); }
.eyebrow, .section-label {
  color:var(--bone-3); font:600 10px/1.2 "Geist Mono", ui-monospace, Menlo, monospace;
  letter-spacing:.18em; text-transform:uppercase;
}
h1 { margin:10px 0 0; font:500 44px/1 "Fraunces", Georgia, serif; letter-spacing:-.025em; color:var(--bone-0); }
h1 em { font-style:italic; color:var(--brick-1); }
.sub { margin-top:10px; color:var(--bone-2); max-width:54ch; font-size:13px; }

.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.seg { display:inline-flex; border:1px solid var(--rule-strong); border-radius:var(--r-md); overflow:hidden; background:var(--ink-2); }
.seg button { border:0; background:transparent; color:var(--bone-2); padding:8px 14px; font-size:12px; font-weight:500; transition:background var(--ease) .18s, color var(--ease) .18s; }
.seg button.active { background:var(--brick-1); color:var(--bone-0); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.seg button:not(.active):hover { background:var(--ink-3); color:var(--bone-1); }
.btn { border:1px solid var(--rule-strong); background:var(--ink-2); color:var(--bone-1); width:36px; height:36px;
  border-radius:var(--r-md); font-size:15px; transition:background var(--ease) .18s; }
.btn:hover { background:var(--ink-3); }

/* ── hero stat tiles ──────────────────────────────── */
.hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:1px;
  margin:28px 0 8px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.tile { background:var(--ink-2); padding:18px 20px; position:relative; }
.tile .k { color:var(--bone-3); font:600 10px/1.2 "Geist Mono", monospace; letter-spacing:.14em; text-transform:uppercase; }
.tile .v { margin-top:10px; font:500 34px/1 "Fraunces", Georgia, serif; color:var(--bone-0); letter-spacing:-.02em; }
.tile .v small { font:500 13px/1 "Geist", sans-serif; color:var(--bone-3); margin-left:4px; }
.tile .meta { margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tile.accent::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brick-1); }

/* confidence / source badges */
.badge { font:600 10px/1 "Geist Mono", monospace; letter-spacing:.04em; padding:4px 8px; border-radius:var(--r-pill);
  border:1px solid var(--rule-strong); color:var(--bone-2); white-space:nowrap; }
.badge.high { color:var(--moss); border-color:rgba(107,148,96,.5); background:rgba(107,148,96,.10); }
.badge.low  { color:var(--amber); border-color:rgba(200,135,46,.5); background:rgba(200,135,46,.10); }

/* mini confidence bar */
.confbar { height:5px; border-radius:3px; background:var(--ink-4); overflow:hidden; display:flex; width:100%; margin-top:2px; }
.confbar > i { height:100%; display:block; }
.confbar > i.high { background:var(--moss); }
.confbar > i.low  { background:var(--amber); }

/* ── audience identity (persona) ──────────────────── */
.identity { margin-top:26px; }
.id-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 2px 12px; flex-wrap:wrap; }
.id-meta { color:var(--bone-4); font:500 11px/1 "Geist Mono", monospace; letter-spacing:.03em; display:flex; gap:12px; align-items:center; }
.id-reanalyze { background:transparent; border:1px solid var(--rule-strong); color:var(--bone-2); border-radius:var(--r-pill); padding:5px 11px; font:500 11px "Geist Mono", monospace; cursor:pointer; }
.id-reanalyze:hover { background:var(--ink-3); color:var(--bone-1); }
.id-card { border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(184,65,58,.07), transparent 40%), var(--ink-2); box-shadow:var(--shadow-2); }
.id-headline { margin:0; padding:22px 24px 18px; font:500 22px/1.4 "Fraunces", Georgia, serif; color:var(--bone-0); border-bottom:1px solid var(--rule); }
.id-headline em, .id-headline b { color:var(--brick-0); font-style:normal; }
.id-arche { display:flex; flex-wrap:wrap; gap:10px; padding:18px 24px; border-bottom:1px solid var(--rule); }
.arche { border:1px solid var(--brick-rule); background:var(--brick-wash); border-radius:var(--r-md); padding:9px 13px; max-width:280px; }
.arche .l { color:var(--bone-0); font:600 13px "Geist", sans-serif; }
.arche .n { color:var(--bone-3); font-size:11.5px; line-height:1.45; margin-top:3px; }
.id-groups { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule); }
.id-group { background:var(--ink-2); padding:15px 22px; }
.id-group .gk { color:var(--bone-3); font:600 10px/1.2 "Geist Mono", monospace; letter-spacing:.13em; text-transform:uppercase; margin-bottom:9px; }
.id-chips { display:flex; flex-wrap:wrap; gap:6px; }
.id-chips .c { background:var(--ink-3); border:1px solid var(--rule-strong); color:var(--bone-1); border-radius:var(--r-pill); padding:5px 11px; font-size:12px; }
.id-impl { padding:18px 24px; border-top:1px solid var(--rule); }
.id-impl .t { color:var(--brick-0); font:600 10px/1.2 "Geist Mono", monospace; letter-spacing:.13em; text-transform:uppercase; margin-bottom:10px; }
.id-impl ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.id-impl li { color:var(--bone-1); font-size:13px; line-height:1.5; padding-left:18px; position:relative; }
.id-impl li::before { content:"→"; position:absolute; left:0; color:var(--brick-1); }
.id-cta { border:1px dashed var(--rule-strong); border-radius:var(--r-lg); padding:26px; text-align:center; background:var(--ink-2); }
.id-cta .big { font:500 17px/1.3 "Fraunces", Georgia, serif; color:var(--bone-1); margin-bottom:6px; }
.id-cta p { margin:0 auto 14px; max-width:52ch; color:var(--bone-3); font-size:12.5px; }
.id-cta .err { color:var(--amber); font-size:12px; margin-top:10px; }

/* ── explainer panel ──────────────────────────────── */
.explainer { margin-top:18px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(184,65,58,.04), transparent 60%), var(--ink-2); overflow:hidden; }
.exp-toggle { width:100%; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:0; color:var(--bone-1); padding:14px 20px; text-align:left;
  font:600 11px/1 "Geist Mono", monospace; letter-spacing:.14em; text-transform:uppercase; }
.exp-toggle:hover { color:var(--bone-0); }
.exp-toggle .chev { transition:transform var(--ease) .2s; color:var(--brick-1); font-size:13px; }
.explainer.open .exp-toggle .chev { transform:rotate(180deg); }
.exp-body { display:none; padding:0 20px 20px; }
.explainer.open .exp-body { display:block; }
.exp-lead { color:var(--bone-1); font-size:13.5px; line-height:1.6; max-width:74ch; margin:0 0 16px; }
.exp-lead b { color:var(--bone-0); }
.exp-lead i { color:var(--brick-0); font-style:italic; }
.exp-defs { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-bottom:16px; }
.exp-def { border-left:2px solid var(--brick-rule); padding:2px 0 2px 12px; }
.exp-def .t { font:600 11px/1.2 "Geist Mono", monospace; letter-spacing:.06em; color:var(--brick-0); text-transform:uppercase; }
.exp-def .d { margin-top:5px; color:var(--bone-2); font-size:12.5px; line-height:1.55; }
.exp-uses { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; }
.exp-use { background:var(--ink-2); padding:13px 15px; }
.exp-use .h { display:flex; align-items:center; gap:8px; color:var(--bone-0); font:600 13px "Geist", sans-serif; margin-bottom:5px; }
.exp-use .h .ic { color:var(--brick-1); font-size:14px; }
.exp-use p { margin:0; color:var(--bone-3); font-size:12px; line-height:1.5; }
.exp-foot { margin:14px 0 0; color:var(--bone-3); font-size:12px; line-height:1.55; }
.exp-foot b { color:var(--bone-2); }

/* ── list head + legend ───────────────────────────── */
.list-head { display:flex; justify-content:space-between; align-items:baseline; margin:30px 2px 12px; gap:16px; flex-wrap:wrap; }
.legend { display:flex; gap:14px; color:var(--bone-3); font:500 11px/1 "Geist Mono", monospace; letter-spacing:.04em; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot.niche { background:var(--brick-1); } .dot.mid { background:var(--amber); } .dot.mega { background:var(--slate); }

/* ── affinity rows ────────────────────────────────── */
.affinity { border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); box-shadow:var(--shadow-2); }
.arow { display:grid; grid-template-columns:34px 40px 1fr 230px 78px; align-items:center; gap:16px;
  padding:14px 20px; border-top:1px solid var(--rule); transition:background var(--ease) .12s; }
.arow:first-child { border-top:0; }
.arow:hover { background:var(--ink-3); }
.rank { font:500 18px/1 "Fraunces", Georgia, serif; color:var(--bone-4); text-align:center; }
.arow:nth-child(-n+3) .rank { color:var(--brick-1); }

.avatar { width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center;
  font:600 16px/1 "Fraunces", Georgia, serif; color:var(--brick-1);
  background:var(--brick-wash); border:1px solid var(--brick-rule); }

.who { min-width:0; }
.who a { display:inline-flex; align-items:center; gap:6px; color:var(--bone-0); font-weight:600; font-size:15px; text-decoration:none; max-width:100%; }
.who a span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who a:hover { color:var(--brick-0); }
.who a .ext { color:var(--bone-4); font-size:11px; flex:none; }
.who .pop { margin-top:4px; display:flex; align-items:center; gap:7px; color:var(--bone-3);
  font:500 11px/1 "Geist Mono", monospace; letter-spacing:.02em; }

/* lift bar — the visual centerpiece */
.lift { display:flex; flex-direction:column; gap:5px; }
.lift .top { display:flex; justify-content:space-between; align-items:baseline; }
.lift .val { font:600 15px/1 "Geist Mono", monospace; color:var(--bone-0); }
.lift .val.dim { color:var(--bone-3); font-weight:500; }
.lift .cap { font:500 10px/1 "Geist Mono", monospace; color:var(--bone-4); letter-spacing:.08em; text-transform:uppercase; }
.track { height:8px; border-radius:var(--r-pill); background:var(--ink-4); overflow:hidden; }
.track > i { display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--brick-2),var(--brick-1)); transition:width .5s var(--ease); }
.track > i.mega { background:linear-gradient(90deg,#43403a,var(--slate)); }
.track > i.mid  { background:linear-gradient(90deg,#7a5a23,var(--amber)); }

.aff { text-align:right; }
.aff .n { font:500 14px/1 "Geist Mono", monospace; color:var(--bone-1); }
.aff .l { font:500 9px/1.3 "Geist Mono", monospace; color:var(--bone-4); letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

/* ── states ───────────────────────────────────────── */
.skeleton { padding:8px 0; }
.skeleton > i { display:block; height:46px; margin:1px 0; background:linear-gradient(90deg,var(--ink-2),var(--ink-3),var(--ink-2));
  background-size:200% 100%; animation:shimmer 1.3s linear infinite; }
@keyframes shimmer { from{background-position:200% 0;} to{background-position:-200% 0;} }
.empty { padding:48px 24px; text-align:center; color:var(--bone-3); }
.empty .big { font:500 20px/1.3 "Fraunces", Georgia, serif; color:var(--bone-1); margin-bottom:8px; }
.empty div { max-width:52ch; margin-left:auto; margin-right:auto; }
.cta { margin-top:18px; border:1px solid var(--brick-1); background:var(--brick-1); color:var(--bone-0);
  padding:10px 20px; border-radius:var(--r-md); font:500 13px "Geist", sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12); transition:background var(--ease) .18s; }
.cta:hover { background:var(--brick-0); }
.cta.sm { margin-top:0; padding:9px 16px; font-size:12px; }

/* manual handle entry (fallback when auto-resolve can't find a handle) */
.hform { margin-top:18px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.hform input { width:min(260px,60%); background:var(--ink-1); border:1px solid var(--rule-strong);
  color:var(--bone-1); border-radius:var(--r-md); padding:9px 12px; font:400 13px "Geist", sans-serif; }
.hform input::placeholder { color:var(--bone-4); }
.hform input:focus { outline:none; border-color:var(--brick-1); box-shadow:0 0 0 3px var(--brick-wash); }
.hformnote { margin-top:10px; font-size:11px; color:var(--bone-4); max-width:46ch; margin-left:auto; margin-right:auto; }

/* pull-in-progress card */
.pull { padding:44px 28px; text-align:center; }
.pullbar { height:6px; width:min(340px,70%); margin:0 auto 22px; border-radius:var(--r-pill); background:var(--ink-4); overflow:hidden; }
.pullbar > i { display:block; height:100%; width:40%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brick-2),var(--brick-0)); animation:slide 1.2s var(--ease) infinite; }
@keyframes slide { 0%{transform:translateX(-120%);} 100%{transform:translateX(320%);} }
.pullstage { font:500 18px/1.3 "Fraunces", Georgia, serif; color:var(--bone-0); }
.pulldetail { margin-top:8px; font:500 12px "Geist Mono", monospace; color:var(--brick-0); letter-spacing:.02em; }
.pullnote { margin-top:14px; font-size:12px; color:var(--bone-3); max-width:46ch; margin-left:auto; margin-right:auto; }

.btn.spin { animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.btn:disabled, .seg button:disabled, .cta:disabled { opacity:.5; cursor:default; }

.notes { margin:20px 2px 0; display:flex; flex-direction:column; gap:7px; }
.note { color:var(--bone-3); font-size:12px; line-height:1.5; padding-left:14px; border-left:2px solid var(--rule-strong); }

/* ── content examples ─────────────────────────────── */
.content-ex { margin-top:26px; }
.cx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.cx-card { border:1px solid var(--rule); border-radius:var(--r-md); background:var(--ink-2); padding:12px; display:flex; flex-direction:row; gap:12px; min-height:128px; text-decoration:none; transition:background var(--ease) .12s; }
.cx-card:hover { background:var(--ink-3); }
.cx-thumb { width:74px; min-width:74px; height:104px; object-fit:cover; border-radius:9px; background:var(--ink-3); border:1px solid var(--rule); }
.cx-body { display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; }
.cx-author { color:var(--bone-0); font:600 12.5px "Geist", sans-serif; }
.cx-author .at { color:var(--bone-4); font-weight:500; }
.cx-desc { color:var(--bone-1); font-size:12.5px; line-height:1.5; flex:1; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cx-stats { color:var(--bone-4); font:600 11px/1 "Geist Mono", monospace; display:flex; gap:14px; padding-top:9px; border-top:1px solid var(--rule); }
.cx-stats .pl { color:var(--brick-0); }

/* ── follower roster ──────────────────────────────── */
.roster { margin-top:32px; }
.rs-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 2px 12px; flex-wrap:wrap; }
.rs-toggle { background:transparent; border:1px solid var(--rule-strong); color:var(--bone-2); border-radius:var(--r-pill); padding:6px 13px; font:500 12px "Geist", sans-serif; cursor:pointer; }
.rs-toggle:hover { background:var(--ink-3); color:var(--bone-1); }
.rs-table { border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); }
.rs-row { display:grid; grid-template-columns:210px 1.1fr 1.2fr; gap:18px; padding:12px 18px; border-top:1px solid var(--rule); align-items:start; }
.rs-row:first-child { border-top:0; }
.rs-row.head { background:var(--ink-1); position:sticky; top:0; }
.rs-row.head span { color:var(--bone-3); font:600 10px/1.2 "Geist Mono", monospace; letter-spacing:.12em; text-transform:uppercase; }
.rs-row:not(.head):hover { background:var(--ink-3); }
.rs-id a { color:var(--bone-0); font-weight:600; font-size:13px; text-decoration:none; }
.rs-id a:hover { color:var(--brick-0); }
.rs-id .sub { color:var(--bone-4); font:500 10px/1.3 "Geist Mono", monospace; margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; }
.rs-id .cust { color:var(--moss); }
.rs-bio { color:var(--bone-2); font-size:12.5px; line-height:1.5; }
.rs-bio.empty { color:var(--bone-4); font-style:italic; }
.rs-consumes { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.rs-consumes .c { background:var(--ink-3); border:1px solid var(--rule-strong); color:var(--bone-2); border-radius:var(--r-pill); padding:3px 9px; font-size:11px; white-space:nowrap; }
.rs-consumes .more { color:var(--bone-4); font:500 11px "Geist Mono", monospace; }
.rs-consumes .none { color:var(--bone-4); font-style:italic; font-size:11.5px; }
.rs-collapsed .rs-row:nth-child(n+13) { display:none; }

@media (max-width:720px){
  h1 { font-size:34px; }
  .arow { grid-template-columns:28px 1fr 96px; }
  .arow .avatar, .aff { display:none; }
  .rs-row { grid-template-columns:1fr; gap:6px; }
  .id-groups, .exp-defs, .exp-uses { grid-template-columns:1fr; }
}