.converter-container{max-width:800px;margin:0 auto;padding:2rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#333;background-color:#f8f9fa;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08)}.converter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.converter-header h1{font-size:2rem;font-weight:700;margin:0;background:linear-gradient(90deg,#ff4d4d,#4dc3ff);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0)}.color-preview{width:80px;height:80px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.1)}.converter-section{margin-bottom:2rem;background-color:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.converter-section h2{margin-top:0;margin-bottom:1rem;font-size:1.4rem;font-weight:600;color:#333}.input-group{display:flex;flex-direction:column;gap:1.2rem}.slider-container{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.slider-container label{width:60px;font-weight:600;font-size:.95rem}.slider-container .slider{flex:1;height:8px;border-radius:4px;appearance:none;outline:none;cursor:pointer}.slider-container .slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.2)}.slider-container .number-input{width:60px;padding:.4rem;border-radius:4px;border:1px solid #ddd;text-align:center;font-size:.9rem}.slider-container .number-input:focus{outline:none;border-color:#4dc3ff;box-shadow:0 0 0 2px rgba(77,195,255,.2)}.red-slider{background:linear-gradient(90deg,#000,#f00)}.green-slider{background:linear-gradient(90deg,#000,#0f0)}.blue-slider{background:linear-gradient(90deg,#000,#00f)}.hex-input-container{display:flex;justify-content:center}.hex-input{padding:.75rem 1rem;border-radius:6px;border:1px solid #ddd;font-size:1.1rem;width:100%;max-width:200px;text-align:center;font-family:monospace;letter-spacing:1px}.hex-input:focus{outline:none;border-color:#4dc3ff;box-shadow:0 0 0 2px rgba(77,195,255,.2)}.result-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.result-card{background:#fff;padding:1rem;border-radius:8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.05)}.result-card h3{margin-top:0;margin-bottom:.5rem;font-size:1.1rem;color:#555}.result-card p{margin:0;font-size:1rem;font-family:monospace;background-color:#f5f5f5;padding:.5rem;border-radius:4px;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.converter-header{flex-direction:column;gap:1rem;text-align:center}.converter-header h1{font-size:1.6rem}.slider-container{flex-direction:column;align-items:flex-start}.slider-container label{width:100%}.result-section{grid-template-columns:1fr}}