.hotspot {
  background: rgba(241, 200, 84, .025);
  box-shadow: inset 0 0 0 1px rgba(241, 200, 84, .3), 0 0 5px rgba(241, 200, 84, .08);
}

.hotspot:hover,
.hotspot:focus-visible {
  background: rgba(237, 195, 72, .14);
  box-shadow: inset 0 0 0 3px #f1c854, 0 0 18px rgba(244, 201, 77, .8);
}

.tv { border-radius: 10px; }
.computer { border-radius: 15px; }
.phone { border-radius: 34px 34px 14px 14px; }
.folder { border-radius: 4px; }
.board, .drawer, .driver-drawer { border-radius: 2px; }

.history-drawer { left: 5.25%; top: 184px; width: 8.15%; height: 189px; border-radius: 2px; }
.driver-drawer { left: 5.25%; top: 374px; width: 8.15%; height: 139px; }
.drawer { left: 5.3%; top: 515px; width: 8.1%; height: 181px; }

/* Drawer faces have clipped corners so the hint follows the metal fronts, not a full box. */
.drawer,
.history-drawer,
.driver-drawer,
.ken-drawer,
.ken-file-one,
.ken-file-two,
.ken-file-three,
.ken-file-four,
.ken-file-five {
  clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%);
}

.ken-file-one,
.ken-file-two,
.ken-file-three,
.ken-file-four,
.ken-file-five {
  clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 91%, 96% 100%, 4% 100%, 0 91%, 0 9%);
}

/* Each workshop drawer is mapped to its individual front, not the whole cabinet. */
.ken-file-one { left: 25.8%; top: 197px; width: 9.15%; height: 84px; }
.ken-file-two { left: 25.8%; top: 283px; width: 9.15%; height: 71px; }
.ken-file-three { left: 25.8%; top: 356px; width: 9.15%; height: 71px; }
.ken-file-four { left: 25.8%; top: 428px; width: 9.15%; height: 72px; }
.ken-file-five { left: 25.8%; top: 503px; width: 9.15%; height: 80px; }

/* Raster-office coordinates: each silhouette is traced from Escritorio_Don.png. */
.scene-stage:not(.ken-room) .tv { left: 14.1%; top: 214px; width: 12.1%; height: 193px; clip-path: polygon(5% 0, 95% 0, 100% 6%, 100% 90%, 93% 100%, 7% 100%, 0 90%, 0 6%); }
.scene-stage:not(.ken-room) .board { left: 67.4%; top: 49px; width: 22.3%; height: 280px; clip-path: polygon(2% 3%, 98% 0, 100% 97%, 0 100%); }
.scene-stage:not(.ken-room) .folder { left: 56.2%; top: 420px; width: 8.6%; height: 49px; clip-path: polygon(4% 10%, 96% 0, 100% 90%, 2% 100%); }
.scene-stage:not(.ken-room) .computer { left: 43.8%; top: 261px; width: 10.2%; height: 155px; clip-path: polygon(8% 0, 92% 0, 100% 12%, 96% 77%, 82% 84%, 82% 100%, 18% 100%, 18% 84%, 4% 77%, 0 12%); }
.scene-stage:not(.ken-room) .phone { left: 64.2%; top: 369px; width: 10.3%; height: 76px; clip-path: polygon(12% 29%, 24% 5%, 76% 5%, 88% 29%, 100% 76%, 90% 100%, 10% 100%, 0 76%); }
.scene-stage:not(.ken-room) .ken-drawer { left: 27.5%; top: 497px; width: 11.4%; height: 224px; clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }

/* Raster-workshop coordinates: the left bench, CRT and every archive face. */
.ken-monitor { left: 48.7%; top: 308px; width: 11.7%; height: 100px; clip-path: polygon(7% 0, 93% 0, 100% 11%, 100% 78%, 82% 84%, 82% 100%, 18% 100%, 18% 84%, 0 78%, 0 11%); }
.ken-bench { left: 0; top: 444px; width: 40.8%; height: 176px; clip-path: polygon(0 7%, 100% 0, 98% 84%, 70% 88%, 70% 100%, 0 100%); }
.ken-file-one { left: 25.8%; top: 197px; width: 9.15%; height: 84px; clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 96%, 95% 100%, 5% 100%, 0 96%, 0 5%); }
.ken-file-two { left: 25.8%; top: 283px; width: 9.15%; height: 71px; clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%); }
.ken-file-three { left: 25.8%; top: 356px; width: 9.15%; height: 71px; clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%); }
.ken-file-four { left: 25.8%; top: 428px; width: 9.15%; height: 72px; clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%); }
.ken-file-five { left: 25.8%; top: 503px; width: 9.15%; height: 80px; clip-path: polygon(3% 0, 97% 0, 100% 4%, 100% 96%, 97% 100%, 3% 100%, 0 96%, 0 4%); }