:root {
  --eb-paper: #f3efe6;
  --eb-ink: #141414;
  --eb-muted: #5c5c5c;
  --eb-border: #d2ccc0;
  --eb-nino: #c24e32;
  --eb-nina: #2f6f9a;
  --eb-neutral: #5a6068;
  --eb-link: #8a3d2a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  background: transparent;
}
a.embed-badge {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--eb-border);
  border-radius: 10px;
  background: var(--eb-paper);
  padding: 8px 10px;
  overflow: hidden;
  width: 320px;
  height: 80px;
  max-width: 100%;
}
a.embed-badge--compact { width: 300px; height: 60px; padding: 6px 8px; }
a.embed-badge--dark {
  background: #1c1a18;
  border-color: #3a3632;
  color: #f5f2ec;
  --eb-ink: #f5f2ec;
  --eb-muted: #a8a29a;
  --eb-link: #f0b4a4;
}
.eb-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.eb-brand { font-size: 11px; color: var(--eb-muted); font-weight: 500; }
.eb-q { font-size: 11px; color: var(--eb-muted); }
.embed-badge--compact .eb-q { display: none; }
.eb-phase {
  display: inline-block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
  background: var(--eb-neutral);
  border-radius: 999px;
  padding: 3px 10px;
  margin: 2px 0 4px;
}
.eb-phase--nino { background: var(--eb-nino); }
.eb-phase--nina { background: var(--eb-nina); }
.embed-badge--compact .eb-phase { font-size: 13px; padding: 2px 8px; margin: 1px 0 2px; }
.eb-meta {
  font-size: 11px;
  color: var(--eb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eb-foot {
  font-size: 10px;
  color: var(--eb-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.eb-foot a, .eb-link { color: var(--eb-link); }
.eb-fail { color: #a33; font-size: 10px; }