dialog {
  border: 1px solid #ffffff;
  border-radius: 20px;
  background: #f7f7f7;
  color: #393939;
  width: min(540px, calc(100% - 28px));
  padding: 32px;
  box-shadow: 0 20px 90px #34343433;
}
dialog::backdrop {
  background: #3838386e;
  backdrop-filter: blur(5px);
}
dialog h2 {
  font:
    32px "Fraunces",
    Georgia,
    serif;
  margin: 10px 0 15px;
}
dialog p,
dialog li {
  font-size: 13px;
  line-height: 1.8;
  color: #7c7c7c;
}
dialog ul {
  padding-left: 20px;
  margin: 18px 0;
}
dialog .primary {
  margin-top: 22px;
}
.close {
  position: absolute;
  right: 16px;
  top: 12px;
  background: none;
  border: 0;
  font-size: 26px;
  color: #7f7f7f;
}
.reset-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}
.reset-actions > * {
  flex: 1;
}
#help-reset {
  display: block;
  margin: 20px auto 0;
}
#repair-board {
  position: relative;
  height: 210px;
  margin: 22px 0 12px;
  border: 8px solid #a0a0a0;
  border-radius: 16px;
  background: repeating-linear-gradient(
    0deg,
    #bababa 0px,
    #bababa 40px,
    #b0b0b0 41px,
    #bababa 43px
  );
  box-shadow: inset 0 3px 12px #6767672a;
}
.repair-object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  height: 130px;
  border-radius: 20px;
  background: #797979;
  border: 6px solid #5f5f5f;
  box-shadow: 0 10px 0 #5858582a;
}
.slot {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 2px dashed #ededed99;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ededed70;
  font-size: 32px;
  top: 28px;
  background: #37373730;
}
.slot.fitted {
  color: #e2e2e2;
  border: 2px solid #acacac;
  background: #515151;
}
.slot:nth-child(1) {
  left: 6%;
}
.slot:nth-child(2) {
  left: calc(50% - 31px);
}
.slot:nth-child(3) {
  right: 6%;
}
#parts-tray {
  display: flex;
  justify-content: center;
  gap: 24px;
  min-height: 60px;
}
.part {
  width: 58px;
  height: 58px;
  background: #e1e1e1;
  border: 2px solid #c3c3c3;
  border-radius: 12px;
  font-size: 30px;
  color: #6f6f6f;
  touch-action: none;
  cursor: grab;
}
.part.selected {
  outline: 3px solid #7b7b7b;
  outline-offset: 3px;
}
.part.used {
  visibility: hidden;
}
.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.repair-tip {
  font-size: 10px !important;
  text-align: center;
  margin-top: 12px;
}