/* One softly clipped oval, shared by the card and the breathing practice. */
.breathing-field {
    overflow: hidden;
    background: #fff;
    isolation: isolate;
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 97%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 97%);
}
.breathing-field__gradient {
    position: absolute;
    inset: -8%;
    background: radial-gradient(ellipse 28% 32% at 50% 50%, #00ff33 0%, #ffffff 74%, #b508dc 100%);
    opacity: 0.4;
    filter: blur(18px);
    transform: translate3d(0, 2%, 0) scale(.94);
    will-change: transform;
}
.breathing-field__veil {
    position: absolute;
    inset: -1px;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 45%, #fff 94%);
    pointer-events: none;
}
.home__breathe-art {
    position: absolute;
    top: 62%;
    left: 20%;
    width: 78%;
    aspect-ratio: 331 / 221;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms cubic-bezier(.4, 0, .2, 1);
}
.home__breathe-art .breathing-field__gradient {
    filter: blur(clamp(6px, 2vw, 10px));
    opacity: .48;
}
.home__scene[data-kind="breathing"] .home__breathe-art { opacity: 1; }
.home__scene[data-kind="breathing"] .home__breathe-art .breathing-field__gradient { animation: breathing-wave 6s ease-in-out infinite; }
@keyframes breathing-wave {
    0%, 100% { transform: translate3d(0, 2%, 0) scale(.94); }
    50% { transform: translate3d(0, -2%, 0) scale(1.18); }
}
.home__scene[data-kind="breathing"] .home__question { font-size: clamp(1.75rem, 7.4vw, 2.6rem); line-height: 1.1; }
.home__breathing-meta { display: flex; align-items: center; gap: .65rem; margin-top: .6rem; color: #8a8a8a; font-size: .9rem; letter-spacing: 0; text-transform: uppercase; }
.home__breathing-tag { border-radius: .6rem; padding: .15rem .5rem; background: rgb(115 115 115 / 12%); }
.home__enter { transition: opacity 400ms ease; }
.home.is-practicing .home__question-position,
.home.is-practicing .home__enter,
.home.is-practicing .home__arrow,
.home.is-practicing .home__calendar { opacity: 0; }
.home.is-practicing .home__breathe-art { visibility: hidden; }
body:has(.breathing[open]) { overflow: hidden; }
.breathing {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
    outline: none;
    touch-action: manipulation;
}
.breathing::backdrop { background: transparent; }
.breathing__field {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(132vw, 140dvh, 54rem);
    aspect-ratio: 331 / 221;
    translate: -50% -50%;
    transform: scale(.88);
    transform-origin: center;
    filter: blur(1px);
    will-change: transform;
    pointer-events: none;
}
.breathing__field .breathing-field__gradient {
    filter: blur(clamp(6px, 1.7vw, 12px));
    opacity: .62;
    transform: none;
}
.breathing__cue {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(82%, 30rem);
    margin: 0;
    text-align: center;
    text-wrap: balance;
    font-size: clamp(1.35rem, 5.65vw, 1.8rem);
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
}
.breathing__feedback { position: absolute; inset: 0; pointer-events: none; }
.breathing__feedback-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: min(86%, 32rem);
    text-align: center;
    font-size: clamp(1.35rem, 5.65vw, 1.8rem);
    line-height: 1.3;
    text-wrap: balance;
}
.breathing__feedback-copy p, .breathing__feedback-copy h2 { margin: 0; font: inherit; }
.breathing__feedback-copy h2 { margin-top: 1.3rem; outline: none; }
.breathing__feedback-copy .breathing__feedback-status { font-size: .95rem; line-height: 1.4; }
.breathing__feedback-status:not(:empty) { margin-top: 1.5rem; }
.breathing__answers {
    position: absolute;
    bottom: calc(1.4rem + env(safe-area-inset-bottom));
    left: 50%;
    translate: -50% 0;
    display: flex;
    justify-content: space-between;
    width: min(86%, 32rem);
}
.breathing__answers button, .breathing__retry {
    min-width: 3.5rem;
    min-height: 3rem;
    padding: .5rem;
    background: transparent;
    color: var(--ink);
    font-size: clamp(1.35rem, 5.65vw, 1.8rem);
    pointer-events: auto;
    transition: opacity 300ms ease;
}
.breathing__answers button:disabled { opacity: .35; }
.breathing__retry { margin-top: .5rem; font-size: 1rem; text-decoration: underline; text-underline-offset: .3em; }
.breathing__close {
    position: absolute;
    top: calc(var(--header-top) + .25rem);
    right: max(var(--gutter), calc((100% - var(--content-width)) / 2 + var(--gutter)));
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: transparent;
    color: #050505;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}
.breathing.has-controls .breathing__close,
:root[data-input="keyboard"] .breathing__close:focus-visible { opacity: 1; pointer-events: auto; }
:root[data-input="keyboard"] .breathing__close:focus-visible { outline: 1px solid #888; outline-offset: -2px; }
@media (min-width: 48rem) {
    .home__breathe-art {
        left: calc(50% - var(--content-width) * .3);
        width: min(calc(var(--content-width) * .78), 90dvh);
    }
    .breathing__answers { bottom: var(--screen-bottom); }
    .breathing__close {
        top: var(--screen-top);
        right: calc(var(--control-inset) - 1.375rem);
    }
}
@media (prefers-reduced-motion: reduce) {
    .home__breathe-art .breathing-field__gradient { animation: none !important; }
}