@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/thinking/refrigeration/lato-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/thinking/refrigeration/lato-900.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/thinking/refrigeration/poppins-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/thinking/refrigeration/poppins-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/thinking/refrigeration/poppins-600.woff2) format('woff2');
}

.refrigeration-figure {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, calc(100vw - 2 * var(--page-gutter)));
  margin: 56px 0;
}
.refrigeration-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font: 12px/1.8 var(--font-mono), monospace;
  color: #a8bfca;
}
.refrigeration-actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.refrigeration-actions button {
  border: 1px solid #476573;
  padding: 8px 12px;
  background: #091d28;
  color: #95d9e8;
  cursor: pointer;
}
.refrigeration-actions button:hover { border-color: #81deed; }
.refrigeration-viewport { width: 100%; overflow: auto; border: 1px solid #284654; box-sizing: content-box; }
.refrigeration-viewport:focus-visible, .refrigeration-actions button:focus-visible { outline: 2px solid #81deed; outline-offset: 4px; }
.refrigeration-stage { width: 1600px; height: 2220px; transform-origin: top left; overflow-wrap: normal; }
.blog-article .refrigeration-stage a { text-decoration: none; }
.blog-article .refrigeration-stage a:hover { text-decoration: underline; }