.sidebar{width:280px;background:var(--surface-color);border-right:1px solid var(--border-color);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;transition:width .3s ease;overflow:hidden;z-index:100}.sidebar.collapsed{width:60px}.sidebar-header{padding:var(--spacing-lg) var(--spacing-md);border-bottom:1px solid var(--border-color)}.logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:700;color:var(--primary-color)}.logo-icon{font-size:2rem}.logo-text{white-space:nowrap}.sidebar.collapsed .logo-text{display:none}.tagline{margin-top:var(--spacing-xs);font-size:.875rem;color:var(--text-muted);white-space:nowrap}.nav-section{flex:1;padding:var(--spacing-md) var(--spacing-sm)}.nav-item{width:100%;padding:var(--spacing-sm);margin-bottom:var(--spacing-xs);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-color);font-family:var(--font-sans);display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;transition:all .2s ease;text-align:left}.nav-item:hover{background:var(--surface-secondary)}.nav-item.active{background:var(--primary-color);color:#fff}.nav-icon{font-size:1.25rem;width:24px;text-align:center}.nav-content{display:flex;flex-direction:column;gap:2px;white-space:nowrap}.nav-title{font-size:.875rem;font-weight:600}.nav-description{font-size:.75rem;opacity:.8}.sidebar-footer{padding:var(--spacing-md);border-top:1px solid var(--border-color)}.info-box{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--surface-secondary);border-radius:var(--radius-sm)}.info-icon{font-size:1rem}.info-text{font-size:.75rem;color:var(--text-muted)}@media (max-width: 768px){.sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border-color)}.sidebar.collapsed{width:100%}}.function-selector{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:var(--spacing-md)}.function-selector label{font-weight:600;color:var(--text-muted);font-size:.875rem}.function-dropdown{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-color);font-family:var(--font-sans);font-size:.875rem;cursor:pointer;transition:all .2s ease}.function-dropdown:hover{border-color:var(--primary-color)}.function-dropdown:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #00c8511a}.function-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);height:auto;min-height:fit-content;overflow:visible}.function-header{display:flex;align-items:center;gap:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color)}.function-icon{font-size:2rem}.function-name{font-size:1.25rem;font-weight:600;color:var(--primary-color)}.function-description{color:var(--text-color);line-height:1.5;font-size:.875rem}.function-syntax{background:var(--surface-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.function-syntax h4{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--spacing-xs)}.syntax-code{font-family:var(--font-mono);font-size:.875rem;background:var(--background-color);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);display:inline-block}.syntax-t,.syntax-paren{color:#d4d4d4}.syntax-command{color:#569cd6}.syntax-param{color:var(--syntax-number)}.key-concepts h4{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;color:var(--text-muted);font-weight:600}.concept-grid{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.concept-desc{font-size:.75rem;color:var(--text-muted);flex:1;white-space:nowrap}.function-parameters h4,.function-examples h4,.function-tips h4{font-size:.875rem;color:var(--text-muted);margin-bottom:var(--spacing-sm)}.parameter{font-size:.875rem;margin-bottom:var(--spacing-xs);display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.param-name{font-weight:600;color:var(--syntax-number)}.param-desc{color:var(--text-color)}.param-unit{color:var(--text-muted);font-size:.75rem}.function-examples{display:flex;flex-direction:column;gap:var(--spacing-sm)}.example{background:var(--surface-secondary);padding:var(--spacing-sm);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:var(--spacing-xs)}.example-code{font-family:var(--font-mono);font-size:.875rem}.example-desc{font-size:.75rem;color:var(--text-muted)}.function-tips{background:var(--surface-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border-left:3px solid var(--primary-color)}.tip{font-size:.875rem;color:var(--text-color);margin-bottom:var(--spacing-xs);line-height:1.4}.tip:last-child{margin-bottom:0}@media (max-width: 768px){.function-card{padding:var(--spacing-md)}.function-name{font-size:1rem}.function-icon{font-size:1.5rem}}.code-display-container{display:flex;flex-direction:column;height:100%;background:var(--surface-color, #1a1a1a);border:1px solid var(--border-color, #333);border-radius:var(--radius-md, 8px);overflow:hidden}.code-display-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--surface-secondary, #0f0f0f);border-bottom:1px solid var(--border-color, #333)}.code-display-header h4{margin:0;font-size:.875rem;font-weight:600;color:var(--text-color, #fff)}.code-stats{font-size:.75rem;color:var(--text-muted, #999)}.code-display-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.6;background:var(--code-background, #0f0f0f)}.code-display-content.empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted, #999);font-style:italic}.code-lines{min-width:100%}.code-line{display:block;padding:.125rem 1rem;white-space:pre;transition:background-color .2s ease;position:relative}.code-line:hover{background:rgba(255,255,255,.03)}.line-number{display:inline-block;min-width:2.5rem;margin-right:1rem;padding-right:.5rem;color:var(--text-muted, #666);text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid var(--border-color, #333);vertical-align:top}.code-content{display:inline;white-space:pre;font-family:inherit}.code-line .keyword{color:#ff79c6;font-weight:600}.code-line .function{color:#50fa7b}.code-line .string{color:#f1fa8c}.code-line .number{color:#bd93f9}.code-line .comment{color:#6272a4;font-style:italic}.code-line.highlighted,.code-line.active{background:rgba(0,200,81,.15);border-left:3px solid var(--primary-color, #00c851);padding-left:calc(1rem - 3px);animation:highlightPulse .5s ease}@keyframes highlightPulse{0%{background:rgba(0,200,81,.3)}to{background:rgba(0,200,81,.15)}}.iteration-indicator{color:#8be9fd;font-weight:600;margin-left:1rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.code-line.highlighted.loop-header{background:rgba(189,147,249,.15);border-left-color:#bd93f9}.code-display-footer{padding:.5rem 1rem;background:var(--surface-secondary, #0f0f0f);border-top:1px solid var(--border-color, #333)}.iteration-status{font-size:.875rem;color:#8be9fd;font-weight:600}.code-display-content::-webkit-scrollbar{width:8px}.code-display-content::-webkit-scrollbar-track{background:var(--surface-color, #1a1a1a)}.code-display-content::-webkit-scrollbar-thumb{background:var(--border-color, #333);border-radius:4px}.code-display-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted, #666)}@media (max-width: 768px){.code-display-content{font-size:.75rem}.line-number{min-width:2rem;margin-right:.5rem}.code-line{padding:.125rem .5rem}}.dark .code-display-container{background:#0f0f0f}.dark .code-display-content{background:#000}.light .code-display-container{background:#fff;border-color:#e0e0e0}.light .code-display-content{background:#fafafa}.light .code-line.highlighted{background:rgba(0,200,81,.1)}.light .keyword{color:#d73a49}.light .function{color:#6f42c1}.light .string{color:#032f62}.light .number{color:#005cc5}.light .comment{color:#6a737d}.adjustable,.adjustable.number{display:inline-block;background:rgba(0,200,81,.15)!important;color:var(--primary-color)!important;padding:2px 6px;margin:0 2px;border-radius:4px;cursor:pointer;font-weight:600;min-width:24px;text-align:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.adjustable:hover,.adjustable.number:hover{background:rgba(0,200,81,.3)!important;box-shadow:0 0 0 2px #00c85133;transform:translateY(-1px)}.adjustable.active{background:var(--primary-color);color:#fff}.inline-control{position:relative;margin:4px 0;padding:0;animation:slideDown .2s ease}.control-inner{background:var(--surface-secondary, #0f0f0f);border:1px solid var(--border-color, #333);border-radius:4px;padding:8px 12px;margin:0 1rem}.inline-control label{display:flex;align-items:center;gap:12px}.control-label{font-size:.875rem;color:var(--text-color);font-weight:600;min-width:80px}.control-slider{flex:1;height:6px;border-radius:3px;background:var(--border-color);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary-color);cursor:pointer;transition:all .2s ease}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px #00c8511a}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:none;transition:all .2s ease}.control-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px #00c8511a}.control-value{font-size:.875rem;font-weight:600;color:var(--primary-color);min-width:45px;text-align:right}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.light .adjustable{background:rgba(0,200,81,.1)}.light .adjustable:hover{background:rgba(0,200,81,.2)}.light .control-inner{background:#fff;border-color:#e0e0e0}.light .control-slider{background:#e0e0e0}.turtle-visualizer{display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:500px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.turtle{filter:drop-shadow(0 2px 4px rgba(0,200,81,.5));transition:transform .3s ease-in-out}.path-line{stroke-linecap:round;fill:none}.path-preview{stroke:#333;stroke-width:1;stroke-dasharray:5,5;fill:none;opacity:.5}.turtle-code-display{flex:1;min-height:200px;border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:auto;background:#1e1e1e}.turtle-code-display .code-display-header{display:none}.turtle-code-display .code-display-content{background:#1e1e1e;padding:var(--spacing-sm);font-family:var(--font-mono);font-size:.8rem;line-height:1.4}.code-line.active{background:rgba(0,200,81,.2);border-left:3px solid var(--primary-color);padding-left:calc(var(--spacing-xs) + 9px);animation:highlightPulse .5s ease}.code-line .comment{color:var(--syntax-comment);font-style:italic}@media (max-height: 768px){.turtle-visualizer{height:auto;min-height:450px}.canvas-container{min-height:200px}.turtle-canvas{width:200px;height:200px}.code-display{min-height:100px;font-size:.75rem}}@media (max-width: 768px){.turtle-visualizer{height:auto;min-height:500px}.code-canvas-container{flex-direction:column;gap:var(--spacing-sm)}.canvas-section{width:100%}.canvas-container{min-height:240px}.control-buttons{padding:var(--spacing-xs)}.btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}}.turtle-chapter{max-width:1400px;margin:0 auto;animation:fadeIn .3s ease-in}.loop-explanation{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.explanation-header h3{font-size:1.125rem;font-weight:600;color:var(--primary-color);margin:0;display:flex;align-items:center;gap:var(--spacing-xs)}.explanation-content{display:flex;flex-direction:column;gap:var(--spacing-md)}.explanation-intro{color:var(--text-color);line-height:1.5;font-size:.875rem;margin:0}.syntax-section{background:var(--surface-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.syntax-section h4{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;color:var(--text-color);font-weight:600}.syntax-example{background:#1e1e1e;padding:var(--spacing-md);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875rem;line-height:1.4}.code-line{color:#d4d4d4;margin:2px 0}.code-line.indented{margin-left:0}.syntax-keyword{color:var(--syntax-keyword);font-weight:600}.syntax-function{color:var(--syntax-function)}.syntax-number{color:var(--syntax-number)}.syntax-variable{color:#e5c07b}.syntax-turtle,.syntax-method{color:#d4d4d4}.indentation-highlight{background:rgba(0,200,81,.2);padding:0 2px;border-radius:2px;position:relative}.indentation-highlight:after{content:"4 spaces";position:absolute;bottom:-20px;left:0;font-size:.7rem;color:var(--primary-color);font-weight:600;background:var(--surface-color);padding:2px 4px;border-radius:2px;border:1px solid var(--border-color);white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}.indentation-highlight:hover:after{opacity:1}.key-concepts h4{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;color:var(--text-color);font-weight:600}.concept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.concept-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs);background:var(--surface-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.concept-code{font-family:var(--font-mono);font-size:.75rem;font-weight:600;background:var(--background-color);padding:2px 6px;border-radius:3px;border:1px solid var(--border-color);min-width:60px;text-align:center}.concept-desc{font-size:.75rem;color:var(--text-muted);flex:1}.connection-note{background:var(--surface-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);border-left:3px solid var(--primary-color)}.connection-note p{margin:0;font-size:.875rem;color:var(--text-color);line-height:1.4}@media (max-width: 768px){.loop-explanation{padding:var(--spacing-md)}.indentation-demo,.concept-grid{grid-template-columns:1fr}.syntax-example{font-size:.75rem}}.loop-explanation{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.loop-visualizer{display:flex;flex-direction:column;height:calc(100vh - 200px);min-height:500px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.code-canvas-container{flex:1;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--surface-color);overflow:hidden}.code-section,.canvas-section{flex:1;min-width:0;display:flex;flex-direction:column}.code-section h4,.canvas-section h4{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;color:var(--text-color);font-weight:600}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;background:#1e1e1e;padding:var(--spacing-md);position:relative;border:1px solid var(--border-color);border-radius:var(--radius-sm);min-height:200px}.turtle-canvas{border-radius:var(--radius-sm);box-shadow:0 2px 8px #0000004d}.loop-counter{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:rgba(0,200,81,.9);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;animation:pulse 1s ease-in-out infinite;z-index:10}@keyframes pulse{0%,to{opacity:.9}50%{opacity:1}}.control-buttons{flex:0 0 auto;display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--surface-color);border-top:1px solid var(--border-color)}.btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-sans);font-size:.875rem;font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.btn-next{background:var(--primary-color);color:#fff}.btn-next:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-next:disabled{background:var(--border-color);color:var(--text-muted);cursor:not-allowed}.btn-reset{background:var(--surface-secondary);color:var(--text-color);border:1px solid var(--border-color)}.btn-reset:hover{background:var(--background-color);border-color:var(--primary-color)}.loop-code-display{flex:1;min-height:200px;border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:auto;background:#1e1e1e}.loop-code-display .code-display-header{display:none}.loop-code-display .code-display-content{background:#1e1e1e;padding:var(--spacing-sm);font-family:var(--font-mono);font-size:.8rem;line-height:1.4}.loop-code-display .iteration-indicator{color:#8be9fd;font-weight:600}.code-line{padding:2px var(--spacing-xs);margin:2px 0;color:#d4d4d4;transition:all .3s ease;white-space:pre;position:relative;border-radius:2px}.code-line:hover{background:rgba(255,255,255,.05)}.loop-iteration{margin:4px 0;padding:4px var(--spacing-xs)}.loop-iteration.active,.code-line.highlighted{background:rgba(0,200,81,.2);border-left:3px solid var(--primary-color);padding-left:calc(var(--spacing-xs) + 9px);animation:highlightPulse .5s ease}.code-line.highlighted.loop-header{background:rgba(0,200,81,.3);border-left:3px solid var(--primary-color);font-weight:600}@keyframes highlightPulse{0%{background:rgba(0,200,81,.4)}to{background:rgba(0,200,81,.2)}}.code-line .keyword{color:var(--syntax-keyword);font-weight:600}.code-line .function{color:var(--syntax-function)}.code-line .number{color:var(--syntax-number)}.code-line .string{color:var(--syntax-string)}.code-line .indent{display:inline-block}.iteration-counter{color:var(--syntax-comment);font-style:italic;margin-left:var(--spacing-md)}.code-display::-webkit-scrollbar{width:6px}.code-display::-webkit-scrollbar-track{background:var(--surface-color)}.code-display::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-sm)}.code-display::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}@media (max-height: 768px){.loop-visualizer{height:auto;min-height:450px}.canvas-container{flex:0 0 200px}.turtle-canvas{width:200px;height:200px}.code-display{min-height:100px;font-size:.75rem}}@media (max-width: 768px){.loop-visualizer{height:auto;min-height:500px}.code-canvas-container{flex-direction:column;gap:var(--spacing-sm)}.canvas-section{width:100%}.canvas-container{min-height:240px}.control-buttons{padding:var(--spacing-xs)}.btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:.8rem}}.loop-chapter{max-width:1400px;margin:0 auto;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chapter-header{margin-bottom:var(--spacing-xl)}.chapter-header h1{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.chapter-intro{font-size:1rem;color:var(--text-muted);max-width:600px}.chapter-content{display:flex;gap:var(--spacing-lg);min-height:calc(100vh - 200px)}.left-panel{flex:0 0 40%;display:flex;flex-direction:column;gap:var(--spacing-md)}.right-panel{flex:1;min-width:0}.video-space{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);text-align:center}.video-space h3{color:var(--primary-color);margin-bottom:var(--spacing-sm)}.video-space p{color:var(--text-muted);font-style:italic}@media (max-width: 1024px){.chapter-content{flex-direction:column}.left-panel{flex:none;max-width:100%}.right-panel{flex:none}}@media (max-width: 768px){.chapter-header h1{font-size:1.5rem}.chapter-intro{font-size:.875rem}}.app{display:flex;min-height:100vh;background:var(--background-color)}.main-content{flex:1;margin-left:280px;padding:var(--spacing-lg);max-width:100%;overflow-y:auto;transition:margin-left .3s ease}.main-content.sidebar-collapsed{margin-left:60px}@media (max-width: 768px){.app{flex-direction:column}.main-content{margin-left:0;padding:var(--spacing-md)}.main-content.sidebar-collapsed{margin-left:0}}:root{--primary-color: #00C851;--primary-hover: #00E861;--background-color: #0a0a0a;--surface-color: #111;--surface-secondary: #1a1a1a;--text-color: #e0e0e0;--text-muted: #999;--border-color: #333;--syntax-keyword: #C678DD;--syntax-function: #61AFEF;--syntax-number: #E06C75;--syntax-string: #98C379;--syntax-comment: #5C6370;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-mono: "JetBrains Mono", "Courier New", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--background-color);color:var(--text-color);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--surface-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.mono-font{font-family:var(--font-mono)}