/* Approved voice story · warm, readable source → result */
.voice-story{display:block;max-width:1420px;margin:auto;padding:90px 40px 70px;scroll-margin-top:20px}
.voice-story:not(.voice-enhanced) .voice-controls,.voice-story:not(.voice-enhanced) .voice-step-switch{display:none}
.voice-heading{text-align:center;margin:0 auto 36px;max-width:1000px}
.voice-eyebrow{display:block;font-size:13px;font-weight:600;color:#716346;margin-bottom:18px}
.voice-heading h2{font-size:clamp(32px,3.8vw,53px);line-height:1.12;font-weight:600;letter-spacing:-.045em}
.voice-heading>p{font-size:18px;color:var(--muted);margin-top:20px}
.voice-stage{display:grid;grid-template-columns:minmax(0,1.15fr) 100px minmax(0,1fr);gap:12px;align-items:center}
.voice-scene{position:relative;min-width:0;isolation:isolate}
.voice-artwork{position:relative;aspect-ratio:4/3;z-index:0}
.voice-person{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;mask-image:linear-gradient(to right,transparent,black 5%,black 95%,transparent),linear-gradient(to bottom,transparent,black 5%,black 92%,transparent);mask-composite:intersect}
.spoken-card{position:relative;z-index:2;margin:0 0 -8% 30%;background:#fff0a4;border-radius:26px;padding:19px 21px;box-shadow:0 8px 26px #8b6b1b08}
.spoken-card::after{content:"";position:absolute;left:12%;top:calc(100% - 1px);width:28px;height:clamp(14px,2vw,28px);background:#fff0a4;clip-path:polygon(20% 0,100% 0,0 100%)}
.spoken-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#65521b}
.spoken-label svg{width:18px;height:18px}.spoken-card blockquote{margin:12px 0 0;font-size:clamp(16px,1.45vw,20px);line-height:1.45;letter-spacing:-.02em;font-weight:600;min-height:4.35em}
.voice-wave{display:flex;align-items:center;gap:3px;height:20px;margin-left:auto}.voice-wave i{display:block;width:3px;height:6px;background:#776023;border-radius:2px}.voice-wave i:nth-child(2n){height:13px}.voice-wave i:nth-child(3){height:19px}
.actor-screen-anchor{position:absolute;left:50.4144%;top:36.0037%;width:0;height:0}
.actor-screen{position:absolute;left:0;top:0;width:600px;height:380px;background:#fafbf9;transform-origin:0 0;overflow:hidden;font-size:15px;color:#29342c;pointer-events:none;backface-visibility:hidden}
.actor-browser{display:flex;gap:7px;align-items:center;background:#eceeec;height:31px;padding:0 14px;color:#7d827c;font-size:12px}.actor-browser i{width:6px;height:6px;background:#b6c8b8;border-radius:50%}.actor-browser span{margin-left:auto;margin-right:auto}
.actor-orders{padding:31px 27px;position:relative}.actor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.actor-top>b{font-size:32px}.actor-top>span{background:#edf2eb;border:1px solid #becbbc;border-radius:7px;padding:10px 17px;font-size:17px}.actor-row{display:flex;align-items:center;justify-content:space-between;gap:11px;border-top:1px solid #dee4dc;padding:23px 0}.actor-row i{width:9px;height:9px;border:1px solid #aeb5ae;border-radius:2px}.actor-row span:first-of-type{color:#4b6562}.actor-row span:last-child{color:#8e7437;font-size:12px}
.actor-filter-panel{position:absolute;top:100px;right:25px;background:#fff;border:1px solid #e1e5df;border-radius:6px;box-shadow:0 8px 20px #243a2520;padding:20px;width:250px}.actor-filter-panel>b{display:block;padding:11px;background:#3e5e48;color:white;text-align:center;margin-top:17px;border-radius:5px}
.actor-pin{position:absolute;left:451px;top:117px;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:var(--yellow);border:2px solid #20201f;font-size:22px;font-weight:600;transition:opacity 180ms,scale 200ms var(--ease-out)}
.actor-cursor{position:absolute;left:463px;top:85px;width:25px;height:29px;fill:white;stroke:#20201f;stroke-width:2;filter:drop-shadow(0 2px 3px #20201f40)}
.voice-stage[data-example="1"] .actor-pin{left:350px;top:168px}.voice-stage[data-example="1"] .actor-cursor{left:338px;top:146px}
.voice-stage[data-example="2"] .actor-pin{left:430px;top:227px}.voice-stage[data-example="2"] .actor-cursor{left:443px;top:195px}
.voice-transform{align-self:center;text-align:center;min-width:0;color:#766342;font-size:11px;line-height:1.5;padding-top:40px}
.transfer-line{display:flex;align-items:center;margin-top:14px;position:relative}.transfer-line i{height:2px;background:#edc731;flex:1}.transfer-line b{display:grid;place-items:center;background:var(--yellow);width:44px;height:39px;border-radius:12px;font-size:18px;color:var(--ink);flex-shrink:0}.transfer-line::after{content:"";width:7px;height:7px;border-top:2px solid #edc731;border-right:2px solid #edc731;position:absolute;right:0;transform:rotate(45deg)}
.guide-paper{position:relative;min-width:0;padding:26px 28px 22px;border:1px solid #efece4;border-radius:22px;background:#fff;box-shadow:0 16px 40px #61502b0d,0 3px 7px #61502b05;transform:rotate(1deg)}
.paper-brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#76716a;margin-bottom:16px}.paper-brand img{border-radius:6px}.paper-brand>span{margin-left:auto;font-size:11px;font-weight:400}.guide-paper h3{font-size:29px;font-weight:600;margin-bottom:18px}
.paper-top{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;margin-bottom:17px;min-height:32px}.paper-number{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:50%;background:var(--yellow);font-size:18px}
.voice-screenshot{position:relative;overflow:hidden;background:#f8faf7;border:1px solid #e1e6de;border-radius:9px;padding:18px;font-size:10px}.shot-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.shot-top>b{font-size:21px}.shot-filter{position:relative;padding:7px 11px;background:#edf2eb;border:1px solid #becbbc;border-radius:5px;font-size:11px}
.shot-pin{position:absolute;bottom:-12px;left:-9px;width:25px;height:25px;border:2px solid #242523;background:var(--yellow);color:var(--ink);display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:600;line-height:1}
.shot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #dfe5dc;white-space:nowrap}.shot-row span:last-child{color:#716a39}.shot-row:last-of-type{padding-bottom:0}
.voice-filter{position:absolute;right:12px;top:58px;padding:12px;background:white;box-shadow:0 8px 20px #30452a28;border:1px solid #e1e5df;border-radius:6px;width:165px}.voice-filter>b{position:relative;display:block;background:#3e5e48;color:white;text-align:center;padding:8px;margin-top:12px;border-radius:4px}
.ai-explanation{margin-top:22px;min-height:98px}.output-label{font-size:11px;color:#757064;display:block;min-height:18px}.ai-explanation p{font-size:22px;line-height:1.4;letter-spacing:-.025em;margin-top:9px;opacity:1;transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.voice-step-switch{display:flex;gap:6px;margin-top:10px}.voice-step-switch button{font-size:12px;padding:9px 14px;min-height:44px;border:1px solid #cbc6b8;border-radius:8px;background:transparent}.voice-step-switch button[aria-pressed=true]{background:transparent;border-color:#776023;box-shadow:inset 0 0 0 1px #776023;font-weight:600}
.voice-footer{text-align:center;margin-top:30px}.voice-stage-note{min-height:24px;font-size:14px;color:#746e61}.voice-controls{display:flex;justify-content:center;align-items:center;gap:14px;position:relative;margin:20px auto 0;width:max-content;max-width:100%}.voice-controls .button{font-size:16px;min-height:52px;padding-inline:26px}
.voice-disclaimer{font-size:11px;color:#837d70;margin-top:14px}
.voice-stage[data-phase=clicking] .actor-cursor{animation:voice-cursor-in 850ms var(--ease-out) both}.voice-stage[data-phase=clicking] .actor-pin{opacity:0;scale:.8}
.spoken-card blockquote{display:grid}
.spoken-reserved,.spoken-typed{grid-area:1/1}
.spoken-reserved{opacity:0;pointer-events:none;user-select:none}
.spoken-typed{overflow-wrap:anywhere}
.voice-stage[data-phase=speaking] .voice-wave i{animation:voice-level 480ms ease-in-out infinite alternate}.voice-stage[data-phase=speaking] .voice-wave i:nth-child(2n){animation-delay:-230ms}.voice-stage[data-phase=speaking] .voice-wave i:nth-child(3n){animation-delay:-110ms}
.voice-stage[data-phase=processing] .transfer-line b{animation:voice-ai 600ms ease-in-out infinite alternate}
.voice-stage:not([data-phase=done]) .ai-explanation p{opacity:0;transform:translateY(6px)}
@keyframes voice-cursor-in{from{transform:translate(-180px,150px)}to{transform:translate(0,0)}}
@keyframes voice-level{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes voice-ai{from{transform:scale(1);opacity:.65}to{transform:scale(1.06);opacity:1}}
@media(hover:hover) and (pointer:fine){.voice-step-switch button:hover{background:#f1efe8}.voice-controls .primary:hover{background:#f1efe8}}
@media(max-width:1100px){.voice-story{padding-inline:28px}.voice-stage{grid-template-columns:minmax(0,1.1fr) 62px minmax(0,1fr);gap:10px}.voice-transform{font-size:10px}.guide-paper{padding:22px}.spoken-card{margin-left:20%;padding:17px}.spoken-card blockquote{font-size:17px}.paper-top{font-size:15px}.ai-explanation p{font-size:20px}.shot-row span:nth-child(2){display:none}.voice-heading{margin-bottom:36px}}
@media(max-width:760px){.voice-story{padding:65px 18px 55px}.voice-heading{text-align:left;margin-bottom:42px}.voice-heading h2{font-size:32px;line-height:1.15}.voice-heading>p{font-size:16px;max-width:340px;margin-top:16px}.voice-eyebrow{font-size:12px;margin-bottom:15px}.voice-stage{display:flex;flex-direction:column;gap:0;max-width:510px;margin:auto}.voice-scene{width:100%}.spoken-card{margin-left:0;padding:17px 18px;border-radius:20px}.spoken-card blockquote{font-size:17px;min-height:4.35em}.spoken-card::after{left:24%}.voice-transform{display:flex;align-items:center;justify-content:center;gap:12px;padding:5px 0 18px;font-size:11px}.voice-transform>span{order:2;text-align:left}.transfer-line{width:40px;height:58px;margin:0;flex-direction:column}.transfer-line i{width:2px;height:auto}.transfer-line b{width:35px;height:32px;font-size:15px;border-radius:9px}.transfer-line::after{right:16px;bottom:0;transform:rotate(135deg)}.guide-paper{width:100%;padding:22px;transform:none;border-radius:20px}.guide-paper h3{font-size:26px}.paper-brand{margin-bottom:20px}.paper-top{font-size:16px}.voice-screenshot{padding:15px}.ai-explanation{min-height:113px}.ai-explanation p{font-size:21px}.voice-step-switch button{min-width:68px}.voice-footer{margin-top:22px}.voice-stage-note{font-size:12px;min-height:36px;max-width:310px;margin:auto}.voice-controls{width:100%;margin-top:14px;flex-wrap:wrap;gap:4px}.voice-controls .button{width:100%;max-width:340px}.voice-disclaimer{margin-top:13px}}
@media(max-width:360px){.voice-heading h2{font-size:28px}.spoken-card{padding:15px}.spoken-card blockquote{font-size:16px}.guide-paper{padding:18px}.paper-top{font-size:14px}.ai-explanation p{font-size:20px}.voice-controls .button{font-size:15px}.shot-top>b{font-size:19px}}
@media(prefers-reduced-motion:reduce){.voice-story *,.voice-story *::before,.voice-story *::after{animation:none!important;transition:none!important}.guide-paper{transform:none}.voice-stage:not([data-phase=done]) .ai-explanation p{opacity:1;transform:none}}
/* Keep interruption beside the speaking person, including after mobile replay scroll */
.spoken-label{min-height:32px}
.spoken-label .voice-stop{position:static;flex:none;display:block;min-height:32px;height:32px;min-width:40px;padding:4px;background:none;border:0;font-size:11px;text-decoration:underline;text-underline-offset:3px;color:#65521b}
@media(max-width:360px){.spoken-label{gap:5px}}
/* Three consecutive actions: speech, 1.5 s processing, then a readable result */
.voice-transform>span{display:block;min-height:3em}
.transfer-line b{position:relative;isolation:isolate}
.ai-orbit{position:absolute;inset:-7px;border:1px dashed #bda02b;border-radius:17px;opacity:0;pointer-events:none}
.ai-spark{position:absolute;right:-8px;top:-10px;color:#a88917;font-size:18px;opacity:0;pointer-events:none}
.ai-travel{position:absolute;width:6px;height:6px;border-radius:50%;background:#a68708;left:0;top:calc(50% - 3px);opacity:0;pointer-events:none}
.voice-stage[data-phase=processing] .ai-orbit{animation:voice-orbit 1500ms linear both}
.voice-stage[data-phase=processing] .ai-spark{animation:voice-spark 750ms var(--ease-out) 2}
.voice-stage[data-phase=processing] .ai-travel{animation:voice-travel 750ms var(--ease-out) 2}
.shot-unpaid-target{position:relative;display:inline-block}.shot-unpaid-target .shot-pin{left:calc(100% + 8px);bottom:-6px}
.voice-filter>b .shot-pin{left:calc(50% - 12px);bottom:-14px}
.ai-explanation .output-label{font:500 12px/1.5 Onest,Arial,sans-serif;letter-spacing:0;margin:0;color:#757064}
.ai-description-wrap{position:relative;overflow:hidden;isolation:isolate;min-height:4.3em}
.ai-description-wrap p{position:relative;z-index:1}
.ai-reveal-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 5%,#ffe32b38 48%,#fff8c770 53%,transparent 90%);opacity:0;transform:translateX(-110%)}
.voice-stage[data-phase=done] .ai-description-wrap p{animation:voice-result-in 650ms var(--ease-out) both}
.voice-stage[data-phase=done] .ai-reveal-glow{animation:voice-result-glow 900ms var(--ease-out) both}
@keyframes voice-orbit{0%{opacity:0;transform:rotate(-15deg) scale(.96)}20%{opacity:.85}80%{opacity:.85}100%{opacity:0;transform:rotate(165deg) scale(1.03)}}
@keyframes voice-spark{0%,100%{opacity:0;transform:scale(.85) rotate(-10deg)}45%{opacity:1;transform:scale(1.1) rotate(10deg)}}
@keyframes voice-travel{0%{opacity:0;transform:translateX(0)}25%,75%{opacity:1}100%{opacity:0;transform:translateX(92px)}}
@keyframes voice-result-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes voice-result-glow{0%{opacity:0;transform:translateX(-110%)}25%{opacity:1}100%{opacity:0;transform:translateX(110%)}}
@media(max-width:1100px){@keyframes voice-travel{0%{opacity:0;transform:translateX(0)}25%,75%{opacity:1}100%{opacity:0;transform:translateX(54px)}}}
@media(max-width:760px){.voice-transform>span{min-height:3em;max-width:130px}.ai-travel{left:calc(50% - 3px);top:0}@keyframes voice-travel{0%{opacity:0;transform:translateY(0)}25%,75%{opacity:1}100%{opacity:0;transform:translateY(54px)}}}
@media(prefers-reduced-motion:reduce){.ai-orbit,.ai-spark,.ai-travel,.ai-reveal-glow{display:none}.voice-stage[data-phase=done] .ai-description-wrap p{animation:none;opacity:1;transform:none}}