.how-to-hero{padding:var(--spacing-4xl) 0 var(--spacing-3xl);background:linear-gradient(135deg,var(--color-bg) 0%,var(--color-bg-secondary) 100%);border-bottom:1px solid var(--color-border);position:relative;overflow:hidden}.how-to-hero-content{max-width:800px;margin:0 auto;text-align:center}.how-to-title{font-size:var(--font-size-5xl);font-weight:800;line-height:1.1;margin-bottom:var(--spacing-lg)}.how-to-description{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl)}.how-to-meta{display:flex;gap:var(--spacing-xl);justify-content:center;flex-wrap:wrap}.meta-item{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.meta-item svg{color:var(--color-primary)}.how-to-tabs{padding:var(--spacing-2xl) 0;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);position:sticky;top:73px;z-index:var(--z-sticky)}.tab-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.tab-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.tab-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.tab-btn.active{background:var(--gradient-primary);border-color:transparent;color:#fff}.tab-btn svg{width:24px;height:24px}.tab-btn.active svg{color:#fff}.tab-content{display:none;padding:var(--spacing-4xl) 0}.tab-content.active{display:block}.content-header{text-align:center;max-width:800px;margin:0 auto var(--spacing-4xl)}.content-header h2{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-md)}.content-header p{font-size:var(--font-size-lg);color:var(--color-text-secondary)}.step-detailed{display:grid;grid-template-columns:80px 1fr 1fr;gap:var(--spacing-3xl);align-items:start;margin-bottom:var(--spacing-4xl);padding:var(--spacing-3xl);background-color:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-2xl);transition:all var(--transition-base)}.step-detailed:hover{border-color:var(--color-primary);box-shadow:var(--shadow-xl)}.step-detailed-reverse{grid-template-columns:80px 1fr 1fr}.step-detailed-reverse .step-detailed-content{order:2}.step-detailed-reverse .step-detailed-image{order:1}.step-detailed-number{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:var(--gradient-primary);border-radius:50%;font-size:var(--font-size-3xl);font-weight:800;color:#fff;box-shadow:var(--shadow-lg);flex-shrink:0}.step-detailed-content{display:flex;flex-direction:column;gap:var(--spacing-md)}.step-detailed-content h3{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--spacing-sm)}.step-detailed-content p{font-size:var(--font-size-base);line-height:1.7;color:var(--color-text-secondary)}.step-detailed-image{display:flex;align-items:center;justify-content:center}.step-detailed-image img{width:100%;max-width:550px;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.step-tip{display:flex;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:#3b82f61a;border-left:4px solid var(--color-primary);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text)}.step-tip svg{color:var(--color-primary);flex-shrink:0;margin-top:2px}.step-warning{display:flex;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:#f59e0b1a;border-left:4px solid var(--color-accent);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text)}.step-warning svg{color:var(--color-accent);flex-shrink:0;margin-top:2px}.step-success{display:flex;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:#10b9811a;border-left:4px solid var(--color-secondary);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text)}.step-success svg{color:var(--color-secondary);flex-shrink:0;margin-top:2px}.step-highlight{padding:var(--spacing-lg);background:var(--gradient-accent);border-radius:var(--radius-lg);color:#fff}.step-highlight strong{display:block;font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.step-highlight p{margin:0;font-size:var(--font-size-sm)}.step-highlight .btn{margin-top:var(--spacing-md)}.important-notes{max-width:1000px;margin:var(--spacing-4xl) auto 0}.important-notes h2{font-size:var(--font-size-3xl);text-align:center;margin-bottom:var(--spacing-2xl)}.note-card{display:flex;gap:var(--spacing-lg);padding:var(--spacing-xl);background-color:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-xl);margin-bottom:var(--spacing-lg);transition:all var(--transition-base)}.note-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.note-card-premium{background:linear-gradient(135deg,#f59e0b1a,#d977060d);border-color:var(--color-accent)}.note-icon{flex-shrink:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg);border-radius:var(--radius-lg);color:var(--color-primary)}.note-card-premium .note-icon{color:var(--color-accent)}.note-content h4{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm)}.note-content p{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-md)}.note-content .btn{margin-top:var(--spacing-sm)}.basic-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-4xl)}.basic-step{padding:var(--spacing-2xl);background-color:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-base)}.basic-step:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:var(--shadow-xl)}.basic-step-number{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);color:#fff;font-size:var(--font-size-3xl);font-weight:800;border-radius:50%;margin:0 auto var(--spacing-lg)}.basic-step h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.basic-step p{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.basic-use-cases{padding:var(--spacing-3xl);background-color:var(--color-bg-secondary);border-radius:var(--radius-2xl)}.basic-use-cases h3{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-xl);text-align:center}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg)}.use-case{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--color-bg);border-radius:var(--radius-lg);font-weight:600;color:var(--color-text);transition:all var(--transition-fast)}.use-case:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.use-case svg{color:var(--color-primary);flex-shrink:0}.troubleshooting{padding:var(--spacing-4xl) 0;background-color:var(--color-bg-secondary)}.troubleshooting-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)}.trouble-card{padding:var(--spacing-2xl);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.trouble-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);color:var(--color-primary)}.trouble-card ul{list-style:none;padding:0}.trouble-card li{padding-left:var(--spacing-xl);margin-bottom:var(--spacing-md);position:relative;color:var(--color-text-secondary);line-height:1.6}.trouble-card li:before{content:"→";position:absolute;left:0;color:var(--color-primary);font-weight:700}.trouble-card p{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg)}.video-section{padding:var(--spacing-4xl) 0}.video-placeholder{max-width:900px;margin:0 auto;aspect-ratio:16/9;background-color:var(--color-bg-tertiary);border:2px dashed var(--color-border);border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;text-align:center}.video-placeholder-content{padding:var(--spacing-2xl)}.video-placeholder-content svg{color:var(--color-text-tertiary);margin-bottom:var(--spacing-lg)}.video-placeholder-content h3{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.video-placeholder-content p{color:var(--color-text-tertiary)}@media(max-width:1024px){.step-detailed{grid-template-columns:1fr;gap:var(--spacing-xl)}.step-detailed-reverse{grid-template-columns:1fr}.step-detailed-reverse .step-detailed-content,.step-detailed-reverse .step-detailed-image{order:unset}.step-detailed-number{width:64px;height:64px;font-size:var(--font-size-2xl);margin:0 auto var(--spacing-lg)}.step-detailed-image img{max-width:480px;width:100%;margin:0 auto;display:block}}@media(max-width:768px){.how-to-title{font-size:var(--font-size-4xl)}.how-to-meta{flex-direction:column;align-items:center;gap:var(--spacing-md)}.tab-buttons{flex-direction:column;padding:0 var(--spacing-md)}.tab-btn{width:100%;justify-content:center}.step-detailed{padding:var(--spacing-xl)}.step-detailed-image img{max-width:420px;width:100%}.troubleshooting-grid{grid-template-columns:1fr}.note-card{flex-direction:column;text-align:center}.note-icon{margin:0 auto}}@media(max-width:480px){.how-to-title{font-size:var(--font-size-3xl)}.step-detailed{padding:var(--spacing-lg)}.step-detailed-number{width:56px;height:56px;font-size:var(--font-size-xl)}.step-detailed-image img{max-width:300px;width:100%}.basic-steps,.use-cases-grid{grid-template-columns:1fr}}