*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}:root{--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-code:#1e293b;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-inverse:#ffffff;--accent-primary:#6366f1;--accent-hover:#4f46e5;--accent-light:#e0e7ff;--success:#10b981;--success-light:#d1fae5;--warning:#f59e0b;--warning-light:#fef3c7;--error:#ef4444;--error-light:#fee2e2;--border:#e2e8f0;--border-light:#f1f5f9;--border-focus:#6366f1;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-mono:"JetBrains Mono","Fira Code","SF Mono",Consolas,monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--sidebar-width:0;--preview-width:0;--header-height:60px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--transition-fast:0.15s ease;--transition-normal:0.2s ease;--transition-slow:0.3s ease}[data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-code:#0d1117;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#818cf8;--accent-hover:#a5b4fc;--accent-light:#312e81;--border:#334155;--border-light:#1e293b;--shadow-sm:0 1px 2px 0 rgb(0 0 0/0.3);--shadow-md:0 4px 6px -1px rgb(0 0 0/0.4);--shadow-lg:0 10px 15px -3px rgb(0 0 0/0.5)}@media (min-width:768px){:root{--preview-width:350px}}@media (min-width:1200px){:root{--sidebar-width:260px;--preview-width:400px}}@media (min-width:1600px){:root{--sidebar-width:280px;--preview-width:480px}}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}code,pre{font-family:var(--font-mono);font-size:var(--text-sm)}code{background:var(--bg-tertiary);padding:0.125rem 0.375rem;border-radius:var(--radius-sm);color:var(--accent-primary)}pre{background:var(--bg-code);color:var(--text-inverse);padding:var(--space-4);border-radius:var(--radius-md);overflow-x:auto}pre code{background:none;padding:0;color:inherit}.code-example{background:var(--bg-code)!important;color:var(--text-inverse);padding:var(--space-4);border-radius:var(--radius-md);overflow-x:auto;margin:var(--space-4)0}.code-example code{background:none;padding:0;color:inherit}.code-example-sm{background:var(--bg-code)!important;color:var(--text-inverse);padding:var(--space-3);border-radius:var(--radius-sm);overflow-x:auto;font-size:var(--text-sm)}.code-example-sm code{background:none;padding:0;color:inherit;font-size:inherit}.tutorial-layout{display:flex;flex-direction:column;min-height:100vh}.tutorial-main{display:flex;flex:1;padding-top:var(--header-height)}.tutorial-sidebar{position:fixed;top:var(--header-height);left:0;bottom:0;width:280px;max-width:85vw;background:var(--bg-secondary);border-right:1px solid var(--border);overflow-y:auto;transform:translateX(-100%);transition:transform var(--transition-normal);z-index:40}.tutorial-sidebar.open{transform:translateX(0)}@media (min-width:1200px){.tutorial-sidebar{width:var(--sidebar-width);transform:translateX(0)}}.tutorial-content{flex:1;min-width:0;margin-left:0;margin-right:0;padding:var(--space-6);max-width:100%}@media (min-width:768px){.tutorial-content{margin-right:var(--preview-width);padding:var(--space-8)}}@media (min-width:1200px){.tutorial-content{margin-left:var(--sidebar-width);padding:var(--space-10) var(--space-12)}}.tutorial-preview{display:none;position:fixed;top:var(--header-height);right:0;bottom:0;width:var(--preview-width);background:var(--bg-secondary);border-left:1px solid var(--border);z-index:30}@media (min-width:768px){.tutorial-preview{display:flex;flex-direction:column}}.preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}.preview-frame{flex:1;width:100%;border:none;background:var(--bg-primary)}.tutorial-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--bg-primary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--space-4);z-index:50}.header-left{display:flex;align-items:center;gap:var(--space-3)}.header-center{flex:1;display:flex;justify-content:center}.header-right{display:flex;align-items:center;gap:var(--space-3)}.logo{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-lg);color:var(--text-primary)}.logo-icon{width:32px;height:32px;background:var(--accent-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:var(--text-sm)}.logo-text{display:none}@media (min-width:640px){.logo-text{display:inline}}.menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast)}.menu-btn:hover{background:var(--bg-tertiary)}@media (min-width:1200px){.menu-btn{display:none}}.header-progress{display:none;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}@media (min-width:640px){.header-progress{display:flex}}.progress-bar{width:100px;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--accent-primary);border-radius:var(--radius-full);transition:width var(--transition-slow)}.header-social{display:flex;align-items:center;gap:0.5rem}.header-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;height:34px;padding:0 0.875rem;font-size:0.8125rem;font-weight:500;text-decoration:none;border:1px solid transparent;border-radius:17px;cursor:pointer;transition:all 0.2s ease;font-family:inherit;white-space:nowrap}.header-btn .btn-icon{font-size:0.9375rem;line-height:1;display:flex;align-items:center;justify-content:center}.header-btn .btn-icon svg{width:14px;height:14px}.header-btn-coffee{background:#FFDD00;color:#000000;border-color:#FFDD00}.header-btn-coffee:hover{background:#FFE333;border-color:#FFE333;box-shadow:0 2px 8px rgba(255,221,0,0.4)}.header-btn-coffee:active{transform:scale(0.98)}.header-btn-twitter{background:transparent;color:var(--text-primary);border-color:var(--border)}.header-btn-twitter:hover{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.header-btn-twitter:active{transform:scale(0.98)}.header-btn-share{background:transparent;color:var(--text-secondary);border-color:var(--border)}.header-btn-share:hover{background:var(--accent-primary);color:#ffffff;border-color:var(--accent-primary)}.header-btn-share:active{transform:scale(0.98)}@media (max-width:900px){.header-btn{padding:0 0.75rem;height:32px;font-size:0.75rem}.header-btn .btn-icon{font-size:0.875rem}}@media (max-width:640px){.header-social{gap:0.375rem}.header-btn{width:32px;height:32px;padding:0;border-radius:50%}.header-btn .btn-text{display:none}.header-btn .btn-icon{font-size:1rem}}@media (max-width:400px){.header-social{gap:0.25rem}.header-btn{width:28px;height:28px}.header-btn .btn-icon{font-size:0.875rem}.header-btn .btn-icon svg{width:12px;height:12px}}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.theme-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.sidebar-header{padding:var(--space-4);border-bottom:1px solid var(--border)}.sidebar-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.sidebar-nav{padding:var(--space-4)}.nav-section{margin-bottom:var(--space-6)}.nav-section-title{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-1)}.nav-items{list-style:none}.nav-item{position:relative}.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-link.active{background:var(--accent-light);color:var(--accent-primary);font-weight:500}.nav-link::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:20px;background:var(--accent-primary);border-radius:var(--radius-full);transition:transform var(--transition-fast)}.nav-link.active::before,.nav-link:hover::before{transform:translateY(-50%) scaleY(1)}.nav-icon{width:18px;height:18px;flex-shrink:0}.nav-status{margin-left:auto;width:16px;height:16px;color:var(--success)}.lesson-header{margin-bottom:var(--space-8)}.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4)}.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--accent-primary)}.breadcrumb-separator{color:var(--border)}.lesson-title{font-size:var(--text-3xl);font-weight:700;line-height:var(--leading-tight);color:var(--text-primary);margin-bottom:var(--space-4)}.lesson-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}.lesson-body{max-width:900px}.lesson-body h2{font-size:var(--text-2xl);font-weight:600;margin-top:var(--space-10);margin-bottom:var(--space-4);color:var(--text-primary)}.lesson-body h3{font-size:var(--text-xl);font-weight:600;margin-top:var(--space-8);margin-bottom:var(--space-3);color:var(--text-primary)}.lesson-body p{margin-bottom:var(--space-4);color:var(--text-secondary)}.lesson-body ul,.lesson-body ol{margin-bottom:var(--space-4);padding-left:var(--space-6)}.lesson-body li{margin-bottom:var(--space-2);color:var(--text-secondary)}.editor-container{background:var(--bg-code);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin:var(--space-6)0}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.1)}.editor-tabs{display:flex;gap:var(--space-1)}.editor-tab{padding:var(--space-1) var(--space-3);font-size:var(--text-sm);font-family:var(--font-mono);color:var(--text-muted);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.editor-tab:hover{color:var(--text-inverse);background:rgba(255,255,255,0.1)}.editor-tab.active{color:var(--text-inverse);background:rgba(255,255,255,0.15)}.editor-actions{display:flex;gap:var(--space-2)}.editor-body{min-height:200px}.editor-body .CodeMirror{height:auto;min-height:200px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.btn-primary{background:var(--accent-primary);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--border-focus)}.btn-success{background:var(--success);color:var(--text-inverse)}.btn-success:hover:not(:disabled){filter:brightness(1.1)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.btn-icon{width:36px;height:36px;padding:0}.card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.card:hover{box-shadow:var(--shadow-md)}.callout{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);margin:var(--space-4)0}.callout-icon{flex-shrink:0;width:20px;height:20px}.callout-content{flex:1;font-size:var(--text-sm)}.callout-tip{background:var(--success-light);border-left:3px solid var(--success)}.callout-tip .callout-icon{color:var(--success)}.callout-warning{background:var(--warning-light);border-left:3px solid var(--warning)}.callout-warning .callout-icon{color:var(--warning)}.callout-error{background:var(--error-light);border-left:3px solid var(--error)}.callout-error .callout-icon{color:var(--error)}.lesson-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border)}.nav-prev,.nav-next{flex:1;max-width:280px}.nav-next{text-align:right;margin-left:auto}.nav-btn{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;transition:all var(--transition-fast)}.nav-btn:hover{background:var(--bg-tertiary);border-color:var(--accent-primary)}.nav-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}.nav-title{font-size:var(--text-base);font-weight:500;color:var(--text-primary)}.quiz-container{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-6)0}.quiz-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}.quiz-question{margin-bottom:var(--space-4)}.quiz-options{display:flex;flex-direction:column;gap:var(--space-2)}.quiz-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.quiz-option:hover{border-color:var(--accent-primary)}.quiz-option.selected{background:var(--accent-light);border-color:var(--accent-primary)}.quiz-option.correct{background:var(--success-light);border-color:var(--success)}.quiz-option.incorrect{background:var(--error-light);border-color:var(--error)}.tutorial-footer{padding:var(--space-8) var(--space-4);background:var(--bg-secondary);border-top:1px solid var(--border);margin-left:0}@media (min-width:768px){.tutorial-footer{margin-right:var(--preview-width)}}@media (min-width:1200px){.tutorial-footer{margin-left:var(--sidebar-width)}}.footer-content{max-width:900px;margin:0 auto;text-align:center;color:var(--text-muted);font-size:var(--text-sm)}.footer-links{display:flex;justify-content:center;gap:var(--space-6);margin-top:var(--space-4)}.footer-links a{color:var(--text-muted)}.footer-links a:hover{color:var(--accent-primary)}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:all var(--transition-normal);z-index:35}.overlay.active{opacity:1;visibility:visible}@media (min-width:1200px){.overlay{display:none}}.mobile-preview{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-primary);border-top:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl)0 0;box-shadow:var(--shadow-xl);transform:translateY(100%);transition:transform var(--transition-normal);z-index:60;max-height:70vh;overflow:hidden}.mobile-preview.open{transform:translateY(0)}@media (max-width:767px){.mobile-preview{display:block}}.mobile-preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--border)}.mobile-preview-body{height:calc(70vh - 60px);overflow:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.hidden{display:none!important}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes checkmark{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}.animate-fade-in{animation:fadeIn 0.3s ease}.animate-slide-up{animation:slideUp 0.3s ease}.animate-checkmark{animation:checkmark 0.3s ease-out}@keyframes progressFill{from{width:0}}.progress-fill.animate{animation:progressFill 0.6s ease-out}.exercise-section{background:var(--bg-secondary);border:2px solid var(--accent-primary);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-6)0}[data-theme="dark"] .exercise-section{background:#1e1e2e;border-color:var(--accent-primary)}.exercise-section h3{color:var(--accent-primary);margin-bottom:var(--space-4)}.exercise-section p{margin-bottom:var(--space-3)}.exercise-section ul{margin-bottom:var(--space-4);padding-left:var(--space-6)}.exercise-hint,.exercise-solution{margin-top:var(--space-4);background:var(--bg-tertiary);border-radius:var(--radius-md);overflow:hidden}[data-theme="dark"] .exercise-hint,[data-theme="dark"] .exercise-solution{background:#252536}.exercise-hint summary,.exercise-solution summary{padding:var(--space-3) var(--space-4);cursor:pointer;font-weight:600;color:var(--accent-primary);transition:background 0.15s ease}.exercise-hint summary:hover,.exercise-solution summary:hover{background:var(--bg-hover)}.exercise-hint pre,.exercise-solution pre{margin:0;padding:var(--space-4);background:var(--bg-code);color:var(--text-inverse);border-radius:0}.exercise-hint code,.exercise-solution code{font-family:var(--font-mono);font-size:var(--text-sm)}.info-box,.tip-box,.warning-box,.mistake-box,.summary-box{padding:var(--space-4);margin:var(--space-4)0;border-radius:var(--radius-md);border-left:4px solid}.info-box{background:var(--accent-light);border-color:var(--accent-primary);color:var(--text-primary)}[data-theme="dark"] .info-box{background:rgba(99,102,241,0.15)}.tip-box{background:var(--success-light);border-color:var(--success)}[data-theme="dark"] .tip-box{background:rgba(16,185,129,0.15)}.warning-box{background:var(--warning-light);border-color:var(--warning)}[data-theme="dark"] .warning-box{background:rgba(245,158,11,0.15)}.best-practice-box{background:#f0fdf4;border-color:#16a34a}[data-theme="dark"] .best-practice-box{background:rgba(22,163,74,0.15)}.best-practice-box strong:first-child{color:#16a34a}.mistake-box{background:var(--error-light);border-color:var(--error);margin-bottom:var(--space-3)}[data-theme="dark"] .mistake-box{background:rgba(239,68,68,0.15)}.mistake-box h4{margin:0 0 var(--space-2)0;color:var(--error);font-size:var(--text-sm)}.mistake-box pre{margin:0;padding:var(--space-3);background:var(--bg-code);border-radius:var(--radius-sm);overflow-x:auto}.mistake-box code{font-size:var(--text-sm);color:var(--text-inverse)}.summary-box{background:var(--bg-secondary);border-color:var(--accent-primary)}[data-theme="dark"] .summary-box{background:#1e1e2e}.summary-box ul{margin:0;padding-left:var(--space-5)}.summary-box li{margin-bottom:var(--space-2)}.info-table{width:100%;border-collapse:collapse;margin:var(--space-4)0;font-size:var(--text-sm)}.info-table th,.info-table td{padding:var(--space-3);text-align:left;border:1px solid var(--border)}.info-table th{background:var(--bg-tertiary);font-weight:600}.info-table tr:nth-child(even){background:var(--bg-secondary)}[data-theme="dark"] .info-table th{background:#252536}[data-theme="dark"] .info-table tr:nth-child(even){background:#1e1e2e}.lead{font-size:var(--text-lg);color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-6)}