body.shell-flux {
  --shell-accent: #c9a050;
  --shell-fg: rgba(238,221,184,0.86);
  --shell-muted: rgba(238,221,184,0.56);
  --shell-panel: rgba(15,13,11,0.86);
  --shell-border: rgba(232,208,160,0.25);
  --shell-tab-bg: rgba(214,200,170,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(201,160,80,0.22), rgba(214,200,170,0.08));
}

body.shell-sand {
  --shell-accent: #c9a050;
  --shell-fg: rgba(238,221,184,0.86);
  --shell-muted: rgba(238,221,184,0.56);
  --shell-panel: rgba(16,13,10,0.82);
  --shell-border: rgba(232,208,160,0.25);
  --shell-tab-bg: rgba(214,190,150,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(201,160,80,0.22), rgba(214,190,150,0.08));
}

body.shell-atrament {
  --shell-accent: #8a4a2a;
  --shell-fg: rgba(58,52,40,0.9);
  --shell-muted: rgba(58,52,40,0.56);
  --shell-panel: rgba(238,230,214,0.92);
  --shell-border: rgba(60,50,38,0.28);
  --shell-tab-bg: rgba(60,50,38,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(138,74,42,0.2), rgba(60,50,38,0.06));
}

body.shell-lumen {
  --shell-accent: #7d8fe0;
  --shell-fg: rgba(210,218,255,0.86);
  --shell-muted: rgba(210,218,255,0.56);
  --shell-panel: rgba(10,11,18,0.86);
  --shell-border: rgba(170,185,230,0.24);
  --shell-tab-bg: rgba(170,185,230,0.07);
  --shell-tab-active: linear-gradient(135deg, rgba(125,143,224,0.28), rgba(170,185,230,0.08));
}

body.shell-babel {
  --shell-accent: #ec2d9b;
  --shell-fg: rgba(29,48,70,0.9);
  --shell-muted: rgba(70,96,122,0.68);
  --shell-panel: rgba(255,255,255,0.84);
  --shell-border: rgba(120,155,190,0.42);
  --shell-tab-bg: rgba(236,45,155,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(236,45,155,0.18), rgba(22,184,207,0.12));
}

body.shell-basilica {
  --shell-accent: #ec1e8e;
  --shell-fg: rgba(16,36,60,0.92);
  --shell-muted: rgba(44,74,104,0.68);
  --shell-panel: rgba(255,255,255,0.84);
  --shell-border: rgba(120,155,190,0.42);
  --shell-tab-bg: rgba(236,30,142,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(236,30,142,0.17), rgba(63,109,242,0.12));
}

body.shell-clockwork {
  --shell-accent: #c8a050;
  --shell-fg: rgba(199,203,210,0.9);
  --shell-muted: rgba(150,154,164,0.6);
  --shell-panel: rgba(20,21,24,0.78);
  --shell-border: rgba(200,160,80,0.28);
  --shell-tab-bg: rgba(200,160,80,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(200,160,80,0.22), rgba(120,124,134,0.1));
}

body.shell-organism {
  --shell-accent: #56d0c0;
  --shell-fg: rgba(196,204,224,0.9);
  --shell-muted: rgba(150,160,190,0.62);
  --shell-panel: rgba(16,20,32,0.78);
  --shell-border: rgba(120,134,170,0.28);
  --shell-tab-bg: rgba(86,208,192,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(86,208,192,0.22), rgba(122,104,220,0.12));
}

body.shell-grand-elemental {
  --shell-accent: #36d0b0;
  --shell-fg: rgba(220,220,226,0.9);
  --shell-muted: rgba(166,166,176,0.62);
  --shell-panel: rgba(18,18,22,0.8);
  --shell-border: rgba(150,150,160,0.26);
  --shell-tab-bg: rgba(54,208,176,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(54,208,176,0.2), rgba(255,79,123,0.12));
}

body.shell-anvil-chorus {
  --shell-accent: #ff6a2f;
  --shell-fg: rgba(244,238,224,0.94);
  --shell-muted: rgba(228,202,176,0.64);
  --shell-panel: rgba(16,11,9,0.84);
  --shell-border: rgba(255,118,54,0.34);
  --shell-tab-bg: rgba(255,108,48,0.07);
  --shell-tab-active: linear-gradient(135deg, rgba(255,106,47,0.24), rgba(43,222,238,0.12));
}

body.shell-mosaic {
  --shell-accent: #ec2d6b;
  --shell-fg: rgba(220,220,226,0.9);
  --shell-muted: rgba(166,166,176,0.62);
  --shell-panel: rgba(18,18,22,0.8);
  --shell-border: rgba(236,45,107,0.28);
  --shell-tab-bg: rgba(236,45,107,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(236,45,107,0.22), rgba(22,184,207,0.12));
}

body.shell-v16-engine {
  --shell-accent: #e7642e;
  --shell-fg: rgba(210,216,224,0.9);
  --shell-muted: rgba(154,162,174,0.62);
  --shell-panel: rgba(18,20,26,0.82);
  --shell-border: rgba(140,150,165,0.26);
  --shell-tab-bg: rgba(231,100,46,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(231,100,46,0.24), rgba(96,130,210,0.12));
}

body.shell-verdant-city {
  --shell-accent: #9abf4f;
  --shell-fg: rgba(238,232,210,0.92);
  --shell-muted: rgba(205,197,170,0.66);
  --shell-panel: rgba(17,16,13,0.84);
  --shell-border: rgba(205,184,118,0.30);
  --shell-tab-bg: rgba(154,191,79,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(154,191,79,0.22), rgba(216,180,106,0.12));
}

body.shell-monoliths {
  --shell-accent: #8a4a2a;
  --shell-fg: rgba(58,52,40,0.9);
  --shell-muted: rgba(58,52,40,0.58);
  --shell-panel: rgba(236,232,225,0.9);
  --shell-border: rgba(42,39,36,0.28);
  --shell-tab-bg: rgba(42,39,36,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(138,74,42,0.2), rgba(42,39,36,0.06));
}

body.shell-still-water {
  --shell-accent: #c86d52;
  --shell-fg: rgba(43,48,62,0.92);
  --shell-muted: rgba(66,75,91,0.64);
  --shell-panel: rgba(248,247,243,0.92);
  --shell-border: rgba(80,76,68,0.24);
  --shell-tab-bg: rgba(43,48,62,0.06);
  --shell-tab-active: linear-gradient(135deg, rgba(200,109,82,0.2), rgba(75,139,166,0.1));
}

body.shell-monoliths .topCtaCluster,
body.shell-monoliths .experienceTabs {
  z-index: 45 !important;
}

/* Echohive's outer observatory bar owns global navigation when scenes are embedded. */
body.echohive-embedded #amplifiedLink,
body.echohive-embedded #consultingLink {
  display: none !important;
}

.experienceTabs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  position: fixed !important;
  top: 82px !important;
  left: 14px !important;
  z-index: 19 !important;
  width: 158px !important;
  margin: 0 !important;
  padding: 7px !important;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shell-panel) 94%, transparent), color-mix(in srgb, var(--shell-panel) 86%, #000 14%)) !important;
  border: 1px solid var(--shell-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,244,214,0.06) !important;
  backdrop-filter: blur(14px) saturate(1.18);
}

.experienceTab {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  color: var(--shell-muted) !important;
  text-decoration: none !important;
  text-align: left !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-sizing: border-box;
  border: 1px solid var(--shell-border) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--shell-panel) 82%, var(--shell-accent) 10%), color-mix(in srgb, var(--shell-panel) 88%, transparent)) !important;
  opacity: 0.86 !important;
  filter: saturate(0.86);
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.experienceTab:not(.active)::after {
  content: "off";
  opacity: 0.5;
  letter-spacing: 0.08em;
}

.experienceTab.active {
  color: var(--shell-fg) !important;
  background:
    var(--shell-tab-active),
    linear-gradient(135deg, color-mix(in srgb, var(--shell-panel) 76%, var(--shell-accent) 18%), color-mix(in srgb, var(--shell-panel) 82%, transparent)) !important;
  border-color: var(--shell-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,244,214,0.08), 0 0 18px color-mix(in srgb, var(--shell-accent), transparent 75%);
  opacity: 1 !important;
  filter: none;
}

.experienceTab.active::after {
  content: "on";
  opacity: 0.7;
  color: var(--shell-accent);
  letter-spacing: 0.08em;
}

.experienceTab:not(.active):hover {
  opacity: 0.86 !important;
  color: var(--shell-fg) !important;
  transform: translateX(1px);
}

.experienceTab[data-nav-icon="music"] {
  justify-content: flex-start;
}

.experienceTab[data-nav-icon="music"]::before {
  content: "\266A";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: color-mix(in srgb, var(--shell-accent), #fff 24%);
  background: color-mix(in srgb, var(--shell-accent), transparent 86%);
  border: 1px solid color-mix(in srgb, var(--shell-accent), transparent 52%);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.96;
  text-shadow: 0 0 10px color-mix(in srgb, var(--shell-accent), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 12px color-mix(in srgb, var(--shell-accent), transparent 78%);
}

.experienceTab[data-nav-icon="music"] .experienceTabLabel {
  flex: 1 1 auto;
  min-width: 0;
}

.experienceTab[data-nav-icon="music"]::after {
  margin-left: auto;
}

.experienceVariantFlyout {
  position: fixed;
  z-index: 28;
  min-width: 146px;
  max-width: 190px;
  padding: 7px;
  color: var(--shell-fg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shell-panel) 92%, transparent), color-mix(in srgb, var(--shell-panel) 84%, #000 16%));
  border: 1px solid var(--shell-border);
  border-radius: 12px;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(1.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-7px) scale(0.985);
  transform-origin: left center;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(.2,.8,.2,1);
}

.experienceVariantFlyout.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.experienceVariantFlyout::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--shell-panel) 88%, #000 12%);
  border-left: 1px solid var(--shell-border);
  border-bottom: 1px solid var(--shell-border);
  transform: translateY(-50%) rotate(45deg);
}

.experienceVariantFlyoutTitle {
  position: relative;
  padding: 4px 8px 7px;
  color: var(--shell-muted);
  font-size: 8px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.experienceVariantFlyoutLink {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 7px 9px;
  color: var(--shell-muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  border: 1px solid color-mix(in srgb, var(--shell-border) 70%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shell-tab-bg) 78%, transparent);
  box-sizing: border-box;
  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.experienceVariantFlyoutLink + .experienceVariantFlyoutLink {
  margin-top: 5px;
}

.experienceVariantFlyoutLink::after {
  content: "open";
  opacity: 0.45;
  color: var(--shell-muted);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.experienceVariantFlyoutLink.active {
  color: var(--shell-fg);
  background:
    var(--shell-tab-active),
    color-mix(in srgb, var(--shell-panel) 74%, var(--shell-accent) 16%);
  border-color: var(--shell-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.experienceVariantFlyoutLink.active::after {
  content: "on";
  color: var(--shell-accent);
  opacity: 0.8;
}

.experienceVariantFlyoutLink:hover,
.experienceVariantFlyoutLink:focus-visible {
  color: var(--shell-fg);
  border-color: var(--shell-border);
  background: color-mix(in srgb, var(--shell-tab-bg) 62%, var(--shell-accent) 12%);
  transform: translateX(1px);
  outline: none;
}

.experienceTab.hasVariants {
  position: relative;
}

.experienceTab.hasVariants::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-right: -2px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.46;
  transform: rotate(45deg);
  order: 2;
}

@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .experienceVariantFlyout {
    display: none;
  }
}

.panelToggle {
  display: none;
}

.mobileVarietyButton {
  display: none;
}

.variantTabs,
.organismVariantTabs {
  position: fixed;
  top: 58px;
  left: 50%;
  z-index: 20;
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)),
    rgba(8,12,18,0.76);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.42),
    0 0 0 1px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

.variantTab,
.organismVariantTab {
  min-width: 86px;
  padding: 7px 10px 6px;
  color: rgba(245,248,252,0.78);
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.13em;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.46);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.variantTab.active,
.organismVariantTab.active {
  color: var(--shell-fg);
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--shell-accent), transparent 70%),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.variantTab:not(.active):hover,
.organismVariantTab:not(.active):hover {
  color: var(--shell-fg);
  background: var(--shell-tab-bg);
}

#amplifiedLink {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  z-index: 20 !important;
  transform: translateX(-50%) !important;
  padding: 10px 15px 9px !important;
  color: rgba(245,224,178,0.9) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  background: linear-gradient(135deg, rgba(58,43,24,0.78), rgba(12,10,8,0.72)) !important;
  border: 1px solid rgba(232,208,160,0.25) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,244,214,0.08) !important;
  backdrop-filter: blur(10px);
  animation: amplifiedPulse 2.8s ease-in-out infinite;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  isolation: isolate;
}

#amplifiedLink:hover {
  transform: translateX(-50%) translateY(-1px) !important;
  border-color: rgba(232,208,160,0.46) !important;
  background: linear-gradient(135deg, rgba(98,70,34,0.86), rgba(19,14,10,0.78)) !important;
}

#amplifiedLink .amplifiedLetters {
  position: relative;
  display: inline-flex;
  gap: 0.02em;
  align-items: center;
  line-height: 1;
}

#amplifiedLink .amplifiedLetters::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -24px;
  width: 18px;
  background: linear-gradient(90deg, transparent, rgba(255,240,185,0.95), transparent);
  filter: blur(0.4px);
  opacity: 0;
  transform: skewX(-18deg);
  animation: amplifiedScan 3.4s cubic-bezier(.45,0,.2,1) infinite;
  pointer-events: none;
}

#amplifiedLink .amplifiedLetters span {
  display: inline-block;
  color: rgba(245,224,178,0.9);
  transform-origin: 50% 70%;
  animation: amplifiedLetter 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 42ms);
}

#amplifiedLink::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 260px;
  padding: 9px 11px;
  color: rgba(241,222,184,0.82);
  text-transform: none;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
  background: rgba(12,10,8,0.86);
  border: 1px solid rgba(232,208,160,0.2);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#amplifiedLink:hover::after,
#amplifiedLink:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes amplifiedPulse {
  0%, 100% {
    box-shadow: 0 8px 28px rgba(0,0,0,0.32), 0 0 0 rgba(232,181,86,0), inset 0 1px 0 rgba(255,244,214,0.08);
  }
  45% {
    box-shadow: 0 8px 28px rgba(0,0,0,0.32), 0 0 24px rgba(232,181,86,0.34), inset 0 1px 0 rgba(255,244,214,0.12);
  }
}

@keyframes amplifiedScan {
  0%, 18% { opacity: 0; transform: translateX(-10px) skewX(-18deg); }
  29% { opacity: 0.82; }
  47% { opacity: 0; transform: translateX(142px) skewX(-18deg); }
  100% { opacity: 0; transform: translateX(142px) skewX(-18deg); }
}

@keyframes amplifiedLetter {
  0%, 20%, 58%, 100% {
    color: rgba(245,224,178,0.9);
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(255,210,120,0);
  }
  31% {
    color: #fff3c6;
    transform: translateY(-1px) scale(1.12);
    text-shadow: 0 0 10px rgba(255,212,128,0.65);
  }
  40% {
    color: #f4b85a;
    transform: translateY(0) scale(1.03);
    text-shadow: 0 0 5px rgba(244,184,90,0.32);
  }
}


.topCtaCluster {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  z-index: 24 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  transform: translateX(-50%) !important;
  pointer-events: auto;
}

.topCtaCluster #amplifiedLink,
.topCtaCluster #consultingLink,
#downloadScenesLink {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
}

#consultingLink {
  position: relative;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  padding: 10px 15px 9px !important;
  color: rgba(229,252,255,0.96) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font: inherit !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background:
    linear-gradient(135deg, rgba(21,214,225,0.22), rgba(115,54,255,0.18)),
    linear-gradient(135deg, rgba(7,20,27,0.88), rgba(8,8,16,0.76)) !important;
  border: 1px solid rgba(116,236,255,0.46) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.36),
    0 0 26px rgba(44,216,255,0.18),
    inset 0 1px 0 rgba(235,252,255,0.14) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
#consultingLink::before {
  content: "";
  position: absolute;
  inset: -45% auto -45% -42%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(210,252,255,0.7), transparent);
  filter: blur(0.5px);
  opacity: 0;
  transform: skewX(-18deg);
  animation: consultingCtaSweep 6.4s cubic-bezier(.45,0,.2,1) infinite;
  pointer-events: none;
}

#consultingLink:hover,
#consultingLink:focus-visible {
  border-color: rgba(160,246,255,0.74) !important;
  background:
    linear-gradient(135deg, rgba(23,235,246,0.31), rgba(133,77,255,0.25)),
    linear-gradient(135deg, rgba(9,27,36,0.92), rgba(10,9,21,0.8)) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,0.4),
    0 0 34px rgba(44,216,255,0.32),
    inset 0 1px 0 rgba(235,252,255,0.18) !important;
  outline: none;
}

#consultingLink::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 280px;
  padding: 9px 11px;
  color: rgba(218,247,255,0.86);
  text-transform: none;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
  background: rgba(7,13,19,0.9);
  border: 1px solid rgba(116,236,255,0.22);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#consultingLink:hover::after,
#consultingLink:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.consultingModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(69,221,255,0.15), transparent 35%),
    rgba(2,4,8,0.68);
  backdrop-filter: blur(13px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.consultingModalBackdrop[hidden] {
  display: none !important;
}

.consultingModalBackdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.consultingModalCard {
  position: relative;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 24px 22px;
  color: rgba(238,249,252,0.94);
  background:
    linear-gradient(145deg, rgba(16,28,38,0.94), rgba(9,9,18,0.93)),
    rgba(8,10,14,0.94);
  border: 1px solid rgba(147,240,255,0.26);
  border-radius: 18px;
  box-shadow:
    0 26px 80px rgba(0,0,0,0.58),
    0 0 58px rgba(44,216,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
  box-sizing: border-box;
  transform: translateY(8px) scale(0.985);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1);
}

.consultingModalCard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,243,255,0.72), rgba(219,197,255,0.48), transparent);
  pointer-events: none;
}

.consultingModalBackdrop.visible .consultingModalCard {
  transform: translateY(0) scale(1);
}

.consultingModalKicker {
  margin-bottom: 9px;
  color: rgba(117,239,255,0.82);
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.consultingModalCard h2 {
  margin: 0 34px 11px 0;
  color: rgba(250,254,255,0.98);
  font: 650 24px/1.1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.consultingModalCard p {
  margin: 0;
  color: rgba(220,234,238,0.76);
  font: 13px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.consultingModalLead {
  max-width: 448px;
}

.consultingModalProof {
  margin: 17px 0 14px;
  padding: 15px 0 14px;
  border-top: 1px solid rgba(147,240,255,0.18);
  border-bottom: 1px solid rgba(147,240,255,0.16);
}

.consultingProofHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.consultingProofBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px 4px;
  color: rgba(138,242,255,0.9);
  background: rgba(112,229,255,0.08);
  border: 1px solid rgba(147,240,255,0.18);
  border-radius: 999px;
  font: 800 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.consultingProofQuote {
  color: rgba(243,252,255,0.93) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.consultingProofMeta {
  margin-top: 8px !important;
  color: rgba(154,231,246,0.78) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.consultingProofMetaLink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(154,231,246,0.34);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.consultingProofMetaLink:hover,
.consultingProofMetaLink:focus-visible {
  color: rgba(217,249,255,0.94);
  border-color: rgba(217,249,255,0.72);
  outline: none;
}

.consultingModalCaseLink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 6px 11px 6px 7px;
  color: rgba(239,252,255,0.94);
  text-decoration: none;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(147,240,255,0.28);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 10px 26px rgba(0,0,0,0.22);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.consultingModalCaseLink {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 5px 10px 5px 6px;
  font: 800 9px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.consultingModalXIcon {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: rgba(4,13,18,0.95);
  background: linear-gradient(135deg, #ffffff, #9af6ff 58%, #d8c3ff);
  border-radius: 50%;
  font: 800 11px/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 18px rgba(83,225,255,0.28);
}

.consultingModalCaseLink:hover,
.consultingModalCaseLink:focus-visible {
  outline: none;
  background: rgba(113,231,255,0.12);
  border-color: rgba(186,248,255,0.48);
  transform: translateY(-1px);
}

.consultingModalActions {
  display: flex;
  gap: 9px;
  margin-top: 17px;
}

.consultingModalPrimary,
.consultingModalSecondary,
.consultingModalClose {
  appearance: none;
  cursor: pointer;
  font: 700 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}

.consultingModalPrimary,
.consultingModalSecondary {
  min-height: 38px;
  padding: 11px 14px 10px;
}

.consultingModalPrimary {
  flex: 1.25;
  color: rgba(2,12,17,0.94);
  background: linear-gradient(135deg, #9af6ff, #d8c3ff);
  border: 1px solid rgba(220,252,255,0.7);
  box-shadow: 0 12px 30px rgba(53,224,255,0.25);
}

.consultingModalSecondary {
  flex: 0.75;
  color: rgba(221,238,242,0.76);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(220,245,255,0.18);
}

.consultingModalPrimary:hover,
.consultingModalPrimary:focus-visible,
.consultingModalSecondary:hover,
.consultingModalSecondary:focus-visible,
.consultingModalClose:hover,
.consultingModalClose:focus-visible {
  outline: none;
  filter: brightness(1.06);
}

.consultingModalClose {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 30px;
  height: 30px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(220,245,255,0.18);
}

.consultingModalClose::before,
.consultingModalClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: rgba(229,248,252,0.8);
  border-radius: 999px;
}

.consultingModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.consultingModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.topCtaCluster #amplifiedLink:hover,
.topCtaCluster #consultingLink:hover {
  transform: translateY(-1px) !important;
}

#downloadScenesLink {
  overflow: hidden;
  padding: 10px 16px 9px !important;
  color: rgba(255,248,222,0.96) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background:
    linear-gradient(135deg, rgba(255,210,92,0.24), rgba(55,37,18,0.84)),
    linear-gradient(135deg, rgba(18,14,9,0.86), rgba(8,7,6,0.76)) !important;
  border: 1px solid rgba(255,223,138,0.46) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.38),
    0 0 26px rgba(238,174,65,0.22),
    inset 0 1px 0 rgba(255,250,223,0.14) !important;
  backdrop-filter: blur(10px);
  animation: downloadCtaGlow 4.8s ease-in-out infinite;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#downloadScenesLink::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -38%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,246,205,0.78), transparent);
  filter: blur(0.5px);
  opacity: 0;
  transform: skewX(-18deg);
  animation: downloadCtaSweep 5.6s cubic-bezier(.45,0,.2,1) infinite;
  pointer-events: none;
}

#downloadScenesLink:hover,
#downloadScenesLink:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(255,232,158,0.72) !important;
  background:
    linear-gradient(135deg, rgba(255,220,110,0.34), rgba(88,57,24,0.9)),
    linear-gradient(135deg, rgba(24,18,10,0.9), rgba(10,8,6,0.78)) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,0.4),
    0 0 34px rgba(238,174,65,0.34),
    inset 0 1px 0 rgba(255,250,223,0.18) !important;
}

#downloadScenesLink::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 284px;
  padding: 9px 11px;
  color: rgba(241,222,184,0.84);
  text-transform: none;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-align: center;
  background: rgba(12,10,8,0.88);
  border: 1px solid rgba(232,208,160,0.22);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#downloadScenesLink:hover::after,
#downloadScenesLink:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes downloadCtaGlow {
  0%, 100% {
    border-color: rgba(255,223,138,0.46);
    box-shadow:
      0 10px 32px rgba(0,0,0,0.38),
      0 0 26px rgba(238,174,65,0.22),
      inset 0 1px 0 rgba(255,250,223,0.14);
  }
  48% {
    border-color: rgba(255,232,158,0.64);
    box-shadow:
      0 10px 32px rgba(0,0,0,0.38),
      0 0 38px rgba(238,174,65,0.36),
      inset 0 1px 0 rgba(255,250,223,0.18);
  }
}

@keyframes downloadCtaSweep {
  0%, 22% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  32% {
    opacity: 0.62;
  }
  48%, 100% {
    opacity: 0;
    transform: translateX(520%) skewX(-18deg);
  }
}

@keyframes consultingCtaSweep {
  0%, 30% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  42% {
    opacity: 0.58;
  }
  56%, 100% {
    opacity: 0;
    transform: translateX(500%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #downloadScenesLink,
  #downloadScenesLink::before,
  #consultingLink::before,
  .consultingModalBackdrop,
  .consultingModalCard {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 700px) {
  #panel,
  #ui {
    top: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(48vh, 420px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  #panel.hidden,
  #ui.hidden,
  body:not(.panel-open) #panel,
  body:not(.panel-open) #ui {
    transform: translateY(calc(100% + 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #panel h1,
  #ui h1 {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }

  #panel .sub,
  #ui .sub {
    font-size: 8.5px !important;
    margin-bottom: 10px !important;
  }

  .experienceTabs {
    top: 82px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(108px, 1fr) !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 6px !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .experienceTab {
    scroll-snap-align: center;
    min-height: 25px;
    padding: 6px 8px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.11em !important;
    white-space: nowrap;
  }

  .ctl {
    margin-bottom: 8px !important;
  }

  .ctl label {
    font-size: 9px !important;
  }

  .ctl select,
  .ctl button {
    min-height: 32px;
    font-size: 10px !important;
  }

  #hud {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
    max-width: calc(100vw - 24px);
  }

  #hint {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    font-size: 9px !important;
  }

  .panelToggle {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 30;
    min-height: 34px;
    padding: 8px 11px;
    color: var(--shell-fg);
    background: var(--shell-panel);
    border: 1px solid var(--shell-border);
    border-radius: 999px;
    font: inherit;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }

  .mobileVarietyButton {
    display: block;
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 30;
    min-height: 34px;
    padding: 8px 12px;
    color: rgba(255,248,222,0.96);
    background:
      linear-gradient(135deg, rgba(255,221,130,0.18), rgba(18,14,10,0.78)),
      rgba(8,12,18,0.74);
    border: 1px solid rgba(255,226,150,0.38);
    border-radius: 999px;
    box-shadow:
      0 10px 28px rgba(0,0,0,0.38),
      0 0 22px rgba(238,174,65,0.16),
      inset 0 1px 0 rgba(255,255,255,0.14);
    font: inherit;
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
  }

  .mobileVarietyButton:active {
    transform: translateY(1px);
  }

  body.panel-open .panelToggle {
    bottom: calc(min(48vh, 420px) + 18px);
  }

  body.panel-open .mobileVarietyButton {
    bottom: calc(min(48vh, 420px) + 18px);
  }

  .variantTabs,
  .organismVariantTabs {
    top: 80px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.has-variant-tabs .experienceTabs {
    top: 124px !important;
  }

  .variantTab,
  .organismVariantTab {
    min-width: 84px;
    padding: 6px 9px 5px;
    font-size: 8px;
    white-space: nowrap;
  }


  .topCtaCluster {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    gap: 5px !important;
    transform: none !important;
  }

  .topCtaCluster #amplifiedLink,
  .topCtaCluster #consultingLink,
  #downloadScenesLink {
    max-width: none !important;
    flex: 0.92 1 0 !important;
    min-height: 29px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 7px 6px !important;
    font-size: 7.2px !important;
    letter-spacing: 0.07em !important;
    text-align: center !important;
  }

  #downloadScenesLink {
    flex: 1.45 1 0 !important;
  }

  #downloadScenesLink::after,
  #consultingLink::after {
    display: none;
  }

  #amplifiedLink {
    top: 10px !important;
    max-width: calc(100vw - 24px);
    padding: 9px 11px 8px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.13em !important;
    white-space: nowrap;
  }

  #amplifiedLink::after {
    display: none;
  }

  .consultingModalBackdrop {
    align-items: end;
    padding: 12px;
  }

  .consultingModalCard {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 21px 18px 17px;
    border-radius: 16px;
  }

  .consultingModalCard h2 {
    margin-right: 24px;
    font-size: 19px;
    line-height: 1.12;
  }

  .consultingModalLead {
    font-size: 12px !important;
    line-height: 1.48 !important;
  }

  .consultingModalProof {
    margin: 13px 0 12px;
    padding: 12px 0 11px;
  }

  .consultingProofHeader {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 9px;
  }

  .consultingProofBadge {
    min-height: 22px;
    padding: 5px 8px 4px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .consultingModalCaseLink {
    min-height: 27px;
    padding: 5px 9px 5px 6px;
    font-size: 8px;
  }

  .consultingProofQuote {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .consultingProofMeta {
    margin-top: 7px !important;
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  .consultingModalActions {
    flex-direction: column;
  }

  .consultingModalPrimary,
  .consultingModalSecondary {
    width: 100%;
  }
}