/* One transparent renderer spans the complete hero so the two CTA positions
   and the six feature surfaces share the same Aqua material and frame clock.
   A second small renderer follows the normal-flow/floating nav shell. */
.aqua-site-overlay {
  position: absolute;
  inset: -160px;
  /* The hardware pair is z-index 1, so the motherboard crosses above the
     feature gels. Copy remains interactive in its own stacking contexts. */
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}

.aqua-site-overlay.aqua-ready {
  visibility: visible;
}

.aqua-nav-overlay {
  position: absolute;
  /* Leave room for the imported projection and shadow outside the 78px bar. */
  inset: -80px;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
}

.aqua-nav-overlay.aqua-ready {
  visibility: visible;
}

body[data-gel-nav] .site-nav-inner {
  position: relative;
  z-index: 1;
}

.aqua-canvas,
.aqua-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.aqua-visible-label,
.aqua-text-shadow {
  position: absolute;
  z-index: 2;
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  white-space: pre;
  line-height: 1.08;
  font-synthesis: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.aqua-text-shadow {
  z-index: 1;
}

.aqua-text-extrusion-layer {
  z-index: 1;
  pointer-events: none;
}

.aqua-visible-label[hidden],
.aqua-text-shadow[hidden] {
  display: none !important;
}

/* The HTML remains the accessible hit target and CSS fallback. Once WebGL is
   live, only its paint is hidden; layout, focus and click behaviour stay put. */
body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta],
body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta]:hover,
body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta]:active,
body[data-aqua-ready][data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .sprout-btn.is-gel.gel-feature,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav],
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav]:hover,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav]:focus-visible,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav]:active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  isolation: auto;
}

body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta]::before,
body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta]::after,
body[data-aqua-ready][data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .gel-feature::before,
body[data-aqua-ready][data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .gel-feature::after,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav]::before,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav]::after {
  content: none !important;
}

body[data-aqua-ready][data-gel-cta]
  :has(> .aqua-site-overlay) .sprout-btn.is-gel[data-sprout-cta] > span,
body[data-aqua-ready][data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .gel-feature > span,
body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav] > span {
  opacity: 0 !important;
}

body[data-aqua-nav-ready][data-gel-nav]
  .site-nav-menu > li > a[data-aqua-nav] {
  color: transparent !important;
  text-shadow: none !important;
}

/* Positive values move the label down. These rules keep the HTML fallback in
   step with the renderer, which applies the same offset in screen pixels. */
body[data-gel-cta] .sprout-btn.is-gel[data-sprout-cta] > span,
body[data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .gel-feature > .gel-feature-label,
body[data-gel-nav] .site-nav-menu > li > a > .gel-nav-label {
  position: relative;
  top: var(--aqua-gel-text-y, 0px);
}

body[data-gel-feature-pills]
  .story-sticky .gel-feature-cloud .gel-feature > .gel-feature-shadow,
body[data-gel-nav] .site-nav-menu > li > a > .gel-nav-shadow {
  transform: translateY(var(--aqua-gel-text-y, 0px));
}

.type-picker-aqua-properties {
  grid-template-columns: 1fr;
}

.type-picker-aqua-properties textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.type-picker-aqua-properties textarea[aria-invalid='true'] {
  border-color: #c93048;
  outline-color: #c93048;
}

.type-picker-aqua-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.type-picker-aqua-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  cursor: pointer;
}

.type-picker-aqua-actions [data-aqua-properties-apply] {
  border-color: #2257ff;
  background: #2257ff;
  color: #fff;
}

.type-picker-aqua-feedback {
  min-height: 1.4em;
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
}

body.dark-mode .type-picker-aqua-properties textarea,
body.dark-mode .type-picker-aqua-actions button {
  border-color: rgba(255, 255, 255, 0.2);
  background: #181818;
  color: #f3f3f3;
}

body.dark-mode .type-picker-aqua-actions [data-aqua-properties-apply] {
  border-color: #5171ff;
  background: #5171ff;
}

body.dark-mode .type-picker-aqua-feedback {
  color: rgba(255, 255, 255, 0.64);
}

.aqua-demo-properties {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2000;
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 10px 14px;
  border: 1px solid #8885;
  border-radius: 16px;
  background: #fffffff0;
  color: #202124;
  box-shadow: 0 3px 20px #0002;
  font: 13px/1.45 system-ui, sans-serif;
  backdrop-filter: blur(12px);
}

.aqua-demo-properties summary {
  font-weight: 600;
  cursor: pointer;
}

.aqua-demo-properties p {
  margin: 10px 0;
}

.aqua-demo-properties textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  padding: 10px;
  border: 1px solid #bcc5d7;
  border-radius: 9px;
  font: 11px/1.45 ui-monospace, monospace;
}

.aqua-demo-properties > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.aqua-demo-properties button {
  padding: 8px 11px;
  border: 1px solid #cbd0dc;
  border-radius: 8px;
  background: #fff;
  color: #232734;
  font: inherit;
  cursor: pointer;
}

.aqua-demo-properties [data-aqua-properties-apply] {
  border-color: #2257ff;
  background: #2257ff;
  color: #fff;
}

@media (max-width: 640px) {
  .aqua-site-overlay {
    inset: -96px;
  }
}