.first-box {
  margin: auto 0;
  padding: 14px 0 18px;
  border-top: 1px dashed #b7a17b;
}
.keepsakes {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.keepsakes button {
  height: 44px;
  width: 50px;
  background: #e7d0a8;
  border: 1px solid #beaa88;
  box-shadow: inset 0 -2px #cfb68c;
}
.keepsakes button:hover {
  background: #f5e4c4;
}
.keepsakes img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.first-box + .paper-bottom {
  margin-top: 0;
}
.sample-item {
  text-align: center;
  background: #dcc59f;
  border: 1px dashed #b79d74;
  margin: 13px 0;
  padding: 12px;
}
.sample-item img {
  width: 115px;
  height: 115px;
  object-fit: contain;
}
.carried {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px dashed #ad9672;
  background: #e8cfaa;
  padding: 7px 10px;
  color: #493723;
}
.carried img {
  width: 34px;
  height: 34px;
}
.carried small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}
.tools img,
.season img,
.scene-caption img,
.section-title > .glyph {
  filter: brightness(0) saturate(100%) invert(82%) sepia(25%) saturate(380%)
    hue-rotate(346deg);
}
#window-view {
  width: 100%;
  height: auto;
  margin-top: 10px;
  border: 3px solid #917349;
  background: #4f594c;
  display: block;
}
.cabinets {
  background: #845a3d;
  border: 5px solid #725037;
  border-top: 8px solid #906a48;
  padding: 12px 14px 14px;
  box-shadow:
    inset 2px 0 #ad855e,
    inset -2px 0 #a77d58,
    0 3px #543e30;
  align-self: start;
}
.cabinets > div {
  padding: 9px 10px 10px;
  background: #71543d;
  box-shadow:
    inset 0 4px 0 #604831,
    inset 0 -3px #a37b55;
}
.cabinets .shelf-label {
  color: #f7e0b7;
  font-size: 12px;
}
.cabinets .small {
  color: #efdbba;
  margin-top: 4px;
  font-size: 11px;
}
.shelf {
  --cell: clamp(33px, 4.25vw, 54px);
  background-color: #aa865f;
  border-color: #705238;
  border-bottom: 5px solid #c19b70;
}
.cell {
  background: #e1c7a05c;
  border-color: #b18e65;
}
.cell.suitable {
  background: #d6d5a4bb;
}
.placed {
  background: #d1b68e66;
}
.workbench {
  grid-template-columns: minmax(190px, 0.86fr) minmax(320px, 1.3fr);
}
.object {
  min-height: 57px;
}
.object img {
  width: 47px;
  height: 47px;
}
.selection {
  max-width: 32em;
}
.paper-title .glyph {
  image-rendering: pixelated;
}
.tea-board,
.album-board,
.wire-board,
.route-board,
.radio-face {
  margin: 15px 0;
  background: #ac845a;
  border: 4px solid #856141;
  padding: 10px;
  color: #3f352a;
}
.tea-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #cbb28b;
}
.tea-board section {
  text-align: center;
  background: #e8d8b9;
  padding: 7px;
}
.tea-board h3 {
  margin: 0 0 10px;
}
.recipe-row,
.radio-adjust > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 4px 0;
  font-size: 12px;
}
.recipe-row span {
  margin-right: auto;
}
.knob-btn {
  width: 26px;
  height: 27px;
  background: #f1d8a9;
  border: 1px solid #a4875d;
  color: #493927;
}
.knob-btn:disabled,
.wire-cell:disabled,
.print:disabled {
  opacity: 0.78;
}
.radio-face {
  background: #735039;
  box-shadow: inset 0 0 0 2px #ae805b;
  color: #f2dfb5;
}
.radio-grill {
  height: 25px;
  background: repeating-linear-gradient(0deg, #5b4030 0 2px, #b08e62 2px 4px);
}
.radio-station {
  font: 700 14px var(--mono);
  letter-spacing: 2px;
  margin: 12px 0 6px;
}
.tuning-scale {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 40px;
  padding: 0 5px;
  background: #ded0a2;
  border: 2px solid #493c31;
  color: #4f493c;
}
.tuning-scale span {
  border-top: 5px solid #756c54;
  font: 12px var(--mono);
  text-align: center;
  padding-top: 3px;
  width: 12px;
}
.tuning-scale .tuned {
  border-color: #9e3f2b;
  background: #f2c183;
  font-weight: bold;
}
.radio-adjust {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}
.wire-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #485447;
  gap: 2px;
}
.wire-cell {
  display: grid;
  justify-content: center;
  background: #344438;
  color: #dfae61;
  border: 1px dashed #74816a;
  padding: 6px;
}
.wire-cell span {
  width: 60px;
  height: 60px;
  font: 52px/60px var(--mono);
  text-align: center;
}
.wire-cell small {
  color: #f1e3bf;
}
.album-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: #9f8b68;
}
.print {
  display: grid;
  justify-items: center;
  background: #f1e0bf;
  color: #675846;
  padding: 5px;
  border: 1px solid #8e7d61;
}
.print img {
  width: 100%;
  max-width: 114px;
  height: auto;
}
.print.chosen {
  outline: 3px solid #925132;
}
.route-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 208px;
  background: #ae926d;
  gap: 2px;
}
.route-board span {
  display: grid;
  place-items: center;
  height: 32px;
  background: #d5c19a;
  font-size: 18px;
}
.route-board .door {
  background: #9da986;
}
.route-board .wall {
  background: repeating-linear-gradient(45deg, #766650 0 3px, #887963 3px 6px);
}
.route-board .piece {
  background: #8f5034;
  color: #e9c27c;
}
.route-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
@media (max-width: 740px) {
  .first-box {
    display: none;
  }
  .workbench {
    grid-template-columns: minmax(0, 1fr);
  }
  .cabinets {
    padding: 6px;
  }
  .shelf {
    --cell: clamp(24px, 8.8vw, 43px);
  }
  .cabinets > div {
    padding: 8px;
  }
  .object {
    min-height: 45px;
  }
  .object img {
    width: 38px;
    height: 38px;
  }
  .tea-board {
    padding: 5px;
    gap: 4px;
  }
  .recipe-row {
    gap: 3px;
  }
  .tea-board section {
    padding: 5px;
  }
  .knob-btn {
    width: 24px;
  }
  .radio-adjust {
    flex-wrap: wrap;
  }
}
.furniture-plan {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: #927451;
  border: 4px solid #86613f;
  padding: 5px;
  max-width: 330px;
  margin: 12px 0;
}
.furniture-plan button {
  min-height: 29px;
  border: 1px solid #b18f65;
  background: #d6ba8f;
  color: #584b36;
  font: 17px var(--mono);
}
.furniture-plan .fixed {
  background: #71604c;
}
.furniture-plan .occupied {
  background: #925736;
  color: #f2deac;
}
.furniture-plan .target {
  background: #726e47;
  color: #fff1c9;
}
.furniture-plan .passage {
  background: #c2c09e;
}
.furniture-plan button:disabled {
  opacity: 0.76;
}
.furniture-plan button:not(:disabled):hover {
  background: #eccd93;
}
.stack-target {
  outline: 2px dashed #586d39;
}
.stack-count {
  position: absolute;
  bottom: 0;
  right: 0;
  min-width: 13px;
  background: #4c5a3f;
  color: #fff0d0;
  font:
    10px/14px Inter,
    sans-serif;
}
.held-closeup {
  width: 64px;
  height: 64px;
  object-fit: contain;
  float: left;
  margin: 0 12px 6px 0;
}
.selection:after {
  content: "";
  display: block;
  clear: both;
}
.placed {
  display: block;
  overflow: hidden;
}
.placed img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.cabinets > div {
  display: grid;
  justify-items: center;
}
.cabinets .shelf-label {
  width: 100%;
}
.crate-items > .small:only-child {
  grid-column: 1/-1;
}
.held-closeup {
  transition: transform 0.15s ease;
}
.wire-cell:disabled {
  opacity: 0.9;
}