/* One shared computer, using Victor's supplied reference without redrawing it.
   The viewport crops the original 854 × 768 image to x:88, y:81, w:752, h:624.
   Only the operating-system window is replaced; the hardware and glass stay intact. */
.reference-workstation .workstation-stage {
  padding: 40px 10px 16px;
  background-color: #f3f2eb;
  background-size: 20px 20px;
}
.computer-hardware {
  position: relative;
  width: 100%;
  aspect-ratio: 752 / 624;
  overflow: hidden;
  container-type: inline-size;
}
.computer-hardware > .computer-reference {
  position: absolute;
  width: 113.56383%;
  max-width: none;
  height: auto;
  left: -11.70213%;
  top: -12.98077%;
  display: block;
}
.computer-window {
  position: absolute;
  left: 24.06915%;
  top: 11.53846%;
  width: 53.19149%;
  height: 42.62821%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid #e4e2d7;
  background: #eceae2;
  box-shadow: inset -1px -1px #77796f, 1px 2px 2px #00132780;
  color: #09233a;
  font-family: Arial, sans-serif;
  line-height: 1.2;
}
.computer-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 10%;
  padding: 0 2.5%;
  color: white;
  background: #0b3cdb;
  font: 600 1.55cqw/1 var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.computer-window-controls { display: flex; gap: .35cqw; }
.computer-window-controls i {
  display: grid;
  place-items: center;
  width: 1.65cqw;
  height: 1.65cqw;
  color: #203052;
  background: #deded6;
  border: 1px outset #faf9ed;
  font: 600 1.4cqw/1 Arial, sans-serif;
}
.computer-window-content { flex: 1; min-height: 0; padding: 4% 3.5%; }
.computer-heading {
  display: block;
  font: 700 3.85cqw/1.1 Arial, sans-serif;
  letter-spacing: -.055em;
  color: #09233a;
}
.computer-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1cqw;
  border-top: 1px solid #c3c4bc;
  padding-top: 2cqw;
  margin-top: 2cqw;
}
.computer-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  height: 11.5cqw;
  border: 1px solid #c3c4bc;
  text-align: center;
  color: #142942;
  font: 600 1.15cqw/1.25 var(--mono);
}
.computer-app svg { width: 4.1cqw; height: 4.1cqw; color: #1149ef; }
.computer-progress {
  height: 1.6cqw;
  margin-top: 2.8cqw;
  border: 1px solid #bdbfb4;
  background: repeating-linear-gradient(90deg, transparent 0 2.5cqw, #c4c5bc 2.5cqw 2.7cqw);
}
.computer-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: 56%;
  background: repeating-linear-gradient(90deg, #164bea 0 2.5cqw, #e0e2de 2.5cqw 2.7cqw);
}
.computer-brand-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  text-align: center;
  background: #080d14;
  color: #f6efdf;
  padding: 5% 6%;
}
.computer-brand-content > img { width: 100%; height: auto; }
.computer-brand-content strong {
  font: 400 3.1cqw/1.2 Georgia, serif;
  letter-spacing: -.025em;
  color: #f6efdf;
}
.computer-brand-content small {
  color: #d5ba7f;
  font: 1.12cqw/1.5 var(--mono);
  letter-spacing: .05em;
}
.computer-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin-top: 2cqw; }
.computer-parties span { padding: 1.4cqw .6cqw; border: 1px solid #c3c4bc; text-align: center; font: 600 1.9cqw/1.3 Arial, sans-serif; }
.computer-parties small { display: block; font: 1cqw/1.4 var(--mono); margin-top: .5cqw; }
.computer-session { margin-top: 1.3cqw; padding: 1.5cqw; background: #dfe4d7; text-align: center; font: 600 1.8cqw/1.2 Arial, sans-serif; }
.computer-workflow { display: block; margin-top: 1.7cqw; text-align: center; font: 1.05cqw/1.3 var(--mono); color: #536353; }
.computer-property { display: block; width: 100%; height: 14cqw; object-fit: cover; margin-top: 1.5cqw; }
.computer-property-label { display: block; margin-top: 1.4cqw; text-align: center; font: 1.15cqw/1.3 var(--mono); color: #243c2e; }
.reference-workstation figcaption { gap: 8px 16px; flex-wrap: wrap; line-height: 1.6; }
@media (max-width: 760px) {
  .reference-workstation .workstation-stage { padding: 35px 7px 12px; }
  .reference-workstation .drawing-label { font-size: 7px; left: 10px; }
  .reference-workstation .drawing-label.right { left: auto; right: 10px; }
  .reference-workstation figcaption { font-size: 8px; }
}