/* Long sentences become three small, unhurried speaking steps. */
.echo-studio{box-sizing:border-box;max-width:1320px;width:100%;height:100%;margin:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:18px 24px;border:1px solid #e4d5ef;border-radius:26px;background:linear-gradient(135deg,#fff 55%,#fff8ec);color:#48335e}
.echo-studio *{box-sizing:border-box}
.echo-studio button{min-height:48px;min-width:48px;padding:9px 16px;border:1px solid #d4c3e8;border-radius:14px;background:white;box-shadow:0 2px 0 #e9dff1;color:#55376e;font:inherit;font-size:16px;font-weight:750;cursor:pointer;touch-action:manipulation}
.echo-studio button:hover:not(:disabled){background:#f6ecff;border-color:#b18bd8}.echo-studio button:disabled{opacity:.45;cursor:default;box-shadow:none}.echo-studio button:focus-visible{outline:3px solid #2494c6;outline-offset:3px}
.echo-studio .echo-primary{background:#7751c8;border-color:#7751c8;box-shadow:0 3px 0 #533790;color:white;min-width:170px;font-size:18px}.echo-studio .echo-primary:hover:not(:disabled){background:#6844b4}
.echo-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #ebdff1;padding-bottom:8px;flex:none}
.echo-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:850;color:#a07bb4;display:block}
.echo-heading h2{font-size:21px;line-height:1.2;margin:3px 0 0}.echo-heading h2 small{font-size:16px;color:#8b719f}.echo-progress{font-size:13px;color:#876c99;font-weight:650}
.echo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0;margin:0;list-style:none;flex:none}
.echo-steps li{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:7px 12px;border-radius:12px;background:#faf5fd;color:#a28bad;border:1px solid #eee4f3;font-size:15px;font-weight:700}
.echo-steps li b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:white;font-size:13px}.echo-steps li.is-current{background:#eee2ff;color:#674694;border-color:#c8abe6}.echo-steps li.is-done{background:#edf8f3;color:#5f9279}
.echo-stage{flex:1;min-height:0;display:grid;grid-template-columns:130px minmax(0,1fr);gap:25px;align-items:center;padding:16px 22px;border-radius:22px;border:1px solid #eadcf5;background:linear-gradient(115deg,#f5edff,#fffaf0)}
.echo-character{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:13px;font-weight:700;color:#856692;min-width:0}
.echo-face{display:block;width:112px;height:138px;border:4px solid white;border-radius:28px;object-fit:cover;object-position:center 25%;box-shadow:0 8px 20px #76578a20}
.echo-character .echo-voice-label{font-size:11px;font-weight:500;color:#9e8ba7}
.echo-speech{min-width:0;text-align:left}.echo-instruction{display:block;font-size:16px;font-weight:700;color:#8b6ca3;margin-bottom:10px}
.echo-speech h3{font-size:clamp(36px,4.1vw,52px);line-height:1.25;font-weight:800;letter-spacing:-.025em;margin:0;color:#563876;text-wrap:balance;overflow-wrap:break-word}
.echo-speech h3.echo-long{font-size:clamp(33px,3.6vw,45px)}
.echo-ko{font-size:23px;line-height:1.45;font-weight:550;letter-spacing:-.025em;color:#866343;word-break:keep-all;overflow-wrap:break-word;margin:11px 0 0}
.echo-guide{font-size:15px;line-height:1.4;color:#9a829e;margin:12px 0 0}
.echo-pieces{display:flex;gap:7px;margin:14px 0 0}.echo-pieces span{height:6px;width:50px;border-radius:9px;background:#e8dcef}.echo-pieces .is-current{background:#a582cc}.echo-pieces .is-done{background:#86bea6}
.echo-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;flex:none;min-height:44px}.echo-controls button{min-height:44px;font-size:14px;padding:8px 13px}.echo-controls button[data-echo=listen]{background:#edf7ff;color:#3b6c88;border-color:#bfdfef}
.echo-status{min-height:20px;font-size:14px;line-height:1.35;text-align:center;color:#8d6d93;margin:0;flex:none}
.echo-controls:empty,.echo-status:empty{display:none}
.echo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:10px 0 0;border-top:1px solid #ebdff1;flex:none;background:transparent}
.echo-recording-note{font-size:12px;line-height:1.4;color:#a28cac;text-align:center;flex:1;max-width:430px}
.echo-finish{justify-content:center;align-items:center;text-align:center;background:linear-gradient(120deg,#fff9df,#f8edff 60%,#e8f8f4);gap:14px}.echo-finish .echo-character .echo-face{width:100px;height:110px}.echo-finish h2{font-size:clamp(36px,5vw,56px);margin:0;line-height:1.15}.echo-finish p{font-size:23px;margin:0;line-height:1.35}.echo-finish p.echo-ko{font-size:21px}.echo-stars{display:flex;justify-content:center;gap:20px;color:#d7a74f;font-size:43px}.echo-honest{font-size:12px;color:#957d9f;line-height:1.4}
.echo-empty{justify-content:center;align-items:center;text-align:center}
@media(min-width:740px) and (orientation:landscape) and (max-height:800px){
 .echo-studio{gap:6px;padding:10px 17px;border-radius:21px}.echo-heading{padding-bottom:5px}.echo-heading .echo-eyebrow{display:none}.echo-heading h2{font-size:18px;margin:0}.echo-heading h2 small{font-size:14px}.echo-progress{font-size:12px}
 .echo-steps{gap:6px}.echo-steps li{min-height:34px;padding:5px 9px;font-size:13px;gap:6px}.echo-steps li b{width:20px;height:20px;font-size:11px}
 .echo-stage{grid-template-columns:90px minmax(0,1fr);gap:16px;padding:10px 15px;border-radius:17px}.echo-face{width:80px;height:98px;border-radius:21px}.echo-character{gap:5px;font-size:11px}.echo-character .echo-voice-label{font-size:9px}
 .echo-instruction{font-size:13px;margin-bottom:7px}.echo-speech h3{font-size:36px;line-height:1.2}.echo-speech h3.echo-long{font-size:32px}.echo-ko{font-size:21px;line-height:1.32;margin-top:8px}.echo-guide{font-size:13px;margin-top:8px;line-height:1.3}.echo-pieces{margin-top:8px}.echo-pieces span{height:5px;width:40px}
 .echo-controls{gap:6px;min-height:44px}.echo-controls button{font-size:12px;min-height:44px;padding:7px 11px}.echo-status{font-size:12px;min-height:17px;line-height:1.3}
 .echo-footer{gap:10px;padding:5px 0 0}.echo-footer button{min-height:46px;font-size:15px;padding:8px 13px}.echo-footer .echo-primary{min-width:155px;font-size:16px}.echo-recording-note{font-size:10px;max-width:320px}
 .echo-finish{gap:10px}.echo-finish .echo-character .echo-face{width:76px;height:84px}.echo-finish h2{font-size:38px}.echo-finish p{font-size:19px}.echo-finish p.echo-ko{font-size:18px}.echo-stars{font-size:32px}.echo-honest{font-size:11px}
}
@media(max-width:739px),(orientation:portrait){
 .echo-studio{height:auto;min-height:100%;padding:16px;gap:12px}.echo-stage{grid-template-columns:70px minmax(0,1fr);gap:13px;padding:15px 12px;min-height:250px}.echo-face{width:68px;height:87px;border-radius:19px}.echo-character{font-size:10px;gap:5px}.echo-character .echo-voice-label{font-size:9px}.echo-instruction{font-size:13px}.echo-speech h3,.echo-speech h3.echo-long{font-size:29px;line-height:1.25}.echo-ko{font-size:20px}.echo-guide{font-size:12px}.echo-steps li{font-size:12px;padding:6px 4px;gap:5px}.echo-steps li b{width:19px;height:19px;font-size:11px}.echo-heading h2{font-size:19px}.echo-progress{font-size:11px}
 .echo-footer{flex-wrap:wrap;gap:8px}.echo-footer>.echo-recording-note{order:3;flex:1 0 100%;max-width:none;font-size:11px}.echo-footer button{font-size:14px;min-width:80px}.echo-footer .echo-primary{font-size:15px;min-width:150px;flex:1}.echo-controls button{font-size:12px;padding:8px 10px}.echo-finish p{font-size:20px}.echo-finish p.echo-ko{font-size:18px}
}
@media(prefers-reduced-motion:no-preference){.echo-face.is-speaking{animation:echo-speak 1.2s ease-in-out infinite}.echo-speech{animation:echo-arrive .18s ease-out}@keyframes echo-speak{50%{transform:translateY(-3px) rotate(-1deg)}}@keyframes echo-arrive{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.echo-studio *{animation:none!important;transition:none!important}}