.bk-puns { margin-block: 1.5rem; color: var(--star-blue); }
.bk-pun-card { padding: 1.25rem 1.5rem; border: 1.5px solid var(--border, #ddd); border-radius: 6px; margin: 0 0 .875rem; background: var(--background, white); }
.bk-pun-text { font: 450 1rem/1.55 ui-sans-serif, system-ui, sans-serif; overflow-wrap: anywhere; }
.bk-pun-text p { margin: 0 0 .75rem; }
.bk-pun-text > :last-child { margin-bottom: 0; }
.bk-pun-card time { display: block; margin-top: 1rem; color: var(--muted, #666); font: .6875rem/1.4 ui-monospace, monospace; }
.bk-pun-text a { text-decoration: underline; text-underline-offset: .15em; }
.bk-puns-editor-preview { max-height: 34rem; overflow-y: auto; padding: 4px; }
.bk-pun-edit { display: inline-block; font: .75rem/1.5 ui-sans-serif, system-ui, sans-serif; margin-top: .5rem; }
.bk-puns a:focus-visible, .bk-puns select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bk-pun-footer { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; color: var(--muted, #666); font-size: .75rem; }
.bk-pun-footer time { margin-top: 0; font: .75rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.bk-pun-star { display: flex; align-items: center; gap: .25rem; border: 0; padding: 0; text-align: left; background: transparent; color: var(--muted, #666); font: 600 .75rem/1 ui-sans-serif, system-ui, sans-serif; opacity: 1; }
.bk-pun-arrange { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; font-size: .75rem; }
.bk-pun-arrange button { text-decoration: underline; cursor: pointer; }
.bk-pun-arrange button:disabled { opacity: .35; cursor: default; }

.bk-pun-comment { margin: .875rem 0 0; color: var(--muted, #666); font: .875rem/1.5 ui-sans-serif, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }


.bk-pun-star-hint {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: .75rem 0 0;
  padding: .5rem 1rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-hover, #f7f7f7) 94%, #000);
  color: var(--muted, #666);
  font: .75rem/1.45 ui-sans-serif, system-ui, sans-serif;
}
.bk-pun-star-hint::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 18px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: rotate(45deg);
}

.bk-pun-entry { margin-bottom: 1.25rem; }
.bk-pun-entry > .bk-pun-card { margin-bottom: 0; }
.bk-pun-entry > .bk-pun-comment { margin: .625rem 0 0; font-size: .8125rem; }

.bk-pun-star { --star-blue: #3400ff; cursor: pointer; min-height: 28px; position: relative; isolation: isolate; }
:root.dark .bk-pun-star { --star-blue: #a291ff; }
.bk-pun-star::before { content: ""; position: absolute; z-index: -1; left: 9px; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: color-mix(in srgb, var(--star-blue) 12%, transparent); opacity: 0; }
.bk-pun-star:focus-visible::before { opacity: 1; }
.bk-pun-star [data-reaction-count] { min-width: 1ch; font-variant-numeric: tabular-nums; }
.bk-pun-star:disabled { cursor: wait; }
.bk-pun-star[aria-pressed="true"] { color: var(--star-blue); }
.bk-pun-icon-filled { display: none; }
.bk-pun-star[aria-pressed="true"] .bk-pun-icon-outline { display: none; }
.bk-pun-star[aria-pressed="true"] .bk-pun-icon-filled { display: block; }
@media (hover: hover) and (pointer: fine) {
  .bk-pun-star:hover:not(:disabled)::before { opacity: 1; }
  .bk-pun-star:hover:not(:disabled) { color: var(--star-blue); }
}
.bk-pun-star:focus-visible, .bk-pun-reaction-error button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.bk-pun-reaction-error { margin: .625rem 0; font: .8125rem/1.5 ui-sans-serif, system-ui, sans-serif; color: var(--muted, #666); }
.bk-pun-reaction-error button { cursor: pointer; font-weight: 600; text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .bk-pun-star::before { transition: opacity .15s ease; }
}

@media (min-width: 640px) {
  .bk-pun-card { padding-inline: 1.75rem; }
}