:root{--primary:#6366f1;--primary-light:#818cf8;--primary-dark:#4f46e5;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--bg-main:#f8fafc;--bg-panel:#fff;--bg-sidebar:#f1f5f9;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--border:#e2e8f0;--border-focus:#6366f1;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 15px #0000001a;--hint-bg:#fef9c3;--hint-text:#92400e;--tip-bg:#fef9c3;--tip-heading:#92400e;--tip-text:#78350f;--hover-bg:var(--border);--problem-hover:#fef2f2;--nav-hover:#ede9fe;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--font-mono:"Fira Code", "JetBrains Mono", "Cascadia Code", monospace;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-main);color:var(--text-primary);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;line-height:1.5}[dir=rtl] body{font-family:"Heebo", var(--font-sans)}button{cursor:pointer;font-family:inherit;font-size:inherit;touch-action:manipulation;background:0 0;border:none}button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}code{font-family:var(--font-mono)}[data-theme=dark]{--primary:#818cf8;--primary-light:#a5b4fc;--primary-dark:#6366f1;--success:#4ade80;--warning:#fbbf24;--error:#f87171;--bg-main:#0f172a;--bg-panel:#1e293b;--bg-sidebar:#1a2332;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--border:#334155;--border-focus:#818cf8;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 6px #00000040;--shadow-lg:0 10px 15px #0000004d;--hint-bg:#2e2a1e;--hint-text:#fbbf24;--tip-bg:#1e2a1e;--tip-heading:#4ade80;--tip-text:#86efac;--hover-bg:#293548;--problem-hover:#2a1e1e;--nav-hover:#292548}[data-theme=dark] body{background:var(--bg-main);color:var(--text-primary)}.app{height:100dvh;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;overflow:hidden}.app-header{padding:8px 20px;padding-top:max(8px, env(safe-area-inset-top));color:#fff;box-shadow:var(--shadow-md);z-index:10;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}[dir=rtl] .app-header{direction:rtl}.header-left{align-items:baseline;gap:12px;display:flex}.app-title{letter-spacing:-.5px;font-size:22px;font-weight:700}.app-tagline{opacity:.85;font-size:13px}.header-right{align-items:center;gap:12px;display:flex}.lang-toggle{border-radius:var(--radius-md);color:#fff;background:#ffffff26;padding:6px 14px;font-size:14px;font-weight:500;transition:background .2s}.main-layout{flex:1;display:flex;overflow:hidden}.sidebar{background:var(--bg-sidebar);border-inline-end:1px solid var(--border);flex-direction:column;width:220px;min-width:220px;padding:0;display:flex;overflow-y:auto}.sidebar-tabs{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.sidebar-tab{color:var(--text-muted);text-align:center;border-bottom:2px solid #0000;flex:1;padding:10px 4px;font-size:11px;font-weight:600;transition:all .15s}.sidebar-tab:hover{color:var(--text-primary);background:var(--border)}.sidebar-tab.active{color:var(--primary);border-bottom-color:var(--primary)}.sidebar-content{flex:1;min-height:0;overflow-y:auto}.commands-panel{flex-direction:column;gap:8px;padding:12px;display:flex}[dir=rtl] .sidebar{border-inline-end:none;border-inline-start:1px solid var(--border)}.sidebar-title{color:var(--text-primary);font-size:15px;font-weight:600}.sidebar-hint{color:var(--text-muted);margin-bottom:8px;font-size:12px}.sidebar-categories{flex-direction:column;gap:4px;display:flex}.command-category{border-radius:var(--radius-sm);overflow:hidden}.category-header{width:100%;color:var(--text-secondary);text-align:start;border-radius:var(--radius-sm);align-items:center;gap:6px;padding:8px 10px;font-size:13px;font-weight:600;transition:background .15s;display:flex}.category-header:hover{background:var(--border)}.category-commands{flex-wrap:wrap;gap:4px;padding:4px 4px 8px;display:flex}.command-block{border-radius:var(--radius-sm);background:var(--bg-panel);border:1px solid var(--border);font-size:12px;font-family:var(--font-mono);color:var(--primary);white-space:nowrap;padding:5px 10px;transition:all .15s}.command-block:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.editor-section{border-inline-end:1px solid var(--border);flex-direction:column;flex:1;min-width:0;display:flex}[dir=rtl] .editor-section{border-inline-end:none;border-inline-start:1px solid var(--border)}.editor-panel{flex:1;min-height:0;overflow:hidden}.code-editor{height:100%}.canvas-section{background:var(--bg-panel);flex-direction:column;width:420px;min-width:320px;display:flex}.toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;display:flex}[dir=rtl] .toolbar{direction:rtl}.toolbar-controls{gap:6px;display:flex}.toolbar-btn{border-radius:var(--radius-md);align-items:center;gap:5px;padding:7px 14px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.run-btn{background:var(--success);color:#fff}.run-btn:hover{box-shadow:var(--shadow-sm);background:#16a34a;transform:translateY(-1px)}.step-btn{background:var(--primary-light);color:#fff}.step-btn:hover:not(:disabled){background:var(--primary);transform:translateY(-1px)}.step-btn:disabled{opacity:.5;cursor:not-allowed}.reset-btn{background:var(--warning);color:#fff}.reset-btn:hover{background:#d97706;transform:translateY(-1px)}.toolbar-speed{color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.toolbar-speed input[type=range]{width:80px;accent-color:var(--primary)}.speed-value{font-family:var(--font-mono);min-width:32px;font-weight:600}.toolbar-examples{color:var(--text-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.toolbar-examples select{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-panel);color:var(--text-primary);cursor:pointer;padding:5px 8px;font-size:12px}.turtle-canvas{border-bottom:1px solid var(--border);flex:1;min-height:200px}.turtle-readout{font-size:12px;font-family:var(--font-mono);color:var(--text-muted);background:var(--bg-sidebar);justify-content:center;gap:16px;padding:6px 12px;display:flex}.problems-panel{border-top:1px solid var(--border);background:var(--bg-panel);flex-direction:column;max-height:200px;display:flex}.problems-panel.collapsed{max-height:36px}.problems-header{color:var(--text-primary);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 14px;font-size:13px;font-weight:600;display:flex}[dir=rtl] .problems-header{direction:rtl}.problems-header-left{align-items:center;gap:8px;display:flex}.problems-count{background:var(--border);color:var(--text-secondary);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:500}.problems-summary{gap:10px;font-size:12px;display:flex}.error-count{color:var(--error);font-weight:600}.warning-count{color:var(--warning);font-weight:600}.problems-list{padding:4px;overflow-y:auto}.no-problems{text-align:center;color:var(--success);padding:12px;font-size:13px}.problem-item{text-align:start;border-radius:var(--radius-sm);cursor:pointer;outline:none;align-items:center;gap:8px;width:100%;padding:6px 10px;font-family:inherit;font-size:13px;transition:background .1s;display:flex}.problem-item:focus-visible{box-shadow:0 0 0 2px var(--primary)}[dir=rtl] .problem-item{direction:rtl}.problem-item:hover{background:var(--problem-hover)}.severity-icon.error{color:var(--error)}.severity-icon.warning{color:var(--warning)}.severity-icon.info{color:var(--primary)}.problem-line{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;font-size:11px}.problem-message{color:var(--text-primary);flex:1}.problem-fix-btn{border:1px solid var(--primary);background:color-mix(in srgb, var(--primary) 12%, transparent);color:var(--primary);white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;gap:4px;padding:3px 10px;font-size:12px;font-weight:600;transition:background .15s,transform .1s;display:inline-flex}.problem-fix-btn:hover{background:color-mix(in srgb, var(--primary) 22%, transparent)}.problem-fix-btn:active{transform:scale(.96)}.fix-all-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:5px;padding:4px 12px;font-size:12px;font-weight:700;transition:filter .15s,transform .1s;display:inline-flex}.fix-all-btn:hover{filter:brightness(1.1)}.fix-all-btn:active{transform:scale(.96)}.modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-panel);border-radius:var(--radius-xl);width:100%;max-width:520px;max-height:85vh;box-shadow:var(--shadow-lg);padding:32px;position:relative;overflow-y:auto}[dir=rtl] .modal-content{text-align:right;direction:rtl}.modal-close{top:12px;border-radius:var(--radius-sm);color:var(--text-muted);padding:6px;transition:color .15s;position:absolute;inset-inline-end:12px}.modal-close:hover{color:var(--text-primary)}.modal-title{margin-bottom:8px;font-size:24px;font-weight:700}.modal-subtitle{color:var(--text-secondary);margin-bottom:20px;font-size:15px}.modal-section{margin-bottom:20px}.modal-section h3{margin-bottom:8px;font-size:16px;font-weight:600}.modal-section p{color:var(--text-secondary);font-size:14px}.welcome-steps{color:var(--text-secondary);padding-inline-start:20px;font-size:14px}.welcome-steps li{margin-bottom:6px}.turtle-tip{background:var(--tip-bg);border-radius:var(--radius-md);padding:12px 16px}.turtle-tip h3{color:var(--tip-heading)}.turtle-tip p{color:var(--tip-text)}.modal-cta{border-radius:var(--radius-md);background:var(--primary);color:#fff;text-align:center;width:100%;padding:12px;font-size:16px;font-weight:600;transition:background .2s;display:block}.modal-cta:hover{background:var(--primary-dark)}.tutorial-panel,.challenge-panel,.concept-browser{max-height:100%;padding:12px;overflow-y:auto}.tutorial-card,.challenge-card,.concept-card{border-radius:var(--radius-md);background:var(--bg-panel);border:1px solid var(--border);text-align:start;flex-direction:column;gap:4px;width:100%;margin-bottom:6px;padding:10px 12px;transition:all .15s;display:flex}.tutorial-card:hover,.challenge-card:hover,.concept-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}.tutorial-card-title,.challenge-title,.concept-title{font-size:14px;font-weight:600}.tutorial-card-desc,.concept-desc{color:var(--text-muted);font-size:12px}.back-btn{color:var(--primary);border-radius:var(--radius-sm);align-items:center;gap:4px;margin-bottom:8px;padding:4px 8px;font-size:13px;display:inline-flex}.back-btn:hover{background:var(--nav-hover)}.hint-btn{color:var(--warning);background:var(--hint-bg);border-radius:var(--radius-sm);align-items:center;gap:4px;padding:4px 10px;font-size:13px;display:inline-flex}.hint-text{color:var(--text-secondary);background:var(--hint-bg);border-radius:var(--radius-sm);margin-top:4px;padding:8px;font-size:13px}.load-code-btn{border-radius:var(--radius-md);background:var(--primary);color:#fff;align-items:center;gap:6px;margin-top:8px;padding:8px 16px;font-size:13px;font-weight:600;transition:background .15s;display:inline-flex}.load-code-btn:hover{background:var(--primary-dark)}.check-code-btn{border-radius:var(--radius-md);background:var(--primary);color:#fff;justify-content:center;align-items:center;gap:6px;width:100%;margin-top:10px;padding:9px 16px;font-size:13px;font-weight:600;transition:background .15s;display:inline-flex}.check-code-btn:hover{background:var(--primary-dark)}.challenge-feedback{border-radius:var(--radius-md);align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;font-size:13px;line-height:1.4;display:flex}.challenge-feedback.success{background:var(--hint-bg);color:var(--text-primary);border:1px solid #22c55e}.challenge-feedback.retry{background:var(--hint-bg);color:var(--text-primary);border:1px solid #f59e0b}.try-btn{border-radius:var(--radius-sm);background:var(--primary-light);color:#fff;padding:5px 12px;font-size:12px;font-weight:600}.try-btn:hover{background:var(--primary)}.difficulty-badge{color:#fff;border-radius:999px;align-self:flex-start;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.concept-code{background:var(--bg-sidebar);border-radius:var(--radius-sm);font-family:var(--font-mono);padding:8px 12px;font-size:13px;overflow-x:auto}.step-navigation{justify-content:space-between;margin-top:16px;display:flex}.nav-btn{border-radius:var(--radius-sm);color:var(--primary);border:1px solid var(--border);align-items:center;gap:4px;padding:6px 12px;font-size:13px;display:flex}.nav-btn:hover:not(:disabled){background:var(--nav-hover)}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.shortcuts-modal{max-width:480px}.shortcuts-list{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.shortcut-row{border-radius:var(--radius-sm);background:var(--bg-sidebar);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.shortcut-label{color:var(--text-primary);font-size:14px}.shortcut-keys{align-items:center;gap:4px;display:flex}.shortcut-key{background:var(--bg-panel);border:1px solid var(--border);min-width:28px;height:26px;box-shadow:0 1px 0 var(--border);font-family:var(--font-mono);color:var(--text-primary);border-radius:4px;justify-content:center;align-items:center;padding:2px 8px;font-size:12px;font-weight:600;display:inline-flex}.shortcut-separator{color:var(--text-muted);font-size:12px}.celebration-overlay{pointer-events:none;z-index:100;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:0;border-radius:2px;animation:linear forwards confetti-fall;position:absolute;top:-10px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)translate(0)rotate(0)}to{opacity:0;transform:translateY(100vh) translateX(var(--drift,0px)) rotate(var(--rotation,360deg))}}.editor-toolbar{border-bottom:1px solid var(--border);background:var(--bg-sidebar);align-items:center;gap:4px;padding:4px 8px;display:flex}.editor-toolbar-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-secondary);justify-content:center;align-items:center;transition:all .15s;display:flex}.editor-toolbar-btn:hover{background:var(--border);color:var(--text-primary)}.editor-toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.font-size-controls{align-items:center;gap:2px;margin-inline-start:auto;display:flex}.font-size-label{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);text-align:center;min-width:36px}.theme-toggle{border-radius:var(--radius-md);color:#fff;background:#ffffff26;align-items:center;gap:5px;padding:6px 14px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.theme-toggle:hover{background:#ffffff40}.shortcuts-toggle{border-radius:var(--radius-md);color:#fff;background:#ffffff26;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:background .2s;display:flex}.shortcuts-toggle:hover{background:#ffffff40}.lang-dropdown{position:relative}.lang-toggle{border-radius:var(--radius-md);color:#fff;background:#ffffff26;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.lang-toggle:hover{background:#ffffff40}.lang-flag{font-size:16px;line-height:1}.lang-code{font-weight:600}.lang-chevron{transition:transform .2s}.lang-chevron.open{transform:rotate(180deg)}.lang-menu{top:calc(100% + 4px);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-md);min-width:160px;box-shadow:var(--shadow-lg);z-index:200;padding:4px;position:absolute;inset-inline-end:0;overflow:hidden}.lang-option{border-radius:var(--radius-sm);width:100%;color:var(--text-primary);text-align:start;align-items:center;gap:8px;padding:8px 12px;font-size:14px;transition:background .1s;display:flex}.lang-option:hover{background:var(--hover-bg)}.lang-option.active{background:color-mix(in srgb, var(--primary) 12%, transparent);color:var(--primary);font-weight:600}.lang-name{flex:1}.lang-check{color:var(--primary);font-weight:700}.resize-handle{z-index:5;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s;display:flex}.resize-handle-horizontal{cursor:col-resize;background:var(--border);width:6px}.resize-handle-horizontal:hover,.resize-handle-horizontal:focus-visible{background:var(--primary)}.resize-handle-vertical{cursor:row-resize;background:var(--border);height:6px}.resize-handle-vertical:hover,.resize-handle-vertical:focus-visible{background:var(--primary)}.resize-grip{background:var(--text-muted);opacity:.5;border-radius:1px;width:2px;height:20px}.resize-handle:hover .resize-grip,.resize-handle:focus-visible .resize-grip{opacity:1;background:#fff}.resize-handle-vertical .resize-grip{width:20px;height:2px}.mobile-sidebar-toggle{border-radius:var(--radius-md);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.mobile-sidebar-toggle:hover{background:#ffffff26}.sidebar-backdrop{z-index:40;background:#0006;position:fixed;inset:0}.toolbar-secondary{align-items:center;gap:12px;display:flex}@media (width<=640px){.app-header{padding:6px 12px;padding-top:max(6px, env(safe-area-inset-top))}.header-left{align-items:center;gap:8px}.app-title{font-size:17px}.header-right{gap:6px}.shortcuts-toggle{width:44px;height:44px;font-size:15px}.theme-toggle{justify-content:center;min-width:44px;min-height:44px;padding:8px}.lang-toggle{justify-content:center;min-width:44px;min-height:44px;padding:8px 10px;font-size:13px}.main-layout{flex-direction:column;position:relative}.sidebar{z-index:50;border-inline-end:1px solid var(--border);max-width:80vw;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);width:280px!important;min-width:0!important}[dir=rtl] .sidebar{border-inline-end:none;border-inline-start:1px solid var(--border);left:auto;right:0;transform:translate(100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-backdrop{display:block}.editor-section{border-inline-end:none;flex:50%;min-height:0}[dir=rtl] .editor-section{border-inline-start:none}.canvas-section{flex:50%;min-height:0;width:100%!important;min-width:0!important}.toolbar{flex-wrap:nowrap;gap:8px;padding:8px 10px}.toolbar-secondary{flex-shrink:0;gap:8px}.toolbar-speed{gap:4px;font-size:11px}.toolbar-speed label{display:none}.toolbar-speed input[type=range]{width:60px}.toolbar-examples{gap:4px;font-size:11px}.toolbar-examples label{display:none}.toolbar-examples select{min-width:44px;min-height:44px;padding:6px 8px;font-size:13px}.turtle-canvas{min-height:0}.turtle-readout{gap:10px;padding:4px 8px;font-size:11px}.editor-toolbar{padding:2px 4px}.editor-toolbar-btn{width:44px;height:44px}.font-size-label{min-width:30px;font-size:10px}.problems-panel{max-height:120px}.problems-panel.collapsed{max-height:40px}.problems-header{min-height:40px;padding:6px 10px}.problem-item{min-height:44px;padding:8px}.resize-handle{display:none!important}.modal-content{max-height:90vh;padding:20px}.modal-title{font-size:20px}.modal-overlay{padding:12px}}@media (width<=380px){.toolbar-btn span{display:none}.toolbar-btn{justify-content:center;min-width:44px;min-height:44px;padding:8px 10px}.toolbar-speed input[type=range]{width:50px}}@media (width>=641px) and (width<=1024px){.main-layout{flex-direction:column}.sidebar{border-inline-end:none;border-bottom:1px solid var(--border);max-height:160px;width:100%!important;min-width:0!important}[dir=rtl] .sidebar{border-inline-start:none}.sidebar-tabs{overflow-x:auto}.editor-section{border-inline-end:none;flex:45%;min-height:0}[dir=rtl] .editor-section{border-inline-start:none}.canvas-section{flex:55%;min-height:0;width:100%!important;min-width:0!important}.resize-handle{display:none!important}.editor-toolbar-btn{width:36px;height:36px}}