.utf8-converter{max-width:900px;margin:0 auto;padding:2rem;font-family:system-ui,-apple-system,sans-serif}.utf8-converter h1{text-align:center;margin-bottom:2rem;color:#333}.utf8-converter .mode-selector{display:flex;justify-content:center;margin-bottom:2rem}.utf8-converter .mode-selector button{padding:.75rem 1.5rem;background:#f5f5f5;border:1px solid #ddd;cursor:pointer;font-size:1rem;transition:all .2s ease}.utf8-converter .mode-selector button:first-child{border-radius:4px 0 0 4px}.utf8-converter .mode-selector button:last-child{border-radius:0 4px 4px 0}.utf8-converter .mode-selector button.active{background:#0070f3;color:#fff;border-color:#0070f3}.utf8-converter .mode-selector button:hover:not(.active){background:#e9e9e9}.utf8-converter .converter-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}@media(max-width:768px){.utf8-converter .converter-container{grid-template-columns:1fr}}.utf8-converter .input-section,.utf8-converter .output-section{display:flex;flex-direction:column}.utf8-converter label{font-weight:600;margin-bottom:.5rem;color:#555}.utf8-converter textarea{width:100%;height:200px;padding:1rem;border:1px solid #ddd;border-radius:4px;font-family:monospace;resize:vertical;font-size:.9rem;line-height:1.5}.utf8-converter textarea:focus{outline:none;border-color:#0070f3;box-shadow:0 0 0 2px rgba(0,112,243,.2)}.utf8-converter .copy-button{margin-top:1rem;padding:.5rem 1rem;background:#0070f3;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;align-self:flex-end}.utf8-converter .copy-button:hover{background:#005dd1}.utf8-converter .copy-button:disabled{background:#ccc;cursor:not-allowed}.utf8-converter .error-message{color:#e53e3e;padding:1rem;margin-bottom:1.5rem;background:#fff5f5;border-left:4px solid #e53e3e;border-radius:0 4px 4px 0}.utf8-converter .info-section{padding:1.5rem;background:#f9f9f9;border-radius:4px}.utf8-converter .info-section h2{color:#333;margin-top:0;margin-bottom:1rem;font-size:1.25rem}.utf8-converter .info-section p{color:#666;line-height:1.6;margin:0}