:root{--bg-primary:#fff;--bg-secondary:#fafafa;--bg-tertiary:#f3f4f6;--text-primary:#111827;--text-secondary:#4b5563;--text-tertiary:#9ca3af;--accent-primary:#e1306c;--accent-dark:#c13584;--accent-gradient-start:#e1306c;--accent-gradient-end:#f56040;--border-light:#e5e7eb;--border-soft:#f3f4f6;--card-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000005;--card-hover-shadow:0 20px 25px -5px #00000014,0 10px 10px -5px #00000005;--radius-lg:1rem;--radius-md:.75rem;--radius-sm:.5rem;--transition-default:all .2s ease}@media (prefers-color-scheme:dark){:root{--bg-primary:#0f0f12;--bg-secondary:#18181b;--bg-tertiary:#1f1f24;--text-primary:#fafafa;--text-secondary:#a1a1aa;--text-tertiary:#71717a;--border-light:#27272a;--border-soft:#1f1f24;--card-shadow:0 4px 6px -1px #0003;--card-hover-shadow:0 20px 25px -5px #0000004d}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);scroll-behavior:smooth;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}.hero-section{color:#fff;text-align:center;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);padding:5rem 0 4.5rem;position:relative;overflow:hidden}.hero-section:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 10%,#e1306c26,#0000 60%);position:absolute;inset:0}.hero-content{z-index:1;max-width:800px;margin:0 auto;position:relative}.hero-title{letter-spacing:-.02em;margin-bottom:1.25rem;font-size:3.5rem;font-weight:800;line-height:1.2}.gradient{background:linear-gradient(135deg,#e1306c,#f56040,#ffdc80);color:#0000;-webkit-background-clip:text;background-clip:text}.hero-description{color:#ffffffd9;max-width:640px;margin:0 auto 2rem;font-size:1.25rem;line-height:1.6}.hero-cta-group{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn-primary,.btn-secondary{transition:var(--transition-default);cursor:pointer;border:none;border-radius:9999px;padding:.75rem 1.75rem;font-size:1rem;font-weight:600;text-decoration:none;display:inline-block}.btn-primary{background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));color:#fff;box-shadow:0 4px 14px #e1306c59}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px #e1306c73}.btn-secondary{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff1f;border:1px solid #fff3}.btn-secondary:hover{background:#fff3;transform:translateY(-1px)}.prompt-box-section{background:var(--bg-secondary);border-bottom:1px solid var(--border-light);padding:3rem 0}.prompt-card{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);text-align:center;border:1px solid var(--border-light);transition:var(--transition-default);padding:2rem}.prompt-card:hover{box-shadow:var(--card-hover-shadow)}.prompt-card h2{color:var(--text-primary);margin-bottom:.75rem;font-size:1.75rem}.prompt-card p{color:var(--text-secondary);margin-bottom:1.5rem}.prompt-form{flex-wrap:wrap;gap:1rem;max-width:700px;margin:0 auto;display:flex}.prompt-input{border:1.5px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);flex:1;padding:.875rem 1.25rem;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}.prompt-input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #e1306c1a}.prompt-input::placeholder{color:var(--text-tertiary)}.prompt-submit{background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);border:none;padding:.875rem 1.75rem;font-size:1rem;font-weight:600}.prompt-submit:hover{transform:translateY(-1px);box-shadow:0 4px 12px #e1306c59}.prompt-hint{color:var(--text-secondary);margin-top:1rem;font-size:.875rem}.section-title{text-align:center;color:var(--text-primary);letter-spacing:-.01em;margin-bottom:2.5rem;font-size:2rem;font-weight:700}.use-cases-section{background:var(--bg-primary);padding:4rem 0}.use-cases-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem;display:grid}.use-case-card{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:var(--transition-default);padding:1.75rem}.use-case-card:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-4px)}.use-case-icon{margin-bottom:1rem;font-size:2.5rem;display:inline-block}.use-case-card h3{color:var(--text-primary);margin-bottom:.75rem;font-size:1.35rem}.use-case-card p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.6}.inline-link{color:var(--accent-primary);transition:var(--transition-default);font-size:.875rem;font-weight:500;text-decoration:none}.inline-link:hover{color:var(--accent-dark);text-decoration:underline}.examples-section{background:var(--bg-secondary);padding:4rem 0}.examples-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;display:grid}.example-card{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--card-shadow);transition:var(--transition-default);padding:1.5rem}.example-card:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.example-tag{color:var(--accent-primary);background:linear-gradient(135deg,#e1306c1f,#f5604014);border-radius:9999px;margin-bottom:1rem;padding:.25rem .75rem;font-size:.7rem;font-weight:700;display:inline-block}.example-prompt{background:var(--bg-tertiary);border-radius:var(--radius-sm);color:var(--text-primary);border-left:3px solid var(--accent-primary);margin-bottom:1rem;padding:1rem;font-family:SF Mono,Menlo,Monaco,Cascadia Code,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto}.example-result{color:var(--text-secondary);border-top:1px solid var(--border-light);padding-top:.75rem;font-size:.875rem}.steps-section{background:var(--bg-primary);padding:4rem 0}.steps-list{max-width:800px;margin:0 auto}.step-item{align-items:flex-start;gap:1.5rem;margin-bottom:2rem;display:flex}.step-number{background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));color:#fff;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.25rem;font-weight:700;display:flex;box-shadow:0 4px 10px #e1306c40}.step-content h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.25rem}.step-content p{color:var(--text-secondary);line-height:1.6}.best-practices-section{background:var(--bg-secondary);padding:4rem 0}.best-practices-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.practice-card{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:var(--transition-default);padding:1.5rem}.practice-card:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.practice-card h3{color:var(--text-primary);margin-bottom:.75rem;font-size:1.15rem}.practice-card p{color:var(--text-secondary);line-height:1.6}.mistakes-section{background:var(--bg-primary);padding:4rem 0}.mistakes-list{max-width:800px;margin:0 auto}.mistake-item{background:var(--bg-secondary);border-radius:var(--radius-md);transition:var(--transition-default);border-left:3px solid #ef4444;gap:1rem;margin-bottom:1rem;padding:1.25rem;display:flex}.mistake-item:hover{transform:translate(4px)}.mistake-icon{flex-shrink:0;font-size:1.25rem}.mistake-item div{color:var(--text-secondary);line-height:1.6}.mistake-item strong{color:var(--text-primary)}.advanced-section{background:var(--bg-secondary);padding:4rem 0}.advanced-tips{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;display:grid}.tip-item{background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:var(--transition-default);padding:1.5rem}.tip-item:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.tip-item h3{color:var(--text-primary);margin-bottom:.75rem;font-size:1.15rem}.tip-item p{color:var(--text-secondary);line-height:1.6}.faq-section{background:var(--bg-primary);padding:4rem 0}.faq-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.75rem;display:grid}.faq-item{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-light);transition:var(--transition-default);padding:1.5rem}.faq-item:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.faq-item h3{color:var(--text-primary);margin-bottom:.75rem;font-size:1.15rem}.faq-item p{color:var(--text-secondary);margin-bottom:.75rem;line-height:1.6}.final-cta-section{background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);padding:4rem 0;position:relative}.final-cta-card{text-align:center;color:#fff;z-index:1;max-width:700px;margin:0 auto;position:relative}.final-cta-card h2{margin-bottom:1rem;font-size:2rem}.final-cta-card p{color:#ffffffd9;margin-bottom:2rem;font-size:1.125rem}.final-cta-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1.5rem;display:flex}.btn-primary-large{background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));color:#fff;transition:var(--transition-default);border-radius:9999px;padding:.875rem 2rem;font-size:1.125rem;font-weight:700;text-decoration:none;display:inline-block;box-shadow:0 4px 14px #e1306c59}.btn-primary-large:hover{transform:translateY(-2px);box-shadow:0 8px 25px #e1306c80}.btn-secondary-large{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:var(--transition-default);background:#ffffff1f;border:1px solid #fff3;border-radius:9999px;padding:.875rem 2rem;font-size:1.125rem;font-weight:600;text-decoration:none;display:inline-block}.btn-secondary-large:hover{background:#fff3;transform:translateY(-1px)}.final-cta-note{color:#ffffffa6;font-size:.875rem}.internal-links-footer{background:var(--bg-secondary);border-top:1px solid var(--border-light);padding:2rem 0}.internal-links-footer h3{color:var(--text-primary);text-align:center;letter-spacing:.5px;margin-bottom:1rem;font-size:1rem;font-weight:600}.related-links{flex-wrap:wrap;justify-content:center;gap:1rem 1.5rem;margin-bottom:1.5rem;display:flex}.related-links a{color:var(--text-secondary);transition:var(--transition-default);font-size:.875rem;text-decoration:none}.related-links a:hover{color:var(--accent-primary);transform:translateY(-1px)}.footer-credit{text-align:center;border-top:1px solid var(--border-light);padding-top:1rem}.footer-credit a{color:var(--accent-primary);transition:var(--transition-default);font-size:.875rem;font-weight:500;text-decoration:none}.footer-credit a:hover{color:var(--accent-dark);text-decoration:underline}@media (max-width:768px){.container{padding:0 1rem}.hero-title{font-size:2.25rem}.hero-description{padding:0 .5rem;font-size:1rem}.section-title{font-size:1.5rem}.prompt-card{padding:1.5rem}.prompt-card h2{font-size:1.35rem}.prompt-form{flex-direction:column}.step-item{flex-direction:column;align-items:flex-start;gap:.75rem}.step-number{width:40px;height:40px;font-size:1rem}.faq-grid{grid-template-columns:1fr}.final-cta-card h2{font-size:1.5rem}.final-cta-card p{font-size:1rem}}@media (max-width:480px){.hero-cta-group,.final-cta-buttons{flex-direction:column;align-items:center;width:100%}.btn-primary,.btn-secondary,.btn-primary-large,.btn-secondary-large{text-align:center;width:100%;max-width:280px}.use-cases-grid,.examples-grid,.best-practices-grid,.advanced-tips{grid-template-columns:1fr}.related-links{flex-direction:column;align-items:center;gap:.75rem}.example-prompt{white-space:normal;word-break:break-word;font-size:.7rem}.step-content h3{font-size:1.125rem}.mistake-item{padding:1rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:.5s forwards fadeInUp}html{scroll-behavior:smooth}:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:4px}::selection{color:var(--text-primary);background:#e1306c33}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-dark)}
