:root{--foreground:#020817;--muted:#65758b;--border:#e1e7ef;--accent:#f1f5f9;--primary:#7c43ef;--radius:.5rem;--display:"Playfair Display", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;accent-color:var(--primary)}*,:before,:after{box-sizing:border-box}body{color:var(--foreground);background:#fff;margin:0;font-family:Inter,sans-serif;line-height:1.5}h1,h2,p{margin:0}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.container{max-width:72rem;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-family:var(--display);margin-bottom:.75rem;font-size:2.25rem;line-height:2.5rem;animation:.3s ease-out fade-in}.header p{max-width:42rem;color:var(--muted);margin:0 auto;font-size:1.125rem;animation:.4s ease-out slide-in}.layout{gap:2rem;display:grid}@media (width>=1024px){.layout{grid-template-columns:1fr 1fr}}.column{flex-direction:column;gap:2rem;display:flex}.footer{text-align:center;color:var(--muted);margin-top:4rem;font-size:.875rem}.card{border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex;box-shadow:0 1px 2px #0000000d}.card h2{font-family:var(--display);letter-spacing:-.025em;padding-bottom:.5rem;font-size:1.5rem;font-weight:600;line-height:1}.card-footer{justify-content:flex-end;display:flex}textarea,select{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:#fff;width:100%;padding:.5rem .75rem;font-size:.875rem}textarea{resize:vertical;min-height:200px}select{height:2.5rem}textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}fieldset{border:0;margin:0;padding:0}legend,.field-label{justify-content:space-between;width:100%;margin-bottom:.5rem;padding:0;font-size:.875rem;font-weight:500;display:flex}.field input[type=range]{width:100%;margin:0}.options{gap:.5rem;padding-top:.5rem;display:grid}.options-2{grid-template-columns:repeat(2,1fr)}.options-3{grid-template-columns:repeat(3,1fr)}.options label{cursor:pointer;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.options input{cursor:pointer;width:1rem;height:1rem;margin:0}.swatch{border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);width:3rem;height:1.5rem}.button{color:#fff;background:var(--primary);border-radius:calc(var(--radius) - 2px);cursor:pointer;border:0;align-items:center;gap:.5rem;height:2.5rem;padding:0 1rem;font-size:.875rem;font-weight:500;display:inline-flex}.button:hover{background:#7c43efe6}.button:disabled{opacity:.5;pointer-events:none}.preview{width:100%;max-width:28rem;margin:0 auto;position:relative}.post-frame{border:1px solid var(--border);border-radius:var(--radius);padding:40px;box-shadow:0 1px 2px #0000000d}.post-frame canvas{aspect-ratio:1;width:100%;display:block}@media (width<=640px){.post-frame{padding:20px}}.nav{border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:50%;place-items:center;width:2.5rem;height:2.5rem;display:grid;position:absolute;top:50%;box-shadow:0 4px 6px -1px #0000001a}.nav:hover{background:var(--accent)}.nav-prev{left:0;transform:translate(-50%,-50%)}.nav-next{right:0;transform:translate(50%,-50%)}.pages{flex-wrap:wrap;justify-content:center;gap:.25rem;margin-top:-.5rem;display:flex}.page{border-radius:calc(var(--radius) - 2px);cursor:pointer;background:0 0;border:0;width:2rem;height:2rem;font-size:.875rem;font-weight:500}.page:hover{background:var(--accent)}.page.active{color:#fff;background:var(--primary)}@keyframes fade-in{0%{opacity:0}}@keyframes slide-in{0%{opacity:0;transform:translate(10px)}}
