:root{--bg-primary:#0b0f19;--bg-secondary:#111827;--bg-tertiary:#1f2937;--bg-card:#111827d9;--bg-card-hover:#1f2937f2;--bg-glass:#111827a6;--bg-input:#0f172a;--border-color:#ffffff14;--border-color-hover:#ffffff29;--border-focus:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0b0f19;--accent-cyan:#38bdf8;--accent-cyan-glow:#38bdf840;--accent-blue:#3b82f6;--accent-indigo:#6366f1;--accent-purple:#a855f7;--accent-emerald:#10b981;--accent-emerald-glow:#10b98140;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--accent-rose-glow:#f43f5e40;--syntax-keyword:#c084fc;--syntax-function:#38bdf8;--syntax-string:#34d399;--syntax-number:#fb923c;--syntax-comment:#64748b;--syntax-variable:#f1f5f9;--syntax-operator:#f472b6;--syntax-active-line:#38bdf826;--syntax-active-line-border:#38bdf8;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0006;--shadow-md:0 4px 6px -1px #00000080, 0 2px 4px -2px #0006;--shadow-lg:0 10px 15px -3px #0009, 0 4px 6px -4px #00000080;--shadow-glow:0 0 20px -2px var(--accent-cyan-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.35s cubic-bezier(.4, 0, .2, 1);--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--bg-card:#ffffffe6;--bg-card-hover:#fff;--bg-glass:#fffc;--bg-input:#f8fafc;--border-color:#e2e8f0;--border-color-hover:#cbd5e1;--border-focus:#0284c7;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-inverse:#f8fafc;--accent-cyan:#0284c7;--accent-cyan-glow:#0284c72e;--accent-blue:#2563eb;--accent-indigo:#4f46e5;--accent-purple:#9333ea;--accent-emerald:#059669;--accent-emerald-glow:#0596692e;--accent-amber:#d97706;--accent-rose:#e11d48;--accent-rose-glow:#e11d482e;--syntax-keyword:#7e22ce;--syntax-function:#0369a1;--syntax-string:#047857;--syntax-number:#c2410c;--syntax-comment:#94a3b8;--syntax-variable:#1e293b;--syntax-operator:#db2777;--syntax-active-line:#0284c71a;--syntax-active-line-border:#0284c7;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000d;--shadow-glow:0 0 20px -2px #0284c733}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px -2px var(--accent-cyan-glow)}50%{box-shadow:0 0 25px 2px var(--accent-cyan-glow)}}@keyframes flashUpdate{0%{background-color:#38bdf873;transform:scale(1.03)}to{background-color:#0000;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes bounceSlow{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.fade-in{animation:fadeIn var(--transition-normal) ease-out forwards}.flash-on-change{animation:.8s ease-out flashUpdate}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);letter-spacing:-.02em;font-weight:700}p{color:var(--text-secondary)}code,pre{font-family:var(--font-mono)}button{font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;gap:6px;font-size:13px;font-weight:600;display:inline-flex}button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-flex}.badge-cyan{background:var(--accent-cyan-glow);color:var(--accent-cyan);border:1px solid #38bdf84d}.badge-emerald{background:var(--accent-emerald-glow);color:var(--accent-emerald);border:1px solid #10b9814d}.badge-amber{color:var(--accent-amber);background:#f59e0b26;border:1px solid #f59e0b4d}.badge-purple{color:var(--accent-purple);background:#a855f726;border:1px solid #a855f74d}.app-navbar{z-index:50;border-top:none;border-left:none;border-right:none;border-radius:0;justify-content:space-between;align-items:center;height:60px;padding:8px 20px;display:flex}.navbar-brand{align-items:center;gap:12px;display:flex}.brand-logo{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));color:#fff;width:36px;height:36px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;display:flex}.brand-title{color:var(--text-primary);align-items:center;gap:6px;font-size:17px;font-weight:800;display:flex}.brand-title span{color:var(--accent-cyan)}.brand-badge{padding:1px 6px;font-size:10px}.brand-subtitle{color:var(--text-muted);font-size:11px;display:block}.navbar-nav{background:var(--bg-primary);border-radius:var(--radius-full);border:1px solid var(--border-color);align-items:center;gap:4px;padding:4px;display:flex}.nav-link{border-radius:var(--radius-full);color:var(--text-secondary);padding:6px 14px;font-size:13px;font-weight:600;position:relative}.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link.active{background:var(--accent-cyan-glow);color:var(--accent-cyan);border:1px solid #38bdf84d}.nav-counter{background:var(--accent-rose);color:#fff;border-radius:var(--radius-full);margin-left:2px;padding:1px 6px;font-size:10px}.navbar-actions{align-items:center;gap:10px;display:flex}.template-select{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);outline:none;padding:6px 12px;font-size:12px;font-weight:500}.template-select:hover,.template-select:focus{border-color:var(--accent-cyan);color:var(--text-primary)}.btn-action-icon{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:6px 12px;font-size:12px}.btn-action-icon:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color-hover)}.xp-pill{border-radius:var(--radius-full);background:linear-gradient(135deg,#f59e0b26,#ea580c26);border:1px solid #f59e0b59;align-items:center;gap:6px;padding:4px 12px;display:flex}.xp-icon{color:var(--accent-amber)}.xp-amount{color:var(--accent-amber);font-size:12px;font-weight:700}.theme-toggle{border-radius:var(--radius-full);width:34px;height:34px;padding:0}@media (width<=900px){.brand-subtitle,.btn-label-mobile-hidden{display:none}.template-select{max-width:140px}}.execution-controls-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;display:flex}.controls-left,.controls-right{align-items:center;gap:8px;display:flex}.btn-control{border-radius:var(--radius-sm);transition:all var(--transition-fast);padding:6px 12px;font-size:12px;font-weight:600}.btn-run{color:#fff;box-shadow:0 2px 8px var(--accent-emerald-glow);background:linear-gradient(135deg,#10b981,#059669)}.btn-run:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-pause{color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706)}.btn-pause:hover{filter:brightness(1.1)}.btn-step{background:var(--bg-tertiary);color:var(--accent-cyan);border:1px solid #38bdf84d}.btn-step:hover{background:var(--accent-cyan-glow);border-color:var(--accent-cyan)}.btn-reset{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-reset:hover{color:var(--text-primary);border-color:var(--border-color-hover)}.line-indicator{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--accent-cyan);font-size:11px;font-family:var(--font-mono);padding:4px 8px}.status-badge{border-radius:var(--radius-full);align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.status-dot{border-radius:50%;width:7px;height:7px}.status-badge.idle{background:var(--bg-tertiary);color:var(--text-muted)}.status-badge.idle .status-dot{background:var(--text-muted)}.status-badge.running{background:var(--accent-emerald-glow);color:var(--accent-emerald);border:1px solid #10b9814d}.status-badge.running .status-dot{background:var(--accent-emerald);box-shadow:0 0 8px var(--accent-emerald);animation:1.5s infinite pulseGlow}.status-badge.paused{color:var(--accent-amber);background:#f59e0b26;border:1px solid #f59e0b4d}.status-badge.paused .status-dot{background:var(--accent-amber)}.status-badge.waiting{color:var(--accent-purple);background:#a855f726;border:1px solid #a855f74d}.status-badge.waiting .status-dot{background:var(--accent-purple);animation:1s infinite bounceSlow}.status-badge.finished{background:var(--accent-cyan-glow);color:var(--accent-cyan);border:1px solid #38bdf84d}.status-badge.finished .status-dot{background:var(--accent-cyan)}.status-badge.error{background:var(--accent-rose-glow);color:var(--accent-rose);border:1px solid #f43f5e4d}.status-badge.error .status-dot{background:var(--accent-rose)}.speed-controller{color:var(--text-muted);background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border-color);align-items:center;gap:6px;padding:3px 8px;font-size:11px;display:flex}.speed-select{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;outline:none;font-size:11px;font-weight:600}.pseudocode-editor-container{background:var(--bg-secondary);flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.editor-toolbar{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:6px 14px;display:flex}.toolbar-left{color:var(--text-primary);align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.editor-icon{color:var(--accent-cyan)}.toolbar-right{align-items:center;gap:6px;display:flex}.btn-editor-tool{border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-color);padding:3px 8px;font-size:11px}.btn-editor-tool:hover{color:var(--text-primary);border-color:var(--border-color-hover)}.editor-main-area{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.line-numbers-gutter{background:var(--bg-primary);border-right:1px solid var(--border-color);width:48px;font-family:var(--font-mono);color:var(--text-muted);-webkit-user-select:none;user-select:none;text-align:right;padding:12px 0;font-size:13px;line-height:22px;overflow-y:hidden}.line-num-item{justify-content:flex-end;align-items:center;height:22px;padding-right:10px;display:flex;position:relative}.line-num-item.active-line{background:var(--syntax-active-line);color:var(--accent-cyan);border-left:3px solid var(--accent-cyan);font-weight:700}.line-num-item.error-line{background:var(--accent-rose-glow);color:var(--accent-rose);border-left:3px solid var(--accent-rose);font-weight:700}.active-arrow{color:var(--accent-cyan);font-size:9px;animation:1s infinite bounceSlow;position:absolute;left:3px}.editor-textarea-wrapper{flex:1;height:100%;position:relative}.code-textarea{width:100%;height:100%;color:var(--text-primary);font-family:var(--font-mono);resize:none;white-space:pre;overflow-wrap:normal;tab-size:2;background:0 0;border:none;outline:none;padding:12px 16px;font-size:13px;line-height:22px;overflow-x:auto}.code-textarea::placeholder{color:var(--text-muted)}.editor-footer{background:var(--bg-primary);border-top:1px solid var(--border-color);color:var(--text-muted);justify-content:space-between;align-items:center;padding:4px 14px;font-size:11px;display:flex}.footer-meta{align-items:center;gap:8px;display:flex}.lang-badge{color:var(--accent-cyan);font-weight:600}.terminal-panel{background:var(--bg-input);border-radius:var(--radius-md);border:1px solid var(--border-color);height:100%;font-family:var(--font-mono);flex-direction:column;display:flex;overflow:hidden}.terminal-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.terminal-dots{align-items:center;gap:5px;display:flex}.dot{border-radius:50%;width:9px;height:9px}.dot.red{background:#ef4444}.dot.yellow{background:#eab308}.dot.green{background:#22c55e}.terminal-title{color:var(--text-secondary);align-items:center;gap:6px;font-size:11px;font-weight:600;display:flex}.terminal-icon{color:var(--accent-cyan)}.btn-terminal-clear{color:var(--text-muted);border-radius:var(--radius-sm);background:0 0;padding:2px 6px;font-size:11px}.btn-terminal-clear:hover{color:var(--text-primary);background:var(--bg-primary)}.terminal-body{color:#38bdf8;flex-direction:column;flex:1;gap:8px;padding:12px;font-size:12px;line-height:1.6;display:flex;overflow-y:auto}.terminal-output-text{white-space:pre-wrap;word-break:break-word;color:#e2e8f0;margin:0;font-family:inherit}.terminal-empty-state{color:var(--text-muted);font-style:italic}.terminal-error-message{border-radius:var(--radius-sm);color:#fb7185;background:#f43f5e26;border:1px solid #f43f5e59;padding:8px 12px}.terminal-input-row{background:var(--bg-primary);border:1px solid var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan-glow);border-radius:var(--radius-sm);animation:fadeIn var(--transition-normal);align-items:center;gap:8px;margin-top:auto;padding:6px 10px;display:flex}.terminal-prompt-label{color:var(--accent-amber);white-space:nowrap;font-weight:600}.terminal-input-field{color:#f8fafc;background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:12px}.btn-terminal-send{background:var(--accent-cyan);color:#0b0f19;border-radius:var(--radius-sm);padding:3px 8px;font-size:11px;font-weight:700}.btn-terminal-send:hover{filter:brightness(1.1)}.memory-watcher-panel{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);flex-direction:column;height:100%;display:flex;overflow:hidden}.memory-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.memory-title{color:var(--text-primary);align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.memory-icon{color:var(--accent-cyan)}.var-count-badge{color:var(--text-muted);background:var(--bg-primary);border-radius:var(--radius-full);padding:2px 8px;font-size:11px}.memory-content{flex:1;padding:12px;overflow-y:auto}.memory-empty-state{text-align:center;height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;padding:20px;display:flex}.empty-icon{color:var(--text-muted);opacity:.6;margin-bottom:10px}.empty-title{color:var(--text-secondary);margin-bottom:4px;font-size:13px;font-weight:600}.empty-desc{max-width:260px;font-size:11px;line-height:1.4}.memory-table-wrapper{overflow-x:auto}.memory-table{border-collapse:collapse;width:100%;font-size:12px}.memory-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color);padding:8px 10px;font-size:11px;font-weight:600}.memory-table td{border-bottom:1px solid var(--border-color);font-family:var(--font-mono);padding:8px 10px}.memory-row{transition:background-color .4s}.memory-row.flash-update{background:#38bdf82e}.col-name{color:var(--text-primary);align-items:center;gap:4px;display:flex}.var-symbol{color:var(--accent-cyan);font-weight:700}.type-badge{border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.type-badge.int{color:#60a5fa;background:#3b82f633}.type-badge.real{color:#c084fc;background:#a855f733}.type-badge.str{color:#34d399;background:#10b98133}.type-badge.bool{color:#fbbf24;background:#f59e0b33}.type-badge.arr{color:#f472b6;background:#ec489933}.type-badge.default{background:var(--bg-primary);color:var(--text-secondary)}.col-val{font-weight:600}.val-num{color:#fb923c}.val-str{color:#34d399}.val-bool{color:#fbbf24;font-weight:700}.val-null{color:var(--text-muted);font-style:italic}.val-array{color:#f472b6;font-size:11px}.array-idx{color:var(--text-muted);margin-right:2px}.status-pill{border-radius:var(--radius-full);padding:2px 8px;font-size:10px}.status-pill.updated{background:var(--accent-cyan-glow);color:var(--accent-cyan);font-weight:700}.status-pill.steady{color:var(--text-muted)}.flowchart-panel{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);flex-direction:column;height:100%;display:flex;overflow:hidden}.flowchart-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.flowchart-title{color:var(--text-primary);align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.flowchart-icon{color:var(--accent-cyan)}.flowchart-actions{align-items:center;gap:6px;display:flex}.btn-zoom{background:var(--bg-primary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:26px;height:26px;padding:0}.btn-zoom:hover{color:var(--text-primary);border-color:var(--border-color-hover)}.zoom-percent{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);text-align:center;min-width:38px}.flowchart-canvas-container{background:radial-gradient(var(--border-color) 1px, transparent 1px);background-size:20px 20px;flex:1;justify-content:center;padding:20px;display:flex;overflow:auto}.flowchart-svg-wrapper{transition:transform var(--transition-fast)}.flow-label{font-family:var(--font-mono);fill:var(--text-primary);pointer-events:none;font-size:11px;font-weight:600}.node-stroke{fill:var(--bg-card);stroke:var(--border-color-hover);stroke-width:1.5px;transition:all var(--transition-normal)}.node-stroke.active{stroke:var(--accent-cyan);stroke-width:2.5px;filter:drop-shadow(0 0 8px var(--accent-cyan-glow))}.shape-terminator{stroke:var(--accent-cyan)}.shape-io{stroke:var(--accent-emerald)}.shape-decision{stroke:var(--accent-purple)}.shape-process{stroke:var(--accent-indigo)}.flow-node-group.active-node .flow-label{fill:var(--accent-cyan);font-weight:700}.code-bridge-panel{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);flex-direction:column;height:100%;display:flex;overflow:hidden}.code-bridge-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.bridge-title{color:var(--text-primary);align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.bridge-icon{color:var(--accent-cyan)}.lang-tabs{background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border-color);align-items:center;gap:4px;padding:3px;display:flex}.lang-tab-btn{border-radius:var(--radius-sm);color:var(--text-muted);padding:3px 10px;font-size:11px}.lang-tab-btn.active{background:var(--bg-card);color:var(--accent-cyan);box-shadow:var(--shadow-sm);font-weight:700}.btn-copy-transpiled{border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border-color);padding:4px 10px;font-size:11px}.btn-copy-transpiled:hover{color:var(--text-primary);border-color:var(--border-color-hover)}.bridge-info-banner{background:var(--bg-primary);border-bottom:1px solid var(--border-color);color:var(--text-muted);padding:8px 14px;font-size:11px;line-height:1.4}.bridge-info-banner strong{color:var(--accent-cyan)}.code-bridge-body{flex:1;padding:14px;overflow:auto}.transpiled-code-block{font-family:var(--font-mono);color:#a5f3fc;white-space:pre-wrap;word-break:break-word;margin:0;font-size:12px;line-height:1.6}.curriculum-container{background:var(--bg-primary);height:100%;display:flex;overflow:hidden}.curriculum-sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;width:290px;display:flex}.curriculum-header{border-bottom:1px solid var(--border-color);padding:16px}.sidebar-title-row{align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:700;display:flex}.text-cyan{color:var(--accent-cyan)}.text-purple{color:var(--accent-purple)}.text-amber{color:var(--accent-amber)}.text-emerald{color:var(--accent-emerald)}.text-rose{color:var(--accent-rose)}.progress-info{flex-direction:column;gap:6px;display:flex}.progress-meta{color:var(--text-muted);justify-content:space-between;font-size:11px;display:flex}.progress-meta strong{color:var(--accent-emerald)}.progress-bar-track{background:var(--bg-tertiary);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-emerald));border-radius:var(--radius-full);height:100%;transition:width var(--transition-normal)}.chapter-list{flex-direction:column;flex:1;gap:4px;padding:10px 8px;display:flex;overflow-y:auto}.chapter-item-btn{border-radius:var(--radius-md);text-align:left;color:var(--text-secondary);transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:10px;padding:10px 12px;display:flex}.chapter-item-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.chapter-item-btn.active{background:var(--bg-card);color:var(--text-primary);border-color:var(--accent-cyan);box-shadow:var(--shadow-sm)}.chapter-status-icon{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:700;display:flex}.chapter-item-btn.completed .chapter-status-icon{border-color:var(--accent-emerald);background:var(--accent-emerald-glow)}.chapter-info{flex:1;min-width:0}.chapter-title-text{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.badge-chapter{background:var(--bg-primary);color:var(--text-muted);margin-top:2px;padding:1px 5px;font-size:9px}.chapter-chevron{color:var(--text-muted);opacity:.6}.chapter-item-btn.active .chapter-chevron{color:var(--accent-cyan);opacity:1}.curriculum-content-area{flex:1;height:100%;padding:24px 32px;overflow-y:auto}.content-scroll-container{flex-direction:column;gap:20px;max-width:780px;margin:0 auto;display:flex}.content-header{border-bottom:1px solid var(--border-color);padding-bottom:16px}.chapter-badge-row{gap:8px;margin-bottom:10px;display:flex}.content-title{color:var(--text-primary);margin-bottom:8px;font-size:22px;font-weight:800}.content-description{color:var(--text-secondary);font-size:14px;line-height:1.5}.reading-sections{flex-direction:column;gap:16px;display:flex}.reading-section-card{padding:18px 22px}.section-title{color:var(--text-primary);margin-bottom:10px;font-size:15px;font-weight:700}.section-body{flex-direction:column;gap:10px;font-size:13px;line-height:1.7;display:flex}.curriculum-p{color:var(--text-secondary)}.inline-code{background:var(--bg-primary);color:var(--accent-cyan);border-radius:4px;padding:2px 6px;font-size:12px}.curriculum-code-block{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:#38bdf8;padding:12px 16px;font-size:12px;line-height:1.6;overflow-x:auto}.interactive-example-box{border-left:4px solid var(--accent-amber);padding:18px 22px}.example-box-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.example-title{color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.btn-load-example{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));color:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:6px 14px;font-size:12px}.btn-load-example:hover{filter:brightness(1.1);transform:translateY(-1px)}.example-code-preview{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:#e2e8f0;padding:14px 16px;font-size:12px;line-height:1.6;overflow-x:auto}.quiz-box{border-left:4px solid var(--accent-purple);margin-bottom:30px;padding:20px 24px}.quiz-header{align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.quiz-title{color:var(--text-primary);font-size:15px;font-weight:700}.quiz-subtitle{color:var(--text-muted);font-size:12px}.quiz-question{color:var(--text-primary);margin-bottom:14px;font-size:13px;font-weight:600}.quiz-options{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.quiz-option-btn{border-radius:var(--radius-md);background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary);text-align:left;transition:all var(--transition-fast);align-items:center;gap:10px;padding:10px 14px;font-size:12px;display:flex;position:relative}.quiz-option-btn:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-color-hover)}.quiz-option-btn.selected{border-color:var(--accent-purple);color:var(--text-primary);background:#a855f726}.quiz-option-btn.correct{border-color:var(--accent-emerald);background:var(--accent-emerald-glow);color:var(--text-primary)}.quiz-option-btn.wrong{border-color:var(--accent-rose);background:var(--accent-rose-glow);color:var(--text-primary)}.option-indicator{background:var(--bg-tertiary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;display:flex}.quiz-check-icon{margin-left:auto}.btn-submit-quiz{background:linear-gradient(135deg, var(--accent-purple), var(--accent-indigo));color:#fff;border-radius:var(--radius-sm);padding:8px 18px;font-size:13px}.btn-submit-quiz:hover{filter:brightness(1.1)}.quiz-feedback{border-radius:var(--radius-md);margin-top:10px;padding:14px}.quiz-feedback.success{background:var(--accent-emerald-glow);border:1px solid #10b98159}.quiz-feedback.retry{background:var(--accent-rose-glow);border:1px solid #f43f5e59}.feedback-status{margin-bottom:4px;font-size:13px;font-weight:700}.quiz-feedback.success .feedback-status{color:var(--accent-emerald)}.quiz-feedback.retry .feedback-status{color:var(--accent-rose)}.feedback-explanation{color:var(--text-secondary);font-size:12px;line-height:1.5}.btn-retry-quiz{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-top:8px;padding:4px 10px;font-size:11px}.challenges-container{background:var(--bg-primary);height:100%;display:flex;overflow:hidden}.challenges-sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;width:290px;display:flex}.challenges-sidebar-header{border-bottom:1px solid var(--border-color);padding:16px}.challenges-counter-badge{color:var(--accent-amber);border-radius:var(--radius-full);background:#f59e0b1f;border:1px solid #f59e0b40;margin-top:6px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.challenges-list{flex-direction:column;flex:1;gap:4px;padding:10px 8px;display:flex;overflow-y:auto}.challenge-item-btn{border-radius:var(--radius-md);text-align:left;color:var(--text-secondary);transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:10px;padding:10px 12px;display:flex}.challenge-item-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.challenge-item-btn.active{background:var(--bg-card);color:var(--text-primary);border-color:var(--accent-amber);box-shadow:var(--shadow-sm)}.challenge-item-icon{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:700;display:flex}.challenge-item-btn.completed .challenge-item-icon{border-color:var(--accent-emerald);background:var(--accent-emerald-glow)}.challenge-item-info{flex:1;min-width:0}.challenge-item-title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:12px;font-weight:600;overflow:hidden}.challenge-item-meta{align-items:center;gap:6px;display:flex}.xp-tag{color:var(--accent-amber);font-size:10px;font-weight:700}.challenge-chevron{color:var(--text-muted);opacity:.6}.challenge-item-btn.active .challenge-chevron{color:var(--accent-amber);opacity:1}.challenge-detail-area{flex:1;height:100%;padding:24px 32px;overflow-y:auto}.challenge-detail-content{flex-direction:column;gap:20px;max-width:800px;margin:0 auto;display:flex}.challenge-detail-header{border-bottom:1px solid var(--border-color);padding-bottom:16px}.header-tags{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.challenge-title{color:var(--text-primary);margin-bottom:8px;font-size:22px;font-weight:800}.challenge-description{color:var(--text-secondary);font-size:14px;line-height:1.6}.challenge-action-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.btn-starter-code{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));color:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:8px 16px;font-size:13px}.btn-starter-code:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-toggle-hint{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 14px;font-size:12px}.btn-toggle-hint:hover{background:var(--bg-tertiary);color:var(--text-primary)}.hint-card{border-left:4px solid var(--accent-cyan);padding:16px 20px}.hint-title{color:var(--accent-cyan);margin-bottom:8px;font-size:13px;font-weight:700}.hint-list{color:var(--text-secondary);padding-left:20px;font-size:12px;line-height:1.6}.io-spec-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.io-spec-card{padding:14px 18px}.spec-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px;font-size:12px;font-weight:700}.spec-desc{color:var(--text-primary);font-size:13px;line-height:1.5}.autograder-section{border-left:4px solid var(--accent-amber);margin-bottom:30px;padding:20px 24px}.autograder-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.autograder-title{color:var(--text-primary);align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.btn-run-tests{background:linear-gradient(135deg, var(--accent-amber), #ea580c);color:#fff;border-radius:var(--radius-sm);padding:8px 18px;font-size:13px;box-shadow:0 2px 10px #f59e0b4d}.btn-run-tests:hover{filter:brightness(1.1);transform:translateY(-1px)}.autograder-help{color:var(--text-muted);font-size:12px;line-height:1.5}.test-results-container{flex-direction:column;gap:14px;margin-top:16px;display:flex}.congrats-banner{border-radius:var(--radius-md);background:var(--accent-emerald-glow);color:var(--accent-emerald);border:1px solid #10b98166;align-items:center;gap:12px;padding:14px 18px;display:flex}.congrats-banner p{color:var(--text-secondary);margin-top:2px;font-size:12px}.failed-banner{border-radius:var(--radius-md);background:var(--accent-rose-glow);color:var(--accent-rose);border:1px solid #f43f5e66;align-items:center;gap:12px;padding:14px 18px;display:flex}.failed-banner p{color:var(--text-secondary);margin-top:2px;font-size:12px}.test-cases-table{border-collapse:collapse;width:100%;font-size:12px}.test-cases-table th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border-color);padding:8px 10px;font-size:11px;font-weight:600}.test-cases-table td{border-bottom:1px solid var(--border-color);padding:10px}.row-pass{background:#10b9810d}.row-fail{background:#f43f5e0d}.font-mono{font-family:var(--font-mono)}.badge-rose{background:var(--accent-rose-glow);color:var(--accent-rose);border:1px solid #f43f5e4d}@media (width<=768px){.io-spec-grid{grid-template-columns:1fr}}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-dialog{border-color:var(--border-color-hover);width:100%;max-width:760px;max-height:85vh;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-title-row{align-items:center;gap:10px;display:flex}.modal-title{color:var(--text-primary);font-size:16px;font-weight:700}.btn-modal-close{color:var(--text-muted);border-radius:var(--radius-sm);width:32px;height:32px}.btn-modal-close:hover{background:var(--bg-primary);color:var(--text-primary)}.modal-search-bar{background:var(--bg-primary);border-bottom:1px solid var(--border-color);align-items:center;gap:10px;padding:12px 20px;display:flex}.search-icon{color:var(--text-muted)}.search-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:13px}.modal-body-scroll{flex-direction:column;flex:1;gap:24px;padding:20px;display:flex;overflow-y:auto}.cheat-section-title{color:var(--text-primary);align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:700;display:flex}.cheat-table-wrapper{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.cheat-table{border-collapse:collapse;width:100%;font-size:12px}.cheat-table th{text-align:left;background:var(--bg-tertiary);color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid var(--border-color);padding:10px 14px;font-size:11px;font-weight:600}.cheat-table td{border-bottom:1px solid var(--border-color);color:var(--text-secondary);padding:10px 14px;line-height:1.5}.font-semibold{font-weight:600}.no-result{text-align:center;color:var(--text-muted);padding:20px;font-style:italic}.tips-box{border-radius:var(--radius-md);background:#38bdf814;border:1px solid #38bdf840;padding:16px 20px}.tips-title{color:var(--accent-cyan);margin-bottom:8px;font-size:13px;font-weight:700}.tips-list{color:var(--text-secondary);padding-left:20px;font-size:12px;line-height:1.7}.tips-list code{background:var(--bg-primary);color:var(--accent-cyan);font-family:var(--font-mono);border-radius:4px;padding:1px 5px}.app-container{background:var(--bg-primary);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.workspace-main{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.curriculum-workspace-layout,.challenges-workspace-layout{width:100%;height:100%;display:flex;overflow:hidden}.curriculum-pane,.challenges-pane{border-right:1px solid var(--border-color);flex:1;min-width:0;height:100%;overflow:hidden}.studio-pane{background:var(--bg-secondary);flex-direction:column;width:48%;min-width:420px;height:100%;display:flex}.studio-split-vertical{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.editor-half{border-bottom:1px solid var(--border-color);flex:1.1;min-height:180px;overflow:hidden}.inspector-half{background:var(--bg-primary);flex-direction:column;flex:.9;min-height:180px;display:flex;overflow:hidden}.playground-workspace-layout{width:100%;height:100%;display:flex;overflow:hidden}.playground-editor-pane{border-right:1px solid var(--border-color);background:var(--bg-secondary);flex-direction:column;flex:1.1;min-width:0;height:100%;display:flex}.playground-editor-wrapper{flex:1;min-height:0;overflow:hidden}.playground-inspector-pane{background:var(--bg-primary);flex-direction:column;flex:.9;min-width:380px;height:100%;display:flex}.studio-tab-bar{background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;padding:6px 10px;display:flex;overflow-x:auto}.studio-tab-btn{border-radius:var(--radius-sm);color:var(--text-muted);white-space:nowrap;padding:5px 12px;font-size:11px;font-weight:600}.studio-tab-btn:hover{color:var(--text-primary);background:var(--bg-primary)}.studio-tab-btn.active{background:var(--bg-card);color:var(--accent-cyan);box-shadow:var(--shadow-sm)}.tab-pill{background:var(--accent-cyan-glow);color:var(--accent-cyan);border-radius:var(--radius-full);margin-left:2px;padding:1px 5px;font-size:9px}.inspector-content{background:var(--bg-primary);flex:1;min-height:0;padding:6px;overflow:hidden}@media (width<=1024px){.curriculum-workspace-layout,.challenges-workspace-layout,.playground-workspace-layout{flex-direction:column}.curriculum-pane,.challenges-pane,.studio-pane,.playground-editor-pane,.playground-inspector-pane{width:100%;min-width:0;height:50%}.curriculum-pane,.challenges-pane,.playground-editor-pane{border-right:none;border-bottom:2px solid var(--border-color)}}