:root{--primary: #e94560;--primary-dark: #c73e54;--secondary: #16c79a;--success: #16c79a;--danger: #e94560;--warning: #f5a623;--info: #4fc3f7;--light: #2a2a4a;--dark: #ffffff;--bg: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--text: #ffffff;--text-muted: #a0aec0;--border: #2d3748;--code-bg: #0d1117}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;color:var(--text);background:var(--bg-secondary)}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:var(--bg);border-right:1px solid var(--border);padding:1.5rem;position:fixed;height:100vh;overflow-y:auto}.sidebar-header{margin-bottom:2rem}.sidebar-header h1{font-size:1.25rem;color:var(--primary);margin-bottom:.25rem}.sidebar-header .subtitle{font-size:.85rem;color:var(--text-muted)}.nav-section{margin-bottom:.5rem}.nav-section-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.6rem .75rem;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background .2s}.nav-section-toggle:hover{background:var(--bg-secondary)}.nav-toggle-icon{font-size:.7rem;color:var(--text-muted);transition:transform .2s;display:inline-block}.nav-toggle-icon.expanded{transform:rotate(90deg)}.nav-section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.nav-section-links{padding-left:1rem;margin-top:.25rem}.nav-section-links a{display:block;padding:.4rem .75rem;color:var(--text);text-decoration:none;border-radius:6px;margin-bottom:.15rem;font-size:.85rem;border-left:2px solid transparent}.nav-section-links a:hover{background:var(--bg-secondary);border-left-color:var(--text-muted)}.nav-section-links a.active{background:var(--primary);color:#fff;border-left-color:var(--primary)}.main-content{flex:1;margin-left:280px;padding:2rem 3rem;max-width:1200px}h1{font-size:2rem;margin-bottom:1rem;color:var(--dark)}h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--dark)}h3{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.75rem}h4{font-size:1rem;margin-bottom:.5rem}p{margin-bottom:1rem}.card{background:var(--bg-card);border-radius:12px;padding:1.5rem;margin-bottom:1rem;border:1px solid var(--border)}.card h3{margin-top:0}.alert{padding:1rem;border-radius:6px;margin-bottom:1rem}.alert-info{background:#4fc3f726;border-left:4px solid var(--info);color:var(--text)}.alert-warning{background:#f5a62326;border-left:4px solid var(--warning);color:var(--text)}.alert-danger{background:#e9456026;border-left:4px solid var(--danger);color:var(--text)}.alert-success{background:#16c79a26;border-left:4px solid var(--success);color:var(--text)}pre{background:var(--code-bg);color:#d4d4d4;padding:1rem;border-radius:6px;overflow-x:auto;font-size:.85rem;line-height:1.5}code{font-family:SF Mono,Fira Code,Consolas,monospace}:not(pre)>code{background:var(--bg-secondary);padding:.2rem .4rem;border-radius:4px;font-size:.85em;color:var(--danger)}.cheatsheet-section{margin-bottom:2rem}.cheatsheet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.pattern-card{background:var(--bg-card);border-radius:12px;padding:1.25rem;border:1px solid var(--border)}.pattern-card h4{margin-top:0;color:var(--secondary)}.pattern-label{display:inline-block;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:600;text-transform:uppercase;margin-bottom:.5rem}.pattern-label.react{background:#61dafb33;color:#61dafb}.pattern-label.lmds{background:#e9456033;color:var(--primary)}.code-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 900px){.code-comparison{grid-template-columns:1fr}}.code-block{border-radius:8px;overflow:hidden}.code-block-header{padding:.5rem 1rem;font-size:.8rem;font-weight:600}.code-block-header.bad{background:var(--danger);color:#fff}.code-block-header.good{background:var(--success);color:#fff}.code-block pre{margin:0;border-radius:0}.checklist{list-style:none}.checklist li{padding:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:.75rem}.checklist li:last-child{border-bottom:none}.checklist input[type=checkbox]{width:18px;height:18px;margin-top:.2rem}.checklist .item-content{flex:1}.checklist .item-title{font-weight:500}.checklist .item-detail{font-size:.85rem;color:var(--text-muted);margin-top:.25rem}.progress-bar{height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s ease}.btn{display:inline-block;padding:.5rem 1rem;border-radius:6px;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;border:none;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--bg-secondary);color:var(--text)}.btn-secondary:hover{background:var(--border)}.resource-link{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-card);border-radius:12px;text-decoration:none;color:var(--text);transition:all .2s;border:1px solid var(--border)}.resource-link:hover{border-color:var(--primary);transform:translateY(-2px)}.resource-link .icon{font-size:1.5rem}.resource-link .title{font-weight:500;color:var(--primary)}.resource-link .desc{font-size:.85rem;color:var(--text-muted)}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.5rem}.tab{padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-size:.9rem;color:var(--text-muted);border-radius:6px}.tab:hover{background:var(--bg-secondary)}.tab.active{background:var(--primary);color:#fff}.quick-start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:2rem}.quick-start-card{background:var(--bg-card);border-radius:12px;padding:1.5rem;border:1px solid var(--border);cursor:pointer;transition:all .2s}.quick-start-card:hover{border-color:var(--primary);transform:translateY(-2px)}.quick-start-card .icon{font-size:2rem;margin-bottom:.5rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:10px}.quick-start-card h3{margin:0 0 .25rem;font-size:1.1rem;color:var(--text)}.quick-start-card .subtitle{font-size:.8rem;color:var(--secondary);margin-bottom:.5rem}.quick-start-card p{font-size:.9rem;margin:0;color:var(--text-muted)}.schedule-day{margin-bottom:1.5rem}.schedule-day h4{color:var(--primary)}.schedule-day .date{font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}.strategy-step{display:flex;gap:1rem;margin-bottom:1.5rem}.strategy-number{width:32px;height:32px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.strategy-content{flex:1}.strategy-content h4{margin-top:0}.code-editor-container{border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.code-editor-header{background:var(--bg-secondary);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}table{width:100%;border-collapse:collapse}th,td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border)}th{font-weight:600;background:var(--bg-secondary)}