[data-site-notice][hidden], .site-notice-ok[hidden] { display: none !important; }
.site-notice-ok {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 60px; min-height: 44px; margin: 10px 0 0 12px;
  padding: 8px 16px; border: 2px solid currentColor; border-radius: 8px;
  background: transparent; color: inherit; font: 700 16px/1.25 system-ui, sans-serif;
  letter-spacing: normal; text-transform: none; cursor: pointer; touch-action: manipulation;
}
.site-notice-ok:hover { text-decoration: underline; }
.site-notice-ok:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.flash-stack > .site-notice-ok { align-self: flex-end; background: #14241b; color: #ddffe6; }
.flash-screen > .site-notice-ok { position: absolute; right: 24px; bottom: 24px; color: #ddffe6; }

.flash-stack[data-site-notice], .flash-screen[data-site-notice] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; overflow-y: auto; box-sizing: border-box;
}
.flash-stack[data-site-notice] .flash, .flash-screen[data-site-notice] .flash-screen-card {
  box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere;
}
.flash-stack[data-site-notice] > .site-notice-ok, .flash-screen[data-site-notice] > .site-notice-ok {
  position: static; margin: 0; align-self: center; background: #14241b; color: #ddffe6;
}