*{background-repeat:no-repeat}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;overflow-x:hidden;min-height:100vh;position:relative}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}b,strong{font-weight:700}em,i{font-style:italic}@keyframes shadow{0%{background-position:0 0}50.01%{background-position:200% 0}100%{background-position:0 0}}@keyframes flash{0%{opacity:0}5%{opacity:1}100%{opacity:0}}@keyframes ray-rotate{0%{transform:rotate(360deg)}100%{transform:rotate(0deg)}}*{box-sizing:border-box;border-radius:0;user-select:none}html,body{height:100%;width:100vw;overflow-x:hidden}body{font-family:'Poppins', sans-serif;position:fixed;left:0;top:0;right:0;bottom:0;touch-action:none}body.no-scroll{overflow:hidden}body.loaded .sector{transform:none !important;opacity:1 !important;filter:none !important}body.loaded #hint{filter:none !important}[href]{color:#99f;text-decoration:none;font-weight:700}[href]:visited{color:#99f}#access-archive{text-align:center}#access-archive p{margin:0 auto 1.2em auto;max-width:400px;line-height:1.4em}#access-archive .button{display:inline-block}.scrollable{overflow-x:auto;max-height:60vh}.page-background,#menu .title,#menu .menu-notch{background-color:#99b}.page-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;opacity:0.5}#white-flash{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:11;animation-fill-mode:forwards;opacity:0;animation:flash 1400ms linear 1}#white-flash.hidden{animation:none;top:100%}.rays{position:absolute;top:-140px;left:-50%;transform:translateX(50%);width:1000px;height:1000px;background-image:url(../images/rays.png);z-index:1;opacity:0.2;animation:ray-rotate linear infinite;animation-duration:180s;transition:opacity 400ms ease-in-out;display:none}.rays.hidden{opacity:0}.strong{font-weight:700 !important}.absolute-center{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.button{background-color:#fff;padding:12px 16px 12px 16px;color:#000 !important;cursor:pointer;margin-bottom:12px;white-space:nowrap;border-radius:16px;position:relative;font-weight:normal;text-shadow:none}.button:hover{background-color:#ff8 !important}.button#start{padding:12px 40px 12px 40px;font-size:200%;background-color:#0af;color:#fff;border:3px solid #000;display:inline-block}.button.small{display:inline-block;font-size:80%;padding:6px 12px 6px 12px}.button .solved{position:absolute;left:12px;top:12px}.button.hidden{display:none}.quartered{display:grid;position:relative;grid-template-columns:1fr 1fr;grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:1fr 1fr;height:100%}.quartered .quarter{position:relative;text-align:center;padding:12px}.quartered .quarter:nth-child(1){border-right:2px solid #000;border-bottom:2px solid #000}.quartered .quarter:nth-child(2){border-left:2px solid #000;border-bottom:2px solid #000}.quartered .quarter:nth-child(3){border-right:2px solid #000;border-top:2px solid #000}.quartered .quarter:nth-child(4){border-left:2px solid #000;border-top:2px solid #000}.quartered .quarter .inner{text-transform:uppercase;font-weight:bold;color:#000;border-radius:4px;user-select:none;width:100%;height:100%;cursor:pointer}.quartered .quarter .inner .puzzle-glyph{text-shadow:2px 2px 6px rgba(0, 0, 0, 0.7);line-height:17px}.quartered .quarter .content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:80%}p.big{font-size:140%;line-height:1.4em;max-width:500px;margin:0 auto 2em auto}html .app-page,html #title-and-menu,html #menu,html #intro{position:fixed;top:0;height:100%;width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:120px auto;z-index:5}html .app-page#puzzle,html #title-and-menu#puzzle,html #menu#puzzle,html #intro#puzzle{grid-template-rows:120px auto 60px}html #title-and-menu{left:0;z-index:-1}html body{background-color:#202020;font-family:'Poppins', sans-serif;font-weight:300;min-height:100%}html body #app-container{position:absolute;width:100%;height:100%;max-width:800px;max-height:1000px;top:50%;left:50%;transform:translate(-50%, -50%);border:1px solid #ddd;overflow:hidden;background-color:#fff}html body #app-container #title,html body #app-container #collection .title{color:#000}html body #app-container #title h1,html body #app-container #collection .title h1{background-image:url(../images/title-dark.png)}html body #app-container #menu .title h1,html body #app-container #archive .title h1,html body #app-container #hint .title h1{background-image:url(../images/title-light.png)}html body #app-container #title h1,html body #app-container #menu .title h1,html body #app-container #archive .title h1,html body #app-container #hint .title h1,html body #app-container #collection .title h1{background-size:260px;background-position:12px 24px;height:72px}html body #app-container #title h2,html body #app-container #menu .title h2,html body #app-container #archive .title h2,html body #app-container #hint .title h2,html body #app-container #collection .title h2{font-size:16px;font-weight:bold;padding-left:17px}html body #app-container #bottom-bar{position:relative;transition:transform 200ms ease-in-out;text-align:right;padding:10px 18px 0 0;white-space:nowrap}html body #app-container #bottom-bar .button{display:inline-block;transition:filter 300ms linear, transform 300ms ease-in-out}html body #app-container #bottom-bar .button.hidden{transform:translateY(150%)}html body #app-container #bottom-bar.hidden{transform:translateY(100%)}html body #app-container #toggle-menu,html body #app-container #archive .close,html body #app-container #hint .close,html body #app-container #collection .close{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:1fr 1fr;cursor:pointer;user-select:none;transition:transform 1000ms ease-in-out;z-index:20;padding:2px;top:20px;right:18px;font-size:12px;color:#000}html body #app-container #toggle-menu.open,html body #app-container #archive .close.open,html body #app-container #hint .close.open,html body #app-container #collection .close.open{transform:rotate(495deg)}html body #app-container #toggle-menu div,html body #app-container #archive .close div,html body #app-container #hint .close div,html body #app-container #collection .close div{text-align:center;height:20px;line-height:20px;aspect-ratio:1}html body #app-container #toggle-menu div .letter,html body #app-container #archive .close div .letter,html body #app-container #hint .close div .letter,html body #app-container #collection .close div .letter{opacity:1;transition:opacity 1000ms linear}html body #app-container #toggle-menu div:nth-child(1),html body #app-container #archive .close div:nth-child(1),html body #app-container #hint .close div:nth-child(1),html body #app-container #collection .close div:nth-child(1){border-right:1px solid #000;border-bottom:1px solid #000}html body #app-container #toggle-menu div:nth-child(2),html body #app-container #archive .close div:nth-child(2),html body #app-container #hint .close div:nth-child(2),html body #app-container #collection .close div:nth-child(2){border-left:1px solid #000;border-bottom:1px solid #000}html body #app-container #toggle-menu div:nth-child(3),html body #app-container #archive .close div:nth-child(3),html body #app-container #hint .close div:nth-child(3),html body #app-container #collection .close div:nth-child(3){border-right:1px solid #000;border-top:1px solid #000}html body #app-container #toggle-menu div:nth-child(4),html body #app-container #archive .close div:nth-child(4),html body #app-container #hint .close div:nth-child(4),html body #app-container #collection .close div:nth-child(4){border-left:1px solid #000;border-top:1px solid #000}html body #app-container #toggle-menu{position:fixed}html body #app-container #toggle-menu.open .letter{opacity:0}html body #app-container #archive .close,html body #app-container #hint .close,html body #app-container #collection .close{position:absolute;background-color:rgba(255, 255, 255, 0.6);border-radius:50%}html body #app-container #archive .close.open .letter,html body #app-container #hint .close.open .letter,html body #app-container #collection .close.open .letter{display:block;transform:rotate(-135deg)}html body #app-container #menu .top .title{background-color:#000}html body #app-container #menu .navigation{text-align:left}html body #app-container #menu .help p,html body #app-container #menu .stats p{text-align:left;width:100%;font-size:90%}html body #app-container #menu .help p{line-height:1.3em}html body #app-container #menu .stats p{text-align:center;margin-bottom:12px !important;line-height:2em}html body #app-container #menu .stats .stat{font-size:200%;display:block}html body #app-container #menu .stats .hidden{display:none}html body #app-container #archive .top .title{background-color:#7000a0}html body #app-container #hint .top .title{background-color:#0af}html body #app-container #collection .top .title{background-color:#99b}html body #app-container #menu,html body #app-container #archive,html body #app-container #hint{color:#fff}html body #app-container #menu .top .title h2,html body #app-container #archive .top .title h2,html body #app-container #hint .top .title h2{color:#fff}html body #app-container #menu,html body #app-container #archive,html body #app-container #hint,html body #app-container #collection{position:absolute;transform:translateY(100%);left:0;transition:transform 1000ms ease-in-out}html body #app-container #menu.open,html body #app-container #archive.open,html body #app-container #hint.open,html body #app-container #collection.open{transform:translateY(0)}html body #app-container #menu .top .title,html body #app-container #archive .top .title,html body #app-container #hint .top .title,html body #app-container #collection .top .title{width:calc(100% - 80px);height:72px;position:absolute;left:0;top:0}html body #app-container #menu .top .title h1:before,html body #app-container #archive .top .title h1:before,html body #app-container #hint .top .title h1:before,html body #app-container #collection .top .title h1:before{display:block;color:#fff}html body #app-container #menu .top .menu-notch,html body #app-container #archive .top .menu-notch,html body #app-container #hint .top .menu-notch,html body #app-container #collection .top .menu-notch{position:absolute;top:20px;right:18px;width:44px;aspect-ratio:1;border-radius:50%}html body #app-container #menu .page-content,html body #app-container #archive .page-content,html body #app-container #hint .page-content,html body #app-container #collection .page-content{padding:12px}html body #app-container #menu .page-content .quartered .quarter,html body #app-container #archive .page-content .quartered .quarter,html body #app-container #hint .page-content .quartered .quarter,html body #app-container #collection .page-content .quartered .quarter{border-color:#fff}html body #app-container #menu .page-content .quartered .quarter p,html body #app-container #archive .page-content .quartered .quarter p,html body #app-container #hint .page-content .quartered .quarter p,html body #app-container #collection .page-content .quartered .quarter p{margin-bottom:20px}html body #app-container #menu .page-content .quartered .quarter input[type="range"],html body #app-container #archive .page-content .quartered .quarter input[type="range"],html body #app-container #hint .page-content .quartered .quarter input[type="range"],html body #app-container #collection .page-content .quartered .quarter input[type="range"]{width:100%;max-width:200px}html body #app-container #menu{z-index:19}html body #app-container #menu .top{background-color:#000}html body #app-container #menu .top .title h1:before{background:#000}html body #app-container #menu .top .title h2{background:#000}html body #app-container #menu .page-content{background-color:black}html body #app-container #archive,html body #app-container #hint,html body #app-container #collection{z-index:20;position:fixed;top:0;height:100%;width:100%;max-height:100vh;overflow:hidden}html body #app-container #archive .scrolling-menu,html body #app-container #hint .scrolling-menu,html body #app-container #collection .scrolling-menu{display:grid;grid-template-columns:1fr;grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:120px auto;overflow:hidden}html body #app-container #archive .scrolling-menu .page-content,html body #app-container #hint .scrolling-menu .page-content,html body #app-container #collection .scrolling-menu .page-content{overflow-y:auto}html body #app-container #archive .page-content .button-list .button,html body #app-container #hint .page-content .button-list .button,html body #app-container #collection .page-content .button-list .button{text-align:left;padding-left:40px;max-width:410px;margin:0 auto 1em auto}html body #app-container #archive .scrolling-menu .top{background-color:#7000a0}html body #app-container #archive .scrolling-menu .top .title h1:before{background:#7000a0}html body #app-container #archive .scrolling-menu .top .title h2{background:#7000a0}html body #app-container #archive .page-content{text-align:center}html body #app-container #archive .page-content .button.gift-archive{display:inline-block}html body #app-container #archive .page-content .button-list .button{text-align:left;padding-left:40px;max-width:410px;margin:0 auto 1em auto}html body #app-container #archive .page-content .button-list .button.current{background-color:#0af}html body #app-container #archive{background-color:#7000a0}html body #app-container #archive .page-content{background-color:#7000a0}html body #app-container #hint{background-color:#0af}html body #app-container #hint .page-content{background-color:#0af;padding-top:30px;text-align:center}html body #app-container #hint .page-content p{max-width:400px;font-size:120%;line-height:1.4em;margin-left:auto;margin-right:auto}html body #app-container #hint .page-content .button{display:inline-block;margin-left:auto;margin-right:auto}html body #app-container #collection{background-color:#99b}html body #app-container #collection .page-content{background-color:#99b}html body #app-container #collection .page-content .collection-grid{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:20px;grid-row-gap:20px}html body #app-container #collection .page-content .collection-grid li{white-space:pre;line-height:1.3em;text-align:center}html body #app-container #intro{text-align:center;z-index:12;display:none}html body #app-container #intro .new-player{font-size:130%;line-height:1.4em;margin-bottom:0.8em}html body #app-container #intro .stats{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}html body #app-container #win-stats-container{position:absolute;bottom:0;left:0;width:100%;z-index:5;padding:0 30px 0 30px;transition:transform 200ms ease-in-out}html body #app-container #win-stats-container.hidden{transform:translateY(100%)}html body #app-container #win-stats-container #win-stats{text-shadow:1px 1px 6px black;background-color:rgba(0, 170, 255, 0.7);font-weight:700;border-top-left-radius:23px;border-top-right-radius:23px;color:#fff;font-size:16px;padding:30px 30px 10px 30px;text-align:center;line-height:20px}html body #app-container #win-stats-container #win-stats h2{font-size:24px;font-weight:700}html body #app-container #win-stats-container #win-stats p{margin-top:1em}html body #app-container #win-stats-container #win-stats #reveal-solution{cursor:pointer;font-size:150%;display:inline-block}html body #app-container #win-stats-container #win-stats .reload-for-new.hidden{display:none}html body #app-container .app-page{position:fixed;left:100%}html body #app-container .app-page.current{left:0}html body #app-container .app-page#error .page-content{text-align:center}html body #app-container .app-page#error .page-content .button{display:inline-block;margin-top:2em}html body #app-container .app-page .page-content p{line-height:1.3em;text-align:center;margin-top:1em}html body #app-container .app-page#puzzle #field-container{position:relative;transition:transform 200ms ease-in-out}html body #app-container .app-page#puzzle #field{position:absolute}html body #app-container .app-page#puzzle #field.win .draggable{transform:rotate(360deg);cursor:default !important}html body #app-container .app-page#puzzle #field.win .placeholder{transform-origin:center;transform:scale(0.001) translate(-50%, -50%)}html body #app-container .app-page#puzzle #field.win .sector{border:none}html body #app-container .app-page#puzzle #field .sector{filter:blur(0.3rem);opacity:0.1;position:absolute;border-top:1px solid rgba(255, 255, 255, 0.9);border-left:1px solid rgba(255, 255, 255, 0.9);border-right:1px solid rgba(0, 0, 0, 0.8);border-bottom:1px solid rgba(0, 0, 0, 0.8);transition:box-shadow 200ms ease-in-out, border 200ms linear, transform 500ms ease-in-out, opacity 500ms linear, filter 300ms linear}html body #app-container .app-page#puzzle #field .sector.focused{box-shadow:0 0 400px 400px rgba(0, 0, 0, 0.8)}html body #app-container .app-page#puzzle #field .sector.focused:before,html body #app-container .app-page#puzzle #field .sector.focused:after{content:'';position:absolute;background:linear-gradient(135deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);background-size:400%;z-index:1;animation:shadow 20s linear infinite}html body #app-container .app-page#puzzle #field .sector.focused:after{filter:blur(36px);top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);opacity:0.9}html body #app-container .app-page#puzzle #field .sector .block{display:block;aspect-ratio:1;position:absolute;margin:0;z-index:2}html body #app-container .app-page#puzzle #field .sector .block.draggable{cursor:grab;z-index:4;transition:transform 1000ms linear;transform-origin:center}html body #app-container .app-page#puzzle #field .sector .block.draggable.hint{position:absolute;cursor:not-allowed;z-index:5}html body #app-container .app-page#puzzle #field .sector .block.draggable.hint .letter{background:#ff8}html body #app-container .app-page#puzzle #field .sector .block.draggable .letter{border-right:2px solid #888;border-bottom:2px solid #666}html body #app-container .app-page#puzzle #field .sector .block.dragging{z-index:10;cursor:grabbing;transition:none}html body #app-container .app-page#puzzle #field .sector .block.dragging .letter{transform:translate(-50%, -50%) scale(1.2);box-shadow:0.2vw 0.2vw 4px rgba(0, 0, 0, 0.7)}html body #app-container .app-page#puzzle #field .sector .block.broken .letter{color:#555;background-color:#ddd}html body #app-container .app-page#puzzle #field .sector .block.broken.broken-1 .letter{transform:rotate(-2deg) translate(-51%, -49%)}html body #app-container .app-page#puzzle #field .sector .block.broken.broken-2 .letter{transform:rotate(2deg) translate(-49%, -50%)}html body #app-container .app-page#puzzle #field .sector .block.broken.broken-3 .letter{transform:rotate(-3deg) translate(-50%, -51%)}html body #app-container .app-page#puzzle #field .sector .block.broken.broken-4 .letter{transform:rotate(3deg) translate(-51%, -51%)}html body #app-container .app-page#puzzle #field .sector .block .coords{font-size:10px;position:absolute;top:0;left:0;color:#f00}html body #app-container .app-page#puzzle #field .sector .block .letter{position:absolute;border:none;text-transform:uppercase;text-align:center;font-weight:bold;width:95%;height:95%;background-color:#fff;color:#000;vertical-align:middle;border-radius:4px;font-family:'Poppins', sans-serif;transition:transform 80ms ease-in-out, box-shadow 80ms ease-in-out;line-height:1.4em;user-select:none;margin:auto}html body #app-container .app-page#puzzle #field .sector .block .letter.placeholder{opacity:0.2;transition:transform 500ms linear;transform-origin:center}html body #app-container .app-page#puzzle #field .sector .block .letter.word{background-color:transparent;border:0.2vh dotted rgba(0, 0, 0, 0.6);width:80%;height:80%}@media screen and (max-width:500px){#collection .page-content .collection-grid{grid-template-columns:1fr !important}}