:root{--bg-main:#05060f;--bg-tab-active:#101224;--bg-tab-hover:#0e1021;--text-main:#e5e5e5;--border-subtle:#1a1d3a;--scrollbar-thumb:#2a2e5a;--accent:dodgerblue}html,body{height:100vh;margin:0;padding:0;overflow:hidden}.container{flex-direction:row;height:100vh;display:flex}.code{outline:none;flex-direction:column;width:50%;min-width:150px;margin:0;transition:all .1s;display:flex}.preview{flex:1;min-width:150px}textarea{background:var(--bg-main);color:var(--text-main);border:none;outline:none;flex:1;padding:10px;font-family:monospace}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);cursor:pointer;border-radius:30px}.preview iframe{border:none;width:100%;height:100%}.tabs{background:var(--bg-main);display:flex}.tab{background:var(--bg-main);color:var(--text-main);cursor:pointer;border:none;border-bottom:2px solid var(--border-subtle);flex:1;padding:10px;font-weight:500;transition:all .3s}.tab.active{background:var(--bg-tab-active);border-bottom:3px solid var(--accent)}.tab:hover{background:var(--bg-tab-hover)}.editor{flex:1;min-height:0;display:flex}.editor-pane{flex:1;display:none}.editor-pane.active{display:flex}.divider{cursor:col-resize;background:var(--border-subtle);flex-shrink:0;width:3px}.divider:hover{background:var(--accent)}.code,.preview{will-change:width}.cm-editor{width:100%;height:100%}.cm-editor:hover{cursor:text}