.tutorial-nav{background:var(--bg-card);border-radius:var(--radius);padding:20px;margin-bottom:30px;position:sticky;top:80px;z-index:10}.tutorial-nav-title{font-weight:600;margin-bottom:15px;color:var(--text-muted);font-size:.85rem;text-transform:uppercase}.tutorial-nav a{display:block;padding:8px 12px;color:var(--text-secondary);text-decoration:none;border-radius:6px;margin-bottom:4px;font-size:.9rem}.tutorial-nav a:hover,.tutorial-nav a.active{background:var(--accent);color:#fff}.step{background:var(--bg-card);border-radius:var(--radius-lg);padding:30px;margin-bottom:30px}.step-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--accent);color:#fff;border-radius:50%;font-weight:700;margin-right:12px}.step-title{font-size:1.3rem;font-weight:600;display:flex;align-items:center;margin-bottom:20px}.step-content{padding-left:48px}.step-image{background:#0000004d;border-radius:var(--radius);padding:20px;margin:20px 0;text-align:center}.step-image img{max-width:100%;border-radius:8px;box-shadow:0 4px 20px #0000004d}.step-image-placeholder{color:var(--text-muted);padding:40px;border:2px dashed var(--border);border-radius:8px}.code-box{background:#0000004d;border-radius:var(--radius);padding:20px;margin:15px 0;position:relative;overflow-x:auto}.code-box code{color:var(--accent);font-size:.9rem;white-space:pre-wrap;word-break:break-all}.code-copy{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.8rem}.code-copy:hover{opacity:.9}.tip-box{background:#6c5ce726;border-left:4px solid var(--accent);padding:15px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0}.tip-box strong{color:var(--accent)}.warning-box{background:#e74c3c26;border-left:4px solid #e74c3c;padding:15px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0}.warning-box strong{color:#e74c3c}.method-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.method-tab{padding:10px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-weight:500;transition:all .2s}.method-tab:hover,.method-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.method-content{display:none}.method-content.active{display:block}.comparison-table{width:100%;border-collapse:collapse;margin:20px 0}.comparison-table th,.comparison-table td{padding:15px;text-align:left;border:1px solid var(--border)}.comparison-table th{background:var(--bg-card)}.comparison-table tr:hover{background:#ffffff05}.tutorial-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;max-width:1200px;margin:0 auto}.tutorial-cta{background:linear-gradient(135deg,var(--accent) 0%,#a855f7 100%);border-radius:var(--radius-lg);padding:40px;text-align:center;margin-top:40px}.tutorial-cta h3{margin-bottom:15px;color:#fff}.tutorial-cta p{margin-bottom:25px;color:#ffffffe6}.faq-item{margin-bottom:15px;background:var(--bg-card-hover);padding:15px 20px;border-radius:var(--radius)}.faq-item summary{cursor:pointer;font-weight:500}.faq-item>div{padding-top:15px;color:var(--text-secondary)}.section-title{margin:25px 0 15px}.step-subtitle{margin:20px 0 10px}.spaced-list{line-height:2}.cta-btn-link{display:inline-block;text-decoration:none}@media (max-width: 768px){.tutorial-layout{grid-template-columns:1fr}.tutorial-nav{position:static}.step-content{padding-left:0}}