:root {
  color-scheme: light;
  --ink: #24362d;
  --muted: #66756d;
  --deep: #e53935;
  --deep-pressed: #c92f2b;
  --leaf: #e53935;
  --mist: #ffffff;
  --card: rgba(255, 255, 251, 0.88);
  --line: rgba(49, 94, 75, 0.13);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { touch-action: manipulation; }

.shell {
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.meditation { position: relative; margin: auto 0; display: grid; justify-items: center; }
.orb { position: relative; width: min(76vw, 350px); aspect-ratio: 1; border-radius: 50%; background: var(--deep); box-shadow: 0 26px 65px rgba(202,47,43,.19), inset 0 0 0 1px rgba(255,255,255,.15); overflow: hidden; }
.orb::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.24); border-radius: inherit; pointer-events: none; }
.orb-action { position: absolute; inset: 0; width: 100%; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 13%; }
.time { font-variant-numeric: tabular-nums; font-size: clamp(3.5rem, 17vw, 5.4rem); font-weight: 300; letter-spacing: -.07em; line-height: 1; }
.action-word { margin-top: 17px; font-size: .82rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.orb.running { background: var(--deep-pressed); box-shadow: 0 28px 70px rgba(202,47,43,.22), inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 7px rgba(229,57,53,.07); }
.duration-popover { position: absolute; z-index: 4; top: calc(min(76vw, 350px) - 65px); left: 50%; transform: translateX(-50%); display: flex; gap: 7px; padding: 8px; border: 1px solid rgba(0,0,0,.08); border-radius: 22px; background: rgba(255,255,255,.98); box-shadow: 0 16px 45px rgba(45,38,37,.18); }
.duration-popover button { width: 46px; height: 46px; border: 0; border-radius: 15px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.duration-popover button.selected { background: var(--deep); color: white; }
.icon-row { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 38px; }
.icon-button, .reset-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(49,94,75,.14); border-radius: 50%; background: rgba(255,255,251,.72); color: #77867c; cursor: pointer; }
.icon-button.active { background: var(--deep); color: white; box-shadow: 0 8px 18px rgba(49,94,75,.18); }
.icon-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.volume-wrap { position: relative; }
.volume-popover { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); width: 48px; height: 166px; padding: 18px 0; border: 1px solid rgba(49,94,75,.12); border-radius: 24px; background: rgba(255,255,251,.96); box-shadow: 0 14px 35px rgba(54,78,63,.16); }
.volume-popover input { position: absolute; width: 118px; left: -35px; top: 73px; transform: rotate(-90deg); accent-color: var(--deep); }
.reset-icon { position: absolute; z-index: 2; top: calc(min(76vw, 350px) + 108px); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; margin: 0; background: transparent; border: 0; }
.reset-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.install-button { margin-top: 20px; border: 0; background: transparent; color: var(--deep); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 600px) {
  .shell { padding-left: 0; padding-right: 0; }
  .orb { width: 350px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }