*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Arial',sans-serif;background-color:#f5f5f5;color:#333}.container{max-width:1200px;margin:0 auto;padding:30px 20px 20px}h1{text-align:center;margin-bottom:30px;color:#4a4a4a;font-size:36px}.main-content{display:flex;gap:20px;margin-bottom:40px}.color-picker{flex:1;background-color:white;padding:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.picker-title{font-size:18px;margin-bottom:15px;font-weight:bold}.picker-area{display:flex;flex-direction:column;gap:15px}.hue-slider{position:relative;height:30px;border-radius:15px;background:linear-gradient(to right,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);cursor:pointer}.hue-handle{position:absolute;top:-10px;width:40px;height:50px;border:2px solid white;border-radius:5px;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer}.sl-sv-container{display:flex;gap:20px;align-items:flex-start}.sv-picker{position:relative;width:380px;height:380px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,#f00);border-radius:5px;cursor:crosshair;box-shadow:inset 0 0 5px rgba(0,0,0,0.2)}.sv-handle{position:absolute;width:20px;height:20px;border:3px solid white;border-radius:50%;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer}.sliders{display:flex;flex-direction:column;gap:15px;width:300px;height:380px;justify-content:space-between}.slider-container{display:flex;flex-direction:column;gap:8px;width:100%}.slider-label{font-size:14px;font-weight:bold;text-align:center}.slider{-webkit-appearance:none;width:100%;height:60px;border-radius:15px;outline:0;cursor:pointer;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:40px;height:80px;border-radius:5px;background:white;border:2px solid #666;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.2);transition:all .2s ease}.slider::-webkit-slider-thumb:hover{transform:scale(1.05);box-shadow:0 3px 8px rgba(0,0,0,0.3)}.slider::-moz-range-thumb{width:40px;height:80px;border-radius:5px;background:white;border:2px solid #666;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.2)}#saturationSlider{background:linear-gradient(to right,hsl(0,0%,50%),hsl(0,100%,50%))}#lightnessSlider{background:linear-gradient(to right,hsl(0,100%,0%),hsl(0,100%,50%),hsl(0,100%,100%))}#alphaSlider{background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1))}.color-preview{flex:1;background-color:white;padding:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.preview-title{font-size:18px;margin-bottom:15px;font-weight:bold}.preview-area{width:100%;height:200px;border-radius:5px;margin-bottom:20px;box-shadow:inset 0 0 10px rgba(0,0,0,0.1)}.color-params{display:flex;flex-direction:column;gap:15px}.param-group{display:flex;flex-direction:column;gap:5px}.param-label{font-size:14px;font-weight:bold}.param-value{display:flex;gap:10px;align-items:center}.param-input{flex:1;padding:8px;border:1px solid #ddd;border-radius:5px;font-size:14px}.copy-btn{padding:8px 15px;background-color:#4caf50;color:white;border:0;border-radius:5px;cursor:pointer;font-size:14px}.copy-btn:hover{background-color:#45a049}.common-colors{background-color:white;padding:20px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.1);margin-top:20px}.common-title{font-size:18px;margin-bottom:15px;font-weight:bold}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px}.color-swatch{width:50px;height:50px;border-radius:5px;cursor:pointer;box-shadow:0 0 5px rgba(0,0,0,0.2);transition:transform .2s}.color-swatch:hover{transform:scale(1.1)}@media(max-width:768px){.main-content{flex-direction:column}.sl-sv-container{flex-direction:column}.sv-picker{width:100%}.sliders{width:100%;flex-direction:row}}