/* «Подыши со мной» — the dark, quiet band with the live circle. The deepest point of the page. */
.dyhanie { padding-block: var(--section); overflow: clip; }
.dyhanie::before { /* dusk at the top edge: the curtains are drawn */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 120px; pointer-events: none;
  background: linear-gradient(var(--paper), transparent); opacity: .08;
}
.dyhanie__inner {
  display: grid; align-items: start; gap: 32px clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  grid-template-areas: 'copy circle side' 'copy done side';
}
.dyhanie__copy { grid-area: copy; display: grid; gap: 18px; align-content: start; }
.dyhanie__copy h2 { color: var(--on-band); }
.dyhanie__lead { color: var(--on-band-muted); font-size: var(--text-lead); line-height: 1.55; max-width: 26em; }
.breath-settings { display: grid; gap: 10px; margin-top: 12px; }
.breath-settings__label { font-size: var(--text-micro); color: var(--on-band-muted); margin-top: 8px; }
.breath-settings__note { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--on-band-muted); }
.breath-custom { display: grid; gap: 8px; color: var(--on-band); }
.seg--wrap { flex-wrap: wrap; }

.breath { grid-area: circle; display: grid; justify-items: center; gap: 14px; }
.breath__stage { position: relative; width: min(440px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.breath__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.breath__ring-track { stroke: color-mix(in srgb, var(--on-band) 14%, transparent); stroke-width: .6; }
.breath__ring-progress { stroke: #d49a7e; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.breath__halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 154, 126, .55) 0%, rgba(212, 154, 126, .18) 42%, transparent 66%);
  opacity: calc(.15 + var(--b-glow, .12) * 1.4);
  transform: scale(calc(var(--b-scale, .62) * 1.08));
}
.breath__disc {
  position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(238, 240, 230, .16), rgba(238, 240, 230, .07) 70%);
  box-shadow: inset 0 0 0 1px rgba(238, 240, 230, .22);
  transform: scale(var(--b-scale, .62));
}
.breath__flower { width: 64px; height: 64px; color: #e2b296; stroke-width: 1; opacity: .8; transform: scale(var(--b-flower, 1)); }
.breath__square { position: absolute; inset: 17%; border: 1px solid rgba(238, 240, 230, .32); border-radius: 28px; display: none; }
.breath__dot { position: absolute; left: var(--b-dx, 0%); top: var(--b-dy, 0%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #e2b296; box-shadow: 0 0 18px rgba(226, 178, 150, .7); }
.breath__stage.is-square .breath__disc { width: 66%; border-radius: 28px; transform: scale(calc(.85 + (var(--b-scale, .62) - .443) * .26)); }
.breath__stage.is-square .breath__square { display: block; }
.breath__readout { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; text-align: center; pointer-events: none; }
.breath__phase { font-family: var(--serif); font-size: clamp(34px, 2.6vw + 16px, 46px); line-height: 1; color: var(--on-band); }
.breath__secs { font-size: 28px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--on-band-muted); min-height: 1.2em; }
.breath__count { font-size: var(--text-small); color: var(--on-band-muted); font-variant-numeric: tabular-nums; }
.breath__bar { width: min(260px, 70%); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--on-band) 14%, transparent); overflow: hidden; }
.breath__bar span { display: block; height: 100%; width: 0; background: #d49a7e; }
.breath__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.breath__controls .btn { min-width: 150px; }
.breath__static { color: var(--on-band); font-size: var(--text-lead); text-align: center; max-width: 24em; }
/* Reduced motion: no scaling, a text timer and a phase bar. */
.breath.is-static .breath__disc, .breath.is-static .breath__halo { transform: scale(.72); }

.dyhanie__side { grid-area: side; display: grid; gap: 18px; align-content: start; }
.breath-opts { display: grid; color: var(--on-band); }
.breath-opts .toggle-row { font-size: var(--text-small); }
.dyhanie__safety { font-size: var(--text-small); color: var(--on-band-muted); line-height: 1.6; }

.breath-done { grid-area: done; display: grid; justify-items: center; gap: 16px; text-align: center; outline: none; padding-top: 8px; }
.breath-done__phrase { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1vw + 16px, 28px); line-height: 1.3; color: var(--on-band); max-width: 24em; }
.breath-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.breath-done__note { font-size: var(--text-small); color: var(--on-band-muted); min-height: 1.4em; }

/* Dim screen / «закрой глаза» */
.breath-dim {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 28px;
  background: #0f1311; color: rgba(230, 228, 218, .45);
  padding: 24px 24px calc(32px + env(safe-area-inset-bottom, 0px));
}
.breath-dim__circle { width: min(60vmin, 360px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212, 154, 126, .3), rgba(212, 154, 126, .08) 60%, transparent 70%); transform: scale(var(--b-scale, .62)); opacity: .55; }
.breath-dim__phase { font-family: var(--serif); font-size: 34px; min-height: 1.2em; }
.breath-dim__stop { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); opacity: .7; }
.breath-dim.is-eyes { background: rgba(8, 10, 9, .85); cursor: pointer; }
.breath-dim.is-eyes .breath-dim__circle { opacity: .25; }
.breath-dim.is-eyes::after { content: 'Коснись экрана, чтобы поставить паузу'; position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); font-size: var(--text-micro); color: rgba(230, 228, 218, .4); }
html.is-dimmed .site-header, html.is-dimmed .dock { visibility: hidden; }

@media (max-width: 1100px) {
  .dyhanie__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'copy circle' 'side done'; }
}
@media (max-width: 767px) {
  .dyhanie__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'circle' 'done' 'side'; }
  .breath__stage { width: min(78vw, 360px); }
  .breath__controls { width: 100%; }
  .breath__controls .btn { flex: 1; }
}