:root {
  color-scheme: dark;
  --bg-0: #06050a;
  --bg-1: #15101c;
  --bg-2: #211829;
  --text: rgba(244, 239, 247, 0.92);
  --muted: rgba(224, 210, 230, 0.62);
  --line: rgba(225, 207, 230, 0.2);
  --button: rgba(235, 218, 242, 0.075);
  --button-hover: rgba(235, 218, 242, 0.13);
  --glow: rgba(206, 177, 229, 0.24);
  --pace-position: 50%;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 42%, rgba(78, 56, 96, 0.34), transparent 34rem),
    linear-gradient(155deg, var(--bg-1), var(--bg-0) 58%, #030207);
  color: var(--text);
  font-family: Candara, Corbel, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

button {
  color: inherit;
  font: inherit;
}

input {
  font: inherit;
}

.app-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  isolation: isolate;
  touch-action: manipulation;
}

#breathing-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.brand-mark {
  position: fixed;
  top: max(1.1rem, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  z-index: 2;
  place-items: center;
  gap: 0.32rem;
  width: min(18rem, 72vw);
  padding-top: 0.35rem;
  transform: translateX(-50%);
  transition: opacity 680ms ease, transform 680ms ease, filter 680ms ease;
}

.app-shell.is-running .brand-mark {
  opacity: 0;
  filter: blur(0.8rem);
  transform: translateX(-50%) translateY(-0.9rem) scale(0.96);
  pointer-events: none;
}

.brand-flower {
  position: relative;
  width: 5.4rem;
  height: 4.7rem;
  filter: drop-shadow(0 0 1rem rgba(203, 178, 225, 0.24));
}

.brand-flower::after {
  position: absolute;
  inset: auto 0 0;
  width: 0.65rem;
  height: 0.65rem;
  margin: auto;
  border-radius: 999px;
  background: #ead5c5;
  box-shadow: 0 0 1.6rem rgba(213, 170, 143, 0.76);
  content: "";
}

.brand-flower span {
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  width: 1.55rem;
  height: 3.55rem;
  border: 1px solid rgba(229, 215, 234, 0.48);
  border-radius: 999px 999px 0.4rem 0.4rem;
  background: linear-gradient(180deg, rgba(189, 176, 224, 0.3), rgba(222, 179, 150, 0.48));
  box-shadow: inset 0 0 1.2rem rgba(255, 255, 255, 0.12);
  transform-origin: 50% 100%;
}

.brand-flower span:nth-child(1) { transform: translateX(-50%) rotate(-62deg); }
.brand-flower span:nth-child(2) { transform: translateX(-50%) rotate(-44deg); }
.brand-flower span:nth-child(3) { transform: translateX(-50%) rotate(-26deg); }
.brand-flower span:nth-child(4) { transform: translateX(-50%) rotate(-8deg); }
.brand-flower span:nth-child(5) { transform: translateX(-50%) rotate(8deg); }
.brand-flower span:nth-child(6) { transform: translateX(-50%) rotate(26deg); }
.brand-flower span:nth-child(7) { transform: translateX(-50%) rotate(44deg); }
.brand-flower span:nth-child(8) { transform: translateX(-50%) rotate(62deg); }

.brand-text {
  display: grid;
  text-align: center;
}

.brand-text strong {
  color: rgba(242, 229, 236, 0.9);
  font-size: 2.35rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}

.breath-copy {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(88vw, 34rem);
  min-height: min(70vw, 22rem);
  text-align: center;
}

.breath-copy::before,
.breath-copy::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(19rem, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 520ms ease, filter 520ms ease, transform 520ms ease;
}

.breath-copy::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(245, 226, 190, 0.6) 0 0.11rem, transparent 0.18rem),
    radial-gradient(circle at 82% 34%, rgba(207, 232, 226, 0.5) 0 0.13rem, transparent 0.22rem),
    radial-gradient(circle at 76% 74%, rgba(229, 208, 239, 0.46) 0 0.1rem, transparent 0.18rem),
    radial-gradient(circle at 24% 70%, rgba(246, 221, 191, 0.48) 0 0.12rem, transparent 0.22rem),
    radial-gradient(circle at 18% 36%, rgba(198, 228, 222, 0.42) 0 0.1rem, transparent 0.2rem),
    radial-gradient(circle at 50% 50%, rgba(213, 189, 228, 0.08), transparent 58%);
  filter: drop-shadow(0 0 0.85rem rgba(226, 207, 230, 0.32));
  opacity: 0.86;
  animation: breathFieldFloat 9s ease-in-out infinite;
}

.breath-copy::after {
  width: min(15.5rem, 62vw);
  border: 1px solid rgba(238, 223, 235, 0.1);
  background:
    conic-gradient(from 18deg, transparent 0deg 28deg, rgba(235, 219, 232, 0.16) 29deg 31deg, transparent 32deg 90deg, rgba(220, 235, 229, 0.12) 91deg 93deg, transparent 94deg 178deg, rgba(246, 224, 193, 0.13) 179deg 181deg, transparent 182deg 360deg),
    radial-gradient(circle, rgba(235, 222, 240, 0.055), transparent 64%);
  opacity: 0.72;
  animation: breathRingTurn 24s linear infinite;
}

.phase-label {
  --phase-opacity: 1;
  --phase-scale: 1;
  --phase-blur: 0px;
  margin: 0;
  color: rgba(246, 239, 248, 0.86);
  font-size: 5.5rem;
  font-family: Candara, Corbel, "Segoe UI Light", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.96;
  opacity: var(--phase-opacity);
  filter: blur(var(--phase-blur));
  transform: scale(var(--phase-scale));
  text-shadow: 0 0 2rem rgba(205, 176, 228, 0.2);
  transition: color 240ms ease;
}

.breath-word {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(14rem, 58vw);
  aspect-ratio: 1;
  border: 1px solid rgba(240, 224, 234, 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(238, 218, 190, 0.14), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(197, 177, 225, 0.13), rgba(197, 177, 225, 0.035) 48%, transparent 69%);
  box-shadow:
    0 0 1.8rem rgba(206, 177, 229, 0.13),
    inset 0 0 1.2rem rgba(255, 255, 255, 0.035);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  animation: breathWordPulse 6.5s ease-in-out infinite;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.breath-word::before,
.breath-word::after {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.breath-word::before {
  width: 0.42rem;
  height: 0.42rem;
  background: rgba(247, 231, 200, 0.92);
  box-shadow:
    -4.6rem -1.1rem 0 -0.08rem rgba(224, 208, 237, 0.42),
    -3.1rem 3.5rem 0 -0.1rem rgba(205, 231, 224, 0.38),
    2.7rem -3.6rem 0 -0.07rem rgba(244, 223, 195, 0.5),
    4.2rem 1.8rem 0 -0.09rem rgba(219, 200, 234, 0.42),
    0.8rem 4.5rem 0 -0.12rem rgba(246, 224, 193, 0.36);
  filter: drop-shadow(0 0 0.85rem rgba(242, 223, 198, 0.56));
  opacity: 0.78;
}

.breath-word::after {
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(239, 225, 235, 0.095);
  box-shadow: 0 0 1.4rem rgba(205, 184, 228, 0.1);
}

.breath-word:focus-visible {
  border-color: rgba(239, 224, 234, 0.24);
  box-shadow:
    0 0 2rem rgba(206, 177, 229, 0.18),
    inset 0 0 1.2rem rgba(255, 255, 255, 0.04);
}

@media (hover: hover) {
  .breath-word:hover {
    border-color: rgba(239, 224, 234, 0.2);
    box-shadow:
      0 0 2.4rem rgba(206, 177, 229, 0.18),
      inset 0 0 1.35rem rgba(255, 255, 255, 0.05);
    transform: scale(1.018);
  }
}

.breath-word:active {
  transform: scale(0.985);
}

.app-shell.is-running .breath-word {
  width: auto;
  aspect-ratio: auto;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: none;
  pointer-events: none;
}

.app-shell.is-running .breath-word::before,
.app-shell.is-running .breath-word::after,
.app-shell.is-running .breath-copy::before,
.app-shell.is-running .breath-copy::after {
  opacity: 0;
  filter: blur(0.9rem);
}

.app-shell.is-running .phase-label {
  color: rgba(250, 246, 252, 0.94);
  font-size: 4.25rem;
  text-shadow:
    0 0 0.45rem rgba(5, 4, 8, 0.86),
    0 0 1.1rem rgba(5, 4, 8, 0.78),
    0 0 2.6rem rgba(205, 176, 228, 0.42);
}

.controls {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr;
  z-index: 2;
  gap: 0.8rem;
  align-items: center;
  justify-content: stretch;
  justify-items: stretch;
  width: min(94vw, 34rem);
  transform: translateX(-50%);
  transition: opacity 260ms ease, transform 260ms ease;
}

.app-shell.is-running .controls {
  opacity: 0;
  transform: translateX(-50%) translateY(0.7rem);
  pointer-events: none;
}

.pace-switch {
  min-height: 4.05rem;
  border: 1px solid rgba(225, 207, 230, 0.13);
  border-radius: 999px;
  background: rgba(235, 218, 242, 0.052);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  cursor: pointer;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.pace-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  width: 100%;
  padding: 0 1.45rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.pace-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 3.35rem;
}

.pace-track::before {
  position: absolute;
  right: 0.2rem;
  left: 0.2rem;
  top: 1.18rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(224, 207, 230, 0.16);
  content: "";
}

.pace-track::after {
  position: absolute;
  top: 1.18rem;
  left: var(--pace-position);
  z-index: 2;
  width: 1.95rem;
  height: 1.95rem;
  border: 1px solid rgba(250, 238, 221, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 250, 232, 0.96), rgba(236, 216, 190, 0.78) 46%, rgba(205, 187, 226, 0.52) 100%);
  box-shadow:
    0 0 0.7rem rgba(232, 214, 191, 0.2),
    inset 0 0 0.75rem rgba(255, 255, 255, 0.18);
  content: "";
  transform: translate(-50%, -50%);
  transition: left 180ms ease;
}

.pace-track span {
  position: relative;
  z-index: 3;
  justify-self: center;
  display: grid;
  place-items: end center;
  width: 2.8rem;
  height: 3.35rem;
  padding-bottom: 0.02rem;
  color: rgba(238, 227, 242, 0.68);
  font-size: 0.76rem;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 0 0.8rem rgba(207, 178, 226, 0.24);
}

.pace-track span::before {
  position: absolute;
  top: 1.18rem;
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: rgba(236, 222, 241, 0.32);
  content: "";
  transform: translate(-50%, -50%);
}

.pace-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pace-switch:has(input:focus-visible) {
  border-color: rgba(225, 207, 230, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.pace-switch:focus-within {
  border-color: rgba(225, 207, 230, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

@media (hover: hover) {
  .pace-switch:hover {
    background: rgba(235, 218, 242, 0.07);
  }
}

@keyframes breathWordPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }

  50% {
    transform: scale(1.035);
    opacity: 1;
  }
}

@keyframes breathFieldFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-2deg) scale(0.98);
  }

  50% {
    transform: translate(-50%, -50%) rotate(3deg) scale(1.04);
  }
}

@keyframes breathRingTurn {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

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

@media (max-width: 520px) {
  body {
    background:
      radial-gradient(circle at 50% 38%, rgba(78, 56, 96, 0.34), transparent 20rem),
      linear-gradient(160deg, var(--bg-1), var(--bg-0) 62%, #030207);
  }

  .controls {
    right: auto;
    left: 50%;
    gap: 0.6rem;
    width: min(17.5rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
  }

  .app-shell.is-running .controls {
    transform: translateX(-50%) translateY(0.7rem);
  }

  .brand-mark {
    width: min(15rem, 72vw);
  }

  .brand-flower {
    width: 4.3rem;
    height: 3.8rem;
  }

  .brand-flower span {
    width: 1.25rem;
    height: 2.8rem;
  }

  .brand-text strong {
    font-size: 1.75rem;
  }

  .phase-label,
  .app-shell.is-running .phase-label {
    font-size: 3.2rem;
  }

  .breath-word {
    width: min(13rem, 64vw);
  }

  .pace-switch {
    min-height: 4.1rem;
  }

  .pace-switch {
    padding: 0 1rem;
    grid-template-columns: 1fr;
  }

  .pace-track span {
    width: 2.35rem;
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-label,
  .controls,
  .brand-mark,
  .pace-track::after {
    transition-duration: 1ms;
  }

  .breath-copy::before,
  .breath-copy::after,
  .breath-word {
    animation: none;
  }
}