.landing-section{padding:var(--space-4xl) 0}.landing-section.alt{background:var(--color-bg-surface);border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light)}.landing-inner{max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.landing-section h2{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-xl);letter-spacing:-.02em;font-weight:700}.landing-section h3{font-size:var(--font-size-lg);color:var(--color-text);margin:var(--space-xl) 0 var(--space-sm);letter-spacing:-.01em;font-weight:600}.landing-section p{color:var(--color-text-secondary);margin-bottom:var(--space-md);line-height:1.7}.landing-section ul{margin-bottom:var(--space-lg);padding:0;list-style:none}.landing-section li{padding-left:var(--space-xl);color:var(--color-text-secondary);margin-bottom:var(--space-sm);line-height:1.6;position:relative}.landing-section li:before{content:"›";color:var(--color-text-dim);font-weight:600;position:absolute;left:0}.game-grid{gap:var(--space-sm);margin:var(--space-lg) 0;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));display:grid}.game-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.game-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}.tutorial-steps{gap:var(--space-md);margin:var(--space-lg) 0;flex-direction:column;display:flex}.tutorial-step{gap:var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex}.tutorial-step-num{background:var(--color-accent);color:#fff;width:44px;height:44px;font-size:var(--font-size-lg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.tutorial-step-content h3{margin:0 0 var(--space-xs)}.tutorial-step-content p{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.comparison-table{border-collapse:collapse;width:100%;margin:var(--space-lg) 0;font-size:var(--font-size-sm);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.comparison-table th,.comparison-table td{padding:var(--space-sm) var(--space-md);text-align:left;transition:background var(--transition-fast)}.comparison-table th{color:var(--color-text);border-bottom:2px solid var(--color-border);background:0 0;font-weight:600}.comparison-table td{color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-light)}.comparison-table tbody tr:hover td{background:var(--color-bg-hover)}.comparison-table tr:last-child td{border-bottom:none}.comparison-table .col-bgmbox{color:var(--color-text);font-weight:600}.faq-section{padding:var(--space-4xl) 0}.faq-inner{max-width:var(--content-width);padding:0 var(--space-lg);margin:0 auto}.faq-section h2{font-size:var(--font-size-2xl);color:var(--color-text);margin-bottom:var(--space-lg);letter-spacing:-.02em;font-weight:700}.faq-list{border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:1px;display:flex;overflow:hidden}.faq-item{background:var(--color-bg-card)}.faq-question{width:100%;padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base);color:var(--color-text);cursor:pointer;text-align:left;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:space-between;align-items:center;font-weight:500;display:flex}.faq-question:hover{color:var(--color-accent);background:var(--color-bg-hover)}.faq-arrow{font-size:var(--font-size-sm);transition:transform var(--transition);margin-left:var(--space-md);color:var(--color-text-dim);flex-shrink:0;display:inline-block;transform:rotate(0)}.faq-item.open .faq-arrow{color:var(--color-accent);transform:rotate(90deg)}.faq-answer-wrapper{transition:grid-template-rows var(--transition);grid-template-rows:0fr;display:grid}.faq-item.open .faq-answer-wrapper{grid-template-rows:1fr}.faq-answer{padding:0 var(--space-lg);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.7;overflow:hidden}.faq-item.open .faq-answer{padding:0 var(--space-lg) var(--space-lg)}.hero{padding:var(--space-2xl) 0 var(--space-xl);text-align:center}.hero-inner{max-width:960px;padding:0 var(--space-lg);margin:0 auto}.hero-eyebrow{align-items:center;gap:var(--space-xs);margin-bottom:var(--space-lg);background:var(--color-accent-light);color:var(--color-accent);border:1px solid var(--color-accent);font-size:var(--font-size-xs);border-radius:999px;padding:4px 12px;font-weight:500;display:inline-flex}.hero-eyebrow-dot{color:var(--color-accent-bright)}.hero h1{font-size:var(--font-size-4xl);color:var(--color-text);margin-bottom:var(--space-md);letter-spacing:-.03em;font-weight:700;line-height:1.1}.hero-subtitle{font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.hero-description{font-size:var(--font-size-lg);color:var(--color-text-muted);margin-bottom:var(--space-2xl);line-height:1.6}.btn-primary{padding:var(--space-sm) var(--space-2xl);font-size:var(--font-size-base);color:#fff;background:var(--color-accent);background-image:linear-gradient(180deg, var(--color-accent-bright), var(--color-accent));border-radius:var(--radius);cursor:pointer;transition:filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);box-shadow:var(--shadow-sm);border:none;font-weight:600;display:inline-block}.btn-primary:hover{filter:brightness(1.08);box-shadow:var(--shadow);color:#fff;transform:translateY(-1px)}.btn-primary:active{filter:brightness(.96);transform:translateY(0)}.btn-secondary{padding:var(--space-sm) var(--space-2xl);font-size:var(--font-size-base);color:var(--color-accent);border:1px solid var(--color-accent);border-radius:var(--radius);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;font-weight:600;display:inline-block}.btn-secondary:hover{background:var(--color-accent-light)}.features{padding:var(--space-4xl) 0}.features-inner{max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.features h2{text-align:center;font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-2xl);letter-spacing:-.02em;font-weight:700}.feature-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.feature-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl);text-align:center;transition:border-color var(--transition-fast), box-shadow var(--transition), transform var(--transition)}.feature-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.feature-icon{width:40px;height:40px;margin-bottom:var(--space-md);background:var(--color-accent-light);border-radius:var(--radius-sm);font-size:var(--font-size-xl);justify-content:center;align-items:center;display:inline-flex}.feature-card h3{font-size:var(--font-size-lg);color:var(--color-text);margin-bottom:var(--space-sm);letter-spacing:-.01em;font-weight:600}.feature-card p{color:var(--color-text-muted);font-size:var(--font-size-sm);line-height:1.6}.popular-tools{padding:var(--space-4xl) 0}.popular-tools-inner{max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.popular-tools h2{text-align:center;font-size:var(--font-size-3xl);color:var(--color-text);margin-bottom:var(--space-2xl);letter-spacing:-.02em;font-weight:700}.tool-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}.tool-grid-8{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.tool-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-md) var(--space-lg);transition:border-color var(--transition-fast), box-shadow var(--transition), transform var(--transition);text-align:center;display:block;position:relative}.tool-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow);color:inherit;transform:translateY(-1px)}.tool-card h3{font-size:var(--font-size-sm);color:var(--color-text);transition:color var(--transition-fast);margin-bottom:2px;font-weight:600}.tool-card:hover h3{color:var(--color-accent)}.tool-card p{font-size:var(--font-size-xs);color:var(--color-text-muted)}@media (width<=768px){.tool-grid-8{grid-template-columns:repeat(2,1fr)}}.blog-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-md);transition:border-color var(--transition-fast), box-shadow var(--transition), transform var(--transition);display:block}.blog-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-lg);color:inherit;transform:translateY(-2px)}.blog-card h3{font-size:var(--font-size-xl);color:var(--color-text);margin-bottom:var(--space-sm);letter-spacing:-.01em;font-weight:600}.blog-card p{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-sm)}.blog-meta{font-size:var(--font-size-xs);color:var(--color-text-dim)}.blog-tags{gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.blog-tag{padding:2px var(--space-sm);background:var(--color-accent-light);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-accent);display:inline-block}.blog-article{max-width:var(--content-width);padding:var(--space-4xl) var(--space-lg);margin:0 auto}.blog-article h1{font-size:var(--font-size-4xl);color:var(--color-text);margin-bottom:var(--space-md);letter-spacing:-.03em;font-weight:800}.blog-article h2{font-size:var(--font-size-2xl);color:var(--color-text);margin:var(--space-2xl) 0 var(--space-md);letter-spacing:-.02em;font-weight:700}.blog-article h3{font-size:var(--font-size-lg);color:var(--color-text);margin:var(--space-xl) 0 var(--space-sm);letter-spacing:-.01em;font-weight:600}.blog-article p{color:var(--color-text-secondary);margin-bottom:var(--space-md);line-height:1.8}.blog-article ul,.blog-article ol{color:var(--color-text-secondary);padding-left:var(--space-xl);margin-bottom:var(--space-md)}.blog-article li{margin-bottom:var(--space-xs);line-height:1.6}.blog-article pre{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg);margin-bottom:var(--space-md);font-size:var(--font-size-sm);overflow-x:auto}.blog-article code{font-family:var(--font-mono);font-size:.9em}.blog-article p code,.blog-article li code{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px 6px;font-size:.85em}.blog-back{margin-bottom:var(--space-lg);color:var(--color-text-muted);font-size:var(--font-size-sm);transition:color var(--transition-fast);display:inline-block}.blog-back:hover{color:var(--color-accent)}@media (width<=600px){.hero h1{font-size:var(--font-size-2xl)}.hero{padding:var(--space-2xl) 0}.converter-shell{padding:0 var(--space-md)}.params-row{flex-direction:column;align-items:flex-start}.params-row label{min-width:auto}.tutorial-step{flex-direction:column}.game-grid{grid-template-columns:repeat(3,1fr)}.comparison-table{font-size:var(--font-size-xs)}.comparison-table th,.comparison-table td{padding:var(--space-xs) var(--space-sm)}.blog-article h1{font-size:var(--font-size-2xl)}}.format-links{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-border-light);text-align:center;font-size:var(--font-size-sm);color:var(--color-text-muted);line-height:2}.format-links strong{color:var(--color-text)}.format-links a{color:var(--color-text-muted);margin:0 2px}.format-links a:hover{color:var(--color-accent)}
