*{font-family:Roboto Mono,monospace;margin:0;padding:0;box-sizing:border-box}body{background-color:#1b1b1f;color:#e0e0e0;font-size:16px;line-height:1.6;margin:0;padding:0}.container{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;height:100vh;padding:20px;gap:20px;flex-wrap:wrap}.preview-full{display:flex;flex-direction:column;flex:1;max-width:45%;gap:20px}.preview{border:1px solid #ffffff1e;flex:1;background-color:#161618;color:#fff;border-radius:12px;box-shadow:0 6px 20px #0000004d;text-align:center;padding:20px;transition:box-shadow .3s ease,transform .3s ease}.preview:hover{box-shadow:0 12px 30px #0006;transform:scale(1.02)}.preview h3{margin-bottom:1rem;font-size:1.6rem;font-weight:600}.preview canvas{width:100%;height:100%;border-radius:8px;box-shadow:0 4px 6px #0003}.monaco-editor{border:1px solid #ffffff1e;flex:1;height:80vh;width:100%;box-shadow:0 6px 20px #0000004d;font-size:14px;transition:box-shadow .3s ease}.monaco-editor:hover{box-shadow:0 12px 30px #0006}.error{background-color:#d0d0ec;color:#26262f;padding:12px 20px;border-radius:8px;font-size:14px;width:100%;max-height:200px;margin-top:10px;box-shadow:0 4px 6px #0000001a;overflow:hidden;text-overflow:ellipsis}.navigator{border:1px solid #ffffff1e;background-color:#161618;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;box-shadow:0 6px 12px #0003}.navigator-right{display:flex;gap:2rem}.navigator-right img,.default-modal-button{vertical-align:middle}footer{border:1px solid #ffffff1e;background-color:#161618;color:#e0e0e0;padding:20px;text-align:center;font-size:14px;position:relative;bottom:0;width:100%;margin-top:20px}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.footer-left{margin-right:20px}.footer-left p{margin:5px 0}.footer-right ul{list-style:none;padding:0}.footer-right ul li{display:inline;margin:0 10px}.footer-right a{color:#e0e0e0;text-decoration:none;transition:color .3s ease}.footer-right a:hover{color:#f1c40f}.social-media{margin-top:10px}.social-media a{margin:0 10px;color:#e0e0e0;text-decoration:none}.social-media a:hover{color:#f1c40f}@media (max-width: 1200px){.container{flex-direction:column;align-items:center}.preview-full,.preview{max-width:100%;margin-bottom:20px}.monaco-editor{width:100%}}@media (max-width: 768px){.container{padding:10px}.preview-full{max-width:100%;margin-bottom:20px}.monaco-editor{height:60vh}.guide-modal{width:250px}}.default-modal-button{font-size:24px;background:none;border:none;color:#fff;cursor:pointer;transition:transform .3s ease}.default-modal-button:hover{transform:scale(1.1)}.default-modal{z-index:999;position:fixed;top:10%;left:50%;transform:translate(-50%);background-color:#fff;color:#333;border:2px solid #333;padding:20px;border-radius:10px;box-shadow:0 10px 40px #0000004d;width:300px;max-width:80%;transition:all .3s ease}.default-modal h2{font-size:1.5rem;margin-bottom:10px}.default-modal ul{font-size:14px;line-height:1.6}.default-modal-close{margin-top:15px;padding:8px 15px;background-color:#333;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.close-default:hover{background-color:#555;color:#f1c40f}