*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#183536;background:#f6f5f0;font-synthesis:none;--teal:#2a7166;--ink:#183536;--muted:#7a8986;--line:#e2e7df;--soft:#edf2ec}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #edc66b;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}progress{appearance:none;-webkit-appearance:none;border:0;overflow:hidden}progress::-webkit-progress-bar{background:#e5eae3}progress::-webkit-progress-value{background:var(--teal)}progress::-moz-progress-bar{background:var(--teal)}.topbar{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:29px 32px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:650;letter-spacing:.5px}.brand small{display:block;margin-top:5px;font-size:8px;font-weight:500;letter-spacing:2px;color:var(--muted)}.brandmark{width:42px;height:42px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:3px}.brandmark i{display:block;background:#fff;width:3px;height:11px;border-radius:9px}.brandmark i:nth-child(2),.brandmark i:nth-child(4){height:19px}.brandmark i:nth-child(3){height:26px}.day-pill{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:1px;border:1px solid #d4ded4;border-radius:30px;padding:10px 15px}.tiny-dot,.footer-dot{width:6px;height:6px;background:#6b9e70;border-radius:50%;display:inline-block}.workspace{max-width:1160px;padding:0 32px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;padding:42px 0 35px;gap:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:#70837c;font-weight:600;margin:0 0 13px}.intro h1{font-weight:550;font-size:33px;letter-spacing:-.8px;margin:0}.intro-copy{color:#7a8986;font-size:13px;margin:12px 0 0}.completion{width:130px;display:grid;gap:7px}.completion strong{font-size:30px;font-weight:500;line-height:1}.completion strong span{font-size:16px;color:#99a59d}.completion>span{font-size:11px;color:var(--muted)}.completion progress{height:4px;width:100%;border-radius:9px;margin-top:3px}.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 298px;gap:28px;align-items:start}.player-column{min-width:0}.lesson-line{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:13px}.lesson-badge{font-size:9px;font-weight:650;letter-spacing:.7px;border:1px solid #d9dfd3;padding:5px 7px;border-radius:5px}.voice-note{margin-left:auto;font-size:10px;color:#88948b}.sentence-card{border:1px solid #dde5d9;background:#fffefa;border-radius:20px;padding:27px 30px 23px;box-shadow:0 5px 15px #244d3c03}.sentence-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.2px;color:#819187}.speaker{background:#eef2e9;border-radius:30px;padding:6px 10px;font-size:10px;letter-spacing:0;color:#688075}.sentence-content{min-height:231px;display:flex;flex-direction:column;justify-content:center;padding:29px 0}.english{font-family:Georgia,"Times New Roman",serif;line-height:1.35;font-size:34px;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}.english.long{font-size:27px;line-height:1.45}.translation-row{display:flex;align-items:flex-start;gap:9px;margin-top:24px;font-size:13px;color:#7c8b81;line-height:1.8}.translation-label{flex-shrink:0;font-size:9px;background:#f0f1e9;padding:2px 5px;margin-top:2px;border-radius:4px;line-height:1.7}.translation-row p{margin:0;flex:1}.translation-row p.concealed{color:#a0aaa0;font-style:italic}.icon-text{font-size:10px;color:#89968b;background:transparent;padding:4px 0 4px 8px;min-height:32px;flex-shrink:0}.sequence-caption{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:10px;color:#91a093}.sequence-caption span:last-child{color:var(--teal)}.sequence{display:flex;align-items:center;gap:8px}.sequence>span{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:12px 2px;border-radius:9px;background:#f3f5ef;color:#7e8d82;transition:background .2s,color .2s;min-width:0}.sequence b{font-size:12px;font-weight:600}.sequence small{font-size:8px;margin-top:4px}.sequence>i{font-size:10px;font-style:normal;color:#bec8b9}.sequence>span.active{color:white;background:var(--teal)}.sequence>span.completed{background:#e4eee2;color:#5e8670}.sequence>span.chinese-step{background:#f9f1de;color:#a28a53}.sequence>span.chinese-step.active{background:#e3bb65;color:#4b412e}.clip-progress{margin-top:21px}.clip-progress progress{width:100%;height:3px;border-radius:4px;display:block}.clip-progress>div{display:flex;justify-content:space-between;color:#9aa69b;font-size:9px;margin-top:8px;font-variant-numeric:tabular-nums}.transport{padding:24px 4px 0}.main-controls{display:flex;align-items:center;justify-content:center;gap:26px}.nav-control{display:flex;align-items:center;gap:10px;background:transparent;padding:10px 2px;color:#506c60;min-height:46px}.nav-control b{font-size:12px;font-weight:500}.nav-control>span{font-size:28px;line-height:20px}.play-control{background:var(--teal);color:#fff;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:50px;padding:17px 31px;font-size:13px;font-weight:500;min-width:156px;box-shadow:0 5px 12px #2a716615}.play-control:hover{background:#246257}.play-control>span:first-child{font-size:13px;min-width:16px;text-align:center}.secondary-controls{display:flex;align-items:center;justify-content:center;gap:37px;margin-top:16px}.text-control{background:transparent;color:#829285;font-size:11px;min-height:40px}.text-control span{font-size:19px;vertical-align:-2px;margin-right:3px}.master-control{background:#eaf0e5;color:#4f7b59;border:1px solid #dce6d5;padding:9px 14px;border-radius:8px;font-size:11px;min-height:40px}.master-control span{font-size:13px;margin-right:5px}.settings{display:flex;align-items:center;gap:23px;padding:22px 3px 14px;margin-top:7px;border-bottom:1px solid var(--line);color:#7a8b7c;font-size:11px}.setting-toggle{display:flex;align-items:center;gap:8px;position:relative;cursor:pointer;min-height:32px}.setting-toggle input{position:absolute;opacity:0;width:31px;height:20px;margin:0}.switch{width:29px;height:17px;border-radius:20px;background:#d5dcd1;transition:background .2s;display:inline-block}.switch:after{content:"";display:block;width:11px;height:11px;margin:3px;background:white;border-radius:50%;transition:transform .2s}.setting-toggle input:checked+.switch{background:#729882}.setting-toggle input:checked+.switch:after{transform:translateX(12px)}.setting-toggle input:focus-visible+.switch{outline:3px solid #edc66b;outline-offset:3px}.speed-label{margin-left:auto;display:flex;align-items:center;gap:9px}.speed-label select{background:transparent;border:0;color:#536f5d;font-size:11px;padding:7px 2px;max-width:84px}.notice{font-size:10px;color:#8e9b8c;line-height:1.6;min-height:17px;margin:13px 3px}.notice.error{color:#b14d38}.outline{border:1px solid #e0e6db;border-radius:16px;background:#f0f2eb;margin-top:42px;overflow:hidden}.outline summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 18px 15px;font-size:13px;font-weight:550;cursor:pointer}.outline summary::-webkit-details-marker{display:none}.outline summary small{font-size:10px;font-weight:400;margin-left:7px;color:#94a18f}.outline-chevron{color:#8c9c87}.outline details[open] .outline-chevron{transform:rotate(180deg)}.outline-content{padding:0 10px 10px}.search-box{display:flex;align-items:center;gap:6px;background:#fbfcf7;border:1px solid #e1e6dc;border-radius:8px;padding:6px 10px;margin:0 6px}.search-box span{font-size:22px;line-height:20px;color:#95a38e}.search-box input{min-width:0;width:100%;font-size:11px;border:0;outline:none;background:transparent;padding:3px 0;color:var(--ink)}.search-box input::placeholder{color:#a3ad9d}.list-tools{display:flex;justify-content:space-between;align-items:center;padding:11px 7px 7px;font-size:9px;color:#8a9985;gap:5px}.list-tools label{display:flex;align-items:center;gap:4px;min-height:30px}.list-tools input{width:12px;height:12px;accent-color:var(--teal)}.list-tools button{font-size:9px;background:transparent;color:#8a9985;padding:8px 0}.sentence-list{max-height:438px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ced9c7 transparent}.sentence-row{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;background:transparent;color:#73836d;padding:13px 9px;border-radius:8px;margin:2px 0;font-size:11px;line-height:1.6}.sentence-row:hover{background:#e9eee2}.sentence-row.current{background:#dce9d8;color:#2c684d}.sentence-row .num{font-variant-numeric:tabular-nums;font-size:9px;color:#a0ad96;min-width:19px;margin-top:2px}.sentence-row.current .num{color:#578565}.sentence-row .line{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sentence-row .check{font-size:11px;color:#5f9262;flex-shrink:0;min-width:10px}.sentence-row.known:not(.current) .line{color:#a1ad97}.empty-list{text-align:center;font-size:11px;color:#91a089;padding:20px}.workspace footer{display:flex;gap:7px;align-items:center;margin:32px 0 24px;padding-top:18px;border-top:1px solid var(--line);color:#a0ac9b;font-size:9px}.footer-dot{width:4px;height:4px;background:#9bb18d}.keyboard-hint{margin-left:auto}audio{display:none}
@media(min-width:1400px){.topbar{padding-top:35px;padding-bottom:35px}.intro{padding-top:50px;padding-bottom:42px}}
@media(max-width:900px){.workspace{padding:0 23px}.topbar{padding:22px 23px}.study-layout{grid-template-columns:minmax(0,1fr) 255px;gap:20px}.sentence-card{padding:23px}.english{font-size:30px}.english.long{font-size:24px}.main-controls{gap:18px}.play-control{min-width:140px;padding:16px 23px}.settings{gap:14px}.voice-note{display:none}}
@media(max-width:700px){.topbar{padding:20px 20px}.brand{font-size:17px}.brandmark{width:36px;height:36px}.brandmark i:nth-child(3){height:23px}.brand small{font-size:7px}.day-pill{font-size:9px;padding:8px 11px}.workspace{padding:0 18px}.intro{padding:29px 2px 26px;gap:18px}.intro h1{font-size:25px}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:11px}.intro-copy{font-size:11px;margin-top:10px;line-height:1.6}.completion{width:79px;flex-shrink:0;gap:6px}.completion strong{font-size:25px}.completion strong span{font-size:12px}.completion>span{font-size:9px}.study-layout{display:flex;flex-direction:column;gap:17px}.player-column{width:100%}.lesson-line{font-size:12px;margin-bottom:12px;gap:8px}.voice-note{display:inline;font-size:9px}.sentence-card{padding:22px 21px 20px;border-radius:17px}.sentence-top{font-size:9px;letter-spacing:1px}.sentence-content{min-height:205px;padding:27px 0}.english{font-size:30px;line-height:1.4}.english.long{font-size:25px;line-height:1.45}.translation-row{font-size:12px;margin-top:19px;gap:7px}.sequence{gap:5px}.sequence>span{padding:12px 1px}.sequence>i{font-size:8px}.sequence b{font-size:11px}.sequence small{font-size:8px}.main-controls{gap:22px}.play-control{min-width:147px;padding:17px 25px}.nav-control{gap:7px}.nav-control b{font-size:11px}.transport{padding-top:22px}.secondary-controls{margin-top:13px;gap:30px}.settings{padding-top:18px;gap:16px;font-size:10px;flex-wrap:wrap}.speed-label{gap:5px}.setting-toggle{min-height:35px}.notice{font-size:10px}.outline{width:100%;margin:0}.outline summary{padding:17px 18px}.outline-content{padding-bottom:10px}.sentence-list{max-height:310px}.sentence-row{padding:14px 10px;font-size:12px;min-height:47px}.search-box input{font-size:16px}.list-tools{font-size:11px}.list-tools button{font-size:10px;min-height:36px}.list-tools input{width:15px;height:15px}.workspace footer{margin-top:25px;padding-bottom:env(safe-area-inset-bottom);font-size:9px;line-height:1.6;flex-wrap:wrap}.keyboard-hint{display:none}.text-control,.master-control{min-height:44px}.icon-text{min-height:35px}}
@media(max-width:370px){.workspace{padding:0 13px}.topbar{padding:18px 15px}.intro h1{font-size:23px}.intro-copy{font-size:10px}.voice-note{display:none}.main-controls{gap:14px}.play-control{min-width:137px;padding:17px 20px}.sentence-card{padding:20px 17px}.english{font-size:28px}.english.long{font-size:23px}.settings{gap:10px}.setting-toggle{gap:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


.lesson-picker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;color:var(--teal)}.lesson-picker select{min-width:0;flex:1;max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fffefa;color:var(--ink);font-size:13px}.lesson-downloads{display:flex;gap:20px;flex-wrap:wrap;margin:15px 3px 0;font-size:11px;color:var(--teal)}.lesson-downloads a:hover{text-decoration:underline}.lesson-downloads [hidden]{display:none}@media(max-width:700px){.lesson-picker select{font-size:16px}.lesson-downloads a{padding:6px 0}}
