.video-container{position:relative;width:100%;padding-bottom:56.25%;margin:2rem 0;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.12);background:linear-gradient(135deg,rgba(139,92,246,.05),rgba(79,70,229,.1));border:1px solid rgba(139,92,246,.2);transition:all .3s ease}.video-container:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.15)}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.tutorial-card{display:flex;flex-direction:column;padding:1.5rem;margin:1rem 0;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5));border:1px solid rgba(139,92,246,.2);box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .3s ease;height:100%}.dark .tutorial-card{background:linear-gradient(135deg,rgba(30,30,35,.8),rgba(18,18,25,.9));border:1px solid rgba(139,92,246,.15)}.tutorial-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.1)}.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin:2rem 0}.tutorial-tag{display:inline-block;padding:.25rem .75rem;margin-right:.5rem;margin-bottom:.5rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#6d28d9;background-color:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2)}.tutorial-title{font-size:1.25rem;font-weight:600;margin:.5rem 0;color:#1f2937}.dark .tutorial-title{color:#f3f4f6}.tutorial-description{font-size:.875rem;color:#4b5563;margin-bottom:1rem}.dark .tutorial-description{color:#9ca3af}.tutorial-button{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:.375rem;font-size:.875rem;font-weight:500;color:white;background-color:#6d28d9;transition:all .2s ease;margin-top:auto;align-self:flex-start;text-decoration:none}.tutorial-button:hover{background-color:#5b21b6}.tutorial-button svg{margin-left:.5rem;width:1rem;height:1rem}.tutorials-search-container{display:flex;margin:1.5rem 0;position:relative;max-width:600px}.tutorials-search{width:100%;padding:.75rem 1rem .75rem 2.5rem;border-radius:.5rem;border:1px solid rgba(139,92,246,.3);background-color:rgba(255,255,255,.8);font-size:1rem;transition:all .2s ease;box-shadow:0 2px 10px rgba(0,0,0,.05)}.dark .tutorials-search{background-color:rgba(30,30,35,.8);border-color:rgba(139,92,246,.2);color:#f3f4f6}.tutorials-search:focus{outline:none;border-color:#6d28d9;box-shadow:0 0 0 3px rgba(109,40,217,.2)}.tutorials-search-button{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:#6d28d9;cursor:pointer}.tutorials-search-button svg{width:1.25rem;height:1.25rem}.tutorials-filter-container{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.tutorials-filter-button{padding:.5rem 1rem;border-radius:.375rem;font-size:.875rem;font-weight:500;background-color:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);color:#6d28d9;cursor:pointer;transition:all .2s ease}.dark .tutorials-filter-button{background-color:rgba(139,92,246,.05);border-color:rgba(139,92,246,.15);color:#c4b5fd}.tutorials-filter-button:hover{background-color:rgba(139,92,246,.2)}.tutorials-filter-button.active{background-color:#6d28d9;color:white}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(203,213,225,.5) transparent}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(203,213,225,.5);border-radius:10px;border:2px solid transparent}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(148,163,184,.7)}.dark .custom-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(71,85,105,.5)}.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(100,116,139,.7)}.dark .tutorials-filter-button.active{background-color:#7c3aed;border-color:#7c3aed}.featured-tutorials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2rem;margin:2rem 0}@media (max-width:768px){.featured-tutorials-grid{grid-template-columns:1fr}}.featured-tutorial-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.7));border:1px solid rgba(139,92,246,.2);box-shadow:0 8px 30px rgba(0,0,0,.1);transition:all .3s ease}.dark .featured-tutorial-card{background:linear-gradient(135deg,rgba(30,30,35,.9),rgba(18,18,25,.8));border-color:rgba(139,92,246,.15)}.featured-tutorial-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,.15)}.featured-tutorial-card h3{padding:1.25rem 1.5rem .5rem;margin:0;font-size:1.25rem;font-weight:600;color:#1f2937}.dark .featured-tutorial-card h3{color:#f3f4f6}.featured-tutorial-card .video-container{margin:0;border-radius:0}.featured-tutorial-content{padding:1.25rem 1.5rem}.featured-tutorial-content p{margin:0 0 1rem;font-size:.875rem;color:#4b5563}.dark .featured-tutorial-content p{color:#9ca3af}.featured-tutorial-link{display:inline-flex;align-items:center;font-size:.875rem;font-weight:500;color:#6d28d9;text-decoration:none;transition:all .2s ease}.dark .featured-tutorial-link{color:#a78bfa}.featured-tutorial-link:hover{color:#5b21b6;text-decoration:underline}.dark .featured-tutorial-link:hover{color:#c4b5fd}.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:2rem 0}.topic-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5));border:1px solid rgba(139,92,246,.2);box-shadow:0 4px 10px rgba(0,0,0,.05);transition:all .3s ease;text-decoration:none;text-align:center}.dark .topic-card{background:linear-gradient(135deg,rgba(30,30,35,.8),rgba(18,18,25,.9));border-color:rgba(139,92,246,.15)}.topic-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1);border-color:rgba(139,92,246,.4)}.topic-icon{width:2.5rem;height:2.5rem;color:#6d28d9;margin-bottom:.75rem}.dark .topic-icon{color:#a78bfa}.topic-card span{font-size:.875rem;font-weight:500;color:#1f2937}.dark .topic-card span{color:#f3f4f6}@media (max-width:640px){.topics-grid,.tutorial-grid{grid-template-columns:1fr}.tutorials-filter-container{overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tutorials-filter-container::-webkit-scrollbar{display:none}.tutorials-filter-button{white-space:nowrap}}