.converter-container{max-width:1000px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.converter-container h1{text-align:center;color:#4a6baf;margin-bottom:30px}.converter-container h2{font-size:1.2rem;margin-bottom:15px;color:#333}.converter-layout{display:flex;flex-direction:column;gap:30px}@media(min-width:768px){.converter-layout{flex-direction:row}}.input-section,.output-section{flex:1;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.cmyk-outputs,.hex-input,.rgb-inputs{margin-bottom:25px}.input-group,.output-group{display:flex;align-items:center;margin-bottom:12px}.input-group label,.output-group label{width:30px;font-weight:700}.input-group input[type=number],.output-group input[type=number]{width:60px;padding:6px;margin-right:10px;border:1px solid #ddd;border-radius:4px}.input-group input[type=range],.output-group input[type=range]{flex-grow:1}.input-group input[type=text],.output-group input[type=text]{flex-grow:1;padding:8px;border:1px solid #ddd;border-radius:4px;margin-right:10px;font-family:monospace}.input-group input[type=color],.output-group input[type=color]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.output-value{width:60px;font-weight:700}.bar-container{flex-grow:1;height:20px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.bar{height:100%;transition:width .3s ease}.bar.cyan{background-color:aqua}.bar.magenta{background-color:#f0f}.bar.yellow{background-color:#ff0}.bar.black{background-color:#000}.color-preview{display:flex;justify-content:center;margin-bottom:25px}.color-preview .color-box{width:100%;height:100px;border-radius:8px;box-shadow:inset 0 0 5px rgba(0,0,0,.2);transition:background-color .3s ease}.info-section{margin-top:30px;padding:20px;background-color:#f5f5f5;border-radius:8px}.info-section h3{color:#4a6baf;margin-bottom:10px}.info-section p{line-height:1.6;color:#555}@media(max-width:767px){.input-group,.output-group{flex-wrap:wrap}.input-group input[type=range],.output-group input[type=range]{width:100%;margin-top:8px}}@media(prefers-color-scheme:dark){.converter-container{color:#f0f0f0;background-color:#222}.converter-container h1,.converter-container h2,.converter-container h3{color:#b0c4de}.input-section,.output-section{background-color:#333;box-shadow:0 4px 6px rgba(0,0,0,.1)}.input-group .output-value,.input-group label,.output-group .output-value,.output-group label{color:#f0f0f0}.input-group input[type=number],.input-group input[type=text],.output-group input[type=number],.output-group input[type=text]{background-color:#444;color:#f0f0f0;border-color:#555}.bar-container{background-color:#444}.info-section{background-color:#333}.info-section p{color:#ddd}}