:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", sans-serif;
  background: #27005d;
  color: #fff7a9;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 20rem;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 18% 28%, #ff4da6 0 7%, transparent 22%),
    radial-gradient(ellipse at 83% 20%, #02e6de 0 8%, transparent 26%),
    radial-gradient(ellipse at 50% 86%, #ffc12c 0 9%, transparent 30%),
    conic-gradient(from 214deg at 52% 48%, #26005c, #142e98, #a61089, #f13e67, #f69c21, #118e8c, #26005c);
  background-size: 100% 100%, 100% 100%, 100% 100%, 180% 180%;
  animation: liquid-sky 18s ease-in-out infinite alternate;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 70vmax;
  height: 70vmax;
  border: clamp(1.25rem, 3vw, 3.5rem) solid rgba(255, 245, 118, 0.45);
  border-radius: 47% 53% 44% 56% / 52% 39% 61% 48%;
  content: "";
  filter: blur(0.5px) drop-shadow(0 0 1.75rem #ff4db8);
  opacity: 0.6;
  pointer-events: none;
}

body::before {
  top: -26vmax;
  left: -26vmax;
  animation: orbit-one 23s linear infinite;
}

body::after {
  right: -30vmax;
  bottom: -30vmax;
  border-color: rgba(73, 255, 226, 0.42);
  border-radius: 58% 42% 61% 39% / 37% 56% 44% 63%;
  filter: blur(0.5px) drop-shadow(0 0 1.75rem #00f5d4);
  animation: orbit-two 29s linear infinite reverse;
}

main {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}

.app-shell {
  width: min(100%, 46rem);
  text-align: center;
}

.check-in {
  position: relative;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border: 0.1875rem solid rgba(255, 247, 169, 0.78);
  border-radius: 42% 58% 48% 52% / 7% 9% 11% 8%;
  background:
    linear-gradient(120deg, rgba(42, 0, 103, 0.93), rgba(160, 17, 142, 0.82) 48%, rgba(0, 123, 137, 0.9)),
    #4a0374;
  box-shadow: 0 0 0 0.55rem rgba(255, 76, 177, 0.2), 0 1.25rem 3.5rem rgba(11, 0, 49, 0.7), inset 0 0 3rem rgba(255, 247, 169, 0.18);
  isolation: isolate;
  text-align: center;
}

.check-in::before {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: repeating-conic-gradient(from 5deg, rgba(255, 226, 82, 0.2) 0deg 8deg, transparent 8deg 20deg);
  content: "";
  mix-blend-mode: screen;
  animation: kaleidoscope-spin 32s linear infinite;
}

.eyebrow {
  margin: 0 0 0.875rem;
  color: #fff7a9;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-shadow: 0 0 0.75rem #ff33ab;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #fff7a9;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.8rem, 9vw, 5.8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.92;
  text-shadow: 0.08em 0.08em 0 #71005f, -0.045em -0.045em 0 #10e2ce, 0 0 1rem #ffed55;
  transform: rotate(-2deg);
}

.prompt {
  max-width: 31rem;
  margin: 1.5rem auto 2.25rem;
  color: #ffffff;
  font-size: clamp(1rem, 2.5vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 0.125rem 0.5rem #2b0056;
}

.medication-button {
  position: relative;
  display: block;
  width: min(100%, 38rem);
  min-height: clamp(9.5rem, 29vw, 15rem);
  margin: 2rem auto 0;
  padding: 1.5rem 2rem;
  overflow: hidden;
  border: 0.25rem solid #fff7a9;
  border-radius: 50% 50% 46% 54% / 20% 17% 25% 22%;
  box-shadow: 0 0.75rem 0 #410061, 0 0 0 0.5rem rgba(0, 255, 219, 0.34), 0 0 2.4rem rgba(255, 55, 169, 0.9);
  color: #ffffff;
  cursor: pointer;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.2rem, 8vw, 4.8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0.08em 0.08em 0 rgba(53, 0, 85, 0.65);
  transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.medication-button::before {
  position: absolute;
  top: 7%;
  left: 10%;
  width: 80%;
  height: 35%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent);
  content: "";
  opacity: 0.65;
  transform: rotate(-4deg);
}

.medication-button.is-pending {
  background: linear-gradient(120deg, #ff315d, #ff8c19 30%, #ffeb52 47%, #ec278e 72%, #6235e5);
  background-size: 220% 220%;
  animation: button-prism 5s ease-in-out infinite alternate;
}

.medication-button.is-complete {
  background: linear-gradient(120deg, #00dba8, #24e9f2 28%, #7b56ff 51%, #fa4fb5 75%, #ffc62a);
  background-size: 220% 220%;
  animation: button-prism 4s ease-in-out infinite alternate;
}

.medication-button:hover {
  filter: saturate(1.2) brightness(1.12);
  transform: translateY(-0.2rem) rotate(0.8deg) scale(1.015);
}

.medication-button:active {
  box-shadow: 0 0.35rem 0 #410061, 0 0 0 0.5rem rgba(0, 255, 219, 0.34), 0 0 2.4rem rgba(255, 55, 169, 0.9);
  transform: translateY(0.32rem) scale(0.99);
}

.medication-button:focus,
.medication-button:focus-visible {
  outline: 0.3125rem solid #ffffff;
  outline-offset: 0.375rem;
}

.status {
  min-height: 1.5rem;
  margin: 1.5rem 0 0;
  color: #fff7a9;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0 0.75rem #2b0056;
}

.reset-button {
  margin: 0 0 0 0.35rem;
  padding: 0;
  border: 0;
  border-bottom: 0.125rem solid currentColor;
  background: transparent;
  color: #6dfff0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  text-shadow: 0 0 0.6rem #00bfb4;
}

.reset-button:hover {
  color: #ffffff;
}

.reset-button:focus,
.reset-button:focus-visible {
  outline: 0.1875rem solid #ffffff;
  outline-offset: 0.1875rem;
}

.privacy-note {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0.125rem 0.5rem #2b0056;
}

.disclaimer {
  max-width: 40rem;
  margin: 1.125rem auto 0;
  color: #fff7a9;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 0.125rem 0.5rem #2b0056;
}

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

.burst-pill {
  position: fixed;
  width: clamp(1rem, 2.5vw, 1.65rem);
  aspect-ratio: 2.1 / 1;
  border: 0.1rem solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(100deg, #ffef50 0 48%, #ff369e 49% 100%);
  box-shadow: inset 0 0.125rem 0.25rem rgba(255, 255, 255, 0.8), 0 0.15rem 0.45rem rgba(29, 0, 75, 0.7), 0 0 0.85rem #ff43b6;
  filter: hue-rotate(var(--hue));
  transform: translate(-50%, -50%);
  animation: pill-flight var(--duration) cubic-bezier(0.18, 0.72, 0.35, 0.99) var(--delay) forwards;
}

.burst-pill::after {
  position: absolute;
  top: 12%;
  left: 17%;
  width: 42%;
  height: 25%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  content: "";
}

@keyframes liquid-sky {
  to {
    background-position: 0 0, 0 0, 0 0, 100% 100%;
  }
}

@keyframes orbit-one {
  to {
    transform: rotate(360deg) scale(1.1);
  }
}

@keyframes orbit-two {
  to {
    transform: rotate(360deg) scale(0.88);
  }
}

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

@keyframes button-prism {
  to {
    background-position: 100% 100%;
  }
}

@keyframes pill-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.35);
  }

  12% {
    opacity: 1;
    transform: translate(calc(-50% + var(--horizontal-near)), calc(-50% + var(--upward-near))) rotate(90deg) scale(1.15);
  }

  42% {
    transform: translate(calc(-50% + var(--horizontal-apex)), calc(-50% + var(--upward-distance))) rotate(300deg) scale(1);
  }

  100% {
    opacity: 0.78;
    transform: translate(calc(-50% + var(--horizontal-distance)), calc(-50% + var(--fall-distance))) rotate(var(--spin)) scale(0.78);
  }
}

@media (max-width: 28rem) {
  main {
    align-items: start;
    padding: 2rem 1rem;
  }

  .check-in {
    padding: 1.5rem 1rem;
  }

  .prompt {
    margin-bottom: 1.75rem;
  }

  .medication-button {
    min-height: 9rem;
    padding: 1.25rem;
  }

  .privacy-note {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  body::after,
  .check-in::before,
  .medication-button,
  .burst-pill {
    animation: none;
  }

  .burst-pill {
    display: none;
  }

  .medication-button:hover,
  .medication-button:active {
    transform: none;
  }
}