/* Neutral surfaces and a brighter red, without changing the type or layout. */
:root {
  --paper: #f8f8f8;
  --white: #ffffff;
  --ink: #202124;
  --muted: #60646c;
  --red: #c2313d;
  --line: #d7d9dd;
  --light: #eceef0;
  --line-strong: #adb1b8;
  --red-soft: #f7e9eb;
  --chart-neutral: #9ca1a9;
}

body::before {
  background-image: none;
  opacity: 0;
}
::selection {
  background: #f1d1d5;
  color: var(--ink);
}
.site-header,
.site-header nav {
  background-color: var(--paper);
}
.text-link.underlined {
  border-bottom-color: var(--line-strong);
}
.button.outline:hover {
  background: var(--red-soft);
}
.closing .button:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.booking-note p,
.booking-note strong {
  color: var(--white);
}

/* Photo paper remains distinct from the surrounding page. */
.polaroid {
  background: var(--white);
  border-color: #e4e5e7;
  box-shadow: inset 0 1px 0 var(--white), 0 2px 3px #20212420, 0 12px 22px #2021242b;
}
.polaroid::after {
  background: none;
}
.polaroid-window {
  background: var(--white);
  box-shadow: 0 0 0 1px #20212414, inset 0 1px 3px #2021240d;
}
.polaroid-slot.is-selected .polaroid {
  box-shadow: inset 0 1px 0 var(--white), 0 4px 7px #20212424, 0 22px 32px #20212438;
}
.polaroid-slot:focus-visible .polaroid,
.polaroid-flip:focus-visible {
  outline-color: var(--white);
}

.model-flow-image-frame {
  background: transparent;
  border: 0;
}
.proof-result-image:hover {
  box-shadow: 0 7px 22px #20212420;
}
.proof-wipe input::-webkit-slider-runnable-track {
  background: var(--line-strong);
}
.proof-wipe input::-moz-range-track {
  background: var(--line-strong);
}
.proof-iteration-count span {
  border-color: #c2313d66;
}
.proof-iteration-count i {
  background: #c2313d66;
}
.proof-lightbox::backdrop {
  background: #202124eb;
}
.proof-demo-frame,
.video-placeholder {
  background: var(--light) !important;
}

/* Diagram and chart colors share the same neutral scale. */
.model-flow-node:not(.model-flow-transformer) {
  background: var(--white);
  border-color: var(--line-strong);
}
.model-data {
  background: var(--light);
}
.model-data-track {
  background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 3));
  border-color: var(--line);
}
.model-data-bar {
  background: var(--chart-neutral);
}
.model-data-row-training .model-data-bar {
  background: var(--red);
}
.model-data-row-evaluation .model-data-bar {
  background: var(--muted);
}
.model-data-tiles > span,
.model-data-legend i {
  background: var(--chart-neutral);
}
.model-data .model-data-seed {
  background: var(--red);
}
.model-data-dataset,
.model-data-dataset-counts,
.model-data-method {
  border-color: var(--line);
}

@media (max-width: 900px) {
  .site-header nav {
    box-shadow: 0 15px 20px #2021240d;
  }
}