:root {

    --mathjslab-c-white: hsl(0, 0%, 100%);
    --mathjslab-c-white-soft: hsl(0, 0%, 96%);
    --mathjslab-c-white-mute: hsl(0, 0%, 93%);

    --mathjslab-c-black: hsl(0, 0%, 9%);
    --mathjslab-c-black-soft: hsl(0, 0%, 13%);
    --mathjslab-c-black-mute: hsl(0, 0%, 16%);

    --mathjslab-c-divider-light-1: hsla(0, 0%, 24%, 0.3);
    --mathjslab-c-divider-light-2: hsla(0, 0%, 24%, 0.1);
    --mathjslab-c-divider-dark-1: hsla(0, 0%, 33%, 0.7);
    --mathjslab-c-divider-dark-2: hsla(0, 0%, 33%, 0.5);

    --mathjslab-c-text-light-1: hsl(0, 0%, 16%);
    --mathjslab-c-text-light-2: hsla(0, 0%, 24%, 0.6);
    --mathjslab-c-text-dark-1: hsl(0, 0%, 100%);
    --mathjslab-c-text-dark-2: hsla(0, 0%, 92%, 0.6);

    --mathjslab-c-math-text-light: hsla(0, 0%, 24%, 0.8);
    --mathjslab-c-math-text-dark: hsla(0, 0%, 92%, 0.8);

    --mathjslab-c-panel-box-shadow-light: hsl(113, 49%, 30%);
    --mathjslab-c-panel-box-shadow-dark: hsl(113, 49%, 30%);

    --mathjslab-c-button-text-light: hsl(0, 0%, 100%);
    --mathjslab-c-button-border-light: hsl(120, 100%, 25%);
    --mathjslab-c-button-backgroung-to-light: hsl(120, 26%, 53%);
    --mathjslab-c-button-backgroung-from-light: hsl(113, 30%, 43%);
    --mathjslab-c-button-box-shadow-light: hsl(113, 49%, 30%);
    --mathjslab-c-button-text-shadow-light: hsl(113, 49%, 30%);
    --mathjslab-c-button-text-dark: hsl(0, 0%, 100%);
    --mathjslab-c-button-border-dark: hsl(120, 100%, 25%);
    --mathjslab-c-button-backgroung-to-dark: hsl(120, 26%, 43%);
    --mathjslab-c-button-backgroung-from-dark: hsl(113, 30%, 33%);
    --mathjslab-c-button-box-shadow-dark: hsl(113, 49%, 20%);
    --mathjslab-c-button-text-shadow-dark: hsl(113, 49%, 20%);

    --mathjslab-c-pre-code-background-light: hsl(0, 0%, 90%);
    --mathjslab-c-pre-code-background-dark: hsl(0, 0%, 20%);

    --mathjslab-c-a-light: hsla(120, 100%, 37%, 1);
    --mathjslab-c-a-hover-light: hsla(120, 100%, 23%, 1);
    --mathjslab-c-a-dark: hsla(120, 100%, 37%, 1);
    --mathjslab-c-a-hover-dark: hsla(120, 100%, 23%, 1);
    --mathjslab-c-a-background-hover-light: hsla(120, 100%, 37%, 0.2);
    --mathjslab-c-a-background-hover-dark: hsla(120, 100%, 37%, 0.2);

    --mathjslab-c-input-background-light: hsl(120, 35%, 91%);
    --mathjslab-c-input-background-dark: hsl(120, 35%, 91%);

    --mathjslab-c-input-background-hover-light: hsl(0, 0%, 96%);
    --mathjslab-c-input-background-hover-dark: hsl(0, 0%, 96%);
    --mathjslab-c-input-background-focus-light: hsl(60, 100%, 87%);
    --mathjslab-c-input-background-focus-dark: hsl(60, 100%, 87%);

    --mathjslab-c-input-text-light: hsl(0, 100%, 50%);
    --mathjslab-c-input-text-dark: hsl(0, 100%, 35%);
    --mathjslab-c-input-text-focus-light: hsl(0, 100%, 40%);
    --mathjslab-c-input-text-focus-dark: hsl(0, 100%, 25%);

    --mathjslab-c-backgroung-red-light: hsl(0, 52%, 88%);
    --mathjslab-c-backgroung-green-light: hsl(120, 52%, 88%);
    --mathjslab-c-backgroung-blue-light: hsl(240, 52%, 88%);
    --mathjslab-c-backgroung-yellow-light: hsl(60, 52%, 88%);

    --mathjslab-c-backgroung-red-dark: hsl(0, 52%, 16%);
    --mathjslab-c-backgroung-green-dark: hsl(120, 52%, 16%);
    --mathjslab-c-backgroung-blue-dark: hsl(240, 52%, 16%);
    --mathjslab-c-backgroung-yellow-dark: hsl(60, 52%, 16%);

    --mathjslab-c-divider-red-light-1: red;
    --mathjslab-c-divider-red-light-2: red;
    --mathjslab-c-divider-green-light-1: green;
    --mathjslab-c-divider-green-light-2: green;
    --mathjslab-c-divider-blue-light-1: blue;
    --mathjslab-c-divider-blue-light-2: blue;
    --mathjslab-c-divider-yellow-light-1: yellow;
    --mathjslab-c-divider-yellow-light-2: yellow;

    --mathjslab-c-divider-red-dark-1: red;
    --mathjslab-c-divider-red-dark-2: red;
    --mathjslab-c-divider-green-dark-1: green;
    --mathjslab-c-divider-green-dark-2: green;
    --mathjslab-c-divider-blue-dark-1: blue;
    --mathjslab-c-divider-blue-dark-2: blue;
    --mathjslab-c-divider-yellow-dark-1: yellow;
    --mathjslab-c-divider-yellow-dark-2: yellow;

}

/* semantic color variables */
:root {

    --color-background: var(--mathjslab-c-white);
    --color-background-soft: var(--mathjslab-c-white-soft);
    --color-background-mute: var(--mathjslab-c-white-mute);

    --color-border: var(--mathjslab-c-divider-light-2);
    --color-border-hover: var(--mathjslab-c-divider-light-1);

    --color-heading: var(--mathjslab-c-text-light-1);
    --color-text: var(--mathjslab-c-text-light-1);

    --color-math-text: var(--mathjslab-c-math-text-light);

    --color-panel-box-shadow: var(--mathjslab-c-panel-box-shadow-light);

    --color-button-text: var(--mathjslab-c-button-text-light);
    --color-button-border: var(--mathjslab-c-button-border-light);
    --color-button-backgroung-to: var(--mathjslab-c-button-backgroung-to-light);
    --color-button-backgroung-from: var(--mathjslab-c-button-backgroung-from-light);
    --color-button-box-shadow: var(--mathjslab-c-button-box-shadow-light);
    --color-button-text-shadow: var(--mathjslab-c-button-text-shadow-light);

    --color-pre-code-background: var(--mathjslab-c-pre-code-background-light);

    --color-a-text: var(--mathjslab-c-a-light);
    --color-a-text-hover: var(--mathjslab-c-a-hover-light);
    --color-a-background-hover: var(--mathjslab-c-a-background-hover-light);

    --color-input-background: var(--mathjslab-c-input-background-light);
    --color-input-background-hover: var(--mathjslab-c-input-background-hover-light);
    --color-input-background-focus: var(--mathjslab-c-input-background-focus-light);

    --color-input-text: var(--mathjslab-c-input-text-light);
    --color-input-text-focus: var(--mathjslab-c-input-text-focus-light);

    --red-backgroung: var(--mathjslab-c-backgroung-red-light);
    --red-border: var(--mathjslab-c-divider-red-light-2);
    --red-border-hover: var(--mathjslab-c-divider-red-light-1);
    --green-backgroung: var(--mathjslab-c-backgroung-green-light);
    --green-border: var(--mathjslab-c-divider-green-light-2);
    --green-border-hover: var(--mathjslab-c-divider-green-light-1);
    --blue-backgroung: var(--mathjslab-c-backgroung-blue-light);
    --blue-border: var(--mathjslab-c-divider-blue-light-2);
    --blue-border-hover: var(--mathjslab-c-divider-blue-light-1);
    --yellow-backgroung: var(--mathjslab-c-backgroung-yellow-light);
    --yellow-border: var(--mathjslab-c-divider-yellow-light-2);
    --yellow-border-hover: var(--mathjslab-c-divider-yellow-light-1);

}

@media (prefers-color-scheme: dark) {

    :root {

        --color-background: var(--mathjslab-c-black);
        --color-background-soft: var(--mathjslab-c-black-soft);
        --color-background-mute: var(--mathjslab-c-black-mute);

        --color-border: var(--mathjslab-c-divider-dark-2);
        --color-border-hover: var(--mathjslab-c-divider-dark-1);

        --color-heading: var(--mathjslab-c-text-dark-1);
        --color-text: var(--mathjslab-c-text-dark-2);

        --color-math-text: var(--mathjslab-c-math-text-dark);

        --color-panel-box-shadow: var(--mathjslab-c-panel-box-shadow-dark);

        --color-button-text-shadow: var(--mathjslab-c-button-text-shadow-dark);
        --color-button-border: var(--mathjslab-c-button-border-dark);
        --color-button-backgroung-to: var(--mathjslab-c-button-backgroung-to-dark);
        --color-button-backgroung-from: var(--mathjslab-c-button-backgroung-from-dark);
        --color-button-box-shadow: var(--mathjslab-c-button-box-shadow-dark);

        --color-pre-code-background: var(--mathjslab-c-pre-code-background-dark);

        --color-a-text: var(--mathjslab-c-a-dark);
        --color-a-text-hover: var(--mathjslab-c-a-hover-dark);
        --color-a-background-hover: var(--mathjslab-c-a-background-hover-dark);

        --color-input-background: var(--mathjslab-c-input-background-dark);
        --color-input-background-hover: var(--mathjslab-c-input-background-hover-dark);
        --color-input-background-focus: var(--mathjslab-c-input-background-focus-dark);

        --color-input-text: var(--mathjslab-c-input-text-dark);
        --color-input-text-focus: var(--mathjslab-c-input-text-focus-dark);

        --red-backgroung: var(--mathjslab-c-backgroung-red-dark);
        --red-border: var(--mathjslab-c-divider-red-dark-2);
        --red-border-hover: var(--mathjslab-c-divider-red-dark-1);
        --green-backgroung: var(--mathjslab-c-backgroung-green-dark);
        --green-border: var(--mathjslab-c-divider-green-dark-2);
        --green-border-hover: var(--mathjslab-c-divider-green-dark-1);
        --blue-backgroung: var(--mathjslab-c-backgroung-blue-dark);
        --blue-border: var(--mathjslab-c-divider-blue-dark-2);
        --blue-border-hover: var(--mathjslab-c-divider-blue-dark-1);
        --yellow-backgroung: var(--mathjslab-c-backgroung-yellow-dark);
        --yellow-border: var(--mathjslab-c-divider-yellow-dark-2);
        --yellow-border-hover: var(--mathjslab-c-divider-yellow-dark-1);

    }

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-background);
    transition:
        color 0.5s,
        background-color 0.5s;
    line-height: 1.6;
    font-family: sans-serif;
    font-size: 15px;
}

math {
    math-style: normal;
    font-size: 15px;
    color: var(--color-math-text);
}

#app {
    margin: 0 auto;
    display: block;
    padding: 0;
}

a,
.green {
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--color-a-text);
    transition: 0.4s;
    padding: 0.1rem;
}

select,
button {
    margin: 0.5rem;
	box-shadow: 0px 10px 14px -7px var(--color-button-box-shadow);
	background: linear-gradient(to bottom, var(--color-button-backgroung-to) 5%, var(--color-button-backgroung-from) 100%);
	background-color: var(--color-button-backgroung-to);
    border: 1px outset var(--color-button-border);
	border-radius: 0.5rem;
	display: inline-block;
	cursor: pointer;
	color: var(--color-button-text);
	font-family: Arial;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5rem;
	text-decoration: none;
	text-shadow:0px 1px 0px var(--color-button-text-shadow);
}

select:hover,
button:hover {
	background: linear-gradient(to bottom, var(--color-button-backgroung-from) 5%, var(--color-button-backgroung-to) 100%);
	background-color: var(--color-button-backgroung-from);
}

select:active,
button:active {
	position: relative;
	top: 1px;
}

@media (hover: hover) {
    a:hover {
        background-color: var(--color-a-background-hover);
    }
}

header {
    line-height: 1.5;
}

.logo {
    display: block;
    margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
    }

    .logo {
        margin: 0 2rem 0 0;
    }

    header .header-wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
    }
}

h1 {
    font-weight: 500;
    font-size: 2.6rem;
    position: relative;
    top: -10px;
}

h3 {
    font-size: 1.2rem;
    font-weight: normal;
}

.green-panel {
    background-color: var(--green-backgroung);
    border: 2px solid var(--green-border);
    border-radius: 1rem;
    box-shadow: 0px 10px 14px -7px var(--color-panel-box-shadow);
    padding: 1rem;
}

.width-fit-content {
    width: fit-content;
}

.header-panel h1,
.header-panel h3,
.header-panel p {
    text-align: center;
}

div.right-align-panel {
    display: block;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .header-panel h1,
    .header-panel h3 {
        text-align: left;
    }

    .header-panel p {
        text-align: right;
    }

    div.right-align-panel {
        margin: auto 0 auto auto;
    }
}

pre {
    overflow-x: auto;
    background-color: var(--color-pre-code-background);
    padding: 1rem;
    border-radius: 1rem;
}

mn > pre {
    background-color: inherit;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

pre > code {
    color: inherit;
}

code {
    color: var(--color-input-text);;
}

.prompt-container {
    position: relative;
}

.shell {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 1;
}

@media (min-width: 1024px) {
    .shell {
        padding: 1rem;
        max-width: calc(100% - 15%);
    }
}

.batch {
    display: none;
}

.variables {
    display: none;
}

@media (min-width: 1024px) {
    .batch {
        display: block;
    }

    .variables {
        width: 14%;
        background-color: var(--green-backgroung);
        border: 2px solid var(--green-border);
        padding: 1rem;
        border-radius: 1rem;
        position: absolute;
        right: 0;
        display: block;
    }
}

.namelist {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.inputarea {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-family: monospace;
    font-size: 1.225rem;
    border: 1px thin black;
    padding: 0.2rem;
    line-height: 1.225rem;
    white-space: pre-wrap;
    overflow-wrap: normal;
    overflow-x: auto;
    width: 98%;
    margin: 1rem;
    resize: none;
}

.inputarea:hover {
    background-color: var(--color-input-background-hover);
}

.inputarea:focus {
    background-color: var(--color-input-background-focus);
    color: var(--color-input-text-focus);
}

.cursor {
    width: 1rem;
    font-family: 1rem monospace;
    position: relative;
    top: -0.175rem;
}

.inputprompt {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-family: 1rem monospace;
    overflow: hidden;
    outline: none;
    resize: none;
    white-space: nowrap;
    height: 1rem;
    width: 100%;
    line-height: 1rem;
    border-radius: 0.3rem;
    border: 0;
    outline: none;
}

.inputprompt:hover {
    background-color: var(--color-input-background-hover);
}

.inputprompt:focus {
    background-color: var(--color-input-background-focus);
    color: var(--color-input-text-focus);
}

button.inputbutton {
    width: 50%;
    margin: auto;
    height: 3rem;
    border-radius: 3rem;
}

.output {
    overflow-x: auto;
}

.good {
    background-color: var(--green-backgroung);
    border: 2px solid var(--green-border);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.bad {
    background-color: var(--red-backgroung);
    border: 2px solid var(--red-border);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.warning {
    background-color: var(--yellow-backgroung);
    border: 2px solid var(--yellow-border);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.info {
    background-color: var(--blue-backgroung);
    border: 2px solid var(--blue-border);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.doc {
    background-color: var(--color-background);
    border: 2px solid var(--color-border);
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
}

.wrap-collabsible {
    box-shadow: 0px 10px 14px -7px var(--color-panel-box-shadow);
    border-radius: 1rem;
}

input.toggle {
    display: none;
}

.lbl-toggle {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    color: var(--color-a-text);
    background: var(--green-backgroung);
    cursor: pointer;
    border: 2px solid var(--green-border);
    border-radius: 1rem;
    transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
    color: var(--color-a-text-hover);
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.collapsible-content .content-inner {
    background: var(--color-background);
    border-left: 2px solid var(--green-border);
    border-right: 2px solid var(--green-border);
    border-bottom: 2px solid var(--green-border);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding: 0.5rem;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: fit-content;
}

.toggle:checked+.lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0;
}