*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,sans-serif}body{min-height:100vh;background:linear-gradient(135deg,#0c0c0c,#2c3e50);color:#f0f0f0}.main-container{width:100%;margin:auto;max-width:900px;overflow:hidden;background-color:rgba(20,20,30,.85);border-radius:20px;box-shadow:0 15px 35px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}.header{background:rgba(10,10,20,.9);padding:25px 30px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1)}h1{font-size:2.5rem;margin-bottom:8px;background:linear-gradient(90deg,#f36,#3cf,#3f9);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:#aaa;font-size:1.1rem}.lab-content{display:flex;flex-wrap:wrap;padding:30px;gap:30px}.color-controls{flex:1;min-width:300px}.color-preview{flex:1;min-width:300px;display:flex;flex-direction:column}.slider-container{margin-bottom:25px;background:rgba(30,30,40,.7);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.slider-header{display:flex;justify-content:space-between;margin-bottom:12px}.slider-title{display:flex;align-items:center;font-size:1.2rem;font-weight:600}.slider-icon{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;color:#fff}.red .slider-icon{background-color:#f33}.green .slider-icon{background-color:#3c3}.blue .slider-icon{background-color:#36f}.slider-value{font-weight:700;font-size:1.3rem}.slider{width:100%;height:20px;-webkit-appearance:none;appearance:none;background:rgba(50,50,60,.8);outline:0;border-radius:10px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 5px rgba(0,0,0,.5)}.red .slider::-webkit-slider-thumb{background-color:#f33}.green .slider::-webkit-slider-thumb{background-color:#3c3}.blue .slider::-webkit-slider-thumb{background-color:#36f}.color-display{height:200px;border-radius:15px;margin-bottom:25px;border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 0 15px rgba(0,0,0,.3);transition:.3s}.color-info{background:rgba(30,30,40,.7);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.hex-section{display:flex;flex-direction:column;gap:15px}.hex-label{font-size:1.1rem;color:#aaa;margin-bottom:5px}.hex-value{display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.3);padding:15px;border-radius:8px;font-size:1.8rem;font-weight:700;letter-spacing:2px;font-family:monospace}.copy-btn{background:linear-gradient(45deg,#4a6fa5,#3a5a8a);color:#fff;border:none;padding:12px 25px;border-radius:8px;cursor:pointer;font-size:1.1rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;transition:.3s}.copy-btn:hover{background:linear-gradient(45deg,#5a7fb5,#4a6a9a);transform:translateY(-2px)}.copy-btn:active{transform:translateY(0)}.copy-btn.copied{background:linear-gradient(45deg,#3c3,#2aa52a)}.gradient-preview{height:100px;border-radius:10px;margin-top:20px;border:1px solid rgba(255,255,255,.1)}.gradient-label{font-size:1.1rem;color:#aaa;margin:20px 0 8px}footer{text-align:center;padding:20px;color:#888;font-size:.9rem;border-top:1px solid rgba(255,255,255,.05);background:rgba(10,10,20,.7)}.instructions{background:rgba(30,30,40,.7);padding:20px;border-radius:12px;margin-top:20px;border:1px solid rgba(255,255,255,.05)}.instructions h3{margin-bottom:10px;color:#4a9eff}.instructions ul{padding-left:20px;line-height:1.6}.instructions li{margin-bottom:8px}@media (max-width:768px){.lab-content{flex-direction:column}h1{font-size:2rem}.hex-value{font-size:1.5rem}}