:root{--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--surface: rgba(255, 255, 255, .95);--surface-solid: #ffffff;--surface-subtle: #f7fafc;--surface-hover: #edf2f7;--surface-hover2: #e2e8f0;--border: #e2e8f0;--text-primary: #2d3748;--text-secondary: #4a5568;--text-muted: #718096;--text-faint: #a0aec0;--shadow: rgba(0, 0, 0, .1);--shadow-strong: rgba(0, 0, 0, .2);--theory-surface: rgba(255, 255, 255, .97);--theory-border: #e2e8f0;--footer-bg: #fafafa;--textarea-bg: #f7fafc;--textarea-focus: #ffffff;--code-bg: #edf2f7;--code-color: #553c9a;--notice-bg: #fffaf0;--notice-border: #fbd38d;--notice-text: #744210;--notif-hint-bg: #fffbeb;--notif-hint-border: #f6e05e;--notif-hint-text: #744210;--notif-success-bg: #f0fff4;--notif-success-border: #68d391;--notif-success-text: #22543d;--notif-complete-bg: #ebf4ff;--notif-complete-border: #90cdf4;--notif-complete-text: #2a4365;--fs-untracked-bg: #e2e8f0;--fs-untracked-text: #4a5568;--fs-modified-bg: #feebc8;--fs-modified-text: #7b341e;--fs-staged-bg: #c6f6d5;--fs-staged-text: #22543d;--fs-committed-bg: #ebf4ff;--fs-committed-text: #2a4365;--timeline-branch-badge-bg: #edf2f7;--timeline-head-color: #2d3748;--progress-bg: #e2e8f0;--secondary-btn-bg: #edf2f7;--secondary-btn-text: #2d3748}[data-theme=dark]{--bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);--surface: rgba(30, 32, 44, .98);--surface-solid: #1e2030;--surface-subtle: #252838;--surface-hover: #2d3050;--surface-hover2: #353860;--border: #3a3d5c;--text-primary: #e2e8f0;--text-secondary: #b8c0cc;--text-muted: #8892a4;--text-faint: #5a6478;--shadow: rgba(0, 0, 0, .35);--shadow-strong: rgba(0, 0, 0, .5);--theory-surface: rgba(28, 30, 45, .99);--theory-border: #3a3d5c;--footer-bg: #1a1c2e;--textarea-bg: #1a1c2e;--textarea-focus: #1e2030;--code-bg: #2d3050;--code-color: #b794f4;--notice-bg: #2d2a1a;--notice-border: #7a6020;--notice-text: #f6e05e;--notif-hint-bg: #2d2a1a;--notif-hint-border: #7a6020;--notif-hint-text: #f6e05e;--notif-success-bg: #1a2d22;--notif-success-border: #276749;--notif-success-text: #68d391;--notif-complete-bg: #1a2040;--notif-complete-border: #2a4a7a;--notif-complete-text: #90cdf4;--fs-untracked-bg: #2d3050;--fs-untracked-text: #b8c0cc;--fs-modified-bg: #3d2a10;--fs-modified-text: #f6ad55;--fs-staged-bg: #1a3025;--fs-staged-text: #68d391;--fs-committed-bg: #1a2040;--fs-committed-text: #90cdf4;--timeline-branch-badge-bg: #2d3050;--timeline-head-color: #e2e8f0;--progress-bg: #2d3050;--secondary-btn-bg: #2d3050;--secondary-btn-text: #e2e8f0}html{font-size:95%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:var(--bg-gradient);min-height:100vh;color:var(--text-secondary)}.app-container{display:flex;flex-direction:column;height:100vh}.header{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;box-shadow:0 2px 17px #0000001a}.header-content{display:flex;align-items:center;gap:2rem;max-width:1190px;margin:0 auto}.header h1{display:flex;align-items:center;font-size:1.5rem;font-weight:600;color:var(--text-secondary)}.progress-bar{flex:1;height:7px;background:var(--progress-bg);border-radius:3px;overflow:hidden;max-width:255px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:12.5%;transition:width .3s ease}.progress-text{font-size:.875rem;color:var(--text-muted);font-weight:500}.main-content{display:flex;align-items:flex-start;gap:1rem;padding:1rem;max-width:1390px;margin:0 auto;width:100%}.timeline-panel{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 1rem 1rem;border-radius:10px;box-shadow:0 3px 17px #0000001a;padding:1rem 1.25rem;max-width:1190px;width:calc(100% - 2rem);align-self:center;height:200px}.timeline-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.75rem}.timeline-header h3{color:var(--text-primary);font-size:1.05rem}.timeline-subtitle{color:var(--text-muted);font-size:.85rem;font-weight:500}.timeline-body{position:relative}.timeline-empty{color:var(--text-faint);font-style:italic;font-size:.9rem;padding:.75rem 0}.timeline-rows{display:none;overflow-x:auto;padding-bottom:.25rem}.timeline-rows.active{display:block}.timeline-graph{display:grid;grid-template-columns:119px 1fr;align-items:start;gap:.75rem}.timeline-graph-labels{display:flex;flex-direction:column;gap:0}.timeline-graph-canvas{overflow-x:auto;overflow-y:hidden}.timeline-svg{display:block}.timeline-path{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.55}.timeline-path.merge{stroke:#48bb78d9;opacity:.55}.timeline-path.split{stroke:#4a556880;stroke-width:2;opacity:.5}.timeline-node{filter:drop-shadow(0 2px 5px rgba(0,0,0,.12))}.timeline-label{font-size:9px;font-weight:800;letter-spacing:.02em}.timeline-label.head{fill:var(--timeline-head-color)}.timeline-label.remote{fill:#805ad5}.timeline-row{display:grid;grid-template-columns:119px 1fr;align-items:center;gap:.75rem;padding:.35rem 0}.timeline-branch{font-family:JetBrains Mono,monospace;font-size:.85rem;color:var(--text-primary);display:inline-flex;gap:.5rem;align-items:center}.timeline-branch-badge{background:var(--timeline-branch-badge-bg);color:var(--text-primary);border-radius:999px;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.timeline-track{display:flex;align-items:center;gap:10px;min-height:24px}.timeline-slot{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;position:relative}.timeline-line{position:absolute;left:-5px;right:-5px;top:50%;height:2px;transform:translateY(-50%);background:#4a556840;border-radius:2px;z-index:1}.timeline-split{position:absolute;left:50%;top:-9px;bottom:-9px;width:2px;transform:translate(-50%);background:#4a556840;border-radius:2px;z-index:1}.timeline-dot{width:10px;height:10px;border-radius:999px;background:#667eea;box-shadow:0 0 0 3px #667eea2e;position:relative;z-index:2}.timeline-dot.merge{background:#48bb78;box-shadow:0 0 0 3px #48bb782e}.timeline-head{position:absolute;top:-7px;font-size:.7rem;color:var(--text-secondary);font-weight:700;z-index:3}.timeline-remote{position:absolute;top:-7px;font-size:.65rem;color:#805ad5;font-weight:800;z-index:3;letter-spacing:.02em}.post-lesson-panel h3{margin-bottom:.5rem;margin-top:.5rem}.post-lesson-panel p{margin:20px}.sidebar{width:213px;background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:1.5rem;box-shadow:0 3px 17px #0000001a}.right-sidebar{width:255px;display:flex;flex-direction:column;gap:1rem}.lesson-nav h3{font-size:1.125rem;margin-bottom:1rem;color:var(--text-primary)}.lesson-list{list-style:none}.lesson-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;border-radius:8px;cursor:pointer;transition:all .2s ease}.lesson-item:hover{background:var(--surface-hover)}.lesson-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.lesson-number{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface-hover2);font-size:.75rem;font-weight:600}.lesson-item.active .lesson-number{background:#fff3}.lesson-title{font-size:.875rem;font-weight:500}.tutorial-area{flex:1;display:flex;flex-direction:column;gap:1rem}.lesson-content{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:1.5rem;box-shadow:0 3px 17px #0000001a}.lesson-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.lesson-actions{display:inline-flex;gap:.75rem;align-items:center}.secondary-action-btn{background:var(--secondary-btn-bg);color:var(--secondary-btn-text);border:1px solid var(--border);padding:.5rem .9rem;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:600}.secondary-action-btn:hover{background:var(--surface-hover2)}.lesson-header h2{font-size:1.5rem;color:var(--text-primary)}.help-btn{background:#667eea;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.875rem;transition:background .2s ease}.help-btn:hover{background:#5a67d8}.lesson-description{margin-bottom:1.5rem}.lesson-description p{margin-bottom:.75rem;line-height:1.6;color:var(--text-secondary)}.objectives{background:var(--surface-subtle);padding:1rem;border-radius:8px;border-left:4px solid #667eea}.objectives h4{margin-bottom:.5rem;color:var(--text-primary)}.objectives ul{list-style:none;padding-left:0}.objectives li{color:var(--text-secondary);position:relative;padding:.25rem 0 .25rem 1.5rem}.objectives li.completed{color:#2f855a;text-decoration:line-through}.objectives li.completed:before{color:#48bb78}.objectives li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700}.terminal-container{background:#1a1a1a;border-radius:10px;overflow:hidden;box-shadow:0 3px 17px #0003;flex:0 0 306px;display:flex;flex-direction:column;height:391px;min-height:391px}.terminal-header{background:#2d2d2d;padding:.75rem 1rem;display:flex;align-items:center;gap:1rem}.terminal-buttons{display:flex;gap:.5rem}.button{width:10px;height:10px;border-radius:50%}.button.close{background:#ff5f56}.button.minimize{background:#ffbd2e}.button.maximize{background:#27c93f}.terminal-title{color:#888;font-size:.875rem}.terminal-body{flex:1;padding:1rem;font-family:JetBrains Mono,monospace;display:flex;flex-direction:column;min-height:0;font-size:90%}.terminal-output{flex:1;overflow-y:auto;margin-bottom:1rem;min-height:0}.terminal-line{color:#0f0;margin-bottom:.25rem;white-space:pre-wrap;word-break:break-word}.terminal-input-line{display:flex;align-items:center;gap:.5rem}.prompt{color:#0f0;font-weight:700}.terminal-input{background:transparent;border:none;color:#0f0;font-family:JetBrains Mono,monospace;font-size:12px;outline:none;flex:1}.visual-panel{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:1.5rem;box-shadow:0 3px 17px #0000001a}.panel-header h3{color:var(--text-primary);margin-bottom:1rem}.repo-notice{display:none;background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:8px;padding:.75rem;color:var(--notice-text);font-size:.875rem;margin-bottom:1rem}.repo-notice.active{display:block}.repo-notice code{background:var(--code-bg);padding:.1rem .35rem;border-radius:4px}.git-state{display:flex;flex-direction:column;gap:1rem}.working-directory,.staging-area,.repository{background:var(--surface-subtle);padding:1rem;border-radius:8px;border-top:3px solid #667eea}.staging-area{border-top-color:#f6ad55}.repository{border-top-color:#48bb78}.git-state h4{font-size:.875rem;margin-bottom:.75rem;color:var(--text-primary)}.repo-section-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.repo-section-header h4{margin-bottom:.75rem}.repo-action-btn{width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:var(--surface-solid);color:var(--text-primary);cursor:pointer;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.75rem}.repo-action-btn:hover{background:var(--surface-hover)}.file-list,.commit-list{min-height:51px}.file-item{background:var(--surface-solid);padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem;color:var(--text-secondary);border-left:3px solid #667eea}.file-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-actions{display:inline-flex;gap:.4rem;align-items:center}.file-action-btn{border:1px solid var(--border);background:var(--surface-solid);color:var(--text-primary);border-radius:5px;width:22px;height:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}.file-action-btn:hover{background:var(--surface-hover)}.file-action-btn.file-action-danger:hover{background:#fff5f5;border-color:#feb2b2;color:#c53030}.commit-item{background:var(--surface-solid);padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem;color:var(--text-secondary);border-left:3px solid #48bb78}.commit-hash{font-family:JetBrains Mono,monospace;color:var(--text-muted);font-size:.75rem}.commit-message{font-weight:500;margin-bottom:.25rem}.commit-author{color:var(--text-faint);font-size:.75rem}.empty-state{color:var(--text-faint);font-style:italic;font-size:.875rem}.help-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center}.help-modal.active{display:flex}.modal-content{background:var(--surface-solid);border-radius:10px;max-width:510px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 17px 34px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border)}.modal-header h3{color:var(--text-primary)}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-faint);padding:.25rem;line-height:1}.close-btn:hover{color:var(--text-secondary)}.modal-body{padding:1.5rem}.reading-content h4{margin-bottom:.5rem;color:var(--text-primary)}.reading-content p{margin-bottom:.75rem;color:var(--text-secondary);line-height:1.55}.reading-code{background:#1a202c;color:#48bb78;font-family:JetBrains Mono,monospace;font-size:.875rem;padding:.75rem;border-radius:8px;margin-bottom:.75rem;overflow-x:auto}.form-field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.form-label{font-size:.875rem;font-weight:600;color:var(--text-primary)}.form-input{width:100%;padding:.75rem .875rem;border:1px solid var(--border);border-radius:8px;font-size:.95rem;outline:none}.form-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea2e;background:var(--surface-solid);color:var(--text-primary)}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem}.primary-btn,.secondary-btn{border:none;border-radius:8px;padding:.65rem 1rem;cursor:pointer;font-size:.9rem;font-weight:600}.primary-btn{background:#667eea;color:#fff}.primary-btn:hover{background:#5a67d8}.primary-btn.danger-btn{background:#e53e3e}.primary-btn.danger-btn:hover{background:#c53030}.secondary-btn{background:var(--secondary-btn-bg);color:var(--secondary-btn-text)}.secondary-btn:hover{background:var(--surface-hover2)}.command-help h4{margin-bottom:1rem;color:var(--text-primary)}.command-list{display:flex;flex-direction:column;gap:.75rem}.command-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--surface-subtle);border-radius:6px}.command-item code{background:#2d3748;color:#48bb78;padding:.25rem .5rem;border-radius:4px;font-family:JetBrains Mono,monospace;font-size:.875rem;min-width:128px}.command-item span{color:var(--text-secondary);font-size:.875rem}.tutorial-hidden{display:none!important}.tutorial-reveal{animation:tutorialFadeIn .5s ease forwards}@keyframes tutorialFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){.main-content{flex-direction:column}.sidebar{width:100%;order:2}.right-sidebar{width:100%;order:3}.tutorial-area{order:1}}@media (max-width: 640px){.header-content{flex-direction:column;gap:1rem;text-align:center}.progress-bar{max-width:100%}.main-content{padding:.5rem}.lesson-content,.visual-panel{padding:1rem}}.notification-area{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0 0}.notification{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .85rem;border-radius:8px;font-size:.85rem;line-height:1.4;animation:notif-in .2s ease}@keyframes notif-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.notification.notif-hint{background:var(--notif-hint-bg);border:1px solid var(--notif-hint-border);color:var(--notif-hint-text)}.notification.notif-success{background:var(--notif-success-bg);border:1px solid var(--notif-success-border);color:var(--notif-success-text)}.notification.notif-complete{background:var(--notif-complete-bg);border:1px solid var(--notif-complete-border);color:var(--notif-complete-text);font-weight:600}.notification-icon{flex-shrink:0;font-size:1rem;line-height:1.4}.fs-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.fs-panel-header h3{margin-bottom:0}.fs-file-row{display:flex;align-items:center;gap:.4rem;padding:.35rem .4rem;border-radius:5px;font-size:.82rem;transition:background .15s}.fs-file-row:hover{background:var(--surface-hover)}.fs-file-icon{flex-shrink:0;font-size:.85rem;line-height:1}.fs-file-name{flex:1;font-family:JetBrains Mono,monospace;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fs-status-badge{flex-shrink:0;font-size:.65rem;font-weight:700;letter-spacing:.03em;border-radius:3px;padding:1px 5px;text-transform:uppercase}.fs-status-untracked{background:var(--fs-untracked-bg);color:var(--fs-untracked-text)}.fs-status-modified{background:var(--fs-modified-bg);color:var(--fs-modified-text)}.fs-status-staged{background:var(--fs-staged-bg);color:var(--fs-staged-text)}.fs-status-committed{background:var(--fs-committed-bg);color:var(--fs-committed-text)}.file-modified{border-left-color:#ed8936}.file-modified-badge{display:inline-flex;align-items:center;justify-content:center;background:#ed8936;color:#fff;font-size:.65rem;font-weight:700;border-radius:3px;padding:0 4px;margin-left:6px;height:14px;letter-spacing:.03em;vertical-align:middle;flex-shrink:0}.file-editor-modal .file-editor-content{max-width:680px;width:92%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}.file-editor-header-left{display:flex;align-items:center;gap:.6rem}.file-editor-icon{font-size:1.1rem;line-height:1}.file-editor-header-right{display:flex;align-items:center;gap:1rem}.file-editor-hint{font-size:.78rem;color:var(--text-faint);font-weight:400;white-space:nowrap}.file-editor-body{flex:1;padding:0;min-height:0;display:flex;flex-direction:column}.file-editor-textarea{flex:1;width:100%;min-height:320px;max-height:55vh;resize:vertical;font-family:JetBrains Mono,monospace;font-size:.9rem;line-height:1.65;color:var(--text-primary);background:var(--textarea-bg);border:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 1.25rem;outline:none;-moz-tab-size:2;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto}.file-editor-textarea:focus{background:var(--textarea-focus);box-shadow:inset 0 0 0 2px #667eea2e}.file-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.5rem;border-top:1px solid var(--border);background:var(--footer-bg);border-radius:0 0 10px 10px}.file-editor-footer-note{font-size:.78rem;color:var(--text-faint);font-style:italic}.theory-screen{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:1rem;overflow-y:auto;min-width:0}.theory-screen.tutorial-hidden{display:none}.theory-body{background:var(--theory-surface);border-radius:16px;box-shadow:0 8px 40px #0000002e;padding:2.5rem 3rem;max-width:760px;width:100%}.theory-content{font-size:1rem;line-height:1.75;color:var(--text-primary)}.theory-content h3{font-size:1.2rem;font-weight:600;color:var(--text-secondary);margin:1.4rem 0 .5rem}.theory-content h3:first-child{margin-top:0}.theory-content p{margin-bottom:.9rem}.theory-content ul{margin:.5rem 0 .9rem 1.4rem}.theory-content li{margin-bottom:.35rem}.theory-content code{background:var(--code-bg);border-radius:4px;padding:.1em .4em;font-family:JetBrains Mono,monospace;font-size:.88em;color:var(--code-color)}.theory-content a{color:#667eea;text-decoration:underline}.theory-actions{display:flex;justify-content:flex-end;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--theory-border)}.theory-try-btn{font-size:1rem;padding:.65rem 1.75rem}.dark-mode-toggle{background:none;border:1px solid var(--border);border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;margin-left:auto}.dark-mode-toggle:hover{background:var(--surface-hover)}