/* Pygments Style */
@import url(pygments-default.css);

/* Noto Sans */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+Mono:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


/* Google Material Symbols */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

/* Cascadia Fonts */
@import url(cascadia.css);

:root {
    /* Fonts */
    --serif-font: "Noto Serif", serif;
    --sans-serif-font: "Noto Sans", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
                       "Apple Color Emoji", "Segoe UI Emoji",
                       "Segoe UI Symbol";
    --monospace-font: "Cascadia Code", "Cascadia Mono", "Consolas", "Menlo", "Noto Sans Mono", monospace;


    /* Colors */

    /* Base Theme Colors */

    --base-theme-color: steelblue;
    --base-text-color: #000000;
    --base-page-bg-color: #ffffff;
    --base-border-color: lightgray;
    --base-shadow-color: lightgray;


    --base-theme-dark-color: #005296;
    --base-theme-light-color: #6d94b4;
    --base-theme-lighter-color: #e9f0f7;
    --base-theme-contrast-color: thistle;

    /* Additional Standard Page Colors */

    --masthead-fg-color: white;
    --masthead-bg-color: var(--base-theme-color);

    --footer-fg-color: white;
    --footer-bg-color: black;
    --footer-border-color: goldenrod;


    --warning-color: firebrick;
    --warning-border-color: var(--warning-color);
    --warning-bg-color: #ffeeee;
    --unreleased-warning-color: darkred;

    --default-border: 1px solid var(--base-border-color);
    --default-border-radius: 5px;
    --default-border-shadow: box-shadow: lightgray 3px 3px 10px 0px;

    --header-fg-color: var(--base-theme-color);
    --header-bg-color: inherit;

    --code-bg-color: var(--base-theme-lighter-color);
    --code-fg-color: var(--base-text-color);
    --code-bg-dark-color: var(--base-theme-dark-color);

    --header-code-bg-color: var(--base-theme-lighter-color);
    --header-code-fg-color: inherit;

    --code-hilite-bg-color: var(--box-bg-color);
    --code-hilite-fg-color: var(--box-fg-color);
    --code-hilite-border-color: var(--base-border-color);

    --example-bg-color: ghostwhite;
    --example-fg-color: var(--base-text-color);
    --example-border-color: darkgray;

    --tooltip-bg-color: #fafafa;
    --tooltip-fg-color: var(--base-text-color);


    --highlight-text-bg-color: lemonchiffon;
    /* --base-theme-color: #36638a; */

    /* Links */
    --link-fg-color: var(--base-theme-color);
    --link-bg-color: inherit;
    --link-hover-fg-color: var(--base-theme-color);
    --link-hover-bg-color: inherit;
    --link-active-fg-color: white;
    --link-active-bg-color: var(--base-theme-color);
    --link-visited-fg-color: var(--base-theme-color);
    --link-visited-bg-color: inherit;


    /* Site Navigation */

    /* -------------------- Sitenav Navigation */

    --sitenav-fg-color: var(--base-text-color);
    --sitenav-bg-color: var(--base-page-bg-color);
    --sitenav-border-color: var(--base-page-bg-color);
    --sitenav-link-fg-color: (--base-text-color);
    --sitenav-link-bg-color: inherit;
    --sitenav-link-hover-fg-color: var(--base-theme-color);
    --sitenav-link-hover-bg-color: inherit;
    --sitenav-link-active-fg-color: white;
    --sitenav-link-active-bg-color: var(--base-theme-contrast-color);
    --sitenav-link-visited-fg-color: var(--sitenav-link-fg-color);
    --sitenav-link-visited-bg-color: var(--sitenav-link-bg-color);


    /* -------------------- Page-to-Page */

    --prevnext-link-fg-color: var(--base-text-color);
    --prevnext-link-bg-color: inherit;
    --prevnext-link-hover-fg-color: white;
    --prevnext-link-hover-bg-color: var(--base-theme-color);
    --prevnext-link-active-fg-color: white;
    --prevnext-link-active-bg-color: var(--base-theme-contrast-color);
    --prevnext-link-visited-fg-color: var(--prevnext-link-fg-color);
    --prevnext-link-visited-bg-color: var(--prevnext-link-visited-bg-color);


    /* -------------------- Buttons */

    --button-link-fg-color: black;
    --button-link-bg-color: white;
    --button-link-border-color: var(--base-theme-color);
    --button-link-hover-fg-color: white;
    --button-link-hover-bg-color: var(--base-theme-light-color);
    --button-link-active-fg-color: white;
    --button-link-active-bg-color: var(--base-theme-contrast-color);
    --button-link-visited-fg-color: var(--button-link-fg-color);
    --button-link-visited-bg-color: var(--button-link-bg-color);

    --button-ext-link-fg-color: var(--base-theme-color);
    --button-ext-link-bg-color: var(--base-theme-lighter-color);

    /* --button-ext-link-fg-color: hotpink; */
    /* --button-ext-link-bg-color: lime; */




    /* Animal Friends */
    --insight-fg-color: var(--base-text-color);
    --left-insight-bg: beige;
    --right-insight-bg: rgb(215,244,247);
    /* --right-insight-bg: #cae2ea; */
    --left-insight-fg: var(--insight-fg-color);
    --right-insight-fg: var(--insight-fg-color);
    --right-insight-link: #3f7099;

    /* Boxes */
    --box-bg-color: #fafafa;
    --box-fg-color: var(--base-text-color);
    --box-border-color: lightgray;

    --headbox-header-border-color: goldenrod;
    --headbox-header-bg-color: var(--base-theme-color);
    --headbox-header-fg-color: white;

    --textbox-fg-color: var(--base-text-color);
    --textbox-bg-color: white;

    /* Questions */
    --question-bg-color: #fafaff;
    --question-fg-color: var(--base-text-color);
    --question-border-color: lightgray;

    /* -------------------- Question Inputs */
    --question-input-fg-color: black;
    --question-input-bg-color: white;
    --question-input-border-color: darkgray;

    /* -------------------- Question Buttons */
    --question-button-bg-color: var(--base-theme-color);
    --question-button-fg-color: white;
    --question-button-border-color: lightgray;
    /* border: 1px solid var(--question-border-color); */
    /* background-color: var(--question-input-bg-color); */

    /* ------------------------------ hover state */
    --question-button-bg-hover-color: var(--base-theme-lighter-color);
    --question-button-fg-hover-color: inherit;

    /* ------------------------------ active state */
    --question-button-bg-active-color: var(--base-theme-contrast-color);
    --question-button-fg-active-color: inherit;

    /* -------------------- Asks (the questions panel) */
    --ask-panel-bg-color: var(--box-bg-color);
    --ask-panel-border-color: var(--box-border-color);
    --ask-thread-bg-color: var(--base-page-bg-color);
    --ask-thread-border-color: #e0e0e0;
    --ask-thread-edge-color: var(--base-theme-light-color);
    --ask-muted-fg-color: #666;
    --ask-staff-accent-color: var(--base-theme-color);
    --ask-staff-reply-bg-color: var(--base-theme-lighter-color);

    /* -------------------- Quiet action buttons (asks + groups) */
    --action-button-fg-color: var(--base-text-color);
    --action-button-bg-color: var(--base-theme-lighter-color);
    --action-button-border-color: var(--base-theme-light-color);
    --action-button-hover-bg-color: var(--base-theme-light-color);
    --action-button-hover-fg-color: white;
    --action-button-active-bg-color: var(--base-theme-contrast-color);

    /* -------------------- Feedback */
    --feedback-fg-color: blue;
    --feedback-bg-color: inherit;
    --feedback-correct-color: green;
    --feedback-weird-color: purple;
    --feedback-incorrect-color: darkred;


    --deeper-dive-fg-color: var(--base-text-color);
    --deeper-dive-bg-color: palegoldenrod;
    --deeper-dive-border-color: goldenrod;

    --hints-bg-color: floralwhite;
    --hints-fg-color: var(--base-text-color);
    --hints-border-color: thistle;

}

/* ============================================================ */
/* Grid-Based Layout */
/* ============================================================ */

/* ----- Mobile First */

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [start masthead] 10em [sitenav] auto [main] 1fr [footer end] 3em;
    /* grid-template-rows: auto auto 1fr auto; */
    grid-template-areas:
        "header"
        "sitenav"
        "main"
        "footer";

    /* grid-gap: 10px; */
    max-width: 900px;
}

header #masthead {
    /* grid-column: 1 / -1; */
    grid-row-start: masthead;
    grid-column-start: masthead;
    grid-row-end: masthead;
}

nav {
    /* grid-row: 2; */
}

main {
    grid-row-start: main;
    grid-column-start: main;
    grid-column-end: main;
    /* grid-row: 3; */
    /* grid-column: 2; */
}

footer {
    grid-row-start: footer;
    grid-column-start: footer;
    grid-column-end: footer;
    /* grid-column: 1 / -1; */
}

#sitenav {
    grid-row-start: sitenav;
    grid-column-start: sitenav;
    grid-row-stop: sitenav;

    /* grid-row: 2 / 4; */
    /* grid-column: 1; */

    border: none;
}

#sitenav-toggle:checked ~ .sitenav-content {
    max-height: 500px; /* adjust this to fit your content */
}

#sitenav-toggle {
    display: none;
}

.sitenav-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.toggle-text {
    margin-left: 1em;
    content: url(../images/hamburger-white.svg);
}


/* /\* Quick Block Colors for Visualization *\/ */

/* header { background-color: blue; } */
/* main { background-color: pink; } */
/* footer { background-color: green; } */
/* nav { background-color: lightblue; } */
/* aside { background-color: orange; } */

/* ------ See below for adjustments for larger size canvases.

/* ------------------------------------------------------------
    End of basic layout.
------------------------------------------------------------ */


/* ============================================================ */
/* Appearance */

/* from bootstrap-reset.css for reference: */
/* body { */
/*     margin: 0; */
/*     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
/*     font-size: 1rem; */
/*     font-weight: 400; */
/*     line-height: 1.5; */
/*     color: #212529; */
/*     text-align: left; */
/*     background-color: #fff; */
/* } */


body {
    font-family: var(--serif-font);

    /* Make the content full height */
    min-height: 100vh;

    /* Set basic colors. */
    color: var(--base-text-color);
    background-color: var(--base-page-bg-color);
    /* background-color: #f5f5f5; */
}


/* Links */
a {
    color: var(--link-fg-color);
    background-color: var(--link-bg-color);
    text-decoration: none;
}

a:visited {
    color: var(--link-visited-fg-color);
    background-color: var(--link-visited-bg-color);
    text-decoration: none;
}
a:hover {
    border-bottom: 1px dotted var(--link-hover-fg-color);
    text-decoration: none;
}

a:active {
    color: var(--link-active-fg-color);
    background-color: var(--link-active-bg-color);
    text-decoration: none;
}


/* Not sure where this code should really be. */
/* Make the content centered */
/* .mystery { display: flex; flex-direction: column; justify-content: center;
/* align-items: center; */

/* Make the footer stick to the bottom */
/* position: relative; */
/* } */

tt {
    /* shouldn't really use tt, but sometimes it's useful */
    font-family: var(--monospace-font);
    font-size: 100%;
}
pre,
code {
    font-family: var(--monospace-font);
    font-size: 95%;
    font-weight: 350;
    color: var(--code-fg-color);
    background-color: var(--code-bg-color);
    padding: 1px 2px;
    margin: 2px 0;
    border: 0;
    border-radius: 4px;
    word-break: break-word;
    word-wrap: break-word;
}

strong code, dt code, b code {
    font-weight: 600;
}

pre {
    white-space: pre-wrap;
}

/********************************
 Section Titles (since the
 Sakai ones don't show up in the
 site export)
********************************/

/* General setup for headers. */

h1, h2, h3, h4, h5, h6 {
    font-family: "Noto Sans Display", var(--sans-serif-font);
    font-size: 1.2em;
    font-weight: bold;
    color: var(--header-fg-color);
    background-color: var(--header-bg-color);
    margin-bottom: 0.25em;
}


/* Header sizing/padding, if special. */
h1 {
    font-size: 140%;
}

h2 {
    font-size: 120%;
    /* font-weight: bold; */
    border-bottom: 2px solid var(--base-theme-color);
    /* margin & padding adjustments make bottom border span entire screen of small device */
    margin: 0 -1em 0.5em -1em;
    padding-left: 1em;
}
h3 {
    font-size: 110%;
    /* font-weight: bold; */
}
h4 {
    font-size: 100%;
    /* font-weight: bold; */
}
h5 {
    display: inline;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
}
h6 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-style: italic;
    font-weight: normal;
}


/* Code in headers */

h1 code, h2 code, h3 code, h4 code, h5 code, h5 code{
    font-family: var(--monospace-font);
    font-size: inherit;
    font-weight: 800;
    color: var(--header-code-fg-color);
    background-color: var(--header-code-bg-color);
}


/* Images */

img {
    max-width: 60%;
    margin: 0.75em 0;
}

img.htenem {
    height: 10em;
    object-fit: contain;
}

img.hfiveem {
    height: 5em;
    object-fit: contain;
}
img.wtenem {
    width: 10em;
    object-fit:contain;
}

img.wfiveem {
    width: 5em;
    object-fit: contain;
}

img.screenshot {
    max-width: 60%;
    margin: 0.5em auto 0.5em 20%;

    border: 1px solid var(--base-border-color);
    padding: 0.5em;
    box-shadow: 0.25em 0.25em 0.5em var(--base-shadow-color);
}

img.whiteboard {
    display: block;
    max-width: 90%;
    margin: 0.5em auto;
}

img.paradecor {
    max-width: 10em;
    margin: 0 0.25em 0.25em 0.25em;
    box-shadow: none;
    padding: none;
    border: none;
}

img.hardleft {
    margin-left: 0;
    float: left;
}

.paradecor.hardleft {
    transform: rotate(-20deg);
}
.paradecor.hardright {
    transform: rotate(30deg);
}

img.hardright {
    margin-right: 0;
    float: right;
}
/* img.rightside { */
/*     margin-right: 0; */
/*     margin-left: 100% - content-width; */


img.center {
    display: block;
    margin: 0 auto;
}


/* ------------------------------------------------------------ */
/* Page Layout */

#masthead {
    color: var(--masthead-fg-color);
    background-color: var(--masthead-bg-color);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sitelogo {
    /* display: inline; */
    content: url(https://www.cs.hmc.edu/~oneill/images/hmc-cs-logo.svg);
    /* font-size: 3em; */
    /* float: left; */
    /* margin: 0 2em 1em 0; */
    margin-right: 1ex; /* Minimum space */
}

#masthead > h1 {
    color: inherit;
    /* display: inline; */
    font-size: 2em;
    border: none;
    margin: 0;
    padding: 0;
    flex: 1 0 auto;
}

#loginbox {
    /* margin: auto; */
    font-size: 1em;
    float: right;
}

/* ---------------------------------------- */

main {
    margin: 0 1em;
    padding: 0;
    max-width: 900px;
    min-width: 400px;
}

#breadcrumbs {
    font-family: var(--sans-serif-font);
    font-size: 85%;
    color: var(--base-theme-color);
    margin-top: 0.5em;
}

#breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#breadcrumbs li {
    display: inline;
}

#breadcrumbs li a:after {
    color: var(--base-text-color);
    content: " » ";
}

#breadcrumbs li:after ul {
    content: "";
}

#breadcrumbs a {
    text-decoration: none;
}


/* ---------------------------------------- */

footer {
    font-family: var(--sans-serif-font);
    color: var(--footer-fg-color);
    background-color: var(--footer-bg-color);
    font-size: 0.75em;
    text-align: center;
    border-top: 5px solid var(--footer-border-color);
    padding: 0.5em;
    height: max-content;
}

footer a {
    color: var(--footer-fg-color);
}

footer a:hover {
    text-decoration: underline;
}

/* ---------------------------------------- */
/* Site Navigation */

#sitenav {
    font-family: var(--sans-serif-font);
    color: var(--sitenav-fg-color);
    background-color: var(--sitenav-bg-color);
    padding: 0.25em 0 0 0;
    /* width: fit-content; */
}

#sitenav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-top: 2px solid var(--sitenav-border-color);
}

#sitenav li {
    margin: 0;
    padding: 0;
}

#sitenav a {
    display: block;
    margin: 0 auto;
    padding: 0.25em 0.5em;
    color: var(--sitenav-link-fg-color);
    background-color: var(--sitenav-link-bg-color);
    text-decoration: none;
    border-bottom: 2px solid white;
}

#sitenav a:hover {
    color: var(--sitenav-link-hover-fg-color);
    background-color: var(--sitenav-link-hover-bg-color);
    text-decoration: none;
}

#sitenav a:active {
    color: var(--sitenav-link-active-fg-color);
    background-color: var(--sitenav-link-active-bg-color);
}


/* Previous/Next/Up Navigation */

#prev_next_nav {
    font-family: var(--sans-serif-font);
    margin: 1em 0;
    margin-bottom: 5em;
}

#prev_next_nav a,
#prev_next_nav a:visited {
    color: var(--prevnext-link-fg-color);
    background-color: var(--prevnext-link-bg-color);
    border: 1px solid var(--base-theme-color);
    text-decoration: none;
    box-shadow: 3px 3px var(--base-border-color);
    border-radius: 5px;
}

#prev_next_nav a:hover {
    text-decoration: none;
    color: var(--prevnext-link-hover-fg-color);
    background-color: var(--prevnext-link-hover-bg-color);
}

#prev_next_nav a:active {
    color: var(--prevnext-link-active-fg-color);
    background-color: var(--prevnext-link-active-bg-color);
}

.nav-next,
.nav-prev {
    padding: 0.25em;
}

.nav-next:after {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 125%;
    content: ' ︎⇨';
}
.nav-prev:before {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 125%;
    content: '⇦ ';
}

.nav-next-parent:after {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 120%;
    content: ' ︎⇧';
}

.nav-prev-parent:before {
    vertical-align: baseline;
    line-height: 0.5;
    font-size: 120%;
    content: '⇧ ';
}


/* .nav-prev-sibling {} */
/* .nav-next-sibling {} */


/* Login/logout Box */

#login-box,
#logout-box,
.login-name {
    font-family: var(--sans-serif-font);
    font-size: 85%;
}

#login-box button,
#logout-box button {
    font-size: 85%;
}


/* ---------------------------------------- */
/* Utility Classes */

.errorerror {
    display: block;
    background-color: orangered;
    padding: 3em;
    font-size: 1em;
    font-weight: bold;
    color: white;
}

.codehilite {
    display: block;
    color: var(--code-hilite-fg-color);
    background-color: var(--code-hilite-bg-color);
    padding: 0.5em;
    margin: 1em 0;
    border: 1px solid var(--code-hilite-border-color);
    border-radius: 10px;
    /* box-shadow: 3px 3px 10px 0px  lightgray; */
}

.codehilite pre,
.codehilite code {
    background-color: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

.codehilite pre {
    white-space: pre;
    overflow: auto;
}

/* Wrap around the codehilite div to provide a "click to copy" feature */

div.copy-snippet pre:after {
    float: right;
    padding: 0;
    margin: 0;
    margin-top: -1em;
    font-family: var(--sans-serif-font);
    font-size: 80%;
    content: 'click to copy';
    color: grey;
    background-color: inherit;
}

/* Toast for feedback when copying code snippets */
.feedback-toast {
    font-family: var(--sans-serif-font);
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #10b981;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.feedback-toast.toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* A class for pre.pseudocode, which we want to treat kind of like <pre>, but with */
/* a different typeface. <pre> maintains line breaks, which we want.  We can
 * also use other styling elements, **but Markdown does not work** */

pre.pseudocode {
    font-family: var(--sans-serif-font);
    background-color: lavender;
    padding: 1em;
    line-height: 1.6;
    font-weight: 500;
    font-size: 100%;
}

place-holder {
    /* Return to body text font, but italicized, and put guillemots around it */
    font-family: var(--serif-font);
    font-style: italic;
    color: darkblue;
    /* use before and after pseudoelements to add guillemots */
}
place-holder::before {
    content: "‹";
}
place-holder::after {
    content: "›";
}

.sansserif {
    font-family: var(--sans-serif-font);
}

div.textbox {
    /* font-family: var(--sans-serif-font); */
    font-size: 14px;
    font-weight: normal;
    /* font-weight:200; */
    line-height: 1.3;
    color: var(--textbox-fg-color);
    background-color: var(--textbox-bg-color);
}

div.textbox > h2 {
    margin-top: 0;
}

blockquote {
    width: 70%;
    padding: 0 0.5em;
    margin: 1em auto 1em 3em;;
    border-left: 5px solid var(--base-theme-light-color);
}

figure {
    display: block;
    width: 100%;
    margin: 1em 0;
}

figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

figcaption {
    margin: 0.5em 0;
    font-family: var(--sans-serif-font);
    text-align: center;
}

div.button {
    margin-top: 1em;
    margin-bottom: 1em;
}

div.button>a:link, div.button>a:visited {
    text-transform: capitalize;
    font-family: var(--sans-serif-font);
    font-size: 85%;
    border: 1px solid var(--button-link-border-color);
    width: fit-content;
    color: var(--button-link-fg-color);
    background-color: var(--button-link-bg-color);
    border-radius: 5px;
    padding: 0.5em;
}

div.button>a:hover {
    color: var(--button-link-hover-fg-color);
    background-color: var(--button-link-hover-bg-color);
}

div.button>a:active {
    color: var(--button-link-active-fg-color);
    background-color: var(--button-link-active-bg-color);
}


/* Buttons in lists */

#main_content > ul > li {
    padding: 0.5ex 0;
}

a.biglink, a.linkbutton {
    font-family: var(--sans-serif-font);
    color: var(--button-link-fg-color);
    background-color: var(--button-link-bg-color);
    border: 1px solid var(--button-link-border-color);
    border-radius: 5px;
    padding: 0.25em;
    margin-right: 0.5em;
    box-shadow: 3px 3px var(--base-shadow-color);
    display: inline-block;
}

a.external-biglink {
    color: var(--button-ext-link-fg-color);
    background-color: var(--button-ext-link-bg-color);
}
/*
a.biglink:visited {
    color: inherit;
}
*/

a.biglink:hover, a.linkbutton:hover, a.linkbutton:hover code {
    color: var(--button-link-hover-fg-color);
    background-color: var(--button-link-hover-bg-color);
}
/* biglink:focus { */
/*     color: white; */
/*     background-color: lightsteelblue; */
/* } */

a.biglink:active, a.linkbutton:active, a.linkbutton:active code {
    background-color: var(--button-link-active-bg-color);
    color: var(--button-link-active-fg-color);
}


/* Unreleased Material/Dates/Links */

span.unreleased-indicator {
    font-family: var(--sans-serif-font);
    font-size: 80%;
    color: var(--unreleased-warning-color);
}

p.unreleased-indicator {
    font-family: var(--sans-serif-font);
    font-size: 80%;
    color: var(--unreleased-warning-color);
}



/******************************
 Instructor Insights (AKA Animal Friends)
******************************/

/* Speech Bubble Insight */
.insight-section {
    /* background-color: #f7f7f7; */
    /* margin: 2em auto;
    padding: 0.25em;
    border-radius: 20px;
    border: 1px solid lightgray;
    width: 80%;
   */
}

    .insight-section ul li {
        list-style: none;
        /* margin-top: 10px; */
        margin-top: 0.5em;
        position: relative;
    }
    .insight-section ul {
        padding: 0 0.25em;
        margin: 0.75em 0;
    }

    .left-insight ul li,
    .right-insight ul li {
        list-style: disc inside none;
    }

    .left-insight ol li,
    .right-insight ol li {
        list-style: normal;
    }

    .left-insight ol ul li,
    .right-insight ol ul li {
        list-style: disc outside none;
        margin-left: 0.75em;
    }

    .left-insight .speaker,
    .right-insight .speaker {
        width: 70px;
        height: 70px;
        float: left;
        margin: 0px 5px;
        border-radius: 50%;
        object-position: center;
        object-fit: cover;
        border: none;
        box-shadow: 2px 2px 2px var(--base-shadow-color);
    }

    .right-insight .speaker {
        float: right;
    }

    .left-insight,
    .right-insight {
        overflow: hidden;
        position: relative;
    }

    .left-insight .speechbubble,
    .right-insight .speechbubble {
        background-color: var(--left-insight-bg);
        padding: 10px;
        color: var(--insight-fg-color);
        border-radius: 5px;
        float: left;
        width: 60%;
        /* margin-bottom: 0.25em; */
        margin-left: 2px;
    }

    .left-insight .speechbubble p:last-child,
    .right-insight .speechbubble p:last-child {
        padding: 0;
        margin: 0;
    }

    .right-insight .speechbubble {
        float: right;
        background-color: var(--right-insight-bg);
        color: var(--right-insight-fg);
        margin-right: 2px;
        margin-left: 0px;
    }

    .right-insight .speechbubble a:link {
        color: var(--right-insight-link);
    }

    .left-insight:before {
        content: " ";
        position: absolute;
        top: 0px;
        left: 65px;
        bottom: 150px;
        border: 15px solid transparent;
        border-top-color: var(--left-insight-bg);
    }

    .right-insight:before {
        content: " ";
        position: absolute;
        top: 0px;
        right: 65px;
        bottom: 150px;
        border: 15px solid transparent;
        border-top-color: var(--right-insight-bg);
    }

    .speechbubble {
        box-shadow: lightgray 3px 3px 10px 0px;
        min-height: 70px;
        margin-bottom: 2ex;
    }


    /* .insight-sections near other components */

    table + div.insight-section,
    p + div.insight-section {
        margin-top: 2em;
    }


    /* ---------------------------------------- */
    /* Tables */

    table {
        border-top: 2px solid var(--base-text-color);
        border-bottom: 2px solid var(--base-text-color);
        max-width: 90%;
        margin: 0.5em auto;
    }

    thead {
        border-bottom: 1px solid var(--base-text-color);
        font-weight: bold;
    }

    td, th {
        padding: 0.5em;
        vertical-align: top;
    }

    .no-rules,
    .no-rules table,
    .no-rules table thead {
        border: none;
    }

    .no-thead table thead {
        border: none;
        display: none;
    }

    .no-indent table {
        margin: 1em;
    }

    .tighter table td,
    .tighter table th,
    table.tighter td,
    table.tighter th {
        /* table row sizes are dependent on size of content */
        margin: 0.5em 0;
        padding: 0.25em;
    }

    .boxy table {
        border: 1px solid var(--base-border-color);
        border-collapse: collapse;
    }

    .boxy table td,
    .boxy table th {
        border-right: 1px solid var(--base-border-color);
        border-bottom: 1px solid var(--base-border-color);
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .boxy table th {
        background-color: var(--box-bg-color);
    }

    .boxy tr:last-child td {
        border-bottom: none;
    }

    .boxy td:last-child, th:last-child {
        border-right: none;
    }

    table.schedule {
        width: 100%;
    }

    table.schedule tr>th {
        width: 10%;
    }

    table.schedule tr>td {
        width: 40%;
    }

    table.schedule .goallist {
        font-family: var(--sans-serif-font);
        font-size: 80%;
        padding: 4px;
        color: inherit;
        background-color: #eeeeff55;
        border: 1px solid var(--base-border-color);
        border-radius: 5px;
        width: fit-content;
        margin: 0.25em 0;
    }

    /* Loosen up lists. */

    ul,
    ol {
        margin: 2ex 0 3ex 0; /* add some space above and below */
    }

    ul ol,
    ol ul,
    ul ul,
    ol ol {
        margin: 0; /* don't add vertical space for nested lists */
    }

    li {
        margin: 0.5ex 0; /* add some space above and below list items */
    }

    li p:last-child { /* trim bottom margin of paragraphs at end of list items */
        margin-bottom: 0;
    }

    ol ol {
        list-style-type: lower-alpha;
    }

    ol ol ol {
        list-style-type: lower-roman;
    }

    /* Definition lists */

    dl {
        margin: 1em 2em;
    }

    dt {
        font-family: var(--sans-serif-font);
        font-weight: bold;
    }

    dd {
        margin-left: 2em;
    }


    .highlight {
        background-color: var(--highlight-text-bg-color);
    }

    /* Special code to handle table for syllabus page. */
    #gradetable {
        /* border-top: 2px solid black; */
        /* border-bottom: 2px solid black; */
        width: 85%;
        margin: 1em 10%;
    }

    #gradetable table {
        padding: 0;
        margin: 0;
    }

    #gradetable tr,
    #gradetable td,
    #gradetable th {
        padding: 0;
        margin: 0;
        border: none;
    }

    #gradetable td,
    #gradetable th {
        padding: 0 2em;
    }

    #gradetable thead {
        border-bottom: 1px solid var(--base-text-color);
    }

    #gradetable th {
        font-weight: bold;
    }

    p.footnote {
        font-size: 85%;
        width: 50%;
        margin-left: 25ch;
    }

    .footnote-mark {
        margin-left: -5ch;
    }

    .admonition {
        width: 80%;
        font-size: 110%;
        margin: 1em auto;
        padding: 0.5em;
        border: 2px solid var(--warning-color);
    }

    .admonition h2,
    .admonition h3,
    .admonition h4,
    .admonition h5,
    .admonition h6 {
        color: var(--warning-color);
    }

    prereqs-warning {
        width: 80%;
        margin: 1em auto;
        padding: 0.5em;
        border: 2px solid var(--warning-color);
        border-radius: 5px;
        color: inherit;
        background-color: var(--warning-bg-color);
        box-shadow: lightgray 3px 3px 10px 0px;

    }

    prereqs-warning h2 {
        margin: 0 0 0.5em 0;
        padding: 0;
        color: var(--warning-color);
        border-bottom: 2px solid var(--warning-color);
    }


    .comedybox,
    .commentarybox,
    .deeper-dive,
    .headbox,
    .hints {
        background-color: var(--box-bg-color);
        color: var(--box-fg-color);
        /* width: 90%; */
        padding: 0.5em 1em 0.5em 1em;
        border: 1px solid var(--base-border-color);
        border-radius: 5px;
        box-shadow: lightgray 3px 3px 10px 0px;
        margin-bottom: 1em;
    }

    .admonition p:last-of-type,
    .comedybox p:last-of-type,
    .commentarybox p:last-of-type,
    .deeper-dive p:last-of-type,
    .headbox p:last-of-type,
    .hints p:last-of-type {
        margin-bottom: 0;
    }

    /* Basic set up for headers inside our boxen. */
    .admonition h2,
    .admonition h3,
    .admonition h4,
    .admonition h5,
    .admonition h6,
    .comedybox h2,
    .comedybox h3,
    .comedybox h4,
    .comedybox h5,
    .comedybox h6,
    .commentarybox h2,
    .commentarybox h3,
    .commentarybox h4,
    .commentarybox h5,
    .commentarybox h6,
    .deeper-dive h2,
    .deeper-dive h3,
    .deeper-dive h4,
    .deeper-dive h5,
    .deeper-dive h6,
    .headbox h2,
    .headbox h3,
    .headbox h4,
    .headbox h5,
    .headbox h6,
    .hints h2,
    .hints h3,
    .hints h4,
    .hints h5,
    .hints h6 {
        font-size: 110%;
        font-weight: bold;
        border: none;
        margin: 0;
        padding: 0;
    }

    .deeper-dive::before {
        content: url("../images/avatars/rabbithead.png");
        transform: scale(0.5);
        /* height: 50px; */
        /* width: 5%; */
        /* max-height: 5%; */
        /* max-width: 50px; */
        /* border: 6px double goldenrod; */
        /* height: 50px; */
        border: 6px double var(--deeper-dive-border-color);
        margin: -2em -2em -2.5em -2.5em;
        color: var(--deeper-dive-fg-color);
        background-color: var(--deeper-dive-bg-color);
        /* object-position: center; */
        /* overflow: hidden; */
        /* object-fit: scale-down; */
        border-radius: 50%;
        box-shadow: 2px 2px 2px #ccc;
        float: right;
    }

    .hints {
        font-family: var(--sans-serif-font);
        font-size: 90%;
        color: var(--hints-fg-color);
        background-color: var(--hints-bg-color);
        border-color: var(--hints-border-color);
        border-radius: 10px;
    }

    .headbox {
        padding-top: 0;
    }

    .headbox > h2:first-child,
    .headbox > h3:first-child,
    .headbox > h4:first-child {
        width: full;
        margin: 0 -1em 0.5em -1em;
        padding: 0.25em 1em;
        background-color: var(--headbox-header-bg-color);
        color: var(--headbox-header-fg-color);
        border-bottom: 5px solid var(--headbox-header-border-color);
        border-radius: 5px 5px 0px 0px;
    }

    .headbox > h2:first-child code,
    .headbox > h3:first-child code,
    .headbox > h4:first-child code,
    .headbox > h5:first-child code,
    .headbox > h6:first-child code,
    .headbox > h2:first-child pre,
    .headbox > h3:first-child pre,
    .headbox > h4:first-child pre,
    .headbox > h5:first-child pre,
    .headbox > h6:first-child pre {
        background-color: var(--code-bg-dark-color);;
        color: white;
    }

    .pullout {
        font-size: 85%;
        border-top: 2px solid var(--base-border-color);
        border-bottom: 2px solid var(--base-border-color);
        float: none;
    }

    .pullout.headbox,
    .pullout.deeper-dive,
    .pullout.commentarybox,
    .pullout.comedybox,
    .pullout.hints {
        margin-top: 0;
    }

    .pullout .kbkey,
    .pullout .keyboardkey,
    .pullout .app-menu-example {
        padding: 0 2px 0 2px;
        font-size: 85%;
    }

    .to-complete-page {
        clear: both;
    }

    .to-complete-page .question {
        background-color: var(--question-bg-color);
        margin: 6em 0;
        width: 100%;
        border: 2px solid var(--base-theme-color);
    }

    .quoted-content {
        display: block;
        width: 60%;
        margin: 2em auto;
        padding: 1em;
        border: 1px solid var(--box-border-color);
        border-radius: 5px;
        color: var(--box-fg-color);
        background-color: var(--box-bg-color);
        box-shadow: var(--base-shadow-color) 3px 3px 10px 0px;
    }

    .pictureframe {
        padding: 2px;
        border: 3px solid black;
        border-radius: 10px;
        width: 80%;
        margin: 1em auto 1em 15%;
    }

    .center {
        width: fit-content;
        margin: 0 auto;
    }


    /* Regular YouTube Videos */

    iframe.youtubevideo {
        display: block;
        /* Height and width from tinkering around.  In 4:3 ratio as that seems to be
   what YouTube is using for preview frames. */
        height: 375px;
        width: 500px;
        margin: 0.5em auto;
    }

    /* ------------------------------------------------------------
Notes on usage.

A `columnset` is a _pair_ of blocks containing written material.

<div class="columnset" markdown=1>
<div class="leftcolumn" markdown=1>
</div> <!-- end of left column -->
<div class="rightcolumn" markdown=1>
</div> <!-- end of right column -->
</div> <!-- end of columnset -->

   */

    /* .columnset { */
    /*     float: left; */
    /*     width: 100%; */
    /*     margin: 2em 0; */
    /*     font-weight: normal; */
    /* } */

    .columnset {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: [colstart coltop] 1fr [colend colbottom];
        grid-template-areas:
            "colleft"
            "colright";
        grid-gap: 0;
    }

    .leftcolumn {
        grid-row: auto;
        /* grid-column-start: colleft; */
        /* grid-row-end: colleft; */
        /* border: 1px solid green; */
    }

    .rightcolumn {
        grid-row: auto;
        /* grid-row-start: colstart; */
        /* grid-column-start: colleft; */
        /* grid-row-end: colleft; */
        /* border: 1px solid red; */
    }



    .columnset .codehilite pre,
    .columnset pre.pseudocode {
        /* , .columnset .codehilite pre code */
        /* font-size: 90%; */
        overflow: auto;
    }

    /* Make all headers the same size inside columns. */
    .columnset h1,
    .columnset h2,
    .columnset h3,
    .columnset h4,
    .columnset h5 {
        margin-top: 0;
        padding-top: 0;
        background-color: transparent;
        font-size: 100%;
        border: none;
    }

    .columnset .insight-section {
        margin-top: 0;
    }

    .columnset img.whiteboard {
        /* margin: 0; */
        /* padding: 0; */
        /* width: ; */
        /* max-width: 90%; */
    }


    /* End of column layout. */

/* Exams/Quizzes */

.partref {
    font-family: var(--sans-serif-font);
    font-size: 110%;
}

.question-number {
    /* little bit of top margin */
    margin-top: 0.5em;
}
.question-points {
    /* italic, float right, in a box with rounded corners and a lighter colored background */
    font-style: italic;
    float: right;
    border: 1px solid var(--base-theme-color);
    border-radius: 5px;
    padding: 0.2em 0.5em;
    background-color: var(--base-theme-lighter-color);
}

.question button.disabled[type=submit],
.question input.disabled[type=submit],
.question button.disabled[type=submit]:hover,
.question input.disabled[type=submit]:hover {
    background-color: darkgray;
    color: white;
    pointer-events: none;
}

/* Add some spacing between feedback and next question */
.feedback-base, .feedback-model {
    margin-bottom: 1em;
}
/* Make feedback scores more prominent and aligned to the right */
.feedback-score {
    display: block;
    font-size: 1.2em;
    /* margin-bottom: 0.5em; */
    /* box around score */
    border: 2px solid;
    border-radius: 5px;
    padding: 0.2em 0.5em;
    /* align to right using margin-left */
    margin: 0.25em 0 0.25em auto;
    /* width based on content */
    width: max-content;
}
/* Make feedback dings a bit smaller */
.feedback-dings {
    font-size: 0.9em;
}
/* Make gap between li elements in feedback dings smaller */
.feedback-dings li {
    margin-bottom: 0.2em;
}
/* Make the response divs more visually distinct - roundd corners and light, just slightly magenta background */
.feedback-response {
    border: 1px solid var(--base-theme-color);
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 0.5em;
    margin-top: 0.75em;
}


    /* Fake small caps */
    .smallcaps {
        font-size: 85%;
    }

    div.excitement {
        max-width: 90%;
        margin: 0.5em auto;
        padding: 2em;
        border: 1px solid purple;
        background:
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
            radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
            linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
        background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
        background-color: #840b2a;
        border-radius: 2%;
    }

    .excitement img {
        width: 80%;
        border: 2px solid ghostwhite;
        border-radius: 50%;
    }

    .excitement p{
        text-align: center;
        font-size: 200%;
        font-family: var(--sans-serif-font);
        width: 100%;
        margin: 0;
        padding: 0.75em;
        text-shadow: #fff 0px 0px 4px;
    }


    /* ------------------------------------------------------------ */
    /* Questions */

    div.question {
        display: block;
        margin: 0.5em auto;
        background-color: var(--question-bg-color);
        color: var(--question-fg-color);
        max-width: 90%;
        padding: 1em;
        border: 1px solid var(--question-border-color);
        border-radius: 5px;
    }

    .to-complete-page .question {
        width: 100%;
    }

    .leftcolumn>div.question,
    .rightcolumn>div.question {
        margin-top: 0.25em;
        width: 100%;
    }

    .question h2,
    .question h3,
    .question h4,
    .question h5 {
        font-size: 110%;
        border: none;
        margin: 0;
        padding: 0;
    }

    .question h3 {
        margin-bottom: 1ex;
    }


    .question form > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .question form > ul > li {
        margin: 0;
        margin-bottom: 0.75em;
        padding: 0;
    }

    .question ul+p,
    .question textarea+p,
    .question input+p,
    .range-question+p {
        margin-top: 2ex;
    }

    .question ul+h3,
    .question textarea+h3,
    .question input+h3,
    .range-question+h3 {
        margin-top: 3ex;
    }


    /* Labels */

    .question label {
        display: inline-block;
        padding: 0;
        margin: 0;
        margin-left: 2em;
        max-width: 80%;
    }


    /* -------------------- */
    /* Input types */

    .question textarea,
    .question input[type=textarea] {
        appearance: none;
        width: 100%;
        min-height: 5em;
        border: 1px solid var(--question-input-border-color);
        color: var(--question-input-fg-color);
        background-color: var(--question-input-bg-color);
        margin: 0;
        padding: 0;
        resize: vertical;
        overflow: auto;
        font-family: var(--monospace-font);
    }

    .question input[type=radio],
    .question input[type=checkbox] {
        display: inline-block;
        appearance: none;
        height: 1rem;
        width: 1rem;
        border: 1px solid var(--question-input-border-color);
        color: var(--question-input-fg-color);
        background-color: var(--question-input-bg-color);
        transition: 0.2s all linear;
        vertical-align: top;
        margin-top: 0.667ex;
        padding: 0;
    }

    .question form input[type=radio] {
        border-radius: 50%;
    }

    .question input[type=radio]:checked {
        color: var(--question-input-bg-color);
        background-color: var(--question-input-bg-color);
        /* border: 4px solid var(--question-input-border-color); */
        border: 4px solid var(--base-theme-color);
    }

    .question input[type=checkbox]::before {
        position: relative;
        color: var(--question-input-bg-color);
        content: '✘';
        right: -2px;
        top: -6px;
        visibility: hidden;
    }
    .question input[type=checkbox]:checked,
    .question input[type=checkbox]:checked::before {
        visibility: visible;
    }

    .question input[type=checkbox]:checked {
        background-color: var(--base-theme-color);
    }

    .range-question {
        margin-top: 1em;
        font-family: var(--sans-serif-font);
    }

    .range-question input[type=range] {
        appearance: system;
        padding: 0;
        margin: 0 1em;
        vertical-align: text-top;

    }


    /* -------------------- */
    /* Submit buttons. */

    .question button[type=submit],
    .question input[type=submit] {
        display: block;
        /* clear: both; */
        border: 2px solid var(--question-button-border-color);
        color: var(--question-button-fg-color);
        background-color: var(--question-button-bg-color);
        margin: 0.5em 0 0 auto;
        font-family: var(--sans-serif-font);
    }


    .question button[type=submit]:hover,
    .question input[type=submit]:hover {
        background-color: var(--question-button-bg-hover-color);
        color: var(--question-button-fg-hover-color);
    }

    .question button[type=submit]:active,
    .question input[type=submit]:active {
        background-color: var(--question-button-bg-active-color);
        color: var(--question-button-fg-active-color);
    }

    /* End submit buttons.
    /* -------------------- */

    /* File-upload questions (file-upload.md §4.5): the picker at the
       quiet end beside the textarea rule; the status line in the
       small muted register; Download as the quiet action button the
       asks and groups panels share. */

    .question input[type=file] {
        font-family: var(--sans-serif-font);
        font-size: 90%;
        color: var(--question-fg-color);
        max-width: 100%;
        margin: 0.3em 0;
    }

    .question .file-upload-status {
        font-family: var(--sans-serif-font);
        font-size: 85%;
        color: var(--ask-muted-fg-color);
        margin: 0.2em 0 0.5em;
    }

    .question .file-upload-hint {
        font-size: 90%;
    }

    .question button.file-action {
        font-family: var(--sans-serif-font);
        font-size: 85%;
        color: var(--action-button-fg-color);
        background-color: var(--action-button-bg-color);
        border: 1px solid var(--action-button-border-color);
        border-radius: 3px;
        padding: 0.15em 0.7em;
        margin: 0.1em 0;
        cursor: pointer;
    }

    .question button.file-action:hover {
        background-color: var(--action-button-hover-bg-color);
        color: var(--action-button-hover-fg-color);
    }

    .question button.file-action:active {
        background-color: var(--action-button-active-bg-color);
        color: var(--action-button-fg-color);
    }

    /* Show answers button */

    .question button.instructor-button {
        /* clear: both; */
        border: 2px solid var(--question-button-border-color);
        color: var(--base-text-color);
        background-color: var(--base-theme-light-color);
        margin: 0.5em 1em 0 0;
        font-family: var(--sans-serif-font);
        /* smaller than usual */
        font-size: 80%;
    }

    .question button.instructor-button:hover {
        border-color: var(--base-theme-color);
    }

    .question button.instructor-button:active {
        background-color: var(--base-theme-color);
        color: var(--question-button-fg-active-color);
    }

    /* End question.
    /* ------------------------------------------------------------ */

    div.instructor-controls {
        margin: 2em auto;
        /* background-color: #fafafa; */
        background-color: var(--base-theme-light-color);
        color: inherit;
        width: 80%;
        padding: 1em;
        border: 1px solid var(--base-border-color);
        border-radius: 5px;
        box-shadow: var(--base-shadow-color) 3px 3px 10px 0px;
    }

    .instructor-controls h3 {
        margin: 0;
        padding: 0;
    }

    /* AI Answer Tooltip */

    .answer-container {
        position: relative;
        display: block;
    }

    .ai-answer-tooltip {
        display: none;
        position: absolute;
        color: var(--tooltip-fg-color);
        background-color: var(--tooltip-bg-color);
        /* was rgba(249, 249, 249, 0.94 */
        border: 1px solid var(--base-border-color);
        border-radius: 4px;
        padding: 10px;
        box-shadow: 0 2px 8px var(--base-shadow-color);
        z-index: 1000;
        max-width: 600px;
        min-width: 480px;
        left: 10%;
        margin-left: 10px;
        top: 0;
}

    .answer-container:hover .ai-answer-tooltip {
        display: block;
    }


    /* These are dynamically overridden by JavaScript depending on logged-in status. */

    .when-logged-in {
        display: none;
    }

    .when-logged-out {
        display: none;
    }

    .appbutton,
    .app-menu-example,
    .kbkey,
    .keyboardkey {
        font-family: var(--sans-serif-font);
        font-size: 95%;
        font-weight: semibold;
        padding: 0 3px 0px 3px;
        margin: auto;
        border: 1px solid var(--example-border-color);
        border-radius: 5px;
        color: var(--example-fg-color);
        background-color: var(--example-bg-color);
    }

    .kbkey,
    .keyboardkey {
        padding: 2px;
        border-radius: 3px;
    }

    .nudger {
        margin-left: 2em;
    }

    .nudgel {
        margin-left: -2em;
    }

    /* Things pulled from other files; maybe to be incorporated.  */


    /* ============================================================ */
    /* ----- Changes for a Larger Canvas */

    @media (min-width: 720px) {
        .container {
            display: grid;
            grid-template-columns: [start sidebar] auto [main] 3fr;
            grid-template-rows: [start masthead] 5rem [main] auto [footer end] 3em;
            /* grid-template-columns: 1fr 1fr; */
            /* grid-template-rows: auto auto auto 1fr auto; */
            /* grid-gap: 10px; */
            grid-template-areas:
                "masthead masthead"
                "sitenav main"
                "footer footer";
            max-width: 1200px;
            /* margin: 0 auto; */
            margin: 0 auto;
        }

        header {
            grid-row-start: masthead;
            grid-column-start: masthead;
            grid-row-end: masthead;
            grid-column-end: masthead;
        }

        nav {
            /* grid-row: 3; */
        }

        main {
            grid-row-start: main;
            grid-column-start: main;
            grid-column-end: main;
            /* grid-row: 4; */
        }

        #sitenav {
            grid-row-start: sitenav;
            grid-column-start: sitenav;
            grid-column-end: sitenav;
            /* grid-row: 2; */
            border-right: 1px solid #333;
            /* margin-right: 2em; */
        }

        footer {
            grid-row-start: footer;
            grid-column-start: footer;
            grid-column-end: footer;
        }

        #sitenav-toggle:checked ~ .sitenav-content {
            max-height: none;
        }

        .toggle-sitenav ~ .sitenav-content {
            max-height: none;
        }

        .toggle-text {
            display: none;
        }
        .sitenav-content {
            display: contents;
        }

        /* ---------------------------------------- */
        /* Adjust site navigation. */

        #sitenav {
            padding: 0.25em 0 0 0;
        }

        #sitenav ul {
            border: none;
        }

        #sitenav li {
        }

        #sitenav a {
            display: block;
            margin: 0;
            padding: 0.25em 0.5em;
            text-decoration: none;
            border: none;
        }

        #sitenav a:hover {
            text-decoration: none;
        }

        #sitenav a:active {
        }

        /* End site navigation styles. */


        /* ---------------------------------------- */
        /* Adjust headers */

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-left: 0;
            padding-left: 0;
            margin-right: 0;
        }

        h2, h3 {
            margin-top: 1em;
        }

        h4, h5, h6 {
            margin-top: 0.5em;
        }

        h1 code,
        h2 code,
        h3 code,
        h4 code,
        h5 code {
            /* font-family: var(--monospace-font); */
            /* font-size: inherit; */
            /* color: inherit; */
            /* background-color: inherit; */
        }


        .codehilite,
        pre.pseudocode {
            margin: 2em auto;
            max-width: 718px;
        }

        /* Adjust our special boxes. */

        .headbox,
        .deeper-dive,
        .commentarybox,
        .comedybox,
        .question {
            display: block;
            width: 80%;
            margin: 2em auto;
            box-shadow: 0.25em 0.25em 0.5em var(--base-shadow-color);
        }

        div.question {
            margin: 3em auto;
        }

        .pullout.headbox,
        .pullout.deeper-dive,
        .pullout.commentarybox,
        .pullout.comedybox,
        .pullout.question {
            margin-top: 0;
        }

        .admonition h2,
        .admonition h3,
        .admonition h4,
        .admonition h5,
        .admonition h6,
        .comedybox h2,
        .comedybox h3,
        .comedybox h4,
        .comedybox h5,
        .comedybox h6,
        .commentarybox h2,
        .commentarybox h3,
        .commentarybox h4,
        .commentarybox h5,
        .commentarybox h6,
        .deeper-dive h2,
        .deeper-dive h3,
        .deeper-dive h4,
        .deeper-dive h5,
        .deeper-dive h6,
        .headbox h2,
        .headbox h3,
        .headbox h4,
        .headbox h5,
        .headbox h6,
        .hints h2,
        .hints h3,
        .hints h4,
        .hints h5,
        .hints h6 {
            margin: 0.5em 0 0.25em 0;
            padding: 0;
        }

        /* Strip top margin from header at top of box. */
        .admonition h2:first-child,
        .admonition h3:first-child,
        .admonition h4:first-child,
        .admonition h5:first-child,
        .admonition h6:first-child,
        .comedybox h2:first-child,
        .comedybox h3:first-child,
        .comedybox h4:first-child,
        .comedybox h5:first-child,
        .comedybox h6:first-child,
        .commentarybox h2:first-child,
        .commentarybox h3:first-child,
        .commentarybox h4:first-child,
        .commentarybox h5:first-child,
        .commentarybox h6:first-child,
        .deeper-dive h2:first-child,
        .deeper-dive h3:first-child,
        .deeper-dive h4:first-child,
        .deeper-dive h5:first-child,
        .deeper-dive h6:first-child,
        .headbox h2:first-child,
        .headbox h3:first-child,
        .headbox h4:first-child,
        .headbox h5:first-child,
        .headbox h6:first-child,
        .hints h2:first-child,
        .hints h3:first-child,
        .hints h4:first-child,
        .hints h5:first-child,
        .hints h6:first-child {
            margin-top: 0;
        }


        .deeper-dive::before {
            content: url("../images/avatars/rabbithead.png");
            transform: none;
            margin: -3em -3em 0.25em 0.25em;
            padding: 0;
            shape-outside: circle(100px);
        }

        .deeper-dive {
            /* compensate for the height of the rabbit */
            margin-top: 3em;
        }

        .pullout {
            width: 40%;
            margin-left: 1em;
            border: none;
            float: right;
        }


        .hints {
        }

        div.question {
            padding: 1em 3em;
            max-width: 100%;
        }

        img.whiteboard {
            display: block;
            width: 80%;
        }

        .columnset img.whiteboard {
            margin: 0;
            padding: 0;
            width: 100%;
        }


        iframe.youtubevideo {
            display: block;
            /* Height and width from tinkering around.  In 4:3 ratio
               as that seems to be what YouTube is using for preview frames. */
            height: 420px;
            width: 560px;
            margin: 1em auto;
        }

        figure {
            width: 90%;
            margin: 1em auto 1.5em auto;
        }

        figure img {
            max-width: 90%;
            margin: 0 auto;
        }


        /* Adjustments to our .excitement. */

        div.excitement {
            margin: 1em auto;
            padding: 8em;
            border-radius: 100%;
            box-shadow: 0.25em 0.25em 0.5em var(--base-shadow-color);
        }

        .excitement img {
            max-width: 98%;
        }

        .excitement p {
            text-shadow: 2px 2px 2px var(--base-shadow-color);
        }

    } /* End of adjustments for browser windows >= 720px. */


    @media (min-width: 1000px) {

        /* Column layout with larger window.  Note that right columns are cut off
           by the edge of the browser until the browser window is 1000px wide, so
           we make our adjustments here rather than in the 720px+ section. */

        .columnset {
            margin: 2em 0;
            display: grid;
            width: 100%;
            grid-template-columns: [colstart leftcol] 48% 4% [rightcol] 48% [colend];
        }

        .leftcolumn {
            grid-row: auto;
            grid-column: leftcol;
        }

        .rightcolumn {
            grid-row: auto;
            grid-column: rightcol;
        }

        .leftcolumn>iframe.youtubevideo,
        .rightcolumn>iframe.youtubevideo {
            height: 315px;
            width: 420px;
            margin: 0 auto 1em auto;
        }

        /* End of column layout */
    } /* End of adjustments for browser window 1000px. */


/* ------------------------------------------------------------ */
/* Asks: the questions panel (design-plans/asks.md; the polish
   round's visual-hierarchy pass).  Less is more, per the ruling:
   the hierarchy is spacing, indentation, and a few muted tones --
   no new design system.  Markup comes from js/asks.js; these
   classes are the contract between them. */

.askstaff-panel {
    background-color: var(--ask-panel-bg-color);
    border: 1px solid var(--ask-panel-border-color);
    border-radius: 5px;              /* sits like a question box */
    padding: 0.5em 1em 0.75em 1em;
    margin: 1.5em auto;
    max-width: 90%;
}

details.askstaff-panel > summary {
    cursor: pointer;
    font-family: var(--sans-serif-font);
    padding: 0.25em 0;
}

.askstaff-threads {
    list-style: none;                /* threads are cards, not bullets */
    margin: 0.5em 0;
    padding: 0;
}

.askstaff-thread {
    background-color: var(--ask-thread-bg-color);
    border: 1px solid var(--ask-thread-border-color);
    border-left: 3px solid var(--ask-thread-edge-color);
    border-radius: 3px;
    padding: 0.5em 0.8em;
    margin: 0.8em 0;
}

.askstaff-head {
    margin-bottom: 0.15em;
}

.askstaff-meta {
    color: var(--ask-muted-fg-color);
    font-size: 85%;
}

.askstaff-status {
    font-variant: small-caps;
    letter-spacing: 0.03em;
    font-size: 90%;
    color: var(--ask-muted-fg-color);
}

.askstaff-badge {
    font-family: var(--sans-serif-font);
    font-size: 75%;
    color: var(--feedback-incorrect-color);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.35em;
    vertical-align: 0.1em;
}

.askstaff-text p,
.askstaff-text pre {
    margin: 0.25em 0;
}

.askstaff-reply {
    margin: 0.4em 0 0.4em 1.5em;
    padding-left: 0.6em;
    border-left: 2px solid var(--ask-thread-border-color);
    font-size: 95%;
}

.askstaff-staff-reply {
    border-left: 3px solid var(--ask-staff-accent-color);
    background-color: var(--ask-staff-reply-bg-color);
    padding: 0.25em 0.5em 0.25em 0.6em;
    border-radius: 0 3px 3px 0;
}

.askstaff-staff-who {
    font-family: var(--sans-serif-font);
    font-weight: bold;
    font-size: 90%;
    color: var(--base-theme-dark-color);
}

.askstaff-controls {
    margin-top: 0.3em;
}

.askstaff-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 95%;
    color: var(--textbox-fg-color);
    background-color: var(--textbox-bg-color);
    border: 1px solid var(--ask-thread-border-color);
    border-radius: 3px;
    padding: 0.3em 0.5em;
    margin-bottom: 0.25em;
}

.askstaff-input:focus {
    border-color: var(--base-theme-light-color);
    outline: none;
}

/* The new-question zone reads as its own room: a hairline above it
   separates "the conversation" from "start another". */
.askstaff-askzone {
    margin-top: 0.9em;
    padding-top: 0.75em;
    border-top: 1px solid var(--ask-panel-border-color);
}

.askstaff-honesty {
    color: var(--ask-muted-fg-color);
    font-size: 85%;
    margin: 0.4em 0 0 0;
}

.askstaff-error {
    color: var(--warning-color, darkred);
    font-weight: bold;
}

/* Page-is-venue mode ("@askable open"): the page EXISTS to be asked
   on, so the panel drops the widget costume and reads as content. */
.askstaff-panel.askstaff-venue {
    background-color: inherit;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: 100%;
}

/* -------------------- */
/* Quiet action buttons: ONE control language for the interactive
   panels -- asks and groups together, by ruling ("the deal is
   symmetric").  The question SUBMIT button keeps its strong theme
   fill; these small verbs take a quieter cousin: pale theme wash,
   thin border, sans.  Restrained on purpose. */

.askstaff-panel button,
#groupboard button {
    font-family: var(--sans-serif-font);
    font-size: 85%;
    color: var(--action-button-fg-color);
    background-color: var(--action-button-bg-color);
    border: 1px solid var(--action-button-border-color);
    border-radius: 3px;
    padding: 0.15em 0.7em;
    margin: 0.1em 0;
    cursor: pointer;
}

.askstaff-panel button:hover,
#groupboard button:hover {
    background-color: var(--action-button-hover-bg-color);
    color: var(--action-button-hover-fg-color);
}

.askstaff-panel button:active,
#groupboard button:active {
    background-color: var(--action-button-active-bg-color);
    color: var(--action-button-fg-color);
}