.hex-converter-container{max-width:800px;margin:0 auto;padding:2rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}@media(max-width:768px){.hex-converter-container{padding:1rem}}.converter-title{text-align:center;margin-bottom:2rem;color:#2a2a72;font-size:2rem}@media(max-width:768px){.converter-title{font-size:1.5rem;margin-bottom:1.5rem}}.converter-form{display:flex;flex-direction:column;gap:1.5rem;background-color:#f8f9fa;padding:2rem;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1)}@media(max-width:768px){.converter-form{padding:1rem;gap:1rem}}.input-group,.output-group{display:flex;flex-direction:column;gap:.5rem}.input-group label,.output-group label{font-weight:600;color:#333}.output-container{position:relative;display:flex;flex-direction:column}.text-input,.text-output{width:100%;min-height:100px;padding:.75rem;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:.9rem;resize:vertical}.text-input:focus,.text-output:focus{outline:none;border-color:#2a2a72;box-shadow:0 0 0 2px rgba(42,42,114,.2)}@media(max-width:480px){.text-input,.text-output{min-height:80px}}.text-output{background-color:#f0f0f0}.text-output.error{border-color:#dc3545;background-color:#fff8f8}.button-group{display:flex;gap:1rem}@media(max-width:480px){.button-group{flex-direction:column;gap:.5rem}}.clear-button,.convert-button,.copy-button{padding:.75rem 1.5rem;border:none;border-radius:4px;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s}.clear-button:active,.convert-button:active,.copy-button:active{transform:translateY(1px)}.clear-button:disabled,.convert-button:disabled,.copy-button:disabled{opacity:.6;cursor:not-allowed}@media(max-width:480px){.clear-button,.convert-button,.copy-button{padding:.6rem 1.2rem}}.convert-button{background-color:#2a2a72;color:#fff}.convert-button:hover:not(:disabled){background-color:#1f1f54}.clear-button{background-color:#e9ecef;color:#333}.clear-button:hover{background-color:#dce0e5}.copy-button{position:absolute;top:.5rem;right:.5rem;padding:.35rem .75rem;background-color:#6c757d;color:#fff;font-size:.8rem}.copy-button:hover{background-color:#5a6268}.error-message{color:#dc3545;font-size:.9rem;margin-top:.5rem}.instructions{margin-top:2rem}.instructions h2{font-size:1.25rem;margin-bottom:1rem;color:#333}.instructions ol{padding-left:1.5rem;margin-bottom:1rem}.instructions ol li{margin-bottom:.5rem}.instructions .note{font-size:.9rem;color:#6c757d;font-style:italic}