На ютубах есть относительно популярная категория видео, где автор пытается решить какой-то сложный физический паззл: открыть сейф, достать ключик из кубика без видимых щелей и так далее. Блэкл Мори объясняет, как можно сделать такой паззл на HTML и CSS.
В этот раз вся магия держится на особенностях работы
details и summary, а также сочетании свойства resize с max-height, max-width и calc() для хитрых вычислений. Есть специальный Width Hack, который позволяет эти примитивы превращать в машину состояний, где каждое нажатие на «кнопку» вызывает новое состояние со своими кнопками.Коротко тяжело пересказать, что там происходит, нужно смотреть в демки, вникать в код, пробовать сделать что-то похожее. Мне понадобилась пара часов, чтобы разобраться, но оно того стоило — кажется, на следующем CTF для конференции «Я люблю фронтенд» будут задания со схожими механиками.
А если не хотите разбираться, как паззл работает, то можно просто попытаться его решить.
https://suricrasia.online/blog/inline-css-puzzle-box/