.scroll-animate{opacity:0;transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}.scroll-animate[data-animation=fade-up]{transform:translateY(40px)}.scroll-animate.animate-in{opacity:1;transform:translateY(0)}.animate-in .style-card,.animate-in .step-card,.animate-in .feature-card,.animate-in .game-mode-card,.animate-in .faq-item,.animate-in .content-block{animation:fadeInUp .7s cubic-bezier(.25,.46,.45,.94) backwards}.animate-in .style-card:nth-child(1),.animate-in .step-card:nth-child(1),.animate-in .feature-card:nth-child(1),.animate-in .game-mode-card:nth-child(1),.animate-in .faq-item:nth-child(1),.animate-in .content-block:nth-child(1){animation-delay:.1s}.animate-in .style-card:nth-child(2),.animate-in .step-card:nth-child(2),.animate-in .feature-card:nth-child(2),.animate-in .game-mode-card:nth-child(2),.animate-in .faq-item:nth-child(2),.animate-in .content-block:nth-child(2){animation-delay:.2s}.animate-in .style-card:nth-child(3),.animate-in .step-card:nth-child(3),.animate-in .feature-card:nth-child(3),.animate-in .game-mode-card:nth-child(3),.animate-in .faq-item:nth-child(3){animation-delay:.3s}.animate-in .style-card:nth-child(4),.animate-in .step-card:nth-child(4),.animate-in .feature-card:nth-child(4),.animate-in .game-mode-card:nth-child(4),.animate-in .faq-item:nth-child(4){animation-delay:.4s}.animate-in .faq-item:nth-child(5),.animate-in .faq-item:nth-child(6),.animate-in .faq-item:nth-child(7),.animate-in .faq-item:nth-child(8),.animate-in .faq-item:nth-child(9),.animate-in .faq-item:nth-child(10),.animate-in .faq-item:nth-child(11),.animate-in .faq-item:nth-child(12),.animate-in .faq-item:nth-child(13),.animate-in .faq-item:nth-child(14){animation-delay:calc(.1s * var(--item-index, 5))}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.image-page{width:100%;padding:var(--spacing-sm)}@media(min-width:768px){.image-page{padding:var(--spacing-md)}}.generator-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media(min-width:1024px){.generator-wrapper{flex-direction:row;gap:var(--spacing-md);height:calc(100vh - 120px)}}.section{padding:var(--spacing-xl) 0;position:relative}@media(min-width:768px){.section{padding:var(--spacing-2xl) 0}}.section-title{font-size:clamp(1.875rem,4.5vw,2.5rem);font-weight:700;text-align:center;margin-bottom:var(--spacing-md);color:var(--color-dark);line-height:1.2;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-subtitle{text-align:center;max-width:800px;margin:0 auto var(--spacing-lg);font-size:clamp(.9375rem,1.5vw,1.0625rem);line-height:1.7;color:var(--color-gray)}.section-subtitle strong{color:var(--color-primary);font-weight:600}.hero-container,.what-is-container,.styles-container,.how-to-container,.features-container,.game-modes-container,.no-download-container,.faq-container{width:100%;padding:0 var(--spacing-md)}@media(min-width:768px){.hero-container,.what-is-container,.styles-container,.how-to-container,.features-container,.game-modes-container,.no-download-container,.faq-container{padding:0 var(--spacing-lg)}}@media(min-width:1200px){.hero-container,.what-is-container,.styles-container,.how-to-container,.features-container,.game-modes-container,.no-download-container,.faq-container{padding:0 calc((100% - 1200px) / 2 + var(--spacing-lg))}}.hero-section{background:linear-gradient(135deg,#7db9a614,#a5d4c31f,#7db9a614);padding:var(--spacing-lg) 0;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:-50%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(125,185,166,.15) 0%,transparent 70%);pointer-events:none;animation:gentle-float 8s ease-in-out infinite}.hero-section:after{content:"";position:absolute;bottom:-30%;right:-5%;width:400px;height:400px;background:radial-gradient(circle,rgba(165,212,195,.12) 0%,transparent 70%);pointer-events:none;animation:gentle-float 10s ease-in-out infinite reverse}@keyframes gentle-float{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}.hero-content{text-align:center;max-width:1200px;margin:0 auto;position:relative;z-index:1}.hero-title{font-size:clamp(2rem,5.5vw,3rem);font-weight:700;color:var(--color-dark);margin-bottom:var(--spacing-md);line-height:1.15}.title-highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}.hero-description{font-size:clamp(.9375rem,1.6vw,1.0625rem);line-height:1.75;color:var(--color-gray);margin-bottom:var(--spacing-lg)}.hero-description strong{color:var(--color-primary);font-weight:600}.hero-stats{display:flex;justify-content:center;gap:var(--spacing-lg);flex-wrap:wrap;margin-top:var(--spacing-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:#fffc;backdrop-filter:blur(10px);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);min-width:140px}.stat-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.stat-number{font-size:clamp(1.875rem,3vw,2.5rem);font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.875rem;color:var(--color-gray);font-weight:500}.what-is-section{background:var(--color-gray-light)}.what-is-content{max-width:900px;margin:0 auto}.what-is-description{background:#ffffffe6;backdrop-filter:blur(10px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary)}.what-is-description p{font-size:clamp(.9375rem,1.5vw,1.0625rem);line-height:1.75;color:var(--color-gray);margin-bottom:var(--spacing-md)}.what-is-description p:last-child{margin-bottom:0}.what-is-description strong{color:var(--color-primary);font-weight:600}.styles-section{background:var(--background)}.styles-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);max-width:1200px;margin:0 auto}@media(min-width:640px){.styles-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.styles-grid{grid-template-columns:repeat(4,1fr)}}.style-card{position:relative;background:linear-gradient(135deg,#fffffff2,#f8f9faf2);backdrop-filter:blur(12px);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);border:2px solid rgba(125,185,166,.2)}.style-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.style-number{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);z-index:20;background:var(--gradient-primary);color:#fff;font-size:.75rem;font-weight:700;padding:.375rem .75rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.style-image-wrapper{position:relative;overflow:hidden;height:240px}.style-image{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}.style-card:hover .style-image{transform:scale(1.1)}.style-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(125,185,166,.4) 0%,transparent 50%);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.style-card:hover .style-overlay{opacity:1}.style-content{padding:var(--spacing-md)}.style-prompt{font-size:.875rem;line-height:1.6;color:var(--color-gray);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.style-card:hover .style-prompt{-webkit-line-clamp:unset}.how-to-section{background:var(--color-gray-light)}.how-to-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);max-width:1200px;margin:0 auto}@media(min-width:768px){.how-to-grid{grid-template-columns:repeat(3,1fr)}}.step-card{background:#fffffff2;backdrop-filter:blur(12px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-base);border:1px solid var(--border-color);position:relative}.step-card:hover{transform:translateY(-6px) rotate(1deg);box-shadow:var(--shadow-lg)}.step-number{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:50%;color:#fff;font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm);transition:transform var(--transition-base)}.step-card:hover .step-number{transform:scale(1.1) rotate(5deg)}.step-content{flex:1}.step-title{font-size:clamp(1.0625rem,1.8vw,1.25rem);font-weight:600;color:var(--color-dark);margin-bottom:var(--spacing-sm);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.step-description{font-size:.9375rem;line-height:1.7;color:var(--color-gray);margin:0}.step-description strong{color:var(--color-primary);font-weight:600}.features-section{background:var(--background)}.features-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);max-width:1200px;margin:0 auto}@media(min-width:768px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-card{background:#fffffff2;backdrop-filter:blur(12px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);display:flex;flex-direction:column;gap:var(--spacing-md);border:1px solid var(--border-color);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.feature-card:hover:before{transform:scaleX(1)}.feature-visual{display:flex;align-items:center;justify-content:center}.feature-icon-circle{width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:var(--gradient-soft);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--transition-base)}.feature-card:hover .feature-icon-circle{transform:scale(1.1) rotate(5deg)}.feature-content{flex:1}.feature-title{font-size:clamp(1.0625rem,1.8vw,1.25rem);font-weight:600;color:var(--color-dark);margin-bottom:var(--spacing-xs)}.feature-description{font-size:.9375rem;line-height:1.7;color:var(--color-gray);margin:0}.feature-description strong{color:var(--color-primary);font-weight:600}.game-modes-section{background:var(--color-gray-light)}.game-modes-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);max-width:1200px;margin:0 auto}@media(min-width:768px){.game-modes-grid{grid-template-columns:repeat(2,1fr)}}.game-mode-card{position:relative;background:#fffffff2;backdrop-filter:blur(12px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform var(--transition-base),box-shadow var(--transition-base);border:2px dashed rgba(125,185,166,.3);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:var(--spacing-md);align-items:center}.game-mode-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,#f0f8f4f2,#e6f3edf2)}.game-mode-icon{font-size:3rem;margin:0;display:inline-block;animation:gentle-bounce 2s ease-in-out infinite;grid-column:1;grid-row:1}@keyframes gentle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.game-mode-title{font-size:clamp(1.125rem,2vw,1.375rem);font-weight:600;color:var(--color-dark);margin:0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:left;grid-column:2;grid-row:1}.game-mode-description{font-size:.9375rem;line-height:1.7;color:var(--color-gray);margin:0;text-align:left;grid-column:1 / -1;grid-row:2}.game-mode-features{background:#7db9a61a;padding:var(--spacing-sm);border-radius:var(--radius-md);font-size:.9375rem;line-height:1.6;color:var(--color-gray);grid-column:1 / -1;grid-row:3}.features-label{font-weight:600;color:var(--color-primary)}.no-download-section{background:var(--background)}.no-download-layout{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);max-width:1200px;margin:0 auto;align-items:center}@media(min-width:1024px){.no-download-layout{grid-template-columns:2fr 1fr}}.no-download-content{display:flex;flex-direction:column;gap:var(--spacing-md)}.content-block{background:#ffffffe6;backdrop-filter:blur(10px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);border-left:4px solid var(--color-primary)}.content-block:hover{transform:translate(6px);box-shadow:var(--shadow-md)}.content-block p{font-size:.9375rem;line-height:1.75;color:var(--color-gray);margin:0}.content-block strong{color:var(--color-primary);font-weight:600}.no-download-visual{background:linear-gradient(135deg,#7db9a61a,#a5d4c326);border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.visual-icon{font-size:6rem;margin-bottom:var(--spacing-md);animation:gentle-pulse 3s ease-in-out infinite}@keyframes gentle-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}.visual-text{font-size:1.5rem;font-weight:600;color:var(--color-dark);margin-bottom:var(--spacing-xs)}.visual-subtext{font-size:.875rem;color:var(--color-gray)}.faq-section{background:var(--color-gray-light)}.faq-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);max-width:1200px;margin:0 auto}@media(min-width:768px){.faq-grid{grid-template-columns:repeat(2,1fr)}}.faq-item{background:#fffffff2;backdrop-filter:blur(12px);padding:var(--spacing-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base);display:flex;gap:var(--spacing-md);border:1px solid var(--border-color);position:relative}.faq-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#fffffff2,#f0f8f4f2)}.faq-icon{flex-shrink:0;font-size:1.5rem;line-height:1;opacity:.7}.faq-content{flex:1}.faq-question{font-size:clamp(1rem,1.5vw,1.125rem);font-weight:600;color:var(--color-dark);margin-bottom:var(--spacing-xs);line-height:1.4}.faq-answer{font-size:.9375rem;line-height:1.7;color:var(--color-gray);margin:0}.faq-answer strong{color:var(--color-primary);font-weight:600}.inline-link{color:var(--color-primary);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast);display:inline}.inline-link:hover{color:var(--color-primary-dark);border-bottom-color:var(--color-primary-dark)}[data-theme=light] .hero-section,[data-theme=light] .how-to-section,[data-theme=light] .game-modes-section,[data-theme=light] .faq-section{background:#fff}[data-theme=light] .what-is-section,[data-theme=light] .styles-section,[data-theme=light] .features-section,[data-theme=light] .no-download-section{background:#f8f9fa}[data-theme=light] .content-block,[data-theme=light] .style-card,[data-theme=light] .step-card,[data-theme=light] .feature-card,[data-theme=light] .game-mode-card,[data-theme=light] .faq-item,[data-theme=light] .stat-item,[data-theme=light] .what-is-description{background:#fff;border-color:#7db9a633}@media(max-width:768px){.hero-stats{gap:var(--spacing-sm)}.stat-item{min-width:120px;padding:var(--spacing-sm)}.styles-grid,.how-to-grid,.features-grid,.game-modes-grid,.faq-grid{gap:var(--spacing-sm)}.style-card,.step-card,.feature-card,.game-mode-card,.faq-item,.content-block{padding:var(--spacing-md)}.game-mode-card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;text-align:center}.game-mode-icon{font-size:2.5rem;grid-column:1;grid-row:1;margin:0 auto var(--spacing-sm)}.game-mode-title{grid-column:1;grid-row:2;text-align:center;margin-bottom:var(--spacing-sm)}.game-mode-description{grid-column:1;grid-row:3;text-align:center;margin-bottom:var(--spacing-sm)}.game-mode-features{grid-column:1;grid-row:4}.style-image-wrapper{height:200px}.visual-icon{font-size:4rem}.visual-text{font-size:1.25rem}.no-download-visual{min-height:240px;padding:var(--spacing-lg) var(--spacing-md)}}