@property --secs {
  syntax: "<integer>";
  inherits: true;
  initial-value: 272;
}

.dw[data-astro-cid-wfg2lxbs] {
  --secs: 272;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 16px;
  width: min(440px, 100%);
  padding: 16px;
  border-radius: 34px;
  background: #e3f3fb;
  color: #10324a;
  box-shadow: var(--shadow-2), inset 0 0 0 1px #10324a14;
}

.dw__tank[data-astro-cid-wfg2lxbs] {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: #cfeaf6;
  box-shadow: inset 0 0 0 3px #10324a1a;
}

.dw__water[data-astro-cid-wfg2lxbs] {
  --level: 62%;
  position: absolute;
  inset: auto 0 0;
  height: var(--level);
  background: linear-gradient(#7cc6e8, #3b93c4);
  color: #7cc6e8;
}

.dw__wave[data-astro-cid-wfg2lxbs] {
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  width: 100%;
  height: 10px;
}

.dw__duck[data-astro-cid-wfg2lxbs] {
  position: absolute;
  left: 50%;
  top: -40px;
  translate: -50%;
}

.dw__side[data-astro-cid-wfg2lxbs] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.dw__time[data-astro-cid-wfg2lxbs] {
  font: 650 clamp(2.6rem, 2rem + 3vw, 3.6rem) / 1 var(--font-display);
  font-variation-settings: "SOFT" 100;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.dw__label[data-astro-cid-wfg2lxbs] {
  font: 700 .85rem/1 var(--font-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .75;
}

.dw__btns[data-astro-cid-wfg2lxbs] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dw__btns[data-astro-cid-wfg2lxbs] span[data-astro-cid-wfg2lxbs] {
  min-width: 48px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  font: 800 .85rem/1 var(--font-text);
  box-shadow: 0 1px #10324a1f;
}

.dw__btns[data-astro-cid-wfg2lxbs] span[data-astro-cid-wfg2lxbs]:first-child {
  background: #ffd34d;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw--animated[data-astro-cid-wfg2lxbs] .dw__water[data-astro-cid-wfg2lxbs] {
      animation: linear both dw-drain;
      animation-timeline: --ducky;
      animation-range: contain;
    }

    @keyframes dw-drain {
      from {
        height: 92%;
      }

      to {
        height: 22%;
      }
    }

    .dw--animated[data-astro-cid-wfg2lxbs] .dw__duck[data-astro-cid-wfg2lxbs] {
      animation: 2.6s ease-in-out infinite dw-bob;
    }

    @keyframes dw-bob {
      50% {
        transform: translateY(-4px) rotate(-4deg);
      }
    }
  }

  @supports (animation-timeline: view()) and (width: round(down, 7.5px, 1px)) {
    .dw--animated[data-astro-cid-wfg2lxbs] {
      animation: linear both dw-count;
      animation-timeline: --ducky;
      animation-range: contain;
    }

    @keyframes dw-count {
      from {
        --secs: 299;
      }

      to {
        --secs: 18;
      }
    }

    .dw--animated[data-astro-cid-wfg2lxbs] .dw__static[data-astro-cid-wfg2lxbs] {
      display: none;
    }

    .dw--animated[data-astro-cid-wfg2lxbs] .dw__time[data-astro-cid-wfg2lxbs]:after {
      --m: round(down, calc(var(--secs) / 60), 1);
      counter-reset: m calc(var(--m)) s calc(var(--secs) - var(--m) * 60);
      content: counter(m) ":" counter(s, decimal-leading-zero);
    }
  }
}