.compiler-wrapper{display:flex;flex-direction:column;height:100vh}.navbar{display:flex;justify-content:space-between;align-items:center;background-color:#212529;padding:.75rem 1rem;color:white}.nav-left{display:flex;gap:1rem}.nav-button{background-color:#343a40;color:white;border:none;padding:.5rem 1rem;cursor:pointer;font-weight:700;border-radius:4px}.nav-button:hover{background-color:#495057}.run-button{background-color:#28a745;color:white;border:none;padding:.5rem 1.5rem;font-weight:700;border-radius:4px;cursor:pointer}.run-button:hover{background-color:#218838}.compiler-container{display:flex;flex:1;overflow:hidden}.editor-pane{flex:1;padding:1rem;background-color:#f8f9fa;box-sizing:border-box;height:100%}.code-textarea{width:100%;height:100%;resize:none;font-family:monospace;font-size:14px;padding:10px;border:1px solid #ccc;border-radius:4px}.preview-pane{flex:1;height:100%;background-color:#fff;overflow:hidden;border-left:1px solid #ccc}.preview-iframe{width:100%;height:100%;border:none}.info-section{padding:1rem 2rem;max-height:30vh;background-color:#fefefe;border-top:1px solid #ccc;font-family:Arial,sans-serif;color:#333}.info-section h2{margin-top:0;color:#007bff}.info-section h3{margin-top:1rem;color:#333}.info-section p,.info-section pre,.info-section ul{margin-bottom:1rem;line-height:1.5}.info-section pre{background:#f4f4f4;padding:10px;border-radius:4px;overflow-x:auto}.info-section code{background:white;color:black;padding:2px 4px;border-radius:3px;font-family:monospace;font-size:90%}