@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#162725;--muted:#667771;--teal:#167c73;--teal-dark:#106258;--soft:#ecf5f2;--stroke:#e0e7e3;--bg:#f7f8f7;--red:#9b4c42;--shadow:0 16px 45px rgba(36,63,57,.04)}*{box-sizing:border-box}body{margin:0;font:15px/1.6 "DM Sans",system-ui,sans-serif;color:var(--ink);background:var(--bg)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #8ac4b9;outline-offset:4px}.shell{max-width:1440px;min-height:100vh;padding:0 clamp(18px,4vw,68px);margin:auto;display:flex;flex-direction:column}.topbar{height:84px;display:flex;align-items:center;border-bottom:1px solid var(--stroke);gap:16px}.brand{font:800 26px/1 Manrope,sans-serif;letter-spacing:-1.6px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}.brand-dot{width:25px;height:25px;border-radius:12px 12px 10px 12px;background:radial-gradient(circle at 30% 28%,#65cbb9,var(--teal) 70%);display:inline-block;transform:rotate(-12deg)}.top-status{color:#6a7775;margin:auto;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.02em}.status-dot{width:7px;height:7px;background:#49a893;border-radius:50%}.reset-btn{border:1px solid var(--stroke);padding:9px 15px;border-radius:24px;background:#fff;color:var(--muted);font-size:12px;font-weight:700}.reset-btn:hover{color:var(--teal);border-color:#9ac9bd}.workspace{flex:1;max-width:950px;width:100%;margin:46px auto 40px}.lesson-head{text-align:center}.overline{font:700 11px/1.4 Manrope,sans-serif;color:var(--teal);letter-spacing:2.3px}.divider{padding:0 10px;color:#bfceca}h1{font:800 clamp(24px,3.4vw,39px)/1.18 Manrope,sans-serif;letter-spacing:-1.2px;margin:14px auto 12px;max-width:690px}.subheading{color:var(--muted);margin:0 auto;max-width:500px}.progress-wrap{display:flex;align-items:center;gap:14px;max-width:520px;margin:34px auto 28px}.progress-track{height:5px;width:100%;background:#dfe9e5;border-radius:100px;overflow:hidden}.progress-fill{background:var(--teal);height:100%;width:0;transition:width .35s ease}#step-counter{font:700 11px/1 Manrope,sans-serif;color:#798882;min-width:43px}.studio{background:#fff;border:1px solid #e8ecea;border-radius:28px;min-height:440px;box-shadow:var(--shadow);padding:30px 40px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden}.studio:after{content:"";position:absolute;right:-150px;top:-160px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,#eff9f5,transparent 70%);pointer-events:none}.teacher-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}.orb{width:62px;height:62px;flex-shrink:0;display:grid;place-items:center}.orb-core{width:54px;height:54px;border-radius:43% 51% 46% 53%;background:radial-gradient(circle at 31% 29%,#b1f3dd 3%,#58c2a8 37%,#198f7d 70%,#10675d 100%);box-shadow:inset -8px -7px 15px rgba(7,64,53,.14),0 13px 22px rgba(18,125,108,.13);animation:float 5s ease-in-out infinite;transform:rotate(10deg)}.teacher-label{font:800 10px/1.3 Manrope,sans-serif;letter-spacing:1.45px;color:var(--teal)}.teacher-status{font-size:13px;color:#7d8985;margin-top:5px}.stage-content{flex:1;width:100%;padding:30px 0 24px;position:relative;z-index:1;animation:enter .22s ease both}.eyebrow{font:800 11px/1.4 Manrope,sans-serif;letter-spacing:2px;color:#9aa9a4;margin-bottom:14px;text-transform:uppercase}.scene-title{font:800 clamp(25px,3.2vw,36px)/1.32 Manrope,sans-serif;letter-spacing:-.8px;max-width:740px;margin:0 0 12px}.scene-body{color:#5e706b;font-size:16px;max-width:720px;margin:8px 0 26px}.example-list{display:grid;gap:12px;margin:26px 0 12px}.example{background:#f8fbf9;border:1px solid #e4eee9;border-radius:13px;padding:16px 20px;font:700 clamp(17px,2vw,21px)/1.4 Manrope,sans-serif;letter-spacing:-.4px}.example strong,.emph{color:var(--teal)}.practice-prompt{font:700 23px/1.4 Manrope,sans-serif;letter-spacing:-.6px;margin:0 0 23px}.answers{display:grid;gap:11px;max-width:620px}.answer{padding:16px 19px;text-align:left;background:#fff;border:1.5px solid #dfe9e4;border-radius:14px;color:var(--ink);font-weight:600;transition:border .15s ease,background .15s ease}.answer:hover:not(:disabled){border-color:#95c6b5;background:#f9fdfb}.answer[aria-pressed="true"]{border-color:var(--teal);background:var(--soft);box-shadow:inset 0 0 0 1px var(--teal)}.text-answer{width:min(100%,560px);border:1.5px solid #dfe9e4;border-radius:14px;padding:15px 18px;font-size:18px;font-weight:600;outline:none}.text-answer:focus{border-color:var(--teal)}.subtle{font-size:13px;color:#82938c;margin-top:12px}.feedback{margin-top:20px;padding:16px 19px;border-radius:14px;background:#eef8f4;border:1px solid #cce7d9;font-size:14px;font-weight:600;max-width:640px}.feedback.incorrect{background:#fff4f0;border-color:#eed5ce;color:var(--red)}.hint{display:block;border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--teal-dark);font-weight:700;font-size:13px;padding:10px 0;margin-top:10px}.hint-copy{padding:10px 0;color:#61756e;font-size:13px}.stage-footer{position:relative;z-index:1;padding-top:14px;border-top:1px solid #edf1ef;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.footer-note{font-size:11px;color:#85928f;display:flex;align-items:center;gap:7px}.privacy-dot{display:inline-block;width:6px;height:6px;background:#e1af57;border-radius:50%}#status-text{font-size:11px;color:var(--teal);font-weight:700}.controls{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}.main-button{min-height:51px;min-width:205px;border:none;border-radius:13px;background:var(--teal);color:#fff;font-weight:700;padding:12px 25px;box-shadow:0 9px 17px rgba(21,117,107,.12)}.main-button:hover:not(:disabled){background:var(--teal-dark)}.secondary-button{min-height:51px;background:transparent;border:1px solid var(--stroke);border-radius:13px;padding:12px 22px;color:var(--muted);font-weight:700}.secondary-button:hover{border-color:var(--teal)}.site-footer{min-height:62px;border-top:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#87948e;font-size:11px}.empty{padding:25px;background:#fff8ef;border-radius:14px;color:#8a6343}.end-mark{font-size:40px;margin:0 0 12px;color:var(--teal)}.recap{font-weight:600;color:#46635b;padding:13px 0}.loading{color:var(--muted)}@keyframes float{50%{transform:translateY(-5px) rotate(0)}}@keyframes enter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.shell{padding:0 16px}.topbar{height:70px}.brand{font-size:24px}.top-status{display:none}.reset-btn{margin-left:auto}.workspace{margin:30px auto 25px}h1{font-size:25px}.progress-wrap{margin:26px auto 19px}.studio{padding:22px 19px 17px;min-height:490px;border-radius:21px}.teacher-row{gap:10px}.orb{width:52px;height:52px}.orb-core{width:47px;height:47px}.stage-content{padding-top:24px}.scene-title{font-size:25px}.scene-body{font-size:15px}.controls{flex-direction:column}.controls button{width:100%}.site-footer{font-size:10px}.site-footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}