:root{--bg-color: #f4f4f9;--text-color: #333;--accent-color: #4a90e2;--border-color: #ccc;--font-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);height:100vh;display:flex;flex-direction:column;overflow:hidden}header{padding:1rem;background:#fff;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}main{flex:1;display:flex;gap:1px;background:var(--border-color);overflow:hidden}.editor-pane,.preview-pane{flex:1;display:flex;flex-direction:column;background:#fff;padding:1rem}label{font-weight:700;margin-bottom:.5rem;font-size:.9rem;color:#666}textarea{flex:1;width:100%;resize:none;border:1px solid var(--border-color);border-radius:4px;padding:1rem;font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5;outline:none;transition:border-color .2s}textarea:focus{border-color:var(--accent-color)}button{padding:.5rem 1rem;cursor:pointer;background:var(--accent-color);color:#fff;border:none;border-radius:4px;font-weight:600}button:hover{filter:brightness(1.1)}button#clearBtn{background:#e74c3c;margin-left:.5rem}