.unlock-guide h1{margin-bottom:16px}.unlock-stage{position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid #52708170;border-radius:24px;padding:20px 12px 14px;background:radial-gradient(ellipse at 50% 45%,#264f614d,transparent 70%);isolation:isolate}.unlock-stage:before{content:'';position:absolute;width:280px;height:280px;border:1px solid #a4d8ec30;border-radius:50%;box-shadow:0 0 0 35px #95cfe70a,0 0 0 70px #95cfe705;animation:unlock-orbit 7s linear infinite;border-top-color:#b7e2f68c;z-index:-1}.unlock-phone{width:190px;height:270px;border:1px solid #7595a6;border-radius:26px;background:#0b1721;box-shadow:0 16px 45px #0005,inset 0 0 18px #a8d4ed0a;position:relative;overflow:hidden;transform:perspective(800px) rotateY(-7deg);transition:transform .7s,border-color .7s,box-shadow .7s}.unlock-phone:before{content:'';position:absolute;top:7px;left:calc(50% - 15px);width:30px;height:3px;border-radius:5px;background:#708994;z-index:2}.unlock-launch,.unlock-gate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:opacity .55s,transform .7s}.unlock-launch img{width:66px;height:66px;border-radius:20px;box-shadow:0 0 30px #add7ee28;animation:unlock-icon 1.8s ease-in-out infinite}.unlock-launch span{font-size:14px}.unlock-calc{position:absolute;inset:22px 12px 12px;opacity:0;transform:translateY(22px) scale(.9);transition:opacity .55s,transform .6s}.unlock-display{text-align:right;font-size:26px;height:47px;padding:5px;letter-spacing:3px;color:#e6f2f9}.unlock-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.unlock-key{display:grid;place-items:center;height:31px;border-radius:50%;font-size:14px;background:#203347;color:#dcebf4;border:1px solid #b7d8ef12;transition:box-shadow .3s,transform .3s,background .3s}.unlock-key.wide{grid-column:span 2;border-radius:30px}.unlock-key.equals{background:#acd7ef;color:#142b3a}.unlock-pad.typing{animation:unlock-input .45s ease-in-out 7}.unlock-key.pressed{background:#d7efff;box-shadow:0 0 0 5px #b3dff32b,0 0 23px #afdefa9c;transform:scale(.92);animation:unlock-equals .9s ease-in-out 2}.unlock-gate{opacity:0;transform:scale(.84);padding:22px;text-align:center;background:radial-gradient(ellipse,#244755,#0b1721 75%)}.unlock-gate img{width:48px;height:48px}.unlock-gate strong{font-size:18px}.unlock-gate span{font-size:12px;line-height:1.5;color:#b1c9d5}.unlock-preview{font-size:15px;line-height:1.5;color:#dcebf4;margin:16px 0 0;min-height:3em;text-align:center}.unlock-guide[data-phase="1"] .unlock-launch,.unlock-guide[data-phase="2"] .unlock-launch,.unlock-guide[data-phase="3"] .unlock-launch{opacity:0;transform:scale(1.3)}.unlock-guide[data-phase="1"] .unlock-calc,.unlock-guide[data-phase="2"] .unlock-calc{opacity:1;transform:none}.unlock-guide[data-phase="3"] .unlock-gate{opacity:1;transform:none}.unlock-guide[data-phase="3"] .unlock-phone{transform:none;border-color:#aedfda;box-shadow:0 0 35px #a1d9d221}.unlock-steps{list-style:none;counter-reset:step;display:grid;gap:8px;padding:0;margin:18px 0}.unlock-steps li{counter-increment:step;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.5;color:#a2b6c5;transition:color .4s}.unlock-steps li:before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border:1px solid #67829266;border-radius:50%;font-size:12px}.unlock-steps li.current,.unlock-steps li.done{color:#e7f4fc}.unlock-steps li.current:before{color:#dff4ff;border-color:#aedcf3;box-shadow:0 0 13px #aedcf32a}.unlock-progress{display:flex;gap:6px;margin:16px 0 18px}.unlock-progress span{height:3px;flex:1;border-radius:3px;background:#344958;transition:background .45s}.unlock-progress span.done{background:#aedacf}.unlock-controls{display:grid;gap:4px}.unlock-controls button{width:100%;min-height:44px}.unlock-guide[data-complete="true"] .unlock-stage:before{animation:none}.unlock-guide[data-complete="true"] .unlock-launch img{animation:none}@keyframes unlock-orbit{to{transform:rotate(360deg)}}@keyframes unlock-icon{50%{transform:scale(1.06);box-shadow:0 0 40px #add7ee4a}}@keyframes unlock-input{50%{filter:brightness(1.3)}}@keyframes unlock-equals{50%{box-shadow:0 0 0 8px #b3dff31a,0 0 30px #afdefa9c}}@media(max-height:740px){.unlock-phone{height:240px;width:170px}.unlock-key{height:26px}.unlock-stage{padding-top:14px}.unlock-display{height:40px}.unlock-steps{margin:14px 0;gap:5px}}@media(prefers-reduced-motion:reduce){.unlock-guide *,.unlock-guide :before{animation:none!important;transition:none!important}.unlock-phone{transform:none}}