:root{--primary:#2c3e50;--secondary:#8b7355;--accent:#e8f4f8;--bg-warm:#faf8f5;--bg-card:#fff;--text-primary:#2c3e50;--text-secondary:#5a6c7d;--text-muted:#8b9aad;--border:#e5e0d8;--success:#5a8f6e;--highlight:#f5f0e8;--shadow:0 2px 12px #0000000f;--shadow-hover:0 8px 24px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-warm);color:var(--text-primary);min-height:100vh;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.7}.app-container{min-height:100vh;display:flex}.sidebar{background:var(--bg-card);border-right:1px solid var(--border);z-index:100;width:300px;height:100vh;transition:transform .3s;position:fixed;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border);padding:24px 20px}.logo{color:var(--primary);margin-bottom:8px;font-family:Noto Serif SC,serif;font-size:1.4rem;font-weight:700}.logo-sub{color:var(--text-muted);font-size:.85rem}.nav-section{padding:16px 0}.nav-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding:0 20px;font-size:.75rem;font-weight:600}.nav-list{list-style:none}.nav-item{position:relative}.nav-link{color:var(--text-secondary);cursor:pointer;align-items:center;padding:12px 20px;font-size:.9rem;text-decoration:none;transition:all .2s;display:flex}.nav-link:hover{background:var(--highlight);color:var(--primary)}.nav-link.active{background:var(--accent);color:var(--primary);font-weight:500}.nav-link.active:before{content:"";background:var(--secondary);width:3px;position:absolute;top:0;bottom:0;left:0}.nav-number{background:var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-right:12px;font-size:.75rem;display:inline-flex}.nav-link.active .nav-number{background:var(--secondary);color:#fff}.nav-link.locked{opacity:.5;cursor:not-allowed}.nav-link.locked:hover{color:var(--text-secondary);background:0 0}.nav-link.locked:after{content:"🔒";opacity:.5;margin-left:auto;font-size:.8rem}.main-content{flex:1;min-height:100vh;margin-left:300px}.content-header{background:var(--bg-card);border-bottom:1px solid var(--border);z-index:50;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0}.header-title{font-family:Noto Serif SC,serif;font-size:1.5rem;font-weight:600}.header-actions{gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:6px;padding:10px 20px;font-size:.9rem;transition:all .2s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#1a252f;transform:translateY(-1px)}.btn-secondary{background:var(--bg-warm);color:var(--text-secondary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--highlight)}.content-body{max-width:900px;padding:40px}.mobile-toggle{z-index:200;border:1px solid var(--border);cursor:pointer;width:44px;height:44px;box-shadow:var(--shadow);background:#fff;border-radius:8px;justify-content:center;align-items:center;font-size:1.2rem;display:none;position:fixed;top:20px;left:20px}@media (width<=768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.mobile-toggle{display:flex}.content-header{padding:16px 20px 16px 70px}.content-body{padding:20px}.lesson-title{font-size:1.6rem}.content-block{padding:20px}}.nav-hidden{display:none!important}.nav-revealed{animation:.6s cubic-bezier(.34,1.56,.64,1) revealSlide;display:block!important}@keyframes revealSlide{0%{opacity:0;max-height:0;transform:translate(-20px)}to{opacity:1;max-height:60px;transform:translate(0)}}.unlock-toast{z-index:2000;background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--secondary);opacity:0;border-radius:12px;align-items:center;gap:14px;max-width:420px;padding:18px 24px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;display:flex;position:fixed;top:24px;right:24px;transform:translate(120%);box-shadow:0 12px 40px #00000026}.unlock-toast.show{opacity:1;transform:translate(0)}.locked-toast{border-left-color:var(--text-muted)}.toast-icon{flex-shrink:0;font-size:1.6rem}.toast-message{color:var(--text-primary);font-size:.95rem;line-height:1.5}.lesson-section{display:none}.lesson-section.active{animation:.4s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.lesson-header{margin-bottom:32px}.lesson-tag{background:var(--accent);color:var(--secondary);border-radius:4px;margin-bottom:12px;padding:4px 12px;font-size:.75rem;font-weight:600;display:inline-block}.lesson-title{color:var(--primary);margin-bottom:16px;font-family:Noto Serif SC,serif;font-size:2.2rem;font-weight:700;line-height:1.3}.lesson-intro{color:var(--text-secondary);font-size:1.1rem;line-height:1.8}.content-block{background:var(--bg-card);box-shadow:var(--shadow);border-radius:12px;margin-bottom:24px;padding:32px}.content-block h2{color:var(--primary);margin-bottom:20px;font-family:Noto Serif SC,serif;font-size:1.4rem;font-weight:600}.content-block h3{color:var(--primary);margin:24px 0 12px;font-size:1.1rem;font-weight:600}.content-block p{color:var(--text-secondary);margin-bottom:16px}.content-block ul,.content-block ol{margin:16px 0;padding-left:24px}.content-block li{color:var(--text-secondary);margin-bottom:8px}.highlight-box{background:var(--highlight);border-left:4px solid var(--secondary);border-radius:0 8px 8px 0;margin:20px 0;padding:20px 24px}.highlight-box p:last-child{margin-bottom:0}.code-block{color:var(--primary);background:#f4f2ef;border-radius:8px;margin:16px 0;padding:16px 20px;font-family:SF Mono,Monaco,monospace;font-size:.9rem;overflow-x:auto}.skill-tag{background:var(--accent);color:var(--secondary);border-radius:4px;padding:4px 10px;font-family:SF Mono,monospace;font-size:.8rem;font-weight:500;display:inline-block}.workflow-diagram{background:var(--bg-warm);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0;padding:20px;display:flex}.workflow-step{border:1px solid var(--border);background:#fff;border-radius:6px;align-items:center;gap:8px;padding:10px 16px;font-size:.85rem;display:flex}.workflow-arrow{color:var(--text-muted);font-size:1.2rem}.comparison-table{border-collapse:collapse;width:100%;margin:20px 0}.comparison-table th,.comparison-table td{text-align:left;border-bottom:1px solid var(--border);padding:14px 16px}.comparison-table th{background:var(--bg-warm);color:var(--primary);font-weight:600}.comparison-table tr:hover{background:var(--highlight)}.capstone-steps{gap:16px;margin-top:24px;display:grid}.capstone-step{box-shadow:var(--shadow);background:#fff;border-radius:10px;gap:16px;padding:20px;display:flex}.step-number{background:var(--secondary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-weight:600;display:flex}.step-content h4{margin-bottom:8px;font-weight:600}.step-content p{color:var(--text-secondary);font-size:.95rem}.checklist{padding:0;list-style:none}.checklist li{border-bottom:1px solid var(--border);align-items:flex-start;gap:10px;padding:10px 0;display:flex}.checklist li:last-child{border-bottom:none}.checklist input[type=checkbox]{cursor:pointer;width:18px;height:18px;margin-top:4px}.tab-nav{border-bottom:1px solid var(--border);gap:8px;margin-bottom:24px;padding-bottom:8px;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:10px 20px;font-size:.9rem;transition:all .2s}.tab-btn:hover{background:var(--highlight);color:var(--primary)}.tab-btn.active{background:var(--accent);color:var(--primary);font-weight:500}.tab-content{display:none}.tab-content.active{display:block}.elective-card{box-shadow:var(--shadow);border-left:4px solid var(--secondary);background:#fff;border-radius:12px;margin-bottom:16px;padding:24px}.elective-card h4{color:var(--primary);margin-bottom:8px;font-weight:600}.elective-card .skill-name{background:var(--accent);color:var(--secondary);border-radius:4px;margin-bottom:12px;padding:4px 10px;font-family:SF Mono,monospace;font-size:.8rem;font-weight:500;display:inline-block}.elective-card p{color:var(--text-secondary);font-size:.95rem}.exercise-section{background:linear-gradient(135deg,#f8f6f3 0%,#f0ece5 100%);border-radius:12px;margin-top:32px;padding:32px}.exercise-title{margin-bottom:8px;font-family:Noto Serif SC,serif;font-size:1.3rem;font-weight:600}.exercise-subtitle{color:var(--text-muted);margin-bottom:24px;font-size:.9rem}.question-card{box-shadow:var(--shadow);background:#fff;border-radius:10px;margin-bottom:16px;padding:24px}.question-number{background:var(--secondary);color:#fff;text-align:center;border-radius:50%;width:28px;height:28px;margin-bottom:12px;font-size:.85rem;font-weight:600;line-height:28px;display:inline-block}.question-text{color:var(--primary);margin-bottom:16px;font-size:1rem}.answer-options{flex-direction:column;gap:10px;display:flex}.option-label{background:var(--bg-warm);cursor:pointer;border-radius:8px;align-items:flex-start;gap:10px;padding:12px 16px;transition:all .2s;display:flex}.option-label:hover{background:var(--highlight)}.option-label input[type=radio]{margin-top:3px}.text-answer{border:1px solid var(--border);resize:vertical;border-radius:8px;width:100%;min-height:100px;padding:16px;font-family:inherit;font-size:.95rem}.text-answer:focus{border-color:var(--secondary);outline:none}.option-label.correct{border-left:4px solid var(--success);background-color:#5a8f6e26}.option-label.incorrect{background-color:#dc35451a;border-left:4px solid #dc3545}.question-card.unanswered{border:2px solid #ffc107;position:relative;box-shadow:0 0 10px #ffc1074d}.question-card.unanswered:before{content:"⚠️ 请完成此题";color:#000;background:#ffc107;border-radius:4px;padding:4px 8px;font-size:.8rem;font-weight:700;position:absolute;top:-12px;right:16px}.score-display{box-shadow:var(--shadow);text-align:center;background:#fff;border-radius:8px;padding:12px 16px;font-size:1.2rem}.draft-save-status{color:var(--text-muted);margin-top:12px;font-size:.85rem;line-height:1.5}.draft-save-status[data-tone=saved]{color:var(--secondary)}.draft-save-status[data-tone=restored]{color:var(--primary)}.ai-feedback{border-left:4px solid var(--secondary);background:#f8f9fa;border-radius:8px;margin-top:20px;padding:20px;font-size:.95rem;line-height:1.6;display:none}.ai-feedback h2{color:var(--primary);margin-top:16px;margin-bottom:8px;font-size:1.2rem}.ai-feedback h2:first-child{margin-top:0}.ai-feedback ul{margin-bottom:12px;padding-left:20px}.ai-feedback li{margin-bottom:6px}.loading{color:var(--secondary);align-items:center;gap:10px;font-weight:500;display:flex}.loading:after{content:"";border:2px solid var(--secondary);border-right-color:#0000;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-text{color:#dc3545;font-weight:500}.info-text{color:var(--text-muted);margin-bottom:12px;font-style:italic}.static-feedback{padding-top:8px}.static-feedback h4{color:var(--primary);margin-bottom:8px}.chat-section{border-top:1px solid var(--border);margin-top:24px;padding-top:16px}.chat-history{flex-direction:column;gap:12px;max-height:300px;margin-bottom:16px;display:flex;overflow-y:auto}.chat-bubble{border-radius:12px;max-width:85%;padding:10px 14px;font-size:.95rem}.user-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}.ai-bubble{border:1px solid var(--border);background:#fff;border-bottom-left-radius:4px;align-self:flex-start}.chat-input-area{gap:8px;display:flex}.chat-input{border:1px solid var(--border);border-radius:8px;flex:1;padding:10px 14px;font-family:inherit;font-size:.95rem}.chat-input:focus{border-color:var(--secondary);outline:none}.chat-send-btn{padding:10px 20px}details.scenario-answer{background:var(--bg-warm);border-radius:8px;margin-top:16px;overflow:hidden}details.scenario-answer summary{cursor:pointer;color:var(--secondary);-webkit-user-select:none;user-select:none;outline:none;padding:12px 16px;font-weight:500}details.scenario-answer summary:hover{background:var(--highlight)}.scenario-content{border-top:1px solid var(--border);background:#fff;padding:16px}.scenario-content p{margin-bottom:12px}.scenario-content p:last-child{margin-bottom:0}.streaming-target.streaming:after{content:"▊";color:var(--secondary);font-weight:300;animation:.7s steps(2,end) infinite blink;display:inline}.streaming-cursor{background:var(--secondary);vertical-align:text-bottom;border-radius:1px;width:8px;height:18px;animation:.7s steps(2,end) infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.chat-toolbar{border-top:1px solid var(--border);justify-content:flex-end;margin-bottom:12px;padding-top:16px;display:flex}.regenerate-btn{padding:6px 14px;font-size:.85rem}.chat-input-area textarea.chat-input{border:1px solid var(--border);resize:none;border-radius:8px;flex:1;min-height:40px;max-height:120px;padding:10px 14px;font-family:inherit;font-size:.95rem;line-height:1.4;overflow-y:auto}.chat-input-area textarea.chat-input:focus{border-color:var(--secondary);outline:none}.ai-grading-result{min-height:40px}.ai-grading-result h2{color:var(--primary);margin-top:16px;margin-bottom:8px;font-size:1.2rem}.ai-grading-result h2:first-child{margin-top:0}.ai-grading-result ul{margin-bottom:12px;padding-left:20px}.ai-grading-result li{margin-bottom:6px}.retry-btn{margin-top:12px}.card-gallery{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:24px;display:grid}.card-item{box-shadow:var(--shadow);cursor:pointer;background:#fff;border-radius:12px;transition:transform .3s,box-shadow .3s;overflow:hidden}.card-item:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}.card-image{aspect-ratio:3/4;object-fit:cover;background:var(--bg-warm);width:100%}.card-info{padding:16px}.card-title{margin-bottom:4px;font-size:.95rem;font-weight:600}.card-lesson{color:var(--text-muted);font-size:.8rem}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;background:#000000b3;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background:#fff;border-radius:16px;max-width:90vw;max-height:90vh;position:relative;overflow:auto}.modal-close{color:#fff;cursor:pointer;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;display:flex;position:absolute;top:16px;right:16px}.modal-image{max-width:100%;max-height:85vh;display:block}.card-badge{background:var(--accent);color:var(--secondary);border-radius:999px;margin-left:auto;padding:2px 8px;font-family:SF Mono,monospace;font-size:.75rem;font-weight:600}.card-locked{pointer-events:none;-webkit-user-select:none;user-select:none;position:relative}.card-locked>*{filter:blur(8px)grayscale(.8)brightness(.8);transition:filter .3s}.card-locked:after{content:"🔒";opacity:.8;text-shadow:0 2px 10px #0003;z-index:10;font-size:3rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-unlocked-flip{animation:1.2s cubic-bezier(.34,1.56,.64,1) forwards cardFlipUnlock}@keyframes cardFlipUnlock{0%{filter:grayscale()brightness(.7);transform:perspective(1000px)rotateY(180deg)scale(.9)}50%{filter:grayscale(0)brightness(1.2)}to{filter:grayscale(0)brightness();transform:perspective(1000px)rotateY(0)scale(1)}}.fly-card-anim{z-index:9998;background-position:50%;background-size:cover;border:2px solid #fff;border-radius:8px;width:120px;height:160px;animation:1s cubic-bezier(.34,1.56,.64,1) forwards cardFlyIn;position:fixed;bottom:40px;right:40px;box-shadow:0 10px 30px #0003}@keyframes cardFlyIn{0%{opacity:0;transform:translateY(100px)scale(.3)rotate(-15deg)}60%{opacity:1;transform:translateY(-20px)scale(1.1)rotate(3deg)}to{opacity:1;transform:translate(0)scale(1)rotate(0)}}.home-hero{text-align:center;background:linear-gradient(135deg, var(--bg-card) 0%, var(--highlight) 100%);border-radius:16px;margin-bottom:32px;padding:60px 40px}.home-hero h1{color:var(--primary);margin-bottom:16px;font-family:Noto Serif SC,serif;font-size:2.8rem;font-weight:700}.home-hero p{color:var(--text-secondary);max-width:600px;margin:0 auto 32px;font-size:1.2rem}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:32px;display:grid}.feature-card{box-shadow:var(--shadow);background:#fff;border-radius:12px;padding:24px;transition:transform .3s}.feature-card:hover{transform:translateY(-4px)}.feature-icon{background:var(--accent);border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:16px;font-size:1.5rem;display:flex}.feature-card h3{margin-bottom:8px;font-weight:600}.feature-card p{color:var(--text-secondary);font-size:.95rem}.start-btn{background:var(--primary);color:#fff;border-radius:8px;align-items:center;gap:8px;padding:14px 32px;font-weight:500;text-decoration:none;transition:all .3s;display:inline-flex}.start-btn:hover{box-shadow:var(--shadow-hover);background:#1a252f;transform:translateY(-2px)}#terminal-panel{z-index:1000;background:#1e1e1e;flex-direction:column;height:300px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:0;left:300px;right:0;transform:translateY(100%);box-shadow:0 -4px 20px #0000004d}#terminal-panel.open{transform:translateY(0)}#terminal-resizer{cursor:ns-resize;background:#333;flex-shrink:0;width:100%;height:6px;transition:background .2s}#terminal-resizer:hover,#terminal-resizer:active{background:var(--secondary)}.terminal-header{color:#ccc;background:#252526;border-bottom:1px solid #333;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 16px;font-family:SF Mono,Consolas,monospace;font-size:13px;display:flex}.terminal-title{align-items:center;gap:8px;display:flex}.terminal-actions{gap:12px;display:flex}.terminal-btn{color:#ccc;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:14px;transition:background .2s,color .2s}.terminal-btn:hover{color:#fff;background:#333}#terminal-container{background:#1e1e1e;flex:1;padding:10px;overflow:hidden}.terminal-toggle-btn{background:var(--primary);color:#fff;cursor:pointer;z-index:999;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:24px;transition:transform .2s,box-shadow .2s,background .2s;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 12px #0003}.terminal-toggle-btn:hover{background:#1a252f;transform:translateY(-2px);box-shadow:0 6px 16px #0000004d}.terminal-toggle-btn:active{transform:translateY(0)}.try-btn{background:var(--bg-warm);color:var(--primary);border:1px solid var(--border);cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin:12px 0;padding:10px 20px;font-family:SF Mono,Consolas,monospace;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.try-btn:before{content:"▶";color:var(--secondary);font-size:12px}.try-btn:hover{background:var(--highlight);border-color:var(--secondary);transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}@media (width<=768px){#terminal-panel{left:0}.terminal-toggle-btn{width:48px;height:48px;font-size:20px;bottom:16px;right:16px}}.xterm{cursor:text;-webkit-user-select:none;user-select:none;position:relative}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{z-index:5;position:absolute;top:0}.xterm .xterm-helper-textarea{opacity:0;z-index:-5;white-space:nowrap;resize:none;border:0;width:0;height:0;margin:0;padding:0;position:absolute;top:0;left:-9999em;overflow:hidden}.xterm .composition-view{color:#fff;white-space:nowrap;z-index:1;background:#000;display:none;position:absolute}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{cursor:default;background-color:#000;position:absolute;inset:0;overflow-y:scroll}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;top:0;left:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{visibility:hidden;line-height:normal;display:inline-block;position:absolute;top:0;left:-9999em}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{z-index:10;color:#0000;pointer-events:none;position:absolute;inset:0}.xterm .live-region{width:1px;height:1px;position:absolute;left:-9999px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{-webkit-text-decoration:underline double;text-decoration:underline double}.xterm-underline-3{-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.xterm-underline-4{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.xterm-underline-5{-webkit-text-decoration:underline dashed;text-decoration:underline dashed}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:underline overline}.xterm-overline.xterm-underline-2{-webkit-text-decoration:overline double underline;text-decoration:overline double underline}.xterm-overline.xterm-underline-3{-webkit-text-decoration:overline wavy underline;text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{-webkit-text-decoration:overline dotted underline;text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{-webkit-text-decoration:overline dashed underline;text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;pointer-events:none;position:absolute;top:0;right:0}.xterm-decoration-top{z-index:2;position:relative}