@import"https://fonts.googleapis.com/css2?family=Honk&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.creature-generator{font-family:Montserrat,Helvetica Neue,Arial,sans-serif;color:#e0e0e0;line-height:1.6;display:flex;flex-direction:column;align-items:center;background-image:linear-gradient(160deg,#13111c,#221b2e);min-height:100vh;padding:0;margin:0;width:100%;position:relative;overflow-x:hidden;box-sizing:border-box}.header-container,.input-section,.frame{border-radius:12px;box-shadow:0 10px 30px #0000004d;transition:transform .3s,box-shadow .3s}.header-container{padding:clamp(20px,5vw,40px);width:95%;max-width:1200px;margin:20px auto;background:linear-gradient(-45deg,#ff9a9e,#f2a1e2,#a18cd1,#fbc2eb,#ffb347);background-size:400% 400%;animation:headerGradient 15s ease infinite;border:none}.header-container h1,.header-container h2{margin:0}h1{font-family:Honk,sans-serif;font-weight:800;font-size:clamp(2.9rem,5vw,2.5rem);margin-top:30px;margin-bottom:10px;text-align:center;letter-spacing:1px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4);background-clip:text;-webkit-background-clip:text}h2{font-size:clamp(.9rem,3vw,1.1rem);font-weight:700;color:#fff;margin:0 auto 30px;max-width:800px;text-align:center;line-height:1.5;opacity:.85;padding-top:15px}.container{width:95%;max-width:1200px;display:flex;flex-direction:column;align-items:center;padding:clamp(10px,2vw,15px);margin:0 auto;animation:fadeIn .5s ease-out forwards}.input-section{width:100%;padding:clamp(15px,4vw,25px);margin-bottom:30px;animation:fadeIn .5s ease-out .1s forwards;opacity:0;background-color:#1e192dcc;border:1px solid rgba(161,140,209,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.input-section:focus-within{box-shadow:0 15px 35px #a18cd166;transform:translateY(-2px);border:1px solid rgba(161,140,209,.6)}textarea{width:100%;min-height:clamp(80px,15vh,120px);padding:15px;border:1px solid rgba(161,140,209,.5);border-radius:8px;font-size:clamp(.9rem,2vw,1rem);resize:vertical;box-sizing:border-box;transition:border-color .3s,box-shadow .3s;font-family:inherit;background-color:#1e192d99;color:#e0e0e0}textarea:focus{outline:none;border-color:#a18cd1;box-shadow:0 0 0 3px #a18cd133}textarea::placeholder{color:#a18cd199}button{background:linear-gradient(45deg,#a18cd1,#fbc2eb);color:#fff;border:none;border-radius:8px;padding:clamp(12px,3vw,15px) clamp(20px,5vw,30px);font-family:Honk,sans-serif;font-weight:800;font-size:clamp(1.5rem,2vw,1.1rem);cursor:pointer;margin-top:20px;transition:all .3s ease;width:100%;letter-spacing:.5px;text-transform:uppercase;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.2)}button:hover{background:linear-gradient(45deg,#8a76b5,#faa7e0);transform:translateY(-2px);box-shadow:0 5px 15px #a18cd180}button:active{transform:translateY(0)}button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#ffffff80;opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}button:focus:not(:active):after{animation:ripple 1s ease-out}.image-container{width:100%;display:flex;justify-content:center;margin-top:20px;animation:fadeIn .5s ease-out .2s forwards;opacity:0}.frame{padding:clamp(10px,3vw,15px);text-align:center;width:100%;max-width:500px;background-color:#1e192dcc;border:1px solid rgba(161,140,209,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.frame:hover{transform:scale(1.02);box-shadow:0 15px 40px #a18cd180;border:1px solid rgba(161,140,209,.6)}.frame img{width:100%;height:auto;border-radius:8px;display:block;object-fit:cover}.empty-frame{height:clamp(250px,50vw,350px);display:flex;align-items:center;justify-content:center;background-color:#191423b3;border-radius:8px;border:1px dashed rgba(161,140,209,.5)}.empty-frame h3{color:#a18cd1cc;font-size:clamp(1rem,3vw,1.2rem);font-weight:400;padding:0 20px;text-align:center}.loading{margin:20px 0;text-align:center}.loading div{width:clamp(10px,3vw,16px);height:clamp(10px,3vw,16px);background:linear-gradient(45deg,#a18cd1,#fbc2eb);border-radius:50%;display:inline-block;margin:0 5px;animation:bounce 1.4s infinite ease-in-out both}.loading div:nth-child(1){animation-delay:-.32s}.loading div:nth-child(2){animation-delay:-.16s}.energy-pulse{position:absolute;border-radius:50%;opacity:0;animation:pulse 4s infinite;pointer-events:none;z-index:0}.energy-pulse:nth-child(1){top:15%;left:5%;width:clamp(100px,15vw,150px);height:clamp(100px,15vw,150px);background:radial-gradient(circle,#fbc2eb99,#fbc2eb00 70%)}.energy-pulse:nth-child(2){top:30%;right:5%;width:clamp(120px,20vw,200px);height:clamp(120px,20vw,200px);animation-delay:1s;background:radial-gradient(circle,#a18cd199,#a18cd100 70%)}.energy-pulse:nth-child(3){bottom:25%;left:2%;width:clamp(100px,18vw,180px);height:clamp(100px,18vw,180px);animation-delay:2s;background:radial-gradient(circle,#ffb34799,#ffb34700 70%)}.energy-pulse:nth-child(4){bottom:10%;right:2%;width:clamp(80px,12vw,120px);height:clamp(80px,12vw,120px);animation-delay:3s;background:radial-gradient(circle,#ff9a9e99,#ff9a9e00 70%)}.error-container{padding:20px;color:#ff6b6b;text-align:center;background-color:#ff6b6b1a;border-radius:8px;margin:20px 0;max-width:100%;border:1px solid rgba(255,107,107,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.error-container small{display:block;margin-top:10px;opacity:.7}.save-button{margin-top:15px;padding:clamp(8px,2vw,10px) clamp(15px,4vw,20px);font-size:clamp(.8rem,2vw,.9rem);background:linear-gradient(45deg,#a18cd1 30%,#fbc2eb);border:none;width:auto;display:inline-block;opacity:.9}.save-button:hover{background:linear-gradient(45deg,#8a76b5,#faa7e0);opacity:1}@media (min-width: 1400px){.container,.header-container{max-width:90%}}@media (max-width: 350px){.container,.header-container{width:98%;padding:5px}.input-section,textarea,button{padding:10px}}@media (prefers-color-scheme: dark){.creature-generator{background-image:linear-gradient(160deg,#0e0c16,#1a1526)}.input-section,.frame{background-color:#191423cc}textarea{background-color:#140f1ecc}.empty-frame{background-color:#140f1eb3}}@keyframes headerGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(30);opacity:0}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes pulse{0%{transform:scale(.8);opacity:0}50%{opacity:.2}to{transform:scale(1.2);opacity:0}}