.compiler-container{display:flex;flex-direction:column;height:100vh;padding:1rem;gap:1rem}@media(min-width:768px){.compiler-container{flex-direction:row}}.editor-panel{flex:1;display:flex;flex-direction:column;background:#1e1e1e;border-radius:8px;overflow:hidden}.editor-panel .toolbar{padding:.5rem;background:rgb(42.75,42.75,42.75);display:flex;gap:.5rem}.editor-panel .toolbar button{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;transition:background .3s ease}.editor-panel .toolbar button.compile-btn{background:#3498db;color:#fff}.editor-panel .toolbar button.compile-btn:hover{background:rgb(33.1380753138,125.1882845188,186.8619246862)}.editor-panel .toolbar button.copy-btn{background:#27ae60;color:#fff}.editor-panel .toolbar button.copy-btn:hover{background:rgb(29.661971831,132.338028169,73.014084507)}.output-panel{flex-basis:30%;background:rgb(50.4,50.4,50.4);color:#ecf0f1;border-radius:8px;padding:1rem;overflow-y:auto}.output-panel h3{margin-top:0;color:#3498db;border-bottom:1px solid #3498db;padding-bottom:.5rem}.output-panel .output-content{white-space:pre-wrap;font-family:Courier New,monospace;line-height:1.5}@media(max-width:767px){.compiler-container{flex-direction:column;height:auto}.output-panel{flex-basis:auto;height:200px}}