*,*::before,*::after{box-sizing:border-box}.color-picker-container{font-family:'Inter',sans-serif;background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:12px;padding:25px;margin:30px auto;max-width:700px;box-shadow:0 8px 16px rgb(0 0 0 / .1);text-align:center;transition:all 0.3s ease-in-out}.color-picker-container h3{color:#333;margin-bottom:15px;font-size:1.8em;font-weight:700}.color-picker-container p{color:#555;margin-bottom:25px;font-size:1.1em;line-height:1.6}.color-spectrum-canvas{width:100%;height:300px;border:1px solid #ccc;border-radius:8px;cursor:crosshair;box-shadow:0 4px 8px rgb(0 0 0 / .1);margin-bottom:25px;background-color:#fff}.color-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px;text-align:left}.info-group{background-color:#e9ecef;padding:15px 20px;border-radius:8px;box-shadow:inset 0 1px 3px rgb(0 0 0 / .1)}.info-label{font-weight:700;color:#333;margin-bottom:10px;display:flex;align-items:center;gap:5px}.info-icon{font-size:.9em;color:#666;cursor:help}.color-display-row{display:flex;align-items:center;gap:10px}.pixel-color-swatch{width:40px;height:40px;border:1px solid #ccc;border-radius:6px;background-color:#000;transition:background-color 0.2s ease-in-out}.color-input,.coord-input{flex-grow:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:'Inter',sans-serif;font-size:1em;background-color:#fff;color:#333;text-align:center;min-width:0;flex-shrink:1}.coordinate-display-row{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.coord-item{display:flex;flex-direction:column;align-items:center;flex:1 1 calc(50% - 7.5px)}.coord-item span{font-size:.9em;color:#555;margin-bottom:5px}.selected-color-info{font-size:1.1em;color:#444;margin-top:20px;padding:10px 15px;background-color:#e9ecef;border-radius:8px;display:inline-block;box-shadow:inset 0 1px 3px rgb(0 0 0 / .1)}#current-selected-color{font-weight:700;color:#007bff;transition:color 0.3s ease-in-out}@media (max-width:768px){.color-picker-container{padding:20px;margin:20px auto;max-width:90%}.color-picker-container h3{font-size:1.5em}.color-picker-container p,.selected-color-info{font-size:1em}.color-spectrum-canvas{height:250px}.color-info-grid{grid-template-columns:1fr;gap:15px}.coordinate-display-row{flex-direction:row;gap:8px;justify-content:space-around}.coord-item{flex:1 1 calc(50% - 4px)}}@media (max-width:480px){.color-picker-container{padding:15px;margin:15px auto}.color-picker-container h3{font-size:1.3em}.color-spectrum-canvas{height:200px}.coordinate-display-row{flex-direction:column;gap:10px}.coord-item{width:100%;flex:none;max-width:100%;padding:0}.color-input,.coord-input{width:100%;padding:6px 8px;font-size:.95em}.info-group{padding:10px 15px}}