.project-detail:has(.challang-aquarium) {
  --chl-ink: #07384a;
  --chl-deep: #005575;
  --chl-water: #22b7cf;
  --chl-water-2: #58d7e2;
  --chl-soft: #e9fbff;
  --chl-mint: #9be7df;
  --chl-line: rgba(7, 56, 74, .16);
  --chl-sand: #fffdf8;
  background:
    linear-gradient(180deg, rgba(212, 249, 255, .75), rgba(255, 253, 248, .1) 430px),
    var(--bg);
  color: var(--chl-ink);
}

.project-detail:has(.challang-aquarium) .project-subtitle,
.project-detail:has(.challang-aquarium) .eyebrow {
  color: var(--chl-water);
}

.project-detail:has(.challang-aquarium) .scope-row span {
  border-color: var(--chl-line);
  background: rgba(237, 252, 255, .8);
}

.project-detail:has(.challang-aquarium) .project-identity .identity-icon img {
  border-radius: 22%;
}

.challang-aquarium,
.challang-engine,
.challang-reactions,
.challang-loop {
  padding: 76px 42px;
  border-top: 1px solid var(--chl-line);
  overflow: hidden;
}

.challang-aquarium {
  min-height: 780px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 44px;
  align-items: center;
}

.challang-aquarium-copy p:not(.eyebrow),
.challang-engine-copy p,
.challang-reaction-copy > p,
.challang-loop-copy p {
  max-width: 720px;
  color: #53707c;
  font-size: 19px;
  line-height: 1.58;
}

.challang-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.challang-stat-strip span {
  min-height: 78px;
  display: grid;
  align-content: center;
  padding: 14px;
  border: 1px solid var(--chl-line);
  border-radius: 8px;
  background: rgba(255, 253, 248, .76);
  color: #53707c;
  font-weight: 830;
}

.challang-stat-strip b {
  display: block;
  color: var(--chl-ink);
  font-size: 29px;
  line-height: 1;
}

.challang-cup-stage {
  position: relative;
  min-height: 650px;
}

.challang-phone-main {
  position: relative;
  z-index: 3;
  width: min(360px, 48%);
  margin: 0 auto;
  transform: translateY(calc(var(--chl-float, 0) * -28px));
  transition: transform .2s linear;
}

.challang-water-orbit {
  position: absolute;
  inset: 4% 0 0;
  z-index: 1;
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 19% 64%, rgba(255, 255, 255, .75) 0 7px, transparent 8px),
    linear-gradient(180deg, transparent 0 34%, rgba(77, 211, 226, .28) 35% 100%);
}

.challang-water-orbit::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: calc(40% - var(--chl-float, 0) * 10%);
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 183, 207, .45);
  filter: blur(2px);
}

.challang-water-orbit img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 85, 117, .16));
  transition: transform .2s linear;
}

.challang-water-orbit .fish-a {
  left: 10%;
  top: 45%;
  width: 115px;
  transform: translateX(calc(var(--chl-float, 0) * 52px)) rotate(-4deg);
}

.challang-water-orbit .fish-b {
  right: 14%;
  bottom: 16%;
  width: 126px;
  transform: translateX(calc(var(--chl-float, 0) * -58px)) rotate(6deg);
}

.challang-water-orbit .fish-c {
  left: 60%;
  top: 26%;
  width: 88px;
  transform: translateY(calc(var(--chl-float, 0) * 46px));
}

.challang-water-orbit .jelly {
  right: 3%;
  top: 46%;
  width: 92px;
  transform: translateY(calc(var(--chl-float, 0) * -54px));
}

.challang-water-orbit .weed {
  left: 7%;
  bottom: 5%;
  width: 132px;
  opacity: .78;
}

.challang-water-card {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 8%;
  width: 260px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 28px 70px rgba(0, 85, 117, .16);
  backdrop-filter: blur(12px);
}

.challang-water-card span,
.challang-reaction-list strong,
.challang-loop-steps span {
  color: var(--chl-water);
  font-size: 12px;
  font-weight: 940;
  text-transform: uppercase;
}

.challang-water-card strong {
  display: block;
  color: var(--chl-ink);
  font-size: 50px;
  line-height: 1;
}

.challang-water-card p {
  margin: 8px 0 0;
  color: #53707c;
  line-height: 1.4;
}

.challang-engine {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(180deg, rgba(233, 251, 255, .55), rgba(255, 253, 248, .45));
}

.challang-engine-copy code {
  display: inline-flex;
  max-width: 100%;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--chl-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  color: var(--chl-deep);
  white-space: normal;
}

.challang-engine-stage {
  display: grid;
  grid-template-columns: minmax(220px, 310px) 1fr;
  gap: 26px;
  align-items: center;
}

.challang-add-phone {
  width: min(310px, 100%);
  justify-self: center;
}

.challang-drink-stack {
  display: grid;
  gap: 12px;
}

.challang-drink-stack button,
.challang-reaction-list article,
.challang-loop-steps article {
  border: 1px solid var(--chl-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 16px 34px rgba(0, 85, 117, .07);
}

.challang-drink-stack button {
  min-height: 104px;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  grid-template-areas:
    "icon name value"
    "icon note value";
  gap: 4px 14px;
  align-items: center;
  padding: 14px;
  color: var(--chl-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: translateX(calc((1 - var(--chl-engine, 0)) * 22px));
  opacity: calc(.62 + var(--chl-engine, 0) * .38);
  transition: transform .35s ease, opacity .35s ease, border-color .25s ease, background .25s ease;
}

.challang-drink-stack button.is-active {
  border-color: rgba(34, 183, 207, .65);
  background: rgba(233, 251, 255, .92);
}

.challang-drink-stack img {
  grid-area: icon;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.challang-drink-stack span {
  grid-area: name;
  font-size: 20px;
  font-weight: 920;
}

.challang-drink-stack strong {
  grid-area: value;
  color: var(--chl-water);
  font-size: 24px;
  font-weight: 940;
}

.challang-drink-stack small {
  grid-area: note;
  color: #6a8290;
  font-weight: 760;
}

.challang-reactions {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: center;
}

.challang-reaction-visual {
  min-height: 520px;
  display: grid;
  place-items: center;
}

.challang-mini-aquarium {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(7, 56, 74, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(239, 253, 255, .95) 0 38%, rgba(74, 203, 221, .58) 39% 100%);
  box-shadow: 0 36px 90px rgba(0, 85, 117, .14);
}

.challang-mini-water {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: calc(44% + var(--chl-reaction, 0) * 28%);
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, .8) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 46%, rgba(255, 255, 255, .72) 0 9px, transparent 10px),
    linear-gradient(180deg, rgba(83, 217, 229, .82), rgba(17, 164, 197, .9));
  border-radius: 48% 52% 0 0 / 11% 9% 0 0;
  transition: height .35s ease;
}

.challang-mini-aquarium img {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 85, 117, .16));
}

.challang-mini-aquarium .turtle {
  width: 130px;
  right: 9%;
  bottom: 18%;
  transform: translateY(calc(var(--chl-reaction, 0) * -28px)) rotate(-8deg);
}

.challang-mini-aquarium .mini-fish-a {
  width: 120px;
  left: 15%;
  bottom: 24%;
  transform: translateX(calc(var(--chl-reaction, 0) * 70px));
}

.challang-mini-aquarium .float-coffee {
  width: 88px;
  left: 43%;
  top: 26%;
  opacity: calc(.2 + var(--chl-caffeine, 0) * .8);
  transform: translateY(calc(var(--chl-reaction, 0) * 35px)) rotate(-8deg);
}

.challang-mini-aquarium .float-wine {
  width: 84px;
  right: 28%;
  top: 20%;
  opacity: calc(.16 + var(--chl-alcohol, 0) * .84);
  transform: translateY(calc(var(--chl-reaction, 0) * 48px)) rotate(10deg);
}

.challang-reaction-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.challang-reaction-list article {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.challang-reaction-list img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.challang-reaction-list p,
.challang-loop-steps p {
  margin: 4px 0 0;
  color: #5f7885;
  line-height: 1.45;
}

.challang-loop {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .12), rgba(233, 251, 255, .62));
}

.challang-loop-stage {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 30px;
  align-items: center;
  margin-top: 28px;
}

.challang-loop-steps {
  display: grid;
  gap: 12px;
}

.challang-loop-steps article {
  padding: 18px;
  opacity: .62;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease;
}

.challang-loop-steps article.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(34, 183, 207, .58);
  background: rgba(255, 255, 255, .92);
}

.challang-loop-steps strong {
  display: block;
  margin-top: 6px;
  color: var(--chl-ink);
  font-size: 24px;
}

.challang-loop-phones {
  position: relative;
  min-height: 600px;
}

.challang-loop-phones figure {
  position: absolute;
  margin: 0;
  width: 270px;
  transition: transform .2s linear;
}

.challang-loop-phones .today {
  left: 8%;
  top: 12%;
  transform: translateX(calc(var(--chl-loop, 0) * -50px)) rotate(-5deg);
}

.challang-loop-phones .insights {
  right: 10%;
  bottom: 5%;
  transform: translateX(calc(var(--chl-loop, 0) * 50px)) rotate(5deg);
}

.challang-loop-phones figcaption {
  margin-top: 10px;
  color: #5f7885;
  font-size: 13px;
  font-weight: 830;
  text-align: center;
}

@media (max-width: 1100px) {
  .challang-aquarium,
  .challang-engine,
  .challang-reactions,
  .challang-loop-stage {
    grid-template-columns: 1fr;
  }

  .challang-phone-main {
    width: min(330px, 54%);
  }

  .challang-water-card {
    right: 4%;
  }

  .challang-engine-stage {
    grid-template-columns: minmax(220px, 300px) 1fr;
  }
}

@media (max-width: 720px) {
  .challang-aquarium,
  .challang-engine,
  .challang-reactions,
  .challang-loop {
    padding: 54px 20px;
  }

  .challang-aquarium {
    min-height: 0;
    gap: 24px;
  }

  .challang-aquarium-copy p:not(.eyebrow),
  .challang-engine-copy p,
  .challang-reaction-copy > p,
  .challang-loop-copy p {
    font-size: 17px;
  }

  .challang-stat-strip {
    grid-template-columns: 1fr;
  }

  .challang-stat-strip span {
    min-height: 66px;
  }

  .challang-cup-stage {
    min-height: 560px;
  }

  .challang-phone-main {
    width: min(285px, 76vw);
  }

  .challang-water-orbit {
    inset: 2% -20px 0;
  }

  .challang-water-orbit .fish-a {
    left: 2%;
    width: 86px;
  }

  .challang-water-orbit .fish-b {
    right: 0;
    width: 92px;
  }

  .challang-water-orbit .fish-c,
  .challang-water-orbit .jelly {
    width: 66px;
  }

  .challang-water-card {
    left: 0;
    right: auto;
    bottom: 0;
    width: min(250px, 78vw);
  }

  .challang-engine-stage {
    grid-template-columns: 1fr;
  }

  .challang-add-phone {
    width: min(255px, 72vw);
  }

  .challang-drink-stack button {
    min-height: 96px;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "icon name"
      "icon value"
      "icon note";
    padding: 12px;
    transform: translateY(calc((1 - var(--chl-engine, 0)) * 18px));
  }

  .challang-drink-stack img {
    width: 54px;
    height: 54px;
  }

  .challang-drink-stack span {
    font-size: 18px;
  }

  .challang-drink-stack strong {
    font-size: 22px;
  }

  .challang-reaction-visual {
    min-height: 320px;
  }

  .challang-mini-aquarium {
    aspect-ratio: 1 / 1;
  }

  .challang-mini-aquarium .turtle,
  .challang-mini-aquarium .mini-fish-a {
    width: 82px;
  }

  .challang-mini-aquarium .float-coffee,
  .challang-mini-aquarium .float-wine {
    width: 62px;
  }

  .challang-reaction-list article {
    grid-template-columns: 52px 1fr;
  }

  .challang-reaction-list img {
    width: 48px;
    height: 48px;
  }

  .challang-loop-phones {
    min-height: 520px;
    margin-top: 12px;
  }

  .challang-loop-phones figure {
    width: min(220px, 58vw);
  }

  .challang-loop-phones .today {
    left: 0;
    top: 8%;
    transform: translateX(calc(var(--chl-loop, 0) * -18px)) rotate(-6deg);
  }

  .challang-loop-phones .insights {
    right: 0;
    bottom: 2%;
    transform: translateX(calc(var(--chl-loop, 0) * 18px)) rotate(6deg);
  }
}