.html-tool{display:flex;flex-direction:column;gap:20px;width:100%;max-width:900px;margin:0 auto}.html-tool .mode-selector{display:flex;justify-content:center;gap:30px;margin-bottom:10px}.html-tool .mode-selector label{display:flex;align-items:center;gap:8px;font-size:16px;cursor:pointer}.html-tool .side-by-side{display:flex;gap:20px}.html-tool .input-column,.html-tool .output-column{flex:1;min-width:0}.html-tool textarea{width:100%;height:300px;padding:15px;border:1px solid #e1e4e8;border-radius:6px;font-family:monospace;font-size:14px;resize:vertical}.html-tool .output-column textarea{background-color:#f6f8fa}.html-tool .button-group{display:flex;justify-content:center}.html-tool button{padding:10px 20px;background-color:#0366d6;color:white;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .2s}.html-tool button:hover{background-color:#0256b0}@media (max-width:768px){.html-tool .side-by-side{flex-direction:column}.html-tool textarea{height:200px}}