*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5;height:100vh;overflow:hidden}body[data-theme=vs-dark],body[data-theme=hc-black]{color:#eee;background-color:#1e1e1e}.container{display:flex;flex-direction:column;height:100vh;width:100%;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background-color:#fff;border-bottom:1px solid #ddd;height:60px}body[data-theme=vs-dark] header,body[data-theme=hc-black] header{background-color:#252526;border-bottom-color:#333}.logo{font-size:1.5rem;font-weight:700;color:#4caf50}.controls{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #ddd;background-color:#fff;color:#333;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}body[data-theme=vs-dark] .btn,body[data-theme=hc-black] .btn{background-color:#333;color:#eee;border-color:#555}.btn:hover{background-color:#f5f5f5}body[data-theme=vs-dark] .btn:hover,body[data-theme=hc-black] .btn:hover{background-color:#444}.btn.primary{background-color:#4caf50;color:#fff;border-color:#4caf50}.btn.primary:hover{background-color:#45a049}main{flex:1;display:flex;overflow:hidden}.tabs{display:flex;background-color:#f5f5f5;border-bottom:1px solid #ddd;padding:0 .5rem}body[data-theme=vs-dark] .tabs,body[data-theme=hc-black] .tabs{background-color:#252526;border-bottom-color:#333}.tab-btn{padding:.5rem 1rem;border:1px solid #ddd;border-bottom:none;background-color:#eee;color:#333;cursor:pointer;margin-right:.25rem;border-top-left-radius:4px;border-top-right-radius:4px;position:relative;top:1px}body[data-theme=vs-dark] .tab-btn,body[data-theme=hc-black] .tab-btn{background-color:#2d2d2d;color:#ccc;border-color:#333}.tab-btn.active{background-color:#fff;border-bottom-color:#fff;color:#4caf50;font-weight:700}body[data-theme=vs-dark] .tab-btn.active,body[data-theme=hc-black] .tab-btn.active{background-color:#1e1e1e;border-bottom-color:#1e1e1e;color:#4caf50}.editor-pane{display:none;height:calc(100% - 41px)}.editor-pane.active{display:block}main.horizontal{flex-direction:row}main.vertical{flex-direction:column}main.preview-right{flex-direction:row}main.preview-bottom{flex-direction:column}.panel{overflow:hidden;position:relative}#editor-container{height:100%}#preview-container{height:100%;background-color:#fff}body[data-theme=vs-dark] #preview-container,body[data-theme=hc-black] #preview-container{background-color:#1e1e1e}#preview-frame{width:100%;height:100%;border:none;background-color:#fff}.gutter{background-color:#eee;background-repeat:no-repeat;background-position:50%}body[data-theme=vs-dark] .gutter,body[data-theme=hc-black] .gutter{background-color:#333}.gutter.gutter-horizontal{cursor:col-resize;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}.gutter.gutter-vertical{cursor:row-resize;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=)}.dropdown{position:relative;display:inline-block}.dropdown-menu{position:absolute;top:100%;right:0;z-index:1000;display:none;min-width:160px;padding:.5rem 0;margin:.125rem 0 0;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026}body[data-theme=vs-dark] .dropdown-menu,body[data-theme=hc-black] .dropdown-menu{background-color:#252526;border-color:#333;box-shadow:0 2px 5px #0000004d}.dropdown-menu.show{display:block}.dropdown-menu a{display:block;padding:.5rem 1rem;color:#333;text-decoration:none;white-space:nowrap}body[data-theme=vs-dark] .dropdown-menu a,body[data-theme=hc-black] .dropdown-menu a{color:#eee}.dropdown-menu a:hover{background-color:#f5f5f5}body[data-theme=vs-dark] .dropdown-menu a:hover,body[data-theme=hc-black] .dropdown-menu a:hover{background-color:#333}@media (max-width: 768px){.controls{flex-wrap:wrap}header{height:auto;flex-direction:column;align-items:flex-start;gap:.5rem;padding:.5rem}.controls{width:100%;justify-content:flex-start}}