:root{font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6,p{margin:0}@media(prefers-color-scheme:light){:root{color:#1e293b;background-color:#f8fafc}}.container{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}.header{padding:2rem 0 1rem;text-align:center}.logo-container{display:flex;align-items:center;justify-content:center;gap:1rem}.logo-image{display:flex;align-items:center}.logo{font-family:Fraunces,Georgia,serif;font-size:3rem;font-weight:700;color:#ea580c;margin:0;text-shadow:0 0 30px rgba(234,88,12,.3)}.hero{text-align:left;padding:4rem 0;max-width:800px;margin:0 auto}.hero-title{font-family:Fraunces,Georgia,serif;font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.2;background:linear-gradient(135deg,#dc2626,#f97316,#fb923c 70%,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:left}.hero-subtitle{font-size:1.25rem;opacity:.9;line-height:1.6;margin-bottom:1rem}.hero-tagline{font-size:1.05rem;opacity:.75;font-style:italic;color:#fb923c}.steps{padding:2rem 0 4rem;max-width:800px;margin:0 auto}.steps-title{text-align:center;font-size:2rem;margin-bottom:2.5rem;background:linear-gradient(90deg,#ea580c,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Outfit,system-ui,sans-serif}.steps-container{display:flex;flex-direction:column;gap:2rem}.step{display:flex;align-items:flex-start;gap:1.5rem;padding:1.5rem;border-radius:12px;background:#0003;border:1px solid rgba(234,88,12,.3);transition:transform .2s,border-color .2s}.step:hover{transform:translate(8px);border-color:#f9731699}.step-number{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#ea580c,#f97316);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff;box-shadow:0 4px 12px #ea580c4d}.step:nth-child(2) .step-number{background:linear-gradient(135deg,#f97316,#fb923c);box-shadow:0 4px 12px #f973164d}.step:nth-child(3) .step-number{background:linear-gradient(135deg,#fb923c,#fbbf24);box-shadow:0 4px 12px #fb923c4d}.step-content{flex:1;display:flex;flex-direction:column;gap:.75rem}.step-content h3{font-size:1.25rem;color:#fffffff2;margin:0;font-family:Outfit,system-ui,sans-serif}.code-wrapper{position:relative}.step-content code{font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;color:#fbbf24;background:#0000004d;padding:.75rem 1rem;border-radius:6px;border:1px solid rgba(251,146,60,.2);display:block;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.step-content code.multiline{white-space:pre;word-break:normal}.copy-btn{position:absolute;top:.5rem;right:.5rem;padding:.5rem;background:#f97316cc;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}.copy-btn:hover{background:#ea580ce6}.copy-btn svg{display:block}.placeholder{color:#fb923c;font-weight:600}.diff{margin:0;background:#0000004d;border-radius:6px;border:1px solid rgba(251,146,60,.2);padding:.75rem 1rem;overflow-x:auto;font-size:.875rem}.diff code{background:none;border:none;padding:0;display:flex;flex-direction:column;gap:.25rem;font-size:.875rem}.diff-remove,.diff-add{display:block;padding:.25rem .5rem;border-radius:4px}.diff-remove{background:#dc262626;color:#fca5a5}.diff-add{background:#22c55e26;color:#86efac}.cta-section{max-width:600px;margin:4rem auto;padding:3rem 2rem;text-align:center;border-radius:16px;background:#ffffff08;border:1px solid rgba(249,115,22,.2)}.cta-section h2{font-size:2rem;margin-bottom:.5rem;color:#fb923c}.cta-section>p{opacity:.7;margin-bottom:2rem;font-size:1rem}.interest-form{display:flex;flex-direction:column;gap:1rem}.form-group{width:100%}.form-group input,.form-group textarea{width:100%;padding:.875rem;font-size:1rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0003;color:inherit;font-family:inherit;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#fff6;box-shadow:0 0 0 3px #ffffff0d}.form-group textarea{resize:vertical;min-height:100px}.submit-btn{padding:1rem 2rem;font-size:1.125rem;font-weight:600;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .2s;margin-top:.5rem}.submit-btn:hover{background:#ea580c;transform:translateY(-2px)}.submit-btn:active{transform:translateY(0)}.footer{text-align:center;padding:3rem 0 2rem;opacity:.6;font-size:.875rem}@media(max-width:768px){.logo{font-size:2rem}.logo-image img{width:50px;height:50px}.hero-title{font-size:1.75rem}.hero-subtitle{font-size:1.125rem}.hero-tagline{font-size:.95rem}.steps{padding:1.5rem 0 3rem}.steps-title{font-size:1.75rem;margin-bottom:2rem}.step{flex-direction:column;gap:1rem;padding:1.25rem}.step:hover{transform:translateY(-4px)}.step-number{width:40px;height:40px;font-size:1.25rem}.step-content code,.diff,.diff code{font-size:.8rem}.diff-remove,.diff-add{padding:.2rem .4rem}.copy-btn{padding:.4rem}.copy-btn svg{width:14px;height:14px}.cta-section{padding:2rem 1.5rem}}@media(prefers-color-scheme:light){.step{background:#fff9;border:1px solid rgba(234,88,12,.3)}.step:hover{background:#fffc;border-color:#f9731680}.step-content h3{color:#1e293b}.step-content code{background:#ea580c14;color:#c2410c;border:1px solid rgba(234,88,12,.25)}.placeholder{color:#ea580c}.diff{background:#ea580c14;border:1px solid rgba(234,88,12,.25)}.diff-remove{background:#dc26261f;color:#dc2626}.diff-add{background:#22c55e1f;color:#16a34a}.cta-section{background:#00000005;border:1px solid rgba(249,115,22,.25)}.cta-section h2{color:#ea580c}.form-group input,.form-group textarea{background:#fff;border:1px solid rgba(0,0,0,.15)}.form-group input:focus,.form-group textarea:focus{border-color:#0000004d;box-shadow:0 0 0 3px #0000000d}.submit-btn{background:#f97316;color:#fff}.submit-btn:hover{background:#ea580c}}