:root {
  --bg: #0d0f0e;
  --surface: #131614;
  --card: #181a19;
  --border: #232623;
  --border2: #2c302c;
  --text: #e2e8e2;
  --body: #9daa9d;
  --muted: #5a685a;
  --dim: #333a33;
  --git: #f05033;
  --git-dim: rgba(240,80,51,0.1);
  --git-border: rgba(240,80,51,0.22);
  --git-light: rgba(240,80,51,0.06);
  --green: #4caf71;
  --green-dim: rgba(76,175,113,0.1);
  --green-border: rgba(76,175,113,0.22);
  --blue: #4d9fef;
  --blue-dim: rgba(77,159,239,0.1);
  --blue-border: rgba(77,159,239,0.22);
  --yellow: #e5b94b;
  --yellow-dim: rgba(229,185,75,0.1);
  --yellow-border: rgba(229,185,75,0.22);
  --red: #e05a5a;
  --red-dim: rgba(224,90,90,0.1);
  --red-border: rgba(224,90,90,0.22);
  --purple: #a07de8;
  --purple-dim: rgba(160,125,232,0.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}

/* HEADER */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 40px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:30px;height:30px;background:var(--git);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#fff}
.logo-text{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;color:var(--text)}
.logo-text em{color:var(--git);font-style:normal}
.header-right{display:flex;align-items:center;gap:20px}
.prog-wrap{display:flex;align-items:center;gap:10px}
.prog-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.prog-track{width:130px;height:4px;background:var(--border2);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--git),var(--yellow));border-radius:2px;transition:width .5s ease;width:0%}
.prog-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--git);min-width:32px;font-weight:700}
.badge{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;background:var(--git-dim);color:var(--git);border:1px solid var(--git-border);letter-spacing:.04em}

/* LAYOUT */
.shell{display:flex;min-height:calc(100vh - 58px)}

/* SIDEBAR */
.sidebar{width:256px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface);padding:20px 0;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto}
.sb-section{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 18px;margin:20px 0 6px}
.sb-section:first-child{margin-top:0}
.nav-btn{display:flex;align-items:center;gap:9px;padding:8px 18px;width:100%;border:none;background:none;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;color:var(--muted);text-align:left;transition:all .12s}
.nav-btn:hover{color:var(--text);background:rgba(255,255,255,.03)}
.nav-btn.active{color:var(--git);background:var(--git-dim);border-right:2px solid var(--git);font-weight:500}
.nav-btn.done{color:var(--green)}
.nav-btn.done::after{content:'✓';margin-left:auto;font-size:11px;color:var(--green)}
.nav-num{width:20px;height:20px;border-radius:4px;font-size:10px;font-weight:700;background:var(--border2);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.nav-btn.active .nav-num{background:var(--git);color:#fff}
.nav-btn.done .nav-num{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border)}

/* MAIN */
.main{flex:1;min-width:0;padding:48px 60px 80px}

/* LESSON */
.lesson{display:none}
.lesson.active{display:block;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lesson-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow-num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--git);letter-spacing:.06em}
.eyebrow-dot{width:3px;height:3px;background:var(--muted);border-radius:50%}
.eyebrow-cat{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.lesson h2{font-family:'JetBrains Mono',monospace;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:700;color:var(--text);line-height:1.2;margin-bottom:14px;letter-spacing:-.02em}
.lesson h2 em{color:var(--git);font-style:normal}
.lesson-intro{font-size:.95rem;color:var(--body);max-width:640px;line-height:1.8;margin-bottom:36px;padding-left:14px;border-left:2px solid var(--git)}

/* PROSE */
.prose{max-width:760px}
.prose p{font-size:.93rem;color:var(--body);line-height:1.85;margin-bottom:16px}
.prose h3{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--text);margin:30px 0 12px;letter-spacing:-.01em}
.prose ul,.prose ol{padding-left:20px;margin-bottom:16px}
.prose li{font-size:.91rem;color:var(--body);margin-bottom:7px;line-height:1.75}
.prose strong{color:var(--text);font-weight:600}
.prose code{font-family:'JetBrains Mono',monospace;font-size:.82em;background:var(--border);color:var(--git);padding:1px 6px;border-radius:3px;font-weight:500}

/* TERMINAL BLOCK */
.term-wrap{margin:20px 0;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.term-top{background:#0a0c0b;display:flex;align-items:center;justify-content:space-between;padding:9px 16px}
.term-dots{display:flex;gap:6px}
.term-dot{width:10px;height:10px;border-radius:50%}
.term-dot.r{background:#ff5f57}
.term-dot.y{background:#febc2e}
.term-dot.g{background:#28c840}
.term-title{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.term-pre{background:#060807;padding:20px 22px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.83rem;line-height:2;margin:0}
.prompt{color:var(--git);font-weight:700}
.cmd{color:#e2e8e2}
.out{color:var(--body)}
.out-g{color:var(--green)}
.out-y{color:var(--yellow)}
.out-r{color:var(--red)}
.out-b{color:var(--blue)}
.cmt{color:var(--muted);font-style:italic}
.branch{color:var(--purple)}

/* CALLOUT */
.callout{display:flex;gap:14px;padding:15px 18px;border-radius:7px;margin:20px 0;font-size:.91rem;line-height:1.75;max-width:760px}
.callout-ico{font-size:17px;flex-shrink:0;margin-top:1px}
.callout-body{flex:1}
.callout-body strong{display:block;font-size:.88rem;margin-bottom:4px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
.callout-body p{color:#6a7a6a;margin:0;font-size:.87rem}
.callout.tip{background:var(--blue-dim);border:1px solid var(--blue-border)}
.callout.tip strong{color:var(--blue)}
.callout.warn{background:var(--yellow-dim);border:1px solid var(--yellow-border)}
.callout.warn strong{color:var(--yellow)}
.callout.good{background:var(--green-dim);border:1px solid var(--green-border)}
.callout.good strong{color:var(--green)}
.callout.danger{background:var(--red-dim);border:1px solid var(--red-border)}
.callout.danger strong{color:var(--red)}

/* COMMAND REFERENCE TABLE */
.cmd-table{width:100%;max-width:760px;border-collapse:collapse;margin:16px 0;font-size:.87rem}
.cmd-table th{text-align:left;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border2);background:var(--surface)}
.cmd-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.cmd-table td:first-child{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--git);font-weight:500;white-space:nowrap}
.cmd-table td:last-child{color:var(--body)}
.cmd-table tr:last-child td{border-bottom:none}
.cmd-table tr:hover td{background:rgba(240,80,51,.04)}

/* QUIZ */
.quiz{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:24px;margin:32px 0;max-width:760px}
.quiz-label{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--git);margin-bottom:12px}
.quiz-q{font-size:.94rem;font-weight:600;color:var(--text);margin-bottom:18px;line-height:1.55}
.quiz-opts{display:flex;flex-direction:column;gap:8px}
.quiz-opt{background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:10px 14px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.88rem;color:var(--muted);text-align:left;transition:all .12s}
.quiz-opt:hover:not(:disabled){border-color:var(--git);color:var(--text);background:var(--git-light)}
.quiz-opt.correct{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.quiz-opt.wrong{border-color:var(--red);color:var(--red);background:var(--red-dim)}
.quiz-opt:disabled{cursor:default}
.quiz-fb{margin-top:14px;padding:10px 14px;border-radius:5px;font-size:.87rem;font-weight:600;font-family:'JetBrains Mono',monospace;display:none}
.quiz-fb.show{display:block}
.quiz-fb.ok{background:var(--green-dim);color:var(--green);border:1px solid var(--green-border)}
.quiz-fb.bad{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border)}

/* CHALLENGE */
.challenge{background:var(--git-light);border:1px solid var(--git-border);border-radius:9px;padding:22px;margin:28px 0;max-width:760px;position:relative;overflow:hidden}
.challenge::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--git)}
.ch-label{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--git);margin-bottom:10px}
.challenge h4{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.challenge p{font-size:.89rem;color:var(--body);line-height:1.75;margin-bottom:8px}
.challenge ul{padding-left:16px}
.challenge li{font-size:.87rem;color:var(--body);margin-bottom:5px;line-height:1.65}
.challenge code{font-family:'JetBrains Mono',monospace;font-size:.82em;color:var(--git)}

/* STEP LIST */
.steps{display:flex;flex-direction:column;gap:0;margin:20px 0;max-width:760px}
.step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--git);color:#fff;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-body h4{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:4px}
.step-body p{font-size:.86rem;color:var(--body);line-height:1.65;margin:0}
.step-body code{font-family:'JetBrains Mono',monospace;font-size:.82em;color:var(--git)}

/* NAV BUTTONS */
.lesson-nav{display:flex;justify-content:space-between;align-items:center;margin-top:52px;padding-top:24px;border-top:1px solid var(--border);max-width:760px}
.btn{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;padding:10px 20px;border-radius:5px;cursor:pointer;border:none;transition:all .15s;letter-spacing:.03em}
.btn-next{background:var(--git);color:#fff}
.btn-next:hover:not(:disabled){background:#d44020;transform:translateY(-1px)}
.btn-prev{background:var(--card);color:var(--muted);border:1px solid var(--border2)}
.btn-prev:hover{color:var(--text);border-color:var(--git)}
.btn:disabled{opacity:.3;cursor:not-allowed;transform:none!important}

/* INLINE DIFF */
.diff{background:#060807;border:1px solid var(--border);border-radius:7px;padding:16px 20px;font-family:'JetBrains Mono',monospace;font-size:.82rem;line-height:1.9;margin:16px 0;max-width:760px;overflow-x:auto}
.diff-add{color:var(--green);display:block}
.diff-del{color:var(--red);display:block}
.diff-ctx{color:var(--muted);display:block}
.diff-hunk{color:var(--blue);display:block;margin:6px 0}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

@media(max-width:860px){.sidebar{display:none}.main{padding:28px 20px 60px}header{padding:0 16px}}
/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    .shell, .layout { 
        flex-direction: column !important; 
    }
    .sidebar { 
        width: 100% !important; 
        position: static !important;
        margin-bottom: 20px;
    }
    .main { 
        width: 100% !important; 
        padding: 15px !important;
    }
    .lesson-nav { 
        flex-direction: column; 
        gap: 10px; 
    }
    button, .nav-btn, .btn { 
        min-height: 44px !important; 
        padding: 12px !important;
    }
}