* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           
       }
       
       body {
           background-color: #1e1e1e;
           color: #f0f0f0;
           display: flex;
           flex-direction: column;
           height: 100vh;
           overflow-x: hidden;
       }
       
       header {
           background-color: #252526;
           padding: 15px 20px;
           border-bottom: 1px solid #3c3c3c;
       }
       
       h1 {
           font-size: 1.5rem;
           color: #e6e6e6;
       }
       
       .container {
           display: flex;
           flex: 1;
           overflow: hidden;
           flex-direction: row;
       }
       
       .editor-panel {
           flex: 1;
           display: flex;
           flex-direction: column;
           width: 50%;
           border-right: 1px solid #3c3c3c;
       }
       
       .preview-panel {
           flex: 1;
           width: 50%;
           display: flex;
           flex-direction: column;
       }
       
       .tabs {
           display: flex;
           background-color: #2d2d2d;
           border-bottom: 1px solid #3c3c3c;
       }
       
       .tab {
           padding: 10px 20px;
           cursor: pointer;
           background-color: #2d2d2d;
           border-right: 1px solid #3c3c3c;
           transition: background-color 0.2s;
           flex: 1;
           text-align: center;
       }
       
       .tab.active {
           background-color: #1e1e1e;
           color: #4ec9b0;
       }
       
       .tab:hover {
           background-color: #383838;
       }
       
       .editor-container {
           flex: 1;
           overflow: hidden;
           position: relative;
       }
       
       .code-editor {
           width: 100%;
           height: 100%;
           padding: 10px;
           background-color: #1e1e1e;
           background-color: #1e1e1e;
           color: #d4d4d4;
           border: none;
           padding: 15px;
           resize: vertical;
           font-family: 'Courier New', monospace;
           font-size: 14px;
           line-height: 1.5;
           tab-size: 4;
       }
       
       .preview-container {
           flex: 1;
           background-color: white;
           overflow: auto;
           position: relative;
       }
       
       #preview {
           width: 100%;
           height: 100%;
           border: none;
       }
       
       .button-container {
           padding: 10px;
           background-color: #252526;
           border-top: 1px solid #3c3c3c;
           display: flex;
           justify-content: flex-end;
       }
       
       button {
           padding: 8px 16px;
           background-color: #0e639c;
           color: white;
           border: none;
           border-radius: 2px;
           cursor: pointer;
           margin-left: 10px;
           transition: background-color 0.2s;
       }
       
       button:hover {
           background-color: #1177bb;
       }
       
       .editor-label {
           padding: 5px 10px;
           background-color: #2d2d2d;
           color: #ccc;
           font-size: 12px;
           display: flex;
           align-items: center;
       }
       
       .editor-label span {
           margin-left: 5px;
           padding: 2px 6px;
           background-color: #4ec9b0;
           color: #1e1e1e;
           border-radius: 3px;
           font-size: 11px;
           font-weight: bold;
       }
       
       .resizer {
           width: 8px;
           background-color: #2d2d2d;
           cursor: col-resize;
           position: relative;
           z-index: 10;
       }
       
       .resizer:hover {
           background-color: #0e639c;
       }
       
       .resizer::after {
           content: "";
           position: absolute;
           top: 50%;
           left: 2px;
           height: 30px;
           width: 4px;
           transform: translateY(-50%);
           background-color: #3c3c3c;
           border-radius: 2px;
       }
       
       .resizer:hover::after {
           background-color: #0e639c;
       }
       
       /* Mobile styles */
       @media (max-width: 768px) {
           .container {
               flex-direction: column;
           }
           
           .editor-panel,
           .preview-panel {
               width: 100%;
               height: 50vh;
           }
           
           .editor-panel {
               border-right: none;
               border-bottom: 1px solid #3c3c3c;
           }
           
           .resizer {
               display: none;
           }
           
           .tabs {
               flex-wrap: nowrap;
               overflow-x: auto;
           }
           
           .tab {
               min-width: 100px;
               flex: none;
           }
           
           button {
               padding: 10px 16px;
               font-size: 14px;
           }
       }