.translation-notice {
  margin: auto;
  inline-size: min(32rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
  color: var(--texto, #f5f1eb);
  background: var(--panel, #292424);
  border: 1px solid #70615d;
  border-radius: 12px;
  padding: clamp(1rem, 4vw, 1.75rem);
}
.translation-notice::backdrop { background: rgb(0 0 0 / .72); }
.translation-notice-head { display: flex; align-items: flex-start; gap: 1rem; margin-block-end: 1rem; }
.translation-notice h2 { flex: 1; min-inline-size: 0; font: 1.4rem/1.35 Georgia, serif; overflow-wrap: break-word; }
.translation-notice button {
  flex: 0 0 44px; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center; border: 1px solid #8c7971;
  border-radius: 50%; color: inherit; background: transparent;
  font: 1.75rem/1 Arial, sans-serif; cursor: pointer;
}
.translation-notice button:focus-visible { outline: 2px solid #f5f1eb; outline-offset: 3px; }
.translation-notice p { line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) {
  .translation-notice[open] { animation: translation-notice-in 150ms cubic-bezier(0,0,.38,.9); }
  @keyframes translation-notice-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}