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-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-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;
}

.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);
}

.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,
#downloadScenesLink {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
}

.topCtaCluster #amplifiedLink: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);
  }
}

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

@media (max-width: 700px) {
  #panel {
    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 {
    transform: translateY(calc(100% + 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

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

  #panel .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.shell-organism .experienceTabs,
  body.shell-field-coil .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,
  #downloadScenesLink {
    max-width: none !important;
    flex: 1 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.4px !important;
    letter-spacing: 0.075em !important;
    text-align: center !important;
  }

  #downloadScenesLink::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;
  }
}