#tutorial {
    z-index: 1050; /* Above .tutorial-overlay */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#tutorial-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000; /* Above .modal */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 1s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tutorial-focus {
    z-index: 1100; /* Above .tutorial */
    position: relative;
}

.tutorial-focus.modal {
    z-index: 1100; /* Above .tutorial */
    position: fixed; /* position: relative; breaks modals */
}

/* This is highly customized for the problem statement */
.tutorial-focus.tutorial-focus-problem-statement {
    background: var(--containers-background);
    left: -27px;
    width: calc(100% + 54px);
    padding: 0 27px;
    border-radius: 3px;
}

.tutorial-override {
    position: fixed;
    background: var(--containers-background);
    padding: 6px;
    margin: -6px;
    border-radius: 4px;
}

.tutorial-override-tight {
    position: fixed;
}

.tutorial-msg {
    background-color: var(--containers-background);
    border-radius: 10px;
    padding: 10px;
    position: fixed;
    z-index: 1200;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tutorial-msg-far {
    margin-top: 20px;
}

.tutorial-msg p {
    margin: 0;
}

.tutorial-block-msg {
    background-color: var(--containers-background);
    border-radius: 10px;
    padding: 25px;
    position: fixed;
    z-index: 1200;
    margin-top: 25px;
}

.tutorial-msg::after,
.tutorial-block-msg::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--containers-background) transparent;
}

.tutorial-msg-arrow-down {
    margin-top: 0px;
    margin-bottom: 10px;
}

.tutorial-msg-arrow-down::after {
    bottom: unset;
    top: 100%; /* Override .tutorial-msg::after */
    border-color: var(--containers-background) transparent transparent transparent;
}

.tutorial-msg-arrow-left::after {
    left: 50px; /* Override .tutorial-msg::after */
}

.tutorial-msg-arrow-right::after {
    left: unset;
    right: 50px; /* Override .tutorial-msg::after */
}

.tutorial-modal-msg {
    z-index: 1100; /* Above .tutorial */
    position: relative;
    background-color: var(--containers-background);
    border-radius: 10px;
    padding: 25px;
    max-width: 670px;
    width: 100%;
    scrollbar-width: none;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
}

.tutorial-modal-msg-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.tutorial-exit-btn {
    position: fixed;
    z-index: 1100;
    bottom: 10px;
    right: 20px;
}

.tutorial-top_bar:not(.tutorial-modal-top_bar) {
    z-index: 1300; /* Above .tutorial-msg */
}

.tutorial-top_bar-overlay:not(.tutorial-modal-top_bar-overlay) {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    z-index: 1350; /* Above .tutorial-top_bar */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}