.website-release-notice {
  position: fixed;
  inset: auto 0 0;
  z-index: 4500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  min-height: 60px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #202426;
  color: #fff;
  border-top: 1px solid #41494c;
  box-shadow: 0 -3px 14px #0002;
  font: 14px/1.4 "Segoe UI", Arial, sans-serif;
}
.website-release-notice p { margin: 0; color: #fff; }
.website-release-actions { display: flex; gap: 8px; }
.website-release-notice button {
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid #e0e7e9;
  border-radius: 6px;
  background: #fff;
  color: #172b35;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.website-release-notice [data-release-later] { background: transparent; color: #fff; border-color: #819097; }
.website-release-notice button:hover { filter: brightness(.92); }
.website-release-notice button:focus-visible { outline: 3px solid #7fd9f0; outline-offset: 3px; }
.website-release-notice small { flex-basis: 100%; text-align: center; color: #ffe0a0; }
body.has-release-notice { padding-bottom: calc(var(--release-notice-height, 120px) + 16px); }
html:has(.has-release-notice) { scroll-padding-bottom: calc(var(--release-notice-height, 120px) + 24px); }
@media (max-width: 480px) {
  .website-release-notice { gap: 6px 12px; padding-inline: 12px; font-size: 13px; }
  .website-release-notice button { min-height: 44px; padding-inline: 14px; }
}
@media print { .website-release-notice { display: none; } body.has-release-notice { padding-bottom: 0; } }