:root{font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:#16253c;background:#fff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
button,textarea{font:inherit}
button,.upload-btn{cursor:pointer}
button:disabled{opacity:.48;cursor:not-allowed}
button:focus-visible,.upload-btn:focus-within,textarea:focus-visible{outline:3px solid #2871d2;outline-offset:3px}
.app-shell{max-width:1600px;margin:0 auto;background:#fff}
.masthead{min-height:132px;padding:10px 52px;background:#dce7fa;display:flex;justify-content:space-between;align-items:center;gap:24px}
.masthead h1{margin:0 0 10px;font-size:clamp(25px,2vw,34px);line-height:1.2;font-weight:900;color:#111}
.masthead p{margin:0;color:#15253b;font-size:clamp(15px,1.15vw,20px);font-weight:700}
.masthead-badge{width:72px;height:110px;flex:0 0 72px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.masthead-badge img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #18437865)}
.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0 50px 52px}
.left-column,.right-column{min-width:0}
.left-column{padding:24px 48px 0 0;border-right:8px solid #f0f1f3}
.right-column{padding:24px 0 0 48px}
.step-section{margin:0 0 29px}
.step-section h2{font-size:clamp(24px,1.7vw,30px);line-height:1.2;margin:0 0 19px;color:#111;font-weight:850}
.step-section h2 span{font-variant-numeric:tabular-nums}
.lab-button{min-height:45px;padding:9px 18px;border:1px solid #cbd9ec;border-radius:7px;background:#dce8fa;color:#142a45;font-weight:700;font-size:16px;box-shadow:3px 4px 5px #0002;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;transition:background .18s,transform .18s,box-shadow .18s}
.lab-button:hover:not(:disabled),.upload-btn:hover{background:#c9def9;transform:translateY(-2px);box-shadow:3px 6px 8px #0002}
.recording{background:#fbd9d5;border-color:#ef9b91;color:#ac3d36}
.record-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.record-actions .lab-button{min-width:112px}
.audio-summary{display:flex;gap:8px 15px;flex-wrap:wrap;align-items:center;margin:0 0 12px;color:#66798d;font-size:12px;line-height:1.5}
.audio-summary strong{color:#26496c;font-weight:800}
#fileName{display:inline-block;max-width:160px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.record-timer{margin-left:auto;color:#2368bd;font-weight:900;font-variant-numeric:tabular-nums}
.wave-frame{height:153px;border:1px solid #dce6f2;background:#fbfdff;border-radius:9px;padding:10px 13px}
#waveform{display:block;width:100%;height:132px}
.figure-caption{font-size:12px;color:#7890a6;line-height:1.5;margin:8px 0 0}
.audio-state{color:#6e849d;font-size:13px;line-height:1.5;margin:10px 0}
audio{display:block;width:100%;height:36px;margin-top:10px}
audio[hidden]{display:none}
.step-toolbar{display:flex;align-items:flex-start;gap:16px;margin-bottom:15px}
.step-toolbar p{font-size:15px;line-height:1.5;margin:0;color:#273950}
.step-toolbar strong{color:#0f1c2f}
.mfcc-frame{padding:9px;border:1px solid #c9e6f5;background:#b8ebfb;border-radius:4px}
#mfccCanvas{display:block;width:100%;height:160px;background:#fff}
.mfcc-values{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-size:13px;line-height:1.5}
.mfcc-values strong{color:#275d94}
.phoneme-card{border-radius:27px;background:#e7eefb;padding:18px 24px 24px}
.phoneme-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:15px}
.phoneme-card h3{margin:0;font-size:17px;font-weight:700}
.phoneme-row{display:flex;align-items:center;gap:16px}
.phoneme-output{flex:1;min-height:50px;display:flex;align-items:center;padding:9px 16px;background:#fff;border:1px solid #dce5f3;color:#203c65;font-size:22px;font-weight:750;line-height:1.3;word-break:break-word}
.phoneme-card p{margin:20px 0 0;font-size:13px;line-height:1.55;color:#344d70}
.recognition-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.main-button{min-height:49px;font-size:16px}
.segmented{display:flex;align-items:center;background:#f1f1f1;padding:5px;border-radius:10px;gap:3px;flex-wrap:wrap}
.segmented button{border:0;background:transparent;padding:9px 14px;min-height:37px;border-radius:6px;color:#3d4857;font-size:14px;font-weight:700;white-space:nowrap}
.segmented button.active{background:#fff;color:#2563ad;box-shadow:1px 3px 6px #0002}
.model-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:13px;color:#5e7895;margin:0 0 2px}
.model-hint{font-size:12px;color:#8193a6;text-align:right;margin:4px 0 17px}
.transcript-top{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 8px}
.transcript-top label{font-size:15px;font-weight:800;color:#365b88}
.transcript-top span{font-size:12px;color:#6f8ca7}
#transcript{display:block;width:100%;min-height:132px;border:0;border-radius:20px;padding:20px 24px;resize:vertical;background:#e8f0fe;color:#1b3c63;font-size:clamp(21px,1.65vw,28px);line-height:1.45;outline:none}
#transcript::placeholder{color:#8b9caf}
.transcript-hint{font-size:16px;line-height:1.55;font-weight:800;color:#27527e;margin:12px 0 0}
.language-match{display:flex;align-items:center;gap:10px;margin-top:17px;padding:11px 14px;border:1px solid #dce8f7;border-radius:9px;background:#f9fbff;min-height:47px;font-size:12px;color:#67809b}
.language-match strong{font-size:15px;color:#2b5384}
.language-match small{margin-left:auto;font-size:12px;color:#5278a1;text-align:right}
.coach-section{margin-top:30px}
.coach-cards{display:block}
.coach-card{min-width:0;min-height:370px;position:relative;border-radius:48px;background:#d0f4f1;padding:20px 18px 16px;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.active-card{max-width:100%}
.coach-title{margin:0 0 10px;color:#155b61;font-size:18px;font-weight:800}
.coach-display{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex:1;min-height:270px}
.action-status{position:relative;flex:0 0 35%;max-width:180px;background:#fff;border-radius:50%;padding:24px 10px;color:#9ba9b2;font-size:16px;font-weight:700;line-height:1.35;text-align:center;white-space:pre-line;align-self:flex-start;margin-top:32px;min-height:96px;display:flex;align-items:center;justify-content:center}
.action-status::after{content:"";position:absolute;width:17px;height:17px;background:#fff;border-radius:50%;right:12px;bottom:-20px;box-shadow:18px 22px 0 -4px #fff}
.coach-actor{flex:0 1 55%;min-width:0;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.execute-btn{background:#fff;color:#24598d;min-width:110px;margin:0 auto 8px}
.coach-card .robot{position:relative;width:100%;height:270px;margin:auto 0 0}
.robot[hidden]{display:none}
.robot-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .18s ease}
.robot[data-action="idle"] .pose-idle,.robot[data-action="horse"] .pose-horse,.robot[data-action="kick"] .pose-kick{opacity:1}
.robot[data-action="kick"] .pose-kick,.robot[data-action="horse"] .pose-horse{animation:photo-action .8s ease-in-out 3}
@keyframes photo-calm{50%{transform:translateY(-5px)}}
@keyframes photo-action{50%{transform:translateY(-8px) scale(1.02)}}
.coach-caption{width:100%;min-height:37px;display:flex;align-items:center;justify-content:center;margin:auto 0 0;text-align:center;color:#27547a;font-size:15px;font-weight:800;line-height:1.35}
.moves{margin-top:18px;display:flex;gap:14px;align-items:flex-start}
.moves>span{white-space:nowrap;font-size:13px;font-weight:800;color:#6a7f94;padding-top:7px}
.move-tags{display:flex;flex-wrap:wrap;gap:7px}
.move-tags button{border:1px solid #c9d9ef;border-radius:20px;background:#f4f8fe;color:#3d689a;padding:6px 11px;font-size:12px;font-weight:750}
.move-tags button:hover{background:#e4efff}
.move-tags button.active{background:#dceaff;border-color:#6b9ed8;color:#174c87}
.feedback{display:none;margin-top:10px;color:#547698;font-size:13px;line-height:1.5}
.feedback.error{display:block;color:#b8443a}
@media(max-width:1100px){.lab-grid{padding:0 27px 40px}.left-column{padding-right:26px}.right-column{padding-left:26px}.recognition-toolbar{align-items:flex-start;flex-direction:column}.coach-section{margin-top:35px}.coach-card{border-radius:30px;min-height:340px}.coach-card .robot{height:245px}}
@media(max-width:800px){.masthead{padding:18px 24px;min-height:112px}.lab-grid{display:block;padding:0 22px 32px}.left-column{border-right:0;padding:22px 0 0}.right-column{padding:9px 0 0;border-top:7px solid #f0f1f3}.coach-section{margin-top:25px}.coach-card{min-height:345px}.coach-card .robot{height:260px}}
@media(max-width:520px){.masthead{padding:15px 18px}.masthead-badge{width:62px;height:62px;flex-basis:62px}.masthead h1{font-size:22px}.masthead p{font-size:13px}.lab-grid{padding:0 15px 25px}.step-section h2{font-size:23px}.record-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.record-actions .lab-button{min-width:0;font-size:14px}.audio-summary{font-size:11px}.step-toolbar{flex-wrap:wrap}.step-toolbar p{font-size:13px}.phoneme-card{padding:15px}.phoneme-row{align-items:stretch;flex-direction:column}.phoneme-output{font-size:19px}.recognition-toolbar{gap:10px}.model-row{justify-content:flex-start;flex-wrap:wrap}.model-hint{text-align:left}.coach-card{min-height:340px;border-radius:22px;padding:11px 7px}.coach-title{font-size:15px}.coach-display{gap:4px;min-height:235px}.coach-card .robot{height:220px}.action-status{flex-basis:40%;font-size:11px;padding:12px 5px;min-height:72px;margin-top:46px}.execute-btn{font-size:12px;min-width:0;min-height:35px;padding:4px 8px}.coach-caption{font-size:12px}.moves{display:block}.moves>span{display:block;margin-bottom:8px}}
@media(max-width:1100px){.robot-video{height:245px}}
@media(max-width:800px){.robot-video{height:260px}}
@media(max-width:520px){.masthead-badge{width:58px;height:82px;flex-basis:58px}.robot-video{height:220px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.robot-sequence{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:2}
.robot-sequence[hidden]{display:none}