*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1a1a1a,#2c2c2c,#1a1a1a);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none}#root{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.vault-container{position:relative;width:600px;height:600px;display:flex;align-items:center;justify-content:center}.vault-door{position:relative;width:490px;height:490px;border-radius:50%;background:radial-gradient(circle at 30% 30%,silver,gray,#404040);box-shadow:0 0 100px #000c,inset 0 0 50px #ffffff1a,inset 20px 20px 40px #0000004d,inset -20px -20px 40px #ffffff1a;display:flex;align-items:center;justify-content:center;border:8px solid #2c2c2c}.vault-door:before{content:"";position:absolute;inset:-15px;border-radius:50%;background:linear-gradient(45deg,#1a1a1a,#404040,#1a1a1a);z-index:-1;box-shadow:0 0 50px #000000e6}.vault-inner{position:relative;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#a0a0a0,#606060,#303030);box-shadow:inset 10px 10px 30px #0006,inset -10px -10px 30px #ffffff1a,0 0 30px #00000080;display:flex;align-items:center;justify-content:center;border:4px solid #1a1a1a}.combination-lock{position:relative;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e0e0e0,#a0a0a0,#505050);box-shadow:8px 8px 25px #0006,-8px -8px 25px #ffffff1a,inset 5px 5px 15px #0003,inset -5px -5px 15px #fff3;border:3px solid #2c2c2c}.lock-face{position:relative;width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#d0d0d0,#909090);box-shadow:inset 3px 3px 10px #0000004d,inset -3px -3px 10px #ffffff4d}.dial{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;transition:transform .3s ease-out;cursor:pointer}.dial-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#404040,#202020,#000);box-shadow:4px 4px 12px #00000080,-4px -4px 12px #ffffff1a,inset 2px 2px 8px #0006;display:flex;align-items:center;justify-content:center;z-index:10;border:2px solid #1a1a1a}.unlock-button{width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#505050,#303030,#101010);border:none;cursor:pointer;box-shadow:2px 2px 8px #0006,-2px -2px 8px #ffffff1a;transition:all .2s ease;font-size:8px;font-weight:700;color:silver;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.unlock-button:hover{background:radial-gradient(circle at 30% 30%,#606060,#404040,#202020)}.unlock-button:active{box-shadow:inset 2px 2px 8px #00000080,inset -2px -2px 8px #ffffff1a}.unlock-button.success{background:radial-gradient(circle at 30% 30%,#27ae60,#1e8449,#145a32);color:#fff;animation:flash .5s ease-in-out}@keyframes flash{0%,to{opacity:1}50%{opacity:.7}}.pointer{position:absolute;top:10px;left:50%;transform:translate(-50%);width:4px;height:15px;background:linear-gradient(180deg,#000,#000);border-radius:2px;box-shadow:0 2px 6px #00000080;z-index:5}.number{position:absolute;top:50%;left:50%;font-size:12px;font-weight:bolder;color:#1a1a1a;text-shadow:1px 1px 2px rgba(255,255,255,.3);transform-origin:center;transform:rotate(var(--angle)) translateY(-110px) rotate(calc(-1 * var(--angle)))}.vault-bolts{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}.vault-bolt{position:absolute;width:30px;height:10px;background:linear-gradient(90deg,gray,#404040,gray);border-radius:7px;box-shadow:3px 3px 10px #00000080,inset 1px 1px 4px #fff3;transition:all .5s ease;border:1px solid #1a1a1a}.vault-bolt.extended{background:linear-gradient(90deg,#27ae60,#1e8449,#27ae60);box-shadow:3px 3px 10px #00000080,inset 1px 1px 4px #ffffff4d}.vault-bolt.retracted{transform:scaleX(.3);opacity:.5}.vault-bolt:nth-child(1){top:10px;left:50%;transform:translate(-50%)}.vault-bolt:nth-child(2){top:25%;right:10px;transform:rotate(45deg)}.vault-bolt:nth-child(3){top:50%;right:10px;transform:translateY(-50%) rotate(90deg)}.vault-bolt:nth-child(4){bottom:25%;right:10px;transform:rotate(135deg)}.vault-bolt:nth-child(5){bottom:10px;left:50%;transform:translate(-50%) rotate(180deg)}.vault-bolt:nth-child(6){bottom:25%;left:10px;transform:rotate(225deg)}.vault-bolt:nth-child(7){top:50%;left:10px;transform:translateY(-50%) rotate(270deg)}.vault-bolt:nth-child(8){top:25%;left:10px;transform:rotate(315deg)}.vault-door.opening{animation:vaultOpen 2s ease-in-out}@keyframes vaultOpen{0%{transform:rotate(0)}to{transform:rotate(-90deg);transform-origin:left center}}.vault-door.success{box-shadow:0 0 100px #27ae6080,inset 0 0 50px #27ae6033,inset 20px 20px 40px #0000004d,inset -20px -20px 40px #ffffff1a}