/* Breathe + Done screens. Tokens come from tokens.css. Look copied from design/reference.html. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-weight: 300;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 32px;
  --size: min(72vw, 44vh, 320px);
}
.spc { flex: 1; }
.small { font-size: 14px; line-height: 1.4; color: var(--fg-small); margin: 0; }
.ttl { font: 300 34px/1.1 var(--f-head); color: var(--fg-title); margin: 6px 0 0; }
.sub { font-size: 16px; color: var(--fg-sub); margin: 8px 0 0; letter-spacing: .02em; }

.stage { position: relative; width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center; flex: none; }
.ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: var(--ring-width) solid rgba(var(--ring-rgb), calc(.35 + .55 * var(--k, .2)));
  box-shadow: 0 0 calc(32px * var(--k, 0)) rgba(var(--ring-glow-rgb), calc(.6 * var(--k, 0)));
}
.orb {
  width: 100%; height: 100%; border-radius: 50%;
  transform: scale(var(--s, .55));
  background: var(--orb);
}
.word { position: absolute; left: 0; right: 0; bottom: -56px; font-size: 24px; color: #e9e4f6; }

.btn {
  min-height: var(--touch); min-width: var(--touch); padding: 13px 28px; border-radius: 999px;
  border: 0; font: 500 16px var(--f-body); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
}

.screen-done { display: none; }
[data-screen="done"] .screen-breathe { display: none; }
[data-screen="done"] .screen-done { display: flex; }
.screen-breathe, .screen-done { flex: 1; width: 100%; flex-direction: column; align-items: center; }
.screen-breathe { display: flex; }
.screen-done .stage { --size: min(48vw, 28vh, 190px); }

@media (prefers-reduced-motion: reduce) {
  .orb, .ring { transition: none; }
}