.activity-timer-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  color: #102521;
  background: #ffd32d;
  font-family: var(--font-app);
  transition: background-color .2s ease, color .2s ease;
}
.activity-timer-root[data-phase="shoot"] { color: #fff; background: #0a8f80; }
.activity-timer-root.is-warning { color: #102521; background: #ffd32d; }
.activity-timer-root[data-phase="complete"] { color: #fff; background: #df2944; }
.activity-timer { display: grid; width: 100%; height: 100%; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.activity-timer header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.activity-timer header > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.activity-timer header span { font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.activity-timer header strong { font-size: clamp(20px, 4vw, 32px); font-weight: 900; letter-spacing: 0; }
.activity-timer header button { display: grid; width: 52px; height: 52px; flex: 0 0 52px; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: rgb(255 255 255 / 18%); place-items: center; }
.activity-timer__display { display: flex; align-items: center; justify-content: center; line-height: .8; }
.activity-timer__display strong { font-size: clamp(180px, 46vw, 540px); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: 0; }
.activity-timer__display span { align-self: flex-end; margin: 0 0 12vh 10px; font-size: clamp(28px, 6vw, 62px); font-weight: 900; }
.activity-timer__sequence { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 22px; font-size: 14px; font-weight: 900; }
.activity-timer__sequence span { opacity: .55; }
.activity-timer__sequence span.is-active { opacity: 1; }
.activity-timer__sequence i { width: 34px; height: 2px; background: currentColor; opacity: .45; }
.activity-timer footer { display: grid; width: min(680px, 100%); gap: 10px; justify-self: center; }
.activity-timer__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.activity-timer footer button { display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 10px; border: 1.5px solid currentColor; border-radius: 12px; color: inherit; background: rgb(255 255 255 / 16%); font-size: 16px; font-weight: 900; }
.activity-timer__controls button { min-width: 0; padding: 8px; font-size: 13px; }
.activity-timer__controls button:disabled { opacity: .45; }
.activity-timer footer button.is-primary { color: #102521; background: #fff; }
.activity-timer__score { width: 100%; }
@media (max-width: 560px) {
  .activity-timer__display strong { font-size: min(48vw, 240px); }
  .activity-timer__display span { margin-bottom: 9vh; }
  .activity-timer__controls button { min-height: 54px; flex-direction: column; gap: 3px; font-size: 10px; }
  .activity-timer__score { min-height: 56px !important; }
}