.tone-breathing-diagram{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:100%;height:100%;aspect-ratio:1;padding:14px 14px 10px;box-sizing:border-box;overflow:hidden;background:var(--page-bg);color:var(--ink);font-size:16px;line-height:1.3;isolation:isolate}
.tone-breathing-diagram__legend{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1;font-size:16px}
.tone-breathing-diagram__phase,.tone-breathing-diagram__particle-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tone-breathing-diagram__phase i{display:block;width:16px;height:1px;background:var(--accent);color:var(--accent);position:relative}
.tone-breathing-diagram__phase i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tone-breathing-diagram__phase--out i{transform:rotate(180deg)}
.tone-breathing-diagram__particle-key i{width:5px;height:5px;border:1px solid var(--accent);border-radius:50%;box-shadow:4px -4px 0 -1px var(--surface)}
.tone-breathing-diagram__anatomy{display:block;width:100%;height:100%;min-height:0;overflow:visible}
.tone-breathing-diagram__halo{fill:var(--surface);opacity:.42}
.tone-breathing-diagram__profile{fill:none;stroke:var(--muted);stroke-opacity:.62;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tone-breathing-diagram__eye{fill:none;stroke:var(--muted);stroke-opacity:.42;stroke-width:1.3;stroke-linecap:round}
.tone-breathing-diagram__airway-halo{fill:none;stroke:var(--accent);stroke-width:24;stroke-linejoin:round;stroke-linecap:round;opacity:.08}
.tone-breathing-diagram__airway{fill:none;stroke:var(--page-bg);stroke-width:15;stroke-linejoin:round;stroke-linecap:round;opacity:.92}
.tone-breathing-diagram__filter-soft{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;opacity:.6}
.tone-breathing-diagram__air-track{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.66}
.tone-breathing-diagram__air-track--ambient{color:var(--accent);stroke-dasharray:2 9;opacity:.45}
.tone-breathing-diagram__air-track--warm{color:var(--accent)}
.tone-breathing-diagram__travel{fill:none;stroke:var(--accent);stroke-width:2.7;stroke-linecap:round;stroke-dasharray:1 30;animation:tone-breathing-travel var(--breath-duration,6s) linear infinite;animation-play-state:paused}
.tone-breathing-diagram__travel--out{stroke:var(--accent);animation-direction:normal}
.tone-breathing-diagram__out-flow{opacity:.28;animation:tone-breathing-exhale var(--breath-duration,6s) ease-in-out infinite;animation-play-state:paused}
.tone-breathing-diagram__in-flow{animation:tone-breathing-inhale var(--breath-duration,6s) ease-in-out infinite;animation-play-state:paused}
.tone-breathing-diagram__phase--in{animation:tone-breathing-inhale-label var(--breath-duration,6s) ease-in-out infinite;animation-play-state:paused}
.tone-breathing-diagram__phase--out{opacity:.65;animation:tone-breathing-exhale-label var(--breath-duration,6s) ease-in-out infinite;animation-play-state:paused}
.tone-breathing-diagram__warmth{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;animation:tone-breathing-warmth var(--breath-duration,6s) ease-in-out infinite;animation-play-state:paused}
.tone-breathing-diagram__dust{fill:var(--page-bg);stroke:var(--accent);stroke-width:1.1;opacity:.75;animation:tone-breathing-dust var(--breath-duration,6s) ease-out infinite;animation-play-state:paused}
.tone-breathing-diagram__trapped{fill:var(--surface);stroke:var(--accent);stroke-width:1;animation:tone-breathing-capture var(--breath-duration,6s) ease-out infinite;animation-play-state:paused}
.tone-breathing-diagram__continuing{fill:var(--accent);opacity:.5}
.tone-breathing-diagram__mouth-route{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round;opacity:.36}
.tone-breathing-diagram__annotation{display:grid;gap:4px;position:relative;z-index:1;margin-top:-5px;padding:0 44px 0 0;font-size:16px;line-height:1.25}
.tone-breathing-diagram__annotation strong{font-weight:600;color:var(--ink)}
.tone-breathing-diagram__annotation span{color:var(--muted)}
.tone-breathing-diagram__note{margin:8px 0 0!important;padding-right:44px;color:var(--muted);font-size:16px!important;line-height:1.25}
.is-animation-playing .tone-breathing-diagram *{animation-play-state:running}
@keyframes tone-breathing-travel{to{stroke-dashoffset:-200}}
@keyframes tone-breathing-inhale{0%,42%,100%{opacity:1}50%,92%{opacity:.14}}
@keyframes tone-breathing-exhale{0%,42%,100%{opacity:.14}50%,92%{opacity:1}}
@keyframes tone-breathing-inhale-label{0%,42%,100%{opacity:1}50%,92%{opacity:.65}}
@keyframes tone-breathing-exhale-label{0%,42%,100%{opacity:.65}50%,92%{opacity:1}}
@keyframes tone-breathing-warmth{0%,48%,100%{opacity:.35;transform:translateY(0)}20%,34%{opacity:.85;transform:translateY(-3px)}}
@keyframes tone-breathing-dust{0%{transform:translateX(-9px);opacity:.2}30%{opacity:.75}80%{opacity:.7}100%{transform:translateX(32px);opacity:0}}
@keyframes tone-breathing-capture{0%,30%{opacity:.35}65%,100%{opacity:.85}}
@media(min-width:750px){.tone-breathing-diagram{padding:20px 20px 14px}.tone-breathing-diagram__annotation{padding-right:48px}.tone-breathing-diagram__note{margin-top:10px!important}}
@media(prefers-reduced-motion:reduce){.tone-breathing-diagram *{animation:none!important}.tone-breathing-diagram__out-flow{opacity:.55}.tone-breathing-diagram__phase--out{opacity:1}.tone-breathing-diagram__travel{stroke-dasharray:1 15;opacity:.4}}