.tutorial-template-hero{background:#fff;border-bottom:1px solid #e2e8f0;margin-top:0;padding:80px 0 56px}.tutorial-template-hero .hero-breadcrumb{animation:fadeInDown .6s ease both;margin-bottom:var(--space-6)}.tutorial-template-hero .breadcrumb-link{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:50px;color:#334155;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-2);padding:var(--space-2) var(--space-4);text-decoration:none;transition:all .3s ease}.tutorial-template-hero .breadcrumb-link i{font-size:14px}.tutorial-template-hero .breadcrumb-link:hover{background:#f8fafc;border-color:#3b82f6;color:#1d4ed8;transform:translateX(-4px)}.tutorial-template-hero .hero-content{animation:fadeInUp .8s ease both;margin:0 auto;max-width:900px;text-align:center}.tutorial-template-hero .hero-badge{align-items:center;background:#eff6ff;border-radius:50px;box-shadow:0 8px 16px rgba(37,99,235,.2);color:#1d4ed8;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-2) var(--space-4)}.tutorial-template-hero .hero-badge i{font-size:14px}.tutorial-template-hero .hero-title{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-4xl);font-weight:var(--font-extrabold);line-height:var(--leading-tight);margin-bottom:var(--space-4)}.tutorial-template-hero .hero-description{color:#475569;font-size:var(--text-lg);line-height:var(--leading-relaxed);margin-bottom:var(--space-5)}.tutorial-template-hero .hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:center}.tutorial-template-hero .meta-item{align-items:center;color:#64748b;display:flex;font-size:var(--text-sm);gap:var(--space-2)}.tutorial-template-hero .meta-item i{color:#3b82f6;font-size:16px}.tutorial-template-container{margin:0 auto;max-width:1100px;padding:2.5rem 1.5rem 3.5rem}.loading-state{animation:fadeInUp .8s ease .2s both;padding:var(--space-16) 0;text-align:center}.loading-state.hidden{display:none}.loading-state .spinner-wrapper{margin-bottom:var(--space-4)}.loading-state .spinner-wrapper .spinner-border{border-width:.3rem;color:#3b82f6;height:3rem;width:3rem}.loading-state .loading-text{color:#64748b;font-size:var(--text-lg);margin:0}.tutorial-content-wrapper{opacity:0;transition:opacity .5s ease}.tutorial-content-wrapper.loaded{animation:fadeInUp .8s ease both;opacity:1}.video-section{animation:fadeInUp .8s ease both;margin-bottom:var(--space-10)}.video-section:last-child{margin-bottom:0}.video-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 18px 36px rgba(15,23,42,.08);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.video-card:hover{border-color:rgba(59,130,246,.35);box-shadow:0 24px 46px rgba(15,23,42,.12);transform:translateY(-4px)}.video-header{align-items:center;background:#f8fafc;border-bottom:1px solid #e2e8f0;display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-5) var(--space-6)}.video-title{color:#0f172a;flex:1;font-family:var(--font-headings);font-size:var(--text-2xl);font-weight:var(--font-bold);margin:0}.video-duration{align-items:center;background:#eff6ff;border-radius:50px;color:#1d4ed8;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);padding:var(--space-2) var(--space-4)}.video-duration i{font-size:14px}.video-content{display:grid;gap:0;grid-template-columns:1fr 1fr}@media(max-width:992px){.video-content{grid-template-columns:1fr}}.video-player-wrapper{align-items:center;background:#f8fafc;display:flex;justify-content:center;padding:var(--space-6);position:relative}.video-player-wrapper video{border-radius:12px;box-shadow:0 12px 28px rgba(15,23,42,.14);height:auto;width:100%}.video-description-wrapper{display:flex;flex-direction:column;justify-content:center;padding:var(--space-6)}.video-description{color:#475569;font-size:var(--text-base);line-height:var(--leading-relaxed);margin:0}.tutorial-navigation{align-items:center;border-top:1px solid #e2e8f0;display:flex;gap:var(--space-4);justify-content:space-between;margin-top:var(--space-10);padding-top:var(--space-8)}@media(max-width:768px){.tutorial-navigation{flex-direction:column}}.nav-button{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#334155;display:inline-flex;font-size:var(--text-base);font-weight:var(--font-semibold);gap:var(--space-2);padding:var(--space-3) var(--space-6);text-decoration:none;transition:all .3s ease}.nav-button i{font-size:16px}.nav-button:hover{background:#2563eb;border-color:#2563eb;color:#fff;transform:translateY(-2px)}.nav-button.prev i{order:-1}.nav-button.next i{order:1}@media(max-width:768px){.nav-button{justify-content:center;width:100%}}.tutorial-progress{animation:fadeInUp .8s ease .3s both;margin-bottom:var(--space-8)}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-3)}.progress-label{color:#475569;font-size:var(--text-sm);font-weight:var(--font-semibold)}.progress-percentage{color:#2563eb;font-size:var(--text-sm);font-weight:var(--font-bold)}.progress-bar-wrapper{background:#e2e8f0;border-radius:50px;height:8px;overflow:hidden}.progress-bar-fill{background:#3b82f6;border-radius:50px;box-shadow:0 0 12px rgba(59,130,246,.35);height:100%;transition:width .5s ease}.table-of-contents{animation:fadeInUp .8s ease .4s both;background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:var(--space-8);padding:var(--space-6)}.toc-title{align-items:center;color:#0f172a;display:flex;font-family:var(--font-headings);font-size:var(--text-xl);font-weight:var(--font-bold);gap:var(--space-3);margin-bottom:var(--space-4)}.toc-title i{color:#3b82f6}.toc-list{list-style:none;margin:0;padding:0}.toc-item{margin-bottom:var(--space-3)}.toc-item:last-child{margin-bottom:0}.toc-link{align-items:center;background:#f8fafc;border-radius:8px;color:#334155;display:flex;font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-3);padding:var(--space-3);text-decoration:none;transition:all .3s ease}.toc-link i{color:#3b82f6;font-size:14px}.toc-link:hover{background:#eff6ff;color:#1d4ed8;transform:translateX(4px)}.toc-link.active{background:#eff6ff;border-left:3px solid #2563eb}.empty-state{animation:fadeInUp .8s ease both;padding:var(--space-16) 0;text-align:center}.empty-state i{color:#cbd5e1;font-size:64px;margin-bottom:var(--space-4)}.empty-state h3{color:#0f172a;font-size:var(--text-2xl);font-weight:var(--font-bold);margin-bottom:var(--space-3)}.empty-state p{color:#64748b;font-size:var(--text-lg);margin-bottom:var(--space-6)}.empty-state .back-button{align-items:center;background:#2563eb;border:none;border-radius:12px;color:#fff;display:inline-flex;font-size:var(--text-base);font-weight:var(--font-semibold);gap:var(--space-2);padding:var(--space-3) var(--space-6);text-decoration:none;transition:all .3s ease}.empty-state .back-button:hover{box-shadow:0 12px 24px rgba(37,99,235,.3);transform:translateY(-2px)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.tutorial-template-hero{padding:80px 0 40px}.tutorial-template-hero .hero-title{font-size:var(--text-2xl)}.tutorial-template-hero .hero-description{font-size:var(--text-base)}.tutorial-template-hero .hero-meta{flex-direction:column;gap:var(--space-3)}.tutorial-template-container{padding:2rem 1rem 2.5rem}.video-header{align-items:flex-start;flex-direction:column;padding:var(--space-4)}.video-title{font-size:var(--text-lg)}.video-description-wrapper,.video-player-wrapper{padding:var(--space-4)}.video-description{font-size:var(--text-sm)}.table-of-contents{padding:var(--space-4)}.toc-title{font-size:var(--text-lg)}}@media(max-width:480px){.tutorial-template-hero .hero-title{font-size:var(--text-xl)}.tutorial-template-hero .hero-badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-3)}.video-section{margin-bottom:var(--space-6)}.video-title{font-size:var(--text-base)}.video-duration{font-size:var(--text-xs)}}:focus-visible{outline:2px solid rgba(59,130,246,.6);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}