: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:Inter,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}}body{min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}.container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}header h1{text-align:center;color:#fff;margin-bottom:2rem}.editor-layout{align-items:flex-start;gap:2rem;display:flex}.sidebar{background:#333;border-radius:12px;flex-direction:column;flex:0 0 280px;gap:1.5rem;max-height:90vh;padding:1.5rem;display:flex;overflow-y:auto}.control-group h3{text-transform:uppercase;color:#aaa;letter-spacing:.5px;margin:0 0 .5rem;font-size:.85rem}.grid{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.icon-btn{cursor:pointer;aspect-ratio:1;background:#444;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.icon-btn img{object-fit:contain;width:100%;height:100%}.icon-btn:hover{background:#555}.icon-btn.active{background:#555;border-color:#646cff}.text-btn{color:#fff;cursor:pointer;background:#444;border:1px solid #555;border-radius:6px;width:100%;margin-bottom:.5rem;padding:.5rem 1rem}.text-btn.active{background:#646cff;border-color:#646cff}.upload-btn{color:#fff;cursor:pointer;background:#646cff;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;font-weight:600;transition:background .2s;display:flex}.upload-btn:hover{background:#535bf2}.export-btn{color:#fff;cursor:pointer;background:#10b981;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;margin-top:auto;padding:1rem;font-weight:600;display:flex}.export-btn:hover{background:#059669}.slider-group{margin-bottom:.75rem}.slider-group label{color:#ccc;margin-bottom:.25rem;font-size:.8rem;display:block}.slider-group input[type=range]{-webkit-appearance:none;background:#555;border-radius:3px;outline:none;width:100%;height:6px}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#646cff;border-radius:50%;width:14px;height:14px}.slider-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#646cff;border:none;border-radius:50%;width:14px;height:14px}.star-slider input[type=range]{-webkit-appearance:none;background:#555;border-radius:3px;outline:none;width:100%;height:6px}.star-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#646cff;border-radius:50%;width:16px;height:16px}.preview-area{flex-direction:column;flex:1;gap:1rem;display:flex}.image-controls{background:#333;border-radius:12px;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem 1.5rem;display:flex}.image-controls h3{text-transform:uppercase;color:#aaa;letter-spacing:.5px;width:100%;margin:0;font-size:.85rem}.image-controls .slider-group{flex:1;min-width:150px;margin-bottom:0}.image-controls .text-btn{width:auto;margin:auto 0 0 auto}.card-preview-wrapper{background:#1a1a1a;border-radius:12px;justify-content:center;align-items:center;padding:2rem;display:flex}.card-container{aspect-ratio:1024/768;background:#000;border-radius:24px;width:100%;max-width:800px;position:relative;overflow:hidden;box-shadow:0 20px 25px -5px #00000080}.character-layer{z-index:2;transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.char-image{object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;max-width:100%;max-height:100%}.bg-placeholder{color:#666;z-index:1;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5rem;display:flex;position:absolute;top:0;left:0}.frame-overlay{z-index:3;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.band-overlay{z-index:20;pointer-events:none;width:12%;position:absolute;top:1%;left:.5%}.attr-overlay{z-index:20;pointer-events:none;width:12%;position:absolute;top:2%;right:1%}.stars-overlay{justify-content:left;align-items:left;z-index:20;pointer-events:none;flex-direction:column-reverse;gap:0;display:flex;position:absolute;bottom:0%;left:0;right:0}.star-icon{aspect-ratio:1;filter:drop-shadow(0 2px 4px #00000080);width:8.5%;height:auto;margin-top:-1%}@media (width<=900px){.editor-layout{flex-direction:column}.sidebar{flex:1;width:100%;max-height:none}.preview-area{width:100%}.image-controls{flex-direction:column}.image-controls .slider-group{width:100%}.card-preview-wrapper{padding:1rem;overflow:hidden}.card-container{aspect-ratio:1024/768;border-radius:12px;width:100%;max-width:100%}}