*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#111;background:#ffb90b;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{min-height:100vh}.page{flex-direction:column-reverse;justify-content:center;gap:50px;margin:0 auto;padding:80px 12px;display:flex}@media (width>=1024px){.page{flex-direction:row;max-width:1200px}}.trait-panel{background:#f1f1f1;border:5px solid #19334a;border-radius:10px;width:100%;max-width:636px;padding:24px 20px}@media (width>=1024px){.trait-panel{padding:40px 24px}}.trait-panel h2{margin-bottom:32px;font-size:30px;font-weight:700}.trait-section{margin-bottom:24px}.trait-section h3{color:#000;letter-spacing:.05em;margin-bottom:12px;font-size:14px;font-weight:700}.trait-grid{flex-wrap:wrap;gap:12px;display:flex}.trait-item{cursor:pointer;border:2px solid #0000001a;border-radius:8px;flex-shrink:0;transition:opacity .15s,border-color .15s;position:relative;overflow:hidden}.trait-item:hover{opacity:.6;border-color:#60a5fa}.trait-item.selected{opacity:1;border-color:#3b82f6!important}.trait-item img{border-radius:6px;width:75px;height:75px;display:block}.trait-item .layer-base{z-index:1;position:relative}.trait-item .layer-trait{z-index:2;position:absolute;top:0;left:0}.preview-panel{width:100%}@media (width>=768px){.preview-panel{width:auto}}.preview-sticky{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex;position:sticky;top:40px}.canvas-wrapper{aspect-ratio:1;width:100%}@media (width>=768px){.canvas-wrapper{width:450px;height:450px;aspect-ratio:unset}}#preview-canvas{background:#ffb90b;border:5px solid #19334a;border-radius:20px;width:100%;height:100%;display:block}.btn-group{flex-direction:column;gap:16px;width:100%;max-width:450px;margin-top:16px;display:flex}.btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding:14px 20px;font-family:inherit;font-size:15px;font-weight:700;transition:opacity .15s,transform .1s;display:flex}.btn:hover{opacity:.85}.btn:active{transform:scale(.97)}.btn-primary{color:#fff;background:#19334a}.btn-secondary{color:#19334a;background:#ffb90b;border:2px solid #19334a}.toast{color:#fff;z-index:9999;white-space:nowrap;background:#19334a;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:transform .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{transform:translate(-50%)translateY(0)}
/*# sourceMappingURL=build_dffe71a4.f9106839.css.map */