/* Exact prototype tokens and shared product primitives, scoped to prototype pages. */
.lp-body {
  --n-0: oklch(100% 0 0);
  --n-25: oklch(99.2% 0.002 80);
  --n-50: oklch(98.2% 0.003 80);
  --n-100: oklch(96.4% 0.004 80);
  --n-150: oklch(94% 0.005 80);
  --n-200: oklch(91% 0.006 80);
  --n-300: oklch(84.5% 0.008 80);
  --n-400: oklch(71% 0.01 80);
  --n-500: oklch(58% 0.012 80);
  --n-600: oklch(46% 0.012 80);
  --n-700: oklch(36% 0.01 80);
  --n-800: oklch(25% 0.008 80);
  --n-900: oklch(17% 0.006 80);
  --n-950: oklch(11% 0.005 80);
  --acc-50: oklch(97% 0.028 55);
  --acc-100: oklch(94% 0.06 55);
  --acc-200: oklch(88% 0.11 55);
  --acc-400: oklch(76% 0.17 52);
  --acc-500: oklch(70% 0.195 50);
  --acc-600: oklch(63% 0.195 48);
  --acc-700: oklch(54% 0.175 45);
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --surface-3: var(--n-150);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-muted: var(--n-600);
  --text-soft: var(--n-500);
  --accent: var(--acc-600);
  --accent-hover: var(--acc-700);
  --accent-soft: var(--acc-50);
  --accent-soft-border: var(--acc-200);
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);
  --shadow-2: 0 2px 4px oklch(0% 0 0 / 0.04), 0 4px 8px oklch(0% 0 0 / 0.04);
  --shadow-pop: 0 8px 24px oklch(0% 0 0 / 0.08), 0 2px 6px oklch(0% 0 0 / 0.04);
  --ff-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lp-body .brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
}

.lp-body .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc-400), var(--acc-700));
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.lp-body .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}

.lp-body .chip .chip-key {
  color: var(--text-soft);
  margin-right: 2px;
}

.lp-body .dev-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  font-family: var(--ff-mono);
}

.lp-body .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}

.lp-body .badge.mod-text { color: var(--n-700); }
.lp-body .badge.mod-image { color: oklch(50% 0.1 250); background: oklch(95% 0.025 250); border-color: oklch(88% 0.04 250); }
.lp-body .badge.mod-audio { color: oklch(48% 0.11 150); background: oklch(95% 0.03 150); border-color: oklch(87% 0.05 150); }
.lp-body .badge.mod-video { color: oklch(50% 0.13 320); background: oklch(95% 0.03 320); border-color: oklch(88% 0.05 320); }
.lp-body .badge.license-open { color: oklch(45% 0.1 150); background: oklch(95% 0.03 150); border-color: oklch(88% 0.04 150); }
.lp-body .badge.license-restrict { color: var(--text-muted); }
.lp-body .badge.src-hf { color: oklch(50% 0.13 80); background: oklch(96% 0.04 80); border-color: oklch(88% 0.06 80); }
.lp-body .badge.src-or { color: oklch(42% 0.05 280); background: var(--surface-2); }

.lp-body .rp-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(65% 0.15 150);
  box-shadow: 0 0 0 3px oklch(65% 0.15 150 / 0.15);
  flex-shrink: 0;
}