*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background-color:#f5f7fa;padding:20px}.container{max-width:1000px;margin:0 auto;padding:20px}.converter-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:30px;margin-bottom:30px}.converter-card h1{color:#4a6fa5;margin-bottom:10px;font-size:1.8rem;text-align:center}.converter-card .description{text-align:center;margin-bottom:25px;color:#666}.input-section,.output-section{margin-bottom:25px}.input-section label,.output-section label{display:block;margin-bottom:8px;font-weight:600;color:#304c70}.input-section textarea,.output-section textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;resize:vertical;font-family:monospace;font-size:14px;transition:border-color .3s}.input-section textarea:focus,.output-section textarea:focus{outline:none;border-color:#4a6fa5;box-shadow:0 0 0 2px rgba(74,111,165,.2)}.input-section textarea::placeholder,.output-section textarea::placeholder{color:#aaa}.output-section .output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.output-section .copy-button{background-color:#4a6fa5;color:#fff;border:none;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .3s}.output-section .copy-button:hover{background-color:rgb(58.2092050209,87.3138075314,129.7907949791)}.output-section .copy-button:disabled{background-color:#ccc;cursor:not-allowed}.output-section .copy-button.copied{background-color:#5cb85c}.output-section .error-message{color:#d9534f;margin-top:10px;font-size:14px}.how-it-works{background-color:rgb(251.8,252.44,253.4);border-radius:8px;padding:20px;border-left:4px solid #6a8caf}.how-it-works h2{color:#4a6fa5;margin-bottom:15px;font-size:1.3rem}.how-it-works ol{padding-left:20px}.how-it-works ol li{margin-bottom:8px}.how-it-works ol li:last-child{margin-bottom:0}@media(max-width:768px){.container{padding:10px}.converter-card{padding:20px}.converter-card h1{font-size:1.5rem}.output-header{flex-direction:column;align-items:flex-start}.output-header .copy-button{margin-top:8px}}@media(max-width:480px){body{padding:10px}.converter-card{padding:15px}.converter-card h1{font-size:1.3rem}.converter-card .description{font-size:.9rem}.how-it-works{padding:15px}.how-it-works h2{font-size:1.1rem}.how-it-works ol{font-size:.9rem}textarea{font-size:12px!important}}