:root{--bg:#07111d;--sidebar:#0a1624;--panel:#0d1b2a;--panel2:#101f30;--line:#203247;--text:#edf4fb;--muted:#8292a7;--blue:#4f8cff;--cyan:#43c6d9;--green:#44d07b;--orange:#ffb45b;--danger:#ff6868;--font:"Manrope",sans-serif;--mono:"JetBrains Mono",monospace}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;background:radial-gradient(circle at 70% -20%,#12304b 0,transparent 28%),var(--bg);color:var(--text);font:13px/1.45 var(--font);overflow-x:hidden}.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}button,input,textarea{font:inherit}button{color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:linear-gradient(180deg,#0d1b2a,#091522 72%);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20;overflow-y:auto}.brand{height:72px;display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid #17283a;font-size:17px;font-weight:800;letter-spacing:-.4px}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:linear-gradient(135deg,#4f8cff,#4ad0d3);color:#061322;font-weight:900}.brand-dim{color:#75a2ff}.main-nav{padding:17px 11px 5px}.nav-item{width:100%;border:0;background:none;padding:10px 12px;border-radius:8px;display:flex;align-items:center;gap:12px;color:#a7b6c8;cursor:pointer;text-align:left}.nav-item svg,.tabs svg,.panel-title svg,.btn svg,.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.nav-item.active,.nav-item:hover{background:#18283a;color:#fff}.nav-caption{padding:22px 18px 10px;font-size:10px;letter-spacing:1.1px;color:#617187}.course-title{padding:0 18px;display:flex;gap:10px;align-items:center}.course-title>div,.mentor>div{display:flex;flex-direction:column}.course-title small,.mentor small{color:var(--muted);font-size:10px}.course-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#173157;color:#66a0ff;font-size:21px}.course-progress{height:3px;margin:13px 18px 12px;background:#172b40;border-radius:4px}.course-progress i{display:block;width:64%;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:4px}.modules{padding:0 10px 16px}.module{width:100%;border:0;background:none;color:#b5c2d1;display:grid;grid-template-columns:28px 1fr 16px;gap:7px;align-items:center;text-align:left;padding:10px 8px;border-radius:8px;cursor:pointer}.module>span{font:600 11px var(--mono);color:#6c7d93}.module>div{display:flex;flex-direction:column}.module small{font-size:9px;color:#617288;margin-top:2px}.module b{color:#60748b}.module.done b{color:var(--green)}.module.selected{background:#152a41;color:#fff}.module.selected>span{color:#6fa2ff}.module-open{border:1px solid #1c3046;border-radius:10px;background:#0c1a29;margin:2px 0}.lessons{padding:1px 6px 8px 35px}.lesson{width:100%;border:0;background:none;color:#7f90a5;padding:7px 5px;display:flex;gap:9px;text-align:left;font-size:11px;cursor:pointer;border-radius:6px}.lesson i{font-style:normal;width:16px}.lesson.done i{color:var(--green)}.lesson.current{color:#78a8ff;background:#14263a}.sidebar-bottom{margin-top:auto;padding:10px;border-top:1px solid #17283a}.mentor{display:flex;align-items:center;gap:9px;margin:7px 7px 2px;padding-top:10px;border-top:1px solid #17283a}.mentor i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#315378,#15283e);border:1px solid #4a627a;font-weight:700;color:#e7f1fb}.avatar.small{width:32px;height:32px;font-size:10px}.avatar.tiny{width:28px;height:28px;font-size:9px}.app-shell{margin-left:252px;min-height:100vh}.topbar{height:72px;border-bottom:1px solid var(--line);background:rgba(6,15,26,.84);backdrop-filter:blur(18px);display:flex;align-items:center;padding:0 18px 0 25px;gap:30px;position:sticky;top:0;z-index:15}.lesson-heading{min-width:350px}.breadcrumbs{font-size:10px;color:#6f8197;margin-bottom:3px}.breadcrumbs span{padding:0 6px;color:#41566d}.lesson-heading h1{font-size:17px;margin:0;letter-spacing:-.35px}.header-progress{width:195px;margin-left:auto}.header-progress small{font-size:9px;color:#8fa0b4;display:flex;justify-content:space-between}.header-progress small b{color:#e6edf5}.header-progress>div{height:4px;background:#1a2b3d;border-radius:3px;margin-top:8px}.header-progress i{display:block;width:64%;height:100%;border-radius:3px;background:linear-gradient(90deg,#3fd47a,#5da4f9)}.header-actions{display:flex;align-items:center;gap:10px}.btn{border:1px solid #2b3f55;background:#102033;border-radius:8px;padding:9px 13px;display:inline-flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;font-weight:600;font-size:11px}.btn.ghost{background:transparent;color:#bdc9d7}.btn:hover{filter:brightness(1.15)}.icon-btn{width:36px;height:36px;border:0;background:transparent;display:grid;place-items:center;position:relative;cursor:pointer}.notification-dot{position:absolute;right:6px;top:5px;width:6px;height:6px;background:#ff6d6d;border-radius:50%;border:2px solid var(--bg)}.user{display:flex;align-items:center;gap:9px;margin-left:5px}.user>div{display:flex;flex-direction:column;min-width:105px}.user small{font-size:10px;color:var(--muted)}.mobile-menu{display:none;border:0;background:none;font-size:21px}.workspace{display:grid;grid-template-columns:minmax(600px,1fr) 348px;gap:12px;padding:12px;max-width:1580px;margin:auto}.learning-column,.right-rail{display:flex;flex-direction:column;gap:12px;min-width:0}.panel{border:1px solid var(--line);border-radius:10px;background:linear-gradient(145deg,rgba(14,29,45,.97),rgba(9,22,35,.97));box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden}.tabs{height:44px;display:flex;align-items:end;border-bottom:1px solid var(--line);padding-left:12px}.tab{height:44px;border:0;border-bottom:2px solid transparent;background:none;color:#8d9caf;padding:0 14px;cursor:pointer;display:flex;gap:7px;align-items:center;font-weight:600}.tab.active{color:#fff;border-color:var(--blue)}.badge{background:#223348;border-radius:10px;padding:1px 6px;font-size:9px}.expand{margin:auto 10px auto auto;border:0;background:none;color:#91a3b8;font-size:18px}.lesson-content{height:365px;margin:12px;border:1px solid var(--line);border-radius:9px;display:none;grid-template-columns:42% 58%;grid-template-rows:1fr 50px;overflow:hidden;background:radial-gradient(circle at 65% 10%,#1e3b5b 0,transparent 42%),#0c1927}.lesson-content.active{display:grid}.lesson-summary{padding:35px 24px}.eyebrow{font-size:9px;letter-spacing:1.25px;color:#7091b3;font-weight:800}.lesson-summary h2{font-size:23px;line-height:1.25;letter-spacing:-.6px;margin:11px 0 12px}.lesson-summary p{color:#aebbc9;font-size:12px;max-width:360px}.lesson-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.lesson-tags span{background:#13283c;border:1px solid #29415a;border-radius:5px;color:#74b8db;font:9px var(--mono);padding:5px 7px}.code-window{align-self:center;margin:20px 24px 20px 0;height:252px;border:1px solid #293c50;border-radius:8px;overflow:hidden;background:#0b1520;box-shadow:0 18px 35px rgba(0,0,0,.3)}.code-head{height:30px;background:#17283a;display:flex;align-items:center;padding:0 9px;gap:5px}.code-head i{width:7px;height:7px;border-radius:50%;background:#43556a}.code-head i:first-child{background:#ff7b6b}.code-head i:nth-child(2){background:#ffc35c}.code-head i:nth-child(3){background:#48ce80}.code-head span{margin-left:7px;font:9px var(--mono);color:#9cabbc}.code-window pre{margin:0;padding:10px 0;font:9px/1.72 var(--mono);color:#cbd7e5}.code-window pre em{display:inline-block;width:29px;padding-right:8px;text-align:right;color:#435669;font-style:normal;border-right:1px solid #1d2b3b;margin-right:12px}.code-window pre code{font:inherit}.code-window b,.editor b{color:#62a1ff}.code-window s,.editor s{color:#f4aa63;text-decoration:none}.video-controls{grid-column:1/-1;border-top:1px solid #1c3046;display:flex;align-items:center;gap:12px;padding:0 18px;font-size:10px;color:#8fa0b4}.video-controls button{border:0;background:none;color:#d7e0ea;cursor:pointer}.video-controls svg{width:17px;height:17px;fill:none;stroke:currentColor}.timeline{height:3px;background:#29394a;flex:1;position:relative}.timeline i{display:block;width:52%;height:100%;background:var(--blue)}.timeline b{position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:white}.empty-tab{display:none;height:365px;margin:12px;padding:45px;border:1px solid var(--line);border-radius:9px;background:#0c1927}.empty-tab.active{display:block}.empty-tab h3{font-size:21px}.empty-tab p{color:var(--muted);max-width:500px}.lab-bar{height:54px;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 16px;justify-content:space-between}.lab-bar>div{display:flex;align-items:center;gap:8px}.lab-bar strong{font-size:11px}.lab-bar small{color:var(--muted);border-left:1px solid #304154;padding-left:10px}.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 9px var(--green)}.btn.danger{color:#ff8a8a;border-color:#49333b;background:#1e1b25}.tool-panel{min-height:330px}.tool-tabs{align-items:end}.tool-tabs .tab{padding:0 16px}.connection{margin:0 14px 14px auto;color:#788ba0;font-size:9px}.connection i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px}.tab-content{display:none}.terminal.tab-content.active{display:block}.terminal{min-height:310px;background:linear-gradient(120deg,#08141e,#0a1924);padding:14px 16px 12px;font:10px/1.62 var(--mono);color:#c5d1de;overflow:auto}.terminal p{margin:0;white-space:pre-wrap}.prompt{color:#60d17b}.path{color:#62a8ff}.success,.ok{color:#54d477}.terminal-line{display:flex;gap:7px}.terminal-line label{white-space:nowrap}.terminal-line input{flex:1;background:none;border:0;outline:none;color:#dce6ef;font:inherit;caret-color:#fff;min-width:50px}.vscode.active{display:grid;grid-template-columns:180px 1fr;min-height:310px;background:#08131d}.vscode aside{border-right:1px solid var(--line);padding:12px 8px}.vs-title{font-size:9px;color:#8a9bae;margin-bottom:12px}.vscode aside p,.vscode aside button{font:9px var(--mono);color:#aebdcd}.vscode aside button{display:block;width:100%;border:0;background:none;text-align:left;padding:5px 7px}.vscode aside button.selected-file{background:#18314a;color:#dce9f7}.editor{overflow:hidden}.editor-tab{height:32px;display:flex;justify-content:space-between;width:180px;padding:9px 10px;background:#122438;color:#b8c5d4;font:9px var(--mono);border-right:1px solid var(--line)}.editor pre{font:10px/1.7 var(--mono);padding:15px;margin:0;color:#c9d5e1}.editor pre i{display:inline-block;width:23px;color:#3e5267;font-style:normal;text-align:right;margin-right:12px}.files-view.active{display:block;min-height:310px;background:#091723}.file-toolbar{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}.file-toolbar strong{margin-right:auto}.file-toolbar button{border:1px solid var(--line);background:#102235;border-radius:6px;color:#a9b9c9;padding:6px 9px}.file-grid{padding:15px;display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:10px}.file-card{border:1px solid var(--line);background:#0d1e2e;border-radius:8px;padding:14px;display:grid;grid-template-columns:25px 1fr;align-items:center}.file-card span{font-size:18px;grid-row:1/3}.file-card strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-card small{font-size:9px;color:var(--muted)}.panel-title{height:39px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11px}.panel-title>div{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;background:#ff595f;border-radius:50%;box-shadow:0 0 9px #ff595f}.live-badge{font:800 8px var(--font);background:#ef4f55;border-radius:4px;padding:3px 6px}.teacher-video{margin:7px;border-radius:8px;height:191px;position:relative;overflow:hidden;background:linear-gradient(135deg,#172b3c 0,#27382e 55%,#10202c);border:1px solid #293e50}.ambient{position:absolute;border-radius:50%;filter:blur(25px);opacity:.5}.ambient.one{width:130px;height:130px;background:#d59a52;left:-30px;top:5px}.ambient.two{width:140px;height:100px;background:#497c69;right:-20px;top:10px}.teacher-figure{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:125px;height:176px}.teacher-head{width:66px;height:75px;border-radius:45% 45% 42% 42%;background:linear-gradient(145deg,#d7a278,#a66e50);margin:auto;position:relative;box-shadow:inset 0 -10px 15px #8e5b44}.teacher-head:before{content:"";position:absolute;inset:-8px 5px 45px;background:#332a26;border-radius:50% 50% 20% 20%}.teacher-head:after{content:"";position:absolute;left:17px;right:17px;bottom:13px;height:11px;border-bottom:3px solid #513829;border-radius:50%}.teacher-head span:before,.teacher-head span:after{content:"";position:absolute;top:31px;width:5px;height:3px;border-radius:50%;background:#342721}.teacher-head span:before{left:17px}.teacher-head span:after{right:17px}.teacher-body{height:110px;margin-top:-4px;border-radius:32px 32px 0 0;background:linear-gradient(100deg,#161b20,#27323b 48%,#11181e);box-shadow:0 0 25px #050b11}.video-label{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;text-shadow:0 1px 3px #000}.video-label strong{font-size:10px}.video-label small{font-size:8px;color:#c4d0db}.live-controls{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgba(0,0,0,.86));height:48px;padding:21px 10px 0;display:flex;align-items:center;gap:8px}.live-controls button{border:0;background:none;color:#fff}.live-controls span{font-size:8px;color:#d5dce3;margin-left:auto}.live-controls i{font-style:normal;font-size:9px;color:var(--green)}.stream-note{height:50px;display:flex;align-items:center;gap:8px;padding:0 10px}.stream-note p{font-size:9px;line-height:1.35;flex:1}.stream-note p strong{font-size:8px;color:#778ba2}.on-air{font-size:8px;color:#70dc95;background:#123226;border:1px solid #24523a;border-radius:5px;padding:4px 6px}.score{color:#ffc26c;font-size:9px}.task-icon{width:18px;height:18px;background:#18412c;color:var(--green);border-radius:5px;display:grid;place-items:center}.task-body{padding:14px 15px}.task-body h3{font-size:14px;line-height:1.35;margin:6px 0}.task-body>p{color:#91a0b1;font-size:10px}.task-body code{color:#64b2d1;font:9px var(--mono)}.checklist{margin:14px 0;display:flex;flex-direction:column;gap:11px}.checklist label{display:grid;grid-template-columns:19px 1fr;gap:9px;cursor:pointer}.checklist input{display:none}.checklist label>i{width:17px;height:17px;border:1px solid #53667a;border-radius:4px;position:relative}.checklist input:checked+i{background:var(--green);border-color:var(--green)}.checklist input:checked+i:after{content:"✓";position:absolute;color:#07150d;font-weight:900;left:3px;top:-1px}.checklist label span{display:flex;flex-direction:column}.checklist b{font-size:10px}.checklist small{font:8px var(--mono);color:#708399;margin-top:1px}.checklist label.checked b{color:#8695a5;text-decoration:line-through}.btn.primary{width:100%;background:linear-gradient(90deg,#3978e7,#4d8af5);border-color:#5b95fa;padding:10px 12px}.btn.primary span{margin-left:auto}.compact-files .panel-title button{border:0;background:none}.compact-files .panel-title svg{width:15px}.path-row{padding:9px 12px;border-bottom:1px solid #1d3044;color:#7f90a5;font:9px var(--mono)}.file-row{display:grid;grid-template-columns:23px 1fr 42px;gap:4px;align-items:center;padding:8px 12px;font-size:9px}.file-row:hover{background:#122438}.file-row small{color:#73859b;text-align:right}.yaml{color:#789bff}.modal-backdrop{position:fixed;inset:0;background:rgba(2,8,14,.72);backdrop-filter:blur(5px);z-index:50;display:none;place-items:center;padding:20px}.modal-backdrop.open{display:grid}.modal{width:min(460px,100%);background:#0d1b2a;border:1px solid #2a4057;border-radius:14px;padding:25px;box-shadow:0 30px 90px #000;position:relative}.modal h2{font-size:22px;margin:7px 0}.modal p{color:var(--muted)}.modal textarea{width:100%;height:120px;resize:vertical;border:1px solid #2a4057;border-radius:8px;background:#07131f;color:#fff;padding:12px;outline:none}.modal textarea:focus{border-color:var(--blue)}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:24px;color:#8495a9}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.modal-actions .btn.primary{width:auto}.toast{position:fixed;right:20px;bottom:20px;background:#102b21;border:1px solid #276242;border-radius:9px;padding:11px 15px;display:flex;gap:9px;align-items:center;z-index:60;transform:translateY(90px);opacity:0;transition:.3s;box-shadow:0 15px 40px #000}.toast.show{transform:none;opacity:1}.toast i{width:19px;height:19px;border-radius:50%;background:var(--green);color:#082013;display:grid;place-items:center;font-style:normal;font-weight:900}
@media(max-width:1180px){.sidebar{width:220px}.app-shell{margin-left:220px}.workspace{grid-template-columns:minmax(560px,1fr) 310px}.header-progress{display:none}.user>div{display:none}.lesson-content{grid-template-columns:45% 55%}.lesson-summary{padding:28px 20px}.lesson-summary h2{font-size:20px}.right-rail{font-size:11px}}
@media(max-width:960px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none;box-shadow:25px 0 60px #000}.app-shell{margin-left:0}.mobile-menu{display:block}.workspace{grid-template-columns:1fr}.right-rail{display:grid;grid-template-columns:1fr 1fr}.compact-files{grid-column:1/-1}.lesson-heading{min-width:0}.header-actions .btn span{display:none}.header-actions .btn{padding:9px}.teacher-video{height:215px}}
@media(max-width:640px){.topbar{height:64px;padding:0 10px;gap:9px}.lesson-heading h1{font-size:13px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumbs{display:none}.header-actions{margin-left:auto}.user{display:none}.workspace{padding:8px}.lesson-content{height:auto;grid-template-columns:1fr;grid-template-rows:auto auto 48px}.lesson-summary{padding:24px 18px}.lesson-summary h2{font-size:20px}.code-window{margin:0 14px 18px}.right-rail{display:flex}.lab-bar small{display:none}.tool-tabs .tab{font-size:0;padding:0 12px}.tool-tabs svg{width:18px;height:18px}.connection{font-size:0}.connection i{margin-right:0}.file-grid{grid-template-columns:1fr 1fr}.vscode.active{grid-template-columns:120px 1fr}.terminal{font-size:9px}.terminal-line label{font-size:0}.terminal-line label span{font-size:9px}.modal{padding:20px}}
.runtime-chip{border:1px solid #27435b;background:#0e2030;color:#9eb0c4;border-radius:999px;padding:6px 9px;display:flex;align-items:center;gap:6px;font-size:9px;white-space:nowrap;cursor:default}.runtime-chip i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.runtime-chip.loading i{background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse 1.2s infinite}.runtime-chip.error i{background:var(--danger);box-shadow:0 0 8px var(--danger)}.connection{border:0;background:none;cursor:pointer;padding:0}.connection:hover{color:#a9bdd2}.on-air{cursor:pointer}.on-air.connected{color:#76d99a}.teacher-video .remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}.teacher-video.streaming .teacher-figure,.teacher-video.streaming .ambient{display:none}.teacher-video.streaming .video-label,.teacher-video.streaming .live-controls{z-index:3}@keyframes pulse{50%{opacity:.35}}@media(max-width:1180px){.runtime-chip span{display:none}}@media(max-width:640px){.runtime-chip{display:none}}