*{box-sizing:border-box}html,body,#root{color:#e8e8e8;background:#111;height:100%;margin:0;font-family:SF Mono,ui-monospace,Menlo,monospace}.studio{grid-template-columns:250px minmax(0,1fr) minmax(0,46%);height:100vh;display:grid}.studio>*{min-width:0;min-height:0}.outline{background:#0b0e14;border-right:1px solid #2a2a2a;padding:16px 12px 32px;overflow-y:auto}.brand{border-bottom:1px solid #2a2a2a;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding:4px 6px 14px;display:flex}.brandName{color:#ffd60a;font-size:14px;font-weight:700}.progress{color:#777;font-size:11px}.chapter{margin-bottom:20px}.chapterTitle{color:#ddd;padding:0 6px;font-size:12px;font-weight:700}.chapterIntro{color:#777;padding:4px 6px 8px;font-size:11px;line-height:1.6}.lessonLink{width:100%;font:inherit;text-align:left;color:#999;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;margin:2px 0;padding:7px 8px;font-size:12px;display:flex}.lessonLink:hover{color:#eee;background:#1a1f2b}.lessonLink.active{color:#ffd60a;background:#1c2333}.lessonLink .check{color:#6ee7a0;flex-shrink:0;width:14px}.lessonLink.active .check,.lessonLink .check{font-size:11px}.centerPane{background:#0d1117;border-right:1px solid #2a2a2a;flex-direction:column;display:flex}.lecture{color:#ccc;border-bottom:1px solid #2a2a2a;flex:0 0 44%;padding:20px 24px 24px;font-size:13px;line-height:1.9;overflow-y:auto}.lessonHead{align-items:baseline;gap:10px;display:flex}.lessonId{color:#0d1117;background:#ffd60a;border-radius:4px;padding:2px 7px;font-size:12px;font-weight:700}.lecture h2{color:#f2f2f2;margin:0;font-size:17px}.goals{color:#9db2ce;background:#131a26;border:1px solid #22304a;border-radius:8px;margin:10px 0 16px;padding:10px 14px 10px 30px;font-size:12px}.goals li{margin:2px 0}.lecture p{margin:12px 0}.lecture code{color:#ffd60a;background:#232a36;border-radius:4px;padding:1px 5px;font-family:inherit;font-size:12px}.lectureCode{color:#d6e2f0;background:#10161f;border:1px solid #263142;border-radius:8px;margin:12px 0;padding:12px 16px;font-size:12px;line-height:1.8;overflow-x:auto}.lecture .tip{color:#b8c7de;background:#14202e;border-left:3px solid #4a9eff;border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px}.lecture .key{color:#ffe9a8;background:#241f10;border-left:3px solid #ffd60a;border-radius:0 8px 8px 0;padding:10px 14px;font-size:12.5px}.nextBtn{font:inherit;color:#0d1117;cursor:pointer;background:#ffd60a;border:0;border-radius:8px;margin-top:16px;padding:9px 18px;font-size:13px;font-weight:700}.nextBtn:hover{background:#ffe14d}.codePane{flex-direction:column;flex:1;min-height:0;display:flex}.tabs{border-bottom:1px solid #2a2a2a;align-items:stretch;display:flex}.tab{font:inherit;color:#888;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-right:1px solid #2a2a2a;padding:9px 16px;font-size:12px}.tab:hover{color:#ddd}.tab.active{color:#ffd60a;background:#161b22}.tabActions{align-items:center;margin-left:auto;padding:0 10px;display:flex}.miniBtn{font:inherit;color:#bbb;cursor:pointer;white-space:nowrap;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:4px 10px;font-size:11px}.miniBtn:hover{color:#fff;background:#3a3a3a}.editor{flex:1;min-height:0}.editor .cm-editor{height:100%;font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:13px}.editor .cm-scroller{line-height:1.7;overflow:auto}.stagePane{padding:20px;overflow-y:auto}.stage canvas{aspect-ratio:1;background:#000;border-radius:8px;width:100%;max-width:560px;height:auto;display:block;box-shadow:0 12px 48px #0009}.transport{align-items:center;gap:8px;margin-top:14px;display:flex}.transport button{width:40px;font:inherit;color:#e8e8e8;cursor:pointer;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:6px 0;font-size:14px}.transport button:hover{background:#3a3a3a}.transport select{font:inherit;color:#e8e8e8;cursor:pointer;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:6px 8px;font-size:12px}.audioBtn{font-weight:700;width:auto!important;padding:6px 16px!important;font-size:13px!important}.audioBtn.on{color:#0d1117;background:#ffd60a;border-color:#ffd60a}.audioBtn.on:hover{background:#ffe14d}.toolbar{max-width:560px;margin-top:16px}.slider{margin-bottom:12px;font-size:12px;display:block}.slider span{color:#bbb;margin-bottom:4px;display:block}.slider b{color:#fff}.slider input{accent-color:#ffd60a;width:100%}.checkbox{color:#bbb;cursor:pointer;align-items:center;gap:8px;margin-top:14px;font-size:12px;display:flex}.checkbox input{accent-color:#ffd60a}.error{color:#ff6b63;white-space:pre-wrap;background:#2a1515;border:1px solid #5a2a2a;border-radius:6px;max-width:560px;margin-top:16px;padding:12px;font-size:12px;line-height:1.6}.exercises{background:#131a26;border:1px solid #22304a;border-radius:10px;max-width:560px;margin-top:24px;padding:14px 16px}.exercises h3{color:#ffd60a;margin:0 0 10px;font-size:13px}.exItem{color:#c4cfdd;cursor:pointer;align-items:flex-start;gap:10px;padding:5px 0;font-size:12.5px;line-height:1.7;display:flex}.exItem input{accent-color:#6ee7a0;margin-top:4px}.exDone{color:#5a6a7a;text-decoration:line-through}