: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}
/* Classroom activity: compare two recordings of the same command. */
.lab-grid{display:block;max-width:1440px;margin:auto;padding:30px 48px 56px}
.left-column,.right-column{padding:0;border:0}
.step-section{margin-bottom:38px}
.activity-instruction{margin:-7px 0 20px;font-size:18px;line-height:1.6;color:#34516f}
.recording-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.recording-panel{min-width:0;border:1px solid #dce6f2;border-radius:20px;background:#fbfdff;padding:22px}
.recording-panel h3{margin:0 0 16px;color:#163c69;font-size:21px}
.recording-panel h3 span{font-size:15px;font-weight:500;color:#58718c;margin-left:8px}
.recording-panel .record-actions .lab-button{min-width:0;flex:1 1 105px}
.recording-panel .audio-summary{min-height:38px;font-size:13px}
.recording-panel .wave-frame{height:180px}
.recording-panel #waveform{height:132px}.recording-panel #waveformB{height:158px}
.recording-panel .audio-state{min-height:20px}
.audio-detail{display:flex;gap:18px;margin-top:12px;color:#7890a6;font-size:12px}
.right-column{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:32px;align-items:start}
.right-column .coach-section{margin-top:0}
@media(max-width:1000px){.lab-grid{padding:25px 26px 42px}.right-column{display:block}.right-column .coach-section{margin-top:28px}}
@media(max-width:700px){.recording-grid{grid-template-columns:1fr}.lab-grid{padding:20px 16px 35px}.recording-panel{padding:16px}.audio-detail{flex-wrap:wrap}.right-column{border:0}}
.activity-tabs{display:flex;gap:8px;max-width:1440px;margin:0 auto;padding:18px 48px 0;border-bottom:1px solid #e2eaf5;overflow-x:auto}
.activity-tabs button{flex:0 0 auto;border:0;border-bottom:4px solid transparent;background:transparent;color:#526a83;padding:12px 22px;font-size:17px;font-weight:800;min-height:48px}
.activity-tabs button.active{color:#14549d;border-color:#317dd2}
.activity-tabs button:hover{color:#14549d;background:#f1f6fd}
.activity-main{max-width:1440px;margin:auto;padding:25px 48px 56px}
.page-intro{margin-bottom:22px}.page-intro h2{margin:0 0 7px;font-size:30px;color:#172e4b}.page-intro p{margin:0;font-size:17px;color:#4f6881;line-height:1.5}
.activity-main [hidden]{display:none!important}
.activity-sheet{margin-bottom:25px;padding:22px;border:1px solid #dce6f2;border-radius:16px;background:#fbfdff}
.activity-sheet h3{margin:0 0 8px;color:#153d6d;font-size:22px}.activity-sheet>p{margin:0 0 16px;color:#506b86;line-height:1.5}
.table-scroll{overflow-x:auto}.activity-sheet table{border-collapse:collapse;width:100%;min-width:620px;text-align:left}.activity-sheet th,.activity-sheet td{border-bottom:1px solid #e2eaf3;padding:12px 14px;vertical-align:middle}.activity-sheet thead th{background:#eaf2fe;color:#23496e;font-size:14px}.activity-sheet tbody th{font-weight:600}.activity-sheet tbody tr.selected{background:#eaf5ff}
.task-select{border:1px solid #b8d3f1;border-radius:8px;background:#fff;color:#1c568e;padding:9px 12px;text-align:left;line-height:1.4;min-height:44px;font-weight:700}.task-select:hover{background:#eaf4ff}
.task-result,.task-phoneme{display:block;width:100%;min-width:160px;min-height:70px;padding:10px 12px;border:1px solid #b9cde4;border-radius:8px;background:#fff;overflow-wrap:anywhere;color:#234d79;font:inherit;line-height:1.45;resize:vertical}.task-result::placeholder,.task-phoneme::placeholder{color:#8299af}.judgment{white-space:nowrap}.judgment label{display:inline-flex;align-items:center;gap:3px;margin-right:14px;min-height:44px;cursor:pointer}.judgment input{width:17px;height:17px}
.single-recording .recording-grid{grid-template-columns:minmax(0,1fr);max-width:720px}.single-recording .recording-panel:nth-child(2),.single-recording .audio-detail{display:none}.single-recording #recordStep .figure-caption{display:none}
#feedback{display:block;margin:18px 0;min-height:24px}#feedback:empty{display:none}
#coachHost{max-width:650px}#languageHost,#phonemeHost,#featureHost{max-width:900px}
@media(max-width:700px){.activity-tabs{padding:10px 16px 0}.activity-tabs button{font-size:15px;padding:10px 14px}.activity-main{padding:20px 16px 36px}.activity-sheet{padding:15px}.page-intro h2{font-size:25px}}
.custom-word input{min-height:42px;padding:8px 11px;border:1px solid #b9cde4;border-radius:7px;background:#fff;color:#173657;font:inherit}
.copy-button{min-height:40px;padding:8px 13px;border:1px solid #b6cdec;border-radius:7px;background:#fff;color:#245c97;font-size:14px;font-weight:700;white-space:nowrap}
.copy-button:hover{background:#edf5ff}
.phoneme-row{flex-wrap:wrap}
.custom-word{display:block;margin-top:8px;color:#526d8c;font-size:13px}
.custom-word input{display:block;width:min(100%,180px);margin-top:4px}
.activity-workspace{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:24px}
#activitySheetHost{min-width:0}
.workspace-left,.workspace-right{min-width:0}
.workspace-left .activity-sheet{margin-bottom:22px}
.workspace-left .recording-grid{grid-template-columns:minmax(0,1fr)}
.workspace-left .recording-panel{padding:16px 18px;border-radius:14px}
.workspace-left .recording-panel .wave-frame{height:155px}
.workspace-left .step-section{margin-bottom:22px}
.workspace-right #languageHost,.workspace-right #coachHost{max-width:none}
.workspace-right .coach-section{margin-top:26px}
.workspace-right .coach-card{min-height:340px}
.workspace-right .coach-display{min-height:240px}
.workspace-right .coach-card .robot{height:245px}
.workspace-left .activity-sheet{padding:16px 14px}
.workspace-left .activity-sheet h3{font-size:19px}
.workspace-left .activity-sheet>p{font-size:13px}
.workspace-left .activity-sheet table{width:100%;min-width:0;table-layout:fixed;font-size:12px}
.workspace-left .activity-sheet th,.workspace-left .activity-sheet td{padding:7px 5px;overflow-wrap:normal}
.workspace-left .activity-sheet thead th{font-size:12px;white-space:nowrap}
.workspace-left .activity-sheet .task-select{display:block;max-width:100%;min-height:34px;padding:5px 6px;font-size:12px;line-height:1.3;white-space:normal;word-break:keep-all;overflow-wrap:break-word}
.workspace-left .activity-sheet .task-result,.workspace-left .activity-sheet .task-phoneme{min-width:0;max-width:none;min-height:52px;padding:7px 6px;font-size:12px;line-height:1.35}
.workspace-left .activity-sheet .judgment{white-space:normal}
.workspace-left .activity-sheet .judgment label{min-height:24px;margin-right:2px;gap:1px;font-size:10px;white-space:nowrap}
.workspace-left .activity-sheet .judgment input{width:12px;height:12px;margin:0 2px 0 0}
#sheetRecognize1 th:first-child{width:43%}
#sheetRecognize1 th:nth-child(2){width:35%}
#sheetRecognize1 th:nth-child(3){width:22%}
#sheetRecognize2 th:first-child{width:30%}
#sheetRecognize2 th:nth-child(2){width:14%}
#sheetRecognize2 tbody td:nth-child(2){white-space:nowrap}
#sheetRecognize2 th:nth-child(3){width:19%}
#sheetRecognize2 th:nth-child(4){width:19%}
#sheetRecognize2 th:nth-child(5){width:18%}
#sheetCompare th:first-child{width:45%}
#sheetCompare th:nth-child(2){width:34%}
#sheetCompare th:nth-child(3){width:21%}
.peer-recognition{margin-top:22px;padding-top:20px;border-top:1px solid #dce6f2}
.peer-recognition-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.peer-recognition h3{margin:0;font-size:18px;color:#234b78}
.peer-recognition-status{display:block;margin-bottom:8px;font-size:13px;color:#607e9b}
#transcriptB{display:block;width:100%;min-height:110px;border:0;border-radius:20px;padding:18px 22px;resize:vertical;background:#e8f0fe;color:#1b3c63;font-size:22px;line-height:1.45}
#transcriptB::placeholder{color:#8b9caf}
.single-recording #peerRecognition{display:none}
@media(max-width:1050px){.activity-workspace{grid-template-columns:minmax(0,1fr)}.workspace-right .coach-card{min-height:350px}}
@media(max-width:700px){.activity-workspace{gap:10px}.peer-recognition-head{align-items:stretch}.peer-recognition-head .lab-button{width:100%}}