.main-header{height:52px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 12px;flex-shrink:0}.main-header .logo{height:28px}.editor-resources__container{height:100%;border-right:1px solid var(--border-color);width:240px}.code-editor__container{flex-grow:1;background-color:#212529;display:flex}.code-editor__container .line-counter{flex:0 0 40px;text-align:center;font-family:Source Code Pro,monospace}.code-editor__container .line-counter div{line-height:18px;height:18px;font-size:12px;color:#515559}.code-editor__container .line-counter div.selected{color:#bbb}.code-editor__container .editor{height:100%;outline:none;font-family:Source Code Pro,monospace;flex-grow:1}.code-editor__container .editor div{font-size:13px;white-space:pre;line-height:18px;height:18px}.code-editor__container .editor div.selected{background-color:#c8c8ff06}.editor-viewer__container{flex:1 1 500px;border-left:1px solid var(--border-color);overflow:hidden}.editor-viewer__container canvas{display:block}.v-icon-button{padding:0;display:flex;justify-content:center;align-items:center;color:#fff;background:none;border:none;width:30px;height:30px;border-radius:9999px}.v-icon-button svg{width:20px}.v-icon-button:hover{background-color:#ffffff0d}.editor-code-header{flex:0 0 50px;display:flex;align-items:center;padding-left:8px}.editor-code-header .file-tab{height:32px;background:#24292E;color:#fff;border-radius:6px;padding:0 12px;min-width:150px;text-align:left;display:flex;align-items:center}.editor-code-header .file-icon{color:#ffc700;font-weight:700;font-size:9px;margin-right:8px}:root{--border-color: #24292E}html,body{font-size:12px;font-family:Inter,sans-serif}body{margin:0;padding:0}button,input,textarea{outline:none;font-size:inherit;font-family:inherit}button{cursor:pointer;border:none}.mb-1{margin-bottom:8px}.mt-1{margin-top:8px}.mr-1{margin-right:8px}.ml-1{margin-left:8px}.my-1{margin-top:8px;margin-bottom:8px}.mx-1{margin-left:8px;margin-right:8px}.mb-2{margin-bottom:16px}.mt-2{margin-top:16px}.mr-2{margin-right:16px}.ml-2{margin-left:16px}.my-2{margin-top:16px;margin-bottom:16px}.mx-2{margin-left:16px;margin-right:16px}.mb-3{margin-bottom:24px}.mt-3{margin-top:24px}.mr-3{margin-right:24px}.ml-3{margin-left:24px}.my-3{margin-top:24px;margin-bottom:24px}.mx-3{margin-left:24px;margin-right:24px}.mb-4{margin-bottom:32px}.mt-4{margin-top:32px}.mr-4{margin-right:32px}.ml-4{margin-left:32px}.my-4{margin-top:32px;margin-bottom:32px}.mx-4{margin-left:32px;margin-right:32px}.mb-5{margin-bottom:40px}.mt-5{margin-top:40px}.mr-5{margin-right:40px}.ml-5{margin-left:40px}.my-5{margin-top:40px;margin-bottom:40px}.mx-5{margin-left:40px;margin-right:40px}.mb-6{margin-bottom:48px}.mt-6{margin-top:48px}.mr-6{margin-right:48px}.ml-6{margin-left:48px}.my-6{margin-top:48px;margin-bottom:48px}.mx-6{margin-left:48px;margin-right:48px}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}body{background-color:#1e1e1e;color:#fff}.page{height:100vh;display:flex;flex-direction:column}.page-content{flex-grow:1}.flex{display:flex}.flex-column{display:flex;flex-direction:column}