.quarto-light {
    --exercise-main-color: var(--bs-body-color, var(--r-main-color, #212529));
    --exercise-main-bg: var(--bs-body-bg, var(--r-background-color, #ffffff));
    --exercise-primary-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --exercise-gray: var(--bs-gray-300, #dee2e6);
    --exercise-cap-bg: var(--bs-light-bg-subtle, #f8f8f8);
    --exercise-line-bg: rgba(var(--exercise-primary-rgb), .05);
    --exercise-line-gutter-bg: rgba(var(--exercise-primary-rgb), .1);
    --exercise-code-block-color: var(--quarto-scss-export-code-block-color, var(--exercise-main-color));
    --exercise-code-block-bg: var(--quarto-scss-export-code-block-bg, var(--exercise-main-bg))
}

.quarto-dark {
    --exercise-main-color: var(--bs-body-color, var(--r-main-color, #ffffff));
    --exercise-main-bg: var(--bs-body-bg, var(--r-background-color, #222222));
    --exercise-primary-rgb: var(--bs-primary-rgb, 55, 90, 127);
    --exercise-gray: var(--bs-gray-700, #434343);
    --exercise-cap-bg: var(--bs-card-cap-bg, #505050);
    --exercise-line-bg: rgba(var(--exercise-primary-rgb), .2);
    --exercise-line-gutter-bg: rgba(var(--exercise-primary-rgb), .4);
    --exercise-code-block-color: var(--quarto-scss-export-code-block-color, var(--exercise-main-color));
    --exercise-code-block-bg: var(--quarto-scss-export-code-block-bg, var(--exercise-main-bg))
}

.webr-ojs-exercise.exercise-solution, .webr-ojs-exercise.exercise-hint {
    border: var(--exercise-gray) 1px solid;
    border-radius: 5px;
    padding: 1rem
}

.exercise-hint .exercise-hint, .exercise-solution .exercise-solution {
    border: none;
    padding: 0
}

.webr-ojs-exercise.exercise-solution > .callout, .webr-ojs-exercise.exercise-hint > .callout {
    margin: -1rem;
    border: 0
}

#exercise-loading-indicator {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 1.2rem;
    padding: .2rem .75rem;
    border: 1px solid var(--exercise-gray);
    background-color: var(--exercise-cap-bg);
    border-top-left-radius: 5px
}

#exercise-loading-indicator > .spinner-grow {
    min-width: 1rem
}

.exercise-loading-details + .exercise-loading-details:before {
    content: "/ "
}

@media only screen and (max-width: 576px) {
    #exercise-loading-indicator {
        font-size: .8rem;
        padding: .1rem .5rem
    }

    #exercise-loading-indicator > .spinner-grow {
        min-width: .66rem
    }

    #exercise-loading-indicator .gap-2 {
        gap: .2rem !important
    }

    #exercise-loading-indicator .spinner-grow {
        --bs-spinner-width: .66rem;
        --bs-spinner-height: .66rem
    }
}

.btn.btn-exercise-editor:disabled, .btn.btn-exercise-editor.disabled, .btn-exercise-editor fieldset:disabled .btn {
    transition: opacity .5s
}

.card.exercise-editor .card-header a.btn {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .15rem;
    --bs-btn-font-size: .75rem
}

.quarto-dark .card.exercise-editor .card-header .btn.btn-outline-dark {
    --bs-btn-color: #f8f8f8;
    --bs-btn-border-color: #f8f8f8;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f8f8f8;
    --bs-btn-hover-border-color: #f8f8f8;
    --bs-btn-focus-shadow-rgb: 248, 248, 248;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #f8f8f8;
    --bs-btn-active-border-color: #f8f8f8;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #f8f8f8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f8f8f8;
    --bs-btn-bg: transparent;
    --bs-gradient: none
}

.card.exercise-editor {
    --exercise-min-lines: 0;
    --exercise-max-lines: infinity;
    --exercise-font-size: var(--bs-body-font-size, 1rem)
}

.card.exercise-editor .card-header {
    padding: .5rem 1rem;
    background-color: var(--exercise-cap-bg);
    border-bottom: 1px solid rgba(0, 0, 0, .175)
}

.card.exercise-editor .cm-editor {
    color: var(--exercise-code-block-color);
    background-color: var(--exercise-code-block-bg);
    max-height: calc(var(--exercise-max-lines) * 1.4 * var(--exercise-font-size) + 8px)
}

.card.exercise-editor .cm-content {
    caret-color: var(--exercise-code-block-color)
}

.card.exercise-editor .cm-cursor, .card.exercise-editor .cm-dropCursor {
    border-left-color: var(--exercise-code-block-color)
}

.card.exercise-editor .cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .card.exercise-editor .cm-content ::selection {
    background-color: rgba(var(--exercise-primary-rgb), .1)
}

.card.exercise-editor .cm-activeLine {
    background-color: var(--exercise-line-bg)
}

.card.exercise-editor .cm-activeLineGutter {
    background-color: var(--exercise-line-gutter-bg)
}

.card.exercise-editor .cm-gutters {
    background-color: var(--exercise-cap-bg);
    color: var(--exercise-main-color);
    border-right: 1px solid var(--exercise-gray)
}

.card.exercise-editor .cm-content, .card.exercise-editor .cm-gutter {
    min-height: calc(var(--exercise-min-lines) * 1.4 * var(--exercise-font-size) + 8px)
}

.card.exercise-editor .cm-scroller {
    line-height: 1.4;
    overflow: auto
}

:root {
    --exercise-editor-hl-al: var(--quarto-hl-al-color, #AD0000);
    --exercise-editor-hl-an: var(--quarto-hl-an-color, #5E5E5E);
    --exercise-editor-hl-at: var(--quarto-hl-at-color, #657422);
    --exercise-editor-hl-bn: var(--quarto-hl-bn-color, #AD0000);
    --exercise-editor-hl-ch: var(--quarto-hl-ch-color, #20794D);
    --exercise-editor-hl-co: var(--quarto-hl-co-color, #5E5E5E);
    --exercise-editor-hl-cv: var(--quarto-hl-cv-color, #5E5E5E);
    --exercise-editor-hl-cn: var(--quarto-hl-cn-color, #8f5902);
    --exercise-editor-hl-cf: var(--quarto-hl-cf-color, #003B4F);
    --exercise-editor-hl-dt: var(--quarto-hl-dt-color, #AD0000);
    --exercise-editor-hl-dv: var(--quarto-hl-dv-color, #AD0000);
    --exercise-editor-hl-do: var(--quarto-hl-do-color, #5E5E5E);
    --exercise-editor-hl-er: var(--quarto-hl-er-color, #AD0000);
    --exercise-editor-hl-fl: var(--quarto-hl-fl-color, #AD0000);
    --exercise-editor-hl-fu: var(--quarto-hl-fu-color, #4758AB);
    --exercise-editor-hl-im: var(--quarto-hl-im-color, #00769E);
    --exercise-editor-hl-in: var(--quarto-hl-in-color, #5E5E5E);
    --exercise-editor-hl-kw: var(--quarto-hl-kw-color, #003B4F);
    --exercise-editor-hl-op: var(--quarto-hl-op-color, #5E5E5E);
    --exercise-editor-hl-ot: var(--quarto-hl-ot-color, #003B4F);
    --exercise-editor-hl-pp: var(--quarto-hl-pp-color, #AD0000);
    --exercise-editor-hl-sc: var(--quarto-hl-sc-color, #5E5E5E);
    --exercise-editor-hl-ss: var(--quarto-hl-ss-color, #20794D);
    --exercise-editor-hl-st: var(--quarto-hl-st-color, #20794D);
    --exercise-editor-hl-va: var(--quarto-hl-va-color, #111111);
    --exercise-editor-hl-vs: var(--quarto-hl-vs-color, #20794D);
    --exercise-editor-hl-wa: var(--quarto-hl-wa-color, #5E5E5E)
}

*[data-bs-theme=dark] {
    --exercise-editor-hl-al: var(--quarto-hl-al-color, #f07178);
    --exercise-editor-hl-an: var(--quarto-hl-an-color, #d4d0ab);
    --exercise-editor-hl-at: var(--quarto-hl-at-color, #00e0e0);
    --exercise-editor-hl-bn: var(--quarto-hl-bn-color, #d4d0ab);
    --exercise-editor-hl-bu: var(--quarto-hl-bu-color, #abe338);
    --exercise-editor-hl-ch: var(--quarto-hl-ch-color, #abe338);
    --exercise-editor-hl-co: var(--quarto-hl-co-color, #f8f8f2);
    --exercise-editor-hl-cv: var(--quarto-hl-cv-color, #ffd700);
    --exercise-editor-hl-cn: var(--quarto-hl-cn-color, #ffd700);
    --exercise-editor-hl-cf: var(--quarto-hl-cf-color, #ffa07a);
    --exercise-editor-hl-dt: var(--quarto-hl-dt-color, #ffa07a);
    --exercise-editor-hl-dv: var(--quarto-hl-dv-color, #d4d0ab);
    --exercise-editor-hl-do: var(--quarto-hl-do-color, #f8f8f2);
    --exercise-editor-hl-er: var(--quarto-hl-er-color, #f07178);
    --exercise-editor-hl-ex: var(--quarto-hl-ex-color, #00e0e0);
    --exercise-editor-hl-fl: var(--quarto-hl-fl-color, #d4d0ab);
    --exercise-editor-hl-fu: var(--quarto-hl-fu-color, #ffa07a);
    --exercise-editor-hl-im: var(--quarto-hl-im-color, #abe338);
    --exercise-editor-hl-in: var(--quarto-hl-in-color, #d4d0ab);
    --exercise-editor-hl-kw: var(--quarto-hl-kw-color, #ffa07a);
    --exercise-editor-hl-op: var(--quarto-hl-op-color, #ffa07a);
    --exercise-editor-hl-ot: var(--quarto-hl-ot-color, #00e0e0);
    --exercise-editor-hl-pp: var(--quarto-hl-pp-color, #dcc6e0);
    --exercise-editor-hl-re: var(--quarto-hl-re-color, #00e0e0);
    --exercise-editor-hl-sc: var(--quarto-hl-sc-color, #abe338);
    --exercise-editor-hl-ss: var(--quarto-hl-ss-color, #abe338);
    --exercise-editor-hl-st: var(--quarto-hl-st-color, #abe338);
    --exercise-editor-hl-va: var(--quarto-hl-va-color, #00e0e0);
    --exercise-editor-hl-vs: var(--quarto-hl-vs-color, #abe338);
    --exercise-editor-hl-wa: var(--quarto-hl-wa-color, #dcc6e0)
}

pre > code.sourceCode span.tok-keyword, .exercise-editor-body > .cm-editor span.tok-keyword {
    color: var(--exercise-editor-hl-kw)
}

pre > code.sourceCode span.tok-operator, .exercise-editor-body > .cm-editor span.tok-operator {
    color: var(--exercise-editor-hl-op)
}

pre > code.sourceCode span.tok-definitionOperator, .exercise-editor-body > .cm-editor span.tok-definitionOperator {
    color: var(--exercise-editor-hl-ot)
}

pre > code.sourceCode span.tok-compareOperator, .exercise-editor-body > .cm-editor span.tok-compareOperator {
    color: var(--exercise-editor-hl-ot)
}

pre > code.sourceCode span.tok-attributeName, .exercise-editor-body > .cm-editor span.tok-attributeName {
    color: var(--exercise-editor-hl-at)
}

pre > code.sourceCode span.tok-controlKeyword, .exercise-editor-body > .cm-editor span.tok-controlKeyword {
    color: var(--exercise-editor-hl-cf)
}

pre > code.sourceCode span.tok-comment, .exercise-editor-body > .cm-editor span.tok-comment {
    color: var(--exercise-editor-hl-co)
}

pre > code.sourceCode span.tok-string, .exercise-editor-body > .cm-editor span.tok-string {
    color: var(--exercise-editor-hl-st)
}

pre > code.sourceCode span.tok-string2, .exercise-editor-body > .cm-editor span.tok-string2 {
    color: var(--exercise-editor-hl-ss)
}

pre > code.sourceCode span.tok-variableName, .exercise-editor-body > .cm-editor span.tok-variableName {
    color: var(--exercise-editor-hl-va)
}

pre > code.sourceCode span.tok-bool, pre > code.sourceCode span.tok-literal, pre > code.sourceCode span.tok-separator, .exercise-editor-body > .cm-editor span.tok-bool, .exercise-editor-body > .cm-editor span.tok-literal, .exercise-editor-body > .cm-editor span.tok-separator {
    color: var(--exercise-editor-hl-cn)
}

pre > code.sourceCode span.tok-bool, pre > code.sourceCode span.tok-literal, .exercise-editor-body > .cm-editor span.tok-bool, .exercise-editor-body > .cm-editor span.tok-literal {
    color: var(--exercise-editor-hl-cn)
}

pre > code.sourceCode span.tok-number, pre > code.sourceCode span.tok-integer, .exercise-editor-body > .cm-editor span.tok-number, .exercise-editor-body > .cm-editor span.tok-integer {
    color: var(--exercise-editor-hl-dv)
}

pre > code.sourceCode span.tok-function-variableName, .exercise-editor-body > .cm-editor span.tok-function-variableName {
    color: var(--exercise-editor-hl-fu)
}

pre > code.sourceCode span.tok-function-attributeName, .exercise-editor-body > .cm-editor span.tok-function-attributeName {
    color: var(--exercise-editor-hl-at)
}

div.exercise-cell-output.cell-output-stdout pre code, div.exercise-cell-output.cell-output-stderr pre code {
    white-space: pre-wrap;
    word-wrap: break-word
}

div.exercise-cell-output.cell-output-stderr pre code {
    color: var(--exercise-editor-hl-er, #AD0000)
}

div.cell-output-pyodide table {
    border: none;
    margin: 0 auto 1em
}

div.cell-output-pyodide thead {
    border-bottom: 1px solid var(--exercise-main-color)
}

div.cell-output-pyodide td, div.cell-output-pyodide th, div.cell-output-pyodide tr {
    padding: .5em;
    line-height: normal
}

div.cell-output-pyodide th {
    font-weight: 700
}

div.cell-output-display canvas {
    background-color: #fff
}

.tab-pane > .exercise-tab-pane-header + div.webr-ojs-exercise {
    margin-top: 1em
}

.alert .exercise-feedback p:last-child {
    margin-bottom: 0
}

.alert.exercise-grade {
    animation-duration: .25s;
    animation-name: exercise-grade-slidein
}

@keyframes exercise-grade-slidein {
    0% {
        transform: translateY(10px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.alert.exercise-grade p:last-child {
    margin-bottom: 0
}

.alert.exercise-grade pre {
    white-space: pre-wrap;
    color: inherit
}

.observablehq pre > code.sourceCode {
    white-space: pre;
    position: relative
}

.observablehq div.sourceCode {
    margin: 1em 0 !important
}

.observablehq pre.sourceCode {
    margin: 0 !important
}

@media screen {
    .observablehq div.sourceCode {
        overflow: auto
    }
}

@media print {
    .observablehq pre > code.sourceCode {
        white-space: pre-wrap
    }

    .observablehq pre > code.sourceCode > span {
        text-indent: -5em;
        padding-left: 5em
    }
}

.reveal .d-none {
    display: none !important
}

.reveal .d-flex {
    display: flex !important
}

.reveal .card.exercise-editor .justify-content-between {
    justify-content: space-between !important
}

.reveal .card.exercise-editor .align-items-center {
    align-items: center !important
}

.reveal .card.exercise-editor .gap-1 {
    gap: .25rem !important
}

.reveal .card.exercise-editor .gap-2 {
    gap: .5rem !important
}

.reveal .card.exercise-editor .gap-3 {
    gap: .75rem !important
}

.reveal .card.exercise-editor {
    --exercise-font-size: 1.3rem;
    margin: 1rem 0;
    border: 1px solid rgba(0, 0, 0, .175);
    border-radius: .375rem;
    font-size: var(--exercise-font-size);
    overflow: hidden
}

.reveal .card.exercise-editor .card-header {
    padding: .5rem 1rem;
    background-color: var(--exercise-cap-bg);
    border-bottom: 1px solid rgba(0, 0, 0, .175)
}

.reveal .cell-output-webr.cell-output-display, .reveal .cell-output-pyodide.cell-output-display {
    text-align: center
}

.quarto-light .reveal .btn.btn-exercise-editor.btn-primary {
    --exercise-btn-bg: var(--bs-btn-bg, #0d6efd);
    --exercise-btn-color: var(--bs-btn-color, #ffffff);
    --exercise-btn-border-color: var(--bs-btn-border-color, #0d6efd);
    --exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #0b5ed7);
    --exercise-btn-hover-bg: var(--bs-btn-hover-bg, #0b5ed7);
    --exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff)
}

.quarto-dark .reveal .btn.btn-exercise-editor.btn-primary {
    --exercise-btn-bg: var(--bs-btn-bg, #375a7f);
    --exercise-btn-color: var(--bs-btn-color, #ffffff);
    --exercise-btn-border-color: var(--bs-btn-border-color, #375a7f);
    --exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #2c4866);
    --exercise-btn-hover-bg: var(--bs-btn-hover-bg, #2c4866);
    --exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff)
}

.quarto-light .reveal .btn.btn-exercise-editor.btn-outline-dark {
    --exercise-btn-bg: var(--bs-btn-bg, transparent);
    --exercise-btn-color: var(--bs-btn-color, #333);
    --exercise-btn-border-color: var(--bs-btn-border-color, #333);
    --exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #333);
    --exercise-btn-hover-bg: var(--bs-btn-hover-bg, #333);
    --exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff)
}

.quarto-dark .reveal .btn.btn-exercise-editor.btn-outline-dark {
    --exercise-btn-bg: var(--bs-btn-bg, transparent);
    --exercise-btn-color: var(--bs-btn-color, #f8f8f8);
    --exercise-btn-border-color: var(--bs-btn-border-color, #f8f8f8);
    --exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #f8f8f8);
    --exercise-btn-hover-bg: var(--bs-btn-hover-bg, #f8f8f8);
    --exercise-btn-hover-color: var(--bs-btn-hover-color, #000000)
}

@media only screen and (max-width: 576px) {
    :not(.reveal) .card-header .btn-exercise-editor > .btn-label-exercise-editor {
        max-width: 0px;
        margin-left: -4px;
        overflow: hidden;
        transition: max-width .2s ease-in, margin-left .05s ease-out .2s
    }

    :not(.reveal) .card-header .btn-exercise-editor:hover > .btn-label-exercise-editor {
        position: inherit;
        max-width: 80px;
        margin-left: 0;
        transition: max-width .2s ease-out .05s, margin-left .05s ease-in
    }
}

.reveal .card.exercise-editor .btn-group {
    border-radius: .375rem;
    position: relative;
    display: inline-flex;
    vertical-align: middle
}

.reveal .card.exercise-editor .btn-group > .btn {
    position: relative;
    flex: 1 1 auto
}

.reveal .card.exercise-editor .btn-group > :not(.btn-check:first-child) + .btn, .reveal .card.exercise-editor .btn-group > .btn-group:not(:first-child) {
    margin-left: -1px
}

.reveal .card.exercise-editor .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .reveal .card.exercise-editor .btn-group > .btn.dropdown-toggle-split:first-child, .reveal .card.exercise-editor .btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.reveal .card.exercise-editor .btn-group > .btn:nth-child(n+3), .reveal .card.exercise-editor .btn-group > :not(.btn-check) + .btn, .reveal .card.exercise-editor .btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.reveal .btn.btn-exercise-editor {
    display: inline-block;
    padding: .25rem .5rem;
    font-size: 1rem;
    color: var(--exercise-btn-color);
    background-color: var(--exercise-btn-bg);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--exercise-btn-border-color);
    border-radius: .375rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.reveal .btn.btn-exercise-editor:hover {
    color: var(--exercise-btn-hover-color);
    background-color: var(--exercise-btn-hover-bg);
    border-color: var(--exercise-btn-hover-border-color)
}

.reveal .btn.btn-exercise-editor:disabled, .reveal .btn.btn-exercise-editor.disabled, .reveal .btn-exercise-editor fieldset:disabled .btn {
    pointer-events: none;
    opacity: .65
}

.reveal .card.exercise-editor .spinner-grow {
    background-color: currentcolor;
    opacity: 0;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -.125em;
    border-radius: 50%;
    animation: .75s linear infinite spinner-grow
}

.reveal .cell-output-container pre code {
    overflow: auto;
    max-height: initial
}

.reveal .alert.exercise-grade {
    font-size: .55em;
    position: relative;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: .25rem;
    color: var(--exercise-alert-color);
    background-color: var(--exercise-alert-bg);
    border: 1px solid var(--exercise-alert-border-color)
}

.reveal .alert.exercise-grade .alert-link {
    font-weight: 700;
    color: var(--exercise-alert-link-color)
}

.quarto-light .reveal .exercise-grade.alert-info {
    --exercise-alert-color: #055160;
    --exercise-alert-bg: #cff4fc;
    --exercise-alert-border-color: #9eeaf9;
    --exercise-alert-link-color: #055160
}

.quarto-light .reveal .exercise-grade.alert-success {
    --exercise-alert-color: #0a3622;
    --exercise-alert-bg: #d1e7dd;
    --exercise-alert-border-color: #a3cfbb;
    --exercise-alert-link-color: #0a3622
}

.quarto-light .reveal .exercise-grade.alert-warning {
    --exercise-alert-color: #664d03;
    --exercise-alert-bg: #fff3cd;
    --exercise-alert-border-color: #ffe69c;
    --exercise-alert-link-color: #664d03
}

.quarto-light .reveal .exercise-grade.alert-danger {
    --exercise-alert-color: #58151c;
    --exercise-alert-bg: #f8d7da;
    --exercise-alert-border-color: #f1aeb5;
    --exercise-alert-link-color: #58151c
}

.quarto-dark .reveal .exercise-grade.alert-info {
    --exercise-alert-color: #ffffff;
    --exercise-alert-bg: #3498db;
    --exercise-alert-border-color: #3498db;
    --exercise-alert-link-color: #ffffff
}

.quarto-dark .reveal .exercise-grade.alert-success {
    --exercise-alert-color: #ffffff;
    --exercise-alert-bg: #00bc8c;
    --exercise-alert-border-color: #00bc8c;
    --exercise-alert-link-color: #ffffff
}

.quarto-dark .reveal .exercise-grade.alert-warning {
    --exercise-alert-color: #ffffff;
    --exercise-alert-bg: #f39c12;
    --exercise-alert-border-color: #f39c12;
    --exercise-alert-link-color: #ffffff
}

.quarto-dark .reveal .exercise-grade.alert-danger {
    --exercise-alert-color: #ffffff;
    --exercise-alert-bg: #e74c3c;
    --exercise-alert-border-color: #e74c3c;
    --exercise-alert-link-color: #ffffff
}