@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600&display=swap";:root{--ink:#17211d;--forest:#163c32;--green:#246b55;--mint:#d9eee5;--paper:#f5f2ea;--line:#d9d8d0;--orange:#e66d3d;--white:#fff;--muted:#68726e}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,Noto Sans SC,sans-serif}button,textarea,select{font:inherit}button{cursor:pointer}nav{color:#fff;z-index:10;background:#10251f;border-bottom:1px solid #315148;align-items:center;height:72px;padding:0 4vw;display:flex;position:sticky;top:0}.brand{color:#fff;background:0 0;border:0;margin-right:6vw;font:700 25px Manrope}.brand span{color:#67bf98}nav>div{gap:30px;display:flex}nav>div button{color:#aebdb7;background:0 0;border:0;padding:25px 0}nav>div button.active{color:#fff;border-bottom:2px solid #71c7a1}.progress{align-items:center;margin-left:auto;gap:12px!important}.progress i{background:#405952;width:90px;height:3px;display:block}.progress b{background:#70c49e;height:100%;display:block}aside{border-right:1px solid var(--line);background:#eae8df;width:270px;padding:38px 18px;position:fixed;top:72px;bottom:0;left:0}aside button{text-align:left;width:100%;color:var(--muted);background:0 0;border:0;border-radius:4px;gap:14px;padding:16px;display:flex}aside button>span{border:1px solid #aeb4af;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}aside button div{flex-direction:column;gap:5px;display:flex}aside small{letter-spacing:1.5px;font-size:10px}aside button.active{color:var(--ink);background:#fff;box-shadow:0 8px 25px #21372d10}aside button.active>span{background:var(--forest);color:#fff}.lesson{max-width:1040px;margin-left:270px;padding:70px 7vw 100px}.lesson-head{border-bottom:1px solid var(--line);justify-content:space-between;padding-bottom:35px;display:flex}.lesson-head span,.kicker{letter-spacing:2px;color:var(--green);font-size:11px;font-weight:600}.lesson-head h1,.syllabus h1,.notebook h1{letter-spacing:-2px;margin:12px 0 6px;font:600 clamp(36px,5vw,62px) Manrope}.lesson-head p{color:var(--muted);font-size:18px}.level{width:105px;height:105px;color:var(--green);border:1px solid #9ab2a8;border-radius:50%;align-content:center;place-items:center;font-weight:600;display:grid}.level small{margin-bottom:5px;font-size:9px}.goal{background:var(--forest);color:#fff;margin:36px 0;padding:25px 30px}.goal small,.finish small{color:#8fceb2;letter-spacing:1.7px}.goal p{margin:8px 0 0;font-size:20px}.block{background:#fff;border:1px solid #e4e1d8;margin:22px 0;padding:35px}.block>header{gap:18px;margin-bottom:28px;display:flex}.block>header>span{color:var(--orange);font:600 13px Manrope}.block h2{margin:0 0 5px;font:600 25px Manrope}.block header p,.shadow p{color:var(--muted);margin:0}textarea{border:1px solid var(--line);resize:vertical;background:#faf9f5;width:100%;min-height:110px;margin-top:18px;padding:16px}.listen{background:var(--orange);color:#fff;border:0;padding:13px 20px}.phrase-player{color:#fff;background:#122b24;padding:28px}.player-top{color:#8db5a5;justify-content:space-between;align-items:center;display:flex}.player-top button{color:#fff;background:0 0;border:0;font-size:18px}.player-top .play{color:#17352b;background:#fff;border-radius:50%;width:44px;height:44px;margin:0 10px}.phrase-player>p{max-width:670px;font:500 25px/1.45 Manrope}.controls{gap:18px;display:flex}.controls label{color:#a8bbb4;font-size:12px}.controls select{color:#fff;background:#29463d;border:0;margin-left:7px;padding:6px}.shadow{padding:25px 0 0}.record{border:1px solid var(--orange);color:var(--orange);background:#fff;padding:11px 17px}.record span{background:var(--orange);border-radius:50%;width:9px;height:9px;margin-right:8px;display:inline-block}.record.active{background:var(--orange);color:#fff}.recorder audio{width:100%;margin-top:15px;display:block}.transcript{background:#f3f1eb;margin-top:12px;padding:15px}.transcript p{margin:5px 0}.notice{color:#866451;font-size:13px}.word-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.word-card{border:1px solid var(--line);min-height:140px;padding:18px;position:relative}.word-card>div{justify-content:space-between;display:flex}.word-card>div button{background:0 0;border:0}.word-card p{margin:12px 0 3px}.word-card small{color:var(--muted)}.save{color:var(--green);background:0 0;border:0;padding:4px;font-size:12px;position:absolute;bottom:12px;left:15px}.save.saved{color:var(--muted)}.prompt{border-left:3px solid var(--orange);padding-left:18px;font:500 24px Manrope}.dialogue{background:var(--mint);padding:25px}.dialogue small{color:var(--green)}.dialogue h3{font:500 22px Manrope}.dialogue button{background:var(--forest);color:#fff;border:0;margin-right:8px;padding:10px 14px}.dialogue+.recorder{margin-top:16px}details{color:var(--green);margin-top:18px}.finish{background:#e6a37f;justify-content:space-between;align-items:center;margin-top:35px;padding:35px;display:flex}.finish h2{margin:7px 0;font:600 25px Manrope}.finish p{margin:0}.finish button{color:#fff;background:#17211d;border:0;padding:14px 22px}.finish button.done{color:var(--green);background:#fff}.source{color:var(--muted);font-size:12px}.source a{color:var(--green)}.video{aspect-ratio:16/9}.video iframe{border:0;width:100%;height:100%}.syllabus,.notebook{max-width:980px;margin:auto;padding:75px 5vw 110px}.lede{max-width:680px;color:var(--muted);font-size:18px;line-height:1.65}.weeks{margin-top:45px}.weeks article{border-top:1px solid var(--line);grid-template-columns:55px 1fr auto;padding:24px 8px;display:grid}.weeks article>span{color:#929b97}.weeks small{letter-spacing:1.5px;color:var(--muted);font-size:9px}.weeks h2{margin:4px 0;font:600 21px Manrope}.weeks p{color:var(--muted);margin:0}.weeks b{letter-spacing:1px;color:#9a9f9d;font-size:10px}.weeks .open-week b{color:var(--green)}.empty{border:1px solid var(--line);text-align:center;color:var(--muted);background:#fff;margin-top:40px;padding:60px}.notebook>h2{margin-top:45px}.review-list article{border:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;margin:10px 0;padding:22px;display:flex}.review-list h3{margin:5px 0;font-size:23px}.review-list p{color:var(--muted);margin:0}.review-list button{border:1px solid var(--green);color:var(--green);background:#fff;margin-left:8px;padding:9px 13px}.review-list button:last-child{background:var(--green);color:#fff}.all-words{flex-wrap:wrap;gap:8px;display:flex}.all-words span{background:var(--mint);padding:7px 12px}footer{color:#9eb1aa;background:#10251f;margin-left:270px;padding:25px 4vw;font-size:12px}footer span{float:right}@media (width<=760px){nav{padding:0 16px}nav>div{gap:12px}nav>div button{font-size:12px}.progress{display:none!important}aside{border:0;width:auto;padding:12px;display:flex;position:static;overflow:auto}aside button{min-width:210px}.lesson{margin:0;padding:35px 16px}.lesson-head{gap:15px}.level{display:none}.word-grid{grid-template-columns:1fr}.finish{flex-direction:column;align-items:flex-start;gap:25px}.syllabus,.notebook{padding:45px 18px}.weeks article{grid-template-columns:38px 1fr}.weeks article>b{display:none}.review-list article{flex-direction:column;align-items:flex-start;gap:20px}footer{margin:0}footer span{float:none;margin-top:5px;display:block}}.full-player{border:1px solid var(--line);background:#faf9f5}.full-player-main{align-items:center;gap:18px;padding:20px;display:flex}.full-play{background:var(--orange);color:#fff;border:0;border-radius:50%;flex:none;width:54px;height:54px;font-size:19px}.timeline{flex:1}.timeline>div{justify-content:space-between;margin-bottom:8px;display:flex}.timeline b{font-size:14px}.timeline span{color:var(--muted);font-size:12px}.timeline input{width:100%;accent-color:var(--orange)}.replay{border:1px solid var(--line);color:var(--ink);background:#fff;padding:10px 13px}.full-options{border-top:1px solid var(--line);align-items:center;gap:20px;padding:12px 20px;display:flex}.full-options label{color:var(--muted);font-size:12px}.full-options select{background:#eceae3;border:0;margin-left:6px;padding:6px}.full-options small{color:var(--muted);margin-left:auto}@media (width<=760px){.full-player-main{flex-wrap:wrap;align-items:flex-start}.timeline{min-width:calc(100% - 80px)}.replay{margin-left:72px}.full-options{flex-direction:column;align-items:flex-start;gap:8px}.full-options small{margin-left:0}}