:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{min-width:320px;min-height:100vh;margin:0}#root{box-sizing:border-box;justify-content:center;align-items:flex-start;width:100%;min-height:100vh;padding-top:2rem;padding-bottom:2rem;display:flex}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.container{box-sizing:border-box;width:100%;max-width:800px;margin:0 auto;padding:1.5rem}.header{text-align:center;border-bottom:1px solid #333;margin-bottom:2rem;padding-bottom:1.5rem}h1{background:linear-gradient(135deg,#646cff 0%,#a855f7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 .5rem;font-size:1.75rem}.subtitle{color:#888;margin:0;font-size:.9rem}.form-section{background:linear-gradient(145deg,#1a1a1a 0%,#1e1e1e 100%);border:1px solid #2a2a2a;border-radius:12px;margin-bottom:1.25rem;padding:1.25rem}.form-section h2{color:#aaa;align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:.95rem;font-weight:600;display:flex}.form-section h2:before{content:"";background:#646cff;border-radius:2px;width:3px;height:1em;display:inline-block}.section-desc{color:#777;margin:0 0 .75rem;font-size:.8rem;line-height:1.5}.preset-buttons{flex-wrap:wrap;gap:.5rem;display:flex}.preset-btn{color:#bbb;cursor:pointer;background:#252525;border:1px solid #3a3a3a;border-radius:20px;padding:.5rem .875rem;font-size:.85rem;font-weight:500;transition:all .15s}.preset-btn:hover{color:#ddd;background:#2d2d2d;border-color:#646cff;transform:translateY(-1px)}.preset-btn.active{color:#fff;background:linear-gradient(135deg,#646cff 0%,#5558dd 100%);border-color:#646cff;box-shadow:0 2px 8px #646cff4d}.custom-input{color:#ddd;resize:vertical;box-sizing:border-box;background:#1a1a1a;border:1px solid #3a3a3a;border-radius:8px;width:100%;margin-top:.75rem;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:border-color .15s}.custom-input:focus{border-color:#646cff;outline:none;box-shadow:0 0 0 3px #646cff1a}.custom-input::placeholder{color:#666}textarea.custom-input{min-height:80px}.color-picker-row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.color-picker{cursor:pointer;background:0 0;border:none;border-radius:10px;width:50px;height:50px;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid #3a3a3a;border-radius:10px}.color-hex-input{color:#ddd;text-transform:uppercase;background:#1a1a1a;border:1px solid #3a3a3a;border-radius:8px;width:110px;padding:.625rem .875rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.95rem}.color-hex-input:focus{border-color:#646cff;outline:none}.color-preview{border:2px solid #3a3a3a;border-radius:10px;width:50px;height:50px;box-shadow:0 2px 8px #0000004d}.output-section{background:linear-gradient(145deg,#1a1a1a 0%,#1e1e1e 100%);border:1px solid #2a2a2a;border-radius:12px;margin-top:1.5rem;padding:1.25rem}.output-section h2{color:#aaa;align-items:center;gap:.5rem;margin:0 0 1rem;font-size:.95rem;font-weight:600;display:flex}.output-section h2:before{content:"";background:#22c55e;border-radius:2px;width:3px;height:1em;display:inline-block}.json-preview{text-align:left;color:#9cdcfe;background:#0a0a0a;border:1px solid #222;border-radius:8px;max-height:350px;padding:1rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:.75rem;line-height:1.5;overflow:auto}.json-preview::-webkit-scrollbar{width:6px;height:6px}.json-preview::-webkit-scrollbar-track{background:#1a1a1a;border-radius:3px}.json-preview::-webkit-scrollbar-thumb{background:#444;border-radius:3px}.json-preview::-webkit-scrollbar-thumb:hover{background:#555}.copy-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);border:none;border-radius:8px;width:100%;margin-top:1rem;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .15s;display:block}.copy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #22c55e4d}.copy-btn:active{transform:translateY(0)}@media (max-width:600px){.container{padding:1rem}h1{font-size:1.5rem}.preset-btn{padding:.4rem .75rem;font-size:.8rem}.color-picker-row{gap:.75rem}.color-picker,.color-preview{width:44px;height:44px}}