html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;vertical-align:baseline;border:0;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html body{background-image:url(https://unsplash.com/photos/sOK9NjLArCw/download?force=true&w=1920);background-position:50%;background-repeat:no-repeat;background-size:cover;min-height:100vh;position:relative}html body:after{content:"";z-index:-1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:rgba(30,30,30,.7);position:absolute;top:0;bottom:0;left:0;right:0}html body .wrap{grid-template-rows:auto 0fr;max-width:982px;margin:0 auto;display:grid;position:fixed;top:0;bottom:0;left:0;right:0}html body .wrap .main{position:relative;overflow:auto}html body .wrap .main::-webkit-scrollbar{border-radius:20px;width:8px;height:8px;box-shadow:inset 0 0 5px rgba(255,255,255,.7)}html body .wrap .main::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.5);border-radius:20px}html body .wrap .main.hide-scroll{overflow:unset}html body .wrap .main .back{opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s,transform .8s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(.7)}html body .wrap .main .back.back-in{opacity:1;pointer-events:all;transform:scale(1)}html body .wrap .main .back .header{color:#fff}html body .wrap .main .back .header h1{text-align:center;text-shadow:0 2px 1px rgba(0,0,0,.7);font-size:55px}html body .wrap .main .back .explain{color:#fff;margin-top:80px}html body .wrap .main .back .explain h2{text-align:center;text-shadow:0 2px 1px rgba(0,0,0,.7);font-size:35px}html body .wrap .main .back .explain p{text-align:justify;text-shadow:0 2px 1px rgba(0,0,0,.7);max-width:312px;margin:45px auto;font-size:20px;line-height:1.5em}@media screen and (max-width:414px){html body .wrap .main .back .explain p{letter-spacing:1px;width:85%}}html body .wrap .main .back .upload label{color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-shadow:0 1px 1px rgba(255,255,255,.3);background-color:rgba(30,30,30,.5);border-radius:12px;padding:8px 15px 10px;font-weight:700;display:block;box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .main .back .upload label #file{display:none}html body .wrap .main .puzzle-outer-frame{z-index:1;pointer-events:none;grid-template-columns:auto auto;align-items:center;gap:12px;padding:15px;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}@media screen and (max-width:920px){html body .wrap .main .puzzle-outer-frame{display:block}}html body .wrap .main .puzzle-outer-frame.hidden{display:none}html body .wrap .main .puzzle-outer-frame.puzzle-in{pointer-events:all}html body .wrap .main .puzzle-outer-frame.puzzle-in .puzzle-outer,html body .wrap .main .puzzle-outer-frame.puzzle-in .display{opacity:1;transform:translate(0)}html body .wrap .main .puzzle-outer-frame .puzzle-outer{opacity:0;width:var(--outer-width);height:var(--outer-height);background-color:rgba(30,30,30,.5);border-radius:20px;margin:0 auto;padding:2px 2px 0;transition:opacity .8s,transform .8s;overflow:hidden;transform:translate(-100px);box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .main .puzzle-outer-frame .puzzle-outer #puzzle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:20px}html body .wrap .main .puzzle-outer-frame .display{opacity:0;grid-template-rows:auto 1fr;justify-content:center;transition:opacity .8s,transform .8s;display:grid;transform:translate(100px)}html body .wrap .main .puzzle-outer-frame .display .preview-img-outer{flex-direction:column;justify-content:center;align-items:center;width:300px;display:flex}@media screen and (max-width:920px){html body .wrap .main .puzzle-outer-frame .display .preview-img-outer{margin-top:35px}}html body .wrap .main .puzzle-outer-frame .display .preview-img-outer img{border-radius:12px;width:100%;box-shadow:0 0 15px 1px rgba(0,0,0,.7)}html body .wrap .main .puzzle-outer-frame .display .counter{color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.7);flex-direction:column;justify-content:center;align-items:center;margin-top:10px;font-size:20px;font-weight:700;display:flex}html body .wrap .main .puzzle-outer-frame .display .counter .partI,html body .wrap .main .puzzle-outer-frame .display .counter .partII,html body .wrap .main .puzzle-outer-frame .display .counter .partIII{margin:6px auto}html body .wrap .main .puzzle-outer-frame .display .counter .partI div{text-align:center;margin:20px auto}html body .wrap .main .puzzle-outer-frame .display .counter .partI div .time-count,html body .wrap .main .puzzle-outer-frame .display .counter .partI div .step-count{font-style:italic}html body .wrap .main .puzzle-outer-frame .display .counter .partII span{text-align:center;margin-bottom:15px;display:block}html body .wrap .main .puzzle-outer-frame .display .counter .partII .set-level{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:rgba(30,30,30,.5);border:none;border-radius:16px;outline:none;margin:0 auto;padding:5px 14px 5px 18px;font-size:18px;transition:all .34s;display:block;box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .main .puzzle-outer-frame .display .counter .partII .set-level option{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#fff;text-align:center;background-color:rgba(30,30,30,.7);padding-right:0}html body .wrap .main .puzzle-outer-frame .display .counter .partII .set-level.set-level-active{color:#000;background-color:rgba(255,255,255,.7);box-shadow:inset 0 0 5px 1px rgba(0,0,0,.7),0 0 3px 1px rgba(0,0,0,.5)}html body .wrap .main .puzzle-outer-frame .display .counter .partIII .go-back{color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-shadow:0 1px 1px rgba(255,255,255,.3);background-color:rgba(30,30,30,.5);border-radius:16px;margin:10px auto;padding:8px 15px 10px;font-weight:700;box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .wrap .footer{opacity:0;margin:12px 0 25px;transition:all 1s;transform:translateY(30px)}html body .wrap .footer.footer-in{opacity:1;transform:translateY(0)}html body .wrap .footer h3{color:#fff;text-align:center;text-shadow:0 2px 1px rgba(0,0,0,.7);font-style:italic}html body .modal{z-index:1;opacity:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background-color:rgba(30,30,30,.7);transition:opacity .5s;position:fixed;top:0;bottom:0;left:0;right:0}html body .modal.modal-toggle{opacity:1;pointer-events:all}html body .modal.modal-toggle .modal-body{opacity:1;transform:translate(-50%,-50%)scale(1)}html body .modal .modal-body{opacity:0;border-radius:10px;width:95%;max-width:415px;transition:all .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-40%)scale(.1);box-shadow:inset 0 0 2px rgba(255,255,255,.7)}html body .modal .modal-body .modal-header{color:#fff;border-radius:12px 12px 0 0;justify-content:space-between;padding:12px 16px;display:flex}html body .modal .modal-body .modal-header h2{font-size:20px;font-weight:700}html body .modal .modal-body .modal-content{color:#fff;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);margin:0 2px;padding:15px 18px;line-height:32px}html body .modal .modal-body .modal-content div{text-align:center}html body .modal .modal-body .modal-footer{display:flex}html body .modal .modal-body .modal-footer .cancel,html body .modal .modal-body .modal-footer .confirm{color:#fff;text-align:center;cursor:pointer;width:100%;padding:12px 0 14px;transition:all .5s}@media screen and (max-width:768px){html body .modal .modal-body .modal-footer .cancel,html body .modal .modal-body .modal-footer .confirm{padding:15px 0 14px}}html body .modal .modal-body .modal-footer .cancel{border-bottom-left-radius:10px}html body .modal .modal-body .modal-footer .cancel:hover{background:rgba(255,51,51,.8);font-style:italic;box-shadow:inset 0 0 4px rgba(0,0,0,.5)}html body .modal .modal-body .modal-footer .confirm{border-left:.1px solid rgba(255,255,255,.3);border-bottom-right-radius:10px}html body .modal .modal-body .modal-footer .confirm:hover{background:rgba(0,162,255,.8);font-style:italic;box-shadow:inset 0 0 4px rgba(0,0,0,.5)}