:root{--bg-color: #1e1e1e;--text-color: #ffffff;--header-bg-color: #2c2c2c;--button-bg-color: #007acc;--button-hover-bg-color: #005f99;--border-color: #444;--padding: 10px;--border-radius: 5px}body{font-family:Courier New,Courier,monospace;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.header{padding:var(--padding);background-color:var(--header-bg-color);text-align:center}.header button{background-color:var(--button-bg-color);color:var(--text-color);border:none;padding:var(--padding) 15px;margin:0 5px;border-radius:var(--border-radius);cursor:pointer;transition:background-color .3s}.header button:hover,.header button:focus{background-color:var(--button-hover-bg-color)}.container{display:flex;flex:1;height:calc(100% - 50px)}.editor,.output{width:50%;padding:var(--padding);box-sizing:border-box;background-color:var(--header-bg-color)}.editor{border-right:1px solid var(--border-color);overflow-y:auto}.output textarea{width:90%;height:67.3vh;resize:none;background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius)}.code-area{background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);padding:var(--padding);border-radius:var(--border-radius);white-space:pre-wrap;overflow-wrap:break-word;min-height:200px}@media (max-width: 600px){.container{display:block;flex-direction:column;overflow-y:auto}.editor,.output{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.output{margin-bottom:3%}#output{width:95%}body{overflow-y:auto}}