@font-face {
  font-family: "Instrument Sans";
  src: url("../architecture-site/assets/fonts/instrument-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../architecture-site/assets/fonts/instrument-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../architecture-site/assets/fonts/instrument-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../architecture-site/assets/fonts/instrument-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body,
button {
  font-family: "Instrument Sans", "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

html,
body {
  overflow: hidden;
}

.plot-title {
  font-weight: 600;
}

.selected-key {
  position: relative;
  width: 20px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.selected-key::before,
.selected-key::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.selected-key::before {
  left: 1px;
}

.selected-key::after {
  right: 1px;
}

/* Match the research article canvas instead of introducing a white inset page. */
html,
body {
  background: #f2f2f0;
  color: #343834;
}

.pair-explorer {
  --surface: #f2f2f0;
  --ink: #343834;
  --muted: #747973;
  --line: #c5c9c4;
  --grid: #d9dcd7;
}

button {
  background: rgba(248, 248, 245, .52);
}

button:hover {
  background: rgba(250, 250, 247, .88);
}

.plot-wrap,
.distance-panel {
  background: transparent;
}

.selected-key::before,
.selected-key::after {
  background: #f2f2f0;
}

.distance-seg::before,
.distance-seg::after {
  border-color: #f2f2f0;
}

button[aria-pressed="true"],
.next-case {
  border-color: #e95f1c;
  background: #e95f1c;
  color: #fff;
  box-shadow: 0 3px 10px rgba(233, 95, 28, .18);
}

.next-case:hover {
  border-color: #cf5018;
  background: #cf5018;
  box-shadow: 0 6px 16px rgba(207, 80, 24, .24);
}

button:focus-visible {
  outline-color: #e95f1c;
}

.ratio {
  color: #e95f1c;
}