:root {
  --bg: #051017;
  --bg2: #081620;
  --panel: rgba(9, 22, 31, .76);
  --panel2: rgba(255, 255, 255, .035);
  --text: #f5fbff;
  --muted: #93a7b2;
  --line: rgba(255, 255, 255, .095);

  --cyan: #16c5d5;
  --cyan2: #78f0f2;
  --blue: #204f8c;
  --blue2: #3479c7;
  --orange: #ff7d13;
  --orange2: #ffae55;
  --youtube: #ff2638;

  --max: 1180px;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
  background: var(--bg);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 10%, rgba(22, 197, 213, .055), transparent 28%),
    radial-gradient(circle at 12% 68%, rgba(255, 125, 19, .035), transparent 30%),
    linear-gradient(180deg, #051017 0%, #07131c 52%, #040c12 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Zoom desktop out slightly more than Version E. */
@media (min-width: 1000px) {
  body {
    zoom: .86;
  }
}

a {
  color: inherit;
}

button {
  font: inherit;
}

::selection {
  color: #021014;
  background: var(--cyan);
}

/* ----------------------------------------------------------
   PARTICLES — only background loop kept outside logo motion
   ---------------------------------------------------------- */

.particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  bottom: -20px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px currentColor;
  opacity: .20;
  animation: particleFloat linear infinite;
}

.particle.orange {
  color: var(--orange);
  background: currentColor;
}

.particle.blue {
  color: var(--blue2);
  background: currentColor;
}

/* ----------------------------------------------------------
   TOP NAV
   ---------------------------------------------------------- */

.topbar {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 74px;
  padding: 0 max(22px, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
  background: rgba(4, 12, 18, .82);
  backdrop-filter: blur(16px) saturate(125%);
  transition: height .3s ease, background .3s ease;
}

.topbar.scrolled {
  height: 66px;
  background: rgba(4, 12, 18, .94);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-weight: 850;
  letter-spacing: -.02em;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.brand:hover {
  transform: translateY(-2px);
}

.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.brand strong {
  color: var(--cyan);
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-view-button {
  position: relative;
  border: 0;
  background: transparent;
  color: #b7c5cd;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.nav-view-button:hover,
.nav-view-button.active {
  color: white;
  transform: translateY(-1px);
}

.nav-view-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -9px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
  transition: right .3s cubic-bezier(.16, 1, .3, 1);
}

.nav-view-button:hover::after,
.nav-view-button.active::after {
  right: 0;
}

.nav-youtube,
.nav-discord {
  padding: 10px 15px;
  border-radius: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 780;
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.nav-youtube {
  color: #ff6875;
  border: 1px solid rgba(255, 38, 56, .42);
  background: rgba(255, 38, 56, .085);
}

.nav-youtube:hover {
  color: white;
  transform: translateY(-2px);
  border-color: rgba(255, 38, 56, .76);
  background: rgba(255, 38, 56, .18);
  box-shadow: 0 8px 26px rgba(255, 38, 56, .12);
}

.nav-discord {
  color: #dce8ff;
  border: 1px solid rgba(52, 121, 199, .45);
  background: rgba(52, 121, 199, .09);
}

.nav-discord:hover {
  transform: translateY(-2px);
  border-color: rgba(52, 121, 199, .78);
  background: rgba(52, 121, 199, .18);
  box-shadow: 0 8px 26px rgba(52, 121, 199, .12);
}

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  border-radius: 100px;
  background: white;
}

/* ----------------------------------------------------------
   PAGE VIEW ROUTING
   ---------------------------------------------------------- */

.page-view {
  display: none;
}

.page-view.active-view {
  display: block;
}

.home-view.active-view {
  display: grid;
}

/* ----------------------------------------------------------
   HOME HERO
   ---------------------------------------------------------- */

.hero {
  width: min(var(--max), calc(100% - 44px));
  min-height: 790px;
  margin: 0 auto;
  padding: 135px 0 72px;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 54px;
}

.hero-copy {
  min-width: 0;
}

.eyebrow,
.section-kicker,
.micro-label {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(22, 197, 213, .18);
  border-radius: 999px;
  background: rgba(22, 197, 213, .045);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(22, 197, 213, .75);
}

.eyebrow-line {
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.hero-title {
  margin-top: 20px;
  max-width: 760px;
  font-size: clamp(64px, 8.1vw, 116px);
  line-height: .84;
  letter-spacing: -.072em;
  text-transform: uppercase;
}

.hero-title span {
  color: transparent;
  -webkit-text-stroke: 2px var(--cyan);
  text-shadow: 0 0 24px rgba(22, 197, 213, .10);
}

.hero-lead {
  max-width: 660px;
  margin-top: 28px;
  color: #a8b7c0;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.72;
}

.hero-lead strong {
  color: white;
}

.subscriber-pill {
  width: fit-content;
  margin-top: 24px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}

.subscriber-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 125, 19, .30);
}

.youtube-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #111;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  font-size: 13px;
}

.subscriber-pill > div {
  display: flex;
  flex-direction: column;
}

.subscriber-pill strong {
  font-size: 21px;
  letter-spacing: -.04em;
}

.subscriber-pill span:last-child {
  color: #758a96;
  font-size: 11px;
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  min-height: 49px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 820;
  transition:
    transform .32s cubic-bezier(.16, 1, .3, 1),
    filter .3s ease,
    box-shadow .3s ease;
}

.button:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
}

.button-primary {
  color: #031015;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  box-shadow: 0 10px 30px rgba(22, 197, 213, .14);
}

.button-primary:hover {
  box-shadow: 0 14px 34px rgba(22, 197, 213, .22);
}

.button-secondary {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 10px 30px rgba(32, 79, 140, .17);
}

.button-secondary:hover {
  box-shadow: 0 14px 34px rgba(52, 121, 199, .25);
}

.button-icon {
  font-size: 11px;
}

.domain-line {
  margin-top: 20px;
  color: #607480;
  font-size: 12px;
  letter-spacing: .08em;
}

/* ----------------------------------------------------------
   LOGO SPIN + ORBITING TEXT EFFECTS
   ---------------------------------------------------------- */

.hero-art {
  position: relative;
  min-height: 490px;
  display: grid;
  place-items: center;
}

.logo-stage {
  position: relative;
  width: min(470px, 90vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.logo-stage::before {
  content: "";
  position: absolute;
  inset: 18%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 25deg, var(--cyan), var(--blue), var(--orange), var(--cyan));
  filter: blur(52px);
  opacity: .16;
  animation: spin 28s linear infinite;
}

.logo-safe-zone {
  position: absolute;
  inset: 19%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 4;
}

.logo-safe-zone img {
  position: relative;
  z-index: 5;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .32));
}

.logo-ring,
.swirl-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.logo-ring {
  inset: -8%;
}

.ring-one {
  border: 1px solid rgba(255, 255, 255, .045);
  border-top-color: rgba(22, 197, 213, .33);
  border-right-color: rgba(255, 125, 19, .22);
  animation: spin 22s linear infinite;
}

.ring-two {
  inset: -1%;
  border: 1px solid rgba(255, 255, 255, .04);
  border-left-color: rgba(52, 121, 199, .30);
  border-bottom-color: rgba(22, 197, 213, .22);
  animation: spinReverse 18s linear infinite;
}

.swirl-outer {
  inset: 0;
  border: 1px solid transparent;
  border-top-color: rgba(22, 197, 213, .34);
  border-right-color: rgba(255, 125, 19, .16);
  animation: spin 19s linear infinite;
}

.swirl-inner {
  inset: 9%;
  border: 1px solid transparent;
  border-left-color: rgba(52, 121, 199, .26);
  border-bottom-color: rgba(22, 197, 213, .16);
  animation: spinReverse 24s linear infinite;
}

.swirl-segment,
.swirl-dot {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.swirl-segment {
  width: 7px;
  height: 7px;
}

.swirl-dot {
  width: 5px;
  height: 5px;
}

.seg-cyan {
  top: 10%;
  left: 31%;
  color: var(--cyan);
}

.seg-blue {
  right: 8%;
  top: 56%;
  color: var(--blue2);
}

.seg-orange {
  left: 22%;
  bottom: 9%;
  color: var(--orange);
}

.dot-cyan {
  top: 14%;
  right: 24%;
  color: var(--cyan2);
}

.dot-orange {
  right: 11%;
  bottom: 24%;
  color: var(--orange2);
}

.dot-blue {
  left: 10%;
  top: 49%;
  color: var(--blue2);
}

.orbit-label-layer {
  position: absolute;
  inset: -5%;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  animation: orbitWhole 14s linear infinite;
}

.orbit-label-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 1px;
  transform-origin: 0 50%;
}

.slot-minecraft {
  transform: rotate(205deg);
}

.slot-roblox {
  transform: rotate(8deg);
}

.slot-creator {
  transform: rotate(112deg);
}

.orbit-label {
  position: absolute;
  left: 100%;
  top: 50%;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(5, 16, 23, .86);
  color: white;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .15em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .23);
  animation: orbitCounter 14s linear infinite;
}

.label-minecraft {
  color: var(--cyan2);
}

.label-roblox {
  color: var(--orange2);
}

.label-creator {
  color: #78ace6;
}

/* ----------------------------------------------------------
   ABOUT PAGE
   ---------------------------------------------------------- */

.subpage {
  width: 100%;
  padding: 118px 22px 74px;
}

.subpage-shell {
  width: min(var(--max), 100%);
  margin: 0 auto;
}

.subpage-header {
  min-height: 290px;
  padding: 42px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 83% 24%, rgba(22, 197, 213, .10), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  box-shadow: var(--shadow);
}

.subpage-header-copy h1,
.partnership-banner h1 {
  margin-top: 10px;
  max-width: 860px;
  font-size: clamp(46px, 5.7vw, 74px);
  line-height: .97;
  letter-spacing: -.058em;
}

.subpage-header-copy h1 span {
  color: var(--cyan);
}

.subpage-header-copy > p:last-child,
.partnership-banner > div > p:last-child {
  max-width: 700px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.about-logo-card {
  min-height: 170px;
  padding: 26px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 22px;
  background: rgba(5, 16, 23, .50);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}

.about-logo-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 197, 213, .23);
}

.about-logo-card img {
  width: 88px;
  height: auto;
}

.about-logo-card strong {
  display: block;
  margin-top: 8px;
  font-size: 19px;
}

.about-logo-card span {
  display: block;
  margin-top: 4px;
  color: #7f939e;
  font-size: 12px;
}

.about-layout {
  margin-top: 20px;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 20px;
}

.about-profile-card,
.about-story-card,
.program-card,
.partnership-information,
.term {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  transition:
    transform .34s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    background .3s ease;
}

.about-profile-card:hover,
.about-story-card:hover,
.program-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 197, 213, .20);
}

.about-profile-card {
  padding: 28px;
  border-radius: 22px;
}

.about-profile-top {
  display: flex;
  gap: 15px;
  align-items: center;
}

.about-profile-top img {
  width: 64px;
  height: auto;
}

.about-profile-top h2 {
  margin-top: 4px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.about-profile-top span {
  color: #758a96;
  font-size: 12px;
}

.about-stat {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgba(22, 197, 213, .11);
  border-radius: 16px;
  background: rgba(22, 197, 213, .04);
}

.about-stat strong {
  display: block;
  color: var(--cyan2);
  font-size: 34px;
  letter-spacing: -.05em;
}

.about-stat span {
  color: #718791;
  font-size: 11px;
}

.about-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  color: #8ca0ab;
  font-size: 11px;
}

.about-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-story-card {
  padding: 32px;
  border-radius: 22px;
}

.about-story-card > h2 {
  margin-top: 6px;
  font-size: 34px;
  letter-spacing: -.045em;
}

.about-story-card > p:not(.micro-label) {
  margin-top: 13px;
  color: #9aadb7;
  line-height: 1.78;
}

.about-feature-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.about-feature-grid > div {
  min-height: 115px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 16px;
  background: rgba(255, 255, 255, .018);
  transition: transform .3s ease, border-color .3s ease;
}

.about-feature-grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(22, 197, 213, .18);
}

.about-feature-grid strong {
  display: block;
  font-size: 16px;
}

.about-feature-grid span {
  display: block;
  margin-top: 7px;
  color: #758b96;
  font-size: 12px;
  line-height: 1.58;
}

/* ----------------------------------------------------------
   PARTNERSHIP PAGE + TERMS
   ---------------------------------------------------------- */

.partnership-banner {
  min-height: 310px;
  padding: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  border: 1px solid rgba(255, 125, 19, .14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 79% 24%, rgba(255, 125, 19, .11), transparent 30%),
    radial-gradient(circle at 10% 92%, rgba(22, 197, 213, .05), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  box-shadow: var(--shadow);
}

.partnership-banner h1 span {
  color: var(--orange);
}

.partnership-overview-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.program-card {
  min-height: 250px;
  padding: 26px;
  border-radius: 21px;
}

.program-card:hover {
  border-color: rgba(255, 125, 19, .22);
}

.program-number {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.program-card h2 {
  margin-top: 64px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.program-card p {
  margin-top: 11px;
  color: #879ca7;
  line-height: 1.68;
}

.partnership-information {
  margin-top: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 32px;
  border-radius: 22px;
}

.partnership-information h2 {
  margin-top: 9px;
  font-size: 38px;
  letter-spacing: -.045em;
}

.program-copy {
  color: #91a5b0;
  line-height: 1.76;
}

.program-copy p + p {
  margin-top: 15px;
}

.visible-terms-section {
  margin-top: 60px;
  scroll-margin-top: 90px;
}

.terms-section-heading {
  margin-bottom: 28px;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.terms-section-heading h2 {
  margin-top: 8px;
  font-size: clamp(36px, 4.7vw, 58px);
  letter-spacing: -.05em;
}

.terms-section-heading h2 span {
  color: var(--orange);
}

.terms-section-heading > div:first-child > p:last-child {
  margin-top: 11px;
  color: #8196a1;
}

.terms-count {
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 125, 19, .17);
  border-radius: 50%;
  background: rgba(255, 125, 19, .04);
}

.terms-count strong {
  color: var(--orange2);
  font-size: 29px;
  line-height: 1;
}

.terms-count span {
  margin-top: 5px;
  color: #788d98;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.terms-list {
  display: grid;
  gap: 9px;
}

.term {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  border-radius: 15px;
}

.term:hover {
  transform: translateX(5px);
  border-color: rgba(255, 125, 19, .18);
}

.term > span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
}

.term p {
  color: #a6b5bd;
  line-height: 1.66;
}

.term strong {
  color: white;
}

.partnership-terms-fab {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 120;
  display: none;
  min-height: 47px;
  padding: 0 17px;
  align-items: center;
  border: 1px solid rgba(255, 125, 19, .27);
  border-radius: 999px;
  background: rgba(9, 19, 27, .93);
  color: var(--orange2);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.partnership-terms-fab.visible {
  display: inline-flex;
}

.partnership-terms-fab:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 125, 19, .55);
  background: rgba(20, 26, 32, .96);
}

/* ----------------------------------------------------------
   SEAMLESS MARQUEE
   ---------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .012);
}

.marquee-window {
  width: 100%;
  overflow: hidden;
}

.seamless-track {
  width: max-content;
  display: flex;
  gap: 0;
  padding: 13px 0;
  animation: marquee 42s linear infinite;
  will-change: transform;
}

.marquee-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 21px;
  padding-right: 21px;
  white-space: nowrap;
}

.marquee-group span {
  color: #728792;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.marquee-group i {
  color: var(--cyan);
  font-size: 7px;
  font-style: normal;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.copyright-footer {
  width: 100%;
  min-height: 86px;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(255, 255, 255, .05);
  color: #627782;
  font-size: 11px;
}

/* ----------------------------------------------------------
   REVEAL — one-time CSS transition, no perpetual JS loop
   ---------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   ANIMATIONS
   ---------------------------------------------------------- */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spinReverse {
  to { transform: rotate(-360deg); }
}

@keyframes orbitWhole {
  to { transform: rotate(360deg); }
}

@keyframes orbitCounter {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes particleFloat {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--drift), -115vh, 0);
  }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 999px) {
  body {
    zoom: 1;
  }
}

@media (max-width: 920px) {
  .hero {
    min-height: auto;
    padding-top: 120px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy {
    order: 2;
  }

  .hero-art {
    order: 1;
    min-height: 380px;
  }

  .logo-stage {
    width: min(330px, 80vw);
  }

  .hero-lead,
  .subscriber-pill {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .subpage-header,
  .about-layout,
  .partnership-information {
    grid-template-columns: 1fr;
  }

  .partnership-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .partnership-overview-grid {
    grid-template-columns: 1fr;
  }

  .program-card {
    min-height: auto;
  }

  .program-card h2 {
    margin-top: 34px;
  }
}

@media (max-width: 720px) {
  .topbar {
    padding: 0 18px;
  }

  .menu-button {
    display: block;
  }

  .nav {
    position: fixed;
    top: 74px;
    left: 14px;
    right: 14px;
    display: none;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(6, 16, 24, .98);
    box-shadow: var(--shadow);
  }

  .nav.open {
    display: flex;
  }

  .nav-view-button,
  .nav-youtube,
  .nav-discord {
    padding: 12px;
    text-align: left;
  }

  .nav-view-button::after {
    display: none;
  }

  .hero {
    width: min(100% - 28px, var(--max));
    padding-top: 110px;
  }

  .hero-title {
    font-size: clamp(54px, 19vw, 84px);
  }

  .orbit-label-layer {
    inset: -2%;
  }

  .orbit-label {
    padding: 7px 9px;
    font-size: 7px;
  }

  .logo-safe-zone {
    inset: 21%;
  }

  .subpage {
    padding: 102px 14px 62px;
  }

  .subpage-header,
  .partnership-banner {
    padding: 26px 21px;
  }

  .about-feature-grid {
    grid-template-columns: 1fr;
  }

  .about-actions {
    flex-direction: column;
  }

  .about-actions .button {
    width: 100%;
  }

  .partnership-information {
    padding: 24px 20px;
  }

  .terms-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .partnership-terms-fab {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .brand span {
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .subscriber-pill {
    width: 100%;
    justify-content: center;
  }

  .term {
    grid-template-columns: 38px 1fr;
    padding: 19px 17px;
    gap: 9px;
  }
}


/* ----------------------------------------------------------
   TEAM PAGE
   ---------------------------------------------------------- */

.team-header {
  min-height: 290px;
  padding: 42px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 28%, rgba(52, 121, 199, .11), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(22, 197, 213, .05), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  box-shadow: var(--shadow);
}

.team-header h1 {
  margin-top: 10px;
  font-size: clamp(46px, 5.7vw, 74px);
  line-height: .97;
  letter-spacing: -.058em;
}

.team-header h1 span {
  color: var(--blue2);
}

.team-header > div:first-child > p:last-child {
  max-width: 700px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.team-header-mark {
  display: grid;
  place-items: center;
}

.team-header-mark img {
  width: 150px;
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.30));
}

.team-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.team-card {
  min-height: 310px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(52, 121, 199, .06), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  transition:
    transform .34s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;
}

.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(52, 121, 199, .28);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.owner-card {
  background:
    radial-gradient(circle at top right, rgba(22, 197, 213, .08), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .046), rgba(255, 255, 255, .014));
}

.owner-card:hover {
  border-color: rgba(22, 197, 213, .28);
}

.team-avatar {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  align-self: center;
  flex: 0 0 auto;
  border-radius: 24px;
  color: #021014;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  font-size: 31px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(22,197,213,.14);
}

.team-avatar-blue {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 10px 26px rgba(52,121,199,.14);
}

.team-avatar-orange {
  color: #111;
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  box-shadow: 0 10px 26px rgba(255,125,19,.14);
}

.team-avatar-photo {
  overflow: hidden;
  padding: 0;
  background: #05090d;
  border: 1px solid rgba(255,255,255,.09);
}

.team-avatar-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: inherit;
  transform-origin: center;
}

.owner-card .team-avatar-photo img {
  object-position: 50% 50%;
}

.team-avatar-fizix,
.team-avatar-doom {
  align-self: center;
  display: grid;
  place-items: center;
}

.team-avatar-fizix img {
  object-fit: contain;
  object-position: 50% 50%;
  transform: scale(1.04);
}

.team-avatar-doom img {
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.06);
}

.team-card-copy {
  margin-top: 24px;
}

.team-role-label {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.team-card:nth-child(2) .team-role-label {
  color: #78ace6;
}

.team-card:nth-child(3) .team-role-label {
  color: var(--orange2);
}

.team-card h2 {
  margin-top: 7px;
  font-size: 28px;
  letter-spacing: -.04em;
}

.evan-schizo-trigger {
  display: inline-block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.evan-schizo-trigger span {
  display: inline-block;
  color: inherit;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.team-handle {
  display: block;
  margin-top: 2px;
  color: #7c909b;
  font-size: 12px;
}

.team-card-copy > p:last-child {
  margin-top: 15px;
  color: #8da1ac;
  line-height: 1.7;
}

.evan-message {
  position: relative;
  margin-top: 22px;
  padding: 40px;
  overflow: hidden;
  border: 1px solid rgba(22,197,213,.15);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 20%, rgba(22,197,213,.08), transparent 28%),
    radial-gradient(circle at 12% 100%, rgba(255,125,19,.045), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
}

.message-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 130px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--orange));
}

.evan-message blockquote {
  max-width: 950px;
  margin-top: 15px;
  color: #d3dde3;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.55;
  letter-spacing: -.025em;
}

.evan-message > span {
  display: block;
  margin-top: 20px;
  color: #708692;
  font-size: 12px;
}

@media (max-width: 920px) {
  .team-header {
    grid-template-columns: 1fr;
  }

  .team-header-mark {
    justify-content: start;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-card {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .team-header {
    padding: 26px 21px;
  }

  .evan-message {
    padding: 28px 22px;
  }
}


/* ----------------------------------------------------------
   RECORDING TEAM PAGE
   ---------------------------------------------------------- */

.recording-header {
  min-height: 320px;
  padding: 42px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  align-items: center;
  border: 1px solid rgba(255, 40, 58, .11);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 38, 56, .08), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(22, 197, 213, .045), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, .042), rgba(255, 255, 255, .014));
  box-shadow: var(--shadow);
}

.recording-header h1 {
  margin-top: 10px;
  font-size: clamp(46px, 5.7vw, 74px);
  line-height: .97;
  letter-spacing: -.058em;
}

.recording-header h1 span {
  color: #ff6875;
}

.recording-header > div:first-child > p:last-child {
  max-width: 720px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.recording-join-card {
  min-height: 210px;
  padding: 28px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255, 38, 56, .14);
  border-radius: 22px;
  background: rgba(8, 18, 26, .65);
}

.recording-join-card img {
  width: 88px;
  height: auto;
}

.recording-join-card p {
  margin-top: 10px;
  color: #9caeb8;
  font-size: 13px;
}

.recording-discord-button {
  margin-top: 18px;
  color: white;
  background: linear-gradient(135deg, #5865f2, #7289da);
  box-shadow: 0 10px 28px rgba(88, 101, 242, .16);
}

.recording-discord-button:hover {
  box-shadow: 0 14px 34px rgba(88, 101, 242, .25);
}

.recording-intro {
  margin-top: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.014));
}

.recording-intro-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #ff6875;
  border: 1px solid rgba(255,38,56,.18);
  background: rgba(255,38,56,.055);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
}

.recording-intro h2 {
  margin-top: 8px;
  font-size: 34px;
  letter-spacing: -.045em;
}

.recording-intro p {
  margin-top: 12px;
  color: #96a9b3;
  line-height: 1.75;
}

.management-note {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.management-note strong,
.recording-management-footer strong,
.recording-final-note strong {
  color: var(--orange2);
}

.recording-perks-section,
.recording-guidelines-section {
  margin-top: 58px;
}

.recording-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.recording-section-heading h2 {
  margin-top: 8px;
  font-size: clamp(36px,4.8vw,58px);
  letter-spacing: -.05em;
}

.recording-section-heading h2 span {
  color: var(--cyan);
}

.recording-section-heading > div:first-child > p:last-child {
  max-width: 700px;
  margin-top: 11px;
  color: #8196a1;
}

.recording-perks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.perk-card {
  min-height: 245px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(22,197,213,.05), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.013));
  transition:
    transform .32s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
}

.perk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(22,197,213,.22);
}

.perk-number {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.perk-card h3 {
  margin-top: 48px;
  font-size: 18px;
  letter-spacing: -.025em;
}

.perk-card p {
  margin-top: 10px;
  color: #8398a3;
  font-size: 12px;
  line-height: 1.62;
}

.recording-management-footer {
  margin-top: 16px;
  padding: 18px 20px;
  border-left: 2px solid rgba(255,125,19,.42);
  color: #8599a4;
  background: rgba(255,125,19,.025);
  line-height: 1.7;
}

.guideline-count {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255,38,56,.16);
  border-radius: 50%;
  background: rgba(255,38,56,.035);
}

.guideline-count strong {
  color: #ff6875;
  font-size: 29px;
  line-height: 1;
}

.guideline-count span {
  margin-top: 5px;
  color: #7c909b;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.recording-guidelines-list {
  display: grid;
  gap: 10px;
}

.recording-guideline {
  padding: 24px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.013));
  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
}

.recording-guideline:hover {
  transform: translateX(5px);
  border-color: rgba(255,38,56,.18);
}

.guideline-number {
  color: #ff6875;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
}

.recording-guideline h3 {
  font-size: 19px;
  letter-spacing: -.025em;
}

.recording-guideline p {
  margin-top: 8px;
  color: #9aadb7;
  line-height: 1.68;
}

.recording-final-note {
  margin-top: 20px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(255,125,19,.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,125,19,.055), transparent 30%),
    rgba(255,255,255,.018);
}

.recording-final-note p:last-child {
  max-width: 760px;
  margin-top: 8px;
  color: #879ba6;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .recording-perks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 920px) {
  .recording-header {
    grid-template-columns: 1fr;
  }

  .recording-intro {
    grid-template-columns: 1fr;
  }

  .recording-final-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .recording-header {
    padding: 26px 21px;
  }

  .recording-perks-grid {
    grid-template-columns: 1fr;
  }

  .recording-guideline {
    grid-template-columns: 42px 1fr;
    padding: 20px 17px;
    gap: 10px;
  }

  .recording-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .recording-final-note .button {
    width: 100%;
  }
}


/* ----------------------------------------------------------
   ROBLOX BUTTON
   ---------------------------------------------------------- */

.roblox-group-button {
  color: white;
  background: linear-gradient(135deg, #1b1f27, #343a46);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
}

.roblox-group-button:hover {
  background: linear-gradient(135deg, #292f3a, #414957);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

/* ----------------------------------------------------------
   MERCH PAGE
   ---------------------------------------------------------- */

.merch-header {
  min-height: 330px;
  padding: 42px;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 34px;
  align-items: center;
  border: 1px solid rgba(255,125,19,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 24%, rgba(255,125,19,.09), transparent 29%),
    radial-gradient(circle at 10% 90%, rgba(22,197,213,.05), transparent 27%),
    linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.014));
  box-shadow: var(--shadow);
}

.merch-header h1 {
  margin-top: 10px;
  font-size: clamp(46px, 5.7vw, 74px);
  line-height: .97;
  letter-spacing: -.058em;
}

.merch-header h1 span {
  color: var(--orange);
}

.merch-header > div:first-child > p:last-child {
  max-width: 720px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.merch-group-card {
  padding: 28px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(22,197,213,.07), transparent 34%),
    rgba(8,18,26,.64);
  text-align: center;
}

.merch-group-logo {
  width: 94px;
  height: 94px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 24px;
  background: rgba(255,255,255,.025);
}

.merch-group-logo img {
  width: 78px;
  height: auto;
}

.merch-group-card h2 {
  margin-top: 7px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.merch-group-card > p:not(.micro-label) {
  margin: 10px auto 0;
  max-width: 330px;
  color: #8599a4;
  line-height: 1.65;
}

.merch-group-card .button {
  margin-top: 20px;
}

.merch-current-section {
  margin-top: 56px;
}

.merch-section-heading {
  margin-bottom: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.merch-section-heading h2 {
  margin-top: 8px;
  font-size: clamp(36px, 4.8vw, 58px);
  letter-spacing: -.05em;
}

.merch-section-heading h2 span {
  color: var(--orange);
}

.merch-section-heading > div:first-child > p:last-child {
  margin-top: 10px;
  color: #8196a1;
}

.merch-count {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255,125,19,.17);
  border-radius: 50%;
  background: rgba(255,125,19,.04);
}

.merch-count strong {
  color: var(--orange2);
  font-size: 29px;
  line-height: 1;
}

.merch-count span {
  margin-top: 5px;
  color: #788d98;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.merch-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.014));
  transition:
    transform .34s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;
}

.merch-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,125,19,.24);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.merch-card-art {
  position: relative;
  min-height: 210px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.merch-card-art::before,
.merch-card-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.merch-card-art::before {
  width: 210px;
  height: 210px;
  background: rgba(22,197,213,.10);
  filter: blur(55px);
}

.merch-card-art::after {
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 60px rgba(0,0,0,.15);
}

.hoodie-art {
  background:
    radial-gradient(circle at 70% 30%, rgba(52,121,199,.15), transparent 36%),
    #0a1620;
}

.shirt-art {
  background:
    radial-gradient(circle at 70% 30%, rgba(22,197,213,.14), transparent 36%),
    #09171d;
}

.joggers-art {
  background:
    radial-gradient(circle at 70% 30%, rgba(255,125,19,.14), transparent 36%),
    #15130f;
}

.merch-card-art span {
  position: relative;
  z-index: 2;
  color: white;
  font-size: 54px;
  font-weight: 950;
  letter-spacing: -.08em;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.merch-card-copy {
  padding: 24px;
}

.merch-type {
  color: var(--orange2);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

.merch-card h3 {
  margin-top: 8px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.merch-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 850;
}

.merch-coming-soon {
  margin-top: 22px;
  padding: 30px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(22,197,213,.11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 20%, rgba(22,197,213,.055), transparent 30%),
    rgba(255,255,255,.018);
}

.merch-coming-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--cyan);
  border: 1px solid rgba(22,197,213,.17);
  background: rgba(22,197,213,.045);
  font-size: 32px;
  font-weight: 300;
}

.merch-coming-soon h2 {
  margin-top: 7px;
  font-size: 25px;
  letter-spacing: -.035em;
}

.merch-coming-soon p:last-child {
  margin-top: 8px;
  color: #8296a1;
  line-height: 1.65;
}

@media (max-width: 920px) {
  .merch-header {
    grid-template-columns: 1fr;
  }

  .merch-grid {
    grid-template-columns: 1fr;
  }

  .merch-coming-soon {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .merch-coming-soon .button {
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .merch-header {
    padding: 26px 21px;
  }

  .merch-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .merch-coming-soon {
    padding: 24px 20px;
  }

  .merch-coming-soon .button {
    width: 100%;
  }
}


/* ----------------------------------------------------------
   VERSION K NAV POLISH
   ---------------------------------------------------------- */

/* Keep normal spacing for nav items, but pull YouTube and Discord closer together */
.nav-youtube {
  margin-left: 2px;
}

.nav-discord {
  margin-left: -14px;
}

/* Brighter Discord-like blue */
.nav-discord {
  color: #ffffff;
  border-color: rgba(88, 101, 242, .62);
  background: rgba(88, 101, 242, .20);
  box-shadow: 0 8px 24px rgba(88, 101, 242, .10);
}

.nav-discord:hover {
  color: #ffffff;
  border-color: rgba(88, 101, 242, .92);
  background: #5865F2;
  box-shadow: 0 10px 28px rgba(88, 101, 242, .28);
}

@media (max-width: 720px) {
  .nav-youtube,
  .nav-discord {
    margin-left: 0;
  }
}


/* ----------------------------------------------------------
   VERSION M — FIZIX SECRET EASTER EGG
   ---------------------------------------------------------- */

.fizix-secret-trigger {
  display: inline-block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.fizix-secret-trigger span {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
  transition:
    transform .22s ease,
    text-shadow .22s ease,
    color .22s ease;
}

.fizix-secret-trigger:hover span {
  color: #fff;
  transform: translateX(2px);
  text-shadow:
    -2px 0 rgba(255, 0, 45, .75),
     2px 0 rgba(0, 220, 255, .65);
}

/* ----------------------------------------------------------
   VERSION O — HOME LOGO CINEMATIC "COMING SOON"
   ---------------------------------------------------------- */

.coming-soon-trigger {
  position: relative;
  z-index: 5;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}

.coming-soon-trigger img {
  width: 100%;
  height: auto;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    filter .45s ease;
}

.coming-soon-trigger:hover img {
  transform: scale(1.035);
  filter:
    drop-shadow(0 24px 40px rgba(0,0,0,.32))
    drop-shadow(0 0 20px rgba(22,197,213,.18));
}

.coming-soon-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: all;
}

.coming-soon-overlay.active {
  display: grid;
  animation: comingSoonOverlayLife 10s linear forwards;
}

.coming-soon-vignette,
.coming-soon-filmgrain,
.coming-soon-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coming-soon-vignette {
  z-index: 2;
  background:
    radial-gradient(circle at center, transparent 28%, rgba(0,0,0,.26) 54%, rgba(0,0,0,.82) 100%);
}

.coming-soon-filmgrain {
  z-index: 4;
  opacity: .16;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.28) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  background-size: 5px 5px, 100% 4px;
  mix-blend-mode: screen;
  animation: comingSoonGrain .18s steps(2,end) infinite;
}

.coming-soon-light {
  z-index: 1;
  opacity: 0;
  filter: blur(80px);
}

.coming-soon-light-left {
  left: -20%;
  right: auto;
  width: 60%;
  background: radial-gradient(circle at center, rgba(22,197,213,.24), transparent 68%);
  animation: comingSoonLightLeft 10s ease-in-out forwards;
}

.coming-soon-light-right {
  left: auto;
  right: -20%;
  width: 60%;
  background: radial-gradient(circle at center, rgba(255,125,19,.20), transparent 68%);
  animation: comingSoonLightRight 10s ease-in-out forwards;
}

.coming-soon-content {
  position: relative;
  z-index: 5;
  width: min(900px, calc(100% - 48px));
  text-align: center;
  opacity: 0;
  transform: scale(.94);
  animation: comingSoonContent 10s cubic-bezier(.16,1,.3,1) forwards;
}

.coming-soon-kicker {
  margin-top: 20px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .44em;
  text-transform: uppercase;
  opacity: 0;
  animation: comingSoonKicker 10s ease forwards;
}

.coming-soon-title {
  position: relative;
  margin-top: 22px;
  color: #fff;
  font-size: clamp(64px, 10vw, 155px);
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow:
    0 0 14px rgba(255,255,255,.08),
    0 0 38px rgba(22,197,213,.08);
  opacity: 0;
  animation:
    comingSoonTitleReveal 10s cubic-bezier(.16,1,.3,1) forwards,
    comingSoonTitleFlicker 1.8s steps(2,end) 2.6s infinite;
}

.coming-soon-title::before,
.coming-soon-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.coming-soon-title::before {
  color: rgba(22,197,213,.65);
  transform: translateX(-4px);
  clip-path: inset(0 0 58% 0);
  animation: comingSoonTitleGlitchA 10s steps(2,end) forwards;
}

.coming-soon-title::after {
  color: rgba(255,125,19,.52);
  transform: translateX(4px);
  clip-path: inset(58% 0 0 0);
  animation: comingSoonTitleGlitchB 10s steps(2,end) forwards;
}

.coming-soon-subtitle {
  margin-top: 28px;
  color: rgba(255,255,255,.58);
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: .08em;
  opacity: 0;
  animation: comingSoonSubtitle 10s ease forwards;
}

.coming-soon-rule {
  width: 0;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(22,197,213,.85), rgba(255,255,255,.85), rgba(255,125,19,.85), transparent);
  box-shadow: 0 0 16px rgba(22,197,213,.12);
  animation: comingSoonRule 10s ease forwards;
}

.coming-soon-rule-bottom {
  margin-top: 34px;
  animation-delay: .2s;
}

body.coming-soon-running {
  overflow: hidden !important;
}

@keyframes comingSoonOverlayLife {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  91%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes comingSoonContent {
  0%, 12% {
    opacity: 0;
    transform: scale(.94);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  84% {
    opacity: 1;
    transform: scale(1);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(1.025);
  }
}

@keyframes comingSoonKicker {
  0%, 15% { opacity: 0; transform: translateY(8px); }
  28%, 82% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes comingSoonTitleReveal {
  0%, 16% {
    opacity: 0;
    transform: scale(.90);
    filter: blur(14px);
  }
  25% {
    opacity: 1;
    transform: scale(1.035);
    filter: blur(0);
  }
  31%, 83% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  94%, 100% {
    opacity: 0;
    transform: scale(1.03);
    filter: blur(7px);
  }
}

@keyframes comingSoonSubtitle {
  0%, 28% { opacity: 0; transform: translateY(8px); }
  39%, 82% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes comingSoonRule {
  0%, 12% { width: 0; opacity: 0; }
  26%, 82% { width: min(620px, 76%); opacity: 1; }
  95%, 100% { width: 0; opacity: 0; }
}

@keyframes comingSoonLightLeft {
  0%, 10% { opacity: 0; transform: translateX(-15%) scale(.8); }
  30% { opacity: .8; transform: translateX(6%) scale(1.05); }
  70% { opacity: .45; transform: translateX(14%) scale(1.1); }
  100% { opacity: 0; transform: translateX(24%) scale(.9); }
}

@keyframes comingSoonLightRight {
  0%, 14% { opacity: 0; transform: translateX(15%) scale(.8); }
  34% { opacity: .7; transform: translateX(-4%) scale(1.02); }
  72% { opacity: .42; transform: translateX(-12%) scale(1.08); }
  100% { opacity: 0; transform: translateX(-22%) scale(.9); }
}

@keyframes comingSoonGrain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%,1%); }
  50%  { transform: translate(1%,-2%); }
  75%  { transform: translate(2%,1%); }
  100% { transform: translate(0,0); }
}

@keyframes comingSoonTitleFlicker {
  0%, 94%, 100% { text-shadow: 0 0 14px rgba(255,255,255,.08), 0 0 38px rgba(22,197,213,.08); }
  96% { text-shadow: -3px 0 rgba(22,197,213,.45), 3px 0 rgba(255,125,19,.35), 0 0 46px rgba(255,255,255,.12); }
  98% { text-shadow: 0 0 12px rgba(255,255,255,.06); }
}

@keyframes comingSoonTitleGlitchA {
  0%, 22%, 100% { opacity: 0; }
  23% { opacity: .55; transform: translate(-7px,-2px); }
  24% { opacity: 0; }
  54% { opacity: .42; transform: translate(-4px,1px); }
  55% { opacity: 0; }
  78% { opacity: .36; transform: translate(-6px,-1px); }
  79% { opacity: 0; }
}

@keyframes comingSoonTitleGlitchB {
  0%, 24%, 100% { opacity: 0; }
  25% { opacity: .48; transform: translate(6px,2px); }
  26% { opacity: 0; }
  57% { opacity: .38; transform: translate(4px,-1px); }
  58% { opacity: 0; }
  80% { opacity: .34; transform: translate(7px,1px); }
  81% { opacity: 0; }
}

@media (max-width: 640px) {
  .coming-soon-kicker {
    letter-spacing: .28em;
  }

  .coming-soon-title {
    font-size: clamp(54px, 18vw, 88px);
  }

  .coming-soon-subtitle {
    margin-top: 22px;
  }
}


/* ----------------------------------------------------------
   VERSION P — MOBILE AVAILABILITY BLOCKER
   ---------------------------------------------------------- */

.mobile-blocker {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  min-height: 100dvh;
  padding:
    max(22px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  overflow: hidden auto;
  place-items: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(22,197,213,.055), transparent 34%),
    #000;
  color: #fff;
}

.mobile-blocker.active {
  display: grid;
}

.mobile-blocker::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.018) 0,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity: .45;
}

.mobile-blocker-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .16;
}

.mobile-blocker-glow-cyan {
  left: -150px;
  top: 10%;
  background: var(--cyan);
}

.mobile-blocker-glow-blue {
  right: -160px;
  bottom: 5%;
  background: #5865F2;
}

.mobile-blocker-card {
  position: relative;
  z-index: 2;
  width: min(100%, 460px);
  padding: clamp(28px, 7vw, 42px) clamp(22px, 6vw, 34px);
  text-align: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014));
  box-shadow:
    0 24px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
}

.mobile-blocker-logo {
  width: clamp(76px, 22vw, 110px);
  height: auto;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
}

.mobile-blocker-kicker {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.mobile-blocker h1 {
  margin-top: 14px;
  font-size: clamp(28px, 8vw, 42px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.mobile-blocker-copy {
  margin: 18px auto 0;
  color: #98aab4;
  font-size: clamp(14px, 4vw, 16px);
  line-height: 1.68;
}


.mobile-blocker-continue {
  width: 100%;
  min-height: 54px;
  margin-top: 26px;
  padding: 0 18px;
  border: 1px solid rgba(22,197,213,.7);
  border-radius: 14px;
  color: #041014;
  background: linear-gradient(135deg, var(--cyan2), var(--cyan));
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(22,197,213,.20);
  transition: transform .28s cubic-bezier(.16,1,.3,1), filter .28s ease, box-shadow .28s ease;
}

.mobile-blocker-continue:hover,
.mobile-blocker-continue:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 40px rgba(22,197,213,.30);
}

.mobile-blocker-continue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.mobile-blocker-discord {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(88,101,242,.75);
  border-radius: 14px;
  color: #fff;
  background: #5865F2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 14px 34px rgba(88,101,242,.22);
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    filter .28s ease,
    box-shadow .28s ease;
}

.mobile-blocker-discord:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 18px 40px rgba(88,101,242,.32);
}

.mobile-blocker-discord-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.8);
}

.mobile-blocker-note {
  margin-top: 20px;
  color: #60727c;
  font-size: 11px;
  line-height: 1.6;
}

.mobile-blocker-note strong {
  color: #8ca1ad;
}

.mobile-blocker-test {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #72858f;
  font-size: 11px;
  line-height: 1.55;
}

.mobile-blocker-test strong {
  color: var(--cyan2);
}

body.mobile-blocked {
  overflow: hidden !important;
}

/* Make sure browser zoom from desktop mode does not shrink the blocker. */
.mobile-blocker,
.mobile-blocker * {
  zoom: 1;
}

@media (max-width: 480px) {
  .mobile-blocker {
    place-items: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  .mobile-blocker-card {
    border-radius: 22px;
  }

  .mobile-blocker h1 {
    font-size: clamp(27px, 8.7vw, 36px);
  }
}

@media (max-height: 650px) {
  .mobile-blocker {
    place-items: start center;
  }

  .mobile-blocker-card {
    margin: 8px 0;
  }

  .mobile-blocker-logo {
    width: 68px;
    margin-bottom: 12px;
  }

  .mobile-blocker h1 {
    font-size: 31px;
  }

  .mobile-blocker-copy {
    margin-top: 12px;
  }

  .mobile-blocker-discord {
    margin-top: 18px;
  }
}


/* ==========================================================
   VERSION 8 — BRITISH MODE
   Fizix avatar easter egg
   ========================================================== */

.british-mode-trigger {
  border: 0;
  cursor: pointer;
  font: inherit;
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s ease,
    filter .28s ease;
}

.british-mode-trigger:hover {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow:
    0 12px 30px rgba(255,125,19,.22),
    0 0 0 2px rgba(255,255,255,.06);
  filter: brightness(1.08);
}

/* Whole-site UK palette */
body.british-mode {
  --bg: #020617;
  --bg2: #07163c;
  --panel: rgba(4, 16, 48, .84);
  --panel2: rgba(255,255,255,.04);
  --text: #fff;
  --muted: #c6cce1;
  --line: rgba(255,255,255,.14);

  --cyan: #ffffff;
  --cyan2: #dfe7ff;
  --blue: #012169;
  --blue2: #1847b8;
  --orange: #c8102e;
  --orange2: #ff405b;
  --youtube: #c8102e;

  background:
    radial-gradient(circle at 12% 15%, rgba(200,16,46,.15), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(1,33,105,.34), transparent 34%),
    linear-gradient(180deg, #020615 0%, #06143c 54%, #01030a 100%);
}

body.british-mode .topbar {
  background:
    linear-gradient(90deg,
      rgba(1,33,105,.96) 0 42%,
      rgba(255,255,255,.08) 42% 44%,
      rgba(200,16,46,.95) 44% 56%,
      rgba(255,255,255,.08) 56% 58%,
      rgba(1,33,105,.96) 58% 100%);
  border-bottom-color: rgba(255,255,255,.18);
}

body.british-mode .brand strong,
body.british-mode .section-kicker,
body.british-mode .micro-label,
body.british-mode .eyebrow,
body.british-mode .merch-link,
body.british-mode .team-role-label,
body.british-mode .perk-number {
  color: #ff405b;
}

body.british-mode .hero-title span {
  -webkit-text-stroke-color: #fff;
  text-shadow:
    -3px 0 rgba(200,16,46,.45),
     3px 0 rgba(1,33,105,.65),
     0 0 22px rgba(255,255,255,.08);
}

body.british-mode .button-primary {
  color: #fff;
  background: linear-gradient(135deg, #012169, #1847b8);
  box-shadow: 0 12px 30px rgba(1,33,105,.28);
}

body.british-mode .button-secondary,
body.british-mode .nav-discord {
  color: #fff;
  background: linear-gradient(135deg, #c8102e, #ff405b);
  border-color: rgba(255,255,255,.15);
}

body.british-mode .nav-youtube {
  color: #fff !important;
  border-color: rgba(255,255,255,.22);
  background: #c8102e;
}

body.british-mode .team-card,
body.british-mode .about-profile-card,
body.british-mode .about-story-card,
body.british-mode .program-card,
body.british-mode .partnership-information,
body.british-mode .recording-header,
body.british-mode .recording-intro,
body.british-mode .perk-card,
body.british-mode .recording-guideline,
body.british-mode .merch-header,
body.british-mode .merch-card,
body.british-mode .team-header,
body.british-mode .subpage-header {
  background:
    radial-gradient(circle at top right, rgba(200,16,46,.08), transparent 33%),
    radial-gradient(circle at bottom left, rgba(1,33,105,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border-color: rgba(255,255,255,.14);
}

/* A subtle giant flag behind the whole site */
body.british-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background:
    linear-gradient(27deg,
      transparent 0 43%,
      #fff 43% 46%,
      #c8102e 46% 49%,
      #fff 49% 52%,
      transparent 52%),
    linear-gradient(-27deg,
      transparent 0 43%,
      #fff 43% 46%,
      #c8102e 46% 49%,
      #fff 49% 52%,
      transparent 52%),
    linear-gradient(90deg,
      transparent 0 43%,
      #fff 43% 46%,
      #c8102e 46% 54%,
      #fff 54% 57%,
      transparent 57%),
    linear-gradient(0deg,
      transparent 0 40%,
      #fff 40% 44%,
      #c8102e 44% 56%,
      #fff 56% 60%,
      transparent 60%),
    #012169;
  background-size: cover;
}

/* Activation HUD */
.british-mode-ui {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: 150000;
  display: flex;
  gap: 12px;
  align-items: center;
  width: min(390px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(1,33,105,.96), rgba(200,16,46,.92));
  box-shadow:
    0 18px 50px rgba(0,0,0,.40),
    0 0 34px rgba(200,16,46,.10);
  opacity: 0;
  transform: translateY(-18px) scale(.97);
  pointer-events: none;
  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.16,1,.3,1);
}

.british-mode-ui.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.british-mode-flag-mini {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  font-size: 25px;
}

.british-mode-ui p {
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
}

.british-mode-ui span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.70);
  font-size: 10px;
  line-height: 1.45;
}

/* Constant tea-time nonsense */
.british-tea-feed {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 149000;
  width: min(420px, calc(100vw - 40px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.british-tea-toast {
  justify-self: end;
  max-width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid #c8102e;
  border-radius: 10px;
  color: #e9ecff;
  background: rgba(1, 8, 28, .91);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  font-size: 11px;
  line-height: 1.48;
  animation: britishTeaToast .42s cubic-bezier(.16,1,.3,1) both;
}

.british-tea-toast strong {
  color: #ff405b;
}

/* 30-second finale */
.british-flag-flash {
  position: fixed;
  inset: 0;
  z-index: 250000;
  display: none;
  place-items: center;
  overflow: hidden;
  background: white;
  opacity: 0;
  pointer-events: all;
}

.british-flag-flash.active {
  display: grid;
  animation: britishFlagFlash 1.45s ease-in-out forwards;
}

.union-jack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #012169;
  transform: scale(1.08);
}

.union-jack::before,
.union-jack::after {
  content: "";
  position: absolute;
  z-index: 3;
  background: #fff;
}

.union-jack::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 25%;
  transform: translateY(-50%);
}

.union-jack::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 16%;
  transform: translateX(-50%);
}

.union-jack-cross-h,
.union-jack-cross-v {
  position: absolute;
  z-index: 4;
  background: #c8102e;
}

.union-jack-cross-h {
  left: 0;
  right: 0;
  top: 50%;
  height: 13%;
  transform: translateY(-50%);
}

.union-jack-cross-v {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8%;
  transform: translateX(-50%);
}

.union-jack-diagonal {
  position: absolute;
  z-index: 1;
  left: -15%;
  top: 50%;
  width: 130%;
  height: 13%;
  background: #fff;
}

.union-jack-diagonal::after {
  content: "";
  position: absolute;
  inset: 25% 0;
  background: #c8102e;
}

.union-jack-diagonal-a {
  transform: translateY(-50%) rotate(27deg);
}

.union-jack-diagonal-b {
  transform: translateY(-50%) rotate(-27deg);
}

.british-flash-copy {
  position: relative;
  z-index: 8;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  text-shadow:
    0 3px 18px rgba(0,0,0,.85),
    0 0 30px rgba(0,0,0,.50);
}

.british-flash-copy strong {
  font-size: clamp(46px, 9vw, 120px);
  line-height: .88;
  letter-spacing: -.06em;
}

.british-flash-copy span {
  margin-top: 18px;
  font-size: clamp(13px, 1.6vw, 19px);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.british-mode-ending {
  overflow: hidden !important;
}

@keyframes britishTeaToast {
  from {
    opacity: 0;
    transform: translateX(30px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes britishFlagFlash {
  0% {
    opacity: 0;
    filter: brightness(2.8);
  }
  16% {
    opacity: 1;
    filter: brightness(2.4);
  }
  42% {
    opacity: 1;
    filter: brightness(1.12);
  }
  78% {
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

@media (max-width: 720px) {
  .british-mode-ui {
    top: 84px;
    left: 14px;
    right: 14px;
    width: auto;
  }

  .british-tea-feed {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }
}


/* ==========================================================
   VERSION 9 — BRITISH MODE CHAOS UPGRADE
   ========================================================== */

body.british-mode {
  background:
    radial-gradient(circle at 15% 12%, rgba(200,16,46,.19), transparent 30%),
    radial-gradient(circle at 85% 14%, rgba(1,33,105,.38), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.035), transparent 36%),
    linear-gradient(180deg, #020616 0%, #061239 48%, #01030b 100%);
}

body.british-mode .topbar {
  box-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 10px 34px rgba(0,0,0,.28);
}

body.british-mode .particles .particle {
  box-shadow: 0 0 13px currentColor;
}

body.british-mode .marquee {
  background:
    linear-gradient(90deg,
      rgba(1,33,105,.30),
      rgba(200,16,46,.18),
      rgba(1,33,105,.30));
}

body.british-mode .marquee-group span {
  color: rgba(255,255,255,.72);
}

body.british-mode .marquee-group i {
  color: #ff405b;
}

/* Modal nuisance layer */
.british-nuisance-layer {
  position: fixed;
  inset: 0;
  z-index: 170000;
  display: none;
  pointer-events: none;
}

.british-nuisance-layer.active {
  display: block;
}

.british-nuisance-popup {
  position: absolute;
  width: min(390px, calc(100vw - 36px));
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: white;
  background:
    radial-gradient(circle at 90% 10%, rgba(200,16,46,.20), transparent 32%),
    linear-gradient(150deg, rgba(1,33,105,.98), rgba(7,16,48,.98));
  box-shadow:
    0 22px 65px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.025) inset;
  pointer-events: auto;
  animation: britishNuisanceIn .38s cubic-bezier(.16,1,.3,1) both;
}

.british-nuisance-popup.beans-popup {
  background:
    radial-gradient(circle at 88% 14%, rgba(255,125,19,.22), transparent 31%),
    linear-gradient(150deg, #3a1607, #160804);
  border-color: rgba(255,174,85,.28);
}

.british-nuisance-popup.tea-popup {
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.08), transparent 31%),
    linear-gradient(150deg, #012169, #07102e);
}

.british-nuisance-popup.biscuit-popup {
  background:
    radial-gradient(circle at 88% 14%, rgba(255,211,122,.18), transparent 31%),
    linear-gradient(150deg, #3a2a0e, #151006);
}

.british-nuisance-popup .popup-flag {
  font-size: 28px;
}

.british-nuisance-popup .popup-label {
  margin-top: 10px;
  color: rgba(255,255,255,.54);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.british-nuisance-popup h3 {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.british-nuisance-popup p {
  margin-top: 10px;
  color: rgba(255,255,255,.74);
  font-size: 12px;
  line-height: 1.58;
}

.british-nuisance-popup .british-popup-button {
  width: 100%;
  min-height: 40px;
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-weight: 850;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.british-nuisance-popup .british-popup-button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
}

.british-popup-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  color: white;
  background: rgba(0,0,0,.22);
  font-size: 20px;
  cursor: pointer;
}

/* Nearby "2 mi" parody ad */
.british-nearby-ad {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 169000;
  display: none;
  width: min(390px, calc(100vw - 44px));
  padding: 16px 42px 16px 14px;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: white;
  background:
    radial-gradient(circle at 15% 50%, rgba(200,16,46,.16), transparent 35%),
    linear-gradient(135deg, rgba(1,33,105,.97), rgba(8,13,38,.98));
  box-shadow:
    0 18px 52px rgba(0,0,0,.48),
    0 0 30px rgba(1,33,105,.18);
  animation: britishNearbyIn .42s cubic-bezier(.16,1,.3,1) both;
}

.british-nearby-ad.active {
  display: flex;
}

.british-nearby-avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  font-size: 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.british-nearby-copy {
  min-width: 0;
}

.british-ad-label {
  color: #ff6c80;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .15em;
}

.british-nearby-copy strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.3;
}

.british-nearby-copy span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.4;
}

.british-nearby-copy small {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.38);
  font-size: 8px;
  line-height: 1.35;
}

.british-ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,.20);
  cursor: pointer;
}

@keyframes britishNuisanceIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.94) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes britishNearbyIn {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 720px) {
  .british-nearby-ad {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
  }

  .british-nuisance-popup {
    left: 18px !important;
    right: 18px !important;
    width: auto;
  }
}


/* ==========================================================
   VERSION 10 — BRITISH MODE POPUP / FINALE TUNING
   ========================================================== */

/* General nuisance popups move around the screen rather than clustering. */
.british-nuisance-popup {
  width: min(360px, calc(100vw - 34px));
  max-height: min(330px, calc(100vh - 40px));
  overflow: auto;
}

/* Top-left stack for parody nearby alerts */
.british-nearby-stack {
  position: fixed;
  top: 92px;
  left: 20px;
  z-index: 171000;
  display: none;
  width: min(390px, calc(100vw - 40px));
  gap: 9px;
  pointer-events: none;
}

.british-nearby-stack.active {
  display: grid;
}

.british-nearby-alert {
  position: relative;
  width: 100%;
  padding: 14px 40px 14px 13px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  color: white;
  background:
    radial-gradient(circle at 12% 50%, rgba(200,16,46,.16), transparent 35%),
    linear-gradient(135deg, rgba(1,33,105,.97), rgba(8,13,38,.98));
  box-shadow:
    0 15px 44px rgba(0,0,0,.42),
    0 0 25px rgba(1,33,105,.14);
  pointer-events: auto;
  animation: britishNearbyStackIn .42s cubic-bezier(.16,1,.3,1) both;
}

.british-nearby-alert.sword-alert {
  background:
    radial-gradient(circle at 12% 50%, rgba(200,16,46,.18), transparent 35%),
    linear-gradient(135deg, #401010, #10142c);
  border-color: rgba(255,80,80,.28);
}

.british-nearby-alert.beans-alert {
  background:
    radial-gradient(circle at 12% 50%, rgba(255,125,19,.17), transparent 35%),
    linear-gradient(135deg, #412009, #16100b);
  border-color: rgba(255,174,85,.25);
}

.british-nearby-alert .british-nearby-avatar {
  width: 48px;
  height: 48px;
  font-size: 25px;
}

.british-nearby-alert .british-ad-label {
  color: #ff7185;
}

.british-nearby-alert strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.28;
}

.british-nearby-alert span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.70);
  font-size: 10px;
  line-height: 1.38;
}

.british-nearby-alert small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.36);
  font-size: 7px;
  line-height: 1.35;
}

.british-nearby-alert .british-ad-close {
  top: 7px;
  right: 7px;
}

/* Make the Union Jack finale stay visible longer. */
.british-flag-flash.active {
  animation: britishFlagFlashV10 3.4s ease-in-out forwards;
}

@keyframes britishNearbyStackIn {
  from {
    opacity: 0;
    transform: translateX(-28px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes britishFlagFlashV10 {
  0% {
    opacity: 0;
    filter: brightness(3.2);
  }
  10% {
    opacity: 1;
    filter: brightness(2.7);
  }
  23% {
    opacity: 1;
    filter: brightness(1.18);
  }
  78% {
    opacity: 1;
    filter: brightness(1);
  }
  90% {
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

@media (max-width: 720px) {
  .british-nearby-stack {
    top: 84px;
    left: 12px;
    right: 12px;
    width: auto;
  }

  .british-nuisance-popup {
    left: 16px !important;
    right: 16px !important;
    width: auto;
  }
}


/* ==========================================================
   VERSION 12 — FIZIX SECRET SWAP + EXTRA HOME ORBIT WORDS
   ========================================================== */

/* Fizix name now activates British Mode */
.british-name-trigger span {
  transition:
    color .24s ease,
    text-shadow .24s ease,
    transform .24s ease;
}

.british-name-trigger:hover span {
  color: #ffffff;
  text-shadow:
    -2px 0 rgba(200,16,46,.72),
     2px 0 rgba(1,33,105,.82),
     0 0 18px rgba(255,255,255,.22);
  transform: translateX(2px);
}

/* Fizix F icon now activates the red glitch easter egg */
.fizix-bum-icon:hover {
  transform: translateY(-3px) rotate(5deg);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 2px rgba(255,20,45,.18),
    0 12px 28px rgba(255,20,45,.18);
}

/* Extra orbit positions for the Home logo.
   These selectors support the current orbit markup plus older compatible class names. */
.orbit-label-4,
.orbit-text-4,
.orbit-word-4 {
  --orbit-angle: 154deg;
}

.orbit-label-5,
.orbit-text-5,
.orbit-word-5 {
  --orbit-angle: 205deg;
}

.orbit-label-6,
.orbit-text-6,
.orbit-word-6 {
  --orbit-angle: 257deg;
}

.orbit-label-7,
.orbit-text-7,
.orbit-word-7 {
  --orbit-angle: 309deg;
}

/* If the orbit labels are absolutely positioned by nth-child, distribute all 7 evenly. */
.logo-orbit .orbit-label:nth-child(1),
.logo-orbit .orbit-text:nth-child(1),
.logo-orbit .orbit-word:nth-child(1) { --orbit-angle: 0deg; }

.logo-orbit .orbit-label:nth-child(2),
.logo-orbit .orbit-text:nth-child(2),
.logo-orbit .orbit-word:nth-child(2) { --orbit-angle: 51.4deg; }

.logo-orbit .orbit-label:nth-child(3),
.logo-orbit .orbit-text:nth-child(3),
.logo-orbit .orbit-word:nth-child(3) { --orbit-angle: 102.8deg; }

.logo-orbit .orbit-label:nth-child(4),
.logo-orbit .orbit-text:nth-child(4),
.logo-orbit .orbit-word:nth-child(4) { --orbit-angle: 154.2deg; }

.logo-orbit .orbit-label:nth-child(5),
.logo-orbit .orbit-text:nth-child(5),
.logo-orbit .orbit-word:nth-child(5) { --orbit-angle: 205.6deg; }

.logo-orbit .orbit-label:nth-child(6),
.logo-orbit .orbit-text:nth-child(6),
.logo-orbit .orbit-word:nth-child(6) { --orbit-angle: 257deg; }

.logo-orbit .orbit-label:nth-child(7),
.logo-orbit .orbit-text:nth-child(7),
.logo-orbit .orbit-word:nth-child(7) { --orbit-angle: 308.4deg; }

.orbit-label-4, .orbit-text-4, .orbit-word-4 { --angle:154deg; --a:154deg; }
.orbit-label-5, .orbit-text-5, .orbit-word-5 { --angle:205deg; --a:205deg; }
.orbit-label-6, .orbit-text-6, .orbit-word-6 { --angle:257deg; --a:257deg; }
.orbit-label-7, .orbit-text-7, .orbit-word-7 { --angle:309deg; --a:309deg; }


/* ==========================================================
   VERSION 13 — HOME LOGO ORBIT POSITION FIX
   ========================================================== */

/* Give every orbit word its own proper starting slot so they do not stack. */
.slot-roblox {
  transform: rotate(8deg);
  width: 50%;
}

.slot-production {
  transform: rotate(58deg);
  width: 53%;
}

.slot-creator {
  transform: rotate(110deg);
  width: 49%;
}

.slot-gaming {
  transform: rotate(162deg);
  width: 48%;
}

.slot-minecraft {
  transform: rotate(214deg);
  width: 52%;
}

.slot-videos {
  transform: rotate(266deg);
  width: 47%;
}

.slot-community {
  transform: rotate(318deg);
  width: 53%;
}

.label-production {
  color: #ffb36e;
}

.label-gaming {
  color: #ffffff;
}

.label-videos {
  color: #8ae9ff;
}

.label-community {
  color: #9ac8ff;
}

/* Slightly reduce padding/font size for long labels so spacing stays cleaner. */
.slot-production .orbit-label,
.slot-community .orbit-label,
.slot-minecraft .orbit-label {
  padding: 7px 11px;
  font-size: 8.5px;
}

/* On narrower layouts, spread them a little farther and keep them readable. */
@media (max-width: 980px) {
  .slot-production,
  .slot-community,
  .slot-minecraft {
    width: 55%;
  }

  .slot-videos,
  .slot-gaming,
  .slot-creator,
  .slot-roblox {
    width: 50%;
  }
}


/* ==========================================================
   VERSION 14 — TOTAL VIDEO VIEWS
   ========================================================== */

.hero-stat-views,
.about-stat-views {
  position: relative;
}

.hero-stat-views::after,
.about-stat-views::after {
  content: "";
  position: absolute;
  inset: auto 12% -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,197,213,.55), transparent);
  opacity: .55;
}

body.british-mode .hero-stat-views::after,
body.british-mode .about-stat-views::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
}


/* ==========================================================
   VERSION 15 — STATS + ORBIT REPAIR
   ========================================================== */

/* Home stats */
.hero-stats-row {
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-stats-row .subscriber-pill {
  margin-top: 0;
  min-width: 205px;
}

.views-pill {
  border-color: rgba(22, 197, 213, .14);
  background: linear-gradient(145deg, rgba(22,197,213,.075), rgba(255,255,255,.018));
}

.views-pill:hover {
  border-color: rgba(22, 197, 213, .35);
}

.views-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #06151b;
  background: linear-gradient(135deg, var(--cyan), var(--cyan2));
  font-size: 17px;
  font-weight: 900;
}

body.british-mode .views-mark {
  color: #071229;
  background: #fff;
}

/* About stats */
.about-stats-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-stats-grid .about-stat {
  margin-top: 0;
  min-width: 0;
}

.about-stat-views {
  border-color: rgba(22, 197, 213, .15);
  background: rgba(22, 197, 213, .055);
}

.about-stat-views::after,
.hero-stat-views::after {
  display: none !important;
  content: none !important;
}

/* Orbit: exactly seven independent slots, evenly phased */
.orbit-label-layer {
  inset: -5%;
}

.orbit-label-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  transform-origin: 0 50%;
}

.slot-minecraft  { width: 53%; transform: rotate(0deg); }
.slot-roblox     { width: 49%; transform: rotate(51.43deg); }
.slot-creator    { width: 50%; transform: rotate(102.86deg); }
.slot-videos     { width: 48%; transform: rotate(154.29deg); }
.slot-community  { width: 54%; transform: rotate(205.72deg); }
.slot-production { width: 55%; transform: rotate(257.15deg); }
.slot-gaming     { width: 49%; transform: rotate(308.58deg); }

.orbit-label {
  left: 100%;
  top: 50%;
  transform: translate(calc(-50% + var(--wp-core-x)), calc(-50% + var(--wp-core-y)));
}

.label-minecraft { color: var(--cyan2); }
.label-roblox { color: var(--orange2); }
.label-creator { color: #78ace6; }
.label-videos { color: #8ae9ff; }
.label-community { color: #9ac8ff; }
.label-production { color: #ffb36e; }
.label-gaming { color: #ffffff; }

.label-minecraft,
.label-community,
.label-production {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 8px;
  letter-spacing: .12em;
}

/* Neutralize old experimental extra-label phase rules. */
.orbit-label-4,
.orbit-label-5,
.orbit-label-6,
.orbit-label-7,
.orbit-text-4,
.orbit-text-5,
.orbit-text-6,
.orbit-text-7,
.orbit-word-4,
.orbit-word-5,
.orbit-word-6,
.orbit-word-7 {
  --orbit-angle: initial;
  --angle: initial;
  --a: initial;
}

@media (max-width: 999px) {
  .hero-stats-row {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero-stats-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-stats-row .subscriber-pill {
    width: 100%;
    min-width: 0;
  }

  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  .slot-minecraft  { width: 56%; }
  .slot-roblox     { width: 51%; }
  .slot-creator    { width: 52%; }
  .slot-videos     { width: 50%; }
  .slot-community  { width: 57%; }
  .slot-production { width: 58%; }
  .slot-gaming     { width: 51%; }
}


/* ==========================================================
   VERSION 16 — COPY / PASTE DETERRENCE
   ========================================================== */

/* Prevent normal text/image selection across the public site. */
html,
body,
body * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Images should not be draggable into another tab/app. */
img,
svg {
  -webkit-user-drag: none;
  user-drag: none;
}

/*
  Keep controls usable. If editable fields are ever added later,
  users can still type into them, but copy/cut is blocked globally by JS.
*/
input,
textarea,
select,
button {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}


/* ==========================================================
   VERSION 18 — BX ANIMATED WALLPAPER MODE
   ========================================================== */

/* The top-left BX Productions brand is the normal Home control. */
.brand {
  cursor: pointer;
}


.hidden-wallpaper-trigger {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.bx-wallpaper-active {
  overflow: hidden !important;
  background: #02070b;
  zoom: 1 !important;
}

body.bx-wallpaper-active > .topbar,
body.bx-wallpaper-active > main,
body.bx-wallpaper-active > .copyright-footer,
body.bx-wallpaper-active > .partnership-terms-fab,
body.bx-wallpaper-active > .particles,
body.bx-wallpaper-active > .british-mode-ui,
body.bx-wallpaper-active > .british-tea-feed,
body.bx-wallpaper-active > .british-nuisance-layer,
body.bx-wallpaper-active > .british-nearby-stack {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.bx-wallpaper {
  --wp-bg: #02080d;
  --wp-bg2: #06151c;
  --wp-a: #16c5d5;
  --wp-a-rgb: 22, 197, 213;
  --wp-b: #3479c7;
  --wp-b-rgb: 52, 121, 199;
  --wp-c: #ff7d13;
  --wp-c-rgb: 255, 125, 19;
  --wp-text: #f4fdff;
  --wp-muted: #8ca6b0;
  --wp-core-x: 0px;
  --wp-core-y: 0px;
  --wp-glow-shift-x: 0px;
  --wp-glow-shift-y: 0px;

  position: fixed;
  inset: 0;
  z-index: 12000;
  display: block;
  overflow: hidden;
  color: var(--wp-text);
  background:
    radial-gradient(circle at calc(50% + var(--wp-glow-shift-x)) calc(46% + var(--wp-glow-shift-y)), rgba(var(--wp-a-rgb), .14), transparent 28%),
    radial-gradient(circle at calc(50% - var(--wp-glow-shift-x)) calc(60% - var(--wp-glow-shift-y)), rgba(var(--wp-b-rgb), .06), transparent 36%),
    linear-gradient(150deg, var(--wp-bg2), var(--wp-bg) 45%, #010406);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.018);
  transition: opacity .65s ease, transform 1s cubic-bezier(.16,1,.3,1), visibility .65s step-end;
  isolation: isolate;
}

.bx-wallpaper.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity .65s ease, transform 1s cubic-bezier(.16,1,.3,1), visibility 0s;
}

/* Theme palettes */
.bx-wallpaper[data-theme="cyber"] {
  --wp-bg: #02030c;
  --wp-bg2: #07122a;
  --wp-a: #00f5ff;
  --wp-a-rgb: 0, 245, 255;
  --wp-b: #7058ff;
  --wp-b-rgb: 112, 88, 255;
  --wp-c: #ea5cff;
  --wp-c-rgb: 234, 92, 255;
}

.bx-wallpaper[data-theme="ember"] {
  --wp-bg: #0c0302;
  --wp-bg2: #260904;
  --wp-a: #ff3b24;
  --wp-a-rgb: 255, 59, 36;
  --wp-b: #ff7a18;
  --wp-b-rgb: 255, 122, 24;
  --wp-c: #ffd35a;
  --wp-c-rgb: 255, 211, 90;
}

.bx-wallpaper[data-theme="matrix"] {
  --wp-bg: #010804;
  --wp-bg2: #071a0e;
  --wp-a: #46ff7b;
  --wp-a-rgb: 70, 255, 123;
  --wp-b: #00d8a2;
  --wp-b-rgb: 0, 216, 162;
  --wp-c: #bcff3f;
  --wp-c-rgb: 188, 255, 63;
}

.bx-wallpaper[data-theme="ultraviolet"] {
  --wp-bg: #06020d;
  --wp-bg2: #19072b;
  --wp-a: #a855f7;
  --wp-a-rgb: 168, 85, 247;
  --wp-b: #4f7cff;
  --wp-b-rgb: 79, 124, 255;
  --wp-c: #ff4fd8;
  --wp-c-rgb: 255, 79, 216;
}

.bx-wallpaper[data-theme="mono"] {
  --wp-bg: #030506;
  --wp-bg2: #101416;
  --wp-a: #f5fbff;
  --wp-a-rgb: 245, 251, 255;
  --wp-b: #7f929d;
  --wp-b-rgb: 127, 146, 157;
  --wp-c: #d5dde1;
  --wp-c-rgb: 213, 221, 225;
}

.bx-wallpaper-backdrop,
.bx-wallpaper-vignette,
.bx-wallpaper-scanlines,
.bx-wallpaper-grid,
.bx-wallpaper-stars,
.bx-wallpaper-streaks,
.bx-wallpaper-comets,
.bx-wallpaper-data-rain,
.bx-wallpaper-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bx-wallpaper-backdrop {
  z-index: -4;
  overflow: hidden;
}

.bx-wallpaper-aurora {
  position: absolute;
  width: 58vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .13;
  mix-blend-mode: screen;
  transition: background 1s ease;
}

.aurora-a {
  left: -18vw;
  top: -27vw;
  background: var(--wp-a);
  animation: bxAuroraA 18s ease-in-out infinite alternate;
}

.aurora-b {
  right: -20vw;
  top: 10vh;
  background: var(--wp-b);
  animation: bxAuroraB 23s ease-in-out infinite alternate;
}

.aurora-c {
  left: 26vw;
  bottom: -38vw;
  background: var(--wp-c);
  opacity: .085;
  animation: bxAuroraC 20s ease-in-out infinite alternate;
}

.bx-wallpaper-grid {
  inset: -24%;
  opacity: .15;
  background-image:
    linear-gradient(rgba(var(--wp-a-rgb), .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--wp-a-rgb), .12) 1px, transparent 1px);
  background-size: 62px 62px;
  transform: perspective(750px) rotateX(67deg) translateY(34%);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,.82) 50%, transparent 88%);
  animation: bxGridTravel 8s linear infinite;
  will-change: transform, background-position;
}

.bx-wallpaper-grid-far {
  opacity: .055;
  background-size: 18px 18px;
  transform: perspective(900px) rotateX(67deg) translateY(18%);
  animation-duration: 16s;
}

.bx-wallpaper-scanlines {
  z-index: 18;
  opacity: .12;
  animation: bxScanlineDrift 12s linear infinite;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.015) 0,
    rgba(255,255,255,.015) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
}

.bx-wallpaper-vignette {
  z-index: 17;
  box-shadow: inset 0 0 190px 65px rgba(0,0,0,.68);
  background: radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.32) 78%, rgba(0,0,0,.72) 100%);
}

.bx-wallpaper-star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  color: var(--wp-a);
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  opacity: var(--star-alpha);
  animation: bxStarPulse var(--star-speed) ease-in-out var(--star-delay) infinite;
}

.bx-wallpaper-star.accent-two { color: var(--wp-b); }
.bx-wallpaper-star.accent-three { color: var(--wp-c); }

.bx-wallpaper-streak {
  position: absolute;
  width: var(--streak-width);
  height: 1px;
  color: var(--wp-a);
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0;
  transform: rotate(-19deg) translateX(-40vw);
  box-shadow: 0 0 8px currentColor;
  animation: bxStreak var(--streak-speed) linear var(--streak-delay) infinite;
}

.bx-wallpaper-streak.streak-two { color: var(--wp-b); }
.bx-wallpaper-streak.streak-three { color: var(--wp-c); }

.bx-wallpaper-comet {
  position: absolute;
  width: var(--comet-length);
  height: 2px;
  color: var(--wp-a);
  background: linear-gradient(90deg, rgba(255,255,255,0), currentColor 45%, rgba(255,255,255,.95) 55%, rgba(255,255,255,0));
  border-radius: 999px;
  opacity: 0;
  transform: rotate(var(--comet-angle)) translateX(-120vw);
  box-shadow: 0 0 12px currentColor;
  animation: bxCometFlight var(--comet-speed) linear var(--comet-delay) infinite;
}

.bx-wallpaper-comet::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  transform: translateY(-50%);
}

.bx-data-stream {
  position: absolute;
  top: -42%;
  left: 0;
  color: rgba(var(--wp-a-rgb), .19);
  font-size: 8px;
  line-height: 1.08;
  letter-spacing: .18em;
  white-space: pre;
  text-shadow: 0 0 12px rgba(var(--wp-a-rgb), .20);
  opacity: .75;
  animation: bxDataFall var(--rain-speed) linear var(--rain-delay) infinite;
}

.bx-data-stream.stream-b { color: rgba(var(--wp-b-rgb), .15); }
.bx-data-stream.stream-c { color: rgba(var(--wp-c-rgb), .14); }

.bx-wallpaper-noise {
  z-index: 16;
  opacity: .085;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22) 0 1px, transparent 1.2px),
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.18) 0 1px, transparent 1.2px),
    radial-gradient(circle at 44% 74%, rgba(255,255,255,.16) 0 1px, transparent 1.2px),
    radial-gradient(circle at 86% 68%, rgba(255,255,255,.14) 0 1px, transparent 1.2px);
  background-size: 140px 140px, 110px 110px, 120px 120px, 95px 95px;
  animation: bxNoiseShift 1.5s steps(5) infinite;
}

.bx-wallpaper-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68vw, 760px);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--wp-core-x)), calc(-50% + var(--wp-core-y)));
  display: grid;
  place-items: center;
  z-index: 5;
  animation: bxCoreBreathe 8s ease-in-out infinite;
}

.bx-core-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg,
      rgba(var(--wp-a-rgb), .48),
      transparent 16%,
      rgba(var(--wp-b-rgb), .36) 34%,
      transparent 54%,
      rgba(var(--wp-c-rgb), .40) 76%,
      transparent 92%,
      rgba(var(--wp-a-rgb), .48));
  filter: blur(38px);
  opacity: .42;
  animation: spin 24s linear infinite;
}

.bx-core-radar {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  overflow: hidden;
  opacity: .28;
  background:
    repeating-radial-gradient(circle, transparent 0 29px, rgba(var(--wp-a-rgb), .11) 30px 31px),
    linear-gradient(90deg, transparent 49.7%, rgba(var(--wp-a-rgb), .18) 50%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(var(--wp-a-rgb), .18) 50%, transparent 50.3%);
  mask-image: radial-gradient(circle, #000 0 66%, transparent 76%);
}

.bx-core-radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 82%, rgba(var(--wp-a-rgb), .20) 92%, rgba(var(--wp-a-rgb), .54) 99.3%, transparent 100%);
  animation: spin 7s linear infinite;
}

.bx-core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--wp-a-rgb), .22);
  box-shadow:
    inset 0 0 30px rgba(var(--wp-a-rgb), .025),
    0 0 30px rgba(var(--wp-a-rgb), .035);
}

.ring-alpha {
  inset: 4%;
  border-style: dashed;
  border-color: rgba(var(--wp-a-rgb), .32);
  background: conic-gradient(from 0deg,
    transparent 0 10%, rgba(var(--wp-a-rgb), .11) 10% 13%, transparent 13% 31%,
    rgba(var(--wp-c-rgb), .10) 31% 34%, transparent 34% 62%,
    rgba(var(--wp-b-rgb), .10) 62% 66%, transparent 66% 100%);
  mask-image: radial-gradient(circle, transparent 0 95%, #000 96% 100%);
  animation: spin 18s linear infinite;
}

.ring-beta {
  inset: 11%;
  border-color: rgba(var(--wp-b-rgb), .34);
  border-left-color: transparent;
  border-bottom-color: rgba(var(--wp-c-rgb), .30);
  background: conic-gradient(from 60deg,
    transparent 0 18%, rgba(var(--wp-b-rgb), .11) 18% 21%, transparent 21% 49%,
    rgba(var(--wp-a-rgb), .10) 49% 53%, transparent 53% 80%,
    rgba(var(--wp-c-rgb), .10) 80% 84%, transparent 84% 100%);
  mask-image: radial-gradient(circle, transparent 0 95%, #000 96% 100%);
  animation: spinReverse 14s linear infinite;
}

.ring-gamma {
  inset: 20%;
  border-width: 2px;
  border-top-color: var(--wp-a);
  border-right-color: transparent;
  border-bottom-color: var(--wp-c);
  border-left-color: transparent;
  filter: drop-shadow(0 0 7px rgba(var(--wp-a-rgb), .42));
  animation: spin 9.5s linear infinite;
}

.ring-delta {
  inset: 27%;
  border-color: rgba(var(--wp-a-rgb), .18);
  border-top-color: rgba(var(--wp-a-rgb), .52);
  border-right-color: rgba(var(--wp-b-rgb), .30);
  border-bottom-color: rgba(var(--wp-c-rgb), .34);
  border-left-color: transparent;
  box-shadow: inset 0 0 28px rgba(var(--wp-a-rgb), .07), 0 0 28px rgba(var(--wp-a-rgb), .07);
  animation: spinReverse 7.5s linear infinite;
}

.bx-core-ring i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp-a);
  box-shadow: 0 0 16px var(--wp-a), 0 0 30px rgba(var(--wp-a-rgb), .5);
}

.ring-alpha i:nth-child(1) { left: 15%; top: 10%; }
.ring-alpha i:nth-child(2) { right: 8%; top: 34%; background: var(--wp-b); }
.ring-alpha i:nth-child(3) { left: 35%; bottom: 3%; background: var(--wp-c); }
.ring-alpha i:nth-child(4) { left: 2%; top: 58%; width: 5px; height: 5px; }
.ring-beta i:nth-child(1) { left: 48%; top: -4px; background: var(--wp-c); }
.ring-beta i:nth-child(2) { right: 10%; bottom: 18%; background: var(--wp-a); }
.ring-beta i:nth-child(3) { left: 5%; bottom: 26%; background: var(--wp-b); }

.ring-delta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp-c);
  box-shadow: 0 0 12px var(--wp-c), 0 0 24px rgba(var(--wp-c-rgb), .45);
  transform: translateX(-50%);
}

.bx-word-flight-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.flight-layer-one { inset: -8%; }
.flight-layer-two { inset: 4%; opacity: .96; }
.flight-layer-three { inset: 15%; opacity: .9; }

.bx-word-flight {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation: bxWordOrbit var(--flight-speed) linear infinite var(--flight-delay);
}

.bx-word-flight span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  padding: 6px 11px;
  transform: translateX(var(--flight-radius));
  border: 1px solid rgba(var(--wp-a-rgb), .18);
  border-radius: 999px;
  background: rgba(5, 16, 23, .84);
  color: rgba(235, 251, 255, .82);
  backdrop-filter: blur(8px);
  font-size: clamp(7px, .62vw, 10px);
  font-weight: 820;
  letter-spacing: .18em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(var(--wp-a-rgb), .22);
  box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 16px rgba(var(--wp-a-rgb), .08);
  animation: bxWordCounterOrbit var(--flight-speed) linear infinite var(--flight-delay), bxWordFloat 2.8s ease-in-out infinite;
}

.bx-word-flight.tone-a span { color: var(--wp-a); }
.bx-word-flight.tone-b span { color: rgba(255,255,255,.9); }
.bx-word-flight.tone-c span { color: var(--wp-c); }

.flight-a { --flight-angle: 0deg; --flight-radius: clamp(270px, 29vw, 390px); --flight-speed: 20s; --flight-delay: -1s; }
.flight-b { --flight-angle: 44deg; --flight-radius: clamp(282px, 30vw, 400px); --flight-speed: 19s; --flight-delay: -3s; }
.flight-c { --flight-angle: 88deg; --flight-radius: clamp(258px, 28vw, 378px); --flight-speed: 17s; --flight-delay: -2s; }
.flight-d { --flight-angle: 132deg; --flight-radius: clamp(282px, 30vw, 400px); --flight-speed: 20s; --flight-delay: -7s; }
.flight-e { --flight-angle: 176deg; --flight-radius: clamp(270px, 29vw, 390px); --flight-speed: 18s; --flight-delay: -4s; }
.flight-f { --flight-angle: 220deg; --flight-radius: clamp(258px, 28vw, 378px); --flight-speed: 15s; --flight-delay: -6s; }
.flight-g { --flight-angle: 268deg; --flight-radius: clamp(282px, 30vw, 400px); --flight-speed: 17s; --flight-delay: -9s; }
.flight-h { --flight-angle: 316deg; --flight-radius: clamp(270px, 29vw, 390px); --flight-speed: 19s; --flight-delay: -5s; }

.flight-i { --flight-angle: 18deg; --flight-radius: clamp(205px, 22vw, 295px); --flight-speed: 14s; --flight-delay: -2s; }
.flight-j { --flight-angle: 66deg; --flight-radius: clamp(218px, 23vw, 308px); --flight-speed: 20s; --flight-delay: -7s; }
.flight-k { --flight-angle: 112deg; --flight-radius: clamp(195px, 21vw, 282px); --flight-speed: 15s; --flight-delay: -1s; }
.flight-l { --flight-angle: 158deg; --flight-radius: clamp(205px, 22vw, 295px); --flight-speed: 17s; --flight-delay: -8s; }
.flight-m { --flight-angle: 204deg; --flight-radius: clamp(218px, 23vw, 308px); --flight-speed: 14s; --flight-delay: -5s; }
.flight-n { --flight-angle: 248deg; --flight-radius: clamp(195px, 21vw, 282px); --flight-speed: 20s; --flight-delay: -3s; }
.flight-o { --flight-angle: 292deg; --flight-radius: clamp(205px, 22vw, 295px); --flight-speed: 15s; --flight-delay: -6s; }
.flight-p { --flight-angle: 338deg; --flight-radius: clamp(218px, 23vw, 308px); --flight-speed: 17s; --flight-delay: -4s; }

.flight-q { --flight-angle: 30deg; --flight-radius: clamp(145px, 16vw, 212px); --flight-speed: 11s; --flight-delay: -2s; }
.flight-r { --flight-angle: 100deg; --flight-radius: clamp(156px, 17vw, 225px); --flight-speed: 13s; --flight-delay: -6s; }
.flight-s { --flight-angle: 160deg; --flight-radius: clamp(136px, 15vw, 198px); --flight-speed: 10s; --flight-delay: -1s; }
.flight-t { --flight-angle: 220deg; --flight-radius: clamp(145px, 16vw, 212px); --flight-speed: 12s; --flight-delay: -5s; }
.flight-u { --flight-angle: 280deg; --flight-radius: clamp(136px, 15vw, 198px); --flight-speed: 11s; --flight-delay: -3s; }
.flight-v { --flight-angle: 340deg; --flight-radius: clamp(145px, 16vw, 212px); --flight-speed: 13s; --flight-delay: -7s; }

.bx-core-logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  z-index: 8;
  border-radius: 50%;
}

.bx-core-logo-halo {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--wp-a-rgb), .22), rgba(var(--wp-b-rgb), .08) 35%, transparent 67%);
  filter: blur(20px);
  animation: bxHalo 4.7s ease-in-out infinite;
}

.bx-core-logo {
  transform-origin: center;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 32px rgba(0,0,0,.52))
    drop-shadow(0 0 20px rgba(var(--wp-a-rgb), .16));
  animation: bxLogoFloat 7s ease-in-out infinite;
}

.bx-core-logo-reflection {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -22%;
  height: 8%;
  border-radius: 50%;
  background: var(--wp-a);
  filter: blur(18px);
  opacity: .12;
  animation: bxReflection 7s ease-in-out infinite;
}

.bx-core-title {
  animation: bxTitleHover 7s ease-in-out infinite;
  position: absolute;
  top: 75%;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 9px;
  text-align: center;
  text-shadow: 0 0 24px rgba(var(--wp-a-rgb), .22);
  z-index: 7;
}

.bx-core-title span,
.bx-core-title strong {
  font-size: clamp(15px, 1.45vw, 24px);
  letter-spacing: .17em;
  line-height: 1;
}

.bx-core-title span { color: var(--wp-a); }
.bx-core-title strong { color: rgba(255,255,255,.88); }
.bx-core-title small {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--wp-muted);
  font-size: 8px;
  letter-spacing: .32em;
}

.bx-wallpaper-hud {
  position: absolute;
  z-index: 8;
  display: flex;
  color: rgba(232, 247, 252, .46);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}

.bx-hud-top-left {
  left: 38px;
  top: 30px;
  align-items: center;
  gap: 10px;
}

.bx-hud-top-left i {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--wp-a), transparent);
}

.bx-hud-top-left small { opacity: .6; }

.bx-hud-top-right {
  right: 38px;
  top: 30px;
  align-items: center;
  gap: 12px;
}

.bx-hud-top-right b {
  color: var(--wp-a);
  font-size: 8px;
  letter-spacing: .18em;
}

.bx-hud-top-right b::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--wp-a);
  box-shadow: 0 0 9px var(--wp-a);
  animation: bxStatusPulse 1.5s ease-in-out infinite;
}

.bx-hud-bottom-left {
  left: 38px;
  bottom: 28px;
  flex-direction: column;
  gap: 5px;
}

.bx-hud-bottom-left span { color: rgba(255,255,255,.32); }

.bx-hud-bottom-right {
  right: 38px;
  bottom: 28px;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
}

.bx-hud-bottom-right span {
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: .15em;
}

.bx-wallpaper-crosshair {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 4;
  opacity: .23;
  background:
    linear-gradient(var(--wp-a), var(--wp-a)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--wp-a), var(--wp-a)) center / 100% 1px no-repeat;
}

.crosshair-a { left: 18%; top: 24%; animation: bxCrossDrift 11s ease-in-out infinite alternate; }
.crosshair-b { right: 16%; bottom: 23%; animation: bxCrossDrift 15s ease-in-out -4s infinite alternate-reverse; }

.bx-wallpaper-side-code {
  animation: bxSideCodeFloat 12s ease-in-out infinite alternate;
  position: absolute;
  z-index: 6;
  top: 50%;
  color: rgba(255,255,255,.16);
  font-size: 7px;
  letter-spacing: .28em;
  white-space: nowrap;
  pointer-events: none;
}

.side-code-left { left: 13px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.side-code-right { right: 13px; transform: translateY(-50%) rotate(90deg); transform-origin: right center; animation-delay: -6s; }

.bx-wallpaper-wave {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 64vw;
  height: 90px;
  transform: translateX(-50%);
  opacity: .18;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--wp-a), var(--wp-b), var(--wp-c), transparent) 0 50% / 100% 1px no-repeat;
  filter: drop-shadow(0 0 5px var(--wp-a));
  mask-image: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 6px);
}

.bx-wallpaper-wave::before,
.bx-wallpaper-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: translateY(8px) scaleX(.92);
  opacity: .5;
}

.bx-wallpaper-wave::after { transform: translateY(-8px) scaleX(.82); opacity: .3; }
.wave-one { top: 18%; animation: bxWave 9s ease-in-out infinite; }
.wave-two { bottom: 14%; animation: bxWave 12s ease-in-out -4s infinite reverse; opacity: .10; }

/* Left edge hover sensor. The control drawer stays hidden until hovered. */
.bx-wallpaper-menu-hover-zone {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 11;
  width: 300px;
  height: 76px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.bx-wallpaper-menu-toggle {
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 13;
  transform: translateX(-50%) translateY(-12px) scale(.96);
  min-width: 112px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--wp-a-rgb), .28);
  border-radius: 999px;
  background: rgba(4, 11, 17, .82);
  color: rgba(255,255,255,.9);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s step-end, transform .28s cubic-bezier(.16,1,.3,1), border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.bx-wallpaper-menu-hover-zone:hover + .bx-wallpaper-menu-toggle,
.bx-wallpaper-menu-toggle:hover,
.bx-wallpaper-menu-toggle:focus-visible,
.bx-wallpaper-menu-toggle[aria-expanded="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .22s ease, visibility 0s, transform .28s cubic-bezier(.16,1,.3,1), border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.bx-wallpaper-menu-toggle:hover,
.bx-wallpaper-menu-toggle[aria-expanded="true"] {
  border-color: rgba(var(--wp-a-rgb), .52);
  background: rgba(7, 18, 28, .9);
  box-shadow: 0 14px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--wp-a-rgb), .12);
}

.bx-wallpaper-menu-toggle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--wp-a);
  box-shadow: 0 0 12px var(--wp-a);
  animation: bxStatusPulse 1.7s ease-in-out infinite;
}

.bx-theme-drawer {
  position: absolute;
  left: 50%;
  top: 68px;
  z-index: 11;
  width: min(92vw, 360px);
  transform: translate(-50%, -18px) scale(.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility .28s step-end;
}

.bx-theme-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), visibility 0s;
}

.bx-theme-drawer-content {
  padding: 22px;
  border: 1px solid rgba(var(--wp-a-rgb), .16);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(var(--wp-a-rgb), .06), transparent 34%),
    rgba(2, 8, 12, .88);
  backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}

.bx-theme-kicker {
  color: var(--wp-a);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .22em;
}

.bx-theme-drawer h2 {
  margin-top: 6px;
  font-size: 20px;
  letter-spacing: -.02em;
}

.bx-theme-note {
  margin-top: 5px;
  color: rgba(255,255,255,.42);
  font-size: 10px;
  line-height: 1.5;
}

.bx-theme-list {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}

.bx-theme-choice,
.bx-wallpaper-exit {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.bx-theme-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 11px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.025);
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.bx-theme-choice:hover,
.bx-theme-choice.active {
  color: white;
  transform: translateX(3px);
  border-color: rgba(var(--wp-a-rgb), .30);
  background: rgba(var(--wp-a-rgb), .075);
}

.bx-theme-choice.active {
  box-shadow: inset 2px 0 0 var(--wp-a);
}

.bx-theme-choice > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bx-theme-choice strong { font-size: 10px; }
.bx-theme-choice small { color: rgba(255,255,255,.34); font-size: 8px; }

.bx-theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 14px rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.20);
}

.swatch-default { background: linear-gradient(135deg, #16c5d5 0 34%, #3479c7 34% 67%, #ff7d13 67%); }
.swatch-cyber { background: linear-gradient(135deg, #00f5ff 0 45%, #7058ff 45% 72%, #ea5cff 72%); }
.swatch-ember { background: linear-gradient(135deg, #ff3b24 0 40%, #ff7a18 40% 72%, #ffd35a 72%); }
.swatch-matrix { background: linear-gradient(135deg, #46ff7b 0 42%, #00d8a2 42% 72%, #bcff3f 72%); }
.swatch-ultraviolet { background: linear-gradient(135deg, #a855f7 0 40%, #4f7cff 40% 70%, #ff4fd8 70%); }
.swatch-mono { background: linear-gradient(135deg, #f5fbff 0 38%, #7f929d 38% 70%, #24292d 70%); }

.bx-theme-divider {
  height: 1px;
  margin: 16px 0 13px;
  background: linear-gradient(90deg, transparent, rgba(var(--wp-a-rgb), .32), transparent);
}

.bx-wallpaper-exit {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(var(--wp-a-rgb), .24);
  border-radius: 10px;
  color: rgba(255,255,255,.72);
  background: rgba(var(--wp-a-rgb), .06);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .08em;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.bx-wallpaper-exit:hover {
  color: white;
  background: rgba(var(--wp-a-rgb), .13);
  transform: translateY(-1px);
}

.bx-theme-escape {
  margin-top: 10px;
  color: rgba(255,255,255,.27);
  font-size: 8px;
  text-align: center;
}

.bx-theme-escape kbd {
  padding: 1px 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: rgba(255,255,255,.035);
  font-family: inherit;
}

@keyframes bxAuroraA {
  to { transform: translate(18vw, 16vh) scale(1.13); opacity: .18; }
}
@keyframes bxAuroraB {
  to { transform: translate(-18vw, -12vh) scale(.88); opacity: .18; }
}
@keyframes bxAuroraC {
  to { transform: translate(10vw, -12vh) scale(1.18); opacity: .12; }
}
@keyframes bxGridTravel {
  to { background-position: 0 62px, 62px 0; }
}
@keyframes bxStarPulse {
  0%, 100% { opacity: calc(var(--star-alpha) * .5); transform: translate(0,0) scale(.8); }
  50% { opacity: var(--star-alpha); transform: translate(var(--star-drift), -16px) scale(1.35); }
}
@keyframes bxStreak {
  0%, 58% { opacity: 0; transform: rotate(-19deg) translateX(-45vw); }
  61% { opacity: .28; }
  74% { opacity: 0; transform: rotate(-19deg) translateX(95vw); }
  100% { opacity: 0; transform: rotate(-19deg) translateX(95vw); }
}
@keyframes bxCoreBreathe {
  0%, 100% { transform: translate(calc(-50% + var(--wp-core-x)), calc(-50% + var(--wp-core-y))) scale(.985); }
  50% { transform: translate(calc(-50% + var(--wp-core-x)), calc(-50% + var(--wp-core-y))) scale(1.015); }
}
@keyframes bxRingPulse {
  0%, 100% { opacity: .42; transform: scale(.98); }
  50% { opacity: .88; transform: scale(1.03); }
}
@keyframes bxHalo {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: .9; transform: scale(1.08); }
}
@keyframes bxLogoFloat {
  0%, 100% { transform: translateY(0) rotate(-.45deg); }
  50% { transform: translateY(-9px) rotate(.45deg); }
}
@keyframes bxReflection {
  0%, 100% { transform: scaleX(.84); opacity: .08; }
  50% { transform: scaleX(1.06); opacity: .15; }
}
@keyframes bxStatusPulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes bxCrossDrift {
  to { transform: translate(26px, -18px) rotate(90deg); opacity: .38; }
}
@keyframes bxWave {
  0%,100% { transform: translateX(-50%) scaleX(.90); opacity: .10; }
  50% { transform: translateX(-50%) scaleX(1.08); opacity: .25; }
}
@keyframes bxScanlineDrift {
  from { background-position: 0 0; }
  to { background-position: 0 120px; }
}
@keyframes bxCometFlight {
  0%, 68% { opacity: 0; transform: rotate(var(--comet-angle)) translateX(-120vw); }
  72% { opacity: .55; }
  88% { opacity: .18; }
  100% { opacity: 0; transform: rotate(var(--comet-angle)) translateX(120vw); }
}
@keyframes bxDataFall {
  0% { transform: translateY(-8%); opacity: 0; }
  8% { opacity: .95; }
  92% { opacity: .28; }
  100% { transform: translateY(138%); opacity: 0; }
}
@keyframes bxNoiseShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-8px, 5px); }
  50% { transform: translate(6px, -3px); }
  75% { transform: translate(2px, 6px); }
  100% { transform: translate(0,0); }
}
@keyframes bxPulseExpand {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34); }
}
@keyframes bxTitleHover {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
@keyframes bxSideCodeFloat {
  0%,100% { opacity: .14; letter-spacing: .28em; }
  50% { opacity: .3; letter-spacing: .42em; }
}
@keyframes bxWordOrbit {
  from { transform: rotate(var(--flight-angle)); }
  to { transform: rotate(calc(var(--flight-angle) + 360deg)); }
}
@keyframes bxWordCounterOrbit {
  from { transform: translateX(var(--flight-radius)) rotate(0deg); }
  to { transform: translateX(var(--flight-radius)) rotate(-360deg); }
}
@keyframes bxWordFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -4px; }
}

@media (max-width: 1050px) {
  .bx-wallpaper-core { width: min(84vw, 700px); }
  .bx-core-logo-wrap { width: 32%; }
  .bx-core-title { top: 78%; }
  .flight-layer-one { inset: -6%; }
  .flight-layer-two { inset: 8%; }
  .flight-layer-three { inset: 18%; }
  .bx-wallpaper-hud { display: none; }
  .bx-theme-drawer { width: min(92vw, 320px); }
  .bx-wallpaper-menu-toggle { top: 16px; }
  .bx-wallpaper-menu-hover-zone { width: 240px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .bx-wallpaper *,
  .bx-wallpaper *::before,
  .bx-wallpaper *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Wallpaper is intentionally an animated visual mode. Keep the orbit words and logo rings moving. */
  .ring-alpha { animation: spin 18s linear infinite !important; }
  .ring-beta { animation: spinReverse 14s linear infinite !important; }
  .ring-gamma { animation: spin 9.5s linear infinite !important; }
  .ring-delta { animation: spinReverse 7.5s linear infinite !important; }

  .bx-word-flight {
    animation-duration: var(--flight-speed) !important;
    animation-iteration-count: infinite !important;
  }

  .bx-word-flight span {
    animation-duration: var(--flight-speed), 2.8s !important;
    animation-iteration-count: infinite, infinite !important;
  }
}



/* ==========================================================
   VERSION 32 — NEWEST YOUTUBE VIDEO
   ========================================================== */
.newest-video-section {
  display: none;
  position: relative;
  padding: 66px 22px 84px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(22,197,213,.07), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(255,125,19,.04), transparent 28%);
}

body[data-view="home"] .newest-video-section {
  display: block;
}

.newest-video-shell {
  width: min(var(--max), 100%);
  margin: 0 auto;
}

.newest-video-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.newest-video-header h2 {
  margin: 6px 0 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .95;
  letter-spacing: -.045em;
}

.newest-video-channel-link {
  color: rgba(255,255,255,.48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .22s ease, transform .22s ease;
}

.newest-video-channel-link:hover {
  color: var(--cyan2);
  transform: translateY(-2px);
}

.newest-video-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .72fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(10,28,38,.94), rgba(4,12,18,.98)),
    radial-gradient(circle at 90% 10%, rgba(22,197,213,.08), transparent 36%);
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
}

.newest-video-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, var(--cyan), var(--blue2), var(--orange), transparent 92%);
  opacity: .78;
}

.newest-video-frame-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  background:
    radial-gradient(circle at center, rgba(22,197,213,.08), transparent 42%),
    #02070b;
  border-right: 1px solid rgba(255,255,255,.065);
}

.newest-video-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.newest-video-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: rgba(255,255,255,.72);
}

.newest-video-loading strong {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.newest-video-loading small {
  color: rgba(255,255,255,.34);
  font-size: 10px;
}

.newest-video-loading-ring {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: var(--cyan);
  border-right-color: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(22,197,213,.08);
  animation: spin 1.2s linear infinite;
}

.newest-video-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(26px, 3.5vw, 48px);
}

.newest-video-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--cyan2);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.newest-video-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: bxStatusPulse 1.6s ease-in-out infinite;
}

.newest-video-info h3 {
  margin: 0;
  max-width: 18ch;
  color: rgba(255,255,255,.94);
  font-size: clamp(21px, 2vw, 31px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.newest-video-info p {
  margin: 14px 0 24px;
  color: rgba(255,255,255,.4);
  font-size: 11px;
  line-height: 1.6;
}

.newest-video-watch {
  margin-top: auto;
}

.newest-video-section.is-error .newest-video-loading-ring {
  animation: none;
  border-color: rgba(255,125,19,.38);
}

.newest-video-section.is-error .newest-video-loading strong {
  color: var(--orange2);
}

@media (max-width: 900px) {
  .newest-video-card {
    grid-template-columns: 1fr;
  }

  .newest-video-frame-wrap {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.065);
  }

  .newest-video-info h3 {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .newest-video-section {
    padding: 48px 16px 66px;
  }

  .newest-video-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .newest-video-card {
    border-radius: 20px;
  }
}


/* VERSION 33 — STATIC NEWEST VIDEO */
.newest-video-frame {
  display: block !important;
  width: 100%;
  height: 100%;
  border: 0;
}
.newest-video-loading { display: none !important; }
.newest-video-section.is-error .newest-video-frame,
.newest-video-section.is-loading .newest-video-frame { display: block !important; }



/* ==========================================================
   VERSION 43 — EVAN SILENT CORNER-APPARITION MODE
   ========================================================== */

.schizo-mode-layer {
  position: fixed;
  inset: 0;
  z-index: 11500;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility .5s step-end;
}

.schizo-mode-layer.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility 0s;
}

.schizo-mode-layer.ending {
  opacity: 0;
  transition: opacity 1.5s ease;
}

body.schizo-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 11499;
  pointer-events: none;
  opacity: .11;
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.55), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(0,0,0,.52), transparent 24%),
    radial-gradient(circle at 0 100%, rgba(0,0,0,.5), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.54), transparent 24%);
  animation: schizoCornerPulse 5.8s ease-in-out infinite;
}

.schizo-apparition {
  position: absolute;
  width: 86px;
  height: 132px;
  opacity: 0;
  transform: scale(calc(var(--schizo-scale) * .78)) rotate(var(--schizo-tilt));
  filter: blur(.5px) drop-shadow(0 0 16px rgba(0,0,0,.78));
  transition: opacity .38s ease, transform .55s cubic-bezier(.16,1,.3,1), filter .4s ease;
  transform-origin: center bottom;
}

.schizo-apparition.visible {
  opacity: .72;
  transform: scale(var(--schizo-scale)) rotate(var(--schizo-tilt));
}

.schizo-apparition.corner-tl { left: var(--schizo-edge); top: var(--schizo-depth); }
.schizo-apparition.corner-tr { right: var(--schizo-edge); top: var(--schizo-depth); }
.schizo-apparition.corner-bl { left: var(--schizo-edge); bottom: var(--schizo-depth); }
.schizo-apparition.corner-br { right: var(--schizo-edge); bottom: var(--schizo-depth); }

.schizo-apparition.type-shadow,
.schizo-apparition.type-figure {
  border-radius: 50% 50% 18% 18% / 28% 28% 72% 72%;
  background: linear-gradient(to bottom, rgba(1,4,6,.96), rgba(1,3,5,.72) 68%, transparent 100%);
}

.schizo-apparition.type-figure {
  width: 62px;
  height: 158px;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.83) 62%, transparent 100%);
}

.schizo-apparition.type-figure.visible { opacity: .58; }

.schizo-head {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 38px;
  height: 42px;
  border-radius: 48%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.96);
  box-shadow: 0 0 18px rgba(0,0,0,.7);
}

.schizo-body {
  position: absolute;
  left: 50%;
  top: 37px;
  width: 72px;
  height: 90px;
  border-radius: 48% 48% 18% 18%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(0,0,0,.94), rgba(0,0,0,.5), transparent);
}

.schizo-apparition.type-eyes {
  width: 72px;
  height: 38px;
  filter: blur(.25px) drop-shadow(0 0 12px rgba(255,255,255,.08));
}

.schizo-eye {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 4px;
  border-radius: 50%;
  background: rgba(230,245,248,.78);
  box-shadow: 0 0 8px rgba(220,245,255,.35);
}

.schizo-eye.eye-left { left: 19px; transform: rotate(7deg); }
.schizo-eye.eye-right { right: 19px; transform: rotate(-7deg); }

.schizo-apparition.type-static {
  width: 110px;
  height: 78px;
  display: grid;
  gap: 5px;
  align-content: center;
  filter: none;
}

.schizo-apparition.type-static span {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,220,230,.26), rgba(255,255,255,.42), transparent);
  animation: schizoStaticShift .16s steps(2) infinite alternate;
}

.schizo-apparition.type-static span:nth-child(2) { width: 72%; margin-left: 16%; animation-delay: -.05s; }
.schizo-apparition.type-static span:nth-child(3) { width: 46%; margin-left: 40%; animation-delay: -.11s; }
.schizo-apparition.type-static span:nth-child(4) { width: 80%; margin-left: 3%; animation-delay: -.08s; }

@keyframes schizoCornerPulse {
  0%,100% { opacity: .07; }
  50% { opacity: .16; }
}

@keyframes schizoStaticShift {
  from { transform: translateX(-4px); opacity: .3; }
  to { transform: translateX(5px); opacity: .8; }
}

/* ==========================================================
   VERSION 41 — DOOMJ0Y "UNC MODE" XP-ERA EASTER EGG
   ========================================================== */

.doom-unc-trigger {
  position: relative;
  display: inline-block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  isolation: isolate;
}

.doom-unc-trigger::before,
.doom-unc-trigger::after {
  content: "🕸";
  position: absolute;
  z-index: -1;
  color: rgba(225, 238, 246, .72);
  font-size: 34px;
  line-height: 1;
  opacity: 0;
  filter: grayscale(1) drop-shadow(0 0 6px rgba(190,220,235,.18));
  pointer-events: none;
  transition: opacity .24s ease, transform .34s cubic-bezier(.16,1,.3,1);
}

.doom-unc-trigger::before {
  left: -28px;
  top: -22px;
  transform: translate(-8px,-5px) rotate(-24deg) scale(.65);
}

.doom-unc-trigger::after {
  right: -34px;
  bottom: -22px;
  transform: translate(8px,5px) rotate(28deg) scale(.65);
}

.doom-unc-trigger:hover::before,
.doom-unc-trigger:hover::after,
.doom-unc-trigger:focus-visible::before,
.doom-unc-trigger:focus-visible::after {
  opacity: .9;
  transform: translate(0,0) rotate(0deg) scale(1);
}

.doom-unc-trigger span {
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
  transition: transform .22s ease, color .22s ease, text-shadow .22s ease;
}

.doom-unc-trigger:hover span,
.doom-unc-trigger.active span {
  color: #8fc5ff;
  transform: translateX(2px);
  text-shadow: 1px 1px 0 #0a246a;
}

.unc-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 17000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s linear, visibility .12s step-end;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

.unc-boot-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .12s linear, visibility 0s;
}

.unc-shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 18000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(255,255,255,.28);
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font: 700 10px Tahoma, Verdana, Arial, sans-serif;
  letter-spacing: .28em;
}

.unc-shutdown-overlay.active {
  visibility: visible;
  pointer-events: auto;
  animation: uncScreenPowerOff 1.55s ease-in-out both;
}

.unc-shutdown-overlay span {
  position: absolute;
  left: 50%;
  top: calc(50% + 38px);
  transform: translateX(-50%);
  opacity: 0;
  animation: uncOffLabel 1.55s linear both;
}

.unc-crt-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 34px rgba(180,220,255,.68);
  opacity: 0;
  transform: translate(-50%,-50%) scaleX(.02);
  animation: uncCrtCollapse 1.55s cubic-bezier(.7,0,.2,1) both;
}

body.unc-mode-booting,
body.unc-mode-booting * {
  cursor: wait !important;
}

.unc-boot-window {
  width: min(92vw, 520px);
  color: #000;
  background: #ece9d8;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.55);
}

.unc-titlebar {
  height: 30px;
  padding: 0 6px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: linear-gradient(90deg, #0a246a, #3a6ea5 58%, #0a246a);
  font-size: 12px;
  font-weight: 700;
}

.unc-titlebar b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #fff;
  background: #d44831;
  font-size: 13px;
  line-height: 1;
}

.unc-boot-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px 16px;
  align-items: center;
}

.unc-computer-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #0a246a;
  background: #c0c0c0;
  border: 2px inset #fff;
  font-size: 32px;
}

.unc-boot-copy h2 {
  margin: 0;
  color: #000;
  font: 700 18px Tahoma, Verdana, Arial, sans-serif;
}

.unc-boot-copy p {
  margin: 7px 0 0;
  min-height: 28px;
  color: #222;
  font: 11px/1.45 Tahoma, Verdana, Arial, sans-serif;
}

.unc-progress-shell {
  grid-column: 1 / -1;
  height: 20px;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border: 2px inset #ece9d8;
}

.unc-progress-bar {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #0a8f08 0 11px, #3ad33a 11px 14px, #0a8f08 14px 17px);
  transition: width .08s linear;
}

.unc-progress-text {
  grid-column: 1 / -1;
  justify-self: end;
  color: #222;
  font: 11px Tahoma, Verdana, Arial, sans-serif;
}

.unc-mode-ui {
  position: fixed;
  right: 18px;
  top: 82px;
  z-index: 13000;
  display: none;
  width: min(310px, calc(100vw - 36px));
  color: #000;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

.unc-mode-ui.active {
  display: block;
}

.unc-mode-ui-title {
  padding: 5px 7px;
  color: #fff;
  background: #0a246a;
  font-size: 11px;
  font-weight: 700;
}

.unc-mode-ui span {
  display: block;
  padding: 9px;
  font-size: 10px;
  line-height: 1.35;
}

.unc-taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12900;
  display: none;
  height: 38px;
  padding: 3px 7px 3px 3px;
  align-items: stretch;
  gap: 5px;
  background: linear-gradient(#245edb, #1941a5 48%, #245edb);
  border-top: 2px solid #5fa0ff;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  box-shadow: 0 -2px 6px rgba(0,0,0,.35);
}

.unc-taskbar.active {
  display: flex;
}

.unc-start-button {
  min-width: 82px;
  padding: 0 15px 0 10px;
  border: 0;
  border-radius: 0 15px 15px 0;
  color: #fff;
  background: linear-gradient(#64b95b, #278128 48%, #43a443);
  font: italic 700 16px Tahoma, Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 1px #184b15;
}

.unc-task-button {
  width: min(320px, 44vw);
  padding: 0 11px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #3c81e8;
  border: 1px solid #75a8ef;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.28);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.unc-tray {
  margin-left: auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: #0b88d9;
  border-left: 1px solid rgba(255,255,255,.35);
  font-size: 10px;
}

body.unc-mode {
  --unc-blue: #0a246a;
  --unc-panel: #ece9d8;
  zoom: 1 !important;
  color: #000 !important;
  background: #3a6ea5 !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode::after {
  content: "";
  position: fixed;
  inset: 0 0 38px;
  z-index: -1;
  pointer-events: none;
  opacity: .13;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
}

body.unc-mode .particles,
body.unc-mode .swirl-ring,
body.unc-mode .orbit-label-layer,
body.unc-mode .logo-ring,
body.unc-mode .logo-stage::before {
  display: none !important;
}

body.unc-mode .topbar {
  background: #ece9d8 !important;
  border-bottom: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  box-shadow: 0 2px 0 #404040 !important;
  backdrop-filter: none !important;
}

body.unc-mode .brand,
body.unc-mode .brand strong {
  color: #000 !important;
  text-shadow: none !important;
}

body.unc-mode .brand img {
  filter: none !important;
}

body.unc-mode .nav-view-button,
body.unc-mode .nav-youtube,
body.unc-mode .nav-discord,
body.unc-mode .button,
body.unc-mode .newest-video-channel-link,
body.unc-mode .partnership-terms-fab {
  border: 2px solid !important;
  border-color: #fff #555 #555 #fff !important;
  border-radius: 0 !important;
  color: #000 !important;
  background: #ece9d8 !important;
  box-shadow: 1px 1px 0 #000 !important;
  text-shadow: none !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode .nav-view-button.active,
body.unc-mode .button-primary {
  color: #fff !important;
  background: #0a246a !important;
  border-color: #4e89db #021a4d #021a4d #4e89db !important;
}

body.unc-mode .page-view,
body.unc-mode .newest-video-section {
  background: #3a6ea5 !important;
  background-image: none !important;
}

body.unc-mode :is(
  .hero-copy,
  .hero-art,
  .team-header,
  .team-card,
  .evan-message,
  .subpage-header,
  .about-profile-card,
  .about-story-card,
  .program-card,
  .partnership-information,
  .recording-header,
  .recording-intro,
  .perk-card,
  .recording-guideline,
  .merch-header,
  .merch-card,
  .newest-video-card
) {
  color: #000 !important;
  background: #ece9d8 !important;
  background-image: none !important;
  border: 2px solid !important;
  border-color: #fff #707070 #707070 #fff !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.42) !important;
  filter: none !important;
}

body.unc-mode .logo-stage {
  background: #fff !important;
  border: 3px inset #ece9d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.unc-mode .logo-safe-zone img,
body.unc-mode .team-avatar img,
body.unc-mode .team-header-mark img {
  filter: none !important;
  image-rendering: pixelated;
}

body.unc-mode :is(h1,h2,h3,.hero-title,.section-title,.team-card h2,.evan-schizo-trigger span) {
  color: #000080 !important;
  text-shadow: none !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode .hero-title span,
body.unc-mode .section-kicker,
body.unc-mode .team-role-label,
body.unc-mode .eyebrow,
body.unc-mode .micro-label {
  color: #800000 !important;
  text-shadow: none !important;
}

body.unc-mode .page-view p,
body.unc-mode .page-view li,
body.unc-mode .page-view blockquote,
body.unc-mode .page-view small,
body.unc-mode .page-view .team-handle,
body.unc-mode .newest-video-section p {
  color: #111 !important;
  text-shadow: none !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode .marquee {
  color: #fff !important;
  background: #000080 !important;
  border-top: 2px inset #ece9d8 !important;
  border-bottom: 2px inset #ece9d8 !important;
  box-shadow: none !important;
}

body.unc-mode .marquee * {
  color: #fff !important;
  text-shadow: none !important;
}

body.unc-mode .newest-video-frame-wrap {
  border: 3px inset #ece9d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.unc-mode .copyright-footer {
  margin-bottom: 38px;
  color: #000 !important;
  background: #ece9d8 !important;
  border-top: 2px solid #808080 !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode .doom-unc-trigger span {
  color: #000080 !important;
  text-decoration: underline;
  text-shadow: none !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.unc-mode .doom-unc-trigger span::after {
  content: "  [UNC MODE]";
  color: #800000;
  font-size: 10px;
  text-decoration: none;
}

@keyframes uncScreenPowerOff {
  0% { opacity: 0; }
  10% { opacity: .18; }
  24%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes uncCrtCollapse {
  0%, 8% { opacity: 0; transform: translate(-50%,-50%) scaleX(1) scaleY(120); }
  18% { opacity: .95; transform: translate(-50%,-50%) scaleX(1) scaleY(1); }
  42% { opacity: 1; transform: translate(-50%,-50%) scaleX(.06) scaleY(1); }
  52% { opacity: 1; transform: translate(-50%,-50%) scaleX(.015) scaleY(.55); }
  68%, 100% { opacity: 0; transform: translate(-50%,-50%) scaleX(.005) scaleY(.25); }
}

@keyframes uncOffLabel {
  0%, 32% { opacity: 0; }
  46%, 72% { opacity: .55; }
  100% { opacity: 0; }
}

@media (max-width: 720px) {
  .unc-mode-ui { top: 70px; right: 8px; width: calc(100vw - 16px); }
  .unc-task-button { display: none; }
  .unc-start-button { min-width: 70px; }
  .unc-boot-body { grid-template-columns: 42px 1fr; padding: 18px; }
  .unc-computer-icon { width: 40px; height: 40px; font-size: 25px; }
}


/* ==========================================================
   VERSION 45 — PERMANENT BX DEV UI
   Press . to toggle. Deliberately isolated from all site Modes.
   ========================================================== */
.bx-dev-ui {
  all: initial;
  position: fixed !important;
  left: 24px !important;
  top: 92px !important;
  z-index: 2147483000 !important;
  display: none !important;
  width: 286px !important;
  max-width: calc(100vw - 24px) !important;
  overflow: hidden !important;
  color: #dffcff !important;
  background: rgba(3, 11, 17, .97) !important;
  border: 1px solid rgba(22, 197, 213, .56) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.035) inset !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  letter-spacing: normal !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  isolation: isolate !important;
  contain: layout style paint !important;
  color-scheme: dark !important;
  user-select: none !important;
}

.bx-dev-ui.open { display: block !important; }

.bx-dev-ui,
.bx-dev-ui * {
  box-sizing: border-box !important;
  text-shadow: none !important;
  filter: none !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

.bx-dev-titlebar {
  height: 42px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #effdff !important;
  background: linear-gradient(90deg, rgba(22,197,213,.18), rgba(52,121,199,.08)) !important;
  border-bottom: 1px solid rgba(22,197,213,.24) !important;
  cursor: grab !important;
  touch-action: none !important;
}

.bx-dev-titlebar:active { cursor: grabbing !important; }

.bx-dev-titlegroup {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bx-dev-dot {
  width: 7px !important;
  height: 7px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #16c5d5 !important;
  box-shadow: 0 0 12px rgba(22,197,213,.85) !important;
}

.bx-dev-title {
  color: #eafdff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
}

.bx-dev-key {
  min-width: 24px !important;
  height: 22px !important;
  padding: 0 7px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.58) !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.bx-dev-body {
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  background: rgba(2,8,12,.985) !important;
}

.bx-dev-section-label {
  color: rgba(120,240,242,.6) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
}

.bx-dev-mode-list {
  display: grid !important;
  gap: 5px !important;
}

.bx-dev-mode-row,
.bx-dev-system-row {
  min-height: 31px !important;
  padding: 7px 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: rgba(238,250,253,.75) !important;
  background: rgba(255,255,255,.028) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.bx-dev-mode-row > span,
.bx-dev-system-row > span { color: rgba(238,250,253,.72) !important; }

.bx-dev-status,
.bx-dev-system-row b {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.35) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

.bx-dev-mode-row.active {
  border-color: rgba(22,197,213,.35) !important;
  background: rgba(22,197,213,.07) !important;
}
.bx-dev-mode-row.active .bx-dev-status { color: #78f0f2 !important; }
.bx-dev-mode-row.ending .bx-dev-status,
.bx-dev-mode-row.booting .bx-dev-status { color: #ffae55 !important; }
.bx-dev-system-row.active b { color: #78f0f2 !important; }

.bx-dev-highlight-button {
  all: initial;
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: #eafdff !important;
  background: rgba(52,121,199,.09) !important;
  border: 1px solid rgba(52,121,199,.28) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.bx-dev-highlight-button:hover {
  background: rgba(22,197,213,.10) !important;
  border-color: rgba(22,197,213,.42) !important;
}

.bx-dev-highlight-button b {
  color: rgba(255,255,255,.34) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
}

.bx-dev-highlight-button[aria-pressed="true"] {
  border-color: rgba(22,197,213,.55) !important;
  background: rgba(22,197,213,.12) !important;
}
.bx-dev-highlight-button[aria-pressed="true"] b { color: #78f0f2 !important; }

.bx-dev-click-count {
  color: rgba(255,255,255,.30) !important;
  font-size: 8px !important;
  text-align: center !important;
}

.bx-dev-help {
  padding-top: 4px !important;
  color: rgba(255,255,255,.26) !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
  font-size: 8px !important;
  text-align: center !important;
}

.bx-dev-help kbd {
  padding: 1px 4px !important;
  color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 4px !important;
  font-family: monospace !important;
  font-size: 8px !important;
}

/* Keep the panel itself unchanged even during the old-computer wait cursor. */
body.unc-mode-booting #bxDevUi,
body.unc-mode-booting #bxDevUi * { cursor: default !important; }
body.unc-mode-booting #bxDevDragHandle { cursor: grab !important; }
body.unc-mode-booting #bxDevDragHandle:active { cursor: grabbing !important; }
body.unc-mode-booting #bxDevHighlightButton { cursor: pointer !important; }

@media (min-width: 1000px) {
  body.unc-mode #bxDevUi,
  body.bx-wallpaper-active #bxDevUi {
    zoom: .86 !important;
  }
}

/* Dev click-target overlay. This sits outside all Mode styling. */
.bx-dev-clickable-target {
  outline: 2px solid #16c5d5 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 18px rgba(22,197,213,.45) !important;
  animation: bxDevClickablePulse 1.15s ease-in-out infinite alternate !important;
}

@keyframes bxDevClickablePulse {
  from { outline-color: rgba(22,197,213,.6); }
  to { outline-color: rgba(120,240,242,1); }
}

@media (max-width: 520px) {
  .bx-dev-ui {
    left: 12px !important;
    top: 72px !important;
    width: min(286px, calc(100vw - 24px)) !important;
  }
}


/* ==========================================================
   VERSION 46 — DEV INSPECTOR + SCHIZOPHRENIA MODE FIXES
   ========================================================== */

/* Make Evan's silent corner effects visibly readable on the dark site. */
.schizo-mode-layer {
  z-index: 15000 !important;
}

.schizo-apparition {
  z-index: 1 !important;
  width: 108px;
  height: 164px;
  filter: blur(.2px) drop-shadow(0 0 22px rgba(0,0,0,.92)) drop-shadow(0 0 2px rgba(210,235,240,.16));
}

.schizo-apparition.visible { opacity: .92; }
.schizo-apparition.type-figure.visible { opacity: .78; }
.schizo-apparition.type-eyes.visible { opacity: 1; }
.schizo-eye {
  width: 10px;
  height: 5px;
  background: rgba(242,252,255,.95);
  box-shadow: 0 0 11px rgba(220,245,255,.72), 0 0 24px rgba(220,245,255,.25);
}
.schizo-apparition.type-static span {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(180,220,230,.38), rgba(255,255,255,.72), transparent);
}

/* The developer panel must never resize/zoom with a Mode. */
body.unc-mode #bxDevUi,
body.bx-wallpaper-active #bxDevUi,
body.british-mode #bxDevUi,
body.schizo-mode #bxDevUi {
  zoom: 1 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.bx-dev-ui {
  width: 354px !important;
}

.bx-dev-body {
  gap: 9px !important;
}

.bx-dev-mode-row {
  min-height: 48px !important;
  padding: 7px !important;
  align-items: stretch !important;
}

.bx-dev-mode-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
}

.bx-dev-mode-copy > span {
  color: rgba(238,250,253,.82) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bx-dev-mode-meta {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.bx-dev-mode-meta small {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.46) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.bx-dev-mode-toggle {
  all: initial;
  flex: 0 0 58px !important;
  min-height: 32px !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(230,251,253,.8) !important;
  background: rgba(22,197,213,.075) !important;
  border: 1px solid rgba(22,197,213,.22) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  cursor: pointer !important;
}

.bx-dev-mode-row.active .bx-dev-mode-toggle {
  color: #ffd6d6 !important;
  background: rgba(255,80,80,.08) !important;
  border-color: rgba(255,100,100,.28) !important;
}

.bx-dev-mode-toggle:hover {
  border-color: rgba(120,240,242,.58) !important;
  background: rgba(22,197,213,.13) !important;
}

.bx-dev-system-grid {
  display: grid !important;
  gap: 5px !important;
}


.bx-dev-mode-highlight-button {
  background: rgba(255,126,54,.065) !important;
  border-color: rgba(255,126,54,.24) !important;
}

.bx-dev-mode-highlight-button[aria-pressed="true"] {
  background: rgba(255,126,54,.12) !important;
  border-color: rgba(255,160,80,.55) !important;
}
.bx-dev-mode-highlight-button[aria-pressed="true"] b { color: #ffc078 !important; }

/* Orange inspector outline = visual element created by a Mode. */
.bx-dev-mode-effect-target {
  outline: 3px solid #ff9b4a !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.82), 0 0 24px rgba(255,133,62,.65) !important;
}

/* Keep both inspector outlines visible if an element is also clickable. */
.bx-dev-clickable-target.bx-dev-mode-effect-target {
  outline: 3px solid #ff9b4a !important;
  box-shadow: 0 0 0 2px #16c5d5, 0 0 26px rgba(255,133,62,.68) !important;
}

body.unc-mode-booting #bxDevUi .bx-dev-mode-toggle,
body.unc-mode-booting #bxDevUi .bx-dev-highlight-button {
  cursor: pointer !important;
}

@media (max-width: 520px) {
  .bx-dev-ui {
    width: min(354px, calc(100vw - 24px)) !important;
  }
}


/* ==========================================================
   VERSION 47 — PASSWORD DEV UI + MODE HOVER/SHADOW UPDATES
   ========================================================== */

/* Move Fizix's old red/blue split hover treatment to Evan. */
.british-name-trigger:hover span,
.british-name-trigger:focus-visible span {
  color: inherit;
  text-shadow: none;
  transform: none;
}

.evan-schizo-trigger span {
  transition: color .24s ease, text-shadow .24s ease, transform .24s ease;
}

.evan-schizo-trigger:hover span,
.evan-schizo-trigger:focus-visible span {
  color: #ffffff;
  text-shadow:
    -2px 0 rgba(200,16,46,.72),
     2px 0 rgba(1,33,105,.82),
     0 0 18px rgba(255,255,255,.22);
  transform: translateX(2px);
}

/* Fizix now gets British flags that pop out like DoomJ0y's cobwebs. */
.british-name-trigger {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.british-name-trigger::before,
.british-name-trigger::after {
  content: "🇬🇧";
  position: absolute;
  z-index: -1;
  font-size: 31px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.18));
  transition: opacity .22s ease, transform .34s cubic-bezier(.16,1,.3,1);
}

.british-name-trigger::before {
  left: -37px;
  top: -23px;
  transform: translate(-10px,-6px) rotate(-18deg) scale(.55);
}

.british-name-trigger::after {
  right: -42px;
  bottom: -22px;
  transform: translate(10px,6px) rotate(18deg) scale(.55);
}

.british-name-trigger:hover::before,
.british-name-trigger:hover::after,
.british-name-trigger:focus-visible::before,
.british-name-trigger:focus-visible::after {
  opacity: 1;
}

.british-name-trigger:hover::before,
.british-name-trigger:focus-visible::before {
  transform: translate(0,0) rotate(-7deg) scale(1);
}

.british-name-trigger:hover::after,
.british-name-trigger:focus-visible::after {
  transform: translate(0,0) rotate(7deg) scale(1);
}

/* Schizophrenia Mode: stronger edge pressure + shadow hand that steals controls. */
body.schizo-mode::before {
  opacity: .18 !important;
  animation-duration: 3.6s !important;
}

.schizo-stolen-target {
  position: relative !important;
  will-change: transform, filter !important;
}

.schizo-steal-shadow {
  position: absolute;
  width: 126px;
  height: 58px;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.55) rotate(-12deg);
  transform-origin: 10% 50%;
  filter: blur(.35px) drop-shadow(0 0 18px rgba(0,0,0,.95));
}

.schizo-steal-shadow.active {
  animation: schizoShadowSteal 1.25s cubic-bezier(.16,1,.3,1) forwards;
}

.schizo-steal-arm {
  position: absolute;
  left: 0;
  top: 19px;
  width: 96px;
  height: 24px;
  border-radius: 100% 35% 35% 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.88) 28%, rgba(0,0,0,.98));
  box-shadow: 0 0 22px rgba(0,0,0,.82);
}

.schizo-steal-hand {
  position: absolute;
  right: 0;
  top: 10px;
  width: 42px;
  height: 38px;
  border-radius: 55% 38% 48% 52%;
  background: rgba(0,0,0,.98);
  box-shadow:
    10px -9px 0 -7px rgba(0,0,0,.98),
    12px 0 0 -7px rgba(0,0,0,.98),
    9px 10px 0 -7px rgba(0,0,0,.98),
    0 0 20px rgba(0,0,0,.85);
}

@keyframes schizoShadowSteal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45) rotate(-14deg);
  }
  18% { opacity: .96; }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
  }
  78% {
    opacity: .9;
    transform: translate(calc(-50% + var(--schizo-steal-x)), calc(-50% + var(--schizo-steal-y))) scale(1) rotate(7deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--schizo-steal-x)), calc(-50% + var(--schizo-steal-y))) scale(.82) rotate(12deg);
  }
}

/* Dev UI password prompt is browser-native; the panel remains visually isolated after unlock. */
.bx-dev-ui {
  z-index: 2147483000 !important;
}


/* ==========================================================
   VERSION 48 — BRITISH MODE VOYAGE INTRO
   Animated ocean + old sailing ship before British Mode begins.
   ========================================================== */
.british-voyage-intro {
  position: fixed;
  inset: 0;
  z-index: 249500;
  display: none;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
  color: #f8f1dc;
  background:
    linear-gradient(180deg, #6e9fc2 0%, #97bdd3 31%, #d5d4bd 54%, #3b6f82 55%, #123c53 100%);
  opacity: 0;
}

.british-voyage-intro.active {
  display: block;
  animation: britishVoyageCurtain 5.2s ease both;
}

.british-voyage-sky {
  position: absolute;
  inset: 0 0 43%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, #6b9cbc, #b8ced7 76%, #d8d0b1);
}

.british-voyage-sun {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,231,160,.82);
  box-shadow: 0 0 48px rgba(255,231,160,.46);
  filter: blur(.2px);
}

.british-voyage-cloud {
  position: absolute;
  width: 190px;
  height: 34px;
  border-radius: 50%;
  background: rgba(239,240,226,.72);
  filter: blur(1px);
  opacity: .78;
}

.british-voyage-cloud::before,
.british-voyage-cloud::after {
  content: "";
  position: absolute;
  bottom: 3px;
  border-radius: 50%;
  background: inherit;
}

.british-voyage-cloud::before { left: 29px; width: 74px; height: 62px; }
.british-voyage-cloud::after { right: 28px; width: 92px; height: 72px; }
.british-voyage-cloud.cloud-a { top: 21%; left: -12%; animation: britishCloudDrift 18s linear infinite; }
.british-voyage-cloud.cloud-b { top: 38%; left: 37%; transform: scale(.68); opacity: .48; animation: britishCloudDrift 24s -8s linear infinite; }
.british-voyage-cloud.cloud-c { top: 12%; left: 72%; transform: scale(.52); opacity: .40; animation: britishCloudDrift 29s -16s linear infinite; }

.british-voyage-copy {
  position: absolute;
  z-index: 15;
  top: clamp(34px, 8vh, 84px);
  left: 50%;
  width: min(760px, calc(100vw - 40px));
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 2px 1px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.28);
  animation: britishVoyageCopy 5.2s ease both;
}

.british-voyage-copy::after {
  content: "";
  display: block;
  width: min(420px, 72vw);
  height: 1px;
  margin: 15px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,244,211,.85), transparent);
}

.british-voyage-kicker {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,248,222,.70);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
}

.british-voyage-copy strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 4.1vw, 56px);
  line-height: 1;
  letter-spacing: .055em;
  color: #fff7db;
}

.british-voyage-copy small {
  display: block;
  margin-top: 10px;
  color: rgba(252,246,225,.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 1.3vw, 15px);
  font-style: italic;
  letter-spacing: .035em;
}

.british-voyage-ship {
  position: absolute;
  z-index: 9;
  left: -36vw;
  bottom: 20%;
  width: clamp(300px, 39vw, 610px);
  aspect-ratio: 2 / 1.12;
  animation: britishShipSail 5.2s cubic-bezier(.18,.64,.26,1) both;
}

.british-voyage-ship-body {
  position: absolute;
  inset: 0;
  transform-origin: 48% 78%;
  animation: britishShipBob 1.35s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 10px rgba(0,0,0,.30));
}

.british-ship-hull {
  position: absolute;
  left: 11%;
  right: 4%;
  bottom: 9%;
  height: 24%;
  clip-path: polygon(0 0, 100% 4%, 88% 74%, 70% 100%, 19% 93%, 5% 63%);
  background:
    linear-gradient(180deg, #8b5b31 0 19%, #3c2115 20% 26%, #69401f 27% 60%, #2a1812 61% 69%, #4b2a18 70% 100%);
  border-top: 3px solid #d5a568;
}

.british-ship-deck {
  position: absolute;
  left: 20%;
  bottom: 31%;
  width: 61%;
  height: 5%;
  border-radius: 2px;
  background: #a87843;
  box-shadow: 0 -4px 0 #3c2415;
}

.british-ship-mast {
  position: absolute;
  z-index: 5;
  bottom: 31%;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4b2d18, #bd8a50 46%, #553019);
  box-shadow: 1px 0 0 rgba(255,255,255,.14);
}

.british-ship-mast.mast-main { left: 52%; height: 62%; }
.british-ship-mast.mast-rear { left: 29%; height: 47%; }

.british-ship-yard {
  position: absolute;
  z-index: 6;
  height: 4px;
  border-radius: 4px;
  background: #4a2a17;
}
.british-ship-yard.yard-main { left: 31%; top: 27%; width: 43%; transform: rotate(-1deg); }
.british-ship-yard.yard-rear { left: 18%; top: 38%; width: 25%; transform: rotate(2deg); }

.british-ship-sail {
  position: absolute;
  z-index: 4;
  transform-origin: top center;
  background:
    linear-gradient(90deg, rgba(112,79,42,.14), transparent 18% 82%, rgba(112,79,42,.13)),
    #e6ddbd;
  border: 1px solid rgba(87,58,29,.34);
  box-shadow: inset -10px 0 18px rgba(88,61,30,.08);
  animation: britishSailBreathe 1.8s ease-in-out infinite alternate;
}

.british-ship-sail.sail-main-a {
  left: 52.5%;
  top: 29%;
  width: 27%;
  height: 31%;
  clip-path: polygon(0 0, 100% 9%, 93% 93%, 0 100%);
}

.british-ship-sail.sail-main-b {
  left: 28%;
  top: 30%;
  width: 23%;
  height: 29%;
  clip-path: polygon(0 11%, 100% 0, 100% 100%, 8% 92%);
}

.british-ship-sail.sail-rear {
  left: 18%;
  top: 40%;
  width: 20%;
  height: 23%;
  clip-path: polygon(0 0, 100% 7%, 95% 96%, 4% 89%);
}

.british-ship-rigging {
  position: absolute;
  z-index: 3;
  bottom: 31%;
  width: 1px;
  height: 57%;
  background: rgba(54,35,20,.65);
  transform-origin: bottom center;
}
.british-ship-rigging.rig-a { left: 52%; transform: rotate(37deg); }
.british-ship-rigging.rig-b { left: 52%; transform: rotate(-31deg); }

.british-ship-window {
  position: absolute;
  z-index: 7;
  bottom: 16%;
  width: 10px;
  height: 10px;
  border: 2px solid #c49a61;
  border-radius: 50%;
  background: #203a43;
  box-shadow: inset 0 0 5px #9fc4cf;
}
.british-ship-window.window-a { left: 59%; }
.british-ship-window.window-b { left: 66%; }
.british-ship-window.window-c { left: 73%; }

.british-voyage-banner {
  position: absolute;
  z-index: 12;
  left: 52%;
  top: 2%;
  min-width: 190px;
  padding: 7px 13px 7px 10px;
  border: 1px solid rgba(255,255,255,.7);
  border-left: 0;
  clip-path: polygon(0 0, 100% 0, 91% 50%, 100% 100%, 0 100%);
  color: #fff;
  background: linear-gradient(90deg, #012169 0 58%, #c8102e 58%);
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
  transform-origin: left center;
  animation: britishBannerWave .65s ease-in-out infinite alternate;
}
.british-voyage-banner span { margin-right: 5px; }

.british-voyage-ocean {
  position: absolute;
  left: -10%;
  width: 120%;
  pointer-events: none;
}

.british-voyage-ocean::before,
.british-voyage-ocean::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
}

.british-voyage-ocean.ocean-back {
  z-index: 7;
  bottom: 28%;
  height: 18%;
  opacity: .60;
  background: #2f7187;
  clip-path: polygon(0 30%, 6% 16%, 12% 35%, 18% 18%, 24% 38%, 31% 15%, 38% 33%, 45% 14%, 53% 39%, 60% 17%, 68% 34%, 75% 12%, 84% 38%, 92% 17%, 100% 32%, 100% 100%, 0 100%);
  animation: britishWaveBack 3.2s ease-in-out infinite alternate;
}

.british-voyage-ocean.ocean-mid {
  z-index: 11;
  bottom: 10%;
  height: 25%;
  background: #1b566f;
  clip-path: polygon(0 26%, 5% 12%, 11% 31%, 17% 16%, 24% 35%, 31% 11%, 38% 30%, 45% 13%, 52% 34%, 59% 15%, 66% 32%, 74% 10%, 82% 35%, 90% 13%, 100% 29%, 100% 100%, 0 100%);
  animation: britishWaveMid 2.2s ease-in-out infinite alternate;
}

.british-voyage-ocean.ocean-front {
  z-index: 13;
  bottom: -8%;
  height: 28%;
  background: #0c3c55;
  clip-path: polygon(0 20%, 7% 5%, 14% 25%, 22% 7%, 31% 27%, 39% 4%, 47% 24%, 55% 8%, 63% 26%, 72% 3%, 82% 25%, 91% 7%, 100% 22%, 100% 100%, 0 100%);
  animation: britishWaveFront 1.55s ease-in-out infinite alternate;
}

.british-voyage-vignette {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(16,28,31,.70);
  background:
    repeating-linear-gradient(0deg, rgba(32,22,10,.025) 0 1px, transparent 1px 3px),
    radial-gradient(circle at center, transparent 46%, rgba(35,25,15,.20));
  mix-blend-mode: multiply;
}

@keyframes britishVoyageCurtain {
  0% { opacity: 0; filter: sepia(.22) contrast(1.03); }
  7% { opacity: 1; }
  91% { opacity: 1; }
  100% { opacity: 0; filter: sepia(.32) contrast(1.08); }
}

@keyframes britishVoyageCopy {
  0%, 5% { opacity: 0; transform: translate(-50%, -15px); }
  16%, 79% { opacity: 1; transform: translate(-50%, 0); }
  94%, 100% { opacity: 0; transform: translate(-50%, -7px); }
}

@keyframes britishShipSail {
  0% { left: -42vw; transform: scale(.92); }
  12% { left: -24vw; }
  78% { left: 67vw; transform: scale(1.04); }
  100% { left: 116vw; transform: scale(.98); }
}

@keyframes britishShipBob {
  0% { transform: translateY(-5px) rotate(-1.1deg); }
  100% { transform: translateY(8px) rotate(1.2deg); }
}

@keyframes britishSailBreathe {
  from { transform: skewY(-1.5deg) scaleX(.97); }
  to { transform: skewY(1.8deg) scaleX(1.025); }
}

@keyframes britishBannerWave {
  from { transform: skewY(-2deg) scaleX(.97); }
  to { transform: skewY(2deg) scaleX(1.03); }
}

@keyframes britishCloudDrift {
  from { translate: -8vw 0; }
  to { translate: 118vw 0; }
}

@keyframes britishWaveBack {
  from { transform: translateX(-1.8%) translateY(1px); }
  to { transform: translateX(1.8%) translateY(-4px); }
}
@keyframes britishWaveMid {
  from { transform: translateX(1.6%) translateY(2px); }
  to { transform: translateX(-1.7%) translateY(-5px); }
}
@keyframes britishWaveFront {
  from { transform: translateX(-1.2%) translateY(3px); }
  to { transform: translateX(1.2%) translateY(-4px); }
}

@media (max-width: 700px) {
  .british-voyage-ship {
    width: 390px;
    bottom: 22%;
  }
  .british-voyage-banner {
    min-width: 162px;
    font-size: 8px;
  }
  .british-voyage-copy { top: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .british-voyage-ship-body,
  .british-ship-sail,
  .british-voyage-banner,
  .british-voyage-cloud,
  .british-voyage-ocean {
    animation-duration: 4s !important;
  }
}


/* ==========================================================
   VERSION 49 — WALLPAPER ISOLATION
   Wallpaper is immune to all Mode overlays and the Dev UI.
========================================================== */
body.bx-wallpaper-active #bxDevUi,
body.bx-wallpaper-active #britishVoyageIntro,
body.bx-wallpaper-active #britishModeUi,
body.bx-wallpaper-active #britishTeaFeed,
body.bx-wallpaper-active #britishFlagFlash,
body.bx-wallpaper-active #britishNuisanceLayer,
body.bx-wallpaper-active #britishNearbyStack,
body.bx-wallpaper-active #uncBootOverlay,
body.bx-wallpaper-active #uncModeUi,
body.bx-wallpaper-active #uncTaskbar,
body.bx-wallpaper-active #uncShutdownOverlay,
body.bx-wallpaper-active #schizoModeLayer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.bx-wallpaper-active #bxWallpaper {
  isolation: isolate;
}


/* ==========================================================
   VERSION 50 — ENHANCED EVAN FICTIONAL HORROR/GLITCH MODE
   ========================================================== */

.schizo-mode-layer {
  --schizo-pointer-x: 50vw;
  --schizo-pointer-y: 50vh;
  isolation: isolate;
}

.schizo-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: schizoAtmosphereIn 1.6s ease forwards;
}

.schizo-gaze-field,
.schizo-grain-field,
.schizo-edge-breath {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.schizo-gaze-field {
  opacity: .28;
  background:
    radial-gradient(circle 150px at var(--schizo-pointer-x) var(--schizo-pointer-y), transparent 0 20%, rgba(0,0,0,.04) 45%, rgba(0,0,0,.20) 100%),
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.28) 100%);
  transition: background-position .08s linear;
}

.schizo-grain-field {
  opacity: .12;
  mix-blend-mode: screen;
  background:
    repeating-radial-gradient(circle at 12% 18%, rgba(220,242,245,.32) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.035) 2px 3px);
  background-size: 91px 77px, 100% 4px;
  animation: schizoGrainWalk .26s steps(2,end) infinite;
}

.schizo-edge-breath {
  opacity: .48;
  background:
    radial-gradient(ellipse at -4% 50%, rgba(0,0,0,.72), transparent 26%),
    radial-gradient(ellipse at 104% 50%, rgba(0,0,0,.72), transparent 26%),
    radial-gradient(ellipse at 50% -8%, rgba(0,0,0,.46), transparent 26%),
    radial-gradient(ellipse at 50% 108%, rgba(0,0,0,.55), transparent 28%);
  animation: schizoEdgeBreathe 4.4s ease-in-out infinite alternate;
}

.schizo-apparition {
  z-index: 5 !important;
  will-change: opacity, transform;
}

.schizo-apparition.type-peek {
  width: 78px;
  height: 116px;
  overflow: visible;
  filter: blur(.25px) drop-shadow(0 0 25px rgba(0,0,0,.98));
}

.schizo-peek-face {
  position: absolute;
  inset: 8px 8px auto;
  height: 88px;
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 35% 42%, rgba(235,250,252,.8) 0 2px, rgba(0,0,0,.95) 3px 7px, transparent 8px),
    radial-gradient(circle at 65% 42%, rgba(235,250,252,.8) 0 2px, rgba(0,0,0,.95) 3px 7px, transparent 8px),
    linear-gradient(180deg, rgba(0,0,0,.99), rgba(0,0,0,.86) 72%, transparent);
  box-shadow: inset 0 -22px 24px rgba(0,0,0,.68), 0 0 32px rgba(0,0,0,.92);
}

.schizo-peek-face::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 22px;
  height: 5px;
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 50%;
  border-bottom: 2px solid rgba(220,240,242,.22);
  opacity: .55;
}

.schizo-apparition.type-hand {
  width: 96px;
  height: 112px;
  background: transparent !important;
  filter: drop-shadow(0 0 24px rgba(0,0,0,.98));
}

.schizo-reaching-palm {
  position: absolute;
  left: 27px;
  top: 40px;
  width: 48px;
  height: 62px;
  border-radius: 46% 44% 55% 52%;
  background: rgba(0,0,0,.98);
  transform: rotate(-10deg);
}

.schizo-reaching-fingers {
  position: absolute;
  left: 22px;
  top: 6px;
  width: 10px;
  height: 56px;
  border-radius: 8px;
  background: #000;
  box-shadow:
    15px -6px 0 -1px #000,
    30px -2px 0 -1px #000,
    44px 7px 0 -1px #000,
    53px 22px 0 -2px #000;
  transform: rotate(-4deg);
}

.schizo-apparition.type-peek.corner-tr,
.schizo-apparition.type-hand.corner-tr,
.schizo-apparition.type-peek.corner-br,
.schizo-apparition.type-hand.corner-br {
  transform-origin: right center;
}

.schizo-apparition.type-peek.corner-bl,
.schizo-apparition.type-peek.corner-br,
.schizo-apparition.type-hand.corner-bl,
.schizo-apparition.type-hand.corner-br {
  transform-origin: center bottom;
}

.schizo-glitch-band {
  position: absolute;
  left: -5%;
  z-index: 9;
  width: 110%;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(185,230,236,.13) 12%, rgba(0,0,0,.52) 24%, rgba(255,255,255,.07) 48%, rgba(0,0,0,.62) 67%, transparent 94%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 13px);
  border-top: 1px solid rgba(225,248,250,.12);
  border-bottom: 1px solid rgba(0,0,0,.75);
  mix-blend-mode: screen;
  transform: translateX(var(--schizo-band-shift)) skewX(-8deg) scaleY(.5);
  filter: blur(.2px);
}

.schizo-glitch-band.active {
  animation: schizoBandTear .56s steps(2,end) both;
}

.schizo-blink {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.schizo-blink span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 51%;
  background: #000;
  transform: scaleY(0);
}

.schizo-blink span:first-child {
  top: 0;
  transform-origin: top;
}

.schizo-blink span:last-child {
  bottom: 0;
  transform-origin: bottom;
}

.schizo-blink.active span:first-child { animation: schizoBlinkTop .68s cubic-bezier(.7,0,.2,1) both; }
.schizo-blink.active span:last-child { animation: schizoBlinkBottom .68s cubic-bezier(.7,0,.2,1) both; }

.schizo-peripheral-runner {
  position: absolute;
  z-index: 8;
  width: 46px;
  height: 92px;
  opacity: 0;
  pointer-events: none;
  filter: blur(1.2px) drop-shadow(0 0 24px #000);
}

.schizo-runner-head,
.schizo-runner-body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}
.schizo-runner-head { top: 0; width: 24px; height: 25px; border-radius: 50%; }
.schizo-runner-body { top: 21px; width: 40px; height: 70px; border-radius: 48% 48% 16% 16%; }

.schizo-peripheral-runner.run-left { left: -18px; top: var(--schizo-run-pos); }
.schizo-peripheral-runner.run-right { right: -18px; top: var(--schizo-run-pos); }
.schizo-peripheral-runner.run-top { top: -24px; left: var(--schizo-run-pos); transform: rotate(90deg); }
.schizo-peripheral-runner.run-bottom { bottom: -24px; left: var(--schizo-run-pos); transform: rotate(-90deg); }

.schizo-peripheral-runner.run-left.active { animation: schizoRunnerLeft .92s ease-in-out both; }
.schizo-peripheral-runner.run-right.active { animation: schizoRunnerRight .92s ease-in-out both; }
.schizo-peripheral-runner.run-top.active,
.schizo-peripheral-runner.run-bottom.active { animation: schizoRunnerVertical .92s ease-in-out both; }

.schizo-cursor-echo {
  position: absolute;
  z-index: 10;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transform: translate(-50%,-50%);
}

.schizo-cursor-echo span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(220,245,248,.65);
  border-radius: 50%;
  opacity: 0;
}
.schizo-cursor-echo.active span:nth-child(1) { animation: schizoCursorEcho .76s ease-out 0s both; }
.schizo-cursor-echo.active span:nth-child(2) { animation: schizoCursorEcho .76s ease-out .08s both; }
.schizo-cursor-echo.active span:nth-child(3) { animation: schizoCursorEcho .76s ease-out .16s both; }

.schizo-ghost-ui {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 4px;
  color: rgba(210,238,242,.28);
  background: rgba(4,9,12,.13);
  border: 1px solid rgba(190,228,234,.18);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  font: 700 10px/1.1 Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  filter: blur(.35px);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.schizo-ghost-ui.active {
  animation: schizoGhostUi 1s steps(3,end) both;
}

.schizo-stalk-shadow {
  position: absolute;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.72);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.92);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.88),
    0 0 0 5px rgba(0,0,0,.10),
    0 0 26px rgba(0,0,0,.95);
}

.schizo-stalk-shadow::before,
.schizo-stalk-shadow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45px;
  height: 18px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.96));
}
.schizo-stalk-shadow::before { right: calc(100% - 6px); transform: translateY(-50%); }
.schizo-stalk-shadow::after { left: calc(100% - 6px); transform: translateY(-50%) scaleX(-1); }

.schizo-stalk-shadow.active {
  animation: schizoStalkIn 1.08s ease both;
}

body.schizo-mode.schizo-jolt-a > main,
body.schizo-mode.schizo-jolt-a > .topbar {
  transform: translate(3px,-2px) skewX(.12deg) !important;
  filter: contrast(1.03) brightness(.98) !important;
}

body.schizo-mode.schizo-jolt-b > main,
body.schizo-mode.schizo-jolt-b > .topbar {
  transform: translate(-3px,2px) skewX(-.12deg) !important;
  filter: contrast(1.04) brightness(.97) !important;
}

.schizo-mode-layer.ending .schizo-atmosphere {
  opacity: 0 !important;
  transition: opacity 2.8s ease !important;
}

.schizo-mode-layer.ending .schizo-blink,
.schizo-mode-layer.ending .schizo-glitch-band,
.schizo-mode-layer.ending .schizo-peripheral-runner,
.schizo-mode-layer.ending .schizo-cursor-echo,
.schizo-mode-layer.ending .schizo-ghost-ui,
.schizo-mode-layer.ending .schizo-stalk-shadow,
.schizo-mode-layer.ending .schizo-steal-shadow {
  opacity: 0 !important;
  transition: opacity .45s ease !important;
}

@keyframes schizoAtmosphereIn { to { opacity: 1; } }
@keyframes schizoGrainWalk {
  0% { transform: translate(0,0); }
  33% { transform: translate(7px,-5px); }
  66% { transform: translate(-5px,4px); }
  100% { transform: translate(3px,7px); }
}
@keyframes schizoEdgeBreathe {
  from { opacity: .28; transform: scale(1); }
  to { opacity: .62; transform: scale(1.035); }
}
@keyframes schizoBandTear {
  0% { opacity: 0; transform: translateX(calc(var(--schizo-band-shift) * -1)) scaleY(.2); }
  18% { opacity: .7; }
  35% { transform: translateX(var(--schizo-band-shift)) scaleY(1.25); }
  55% { opacity: .24; transform: translateX(calc(var(--schizo-band-shift) * -.45)) scaleY(.55); }
  72% { opacity: .68; }
  100% { opacity: 0; transform: translateX(0) scaleY(.1); }
}
@keyframes schizoBlinkTop {
  0%,100% { transform: scaleY(0); }
  43%,55% { transform: scaleY(.94); }
}
@keyframes schizoBlinkBottom {
  0%,100% { transform: scaleY(0); }
  43%,55% { transform: scaleY(.94); }
}
@keyframes schizoRunnerLeft {
  0% { opacity: 0; transform: translateX(-36px) scale(.8); }
  28% { opacity: .82; }
  58% { opacity: .72; transform: translateX(30px) scale(1); }
  100% { opacity: 0; transform: translateX(-18px) scale(.72); }
}
@keyframes schizoRunnerRight {
  0% { opacity: 0; transform: translateX(36px) scale(.8); }
  28% { opacity: .82; }
  58% { opacity: .72; transform: translateX(-30px) scale(1); }
  100% { opacity: 0; transform: translateX(18px) scale(.72); }
}
@keyframes schizoRunnerVertical {
  0% { opacity: 0; scale: .7; }
  30% { opacity: .78; scale: 1; }
  68% { opacity: .62; scale: .92; }
  100% { opacity: 0; scale: .55; }
}
@keyframes schizoCursorEcho {
  0% { opacity: .7; transform: translate(0,0) scale(.5); }
  100% { opacity: 0; transform: translate(calc(-18px + 36px * var(--echo-r, .5)), -24px) scale(3.3); }
}
@keyframes schizoGhostUi {
  0% { opacity: 0; transform: translate(0,0) scale(.99); }
  16% { opacity: .42; }
  38% { opacity: .15; transform: translate(var(--schizo-ghost-x), var(--schizo-ghost-y)) scale(1.01); }
  55% { opacity: .36; transform: translate(calc(var(--schizo-ghost-x) * -.35), calc(var(--schizo-ghost-y) * -.6)) scale(.995); }
  100% { opacity: 0; transform: translate(0,0) scale(1); }
}
@keyframes schizoStalkIn {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.72); }
  28% { opacity: .78; }
  58% { opacity: .92; transform: translate(-50%,-50%) scale(1.03); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
  .schizo-grain-field,
  .schizo-edge-breath { animation-duration: 7s !important; }
  body.schizo-mode.schizo-jolt-a > main,
  body.schizo-mode.schizo-jolt-a > .topbar,
  body.schizo-mode.schizo-jolt-b > main,
  body.schizo-mode.schizo-jolt-b > .topbar { transform: none !important; }
}


/* ==========================================================
   VERSION 51 — GLOBAL WIP LOCK + SUPABASE DEV CONTROL
   ========================================================== */
.bx-wip-lock {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(24, 190, 210, .11), transparent 34%),
    linear-gradient(180deg, #05080b 0%, #000 100%);
  color: #eefcff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bx-wip-lock.active { display: grid; }
.bx-wip-shell {
  width: min(620px, 100%);
  text-align: center;
  padding: 42px 34px;
  border: 1px solid rgba(95, 224, 239, .22);
  background: rgba(4, 10, 14, .92);
  box-shadow: 0 25px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
  border-radius: 24px;
}
.bx-wip-kicker { letter-spacing: .34em; font-size: 12px; color: #7edee9; font-weight: 800; }
.bx-wip-title { margin-top: 8px; font-size: clamp(70px, 17vw, 150px); line-height: .92; font-weight: 1000; letter-spacing: -.07em; }
.bx-wip-copy { margin: 20px auto 28px; color: rgba(238,252,255,.68); font-size: 16px; }
.bx-wip-form { display: grid; gap: 10px; text-align: left; }
.bx-wip-form label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,252,255,.55); }
.bx-wip-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.bx-wip-input-row input,
.bx-wip-input-row button {
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.13);
  font: inherit;
}
.bx-wip-input-row input { padding: 0 14px; color: #fff; background: #080d11; outline: none; }
.bx-wip-input-row input:focus { border-color: rgba(95,224,239,.7); box-shadow: 0 0 0 3px rgba(95,224,239,.08); }
.bx-wip-input-row button { padding: 0 18px; color: #001013; background: #6fe4ef; font-weight: 900; cursor: pointer; }
.bx-wip-message { min-height: 20px; color: #ff8d8d; font-size: 13px; }
body.bx-wip-active { overflow: hidden !important; }
body.bx-wip-active > *:not(#bxWipLock):not(script) { pointer-events: none !important; user-select: none !important; }

.bx-dev-wip-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 14px; }
.bx-dev-wip-actions .bx-dev-mode-toggle { width: 100%; }
.bx-dev-wip-row.active b { color: #ffd36b; }
@media (max-width: 560px) {
  .bx-wip-input-row { grid-template-columns: 1fr; }
  .bx-wip-shell { padding: 32px 20px; }
}


/* ==========================================================
   VERSION 52 — POLISH, LAYERING, PERFORMANCE & DEV UI PASS
   ========================================================== */

/* One consistent top-level layering contract for new/critical overlays. */
:root {
  --bx-z-mode: 15000;
  --bx-z-mode-screen: 250000;
  --bx-z-dev: 2147483000;
  --bx-z-wip: 2147483646;
  --bx-scrollbar-comp: 0px;
}

html { scrollbar-gutter: stable; }

body.bx-screen-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  padding-right: var(--bx-scrollbar-comp) !important;
}

/* Hidden tabs do not need to spend cycles animating decorative layers. */
body.bx-document-hidden * {
  animation-play-state: paused !important;
}

/* Dev panel is its own visual island and never inherits Mode transformations. */
.bx-dev-ui {
  z-index: var(--bx-z-dev) !important;
  isolation: isolate !important;
  contain: layout paint style !important;
  max-height: min(82vh, 760px) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}
.bx-dev-ui .bx-dev-body {
  max-height: min(72vh, 650px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,240,242,.32) transparent;
}
.bx-dev-ui.minimized { width: 274px !important; }
.bx-dev-ui.minimized .bx-dev-body { display: none !important; }
.bx-dev-ui.minimized .bx-dev-titlebar { border-bottom-color: transparent !important; }

.bx-dev-title-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.bx-dev-mini-button {
  all: initial;
  min-width: 36px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(120,240,242,.18) !important;
  border-radius: 5px !important;
  color: rgba(225,250,252,.62) !important;
  background: rgba(22,197,213,.06) !important;
  font: 900 8px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}
.bx-dev-mini-button:hover { border-color: rgba(120,240,242,.5) !important; color: #fff !important; }

.bx-dev-mode-progress {
  height: 3px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
}
.bx-dev-mode-progress > i {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(22,197,213,.55), rgba(120,240,242,.95)) !important;
  transition: width .22s linear !important;
}
.bx-dev-mode-row.ending .bx-dev-mode-progress > i { background: rgba(255,122,122,.72) !important; }

.bx-dev-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.bx-dev-action {
  all: initial;
  min-height: 31px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(120,240,242,.18) !important;
  border-radius: 6px !important;
  color: rgba(232,251,253,.72) !important;
  background: rgba(255,255,255,.025) !important;
  font: 900 8px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .055em !important;
  text-align: center !important;
  cursor: pointer !important;
}
.bx-dev-action:hover { border-color: rgba(120,240,242,.52) !important; background: rgba(22,197,213,.08) !important; }
.bx-dev-action-danger { border-color: rgba(255,105,105,.22) !important; color: rgba(255,200,200,.78) !important; }
.bx-dev-action-danger:hover { border-color: rgba(255,105,105,.55) !important; background: rgba(255,75,75,.07) !important; }
.bx-dev-wip-actions { grid-template-columns: 1fr 1fr !important; }
.bx-dev-wip-sync { grid-column: 1 / -1 !important; }

.bx-dev-layer-highlight-button {
  background: rgba(205,82,255,.055) !important;
  border-color: rgba(205,82,255,.22) !important;
}
.bx-dev-layer-highlight-button[aria-pressed="true"] {
  background: rgba(205,82,255,.12) !important;
  border-color: rgba(224,132,255,.58) !important;
}
.bx-dev-layer-highlight-button[aria-pressed="true"] b { color: #e5a4ff !important; }
.bx-dev-layer-target {
  outline: 4px dashed #d25cff !important;
  outline-offset: -7px !important;
  box-shadow: inset 0 0 0 2px rgba(210,92,255,.24) !important;
}

/* WIP is a true top screen and cannot accidentally inherit another Mode. */
.bx-wip-lock {
  z-index: var(--bx-z-wip) !important;
  isolation: isolate !important;
  contain: layout paint style !important;
}
body.bx-wip-active #bxDevUi { display: none !important; }

/* Wallpaper remains visually isolated from every Mode and diagnostic overlay. */
body.bx-wallpaper-active #britishVoyageIntro,
body.bx-wallpaper-active #britishModeUi,
body.bx-wallpaper-active #britishTeaFeed,
body.bx-wallpaper-active #britishFlagFlash,
body.bx-wallpaper-active #britishNuisanceLayer,
body.bx-wallpaper-active #britishNearbyStack,
body.bx-wallpaper-active #uncBootOverlay,
body.bx-wallpaper-active #uncModeUi,
body.bx-wallpaper-active #uncTaskbar,
body.bx-wallpaper-active #uncShutdownOverlay,
body.bx-wallpaper-active #schizoModeLayer,
body.bx-wallpaper-active #comingSoonOverlay,
body.bx-wallpaper-active #bxDevUi {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* British Mode polish: ship wake, distant land, cleaner cinematic depth. */
.british-voyage-intro::after {
  content: "";
  position: absolute;
  right: -3%;
  bottom: 31%;
  z-index: 6;
  width: 32%;
  height: 15%;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(165deg, transparent 0 44%, rgba(31,55,43,.8) 45% 64%, transparent 65%),
    linear-gradient(180deg, transparent 0 62%, rgba(35,58,45,.9) 63% 100%);
  clip-path: polygon(0 100%, 8% 72%, 17% 80%, 28% 48%, 39% 66%, 53% 30%, 64% 56%, 76% 40%, 88% 66%, 100% 52%, 100% 100%);
  animation: bxBritishLandReveal 5.2s ease both;
}
.british-voyage-ship::after {
  content: "";
  position: absolute;
  left: -11%;
  bottom: 8%;
  width: 42%;
  height: 13%;
  opacity: .7;
  pointer-events: none;
  background: repeating-linear-gradient(175deg, rgba(235,249,249,.55) 0 3px, transparent 3px 10px);
  filter: blur(1px);
  transform: skewX(-18deg);
  animation: bxBritishWake 1.1s ease-in-out infinite alternate;
}
@keyframes bxBritishLandReveal { 0%,58% { opacity: 0; transform: translateX(40px); } 78%,94% { opacity: .75; transform: translateX(0); } 100% { opacity: 0; } }
@keyframes bxBritishWake { from { transform: skewX(-18deg) translateX(0) scaleX(.92); opacity:.38; } to { transform: skewX(-18deg) translateX(-16px) scaleX(1.1); opacity:.8; } }

/* British popups stay readable and feel less randomly stacked on top of each other. */
.british-nuisance-popup {
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}
.british-popup-close,
.british-ad-close { min-width: 32px !important; min-height: 32px !important; }

/* Unc Mode polish: subtle CRT scanlines without covering the Dev UI. */
body.unc-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 14999;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
body.unc-mode #bxDevUi { z-index: var(--bx-z-dev) !important; }
.unc-boot-window { box-shadow: 12px 12px 0 rgba(0,0,0,.22), 0 22px 70px rgba(0,0,0,.48) !important; }
.unc-shutdown-overlay { z-index: 18000 !important; }

/* Schizophrenia Mode polish: preserve horror depth but cap GPU-heavy overdraw. */
.schizo-mode-layer {
  z-index: var(--bx-z-mode) !important;
  contain: strict !important;
  backface-visibility: hidden;
}
.schizo-apparition,
.schizo-peripheral-runner,
.schizo-glitch-band,
.schizo-ghost-ui,
.schizo-stalk-shadow,
.schizo-steal-shadow,
.schizo-cursor-echo { contain: layout paint style !important; }
.schizo-atmosphere { will-change: opacity; }
.schizo-gaze-field { will-change: background; }
.schizo-stolen-target { will-change: transform, filter; }

/* Prevent transient Mode content from covering the permanent Dev panel. */
#schizoModeLayer { z-index: 15000 !important; }
#uncTaskbar { z-index: 12900 !important; }
#uncModeUi { z-index: 13000 !important; }
#britishNuisanceLayer { z-index: 169000 !important; }
#britishModeUi { z-index: 170000 !important; }
#britishNearbyStack { z-index: 171000 !important; }
#britishVoyageIntro,
#comingSoonOverlay { z-index: var(--bx-z-mode-screen) !important; }
#uncBootOverlay,
#uncShutdownOverlay { z-index: 249000 !important; }
#bxDevUi { z-index: var(--bx-z-dev) !important; }
#bxWipLock { z-index: var(--bx-z-wip) !important; }

@media (max-width: 560px) {
  .bx-dev-quick-actions { grid-template-columns: 1fr !important; }
  .bx-dev-ui.minimized { width: min(274px, calc(100vw - 24px)) !important; }
}

/* VERSION 52 — polished, Mode-proof Dev authentication dialog. */
.bx-dev-auth {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483200 !important;
  display: none !important;
  place-items: center !important;
  padding: 22px !important;
  isolation: isolate !important;
  contain: strict !important;
  color-scheme: dark !important;
  background: rgba(0, 4, 7, .72) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  cursor: default !important;
}
.bx-dev-auth.open { display: grid !important; }
.bx-dev-auth,
.bx-dev-auth * { box-sizing: border-box !important; font-family: Inter, Arial, Helvetica, sans-serif !important; }
.bx-dev-auth-card {
  width: min(390px, 100%) !important;
  margin: 0 !important;
  padding: 22px !important;
  display: grid !important;
  gap: 10px !important;
  border: 1px solid rgba(120,240,242,.28) !important;
  border-radius: 12px !important;
  color: #edfdfd !important;
  background: linear-gradient(180deg, rgba(7,17,22,.985), rgba(2,7,10,.985)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.04) !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.bx-dev-auth-kicker {
  color: rgba(120,240,242,.72) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
}
.bx-dev-auth-card h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
}
.bx-dev-auth-card p,
.bx-dev-auth-card label {
  margin: 0 !important;
  color: rgba(235,252,253,.55) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.bx-dev-auth-card label { margin-top: 4px !important; text-transform: uppercase !important; letter-spacing: .12em !important; font-weight: 800 !important; }
.bx-dev-auth-card input {
  all: initial !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: #050b0e !important;
  font: 600 14px/1 Inter, Arial, sans-serif !important;
  cursor: text !important;
}
.bx-dev-auth-card input:focus {
  border-color: rgba(120,240,242,.72) !important;
  box-shadow: 0 0 0 3px rgba(22,197,213,.10) !important;
}
.bx-dev-auth-message {
  min-height: 15px !important;
  color: #ff9292 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
.bx-dev-auth-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.bx-dev-auth-actions button {
  all: initial !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(120,240,242,.26) !important;
  border-radius: 7px !important;
  color: rgba(237,253,253,.82) !important;
  background: rgba(22,197,213,.08) !important;
  font: 900 9px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}
.bx-dev-auth-actions button:hover { border-color: rgba(120,240,242,.62) !important; background: rgba(22,197,213,.14) !important; }
.bx-dev-auth-actions button:last-child { color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.025) !important; border-color: rgba(255,255,255,.10) !important; }
.bx-dev-auth-card.busy { pointer-events: none !important; }
.bx-dev-auth-card.busy input { opacity: .58 !important; }
body.bx-wallpaper-active #bxDevAuth,
body.bx-wip-active #bxDevAuth { display: none !important; }


/* VERSION 52 — compact Dev action feedback without browser alert dialogs. */
.bx-dev-notice {
  min-height: 28px;
  display: flex;
  align-items: center;
  margin: 9px 12px 2px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: rgba(230,244,249,.58);
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bx-dev-notice.success {
  color: #a9fff7;
  border-color: rgba(45,229,212,.34);
  background: rgba(45,229,212,.07);
}
.bx-dev-notice.error {
  color: #ffb8b8;
  border-color: rgba(255,90,90,.42);
  background: rgba(255,70,70,.08);
}
.bx-dev-notice.busy {
  color: #c8e9ff;
  border-color: rgba(77,172,255,.34);
  background: rgba(77,172,255,.07);
}
.bx-dev-ui.minimized .bx-dev-notice { display: none !important; }


/* ==========================================================
   VERSION 53 — GLOBAL ANNOUNCEMENT + DEV ROUTE POLISH
   ========================================================== */
.hidden-dev-trigger {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(100%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bx-global-announcement {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 34px;
  z-index: 12550;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  color: #f5feff;
  background: linear-gradient(90deg, rgba(18,70,78,.98), rgba(31,94,105,.98), rgba(18,70,78,.98));
  box-shadow: 0 2px 14px rgba(0,0,0,.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .20s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .20s step-end;
  isolation: isolate;
  overflow: hidden;
}
.bx-global-announcement.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .20s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.bx-global-announcement-accent { display: none; }
.bx-global-announcement-copy {
  grid-column: 2;
  min-width: 0;
  max-width: min(980px, calc(100vw - 100px));
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.bx-global-announcement-title {
  flex: 0 0 auto;
  margin: 0;
  color: inherit;
  font: 800 12px/1.1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}
.bx-global-announcement-title:not(:empty)::after { content: " —"; opacity: .68; }
.bx-global-announcement-message {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font: 700 12px/1.1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .005em;
}
.bx-global-announcement[data-tone="important"] {
  background: linear-gradient(90deg, rgba(122,58,9,.98), rgba(179,84,12,.98), rgba(122,58,9,.98));
}
.bx-global-announcement[data-tone="warning"] {
  background: linear-gradient(90deg, rgba(112,24,28,.98), rgba(157,39,43,.98), rgba(112,24,28,.98));
}
.bx-global-announcement[data-tone="important"] .bx-global-announcement-title,
.bx-global-announcement[data-tone="warning"] .bx-global-announcement-title { color: inherit; }
.bx-global-announcement-close {
  grid-column: 3;
  justify-self: end;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  font: 400 18px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.bx-global-announcement-close:hover { color: #fff; background: rgba(255,255,255,.09); }

/* The promotional strip owns the very top edge; the normal navigation moves below it. */
body.bx-announcement-visible:not(.bx-wallpaper-active) .topbar { top: 34px; }
body.bx-announcement-visible:not(.bx-wallpaper-active) .hero { padding-top: 169px; }
body.bx-announcement-visible:not(.bx-wallpaper-active) .subpage { padding-top: 152px; }

body.bx-wallpaper-active > .bx-global-announcement { opacity: 0; visibility: hidden; pointer-events: none; }
body.bx-wallpaper-active > .bx-global-announcement.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; }
body.bx-wip-active > .bx-global-announcement { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body.unc-mode .bx-global-announcement,
body.british-mode .bx-global-announcement,
body.schizo-mode .bx-global-announcement {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  filter: none !important;
}
.bx-privacy-link { color: inherit; opacity: .68; text-decoration: underline; text-underline-offset: 3px; }
.bx-privacy-link:hover { opacity: 1; }
@media (max-width: 920px) {
  body.bx-announcement-visible:not(.bx-wallpaper-active) .hero { padding-top: 154px; }
}
@media (max-width: 600px) {
  .bx-global-announcement { height: 32px; grid-template-columns: 12px minmax(0,1fr) 32px; }
  .bx-global-announcement-copy { max-width: 100%; gap: 5px; padding: 0 6px; }
  .bx-global-announcement-title,
  .bx-global-announcement-message { font-size: 10.5px; }
  .bx-global-announcement-close { width: 32px; height: 32px; min-width: 32px; font-size: 17px; }
  body.bx-announcement-visible:not(.bx-wallpaper-active) .topbar { top: 32px; }
  body.bx-announcement-visible:not(.bx-wallpaper-active) .hero { padding-top: 142px; }
}






















.cloud-one { top: 12%; left: -15%; --cloud-duration: 34s; }
.cloud-two { top: 21%; left: -25%; width: min(52vw, 700px); --cloud-duration: 48s; opacity: .38; }
.cloud-three { top: 7%; left: 60%; width: min(30vw, 400px); --cloud-duration: 28s; opacity: .33; animation-direction: reverse; }


.bx-gotham-buildings { position: absolute; inset: auto 0 0 0; height: var(--layer-height); background-repeat: repeat-x; background-position: bottom left; opacity: var(--layer-opacity); }
.gotham-back { --layer-height: 72%; --layer-opacity: .55; background-image: linear-gradient(to top, rgba(8,10,15,.95), rgba(8,10,15,.95)), repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 214, 98, .12) 28px 30px, transparent 30px 56px); clip-path: polygon(0 100%,0 48%,4% 40%,8% 58%,11% 32%,16% 55%,21% 29%,26% 60%,31% 26%,37% 65%,42% 36%,46% 59%,51% 28%,56% 72%,62% 34%,68% 56%,74% 24%,79% 60%,84% 30%,89% 62%,94% 42%,100% 68%,100% 100%); }
.gotham-mid { --layer-height: 86%; --layer-opacity: .75; background-image: linear-gradient(to top, rgba(10,12,18,.98), rgba(10,12,18,.98)), repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 214, 98, .16) 22px 24px, transparent 24px 38px); clip-path: polygon(0 100%,0 44%,5% 18%,9% 66%,14% 34%,18% 57%,23% 12%,27% 63%,34% 22%,39% 70%,44% 18%,49% 48%,53% 15%,57% 79%,63% 24%,68% 59%,73% 16%,78% 66%,83% 30%,88% 74%,93% 14%,97% 58%,100% 46%,100% 100%); }
.gotham-front { --layer-height: 100%; --layer-opacity: 1; background-image: linear-gradient(to top, rgba(3,4,7,1), rgba(3,4,7,1)), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 214, 98, .2) 18px 20px, transparent 20px 30px); clip-path: polygon(0 100%,0 30%,6% 56%,10% 10%,14% 64%,20% 22%,24% 76%,29% 26%,34% 52%,39% 6%,44% 72%,49% 36%,54% 14%,59% 85%,63% 28%,69% 58%,73% 8%,77% 69%,83% 22%,88% 62%,93% 10%,96% 72%,100% 54%,100% 100%); }



























































































































/* ==========================================================
   VERSION 63 — OPTIONAL PRECISE LOCATION CONSENT
   ========================================================== */
.bx-location-consent {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 2147482500;
  width: min(680px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(100,224,235,.28);
  border-radius: 16px;
  background: rgba(5, 14, 19, .96);
  box-shadow: 0 20px 70px rgba(0,0,0,.55), 0 0 34px rgba(33,197,213,.08);
  backdrop-filter: blur(18px);
  color: #eaffff;
  transform: translate(-50%, 18px);
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
}
.bx-location-consent.active { opacity: 1; transform: translate(-50%, 0); }
.bx-location-consent-icon {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(100,224,235,.28); background: rgba(22,197,213,.08);
  color: #68e4ee; font-size: 22px;
}
.bx-location-consent-copy { display: grid; gap: 3px; }
.bx-location-consent-copy strong { font-size: 13px; letter-spacing: .04em; }
.bx-location-consent-copy span { color: #a9c0c6; font-size: 12px; line-height: 1.45; }
.bx-location-consent-copy small { color: #637f88; font-size: 10px; }
.bx-location-consent-actions { display: flex; gap: 7px; }
.bx-location-consent-actions button {
  min-height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid #21434c; background: #07151b; color: #cfe9ed; font: 800 10px ui-monospace, monospace;
}
.bx-location-consent-actions [data-bx-location-allow] { background: rgba(22,197,213,.12); color: #76ecf4; border-color: rgba(50,210,223,.38); }
body.bx-wip-active .bx-location-consent { display: none !important; }
@media (max-width: 720px) {
  .bx-location-consent { grid-template-columns: auto 1fr; bottom: 12px; }
  .bx-location-consent-actions { grid-column: 1 / -1; }
  .bx-location-consent-actions button { flex: 1; }
}




/* Wallpaper announcement UI: default BX wallpaper */
body.bx-wallpaper-active.bx-wallpaper-default > .bx-global-announcement.active {
  top: 18px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) !important;
  width: min(760px, calc(100vw - 48px));
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(53, 225, 255, .24);
  background:
    linear-gradient(90deg, rgba(9, 18, 32, .94), rgba(5, 11, 22, .88)),
    radial-gradient(circle at 18% 50%, rgba(255, 136, 0, .08), transparent 28%);
  box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 32px rgba(32, 206, 245, .12);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  z-index: 10060;
}
body.bx-wallpaper-active.bx-wallpaper-default > .bx-global-announcement.active::before {
  content: "LIVE ANNOUNCEMENT";
  position: absolute;
  left: 18px;
  top: -10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(231, 248, 255, .96);
  background: linear-gradient(90deg, rgba(19, 117, 151, .95), rgba(10, 56, 92, .92));
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
body.bx-wallpaper-active.bx-wallpaper-default > .bx-global-announcement.active .bx-global-announcement-title {
  color: #2fe1ff;
  text-shadow: 0 0 16px rgba(47,225,255,.22);
}
body.bx-wallpaper-active.bx-wallpaper-default > .bx-global-announcement.active .bx-global-announcement-message {
  color: rgba(232, 244, 251, .92);
}
body.bx-wallpaper-active.bx-wallpaper-default > .bx-global-announcement.active .bx-global-announcement-close {
  border-left: 1px solid rgba(53,225,255,.12);
}





















@media  (max-width: 760px) {
  body.bx-wallpaper-active > .bx-global-announcement.active {
    width: calc(100vw - 24px) !important;
    left: 50%;
    transform: translateX(-50%) !important;
    height: 48px;
  }
  
  
  
}






















/* ==========================================================
   VERSION 69 — PURE VECTOR BAT SIGNAL (NO IMAGE FILES)
   ========================================================== */














/* The small flying bats are CSS silhouettes now too — no image asset. */







/* ==========================================================
   VERSION 70 — GOTHAM STORM / REBUILT BAT SIGNAL
   ========================================================== */


/* Two moving rain sheets, kept behind the HUD/menu. */





/* Heavier storm-cloud banks. */





/* A much clearer black bat emblem directly on the moon. */





/* Searchlight: broad at the projected emblem, tight at the roof source. */



/* Searchlight fixture on a Gotham roof, visually connecting to the beam. */




/* Small flock silhouettes are black now, which reads better against the moon. */


@keyframes bxGothamRainFront {
  from { transform: translate3d(-2%, -10%, 0); }
  to   { transform: translate3d(9%, 15%, 0); }
}
@keyframes bxBatSignalHover {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.015); }
}
@keyframes bxSearchlightBreathe {
  0%,100% { opacity: .72; filter: blur(3px); }
  50% { opacity: .92; filter: blur(4.5px); }
}





/* ==========================================================
   VERSION 71 — FINAL BAT SIGNAL VECTOR REBUILD
   Uses a traced vector silhouette from the reference image,
   with stronger rain/cloud animation and a cleaner spotlight.
   ========================================================== */























@keyframes bxGothamRainBack {
  from { transform: translate3d(-1%, -8%, 0); }
  to   { transform: translate3d(6%, 11%, 0); }
}

@keyframes bxBatSignalFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.01); }
}
@keyframes bxSearchlightSway {
  0%,100% { transform: translateX(-50%) rotate(-1.5deg); }
  50% { transform: translateX(-50%) rotate(.75deg); }
}





/* ==========================================================
   VERSION 72 — LARGER SEARCHLIGHT + BETTER RAIN
   ========================================================== */

/* Make the projected spotlight visibly larger than the bat logo. */








/* Rebuild rain so it reads more like real falling streaks instead of generic lines. */




@keyframes bxRealRainFront {
  from { transform: translate3d(-2%, -16%, 0) scale(1.03); }
  to   { transform: translate3d(10%, 20%, 0) scale(1.03); }
}
@keyframes bxRealRainBack {
  from { transform: translate3d(-1%, -10%, 0) scale(.98); }
  to   { transform: translate3d(6%, 13%, 0) scale(.98); }
}





/* ==========================================================
   VERSION 73 — BOTTOM-RIGHT HUD/CORNER FIX + SHORTER RAIN STREAKS
   ========================================================== */









/* Rework rain: many shorter angled streaks instead of long continuous bars. */




@keyframes bxRainShortFront {
  from { transform: translate3d(-4%, -14%, 0); }
  to   { transform: translate3d(10%, 16%, 0); }
}
@keyframes bxRainShortBack {
  from { transform: translate3d(-2%, -10%, 0); }
  to   { transform: translate3d(6%, 10%, 0); }
}


























/* ==========================================================
   VERSION 75 — HIDDEN VIDEO RENDER ROUTE
   ========================================================== */
.hidden-video-render-trigger {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: -99999 !important;
}

/* ==========================================================
   VERSION 90 — PRODUCTION TOOLS NAV + WALLPAPER CUSTOMIZER
   ========================================================== */
.nav-production {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(36,216,234,.24);
  border-radius:10px;
  color:#dffbff;
  background:linear-gradient(135deg,rgba(18,76,92,.54),rgba(36,70,122,.42));
  text-decoration:none;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 0 18px rgba(36,216,234,.035);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.nav-production:hover {
  transform:translateY(-1px);
  border-color:rgba(36,216,234,.55);
  background:linear-gradient(135deg,rgba(18,96,112,.68),rgba(46,82,142,.58));
  box-shadow:0 8px 24px rgba(0,0,0,.16),0 0 22px rgba(36,216,234,.08);
}

.bx-theme-drawer { width:min(440px,calc(100vw - 28px)); }
.bx-theme-drawer-content { max-height:min(88vh,900px); overflow:auto; scrollbar-width:thin; }
.bx-wallpaper-customizer { margin-top:14px; display:grid; gap:12px; }
.bx-custom-head { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:11px 12px; border:1px solid rgba(var(--wp-a-rgb),.16); border-radius:13px; background:rgba(3,11,16,.66); }
.bx-custom-head > div { min-width:0; }
.bx-custom-head strong { display:block; font-size:11px; letter-spacing:.05em; }
.bx-custom-head small { display:block; margin-top:3px; color:var(--wp-muted); font-size:9px; line-height:1.35; }
.bx-custom-head button,.bx-custom-actions button { border:1px solid rgba(var(--wp-a-rgb),.22); border-radius:9px; background:rgba(var(--wp-a-rgb),.07); color:var(--wp-text); padding:8px 9px; font-size:8px; font-weight:850; letter-spacing:.07em; cursor:pointer; }
.bx-custom-head button:hover,.bx-custom-actions button:hover { border-color:rgba(var(--wp-a-rgb),.5); background:rgba(var(--wp-a-rgb),.13); }
.bx-custom-group { padding:11px; border:1px solid rgba(255,255,255,.065); border-radius:13px; background:rgba(2,8,12,.46); }
.bx-custom-label { display:block; margin-bottom:9px; color:var(--wp-c); font-size:8px; font-weight:900; letter-spacing:.18em; }
.bx-custom-color-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.bx-custom-color-grid label { display:grid; gap:5px; color:var(--wp-muted); font-size:7px; font-weight:800; text-align:center; }
.bx-custom-color-grid input[type="color"] { width:100%; height:29px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:#071117; padding:2px; cursor:pointer; }
.bx-custom-range-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bx-custom-range-grid label { display:grid; gap:5px; min-width:0; color:#aec2c9; font-size:8px; font-weight:760; }
.bx-custom-range-grid label > span { display:grid; grid-template-columns:1fr 42px; align-items:center; gap:7px; }
.bx-custom-range-grid input[type="range"] { width:100%; accent-color:var(--wp-a); }
.bx-custom-range-grid output { color:var(--wp-text); text-align:right; font:8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.bx-custom-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.bx-custom-toggle-grid label { display:flex; align-items:center; gap:7px; min-height:30px; padding:6px 8px; border:1px solid rgba(255,255,255,.055); border-radius:9px; color:#a8bec6; background:rgba(255,255,255,.018); font-size:8px; font-weight:760; }
.bx-custom-toggle-grid input { accent-color:var(--wp-a); }
.bx-custom-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.bx-custom-status { margin:0; min-height:24px; color:#78949e; font-size:8px; line-height:1.45; }

/* Custom controls adjust layers without interfering with the core transform animation. */
.bx-wallpaper-core { transform-origin:center; }

@media(max-width:900px){
  .nav-production{width:100%;min-height:42px}
  .bx-custom-range-grid,.bx-custom-toggle-grid{grid-template-columns:1fr}
  .bx-custom-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bx-custom-actions{grid-template-columns:1fr}
}