.color-picker-container{max-width:90vw;width:900px;margin:2rem auto;padding:2.5rem;background:var(--bg-primary);border-radius:var(--radius);box-shadow:var(--shadow-lg);text-align:center;position:relative;overflow:hidden;border:1px solid var(--border-color)}.color-picker-header{margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center;gap:.75rem}.color-picker-title{display:flex;align-items:center;gap:1vw;font-size:2rem;font-weight:700}.title-icon{color:var(--primary);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.letters-div{display:flex}.letter{opacity:0;transform:translateY(10px);display:inline-block;animation:fadeInUp .4s forwards;color:var(--primary);font-size:2rem;font-weight:700;letter-spacing:.05em;text-shadow:0 2px 4px rgba(0,0,0,.1)}.letter:nth-child(1){animation-delay:0s}.letter:nth-child(2){animation-delay:.05s}.letter:nth-child(3){animation-delay:.1s}.letter:nth-child(4){animation-delay:.15s}.letter:nth-child(5){animation-delay:.2s}.letter:nth-child(6){animation-delay:.25s}.letter:nth-child(7){animation-delay:.3s}.letter:nth-child(8){animation-delay:.35s}.letter:nth-child(9){animation-delay:.4s}.letter:nth-child(10){animation-delay:.45s}.letter:nth-child(11){animation-delay:.5s}.letter:nth-child(12){animation-delay:.55s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.welcome-message{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem;background-color:#6366f11a;border-radius:var(--radius);margin-bottom:1.5rem;border:1px dashed var(--primary);animation:fadeIn .5s ease-in-out}.welcome-message p{margin:0;color:var(--primary);font-size:1rem}.welcome-message svg{color:var(--primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.file-upload-section{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem}.file-input{display:none}.file-input-label{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background-color:var(--primary);color:var(--bg-primary);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;font-weight:600;box-shadow:var(--shadow-md)}.file-input-label:hover{background-color:var(--primary-hover);transform:translateY(-2px)}.clear-button{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.25rem;padding:.5rem;height:40px;width:40px;border-radius:50%;transition:all .2s ease}.clear-button:hover{color:var(--color-error);background-color:#ef44441a}.zoom-controls{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1rem;background-color:#6366f10d;padding:.5rem;border-radius:var(--radius);width:fit-content;margin-left:auto;margin-right:auto}.zoom-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--primary);color:var(--bg-primary);border:none;border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.zoom-button:hover{background-color:var(--primary-hover);transform:scale(1.1)}.zoom-level{font-size:.9rem;color:var(--primary);min-width:50px;font-weight:600}.image-scroll-container{position:relative;height:450px;width:100%;max-width:800px;overflow:auto;border:2px solid rgba(99,102,241,.2);border-radius:var(--radius);margin:0 auto 1.5rem;background-color:var(--bg-secondary);background-image:linear-gradient(45deg,rgba(99,102,241,.05) 25%,transparent 25%),linear-gradient(-45deg,rgba(99,102,241,.05) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(99,102,241,.05) 75%),linear-gradient(-45deg,transparent 75%,rgba(99,102,241,.05) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;scrollbar-width:thin;scrollbar-color:var(--text-secondary) var(--bg-secondary);box-shadow:inset 0 0 10px #6366f11a}.image-scroll-container::-webkit-scrollbar{width:10px;height:10px}.image-scroll-container::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:calc(var(--radius) / 2)}.image-scroll-container::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:calc(var(--radius) / 2);border:2px solid var(--bg-secondary)}.image-content{position:relative;transform-origin:0 0;min-height:100%;min-width:100%;display:inline-block;image-rendering:pixelated}.uploaded-image{display:block;cursor:crosshair;max-height:none;max-width:none;box-shadow:var(--shadow-md)}.hidden-canvas{display:none}.error-message{background-color:#ef44441a;color:var(--color-error);padding:.75rem;border-radius:var(--radius);margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid rgba(239,68,68,.2)}.result{display:flex;align-items:center;justify-content:center;gap:2rem;margin-top:1.5rem;padding:1.5rem;background-color:#6366f10d;border-radius:var(--radius);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.color-preview{width:100px;height:100px;border-radius:var(--radius);border:4px solid var(--bg-primary);box-shadow:var(--shadow-md);transition:transform .3s ease}.color-preview:hover{transform:scale(1.05)}.color-info{display:flex;flex-direction:column;gap:1rem}.color-details{text-align:left}.color-details p{margin:.4rem 0;color:var(--text-secondary);font-size:1rem}.color-details strong{color:var(--primary);font-weight:600}.color-actions{display:flex;gap:.75rem;justify-content:flex-start;flex-wrap:wrap}.action-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--primary);color:var(--bg-primary);border:none;border-radius:var(--radius);cursor:pointer;transition:all .2s ease;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm)}.action-button:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.download-button{background-color:var(--color-success)}.download-button:hover{background-color:#0ea576}.copied-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background-color:var(--color-success);color:var(--bg-primary);padding:.6rem 1.2rem;border-radius:var(--radius);display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-lg);z-index:1000;animation:fadeInOut 2.5s ease-in-out;font-weight:600}@keyframes fadeInOut{0%,to{opacity:0;transform:translate(-50%) translateY(20px)}10%,90%{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:768px){.color-picker-container{margin:1rem auto;padding:1.5rem;width:auto}.color-picker-title,.letter{font-size:1.25rem}.result{flex-direction:column;gap:1.5rem;padding:1rem}.color-preview{width:80px;height:80px}.color-actions{justify-content:center;width:100%}.image-scroll-container{-webkit-overflow-scrolling:touch;height:350px}.zoom-controls{width:100%}.color-picker-title,.letter{font-size:1.5rem}}@media(max-width:480px){.color-picker-container{padding:1rem}.image-scroll-container{height:300px}.action-button{padding:.4rem .8rem;font-size:.8rem}.file-input-label{padding:.5rem 1rem;font-size:.9rem}.welcome-message{padding:1rem}.welcome-message p{font-size:.9rem}}