body{background-color:#f4f4f9;justify-content:center;align-items:center;height:100vh;margin:0;padding:0;font-family:Arial,sans-serif;display:flex}.code-container{aspect-ratio:16/7;background:#fff;border-radius:8px;width:80vw;max-width:800px;display:flex;overflow:hidden;box-shadow:0 4px 10px #0000001a}.code-box,.output-container{flex-direction:column;flex:1;display:flex}.code-box{color:#61dafb;background-color:#2d2d2d;padding:16px;font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;overflow:auto}.output-container{color:#333;background-color:#eaeaea;padding:16px;font-family:Courier New,Courier,monospace;font-size:14px}.button-container{text-align:center;cursor:pointer;color:#fff;background-color:#61dafb;border:none;margin-top:10px;padding:10px;font-weight:700}.button-container:hover{background-color:#3da7ce}.output-box{flex:1;margin-top:10px;overflow:auto}