:root {
    /* https://www.cmu.edu/brand/brand-guidelines/visual-identity/colors.html */
    --cmu-red: #c41230;
    --cmu-black: #000000;
    --cmu-charcoal: #333333;
    --cmu-darkgray: #6D6E71;
    --cmu-lightgray: #E0E0E0;
    --cmu-rose: #EF3A47;
    --cmu-gold: #FDB515;
    --cmu-green: #009647;
    --cmu-teal: #008F91;
    --cmu-blue: #043673;
    --cmu-skyblue: #007BC0;
    --cmu-tan: #BCB49E;
    --cmu-beige: #E4DAC4;
    --cmu-tealgreen: #1F4C4C;
    --cmu-lightgreen: #719F94;
    --cmu-navy: #182C48;
    --cmu-crimson: #941120;

    --scs-red: #bb0000;
    --scs-darkgray: #666666;

    --cmu-font-family: "Open Sans", Helvetica, Arial, sans-serif;
    --cmu-font-family-serif: "Source Serif Pro", Times, serif;

    --bg-color: var(--cmu-lightgray);
    --ngram-color: var(--cmu-red);

    --train-color: var(--cmu-skyblue);
    --test-color: var(--cmu-blue);
    --model-color: var(--cmu-green);
    --error-color: var(--cmu-red);
}

html {
    background-color: var(--bg-color);
    border-width: 1px;
    font-family: var(--cmu-font-family);
    color: var(--cmu-charcoal);
}

h1 {
    font-size: 3em;
    font-weight: normal;
}

h2 {
    font-size: 1.75em;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* :focus {
    border: 1px solid var(--cmu-red);
} */

.title {
    text-align: center;
    /* font-weight: normal; */
}

.grid-main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.textbox-row {
    display: flex;
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-row{
    display: flex;
    gap: 20px;
}

.flex-col{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flex-col-center-vert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.flex-col-center-horiz {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.flex-row-center-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.flex-col-center-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.spacer {
    flex-grow: 1;
}

.btn {
    margin: 0em;
    height: 3em;
    width: 100%;
    max-width: 40vw;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    background-color: var(--bg-color);
    color: var(--cmu-darkgray);
    border: 1px solid var(--cmu-darkgray);
    border-radius: 0.5em;
}

.btn:hover {
    background-color: var(--cmu-darkgray);
    color: white;
}

.btn:active {
    transform: translateY(4px);
  }

.btn-strong {
    background-color: var(--bg-color);
    color: var(--cmu-red);
    border: 1px solid var(--cmu-red);
}

.btn-strong:hover {
    background-color: var(--cmu-red);
    color: white;
}

.btn-circle {
    margin: 0.1em;
    font-size: 1.5em;
    width: 1em;
    height: 1em;
    font-family: monospace;
    padding: 0px;
    line-height: 0px;
    background-color: var(--bg-color);
    color: var(--cmu-darkgray);
    border: 1px solid var(--cmu-darkgray);
    border-radius: 0.5em;
}

.btn-circle:hover {
    background-color: var(--cmu-darkgray);
    color: white;
}

.height-btn {
    height: 3em;
}

.ctrl-text {
    font-size: 2em;
}

.plot-params {
    display: flex;
    /* align-items: center; */
    /* align-items: stretch; */
    /* align-items: flex-start; */
    gap: 20px;
}

.plot-params-vertical {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* align-items: stretch; */
    /* align-items: flex-start; */
    gap: 20px;
}

plot-component {
    /* max-height: 100vw; */
    /* min-width: 60vw; */
    background-color: white;
    position: relative;
    display: flex;
}

#regression-plot {
    min-height: 60vh;
    flex: 1 1 100vw;
}

#blind-plot {
    min-height: 60vh;
    flex: 1 1 100vw; 
    background-image: repeating-linear-gradient(45deg, var(--cmu-lightgray), white, var(--cmu-lightgray) 15px);
}

#optimization-plot {
    flex-grow: 1;
    flex-basis: 0;
}


.plot-overlay {
    position: absolute;
    pointer-events: none;
}

.data-param-table {
    /* Row to contain columns */
    display: flex;
    /* flex-wrap: wrap;
    justify-content: flex-start; */
    justify-content: center;
}

.param-table {
    /* Row to contain columns */
    display: flex;
    /* align-items: stretch; */
    justify-content: center;
    flex: 1 1;
    gap: 1em;
}

.data-cell {
    color: var(--train-color);
    background-color: white;
    text-align: center;
    font-size: 0.75em;
    padding: 5px;
    border-color: var(--cmu-lightgray);
    border-width: 3px;
    border-style: solid;
}

.header-cell {
    background-color: var(--train-color);
    color: white;
    font-weight: bold;
    writing-mode: sideways-lr;
    vertical-align: middle;
    text-align: center;
    min-height: 200px;
    max-height: 200px;
    /* Use flex to center innerHTML even if no children */
    display: flex;
    align-items: center;
    justify-content: center;
}

.spacer-header-cell {
    color: unset;
    background-color: unset;
    writing-mode: unset;
}

.work-header-cell {
    color: unset;
    background-color: unset;
    writing-mode: unset;
    /* Flex vertical align text bottom */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0px 1em 10px 1em;
}

.pred-header-cell {
    background-color: var(--model-color);
}

.error-header-cell {
    background-color: var(--error-color);
}

.param-text {
    color: var(--model-color);
}

.data-text {
    color: var(--train-color);
}

.work-cell {
    color: unset;
}

.pred-cell {
    color: var(--model-color);
}

.error-cell {
    color: var(--error-color);
}

.mse-label-cell {
    background-color: var(--error-color);
    color: white;
    font-weight: bold;
    vertical-align:middle;
    text-align:center;
}

.bias-data-cell {
    background-color: var(--cmu-lightgray);
    color: var(--cmu-lightgray);
}

.param-cell {
    color: var(--model-color);
    text-align: center;
    font-size: 0.75em;
    padding: 5px;
}

.param-container {
    font-size: 2em;
    display: grid;
    grid-template-columns: 1fr 10fr 3fr;
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.param-container-vertical {
    font-size: 2em;
    width: 3em;
    height: 30vh;
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-left: 10px;
    margin-right: 10px;
}

.data-param-col {
    font-size: 2em;
    width: 2.5em;
    /* height: 70vh; */
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.param-col {
    width: 2.5em;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* .spacer-col {
    width: 1.5em;
} */

.work-col {
    flex-grow: 0;
    flex-shrink: 1;
    width: unset
}

.pred-col {
    width: 3em;
}

.error-col {
    width: 3em;
}

.sqerr-col {
    width: 4em;
}

.param-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: #d3d3d3;
    outline: none;
    border-radius: 0.5em;
}

.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2em;
    height: 100%;
    background: var(--model-color);
    cursor: pointer;
    border-radius: 0.5em;
    /* box-shadow: 2em 0 0 limegreen; */
    /* transform: translateX(2em); */
}

.param-slider::-moz-range-thumb {
    width: 2em;
    height: 100%;
    background: var(--model-color);
    cursor: pointer;
    border-radius: 0.5em;
    border: none;
}

.param-slider-vertical {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    flex: 1 1 auto;
    background: #d3d3d3;
    outline: none;
    border-radius: 0.5em;
    writing-mode: vertical-lr;
    touch-action: none;
}

.param-slider-vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 2em;
    width: 100%;
    background: var(--model-color);
    cursor: pointer;
    border-radius: 0.5em;
}

.param-slider-vertical::-moz-range-thumb {
    height: 2em;
    width: 100%;
    background: var(--model-color);
    cursor: pointer;
    border-radius: 0.5em;
    border: none;
}

.slider-wrapper-vertical {
    flex: 1 1 auto;
    display: flex;
    margin: 0 15px;
}

.wiggle-slider {
    /* Assume slider is also a param-slider */
    background: none;
    outline: none;
    animation: flash-wiggle 0.7s infinite alternate;
    animation-timing-function: ease-in-out;
    pointer-events: none;
}
@keyframes flash-wiggle {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 0.5;
    }
}

/* Wiggle slider that moves the thumb to the right */
.wiggle-slider::-webkit-slider-thumb {
    pointer-events: auto;
    transform: translateX(2em);
}
.wiggle-slider::-moz-range-thumb {
    pointer-events: auto;
    transform: translateX(2em);
    border: none;
}

.gradient-slider-decrease {
    /* Assume slider is also a param-slider */
    background: none;
    outline: none;
    pointer-events: none;
}


/* Add arrow to the left */
.gradient-slider-decrease::-webkit-slider-thumb {
    pointer-events: auto;
    transform: translate(-2em) scale(2, 1.5);
    
    /* Change the thumb to use a materials left arrow icon */
    background: url(https://fonts.gstatic.com/s/i/materialicons/arrow_back/v6/24px.svg) no-repeat center center;
}
.gradient-slider-decrease::-moz-range-thumb {
    pointer-events: auto;
    transform: translate(-2em) scale(2, 1.5);
    border: none;
    
    /* Change the thumb to use a materials left arrow icon */
    background: url(https://fonts.gstatic.com/s/i/materialicons/arrow_back/v6/24px.svg) no-repeat center center;
}

.gradient-slider-increase {
    /* Assume slider is also a param-slider */
    background: none;
    outline: none;
    pointer-events: none;
}

.gradient-slider-increase::-webkit-slider-thumb {
    pointer-events: auto;
    transform: translate(2em) scale(2, 1.5);
    
    /* Change the thumb to use a materials right arrow icon */
    background: url(https://fonts.gstatic.com/s/i/materialicons/arrow_forward/v6/24px.svg) no-repeat center center;
}
.gradient-slider-increase::-moz-range-thumb {
    pointer-events: auto;
    transform: translate(2em) scale(2, 1.5);
    border: none;
    
    /* Change the thumb to use a materials right arrow icon */
    background: url(https://fonts.gstatic.com/s/i/materialicons/arrow_forward/v6/24px.svg) no-repeat center center;
}

.gradient-slider-attention {
    animation: flash-gradient 0.7s infinite alternate;
    animation-timing-function: ease-in-out;
}

@keyframes slide-gradient {
    from {
        left: -0.5em;
    }
    to {
        left: 0.5em;
    }
}

@keyframes flash-gradient {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 0.9;
    }
}

.plot-line {
    stroke: var(--model-color);
    stroke-width: .2em;
}

.error-line {
    stroke: var(--error-color);
    stroke-width: .2em;
}

.error-text {
    font-size: 2em;
    /* fill: var(--error-color); */
    color: var(--error-color);
    margin: 1em;
    right: 0;
    top: 0;
}

#error-text {
    top: -0.5em;
}

#best-error-text {
    top: 1em;
}

.axis-label {
    font-size: 1.5em;
    color: var(--cmu-darkgray);
    margin: 1em;
}

.horizontal-axis-label {
    right: 0;
    bottom: 0;
}

.vertical-axis-label {
    left: 0;
    top: 0;
}

.plot-point circle {
    r: 0.4em;
}

#regression-plot .plot-point {
    fill: var(--train-color);
}

#regression-plot .predicted-point {
    stroke: var(--train-color);
    stroke-width: .1em;
    fill: none;
}

#optimization-plot .current-point {
    stroke: var(--model-color);
    stroke-width: .2em;
}

.grid-line {
    stroke: var(--cmu-lightgray);
}

.axis-line {
    stroke: var(--cmu-darkgray);
}

#optimization-plot .axis-line {
    stroke: var(--model-color);
}


.grid-text {
    fill: var(--cmu-darkgray);
}

.grid-text::selection {
    background: none;
}

.grid-text-shadow::selection {
    background: none;
}

.plot-svg {
    /* z-index: 2; */
    pointer-events: none;
    flex: 1 1 auto;
}

.axis-line {
    position: absolute;
    width: 90%;
    height: 0.25em;
    top: 90%;
    left: 5%;
    background-color: var(--cmu-darkgray);
}

.plot-item {
    position: absolute;
    background-color: var(--cmu-blue);
    color: white;
    border: 0.1em solid white;
    border-radius: 1.0em;
    font-size: 1em;
    text-align: center;
    width: 2em;
    height: 2em;
    user-select: none;
}

.plot-item:hover {
    background-color: var(--cmu-skyblue);
    cursor: pointer;
}

.plot-line {
    pointer-events: auto;
}

.plot-line:hover {
    cursor: pointer;
}

/* Media Landscape: Change flex direction */
@media (orientation: portrait) {
    .plot-params {
        flex-direction: column;
        align-items: stretch;
    }
    /* Stretch plot component vertically */
    plot-component {
        min-height: 75vw;
    }
    .param-container {
        font-size: 3em;
    }
}

.material-symbols-custom {
    vertical-align: top;
    font-size: 1.3em;
}

/* Page layout of the optimization demo (regression_optimization.html): plots
   on the first row, controls on the second. The Run / Step column sits under
   the slider / parameter-plot column, in the same proportions as the other
   regression pages' plot layout. */
.opt-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

@media (orientation: portrait) {
    .opt-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Control columns: optimization mode, optimizer, numeric inputs. One shared
   grid: row 1 holds the column titles, rows 2-5 the radio buttons and, level
   with them, the numeric inputs; the selected optimizer's update rule goes on
   the last row under the optimizer column. The columns are subgrids so their
   rows line up with each other. */
.opt-settings {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(5, auto) auto;
    justify-content: start;
    align-items: center;
    justify-items: start;
    column-gap: 90px;
    row-gap: 0.2em;
    margin-left: 20px;
}

/* Narrower windows: the three columns only fit with smaller gaps, and on
   small laptops (1366 px wide) with slightly smaller text as well */
@media (max-width: 1600px) {
    .opt-settings {
        column-gap: 50px;
        margin-left: 10px;
    }
}

@media (max-width: 1400px) {
    .opt-settings {
        font-size: 0.875em;
        column-gap: 40px;
    }
}

.opt-settings .opt-rule {
    grid-column: 2 / -1;
    grid-row: 6;
    margin-top: 1em;
}

/* A titled list of radio buttons (same .option-row style as the other demos):
   the title on row 1 and one radio button per row below it */
.opt-group {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 5;
    align-items: center;
    justify-items: start;
}

.opt-group-title {
    font-size: 1.5em;
    font-weight: bold;
    white-space: nowrap;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.5em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.option-row input[type="checkbox"],
.option-row input[type="radio"] {
    width: 1.25em;
    height: 1.25em;
    accent-color: var(--cmu-darkgray);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Labelled numeric inputs (learning rate / momentum / RMS decay / grid size):
   a two-column subgrid (left-aligned labels, then the inputs) whose rows are
   the radio rows, so each field sits level with a radio button. A hidden
   field (display: none) simply gives up its row. */
.opt-fields {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: auto auto;
    grid-row: 2 / span 4;
    grid-column: 3;
    align-items: center;
    justify-items: start;
    font-size: 1.5em;
}

.opt-field {
    display: contents;
}

/* Text box styled like the word-embeddings demo's learning-rate box */
.opt-field-text {
    margin: 0 0.3em 0 0;
}

.opt-value-input {
    box-sizing: content-box;
    margin: 0.1em;
    padding: 0.25em;
    height: 1em;
    font-size: 1em;
    width: 3.5em;
    text-align: right;
    color: var(--cmu-charcoal);
    border: 1px solid var(--cmu-darkgray);
    border-radius: 0.5em;
}

/* Run / Stop above Step, full width of their column like the other demos */
.opt-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Update rule of the selected optimizer, typeset by MathJax. Left-aligned so
   it lines up under the optimizer column rather than centered. */
.opt-rule {
    font-size: 1.25em;
    color: var(--cmu-darkgray);
}

.opt-rule mjx-container[display="true"] {
    text-align: left !important;
    margin: 0.5em 0 !important;
}

/* Tools for the (b, w1) parameter plot, overlaid on its top-right corner. They
   live outside the plot component so its drag / touch handling does not swallow
   their clicks. The wrapper takes the plot's place in the column. */
.plot-tools-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
}

.plot-tools {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 1em;
    color: var(--cmu-charcoal);
}

.plot-tool-btn {
    font-family: inherit;
    font-size: 1em;
    padding: 0.25em 0.6em;
    background-color: white;
    color: var(--cmu-darkgray);
    border: 1px solid var(--cmu-darkgray);
    border-radius: 0.5em;
    cursor: pointer;
}

.plot-tool-btn:hover {
    background-color: var(--cmu-darkgray);
    color: white;
}

.plot-tool-toggle {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.6em;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0.5em;
    cursor: pointer;
    user-select: none;
}

.plot-tool-toggle input[type="checkbox"] {
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--cmu-darkgray);
    cursor: pointer;
}

/* Error contour lines (ellipses of constant error) on the parameter plot */
#optimization-plot .error-contour {
    stroke: var(--cmu-darkgray);
    stroke-width: 1;
    stroke-opacity: 0.6;
}

/* Gradient step arrow on the (b, w1) optimization plot.
   Black to match the gradient arrows shown on the sliders. */
#optimization-plot .plot-vector {
    stroke: var(--cmu-black);
    stroke-width: 3;
}