:root {
  --dde-primary: var(--dd-accent, #fe5900);
  --dde-primary-dark: var(--dd-accent-dark, #c84700);
  --dde-highlight: #ffa800;
  --dde-ink: var(--dd-ink, #1c1c1c);
  --dde-muted: var(--dd-muted, #5f6368);
  --dde-surface: var(--dd-surface, #f8f8f8);
  --dde-line: var(--dd-line, #d1d1d1);
}

.dd-engagement { display: grid; gap: 22px; margin: 36px 0 44px; padding: 28px; border: 1px solid var(--dde-line); border-radius: 24px; background: var(--dde-surface); }
.dd-engagement__eyebrow { display: block; margin-bottom: 4px; color: var(--dde-muted); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dd-reactions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dd-reactions strong, .dd-share__heading strong { display: block; color: var(--dde-ink); font-size: 1.05rem; }
.dd-reactions__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.dd-reaction-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--dde-line); border-radius: 999px; color: var(--dde-ink); background: #fff; font-size: .86rem; font-weight: 750; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.dd-reaction-button:hover { transform: translateY(-1px); border-color: var(--dde-primary); }
.dd-reaction-button.is-selected { color: var(--dde-primary-dark); border-color: color-mix(in srgb, var(--dde-primary) 45%, var(--dde-line)); background: color-mix(in srgb, var(--dde-primary) 10%, #fff); }
.dd-reaction-button b { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--dde-surface); font-size: .72rem; text-align: center; }
.dd-reactions.is-loading { opacity: .65; }
.dd-reaction-button:disabled { cursor: wait; }
.dd-share { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--dde-line); }
.dd-engagement--share-only .dd-share { padding-top: 0; border-top: 0; }
.dd-share__heading { max-width: 650px; }
.dd-share__buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.dd-share__buttons a, .dd-share__buttons button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid var(--dde-line); border-radius: 999px; color: var(--dde-ink); background: #fff; box-shadow: none; font: inherit; font-size: .82rem; font-weight: 780; line-height: 1; text-decoration: none; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.dd-share__buttons a:hover, .dd-share__buttons button:hover { color: var(--dde-primary-dark); border-color: var(--dde-primary); background: color-mix(in srgb, var(--dde-primary) 6%, #fff); transform: translateY(-1px); }
.dd-share__buttons a:focus-visible, .dd-share__buttons button:focus-visible, .dd-reaction-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--dde-primary) 45%, transparent); outline-offset: 2px; }
.dd-share__buttons svg { width: 18px; height: 18px; flex: 0 0 auto; }
.dd-share-status { min-height: 1.2em; margin: 0; color: var(--dde-muted); font-size: .78rem; }

@media (max-width: 700px) {
  .dd-engagement { padding: 22px 18px; border-radius: 20px; }
  .dd-reactions { align-items: flex-start; flex-direction: column; }
  .dd-reactions__buttons, .dd-reaction-button { width: 100%; }
  .dd-reaction-button { justify-content: center; }
  .dd-share__buttons a, .dd-share__buttons button { flex: 1 1 calc(50% - 9px); }
}

@media (max-width: 420px) {
  .dd-share__buttons a, .dd-share__buttons button { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-reaction-button, .dd-share__buttons a, .dd-share__buttons button { transition: none; }
  .dd-reaction-button:hover, .dd-share__buttons a:hover, .dd-share__buttons button:hover { transform: none; }
}