:root {
    --wd-ref-typeface-brand: 'Jupiter Sans', sans-serif;
    --wd-ref-typeface-plain: 'Jupiter Sans', sans-serif;
}

.andorra-editor, .andorra-component {
    --andorra-sans-font: 'Sociaux', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    --andorra-monospace-font: 'IntelliWeb Mono', "SF Mono", Andorra, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace !important;
    font-family: var(--andorra-sans-font) !important;
    /* --andorra-focusBorder: #3474f0 !important; */
}

/* Reset & layout */
body {
    margin: 0 !important;
    font-family: 'Jupiter Sans', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Top header bar */
#top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #007acc;
    color: white;

    /* top, left, bottom, right */
    padding: 10px 10px 10px 20px;
}

#top-bar h1 {
    margin: 0;
    font-size: 20px;
}

wd-filled-button {
    margin-left: 5px !important;
}

/* Main editor/preview area */
#main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#editor,
#preview-container {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

#editor {
    border-right: 1px solid #ccc;
    background: #fefefe;
}

/* Monaco requires height to fill container */
#editor {
    height: 100%;
    width: 100%;
}

/* Preview area */
#preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#preview-header h2 {
    margin: 0;
    font-size: 18px;
}

#preview {
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px;
    min-height: 300px;
    overflow: auto;
}

pre {
    background: #eee;
    padding: 10px;
    overflow-x: auto;
}

code {
    font-family: 'Jupiter Sans Code', sans-serif;
}

.matex-display {
    margin: 1em 0;
}