@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');

        body {
            font-family: 'Regular 400', sans-serif;
            overflow: hidden;
            height: 100vh;
            transition: 0.3s;
        }

        /* Sidebar Styling */
        .sidebar {
            width: 200px;
            height: 100vh;
            background: #2d2d2d;
            color: #ddd;
            flex-shrink: 0;
            padding: 0px 10px 15px 10px;
        }

        .sidebar-header {
            width: 100%;
            padding: 6px 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #dddddd;
            font-size: 13px;
        }

        .header-link {
            text-decoration: none;
            color: #dddddd;
            font-size: 13px;
            width: 100%;
            text-align: center;
            transition: opacity 0.2s;
        }

        .header-link:hover {
            text-decoration: underline;
        }

        .sidebar-btn {
            width: 100%;
            text-align: left;
            padding: 6px 12px;
            margin-bottom: 6px;
            border-radius: 4px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #dddddd;
            color: #000000;
            border: 1px solid #4d4d4d;
            transition: 0.2s;
        }

        .sidebar-btn:hover {
            background: #ffffff;
            color: #000000;
        }

        /* Main Workspace */
        .workspace {
            display: flex;
            flex: 1;
            height: 100vh;
            background: #f0f0f0;
        }

        .editor-pane {
            flex: 1;
            height: 100vh;
            border-right: 1px solid #ccc;
            background: white;
        }

        .preview-pane {
            flex: 1;
            height: 100vh;
            background: white;
        }

        /* Make the cursor thick and bright blue so it stands out */
        .CodeMirror-cursor {
            border-left: 2px solid #000000 !important;
        }

        /* Ensure the cursor is white/bright when in dark mode */
        .dark-mode .CodeMirror-cursor {
            border-left: 2px solid #ffffff !important;
        }
        
        /* CodeMirror Customization */
        .CodeMirror {
            height: 100vh !important;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Dark Mode Overrides */
        .dark-mode {
            background: #1e1e1e !important;
            color: #f0f0f0;
        }

        .dark-mode .workspace {
            background: #121212;
        }

        .dark-mode .sidebar {
            background: #181818;
        }
        
        /* Removes the blue focus outline around the editor */
.CodeMirror {
    outline: none !important;
}

/* Also removes the focus ring from buttons if it bothers you */
button:focus {
    outline: none !important;
}