.tutorial-wrapper{max-width:80rem;margin:0 auto;display:flex;position:relative}.tutorial-sidebar{border-right:1px solid var(--border);background:var(--card);z-index:30;width:16rem;min-height:100vh;margin-top:.75rem;position:-webkit-sticky;position:sticky;top:0;overflow-y:auto}.tutorial-sidebar .sidebar-inner{height:100%;padding:1.5rem;overflow-y:auto}.tutorial-sidebar .sidebar-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.tutorial-sidebar .sidebar-title{font-size:1.125rem;font-weight:700}.tutorial-sidebar .close-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;display:none}.toc-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.toc-link{color:var(--muted-foreground);border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;text-decoration:none;transition:all .2s;display:block}.toc-link:hover{background:var(--muted)}.toc-link.active{color:#fff;background:linear-gradient(90deg,#3b82f6,#4f46e5);transform:scale(1.05);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.tutorial-info{border-top:1px solid var(--border);margin-top:2rem;padding-top:1.5rem}.tutorial-info h4{color:var(--foreground);margin-bottom:.75rem;font-weight:600}.info-row{align-items:center;margin-bottom:.75rem;font-size:.875rem;display:flex}.info-label{color:#6b7280;width:6rem}.badge{border-radius:9999px;padding:.25rem .5rem;font-size:.75rem;font-weight:500}.badge-blue{color:#1e40af;background:#dbeafe}.badge-green{color:#065f46;background:#d1fae5}.badge-yellow{color:#92400e;background:#fef3c7}.badge-red{color:#991b1b;background:#fee2e2}.mobile-menu-btn{z-index:40;background:var(--card);cursor:pointer;border:none;border-radius:.5rem;padding:.5rem;display:none;position:fixed;top:1rem;right:1rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.mobile-overlay{z-index:20;background:rgba(0,0,0,.5);display:none;position:fixed;top:0;bottom:0;left:0;right:0}.tutorial-main{flex:1;min-width:0;margin-top:3.75rem}.tutorial-article{max-width:56rem;margin:0 auto;padding:2rem 1rem;animation:.6s fadeIn}.tutorial-header{margin-bottom:2.5rem;animation:.5s slideDown}.header-badges{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.header-badge{border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:transform .2s;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.header-badge:hover{transform:scale(1.05)}.header-badge-category{color:#fff;background:linear-gradient(90deg,#3b82f6,#4f46e5)}.header-badge-beginner{color:#fff;background:linear-gradient(90deg,#4ade80,#16a34a)}.header-badge-intermediate{color:#fff;background:linear-gradient(90deg,#facc15,#ca8a04)}.header-badge-advanced{color:#fff;background:linear-gradient(90deg,#f87171,#dc2626)}.header-badge-readtime{background:var(--muted);color:var(--foreground)}.tutorial-title{color:var(--foreground);margin-bottom:1.5rem;font-size:2.25rem;font-weight:700;line-height:1.2}.author-section{flex-direction:column;margin-bottom:2rem;display:flex}.author-info{align-items:center;margin-bottom:1rem;display:flex}.author-avatar{border:2px solid #fff;border-radius:9999px;width:3.5rem;height:3.5rem;margin-right:1rem;transition:transform .2s;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.author-avatar:hover{transform:scale(1.1)}.author-name{color:var(--foreground);font-size:1.125rem;font-weight:700}.author-date{color:var(--muted-foreground)}.action-buttons{gap:.75rem;display:flex}.btn-share,.btn-save{cursor:pointer;border:none;border-radius:.75rem;align-items:center;padding:.625rem 1.25rem;font-size:.875rem;transition:all .2s;display:flex}.btn-share:hover,.btn-save:hover{transform:scale(1.05)}.btn-share{background:var(--card);border:1px solid var(--border);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.05)}.btn-share:hover{border-color:#3b82f6;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.btn-save{color:#fff;background:linear-gradient(90deg,#3b82f6,#4f46e5);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.btn-save:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.btn-share svg,.btn-save svg{width:1.25rem;height:1.25rem;margin-right:.5rem}.tutorial-description{color:var(--muted-foreground);background:linear-gradient(to right,var(--muted),transparent);border:1px solid var(--border);border-radius:1rem;margin-bottom:2rem;padding:1.5rem;font-size:1.25rem;font-style:italic}.prerequisites-box{background:linear-gradient(90deg,#eff6ff,#eef2ff);border-left:4px solid #3b82f6;border-radius:0 .75rem .75rem 0;margin-bottom:2rem;padding:1.25rem}.prerequisites-box h4{color:#1e40af;align-items:center;margin-bottom:.75rem;font-weight:700;display:flex}.prerequisites-box h4 svg{width:1.25rem;height:1.25rem;margin-right:.5rem}.prerequisites-list{padding-left:1.25rem;list-style:outside}.prerequisites-list li{color:#1d4ed8;margin-bottom:.5rem}.tutorial-content{font-size:1.125rem;line-height:1.8}.tags-section{border-top:1px solid var(--border);margin-top:3rem;padding-top:2rem}.tags-list{flex-wrap:wrap;gap:.75rem;display:flex}.tag{background:linear-gradient(to right,var(--muted),transparent);color:var(--foreground);cursor:pointer;border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.05)}.tag:hover{transform:scale(1.05);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.faq-section{justify-content:center;margin-top:4rem;display:flex}.faq-inner{width:100%;max-width:48rem}.faq-title{text-align:center;margin-bottom:1.5rem;font-size:1.5rem;font-weight:700}.faq-item{border:1px solid var(--border);border-radius:.5rem;margin-bottom:1rem;padding:1rem}.faq-item summary{cursor:pointer;font-weight:500}.faq-item p{color:var(--muted-foreground);margin-top:.5rem}.tutorial-nav{border-top:1px solid var(--border);flex-direction:column;justify-content:space-between;gap:1.5rem;margin-top:3rem;padding-top:2rem;display:flex}.nav-link{color:#2563eb;align-items:center;text-decoration:none;transition:transform .2s;display:flex}.nav-link:hover{color:#1e40af}.nav-link.prev:hover{transform:translate(-5px)}.nav-link.next:hover{transform:translate(5px)}.nav-link svg{color:#3b82f6;flex-shrink:0;width:1.5rem;height:1.5rem;transition:color .2s}.nav-link:hover svg{color:#1d4ed8}.nav-link .nav-label{color:#6b7280;font-size:.875rem}.nav-link .nav-title{font-weight:700}.nav-link .nav-title:hover{text-decoration:underline}.nav-spacer{flex-grow:1}.scroll-top-btn{z-index:50;color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:linear-gradient(90deg,#3b82f6,#4f46e5);border:none;border-radius:9999px;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;transition:opacity .3s,transform .3s;display:flex;position:fixed;bottom:2rem;right:2rem;transform:scale(0);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.scroll-top-btn.visible{opacity:1;pointer-events:all;transform:scale(1)}.scroll-top-btn:hover{transform:scale(1.1)}.scroll-top-btn svg{width:1.5rem;height:1.5rem}.ad-spacing{margin:2rem 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (min-width:640px){.author-section{flex-direction:row;justify-content:space-between;align-items:center}.author-info{margin-bottom:0}.tutorial-title{font-size:3rem}.tutorial-nav{flex-direction:row}}@media (max-width:767px){.tutorial-sidebar{z-index:50;width:85%;max-width:300px;height:100vh;margin-top:0;display:none;position:fixed;top:0;left:0;box-shadow:2px 0 10px rgba(0,0,0,.1)}.tutorial-sidebar.open{animation:.3s slideIn;display:block}.mobile-menu-btn,.mobile-overlay.open,.tutorial-sidebar .close-btn{display:block}.tutorial-main{margin-top:30px}.tutorial-article{padding:4rem 1rem 1.5rem}.tutorial-title{word-break:break-word;font-size:1.75rem}.action-buttons{width:100%;margin-top:1rem}.btn-share,.btn-save{flex:1;justify-content:center}.header-badges{margin-bottom:1rem}.tutorial-nav{flex-direction:column;gap:1.5rem}.nav-link{width:100%}.nav-link.next{align-self:flex-start}.nav-link.next>div{text-align:left!important}.scroll-top-btn{width:3rem;height:3rem;bottom:1rem;right:1rem}.scroll-top-btn svg{width:1.25rem;height:1.25rem}.ad-spacing{margin:1.5rem 0}}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}