@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');
[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#f7f5f0;color:#1c2a25;font-family:'DM Sans',sans-serif}button{cursor:pointer;border:0;font:inherit;font-weight:700}.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 75% 20%,#c9ded1 0,transparent 25%),#183b32;padding:24px}.auth section{width:min(520px,100%);color:#f5f2e9}.auth h1,h1,h2{font-family:'Playfair Display',serif}.auth h1{font-size:clamp(38px,8vw,56px);line-height:1.05;margin:12px 0}.auth form{display:grid;gap:12px;margin-top:30px}.auth input,textarea{border:1px solid #d5d1c7;border-radius:8px;padding:14px;font:inherit}.auth button,#continue,#complete,#saveExercise{padding:14px 18px;background:#e8b85c;color:#1c2a25;border-radius:8px}.auth small{margin-top:8px}.auth a{color:#e8b85c}#authError{color:#ffb0a0}#app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;padding-bottom:100px}aside{background:#183b32;color:#f5f2e9;padding:32px 22px;position:sticky;top:0;height:100vh}.brand{font-family:'DM Mono';line-height:.85;font-size:20px;letter-spacing:2px;margin-bottom:44px}.brand b{font-size:34px}nav{display:grid;gap:7px;overflow:auto;max-height:78vh}nav button{background:transparent;color:#bdd0c7;padding:12px;text-align:left;border-radius:7px;font-size:13px}nav button.active,nav button:hover{background:#295145;color:#fff}nav button.done{color:#e8b85c}.logout{position:absolute;bottom:25px;background:none;color:#bdd0c7}.workspace{padding:45px;max-width:1300px;margin:auto;width:100%}header{display:flex;justify-content:space-between;align-items:center}.eyebrow{letter-spacing:1.5px;font-family:'DM Mono';font-size:11px;color:#6a8278;margin:0}h1{margin:5px 0;font-size:38px}.streak{text-align:right;background:#fff;border-radius:10px;padding:10px 16px}.streak b{font-size:25px;display:block}.streak small{color:#6a8278}.hero{margin:34px 0;min-height:180px;padding:34px;background:#c9ded1;border-radius:16px;display:flex;align-items:center}.hero h2{font-size:30px;margin:10px 0}.content{display:grid;grid-template-columns:1.6fr .8fr;gap:24px}.player,.exercise{background:#fff;border-radius:12px;overflow:hidden}.player iframe{width:100%;aspect-ratio:16/9;border:0;background:#101010;display:block}.player #empty{min-height:360px;display:grid;place-items:center;color:#6a8278}.lessonActions{padding:18px;display:flex;justify-content:space-between;align-items:center}.lessonActions small{display:block;color:#6a8278;margin-top:5px}.exercise{padding:25px}.exercise h3{font-size:23px;margin:8px 0}.exercise p{color:#5d7068;line-height:1.5}.exercise a{display:block;color:#246149;font-weight:700;margin:15px 0}.exercise textarea{width:100%;height:130px;margin-top:15px;resize:vertical}.exercise button{margin-top:10px;width:100%}#saved{display:block;color:#246149;margin-top:10px}.progressBadge{position:fixed;right:22px;bottom:20px;z-index:50;width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#ddecdf;border:7px solid #f7f5f0;border-top-color:#2f6956;box-shadow:0 12px 30px #10251e55}.progressBadge b{font-size:22px}.progressBadge span{font:8px 'DM Mono';letter-spacing:.8px;color:#2f6956;margin-top:2px}
@media(max-width:850px){#app{display:block}aside{padding:16px 18px;height:auto;position:relative}.brand{margin-bottom:14px}nav{display:flex;overflow-x:auto;max-height:none;gap:6px;padding-right:80px}nav .eyebrow{display:none}nav button{white-space:nowrap}.logout{position:absolute;right:16px;top:18px;bottom:auto}.workspace{padding:22px 16px}.hero{padding:22px 18px;margin:22px 0;min-height:160px}.hero h2{font-size:25px}.content{grid-template-columns:1fr;gap:16px}.lessonActions{flex-direction:column;align-items:stretch;gap:12px}.lessonActions button{width:100%}.exercise{padding:20px}.player #empty{min-height:220px}textarea{font-size:16px}.progressBadge{right:12px;bottom:12px;width:78px;height:78px}.progressBadge b{font-size:18px}.progressBadge span{font-size:7px}}
.player #videoWrap,.player #videoWrap iframe{width:100%;aspect-ratio:16/9;border:0;background:#101010;display:block}.exercise .exerciseButton{padding:13px 15px;background:#2f6956;color:#fff;border-radius:8px;text-align:center;text-decoration:none}.exercise .exerciseButton:hover{background:#214c3e}
.workspace{max-width:1500px;padding:32px 40px}.content{grid-template-columns:1fr}.player{width:100%}.exercise{width:100%;padding:32px}.lessonActions{padding:20px 24px}.lessonActions #complete:disabled{opacity:1;cursor:default}.lessonActions #complete.waiting{background:#e7ece9;color:#35594d}.lessonActions #complete.completed{background:#d9efdf;color:#185d32}nav button:disabled{cursor:not-allowed;opacity:.55}nav button.locked{color:#8ca098}.exercise h3{font-size:28px}.exercise #exerciseStatus{max-width:760px}.exercise fieldset{border:1px solid #d8dedb;border-radius:12px;padding:20px;margin:18px 0;background:#fbfcfb}.exercise legend{font-weight:700;font-size:17px;padding:0 8px}.exercise legend>span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ddecdf;color:#246149;margin-right:10px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}.options label{display:flex;align-items:center;gap:10px;border:1px solid #d8dedb;border-radius:9px;padding:13px 14px;cursor:pointer;background:#fff}.options label:hover{border-color:#2f6956;background:#f1f7f3}.options input{accent-color:#2f6956}.exercise #submitQuiz{width:auto;min-width:220px;padding:14px 22px;background:#e8b85c;border-radius:8px}.exercise #quizResult{margin-top:16px;padding:14px 16px;border-radius:9px;font-weight:700}.exercise #quizResult:empty{display:none}.exercise #quizResult.success{background:#d9efdf;color:#185d32}.exercise #quizResult.error{background:#fde3dc;color:#8a2f1e}.exercise #quizResult.lockedMessage{background:#edf0ee;color:#4f625b}
@media(max-width:850px){.workspace{padding:18px 12px}.exercise{padding:20px 16px}.options{grid-template-columns:1fr}.exercise fieldset{padding:15px}.exercise #submitQuiz{width:100%}}
.courseTrail{display:grid;grid-template-columns:minmax(150px,auto) 1fr minmax(150px,auto);align-items:center;gap:16px;margin:0 0 18px;padding:14px 16px;background:#fff;border:1px solid #dce3df;border-radius:12px;box-shadow:0 8px 24px #183b3212}.courseTrail>div{text-align:center;display:grid;gap:3px}.courseTrail small{font:10px 'DM Mono';letter-spacing:1.2px;color:#6a8278}.courseTrail strong{font-size:16px}.courseTrail span{min-height:17px;font-size:12px;font-weight:700;color:#246149}.courseTrail button{padding:13px 15px;border-radius:8px;background:#183b32;color:#fff}.courseTrail button:last-child{background:#e8b85c;color:#1c2a25}.courseTrail button:disabled{background:#e7ebe9;color:#829089;cursor:not-allowed}
@media(max-width:850px){.courseTrail{position:sticky;top:8px;z-index:35;grid-template-columns:1fr 1fr;gap:8px;padding:10px;margin-bottom:12px}.courseTrail>div{grid-column:1/-1;grid-row:1;text-align:left;padding:2px 4px}.courseTrail button{font-size:13px;padding:12px 8px}.courseTrail #previousLesson{grid-column:1}.courseTrail #nextLesson{grid-column:2}.courseTrail strong{font-size:15px}.courseTrail span{font-size:11px}}
.workspace{max-width:none!important;padding:28px 32px!important}.content{grid-template-columns:minmax(0,1fr)!important}.player{width:100%!important}.player #videoWrap,.player #videoWrap iframe{width:100%!important;max-width:none!important}
@media(max-width:850px){.workspace{padding:18px 12px!important}}
body.lessonMode{background:#050706}.lessonMode .workspace{padding:0!important;margin:0!important}.lessonMode .workspace>header,.lessonMode .hero{display:none}.lessonMode .courseTrail{position:sticky;top:0;z-index:45;margin:0;border:0;border-radius:0;padding:22px 32px 25px;background:linear-gradient(110deg,#b9d9cd,#d9eadf);box-shadow:0 10px 32px #0000002b;color:#16362d}.lessonMode .courseTrail::before,.lessonMode .courseTrail::after{content:'';position:absolute;left:0;bottom:0;height:6px}.lessonMode .courseTrail::before{width:100%;background:#8db7a8}.lessonMode .courseTrail::after{width:var(--course-progress,0%);background:#e8b85c;transition:width .35s ease}.lessonMode .courseTrail small{color:#456b5d}.lessonMode .courseTrail strong{font-family:'Playfair Display',serif;font-size:24px}.lessonMode .courseTrail button{border:2px solid #183b32;background:transparent;color:#183b32}.lessonMode .courseTrail button:last-child{background:#183b32;color:#fff}.lessonMode .courseTrail button:disabled{border-color:#90aa9f;background:#c7d9d2;color:#789086}.lessonMode .content{display:block!important;background:#050706}.lessonMode .player{border-radius:0;background:#050706;overflow:visible}.lessonMode .player #videoWrap{max-width:1600px!important;margin:0 auto;background:#000}.lessonMode .lessonActions{max-width:1600px;margin:0 auto;background:#0f1b17;color:#f5f2e9;padding:20px 28px}.lessonMode .lessonActions small{color:#9fb7ad}.lessonMode .exercise{border-radius:0;background:#f7f5f0;padding:38px max(32px,calc((100% - 1500px)/2));min-height:260px}.lessonMode .progressBadge{border-color:#152e26;border-top-color:#e8b85c}
@media(max-width:850px){.lessonMode .courseTrail{top:0;padding:12px 10px 16px}.lessonMode .courseTrail strong{font-size:17px}.lessonMode .lessonActions{padding:16px}.lessonMode .exercise{padding:26px 16px}.lessonMode .player #videoWrap{width:100%!important}}
.lessonMode .player #videoWrap{position:relative;height:auto!important;aspect-ratio:16/9!important;overflow:hidden}.lessonMode .player #videoWrap iframe{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important}