@import"https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap";.rate-container{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Arial,sans-serif;width:30%;margin:auto;height:calc(100vh - 40px);max-height:100vh;padding:20px;background:#ff416c;background:-webkit-linear-gradient(to right,#ff4b2b,#ff416c);background:linear-gradient(to right,#ff4b2b,#ff416c)}.rate-title{font-size:3rem;font-family:Delicious Handrawn,serif;font-weight:700;margin-bottom:20px;text-align:center}.file-input-label{cursor:pointer;width:100%}.image-upload-container{width:100%;max-width:500px;height:auto;aspect-ratio:1;border:2px dashed #ccc;border-radius:10px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:20px}.upload-placeholder{display:flex;flex-direction:column;align-items:center;color:#666}.preview-image{width:100%;height:100%;object-fit:cover}.rate-form{width:100%;max-width:400px;margin-top:20px}.text-input{width:calc(100% - 20px);padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;font-size:1rem}.hidden{display:none}.submit-button{width:100%;padding:20px;background-color:#007bff;color:#fff;border:none;border-radius:50px;font-size:1rem;cursor:pointer}.submit-button:disabled{background-color:#ccc;cursor:not-allowed}.error-message{color:red;margin-top:10px}.feedback-container{position:fixed;bottom:-100vh;left:50%;width:90%;max-width:600px;height:80vh;transform:translate(-50%);background:#8a2387;background:-webkit-linear-gradient(to right,#f27121,#e94057,#8a2387);background:linear-gradient(to right,#f27121,#e94057,#8a2387);color:#fff;padding:15px 20px;border-radius:8px;font-size:16px;opacity:0;transition:bottom .5s ease-out,opacity .5s ease-out;text-align:center}.feedback-container.show{bottom:20px;opacity:1}.feedback-image{width:60%;max-width:400px;height:auto;margin:auto;object-fit:cover;border-radius:8px}.feedback-text{padding:15px}.feedback-text p{color:#dcdcdc}.color-box{display:inline-block;width:30px;height:30px;margin:5px;border-radius:50%}.segmented-image{background:repeating-conic-gradient(#ededed,#ededed 25%,#fff 0%,#fff 50%) 50% / 20px 20px;border:2px solid #00ff88;border-radius:8px}.image-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1rem 0}.preview-image{border:2px solid #ffffff;border-radius:8px}@media (max-width: 768px){.rate-container{width:calc(90% - 15px);padding:15px}.rate-title{font-size:4rem;margin-bottom:15px}.image-upload-container{height:80vh}.rate-form{max-width:100%}.submit-button{font-size:.9rem}.feedback-container{width:95%;max-width:500px;height:70vh}.feedback-image{width:70%}}@media (max-width: 480px){.rate-title{font-size:3rem;margin-bottom:10px}.image-upload-container{height:70vh}.preview-image{object-fit:contain}.submit-button{padding:15px;font-size:1rem}.feedback-container{height:calc(100vh - 40px);padding:20px;display:flex;flex-direction:column}.feedback-image{width:50%;height:50vh;margin:10px auto;object-fit:cover}.feedback-text{text-align:left}.feedback-text h2{font-size:1.5rem;line-height:1.2}.feedback-text p{font-size:1rem;line-height:1.2;margin:10px 0}}.back-button{background-color:#007bff;color:#fff;padding:10px 20px;border:none;border-radius:50px;font-size:1rem;cursor:pointer;margin-top:15px}.back-button:hover{background-color:#0056b3}*{margin:0;padding:0}body{max-height:100vh}