/* The viewport itself is the breathing light. */
.breathe-page { overflow:hidden; }
.breathing { --light-size:min(74vw,48svh,390px); height:100dvh; display:grid; place-items:center; position:relative; overflow:hidden; padding:72px 24px; touch-action:manipulation; }
.breath-light { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.breath-fallback { position:absolute; inset:0; pointer-events:none; }
.breath-fallback i { position:absolute; display:block; border-radius:50%; }
.breath-fallback[hidden] { display:none; }
.breath-focus { position:absolute; left:50%; top:46%; width:min(72vw,40svh,320px); height:auto; aspect-ratio:320/350; overflow:visible; opacity:.92; transform:translate(-50%,-50%); pointer-events:none; }
.breath-focus [data-ring] path { pointer-events:visiblePainted; touch-action:none; user-select:none; -webkit-touch-callout:none; }
.breathing-guide { position:absolute; top:calc(46% + min(36vw,20svh,160px)*1.094 + 22px); left:24px; right:24px; height:24px; text-align:center; color:var(--ink); font-size:13px; font-weight:400; line-height:24px; opacity:.7; transition:opacity 2s ease; pointer-events:none; user-select:none; }
.breathing-guide span { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.breathing-guide[data-phase="in"] .breath-in,.breathing-guide[data-phase="out"] .breath-out { opacity:1; }
.breathing-guide[data-quiet] { opacity:0; }
.breathe-page .actions { opacity:.55; transition:opacity .45s ease; }
.breathe-page .actions:hover,.breathe-page .actions:has(:focus-visible) { opacity:1; }
.breathing-help { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce) { .breathing-guide,.breathing-guide span,.breathe-page .actions { transition:none; } }