/* Breaths are removed; reset geometry only after the tape fades out. */
.breath-tape{container-type:inline-size;animation:breath-cycle 10s ease infinite}.breath-tape .audio-original{animation:breath-original 10s step-end infinite}
.audio-piece{position:absolute;left:var(--start);width:var(--width);height:100%;background:#362a20;border:1px solid #7e5633;border-radius:3px;overflow:hidden;animation-duration:10s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;box-sizing:border-box}
.audio-piece>span{position:absolute;bottom:5px;left:50%;translate:-50% 0;font-size:8px;color:#edba84;font-family:monospace;animation:breath-label 10s ease infinite}
.speech-one{animation-name:speech-first}.speech-two{animation-name:speech-middle}.speech-three{animation-name:speech-last}.breath-piece{background:#3b2920;border-color:#d28a5355;animation-name:breath-remove}.breath-two{--breath-offset:7px}.breath-blade{animation:breath-slice 10s cubic-bezier(.22,.8,.3,1) infinite;animation-delay:var(--slice-delay);z-index:5}
@keyframes breath-original{0%{opacity:1}30%{opacity:0}94%,100%{opacity:1}}
@keyframes breath-label{0%,28%,95%,100%{opacity:0}37%,85%{opacity:1}}
@keyframes breath-slice{0%,16%{scale:1 0;opacity:0}20%{opacity:1}29%{scale:1 1;opacity:1}34%,100%{scale:1 1;opacity:0}}
@keyframes speech-first{0%,30%,68%,92%,94%,100%{transform:translateX(0)}40%,52%{transform:translateX(-7px)}}
@keyframes speech-middle{0%,30%,94%,100%{transform:translateX(0)}40%,52%{transform:translateX(0)}68%,92%{transform:translateX(-5.7cqw)}}
@keyframes speech-last{0%,30%,94%,100%{transform:translateX(0)}40%,52%{transform:translateX(14px)}68%,92%{transform:translateX(-10.8cqw)}}
@keyframes breath-remove{0%,30%{transform:translate(0,0) scale(1);opacity:1}40%{transform:translate(var(--breath-offset,0px),8px) scale(.96);opacity:1}48%{opacity:1}56%,92%{transform:translate(var(--breath-offset,0px),34px) scale(.8);opacity:0}94%,100%{transform:translate(0,0) scale(1);opacity:1}}
.motion-result{position:absolute;inset:0}.motion-result .art-words,.motion-result .art-echo{text-transform:uppercase}.motion-demo[data-phase=typing] .motion-result,.motion-demo[data-phase=loading] .motion-result{display:none}
.motion-request{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:45px 17%;background:#211f1e;color:#efe4d7;font:400 23px/1.5 'Segoe UI',sans-serif;letter-spacing:0}
.motion-request-label{font-size:9px;line-height:1.6;letter-spacing:.1em;font-weight:600;color:#ad917a;margin-bottom:15px}.motion-request-text{min-height:1.5em}.type-caret{display:inline-block;width:1px;height:1em;vertical-align:-.1em;margin-left:3px;background:#dd7136;animation:request-caret 1s steps(1,end) infinite}
.motion-loading{position:absolute;inset:0;z-index:9;background:rgba(0,0,0,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#d5c2af;font:500 12px/1.5 'Segoe UI',sans-serif;letter-spacing:.02em}.motion-loading i{display:block;width:31px;height:31px;border-radius:50%;border:2px solid #dd713633;border-top-color:#dd7136;animation:request-spinner 1s linear infinite}.motion-loading-track{width:130px;height:2px;background:#ffffff13;overflow:hidden}.motion-loading-track>b{height:100%;display:block;width:100%;background:#dd7136;transform-origin:left;animation:request-load 2s linear both}
.motion-demo[data-phase=typing] .motion-loading,.motion-demo[data-phase=result] .motion-loading,.motion-demo[data-phase=result] .motion-request{display:none}.motion-demo[data-phase=loading] .motion-request{opacity:.3}.motion-demo:not([data-phase=result]):after{display:none}
.motion-result .art-line>span,.motion-result .art-echo,.motion-result .art-cross,.motion-result .art-stripe,.motion-result .art-spark{animation-iteration-count:1;animation-fill-mode:both}
.visual-motion .motion-request .type-caret{position:static;inset:auto;width:1px;height:1em;border:0;transform:none;margin-left:3px}
.visual-motion .motion-loading>i{position:static;inset:auto;width:31px;height:31px;border:2px solid #dd713633;border-top-color:#dd7136;transform:none;margin:0;flex-shrink:0}
@keyframes request-caret{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes request-spinner{to{transform:rotate(360deg)}}@keyframes request-load{from{scale:0 1}to{scale:1 1}}
.page-hidden .motion-demo *{animation-play-state:paused!important}
@media(max-width:700px){.motion-request{padding-inline:10%;font-size:19px}.motion-request-label{font-size:9px}.motion-loading{font-size:12px}}
@media(max-width:350px){.motion-request{font-size:17px;padding-inline:8%}}
@media(prefers-reduced-motion:reduce){.breath-tape .audio-original,.breath-piece,.breath-blade{display:none}.audio-piece,.audio-piece>span{animation:none!important}.speech-one{transform:none}.speech-two{transform:translateX(-5.7cqw)}.speech-three{transform:translateX(-10.8cqw)}.audio-piece>span{opacity:1}.motion-request,.motion-loading{display:none!important}.motion-demo .motion-result{display:block!important}}

@keyframes breath-cycle{0%,85%{opacity:1}91%,97%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.breath-tape{animation:none!important;opacity:1}}