.speech-section{padding:112px 5% 92px;background:#fff;overflow:hidden;color:#111827;font-family:Satoshi,sans-serif}
.speech-heading{max-width:1280px;margin:auto;text-align:center}
.speech-heading h2{font-size:clamp(36px,4.2vw,58px);line-height:1.08;letter-spacing:-.045em;margin:0;font-weight:700}
.speech-heading>p:last-child{font-size:16px;line-height:1.6;color:#68778e;margin:22px 0 0}
.speech-demo{position:relative;max-width:1340px;margin:42px auto 0;min-height:490px;display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:center;gap:12px;padding:30px 12px 90px;isolation:isolate}
.speech-demo:before{content:'';position:absolute;inset:5% 18% 15%;z-index:-1;background:radial-gradient(ellipse,#e4f1ff,transparent 68%);pointer-events:none}
.speech-label{display:block;font-size:10px;letter-spacing:.16em;font-weight:700;color:#718198;margin-bottom:28px}
.speech-input,.speech-output{position:relative;min-width:0;z-index:2}
.speech-fragments{display:flex;flex-direction:column;align-items:flex-start;gap:15px;min-height:236px}
.speech-fragments>span{display:block;position:relative;padding:14px 17px;border:1px solid #e4eaf3;background:#fff;border-radius:13px;color:#5c6b81;font-size:14px;line-height:1.4;box-shadow:0 8px 24px #23476e09;rotate:-3deg;will-change:translate,opacity;max-width:100%}
.speech-fragments>span:nth-child(2){align-self:flex-end;rotate:2deg}
.speech-fragments>span:nth-child(3){margin-left:10px;rotate:-1deg}
.speech-fragments>span:nth-child(4){align-self:flex-end;rotate:3deg}
.speech-core{position:relative;min-width:0;align-self:stretch;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.speech-ora{width:145%;max-width:none;aspect-ratio:1;flex-shrink:0;transition:filter 1.8s ease;filter:saturate(.9)}
.speech-guidance{position:absolute;left:50%;top:76%;width:290px;max-width:110%;padding:16px 18px;border:1px solid #dfeafa;border-radius:17px;background:#ffffffed;box-shadow:0 15px 38px #124b9810;opacity:0;transform:translate(-50%,10px);transition:opacity .7s ease,transform .7s ease}
.speech-guidance>span{color:#0869f5;font-size:9px;font-weight:700;letter-spacing:.14em}
.speech-guidance strong{display:block;font-size:14px;line-height:1.4;margin-top:7px}
.speech-guidance p{font-size:12px;line-height:1.5;color:#6b7e97;margin:6px 0 0}
.speech-result{padding:25px 23px;border:1px solid #cdddF5;border-radius:22px;background:linear-gradient(145deg,#fff,#f5f9ff);box-shadow:0 20px 55px #1559b415;opacity:0;transform:translateX(-24px) scale(.96);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.speech-result-tag{font-size:9px;letter-spacing:.12em;font-weight:700;color:#0869f5}
.speech-result p{font-size:clamp(21px,2.1vw,29px);line-height:1.3;letter-spacing:-.035em;margin:18px 0 24px;text-wrap:pretty}
.speech-result p span{color:#0869f5}
.speech-result-foot{font-size:12px;line-height:1.5;color:#7a889c;padding-top:15px;border-top:1px solid #e4edf9}
.speech-timeline{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(440px,90%);display:flex;justify-content:space-between;gap:12px;padding-bottom:18px;font-size:11px;color:#8693a6}
.speech-timeline:after,.speech-timeline i{position:absolute;content:'';left:0;bottom:0;height:2px;width:100%;background:#e9eff7;border-radius:3px}
.speech-timeline i{z-index:1;background:#0869f5;transform-origin:left;transform:scaleX(var(--progress,0))}
.speech-caption{text-align:center;color:#8a96a7;font-size:12px;line-height:1.5;margin:25px auto 0;max-width:600px}
.speech-demo[data-phase=organize] .speech-guidance,.speech-demo[data-phase=after] .speech-guidance,.speech-demo[data-phase=static] .speech-guidance{opacity:1;transform:translate(-50%,0)}
.speech-demo[data-phase=organize] .speech-ora{filter:saturate(1.2)}
.speech-demo[data-phase=after] .speech-result,.speech-demo[data-phase=static] .speech-result{opacity:1;transform:translateX(0) scale(1)}
.speech-demo[data-phase=before] .speech-timeline span:nth-child(1),.speech-demo[data-phase=organize] .speech-timeline span:nth-child(2),.speech-demo[data-phase=after] .speech-timeline span:nth-child(3){color:#0869f5}
@media(max-width:760px){
 .speech-section{padding:78px 6% 66px}
 .speech-heading{text-align:left}.speech-heading h2{font-size:38px}.speech-heading>p:last-child br{display:none}
 .speech-demo{grid-template-columns:minmax(0,1fr);gap:0;margin-top:34px;padding:0 0 50px;min-height:0}
 .speech-input{max-width:440px;width:100%;justify-self:center}
 .speech-label{margin-bottom:18px;font-size:9px}
 .speech-fragments{min-height:215px;gap:11px}.speech-fragments>span{font-size:13px;padding:11px 14px}
 .speech-core{height:270px;margin:0;align-self:auto}
 .speech-ora{width:340px;max-width:120%}
 .speech-guidance{top:auto;bottom:8px;width:275px;max-width:90%;padding:12px 15px}
 .speech-output{width:100%;max-width:440px;justify-self:center;margin:20px 0 30px}
 .speech-result{min-height:225px;transform:translateY(-18px);padding:21px}
 .speech-result p{font-size:25px;margin:14px 0 20px}
 .speech-demo[data-phase=after] .speech-result,.speech-demo[data-phase=static] .speech-result{transform:translateY(0)}
 .speech-caption{font-size:11px}
}
/* The orb and feedback have separate rows so neither can overlap. */
.speech-section{padding-top:82px;padding-bottom:66px}
.speech-demo{margin-top:26px;min-height:0;padding:10px 12px 65px;align-items:start}
.speech-core{align-self:start;display:flex;flex-direction:column;gap:24px}
.speech-ora{width:260px;max-width:90%;will-change:transform;transition:none}
.speech-guidance{position:relative;inset:auto;width:290px;max-width:100%;transform:translateY(8px);flex-shrink:0}
.speech-demo[data-phase=organize] .speech-guidance,.speech-demo[data-phase=after] .speech-guidance,.speech-demo[data-phase=static] .speech-guidance{transform:translateY(0)}
.speech-input,.speech-output{padding-top:32px}
.speech-caption{margin-top:18px}
@media(max-width:760px){
 .speech-demo{padding-bottom:60px}
 .speech-core{height:auto;margin:12px 0 0;gap:18px;align-items:center}
 .speech-ora{width:210px;max-width:75%}
 .speech-guidance{inset:auto;width:290px;max-width:100%}
 .speech-input{padding-top:0}
 .speech-output{margin-top:24px;padding-top:0}
}
@media(prefers-reduced-motion:reduce){.speech-result,.speech-guidance,.speech-ora{transition:none}.speech-timeline{display:none}}