.tutorial-template-hero{background:radial-gradient(1200px 400px at 80% -10%,rgba(0,119,190,.08),transparent 60%),radial-gradient(900px 380px at 0 110%,rgba(0,180,160,.06),transparent 60%),#fff;border-bottom:1px solid #e2e8f0;margin-top:0;padding:var(--space-8) 0 var(--space-6);position:relative}.tutorial-template-hero .hero-breadcrumb{animation:fadeInDown .5s ease both;margin-bottom:var(--space-5)}.tutorial-template-hero .breadcrumb-link{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:999px;color:#334155;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-medium);gap:var(--space-2);padding:.45rem .9rem;text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}.tutorial-template-hero .breadcrumb-link i{font-size:.85rem}.tutorial-template-hero .breadcrumb-link:focus-visible,.tutorial-template-hero .breadcrumb-link:hover{background:#f8fafc;border-color:var(--surf-primary-light);color:var(--surf-primary);outline:none;transform:translateX(-3px)}.tutorial-template-hero .hero-content{animation:fadeInUp .6s ease both;margin:0 auto;max-width:920px;text-align:center}.tutorial-template-hero .hero-eyebrow{align-items:center;background:rgba(0,119,190,.08);border-radius:999px;color:var(--surf-primary);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-bold);gap:var(--space-2);letter-spacing:.06em;margin-bottom:var(--space-3);padding:.3rem .85rem;text-transform:uppercase}.tutorial-template-hero .hero-eyebrow[hidden]{display:none}.tutorial-template-hero .hero-eyebrow__icon{align-items:center;display:inline-flex;height:18px;justify-content:center;width:18px}.tutorial-template-hero .hero-eyebrow__icon i{font-size:.85rem}.tutorial-template-hero .hero-eyebrow__img{height:18px;object-fit:contain;width:18px}.tutorial-template-hero .hero-title{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-4xl);font-weight:var(--font-extrabold);letter-spacing:-.01em;line-height:var(--leading-tight);margin:0 0 var(--space-3)}.tutorial-template-hero .hero-description{color:#475569;font-size:var(--text-lg);line-height:var(--leading-relaxed);margin:0 auto var(--space-5);max-width:760px}.tutorial-template-hero .hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:center;list-style:none;margin:0;padding:0}.tutorial-template-hero .meta-item{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:999px;color:#334155;display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);padding:.35rem .85rem}.tutorial-template-hero .meta-item i{color:var(--surf-primary);font-size:.85rem}.tutorial-mini-bar{backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);background:hsla(0,0%,100%,.92);border-bottom:1px solid #e2e8f0;box-shadow:0 4px 14px rgba(15,23,42,.06);left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:var(--navbar-height,80px);transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;z-index:60}.tutorial-mini-bar[hidden]{display:none}.tutorial-mini-bar.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.tutorial-mini-bar__inner{align-items:center;display:flex;gap:var(--space-3);max-width:1200px;min-height:56px;padding:var(--space-2) var(--space-4)}.tutorial-mini-bar__menu{align-items:center;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;color:#334155;cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease;width:36px}.tutorial-mini-bar__menu:focus-visible,.tutorial-mini-bar__menu:hover{background:var(--surf-primary);border-color:var(--surf-primary);color:#fff;outline:none}.tutorial-mini-bar__title{color:#0f172a;flex:1 1 auto;font-size:var(--text-sm);font-weight:var(--font-semibold);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tutorial-mini-bar__progress{background:#e2e8f0;border-radius:999px;flex:0 0 180px;height:6px;overflow:hidden}.tutorial-mini-bar__fill{background:linear-gradient(90deg,var(--surf-primary) 0,var(--surf-secondary) 100%);border-radius:999px;height:100%;transition:width .4s ease;width:0}.tutorial-mini-bar__count{color:var(--surf-primary);flex-shrink:0;font-family:var(--font-mono);font-size:.75rem;font-weight:var(--font-bold)}.tutorial-template-container{margin:0 auto;max-width:1200px;padding:var(--space-6) var(--space-4) var(--space-10)}.loading-state{animation:fadeInUp .5s ease .1s both;padding:var(--space-12) 0;text-align:center}.loading-state.hidden{display:none}.loading-state .spinner-wrapper{margin-bottom:var(--space-3)}.loading-state .spinner-border{border-width:.25rem;color:var(--surf-primary);height:2.5rem;width:2.5rem}.loading-state .loading-text{color:#64748b;font-size:var(--text-base);margin:0}.tutorial-content-wrapper{opacity:0;transition:opacity .4s ease}.tutorial-content-wrapper.loaded{animation:fadeInUp .5s ease both;opacity:1}.tutorial-layout{align-items:start;display:grid;gap:var(--space-6);grid-template-columns:320px 1fr}.tutorial-sidebar{display:flex;flex-direction:column;gap:var(--space-4);max-height:calc(100vh - var(--navbar-height, 80px) - 100px);overflow-y:auto;padding-right:var(--space-1);position:sticky;scrollbar-width:thin;top:calc(var(--navbar-height, 80px) + 64px)}.tutorial-sidebar::-webkit-scrollbar{width:6px}.tutorial-sidebar::-webkit-scrollbar-track{background:transparent}.tutorial-sidebar::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.tutorial-sidebar::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tutorial-summary-card{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.04);display:grid;gap:var(--space-2) var(--space-3);grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:var(--space-4)}.tutorial-summary-card__icon{align-items:center;background:rgba(0,119,190,.1);border-radius:12px;color:var(--surf-primary);display:inline-flex;font-size:1.25rem;grid-column:1/2;grid-row:1/2;height:48px;justify-content:center;width:48px}.tutorial-summary-card__img{height:32px;object-fit:contain;width:32px}.tutorial-summary-card__body{grid-column:2/3;grid-row:1/2;min-width:0}.tutorial-summary-card__label{color:#64748b;display:block;font-size:.7rem;font-weight:var(--font-bold);letter-spacing:.06em;text-transform:uppercase}.tutorial-summary-card__title{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-base);font-weight:var(--font-bold);line-height:1.3;margin:0 0 var(--space-1)}.tutorial-summary-card__stats{color:#475569;display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-2)}.tutorial-summary-card__stats span{align-items:center;display:inline-flex;gap:.3rem}.tutorial-summary-card__stats i{color:var(--surf-primary)}.tutorial-summary-card .tutorial-progress{grid-column:1/-1;grid-row:2/3;margin-top:var(--space-2)}.tutorial-progress__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-2)}.tutorial-progress__label{color:#475569;font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:.04em;text-transform:uppercase}.tutorial-progress__count{color:var(--surf-primary);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold)}.tutorial-progress__bar{background:#e2e8f0;border-radius:999px;height:8px;overflow:hidden}.tutorial-progress__fill{background:linear-gradient(90deg,var(--surf-primary) 0,var(--surf-secondary) 100%);border-radius:999px;box-shadow:0 0 10px rgba(0,119,190,.25);height:100%;transition:width .5s ease;width:0}.tutorial-toc{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.04);padding:var(--space-3) var(--space-3) var(--space-4)}.tutorial-toc__title{align-items:center;color:#0f172a;display:flex;font-family:var(--font-headings);font-size:var(--text-sm);font-weight:var(--font-bold);gap:var(--space-2);letter-spacing:.06em;margin:var(--space-1) 0 var(--space-3);padding:0 var(--space-1);text-transform:uppercase}.tutorial-toc__title i{color:var(--surf-primary);font-size:.9rem}.toc-list{counter-reset:toc;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}.toc-item,.toc-list{list-style:none}.toc-link{align-items:start;background:transparent;border:1px solid transparent;border-radius:10px;color:#334155;display:grid;gap:var(--space-2);grid-template-columns:28px 1fr auto;padding:var(--space-2) var(--space-2);text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}.toc-link:focus-visible,.toc-link:hover{background:#f8fafc;color:#0f172a;outline:none;transform:translateX(2px)}.toc-link:focus-visible .toc-step,.toc-link:hover .toc-step{border-color:var(--surf-primary-light);color:var(--surf-primary)}.toc-link.is-active{background:#eff6ff;border-color:rgba(0,119,190,.25)}.toc-link.is-active .toc-step{background:var(--surf-primary);border-color:var(--surf-primary);color:#fff}.toc-link.is-active .toc-title{color:var(--surf-primary-dark)}.toc-link.is-completed .toc-step{background:rgba(72,187,120,.12);border-color:rgba(72,187,120,.4);color:var(--surf-success)}.toc-link.is-completed .toc-title{color:#475569}.toc-step{align-items:center;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;color:#64748b;display:inline-flex;flex-shrink:0;font-family:var(--font-mono);font-size:.7rem;font-weight:var(--font-bold);height:26px;justify-content:center;transition:background .2s ease,border-color .2s ease,color .2s ease;width:26px}.toc-text{display:flex;flex-direction:column;gap:2px;min-width:0}.toc-title{font-size:.85rem;font-weight:var(--font-semibold);line-height:1.35;word-break:break-word}.toc-duration{align-items:center;color:#64748b;display:inline-flex;font-family:var(--font-mono);font-size:.7rem;gap:.3rem}.toc-duration i{font-size:.65rem}.toc-status{align-items:center;display:inline-flex;flex-shrink:0;font-size:1rem;height:22px;justify-content:center;width:22px}.toc-status[data-status=completed]{color:var(--surf-success)}.toc-status[data-status=not-started]{color:#cbd5e1}.tutorial-reset-btn{align-items:center;align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#475569;cursor:pointer;display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-semibold);gap:var(--space-2);justify-content:center;padding:.5rem .85rem;transition:background .2s ease,color .2s ease,border-color .2s ease}.tutorial-reset-btn i{color:#94a3b8;transition:color .2s ease}.tutorial-reset-btn:focus-visible,.tutorial-reset-btn:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c;outline:none}.tutorial-reset-btn:focus-visible i,.tutorial-reset-btn:hover i{color:#b91c1c}.tutorial-main{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.chapter-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 14px 30px rgba(15,23,42,.06);overflow:hidden;scroll-margin-top:calc(var(--navbar-height, 80px) + 80px);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}.chapter-card.is-active{border-color:rgba(0,119,190,.3);box-shadow:0 18px 36px rgba(0,119,190,.1)}.chapter-card.is-completed{border-color:rgba(72,187,120,.3)}.chapter-card.is-completed .chapter-card__step{color:var(--surf-success)}.chapter-card__header{align-items:flex-start;background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid #e2e8f0;display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;padding:var(--space-4) var(--space-5)}.chapter-card__heading{display:flex;flex:1 1 280px;flex-direction:column;gap:var(--space-1);min-width:0}.chapter-card__step{color:var(--surf-primary);font-family:var(--font-mono);font-size:.7rem;font-weight:var(--font-bold);letter-spacing:.08em;text-transform:uppercase}.chapter-card__title{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-xl);font-weight:var(--font-bold);line-height:1.3;margin:0}.chapter-card__meta{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.chapter-card__duration{align-items:center;background:rgba(0,119,190,.08);border-radius:999px;color:var(--surf-primary);display:inline-flex;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-semibold);gap:.4rem;padding:.3rem .75rem}.chapter-card__duration i{font-size:.75rem}.chapter-card__player{aspect-ratio:16/9;background:#0f172a;overflow:hidden;position:relative}.chapter-card__player video{background:#0f172a;height:100%;inset:0;object-fit:contain;position:absolute;width:100%}.chapter-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-5)}.chapter-card__description{color:#475569;font-size:var(--text-base);line-height:var(--leading-relaxed);margin:0}.chapter-card__complete{align-items:center;align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#334155;cursor:pointer;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:.5rem;padding:.5rem .95rem;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}.chapter-card__complete i{color:#94a3b8;transition:color .2s ease}.chapter-card__complete:focus-visible,.chapter-card__complete:hover{background:#eff6ff;border-color:var(--surf-primary-light);color:var(--surf-primary);outline:none;transform:translateY(-1px)}.chapter-card__complete:focus-visible i,.chapter-card__complete:hover i{color:var(--surf-primary)}.chapter-card__complete.is-completed{background:rgba(72,187,120,.1);border-color:rgba(72,187,120,.4);color:#166534}.chapter-card__complete.is-completed i{color:var(--surf-success)}.chapter-card__complete.is-completed:hover{background:rgba(72,187,120,.15)}.chapter-card__nav{border-top:1px solid #f1f5f9;display:grid;gap:var(--space-3);grid-template-columns:1fr 1fr;padding:var(--space-3) var(--space-5) var(--space-4)}.chapter-status-pill{align-items:center;background:#f1f5f9;border-radius:999px;color:#475569;display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-semibold);gap:.4rem;padding:.3rem .75rem}.chapter-status-pill i{font-size:.85rem}.chapter-status-pill[data-status=completed]{background:rgba(72,187,120,.12);color:#166534}.chapter-status-pill[data-status=completed] i{color:var(--surf-success)}.chapter-nav-btn{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#334155;display:grid;gap:var(--space-2);grid-template-columns:auto 1fr;padding:var(--space-2) var(--space-3);text-decoration:none;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}.chapter-nav-btn i{color:#64748b;font-size:.85rem;transition:color .2s ease,transform .2s ease}.chapter-nav-btn__direction{color:#94a3b8;font-family:var(--font-mono);font-size:.65rem;font-weight:var(--font-bold);grid-column:2/3;grid-row:1/2;letter-spacing:.08em;text-transform:uppercase}.chapter-nav-btn__title{font-size:var(--text-sm);font-weight:var(--font-semibold);grid-column:2/3;grid-row:2/3}.chapter-nav-btn--prev{grid-template-columns:auto 1fr}.chapter-nav-btn--prev i{grid-column:1/2;grid-row:1/-1}.chapter-nav-btn--prev:hover i{transform:translateX(-3px)}.chapter-nav-btn--prev .chapter-nav-btn__direction,.chapter-nav-btn--prev .chapter-nav-btn__title{text-align:left}.chapter-nav-btn--next{grid-template-columns:1fr auto}.chapter-nav-btn--next i{color:var(--surf-primary);grid-column:2/3;grid-row:1/-1}.chapter-nav-btn--next .chapter-nav-btn__direction,.chapter-nav-btn--next .chapter-nav-btn__title{grid-column:1/2;text-align:right}.chapter-nav-btn--next:hover i{transform:translateX(3px)}.chapter-nav-btn:focus-visible,.chapter-nav-btn:hover{background:#fff;border-color:var(--surf-primary-light);box-shadow:0 6px 16px rgba(15,23,42,.06);color:var(--surf-primary);outline:none;transform:translateY(-1px)}.tutorial-complete-card{background:linear-gradient(180deg,#fff,#ecfdf5);border:1px solid rgba(72,187,120,.3);border-radius:18px;box-shadow:0 12px 32px rgba(72,187,120,.08);padding:var(--space-6) var(--space-5);text-align:center}.tutorial-complete-card[hidden]{display:none}.tutorial-complete-card__icon{align-items:center;background:rgba(72,187,120,.15);border-radius:50%;color:var(--surf-success);display:inline-flex;font-size:1.6rem;height:64px;justify-content:center;margin:0 auto var(--space-3);width:64px}.tutorial-complete-card h3{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-xl);font-weight:var(--font-bold);margin:0 0 var(--space-2)}.tutorial-complete-card p{color:#475569;font-size:var(--text-base);line-height:var(--leading-relaxed);margin:0 auto var(--space-4);max-width:520px}.tutorial-complete-card__actions{display:inline-flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.tutorial-complete-card__btn{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;color:#334155;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:.5rem;padding:.55rem 1rem;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease}.tutorial-complete-card__btn:focus-visible,.tutorial-complete-card__btn:hover{background:#f8fafc;border-color:var(--surf-primary-light);color:var(--surf-primary);outline:none;transform:translateY(-1px)}.tutorial-complete-card__btn--primary{background:var(--surf-primary);border-color:var(--surf-primary);color:#fff}.tutorial-complete-card__btn--primary:focus-visible,.tutorial-complete-card__btn--primary:hover{background:var(--surf-primary-dark);border-color:var(--surf-primary-dark);box-shadow:0 8px 22px rgba(0,119,190,.25);color:#fff}.empty-state{animation:fadeInUp .5s ease both;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:18px;margin:0 auto;max-width:540px;padding:var(--space-12) var(--space-4);text-align:center}.empty-state i{color:#cbd5e1;font-size:3rem;margin-bottom:var(--space-3)}.empty-state h3{color:#0f172a;font-family:var(--font-headings);font-size:var(--text-xl);font-weight:var(--font-bold);margin-bottom:var(--space-2)}.empty-state p{color:#64748b;font-size:var(--text-base);margin:0 auto var(--space-4);max-width:420px}.empty-state .back-button{align-items:center;background:var(--surf-primary);border:none;border-radius:10px;color:#fff;display:inline-flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-2);padding:.55rem 1.1rem;text-decoration:none;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.empty-state .back-button:focus-visible,.empty-state .back-button:hover{background:var(--surf-primary-dark);box-shadow:0 8px 22px rgba(0,119,190,.3);outline:none;transform:translateY(-1px)}.empty-state--error i{color:#fca5a5}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.tutorial-layout{gap:var(--space-5);grid-template-columns:1fr}.tutorial-sidebar{max-height:none;overflow:visible;position:static}.tutorial-summary-card{grid-template-columns:auto 1fr}.tutorial-toc{padding:var(--space-3)}.toc-list{flex-direction:row;overflow-x:auto;padding-bottom:var(--space-1);scroll-snap-type:x mandatory}.toc-item{flex:0 0 240px;scroll-snap-align:start}.toc-link{background:#f8fafc;border:1px solid #e2e8f0;grid-template-columns:28px 1fr}.toc-link .toc-status{grid-column:2/3;grid-row:2/3;height:auto;justify-content:flex-end;width:auto}.tutorial-reset-btn{align-self:stretch;justify-content:center}}@media(max-width:768px){.tutorial-template-hero{padding:var(--space-6) 0 var(--space-5)}.tutorial-template-hero .hero-title{font-size:var(--text-2xl)}.tutorial-template-hero .hero-description{font-size:var(--text-base)}.tutorial-template-container{padding:var(--space-5) var(--space-3) var(--space-8)}.chapter-card{border-radius:14px}.chapter-card__header{align-items:flex-start;flex-direction:column;padding:var(--space-3) var(--space-4)}.chapter-card__title{font-size:var(--text-lg)}.chapter-card__body{padding:var(--space-4)}.chapter-card__nav{grid-template-columns:1fr;padding:var(--space-3) var(--space-4) var(--space-4)}.tutorial-mini-bar__title{display:none}.tutorial-mini-bar__progress{flex:1 1 auto}}@media(max-width:480px){.tutorial-template-hero .hero-title{font-size:var(--text-xl)}.toc-item{flex:0 0 200px}.chapter-card__title{font-size:var(--text-base)}.chapter-nav-btn__title{font-size:var(--text-xs)}}:focus-visible{outline:2px solid rgba(0,119,190,.55);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}