.enhanced-hero{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:5rem 2rem;border-radius:0}.hero-content{max-width:700px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:1.5rem}.hero-badges{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.15);color:white;padding:0.5rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2)}#hero-title{font-size:2.2rem;font-weight:700;line-height:1.3;margin:0}.hero-subtitle{font-size:1rem;max-width:600px;margin:0 auto;opacity:0.95;line-height:1.6}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.8rem 1.5rem;border:none;border-radius:6px;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s ease;font-size:0.95rem}.btn--primary{background:white;color:#667eea}.btn--primary:hover{background:#f3f4f6;transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.15)}.btn--secondary{background:transparent;color:white;border:2px solid white}.btn--secondary:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}.page-toc{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);padding:2rem;margin:3rem auto;max-width:700px;border-radius:8px;border-left:4px solid #667eea}.page-toc h2{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem 0;text-align:center}.toc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.toc-list li{margin-bottom:0}.toc-list a{display:block;color:#667eea;text-decoration:none;font-weight:500;transition:all 0.2s ease;padding:0.75rem;border-radius:6px}.toc-list a:hover{color:#764ba2;background:#f3f4f6}.toc-toggle{display:none;background:none;border:none;color:#667eea;cursor:pointer;font-weight:600;padding:0.5rem 0;margin-top:1rem}.boilerplate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:3rem 0}@media (max-width:768px){.boilerplate-grid{grid-template-columns:1fr;gap:1.5rem}}.boilerplate-card{background:white;border:1px solid #e5e7eb;border-radius:12px;padding:2rem;display:flex;flex-direction:column;transition:all 0.3s ease;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.boilerplate-card:hover{border-color:#667eea;box-shadow:0 10px 25px rgba(102,126,234,0.1);transform:translateY(-4px)}.boilerplate-card h3{font-size:1.3rem;font-weight:600;color:#111827;margin:0 0 0.75rem 0}.boilerplate-card p{color:#6b7280;font-size:0.95rem;line-height:1.6;margin:0 0 1.5rem 0;flex-grow:1}.features{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem}.feature{display:inline-block;background:#f3f4f6;color:#374151;padding:0.5rem 0.875rem;border-radius:6px;font-size:0.85rem;font-weight:500}.boilerplate-card:hover .feature{background:#e0e7ff;color:#667eea}.actions{display:flex;gap:0.75rem;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:0.6rem 1.2rem;border:none;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;flex-grow:1}.btn-primary{background:#667eea;color:white}.btn-primary:hover{background:#5568d3}.btn-secondary{background:white;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#f3f4f6}.comparison-table{width:100%;border-collapse:collapse;margin:2rem 0;background:white;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.comparison-table thead{background:#f9fafb;border-bottom:2px solid #e5e7eb}.comparison-table th{padding:1rem;text-align:left;font-weight:600;color:#111827;font-size:0.95rem}.comparison-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#374151;font-size:0.9rem}.comparison-table tr:last-child td{border-bottom:none}.comparison-table tbody tr:hover{background:#f9fafb}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:#e5e7eb;z-index:1000;pointer-events:none}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);width:0%;transition:width 0.1s ease}.breadcrumbs{padding:2rem;background:#f9fafb;margin-bottom:2rem}.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:1rem;flex-wrap:wrap;max-width:1200px;margin:0 auto}.breadcrumbs li{display:flex;align-items:center}.breadcrumbs li::after{content:'/';margin-left:1rem;color:#d1d5db}.breadcrumbs li:last-child::after{display:none}.breadcrumbs a{color:#667eea;text-decoration:none;font-weight:500}.breadcrumbs a:hover{text-decoration:underline}section{max-width:1200px;margin:0 auto;padding:2rem}section h2{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:#111827}section h3{font-size:1.4rem;font-weight:600;margin-top:1.5rem;margin-bottom:1rem;color:#1f2937}section p{line-height:1.8;color:#4b5563;margin-bottom:1rem}code{background:#f3f4f6;padding:0.2rem 0.4rem;border-radius:3px;font-size:0.9em;color:#667eea}pre{background:#1f2937;color:#e5e7eb;padding:1.5rem;border-radius:8px;overflow-x:auto;margin:1.5rem 0}pre code{background:none;padding:0;color:#e5e7eb}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:2rem 0}.step{background:linear-gradient(135deg,#f3f4f6 0%,#ffffff 100%);padding:1.5rem;border-radius:8px;border-left:4px solid #667eea}.step h3{margin-top:0}.note{background:#eff6ff;border-left:4px solid #0891b2;padding:1rem;border-radius:6px;margin:1.5rem 0}.try-it{background:linear-gradient(135deg,#fef3c7 0%,#fef5e7 100%);border-left:4px solid #d97706;padding:1.5rem;border-radius:6px;margin:1.5rem 0}.try-it h4{margin-top:0;color:#b45309}@media (max-width:768px){.enhanced-hero{padding:3rem 1rem}#hero-title{font-size:1.6rem}.hero-subtitle{font-size:0.95rem}.hero-actions{flex-direction:column}.btn{width:100%;justify-content:center}.boilerplate-grid{grid-template-columns:1fr}.comparison-table{font-size:0.85rem}.comparison-table th,.comparison-table td{padding:0.75rem}.btn-primary,.btn-secondary{font-size:0.85rem;padding:0.5rem 1rem}section{padding:1rem}section h2{font-size:1.5rem}section h3{font-size:1.1rem}.page-toc{padding:1.5rem;margin:2rem auto}.toc-list{grid-template-columns:1fr}.toc-toggle{display:inline-block}}.boilerplate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:3rem 0}@media (max-width:768px){.boilerplate-grid{grid-template-columns:1fr;gap:1.5rem}}.boilerplate-card{background:white;border:1px solid #e5e7eb;border-radius:12px;padding:2rem;display:flex;flex-direction:column;transition:all 0.3s ease;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.boilerplate-card:hover{border-color:#667eea;box-shadow:0 10px 25px rgba(102,126,234,0.1);transform:translateY(-4px)}.boilerplate-card h3{font-size:1.3rem;font-weight:600;color:#111827;margin:0 0 0.75rem 0}.boilerplate-card p{color:#6b7280;font-size:0.95rem;line-height:1.6;margin:0 0 1.5rem 0;flex-grow:1}.features{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem}.feature{display:inline-block;background:#f3f4f6;color:#374151;padding:0.5rem 0.875rem;border-radius:6px;font-size:0.85rem;font-weight:500}.boilerplate-card:hover .feature{background:#e0e7ff;color:#667eea}.actions{display:flex;gap:0.75rem;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:0.6rem 1.2rem;border:none;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;flex-grow:1}.btn-primary{background:#667eea;color:white}.btn-primary:hover{background:#5568d3}.btn-secondary{background:white;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#f3f4f6}.comparison-table{width:100%;border-collapse:collapse;margin:2rem 0;background:white;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.comparison-table thead{background:#f9fafb;border-bottom:2px solid #e5e7eb}.comparison-table th{padding:1rem;text-align:left;font-weight:600;color:#111827;font-size:0.95rem}.comparison-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#374151;font-size:0.9rem}.comparison-table tr:last-child td{border-bottom:none}.comparison-table tbody tr:hover{background:#f9fafb}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:#e5e7eb;z-index:1000;pointer-events:none}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);width:0%;transition:width 0.1s ease}.breadcrumbs{padding:2rem;background:#f9fafb;margin-bottom:2rem}.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:1rem;flex-wrap:wrap;max-width:1200px;margin:0 auto}.breadcrumbs li{display:flex;align-items:center}.breadcrumbs li::after{content:'/';margin-left:1rem;color:#d1d5db}.breadcrumbs li:last-child::after{display:none}.breadcrumbs a{color:#667eea;text-decoration:none;font-weight:500}.breadcrumbs a:hover{text-decoration:underline}section{max-width:1200px;margin:0 auto;padding:2rem}section h2{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:#111827}section h3{font-size:1.4rem;font-weight:600;margin-top:1.5rem;margin-bottom:1rem;color:#1f2937}section p{line-height:1.8;color:#4b5563;margin-bottom:1rem}code{background:#f3f4f6;padding:0.2rem 0.4rem;border-radius:3px;font-size:0.9em;color:#667eea}pre{background:#1f2937;color:#e5e7eb;padding:1.5rem;border-radius:8px;overflow-x:auto;margin:1.5rem 0}pre code{background:none;padding:0;color:#e5e7eb}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:2rem 0}.step{background:linear-gradient(135deg,#f3f4f6 0%,#ffffff 100%);padding:1.5rem;border-radius:8px;border-left:4px solid #667eea}.step h3{margin-top:0}.note{background:#eff6ff;border-left:4px solid #0891b2;padding:1rem;border-radius:6px;margin:1.5rem 0}.try-it{background:linear-gradient(135deg,#fef3c7 0%,#fef5e7 100%);border-left:4px solid #d97706;padding:1.5rem;border-radius:6px;margin:1.5rem 0}.try-it h4{margin-top:0;color:#b45309}@media (max-width:768px){.enhanced-hero{padding:2rem 1rem}#hero-title{font-size:1.8rem}.hero-subtitle{font-size:1rem}.hero-features{grid-template-columns:1fr}.hero-actions{flex-direction:column}.btn{width:100%;justify-content:center}.boilerplate-grid{grid-template-columns:1fr}.comparison-table{font-size:0.85rem}.comparison-table th,.comparison-table td{padding:0.75rem}.btn-primary,.btn-secondary{font-size:0.85rem;padding:0.5rem 1rem}section{padding:1rem}section h2{font-size:1.5rem}section h3{font-size:1.1rem}.page-toc{padding:1.5rem}.toc-list{grid-template-columns:1fr}.toc-toggle{display:inline-block}}