html.anyzone-demo-incompatible #anyzone-front-stage,
html.anyzone-demo-incompatible #anyzone-front-toolbar,
html.anyzone-demo-incompatible #anyzone-css-editor,
html.anyzone-demo-incompatible #anyzone-css-theme-drawer {
  display: none !important;
}

body.anyzone-viewport-demo-page::before {
  content: "";
  position: fixed;
  inset: auto -120px -220px auto;
  width: 420px;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.13), rgba(56, 189, 248, 0) 65%);
}

/*
 * The Demo plugin owns this control surface. These rules intentionally reset
 * common theme/header styles so the shortcode remains stable in the real page,
 * the Anyzone preview iframe, and the Demo Control Room.
 */
.anyzone-demo-nav[data-anyzone-demo-nav],
html body.anyzone-viewport-demo-nav-page #header .anyzone-demo-nav[data-anyzone-demo-nav],
html body.anyzone-viewport-demo-nav-page .header-wrapper .anyzone-demo-nav[data-anyzone-demo-nav],
html body.anyzone-viewport-demo-nav-page .header .anyzone-demo-nav[data-anyzone-demo-nav],
html body.anyzone-viewport-demo-nav-page .html .anyzone-demo-nav[data-anyzone-demo-nav],
html body.anyzone-preview-document #header .anyzone-demo-nav[data-anyzone-demo-nav] {
  --az-demo-nav-bg: rgba(12, 16, 22, 0.24);
  --az-demo-nav-bg-hover: rgba(255, 255, 255, 0.18);
  --az-demo-nav-border: rgba(255, 255, 255, 0.1);
  --az-demo-nav-border-hover: rgba(255, 255, 255, 0.18);
  --az-demo-nav-text: rgba(255, 255, 255, 0.76);
  --az-demo-nav-text-hover: rgba(255, 255, 255, 0.98);
  --az-demo-nav-primary-bg: rgba(255, 255, 255, 0.13);
  --az-demo-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.14);
  box-sizing: border-box !important;
  display: inline-flex !important;
  float: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 0 14px !important;
  padding: 4px !important;
  overflow: visible !important;
  border: 1px solid var(--az-demo-nav-border) !important;
  border-radius: 999px !important;
  background: var(--az-demo-nav-bg) !important;
  box-shadow: var(--az-demo-nav-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  color: var(--az-demo-nav-text) !important;
  font: inherit !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-indent: 0 !important;
  text-transform: none !important;
  vertical-align: middle !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  inset: auto !important;
  z-index: 60 !important;
  transform: none !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav],
.anyzone-demo-nav[data-anyzone-demo-nav] *,
.anyzone-demo-nav[data-anyzone-demo-nav] *::before,
.anyzone-demo-nav[data-anyzone-demo-nav] *::after {
  box-sizing: border-box !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link,
.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle,
html body.anyzone-viewport-demo-nav-page #header .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link,
html body.anyzone-viewport-demo-nav-page #header .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle,
html body.anyzone-preview-document #header .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link,
html body.anyzone-preview-document #header .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  float: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--az-demo-nav-text) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  cursor: pointer !important;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link::before,
.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link::after {
  content: none !important;
  display: none !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link:hover,
.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link:focus-visible,
.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle:hover,
.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle:focus-visible {
  color: var(--az-demo-nav-text-hover) !important;
  background: var(--az-demo-nav-bg-hover) !important;
  border-color: var(--az-demo-nav-border-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  transform: translateY(-1px) !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link--open {
  color: rgba(255, 255, 255, 0.95) !important;
  background: var(--az-demo-nav-primary-bg) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link--css {
  color: rgba(235, 244, 255, 0.88) !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link--reset {
  color: rgba(255, 255, 255, 0.54) !important;
  opacity: 1 !important;
}

.anyzone-demo-nav--pills[data-anyzone-demo-nav] .anyzone-demo-nav__link {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.anyzone-demo-nav--dropdown[data-anyzone-demo-nav] {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.anyzone-demo-nav--dropdown[data-anyzone-demo-nav] .anyzone-demo-nav__toggle {
  border-color: var(--az-demo-nav-border) !important;
  background: var(--az-demo-nav-bg) !important;
  box-shadow: var(--az-demo-nav-shadow) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 7px !important;
  border: 0 solid transparent !important;
  border-right-width: 4px !important;
  border-left-width: 4px !important;
  border-top: 5px solid currentColor !important;
  opacity: 0.75 !important;
}

.anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__menu {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(12, 16, 22, 0.82) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 100000 !important;
  transform: translateY(-4px) !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}

.anyzone-demo-nav.is-open[data-anyzone-demo-nav] .anyzone-demo-nav__menu,
.anyzone-demo-nav--dropdown[data-anyzone-demo-nav]:hover .anyzone-demo-nav__menu,
.anyzone-demo-nav--dropdown[data-anyzone-demo-nav]:focus-within .anyzone-demo-nav__menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.anyzone-demo-nav--dropdown[data-anyzone-demo-nav] .anyzone-demo-nav__menu .anyzone-demo-nav__link {
  justify-content: flex-start !important;
  width: 100% !important;
}

/* Compatibility gating applies only when the outer demo runtime has measured the browser. */
html.anyzone-demo-compat-ready.anyzone-demo-incompatible body.anyzone-viewport-demo-nav-page #header .anyzone-demo-nav[data-anyzone-demo-nav][data-incompatible="hide"],
html.anyzone-demo-compat-ready.anyzone-demo-incompatible body.anyzone-viewport-demo-nav-page .header-wrapper .anyzone-demo-nav[data-anyzone-demo-nav][data-incompatible="hide"],
html.anyzone-demo-compat-ready.anyzone-demo-incompatible .anyzone-demo-nav[data-anyzone-demo-nav][data-incompatible="hide"] {
  display: none !important;
}

html.anyzone-demo-compat-ready.anyzone-demo-incompatible .anyzone-demo-nav[data-anyzone-demo-nav][data-incompatible="message"] .anyzone-demo-nav__link {
  opacity: 0.72 !important;
}

.anyzone-demo-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100002;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(20, 24, 30, 0.82);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 680px) {
  .anyzone-demo-nav[data-anyzone-demo-nav],
  html body.anyzone-viewport-demo-nav-page #header .anyzone-demo-nav[data-anyzone-demo-nav] {
    gap: 3px !important;
    margin-left: 8px !important;
    padding: 3px !important;
  }

  .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__link,
  .anyzone-demo-nav[data-anyzone-demo-nav] .anyzone-demo-nav__toggle {
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.07em !important;
  }
}