#root{width:100%;min-height:100vh}.tutorial-page{min-height:100vh;background:var(--color-bg-primary)}.tutorial-header{padding:var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);text-align:center;border-bottom:1px solid var(--color-border);background:linear-gradient(180deg,var(--color-bg-secondary) 0%,var(--color-bg-primary) 100%);position:relative}.back-link{position:absolute;top:var(--spacing-lg);left:var(--spacing-lg);display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:.9rem;font-weight:500;transition:all var(--transition-base)}.back-link:hover{background:var(--color-brand-bg-subtle);border-color:var(--color-brand);color:var(--color-brand);transform:translate(-2px)}.tutorial-header h1{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.tutorial-header p{color:var(--color-text-secondary);font-size:1.1rem}.tutorial-content{max-width:900px;margin:0 auto;padding:var(--spacing-3xl) var(--spacing-lg)}.tutorial-section{margin-bottom:var(--spacing-4xl)}.tutorial-section>p:first-of-type{margin-top:var(--spacing-lg)}.tutorial-section p{margin-bottom:var(--spacing-md)}.tutorial-section h2{display:flex;align-items:center;gap:var(--spacing-md);font-size:1.875rem;font-weight:700;margin-top:var(--spacing-3xl);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border);color:var(--color-brand)}.tutorial-section h2 svg{color:var(--color-brand)}.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-lg)}.tutorial-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.tutorial-card svg{color:var(--color-brand);margin-bottom:var(--spacing-md)}.tutorial-card h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md)}.tutorial-card ol,.tutorial-card ul{margin-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:1.8}.tutorial-card li{margin:var(--spacing-sm) 0}.info-box{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl)}.info-box.success{background:var(--color-success-bg);border:1px solid var(--color-success)}.info-box svg{color:var(--color-success);flex-shrink:0;margin-top:2px}.info-box strong{display:block;margin-bottom:var(--spacing-xs);font-size:1.1rem}.info-box p{color:var(--color-text-secondary);margin:0}.tutorial-steps{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.tutorial-steps h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-md);margin-top:var(--spacing-lg)}.tutorial-steps h3:first-child{margin-top:0}.tutorial-steps ul,.tutorial-steps ol{margin-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:1.8}.tutorial-steps li{margin:var(--spacing-sm) 0}.numbered-steps{display:flex;flex-direction:column;gap:var(--spacing-xl)}.numbered-step{display:flex;gap:var(--spacing-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);position:relative}.step-num{width:48px;height:48px;background:var(--color-brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;flex-shrink:0}.step-content h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md)}.step-content p{color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}.step-content ul{margin-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:1.8}.step-content li{margin:var(--spacing-sm) 0}.feature-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.feature-item{display:flex;gap:var(--spacing-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:border-color var(--transition-base)}.feature-item:hover{border-color:var(--color-brand-border-soft)}.feature-item svg{color:var(--color-brand);flex-shrink:0;margin-top:2px}.feature-item h4{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-xs)}.feature-item p{color:var(--color-text-secondary);font-size:.9rem;line-height:1.6;margin:0}.troubleshooting{display:flex;flex-direction:column;gap:var(--spacing-md)}.trouble-item{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-base)}.trouble-item:hover{border-color:var(--color-brand-border-soft)}.trouble-item summary{padding:var(--spacing-md) var(--spacing-lg);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color var(--transition-base)}.trouble-item summary::-webkit-details-marker{display:none}.trouble-item summary:after{content:"+";font-size:1.25rem;color:var(--color-text-muted);transition:transform var(--transition-base)}.trouble-item[open] summary:after{transform:rotate(45deg);color:var(--color-brand)}.trouble-item summary:hover{color:var(--color-brand)}.trouble-content{padding:0 var(--spacing-lg) var(--spacing-lg)}.trouble-content p{color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.trouble-content strong{color:var(--color-text-primary)}.trouble-content ul{margin-left:var(--spacing-lg);color:var(--color-text-secondary);line-height:1.8}.trouble-content li{margin:var(--spacing-xs) 0}.tutorial-section.support{text-align:center;padding:var(--spacing-2xl);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.support-links{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-top:var(--spacing-lg)}.support-link{display:inline-flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-weight:500;transition:all var(--transition-base)}.support-link:hover{background:var(--color-brand-bg-subtle);border-color:var(--color-brand);color:var(--color-brand);transform:translateY(-2px)}@media(max-width:768px){.back-link{position:static;margin-bottom:var(--spacing-lg)}.tutorial-header{padding:var(--spacing-2xl) var(--spacing-md) var(--spacing-xl)}.tutorial-header h1{font-size:2rem}.tutorial-content{padding:var(--spacing-2xl) var(--spacing-md)}.tutorial-section{margin-bottom:var(--spacing-3xl)}.tutorial-section h2{font-size:1.5rem}.tutorial-grid{grid-template-columns:1fr}.numbered-step{flex-direction:column}.support-links{flex-direction:column;align-items:stretch}}:root{--color-bg-primary: #0d1117;--color-bg-secondary: #161b22;--color-bg-tertiary: #21262d;--color-border: #30363d;--color-text-primary: #f0f6fc;--color-text-secondary: #8b949e;--color-text-muted: #6e7681;--color-text-link: #58a6ff;--color-brand: #8b5cf6;--color-brand-hover: #7c3aed;--color-brand-light: #a78bfa;--color-brand-dark: #6d28d9;--color-brand-bg-subtle: rgba(139, 92, 246, .1);--color-brand-border-soft: rgba(139, 92, 246, .4);--color-success: #10b981;--color-success-bg: rgba(16, 185, 129, .1);--color-warning: #f59e0b;--color-warning-bg: rgba(245, 158, 11, .15);--color-error: #ef4444;--color-chrome: #4285f4;--color-chrome-hover: #3367d6;--color-firefox: #ff7139;--color-firefox-hover: #e55b2b;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-4xl: 96px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .3);--shadow-glow: 0 0 20px rgba(139, 92, 246, .3);--transition-fast: .1s ease-out;--transition-base: .15s ease-out;--transition-slow: .25s ease-out}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--color-text-primary);background:var(--color-bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--color-bg-primary)}*::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}*::-webkit-scrollbar-thumb:hover{background:var(--color-brand)}a{color:var(--color-text-link);text-decoration:none;transition:color var(--transition-base)}a:hover{color:var(--color-brand-light)}.app{min-height:100vh}.social-float{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);display:flex;gap:var(--spacing-sm);z-index:100}.social-float a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:all var(--transition-base)}.social-float a:hover{background:var(--color-brand-bg-subtle);border-color:var(--color-brand);color:var(--color-brand);transform:translateY(-2px)}.hero{padding:var(--spacing-4xl) var(--spacing-lg) var(--spacing-3xl);text-align:center;border-bottom:1px solid var(--color-border);background:linear-gradient(180deg,var(--color-bg-secondary) 0%,var(--color-bg-primary) 100%)}.hero-content{max-width:600px;margin:0 auto}.hero-logo{width:100px;height:100px;border-radius:var(--radius-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-lg)}.hero h1{font-size:3rem;font-weight:700;margin-bottom:var(--spacing-sm);letter-spacing:-.03em}.hero-subtitle{font-size:1.25rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.hero-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-lg)}.hero-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);color:var(--color-success);font-weight:500;font-size:.95rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:12px 24px;font-size:14px;font-weight:600;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-brand);color:#fff;border-color:var(--color-brand)}.btn-primary:hover{background:var(--color-brand-hover);border-color:var(--color-brand-hover);color:#fff}.btn-secondary{background:transparent;color:var(--color-text-primary);border-color:var(--color-border)}.btn-secondary:hover{background:var(--color-brand-bg-subtle);border-color:var(--color-brand);color:var(--color-brand)}.btn-chrome{background:var(--color-chrome);color:#fff;border-color:var(--color-chrome)}.btn-chrome:hover{background:var(--color-chrome-hover);border-color:var(--color-chrome-hover);color:#fff}.btn-firefox{background:var(--color-firefox);color:#fff;border-color:var(--color-firefox)}.btn-firefox:hover{background:var(--color-firefox-hover);border-color:var(--color-firefox-hover);color:#fff}.btn-sm{padding:8px 16px;font-size:13px}.warning-banner{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-warning-bg);border-bottom:1px solid var(--color-warning);color:var(--color-text-primary);font-size:.9rem}.warning-banner svg{color:var(--color-warning);flex-shrink:0;margin-top:2px}.warning-banner>div{text-align:center}main{max-width:1100px;margin:0 auto;padding:0 var(--spacing-lg)}.section{padding:var(--spacing-3xl) 0}.section-title{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-xl);letter-spacing:-.02em;text-align:center}.section-link{text-align:center;margin-top:var(--spacing-xl)}.section-link a{color:var(--color-brand);font-weight:500}.section-link a:hover{color:var(--color-brand-light)}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);max-width:1100px;margin:0 auto}.feature-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;transition:all var(--transition-base)}.feature-card:hover{border-color:var(--color-brand-border-soft);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.feature-icon{width:56px;height:56px;margin:0 auto var(--spacing-md);display:flex;align-items:center;justify-content:center;background:var(--color-brand-bg-subtle);border-radius:var(--radius-lg);color:var(--color-brand)}.feature-icon svg{width:28px;height:28px}.feature-card h3{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-sm)}.feature-card p{color:var(--color-text-secondary);font-size:.9rem;line-height:1.5}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);max-width:900px;margin:0 auto}.pricing-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);position:relative;transition:all var(--transition-base);display:flex;flex-direction:column}.pricing-card:hover{border-color:var(--color-brand-border-soft);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.pricing-card.featured{border-color:var(--color-brand);border-width:2px;box-shadow:var(--shadow-glow)}.pricing-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--color-brand);color:#fff;padding:4px 16px;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}.pricing-badge.save{background:var(--color-success)}.pricing-card h3{text-align:center;font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md)}.price{text-align:center;font-size:2.75rem;font-weight:700;color:var(--color-brand)}.price-period{text-align:center;color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--spacing-lg)}.pricing-features{list-style:none;flex:1;margin-bottom:var(--spacing-lg)}.pricing-features li{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;color:var(--color-text-secondary);font-size:.9rem}.pricing-features svg{color:var(--color-success);flex-shrink:0}.pricing-card .btn{width:100%}.steps{max-width:600px;margin:0 auto}.step{display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg) 0;position:relative}.step:not(:last-child):after{content:"";position:absolute;left:19px;top:64px;bottom:0;width:2px;background:var(--color-border)}.step-number{width:40px;height:40px;background:var(--color-brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}.step-content h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-xs)}.step-content p{color:var(--color-text-secondary);font-size:.9rem}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--spacing-md)}.faq-item{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-base)}.faq-item:hover{border-color:var(--color-brand-border-soft)}.faq-summary{padding:var(--spacing-md) var(--spacing-lg);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color var(--transition-base);-webkit-user-select:none;user-select:none}.faq-summary span{font-size:1.25rem;color:var(--color-text-muted);font-weight:400}.faq-item p{padding:0 var(--spacing-lg) var(--spacing-lg);color:var(--color-text-secondary);line-height:1.6;margin:0}.about-grid{display:flex;justify-content:center}.about-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;max-width:400px}.about-card h3{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-brand)}.about-card p{color:var(--color-text-secondary);font-size:.9rem;margin-bottom:var(--spacing-sm)}.about-card .btn{margin-top:var(--spacing-md)}.legal{text-align:center;padding:var(--spacing-2xl);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.legal h3{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md)}.legal p{color:var(--color-text-secondary);margin:var(--spacing-sm) 0;font-size:.9rem}footer{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);border-top:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-secondary);margin-top:var(--spacing-3xl)}footer p{margin:var(--spacing-xs) 0;font-size:.875rem}.back-to-top{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:48px;height:48px;background:var(--color-brand);color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);transition:all var(--transition-base);z-index:100}.back-to-top:hover{background:var(--color-brand-hover);transform:translateY(-4px);box-shadow:0 12px 28px #8b5cf666}@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.social-float{position:static;justify-content:center;padding:var(--spacing-md);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border)}.hero{padding:var(--spacing-2xl) var(--spacing-md) var(--spacing-xl)}.hero h1{font-size:2.25rem}.hero-subtitle{font-size:1.1rem}.hero-buttons{flex-direction:column;align-items:stretch}.section-title{font-size:1.75rem}main{padding:0 var(--spacing-md)}.section{padding:var(--spacing-2xl) 0}.features-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid,.faq-grid,.about-grid{grid-template-columns:1fr}.steps{padding:0 var(--spacing-md)}.back-to-top{bottom:var(--spacing-lg);right:var(--spacing-lg);width:44px;height:44px}}