html,body{margin:0;padding:0;width:100%;height:100vh;background-size:150px;font-family:Georgia,Calibri;background-image:url(default.jpg);background-color:#f0f0f0;overflow:hidden}.app{width:100%;height:100%}.drop-zone{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1500;transition:all .3s ease}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;justify-content:center;align-items:center}.container{width:400px;background-color:#fffffff2;padding:20px;border-radius:15px;position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:1000;transition:all .3s ease;box-shadow:0 4px 15px #0000001a}.container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:15px;animation:float 6s ease-in-out infinite;pointer-events:none}.container-hover{transform:translate(-50%) scale(1.02);box-shadow:0 6px 20px #00000026}.content{text-align:center}.header-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}h1{font-size:1.1em;margin:0;color:#333;font-family:Comic Sans MS,Comic Sans,cursive;text-shadow:2px 2px 4px rgba(0,0,0,.1);white-space:nowrap;flex:1}.file-input-wrapper{margin:0}.file-input{display:none}.file-input-label{display:inline-block;padding:6px 12px;background:#007bff;color:#fff;border-radius:15px;cursor:pointer;transition:all .3s ease;font-size:.8em;white-space:nowrap;animation:pulse 2s infinite}.file-input-label:hover{background:#0056b3;transform:translateY(-2px)}.slider-container{margin:15px 0;padding:0 10px}.slider{-webkit-appearance:none;width:100%;height:8px;background:#ddd;border-radius:5px;outline:none;cursor:pointer;margin:8px 0;transition:all .2s ease;position:relative;overflow:visible}.slider:before{content:"";position:absolute;top:0;left:0;height:100%;width:var(--background-size, 0%);background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8b00ff,#ff0000);background-size:200% 100%;animation:rainbow-track 3s linear infinite;border-radius:5px;z-index:1}.slider::-webkit-slider-runnable-track{background:transparent}.slider::-moz-range-track{background:transparent}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#007bff;border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003;position:relative;z-index:2}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px #007bff66}.slider::-moz-range-thumb{width:20px;height:20px;background:#007bff;border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003;position:relative;z-index:2}.slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px #007bff66}.size-value{display:inline-block;margin-top:8px;font-size:1em;color:#333}.bounce-enter-active{animation:bounce-in .8s}.bounce-leave-active{animation:bounce-in .8s reverse}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.animated-title{animation:rainbow 5s linear infinite,float-title 3s ease-in-out infinite;background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;display:inline-block}@keyframes rainbow{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes float-title{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes rainbow-track{0%{background-position:0% 50%}to{background-position:200% 50%}}