:root{--bg:#f7f3ea;--bg-2:#e8f3ff;--ink:#1f2233;--muted:#4b4f63;--card:#fffc;--line:#d8d0bf;--accent:#eb5e28;--accent-2:#1e6091;--radius:22px}*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0;overflow-x:hidden}body{color:var(--ink);background:radial-gradient(1200px 700px at 10% -10%,#ffe7c4 0%,transparent 60%),radial-gradient(1200px 800px at 100% 0%,#cfe8ff 0%,transparent 60%),linear-gradient(160deg,var(--bg)0%,#fefefe 60%,var(--bg-2)100%);font-family:Space Grotesk,Manrope,Avenir Next,sans-serif;line-height:1.65}.page-shell{width:100%;max-width:1160px;margin:0 auto;padding:2rem 1.2rem 4rem}.hero{color:#fff;border-radius:calc(var(--radius) + 10px);background:linear-gradient(140deg,#1e6091 0%,#3a86b5 48%,#eb5e28 100%);border:1px solid #fff;padding:2.4rem 2rem;animation:.7s ease-out both riseIn;box-shadow:0 20px 48px #2048683d}.hero-kicker{text-transform:uppercase;letter-spacing:.18em;opacity:.85;margin:0;font-size:.74rem;font-weight:700}.hero h1{letter-spacing:-.02em;margin:.35rem 0 0;font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.05}.hero p{color:#f7f7f7;max-width:68ch;margin:.9rem 0 0}.content-wrapper{gap:1rem;margin-top:1rem;display:grid}.content-wrapper article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:1.4rem;animation:.65s ease-out both riseIn;box-shadow:0 12px 26px #1b263b12}.generator-shell{grid-template-columns:1.05fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}.generator-preview-wrap,.generator-controls{border:1px solid var(--line);border-radius:var(--radius);background:#ffffffde;box-shadow:0 12px 26px #1b263b12}.generator-preview-wrap{place-items:center;padding:1.2rem;display:grid}.generator-preview{aspect-ratio:1;border:10px solid #fff;border-radius:24px;width:min(100%,460px);overflow:hidden;box-shadow:0 14px 28px #23314d24}.face-preview-svg{width:100%;height:100%;display:block}.generator-controls{gap:.9rem;padding:1.2rem;display:grid}.generator-controls h2{margin:0}.gen-btn{color:#fff;cursor:pointer;border:0;border-radius:12px;padding:.8rem 1rem;font-size:.98rem;font-weight:700}.gen-btn-random{background:linear-gradient(90deg,#ed6a5a,#f29e4c)}.gen-btn-download{background:linear-gradient(90deg,#1278c0,#11a5af)}.color-pickers{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.picker-label{color:#3d4258;margin:0 0 .45rem;font-size:.9rem;font-weight:600}.swatch-row{flex-wrap:wrap;gap:.45rem;display:flex}.swatch{cursor:pointer;border:2px solid #c7cad5;border-radius:999px;width:30px;height:30px}.swatch.active{border-color:#111827}.select-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;display:grid}.select-grid label{color:#3d4258;gap:.35rem;font-size:.88rem;font-weight:600;display:grid}.select-grid select{background:#fff;border:1px solid #cfd5df;border-radius:10px;width:100%;padding:.5rem}h2{margin:0;font-size:clamp(1.34rem,2.1vw,1.8rem);line-height:1.2}h3{margin:0;font-size:1.02rem;line-height:1.3}p{color:var(--muted);overflow-wrap:anywhere;word-break:break-word;margin:.8rem 0 0}.gallery-intro,.section-intro,.gallery-cta{max-width:75ch}.gallery-container{border:1px solid var(--line);background:#f6f8fc;border-radius:16px;margin-top:1rem;padding:.8rem;display:none;overflow:hidden}.gallery-track{gap:.7rem;width:max-content;animation:60s linear infinite marquee;display:flex}.gallery-container:hover .gallery-track{animation-play-state:paused}.gallery-item{background:#fff;border:1px solid #d8deea;border-radius:14px;width:138px;overflow:hidden;box-shadow:0 7px 16px #1f22331a}.gallery-item img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;display:block}.steps,.feature-grid,.use-case-grid,.tips-grid,.faq-list{gap:.8rem;margin-top:1rem;display:grid}.feature-grid,.use-case-grid,.tips-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.step,.feature,.use-case,.tip,.faq-item,.comparison-content{border:1px solid var(--line);background:#fff;border-radius:14px;padding:.95rem}.faq-item h3{color:#22253a;margin:0}@media (max-width:900px){.page-shell{width:100%;padding:1.2rem 0 2.2rem}.generator-shell{grid-template-columns:1fr}.hero{padding:1.4rem 1.1rem}.content-wrapper article{padding:1.05rem}.feature-grid,.use-case-grid,.tips-grid,.color-pickers,.select-grid{grid-template-columns:1fr}.gallery-item{width:122px}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes riseIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}