/* ==========================================================================
   WORLD 02 — AI COMMUNITY LIBRARY
   A dataset, so it should read like one: technical, precise, documented.
   Light paper, monospaced labels, hairline rules, a grid of faces. The
   opposite register to UVSafe's dark instrument panel, on purpose.
   ========================================================================== */
:root{
  --ink:#0B1F1C;
  --paper:#F8FAF9;
  --surface:#FFFFFF;
  --surface-2:#ECF3F0;
  --muted:#4C635D;
  --line:rgba(11,31,28,.14);
  --brand:#0A7A5C;
  --brand-ink:#FFFFFF;
  --accent:#0A7A5C;
  --mint:#7CF5C4;
  --focus:#0B7A5C;
  --foot-bg:#0B1F1C;
  --foot-fg:#EAF4EF;

  --font-display:"Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --header-h:68px;
}
h1,h2,h3{ letter-spacing:-.035em; font-weight:700; }
.eyebrow,.link-arrow,.card__kicker{ color:var(--accent); font-family:var(--font-mono); letter-spacing:.12em; }
.site-header{ background:rgba(248,250,249,.9); }
.worldbar{ background:var(--ink); color:#EAF4EF; }
.worldmark{ font-family:var(--font-display); }
.btn{ border-radius:var(--r-sm); }
.btn--solid{ --btn-bg:var(--ink); --btn-fg:#fff; }
.imgph{ --ph-a:#2DD4A7; --ph-b:#0B1F1C; }
.card,.panel{ background:var(--surface); }

/* --------------------------------------------------------------- HERO */
.lhero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#EAF4EF;
  padding-block:clamp(3rem,8vw,6rem) clamp(3rem,7vw,5rem);
}
.lhero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(124,245,196,.10) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(124,245,196,.10) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000, transparent 72%);
  mask-image:radial-gradient(120% 90% at 70% 10%, #000, transparent 72%);
}
.lhero h1{ font-size:var(--step-6); max-width:17ch; line-height:1; }
.lhero .lede{ color:rgba(234,244,239,.8); max-width:54ch; }
.lhero__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:980px){ .lhero__grid{ grid-template-columns:1.05fr .95fr; } }

/* ------------------------------------------------------------ FACE GRID
   The library, shown as itself. */
.facegrid{
  display:grid; gap:4px;
  grid-template-columns:repeat(4, 1fr);
  border-radius:var(--r-md); overflow:hidden;
}
.facegrid .imgph{ border-radius:3px; --ratio:1/1; }
.facegrid .imgph::after{ font-size:.5rem; padding:.2rem .4rem; }
.facegrid--wide{ grid-template-columns:repeat(6, 1fr); }
.facegrid__cell--empty{
  background:rgba(10,122,92,.06);
  border:1px dashed rgba(10,122,92,.4);
  border-radius:3px; aspect-ratio:1/1;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em;
  color:#075B45; text-align:center; padding:.3rem;
}
/* On the dark hero the same cell needs the light-side treatment. */
.lhero .facegrid__cell--empty,
.band-ink .facegrid__cell--empty{
  background:rgba(124,245,196,.07);
  border-color:rgba(124,245,196,.4);
  color:#A9F7D8;
}

/* ----------------------------------------------------------- COMPARISON */
.versus{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; grid-template-columns:1fr; }
@media (min-width:760px){ .versus{ grid-template-columns:1fr 1fr; } }
.versus__side{ background:var(--surface); padding:clamp(1.3rem,3vw,2rem); display:grid; gap:.9rem; align-content:start; }
.versus__side--bad{ background:#FFF6F5; }
.versus__side--good{ background:#F1FBF7; }
.versus__label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}
.versus__side--bad .versus__label{ color:#B4231C; }
.versus__side--good .versus__label{ color:var(--accent); }

/* --------------------------------------------------------- DATASET CARD */
.dcard{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface);
}
.dcard__head{
  padding:1rem 1.3rem; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between;
  background:var(--surface-2);
}
.dcard__head h3{ margin:0; font-size:var(--step-1); }
.dcard__row{
  display:grid; gap:.2rem 1.5rem; grid-template-columns:1fr;
  padding:.95rem 1.3rem; border-bottom:1px solid var(--line);
}
@media (min-width:680px){ .dcard__row{ grid-template-columns:16rem 1fr; align-items:baseline; } }
.dcard__row:last-child{ border-bottom:0; }
.dcard__k{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.dcard__v{ font-size:var(--step--1); }

/* --------------------------------------------------------------- STEPS */
.flow{ counter-reset:f; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
@media (min-width:860px){ .flow--4{ grid-template-columns:repeat(4,1fr); } .flow--3{ grid-template-columns:repeat(3,1fr); } }
.flow__step{ background:var(--surface); padding:clamp(1.2rem,2.6vw,1.8rem); counter-increment:f; }
.flow__step::before{
  content:"0" counter(f);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--brand); display:block; margin-bottom:.7rem; font-weight:600;
}
.flow__step h3{ font-size:var(--step-1); margin-bottom:.35rem; }
.flow__step p{ font-size:var(--step--1); color:var(--muted); margin:0; }

/* ------------------------------------------------------------- RULES */
.rules{ display:grid; gap:.6rem; }
.rule-item{
  display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start;
  padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface);
}
.rule-item__mark{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:.85rem; font-weight:800; flex:none;
}
.rule-item--do .rule-item__mark{ background:rgba(14,158,119,.14); color:var(--accent); }
.rule-item--dont .rule-item__mark{ background:rgba(180,35,28,.12); color:#B4231C; }
.rule-item h3{ font-size:var(--step-0); margin:0 0 .2rem; }
.rule-item p{ margin:0; font-size:var(--step--1); color:var(--muted); }

/* --------------------------------------------------------------- CODE */
.codeblock{
  background:var(--ink); color:#D8F5EA; border-radius:var(--r-sm);
  padding:1.1rem 1.3rem; overflow-x:auto;
  font-family:var(--font-mono); font-size:.8rem; line-height:1.7;
}
.codeblock .c{ color:#6F9A90; }
.codeblock .s{ color:var(--mint); }

/* --------------------------------------------------------------- BANDS */
.band-ink{ background:var(--ink); color:#EAF4EF; }
.band-ink .lede,.band-ink p{ color:rgba(234,244,239,.8); }
.band-ink .eyebrow{ color:var(--mint); }
.band-ink .card,.band-ink .panel{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#EAF4EF; }
.band-ink .stats{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.16); }
.band-ink .stat{ background:#0F2A26; color:#EAF4EF; }
.band-ink .stat__label,.band-ink .stat__note{ color:rgba(234,244,239,.72); }
.band-ink .btn--ghost{ --btn-fg:#EAF4EF; border-color:rgba(255,255,255,.3); }
.band-tint{ background:var(--surface-2); }

.tag-mono{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .7rem; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted);
}
.band-ink .tag-mono{ border-color:rgba(255,255,255,.25); color:rgba(234,244,239,.85); }