Daily Challenge #5 : The "Checkbox" Logic Gate 🎛️

It is February 17th. Today, we are turning a standard web form into a functioning logic puzzle. No scripts, just pure CSS selectors and the power of the DOM.

The Mission

Create a "Digital Lock" or a "Secret Sequence" where a specific combination of checkboxes must be toggled to reveal a hidden message or change the UI.

The Rules 🚫

1. NO JavaScript Allowed : You cannot use if statements, event listeners, or state variables.
2. Pure CSS/HTML only : Use the :checked pseudo-class combined with sibling selectors (+ or ~) to build the logic.
3. The Sequence : The "Unlock" state should only trigger if the exact right boxes are checked.

The Goal 🏆

Hide a <div> containing a "Success" message. Use CSS to make it visible only when the correct inputs are active.

Pro Tip : You can chain selectors like input:nth-of-type(1):checked ~ input:nth-of-type(3):checked ~ .success-message to create complex requirements!

---

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If the UI looks like a physical keypad or a safe dial.
• Extra Credit : If you include a "Reset" button that clears all the boxes (still with no JS!).

Have fun!