:host {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font: 500 0.95rem/1 system-ui, sans-serif;
  color: var(--ink, #1d1d29);
}
.stars { display: inline-flex; gap: 0.15rem; }
button {
  all: unset;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  color: #d4d4dc;
  transition: color 120ms ease, transform 120ms ease;
}
button:focus-visible { outline: 2px solid #f5a524; outline-offset: 2px; border-radius: 4px; }
button.on { color: #f5a524; }
button.preview { color: #f8c96b; }
:host(:not([readonly])) button:hover { transform: scale(1.2); }
:host([readonly]) button { cursor: default; }
output {
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b6b7b);
}