.db-announce-overlay {
  --db-fg: #f8f8fa;
  --db-muted: #a4a4ad;
  --db-panel: #2b2b2e;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 28px;
  box-sizing: border-box;
  background: rgb(0 0 0 / 66%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--db-fg);
  color-scheme: dark;
  animation: db-veil-in 160ms ease-out;
}
.db-announce-overlay *, .db-announce-overlay *::before, .db-announce-overlay *::after { box-sizing: border-box; }
.db-announce {
  width: min(760px, 100%);
  max-height: calc(100dvh - 56px);
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 5%);
  border-radius: 24px;
  background: var(--db-panel);
  box-shadow: 0 28px 120px rgb(0 0 0 / 48%);
  outline: none;
  animation: db-modal-in 220ms cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain;
}
.db-announce-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2.23;
  overflow: hidden;
  background: radial-gradient(ellipse at 18% 18%, #b9d9ff 0, transparent 48%), radial-gradient(ellipse at 88% 85%, #cbaaff 0, transparent 45%), linear-gradient(125deg, #096bf4 5%, #3447e8 46%, #764aff 100%);
}
.db-announce-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.db-announce-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 23%);
  border-radius: 10px;
  background: rgb(20 24 71 / 13%);
  color: #fff;
  font: 300 30px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  transition: background 120ms;
}
.db-announce-close:hover { background: rgb(20 24 71 / 35%); }
.db-announce-close:focus-visible, .db-announce-button:focus-visible { outline: 3px solid #5b9dff; outline-offset: 3px; }
.db-announce-content { padding: 54px 42px 56px; text-align: center; }
.db-announce-title { margin: 0; color: var(--db-fg); font-size: clamp(23px, 3vw, 32px); font-weight: 620; letter-spacing: -.8px; line-height: 1.25; overflow-wrap: anywhere; }
.db-announce-body { max-width: 640px; margin: 22px auto 0; color: var(--db-muted); font-size: 19px; line-height: 1.65; font-weight: 400; letter-spacing: -.2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.db-announce-actions { display: flex; justify-content: center; align-items: stretch; gap: 16px; margin-top: 40px; }
.db-announce-button { flex: 1 1 auto; min-width: 0; padding: 16px 22px; border: 0; border-radius: 999px; font: 500 17px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; transition: background 150ms, transform 150ms; overflow-wrap: anywhere; }
.db-announce-button:hover { transform: translateY(-1px); }
.db-announce-button-secondary { background: #39393c; color: #f3f3f6; }
.db-announce-button-secondary:hover { background: #444449; }
.db-announce-button-primary { background: #fbfbfd; color: #252528; }
.db-announce-button-primary:hover { background: #e6e5ff; }
.db-announce-button:disabled { opacity: .58; cursor: wait; transform: none; }
.db-announce-error { margin: 18px 0 0; color: #ffb2a9; font-size: 14px; line-height: 1.6; }
.db-announce-error[hidden] { display: none; }
.db-announce-preview { position: relative; z-index: 0; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; width: 100%; }
.db-announce-preview .db-announce { max-height: none; width: 100%; animation: none; box-shadow: 0 20px 50px rgb(0 0 0 / 22%); }
.db-announce-preview .db-announce-content { padding: 34px 26px 36px; }
.db-announce-preview .db-announce-title { font-size: clamp(21px, 2.1vw, 28px); }
.db-announce-preview .db-announce-body { font-size: 15px; margin-top: 16px; }
.db-announce-preview .db-announce-actions { margin-top: 28px; gap: 10px; }
.db-announce-preview .db-announce-button { padding: 12px 16px; font-size: 14px; }
@keyframes db-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes db-modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .db-announce-overlay { padding: 16px; }
  .db-announce { border-radius: 18px; max-height: calc(100dvh - 32px); }
  .db-announce-content { padding: 30px 22px 32px; }
  .db-announce-art { aspect-ratio: 1.9; }
  .db-announce-body { font-size: 16px; margin-top: 16px; }
  .db-announce-actions { flex-direction: column-reverse; margin-top: 28px; gap: 10px; }
  .db-announce-button { font-size: 15px; padding: 14px 18px; }
  .db-announce-close { top: 14px; right: 14px; }
  .db-announce-preview { padding: 0; }
  .db-announce-preview .db-announce { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .db-announce-overlay, .db-announce { animation: none; }
  .db-announce-button, .db-announce-close { transition: none; }
}