:root{--blue:#237554;--mint:#a8dfc5;--ink:#202b40;--muted:#7a8495;--border:#e6e9ef;--bg:#f7f8fb;--soft:#edf8f2}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}a:hover{color:var(--blue)}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{background:0 0;border:0}button:hover,a:hover{filter:brightness(.96)}:focus-visible{outline-offset:4px;outline:3px solid #78bfa0}h1,h2,h3,p{margin:0}h1{letter-spacing:-.8px;font-size:28px;line-height:1.5}h3{font-size:17px}small{display:block}.muted{color:var(--muted)}.small{font-size:12px}.blue{color:var(--blue)}.eyebrow{letter-spacing:2px;color:var(--muted);margin-bottom:10px;font-size:10px;font-weight:700}.app-header{border-bottom:1px solid var(--border);background:#fff;align-items:center;gap:50px;height:88px;padding:0 4%;display:flex}.brand{letter-spacing:.4px;align-items:center;gap:12px;font-size:17px;font-weight:650;display:flex}.brand small{letter-spacing:1.6px;color:var(--muted);margin-top:2px;font-size:8px}.brand-mark{color:var(--blue);font:italic 700 38px/1 Georgia}.brand-mark span{color:#91cfb2}.main-nav{align-self:stretch;gap:35px;margin:auto;display:flex}.main-nav a,.main-nav button{color:#7a8495;align-items:center;padding:0 10px;font-size:14px;display:flex;position:relative}.main-nav .selected{color:var(--blue);font-weight:650}.selected:after{content:"";background:var(--blue);border-radius:3px;height:3px;position:absolute;bottom:0;left:8px;right:8px}.avatar{color:#6d7b92;background:#edf1f7;border-radius:50%;width:34px;height:34px;font-weight:600}.home{max-width:1180px;margin:42px auto 0;padding:0 24px}.page-heading{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.page-heading .muted{margin-top:7px}.course-tag{border:1px solid var(--border);color:#667186;background:#fff;border-radius:30px;padding:7px 14px;font-size:12px}.home-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px;display:grid}.card{border:1px solid var(--border);background:#fff;border-radius:16px;box-shadow:0 3px 9px #24345303}.hero{padding:30px 36px}.lesson-meta{color:#7c8798;align-items:center;gap:10px;font-size:12px;display:flex}.lesson-meta strong{color:var(--blue);letter-spacing:1px;font-size:11px}.blue-dot{background:var(--blue);border-radius:50%;width:6px;height:6px;display:inline-block}.divider{color:#d7dce5;margin:0 3px}.tag{color:#7b8799;background:#f5f7fa;border-radius:5px;padding:3px 8px;font-size:10px;font-weight:400}.lesson-meta .tag{margin-left:auto}.hero-title{padding:38px 0 30px}.hero-title .eyebrow{letter-spacing:2.4px;font-size:9px}.hero-title h2{letter-spacing:-1.9px;font-size:49px;font-weight:650;line-height:1.16}.hero-title h2 span{color:var(--blue)}.hero-title>p:last-child{color:#7c8798;margin-top:15px;font-size:15px}.section-label{font-size:12px;font-weight:650}.section-label>span{float:right;color:var(--muted);font-size:11px;font-weight:400}.learning-route{border-top:1px solid var(--border);padding-top:23px}.pills{gap:10px;margin-top:13px;display:flex}.pills a{border:1px solid var(--border);border-radius:8px;flex:1;align-items:center;gap:13px;padding:10px 12px;font-size:13px;display:flex}.pills a span{color:#9ca4b2;font-size:10px}.pills .current{background:var(--soft);color:var(--blue);border-color:#c4e6d5}.pills .current span{color:var(--blue)}.primary{background:var(--mint);color:#17513d;border-radius:8px;justify-content:center;align-items:center;gap:18px;min-height:46px;padding:10px 22px;font-size:14px;font-weight:600;display:flex}.continue{justify-content:flex-start;margin-top:29px}.continue .arrow{margin-left:auto;font-size:23px;font-weight:400}.play-small{font-size:11px}.helper{color:#939cab;margin-top:12px;font-size:11px}.summary{flex-direction:column;gap:16px;display:flex}.summary .card{padding:20px 22px}.card-label{justify-content:space-between;align-items:center;font-size:14px;font-weight:600;display:flex}.subtle-icon{color:#99a6bb;font-size:21px}.streak-number{letter-spacing:-1px;align-items:baseline;gap:8px;margin:9px 0 11px;font-size:41px;font-weight:600;display:flex}.streak-number>span:first-child{color:var(--muted);font-size:13px;font-weight:400}.streak-number .tag{letter-spacing:0;align-self:center;margin-left:auto}.week{justify-content:space-between;margin-bottom:15px;display:flex}.week>span{color:#9aa4b3;text-align:center;font-size:10px}.week i{background:#edf0f5;border-radius:3px;width:21px;height:5px;margin-top:7px;display:block}.review-content{padding:14px 0 18px}.check-circle{float:left;background:var(--soft);color:var(--blue);border-radius:50%;place-items:center;width:29px;height:29px;margin:3px 11px 0 0;display:grid}.review h3{font-size:14px;font-weight:500}.review-content p{margin-top:4px;font-size:10px}.text-link{border-top:1px solid var(--border);color:#67758a;justify-content:space-between;width:100%;padding:12px 0 0;font-size:11px;display:flex}.quick a{justify-content:space-between;align-items:center;padding-top:14px;font-size:12px;display:flex}.quick a small{color:#939dab;margin-top:2px;font-size:10px}.quick a+a{border-top:1px solid #f0f2f6;margin-top:12px}.site-footer{color:#a0a9b8;justify-content:space-between;max-width:1132px;margin:26px auto;padding:0 0 20px;font-size:10px;display:flex}.site-footer span:last-child{letter-spacing:1px;font-size:9px}.lesson-header{border-bottom:1px solid var(--border);background:#fff;align-items:center;gap:18px;height:84px;padding:0 32px;display:flex}.back{color:#7c889b;font-size:25px}.lesson-brand strong{font-size:14px;font-weight:600}.lesson-brand strong span{color:#abb3c0;margin:0 5px}.lesson-brand small{color:var(--muted);margin-top:3px;font-size:10px}.steps{gap:35px;margin:auto;display:flex}.step{color:#939dad;align-items:center;gap:8px;font-size:12px;display:flex;position:relative}.step:not(:last-child):after{content:"";background:#e2e7ef;width:17px;height:1px;position:absolute;left:calc(100% + 10px)}.step>span{border:1px solid #e2e7ef;border-radius:50%;place-items:center;width:25px;height:25px;font-size:10px;display:grid}.step.active{color:var(--blue);font-weight:600}.step.active>span{background:var(--mint);border-color:var(--mint);color:#17513d}.step.done{color:#527565}.step.done>span{color:var(--blue);background:#edf8f2;border-color:#edf8f2}.icon-btn{color:#8190a5;font-size:24px}.lesson-main{max-width:1216px;margin:30px auto;padding:0 24px}.lesson-intro{justify-content:space-between;align-items:center;margin-bottom:23px;display:flex}.lesson-intro h1{font-size:25px}.lesson-intro .eyebrow{margin-bottom:7px;font-size:9px}.lesson-intro .muted{margin-top:6px;font-size:12px}.demo-label{color:#9aa4b4;font-size:10px}.listen-grid{grid-template-columns:350px minmax(0,1fr);gap:22px;display:grid}.player{text-align:center;padding:23px}.player .card-label{text-align:left}.player-art{background:#f3f9f5;border-radius:10px;margin-top:24px;padding:23px 8px 20px}.audio-caption{letter-spacing:1.7px;color:#426d58;font-size:8px}.wave{justify-content:center;align-items:center;gap:3px;height:110px;display:flex;overflow:hidden}.wave i{width:3px;height:calc(var(--h) * .65);background:#85c9a8;border-radius:3px;flex-shrink:0;display:block}.audio-subtitle{letter-spacing:1.5px;color:#789b88;font-size:6px}.play-button{background:var(--mint);color:#17513d;border-radius:50%;width:56px;height:56px;margin-top:22px;padding-left:9px;font-size:20px;box-shadow:0 4px 10px #23755422}.player-status{color:#929daf;margin:10px 0 18px;font-size:10px}.speeds{justify-content:center;gap:10px;display:flex}.speeds button{color:#8994a5;border-radius:6px;padding:6px 13px;font-size:11px}.speeds button.active{background:var(--soft);color:var(--blue);font-weight:600}.sentence-controls{border-top:1px solid var(--border);color:#8d98ab;justify-content:space-between;align-items:center;margin-top:24px;padding-top:18px;font-size:10px;display:flex}.sentence-controls button{padding:0;font-size:11px}.sentence-controls b{color:var(--blue);font-weight:500}.player-tip{margin-top:20px;font-size:10px}.transcript{overflow:hidden}.transcript-heading{justify-content:space-between;align-items:center;padding:22px 24px;display:flex}.translation{color:#8490a3;font-size:10px}.translation span{color:var(--blue);margin-left:5px}.sentence-list{scrollbar-width:thin;scrollbar-color:#dce3ef transparent;height:366px;overflow:auto}.sentence{text-align:left;border-top:1px solid #f0f2f6;align-items:center;gap:18px;width:100%;padding:13px 24px;display:flex;position:relative}.sentence.active{background:#edf8f2}.sentence.active:before{content:"";background:var(--blue);width:3px;position:absolute;top:0;bottom:0;left:0}.line-number{color:#b0b8c5;align-self:flex-start;margin-top:4px;font-size:9px}.en{font-size:14px;line-height:1.5;display:block}.zh{color:#8a95a6;margin-top:3px;font-size:11px;display:block}.active .en{color:var(--blue);font-weight:600}.active .zh{color:#426d58}.sentence-playing{color:var(--blue);opacity:0;margin-left:auto}.active .sentence-playing{opacity:1}.hide-zh .zh{display:none}.transcript-foot{border-top:1px solid var(--border);color:#98a2b2;align-items:center;gap:7px;padding:13px 24px;font-size:9px;display:flex}.transcript-foot>span:last-child{margin-left:auto}.transcript-foot .blue-dot{width:4px;height:4px}.bottom-bar{border-top:1px solid var(--border);background:#ffffffed;justify-content:space-between;align-items:center;margin-top:32px;padding:18px max(40px,50vw - 584px);display:flex}.bottom-bar>span{color:#939eae;font-size:11px}.read-grid{grid-template-columns:minmax(0,1fr) 380px;gap:24px;display:grid}.recording{padding:24px 28px}.reading-excerpt{border-bottom:1px solid var(--border);margin-top:22px;padding:5px 0 20px 27px;position:relative}.quote-mark{color:#91cfb2;font:32px Georgia;position:absolute;top:0;left:0}.reading-excerpt p{letter-spacing:-.2px;font-size:19px;line-height:1.8}.reading-excerpt>.small{margin-top:10px;font-size:11px;display:block}.record-area{text-align:center;padding-top:22px}.mic{color:#17513d;background:var(--mint);border-radius:50%;width:56px;height:56px;box-shadow:0 5px 12px #23755424}.mic svg{width:26px;height:26px;margin-top:5px}.record-area h3{margin-top:10px;font-size:13px;font-weight:500}.record-area>p{margin-top:3px;font-size:10px}.record-area .wave{gap:4px;height:70px;margin-top:10px}.record-area .wave i{height:calc(var(--h) * .44);background:#b7dfca;width:2px}.timer{color:#748199;font-variant-numeric:tabular-nums;margin-top:0;font-size:19px}.record-tip{text-align:center;color:#99a3b3;margin-top:15px;font-size:10px}.record-tip>span{color:#518d70;margin-right:5px}.feedback{padding:23px}.feedback-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding-bottom:19px;display:flex}.feedback-header h2{font-size:17px;font-weight:600}.feedback-header h2>span{margin-right:7px}.complete{color:#527565;font-size:10px}.feedback-section{padding:19px 0}.feedback-section h3{margin:10px 0 7px;font-size:14px}.feedback-section>.muted{font-size:11px;line-height:1.9}.score{background:#f5faf7;border:1px solid #deeee4;border-radius:9px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:15px;display:flex}.score p{margin-top:4px;font-size:10px}.score-number{color:var(--blue);font-size:31px;font-weight:600;line-height:1}.score-number span{color:#789b88;margin-left:4px;font-size:12px;font-weight:400}.score-bars{gap:5px;width:100%;margin-top:13px;display:flex}.score-bars i{background:var(--blue);border-radius:2px;flex:1;height:4px}.score-bars i:last-child{background:#deeee4}.improvements{padding-bottom:10px}.improvements ol{margin:15px 0 0;padding:0;list-style:none}.improvements li{gap:12px;margin-bottom:14px;display:flex}.improvements li>span{color:#518d70;padding-top:2px;font-size:9px}.improvements strong{font-size:11px;font-weight:600}.improvements li p{color:#929dad;margin-top:3px;font-size:10px}.feedback-actions{gap:9px;margin-top:7px;display:flex}.feedback-actions>*{min-height:41px;padding:10px 12px;font-size:11px}.feedback-actions .primary{flex:1}.secondary{border:1px solid var(--border);background:#fff;border-radius:7px}.feedback-note{text-align:center;color:#a5adba;margin-top:10px;font-size:9px}.running .wave i{animation:.7s ease-in-out infinite alternate pulse;animation-delay:var(--d)}@keyframes pulse{to{transform:scaleY(.35)}}dialog{border:1px solid var(--border);border-radius:15px;width:90%;max-width:400px;padding:30px;box-shadow:0 20px 80px #202b4033}dialog::backdrop{background:#202b4055}dialog h2{margin-bottom:15px;font-size:21px}dialog .primary{width:100%;margin-top:25px}dialog>.dialog-close:first-child{color:#8e99a9;font-size:24px;position:absolute;top:8px;right:12px}@media (width>=1400px){.home{margin-top:55px}}@media (width<=1000px){.home-grid{grid-template-columns:1fr 285px}.hero{padding:25px}.hero-title h2{font-size:42px}.pills{gap:6px}.pills a{gap:7px;padding:10px 8px}.lesson-brand strong{font-size:12px}.steps{gap:23px}.step:not(:last-child):after{width:10px;left:calc(100% + 6px)}.listen-grid{grid-template-columns:300px 1fr}.read-grid{grid-template-columns:1fr 340px}.recording{padding:22px}.site-footer{padding:0 24px 20px}.reading-excerpt p{font-size:17px}}@media (width<=740px){.app-header{gap:10px;height:72px;padding:0 20px}.brand{font-size:14px}.brand small{font-size:6px}.brand-mark{font-size:32px}.main-nav{gap:4px;margin-left:auto;margin-right:0}.main-nav a,.main-nav button{padding:0 8px;font-size:12px}.main-nav button,.avatar{display:none}.home{margin-top:26px;padding:0 18px}.page-heading{align-items:flex-start}.page-heading h1{font-size:23px}.page-heading>.course-tag{display:none}.home-grid{grid-template-columns:1fr;gap:18px}.hero{padding:24px}.hero-title{padding:28px 0}.hero-title h2{font-size:45px}.summary{grid-template-columns:1fr 1fr;gap:12px;display:grid}.summary .card{padding:18px}.quick{grid-column:1/-1}.quick a{width:49%;padding-right:12px;display:inline-flex}.quick a+a{border:0;margin:0}.review-content .check-circle{display:none}.week i{width:15px}.streak-number{font-size:34px}.streak-number .tag{display:none}.site-footer{padding:0 18px 20px}.site-footer span:last-child{display:none}.lesson-header{flex-wrap:wrap;gap:12px;height:auto;min-height:110px;padding:12px 18px}.lesson-brand{flex:1}.lesson-brand strong{font-size:13px}.steps{order:4;justify-content:center;gap:40px;width:100%;margin:0;padding:4px 0}.step:not(:last-child):after{width:20px;left:calc(100% + 10px)}.lesson-main{margin-top:23px;padding:0 18px}.lesson-intro{display:block}.lesson-intro h1{font-size:22px}.demo-label{margin-top:8px;display:block}.listen-grid,.read-grid{grid-template-columns:1fr;gap:18px}.player-art{margin-top:15px;padding:15px}.player-art .wave{height:75px}.play-button{margin-top:15px}.sentence-list{height:350px}.sentence{padding:13px 18px}.en{font-size:13px}.bottom-bar{z-index:2;justify-content:center;padding:15px 18px;position:sticky;bottom:0}.bottom-bar>span{display:none}.bottom-bar .primary{width:100%}.read-grid .feedback{padding:23px}.record-area .wave{max-width:100%}.feedback-actions>*{font-size:13px}.lesson-meta{font-size:11px}.hero-title .eyebrow{font-size:8px}.transcript-foot{padding:12px 16px;font-size:8px}.section-label{font-size:11px}}@media (prefers-reduced-motion:reduce){.running .wave i{animation:none}}.primary:hover{color:#17513d}.mic{place-items:center;margin-left:auto;margin-right:auto;padding:0;display:grid}.mic svg{margin-top:0}.week .lit i{background:var(--blue)}.week .today i{box-shadow:0 0 0 1px #c4e6d5}.pills a.done,.pills a.done span{color:#527565}.bilibili-link{background:var(--soft);min-height:40px;color:var(--blue);border:1px solid #c4e6d5;border-radius:8px;justify-content:center;align-items:center;gap:8px;margin:0 auto 4px;padding:8px 14px;font-size:12px;font-weight:600;display:flex}.bilibili-link:hover{color:var(--blue)}.dialog-body{flex-direction:column;gap:10px;display:flex}.dialog-body p{font-size:13px;line-height:1.7}.dialog-actions{flex-direction:column;gap:8px;margin-top:16px;display:flex}.dialog-actions .secondary{width:100%;min-height:40px;color:var(--ink)}.dialog-body a{color:var(--blue)}.progress-list{margin:4px 0 0;padding:0;list-style:none}.progress-list li{border-top:1px solid var(--border);justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;display:flex}.import-error{color:#9a4a4a;font-size:12px}.score-bars i{background:#deeee4}.score-bars i.on,.score-bars i.on:last-child{background:var(--blue)}
