@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap);body{margin:0;padding:0;font-family:sans-serif}body{font-family:Lato,sans-serif;overflow:hidden}h1{margin-bottom:30px;padding-bottom:16px;line-height:1em;border-bottom:2px solid hsla(0,0%,100%,.1)}button,input{line-height:2em}.main{position:absolute;text-align:center;width:100vw;height:calc(var(--vh, 1vh) * 100);background:#1e2429;color:#fff}.main,.stripe{-webkit-transition:all .5s ease;-o-transition:.5s all ease;transition:all .5s ease}.stripe{position:relative;overflow:hidden;height:11.11111%;cursor:pointer}.stripe.selected{cursor:auto}.stripe:nth-of-type(odd){background:rgba(0,0,0,.03)}.stripe:hover{background:rgba(10,35,75,.3)}.stripe.selected:hover{background:none}.letter{position:absolute;font-family:Rubik Mono One,sans-serif;line-height:1em;height:1em;width:100%;text-align:center;-webkit-transition:all .5s ease;-o-transition:.5s all ease;transition:all .5s ease;opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.stripe.active .letter{opacity:.05}.stripe.active .letter,.stripe.selected .letter{-webkit-transition-delay:0ms;-o-transition-delay:0ms;transition-delay:0ms}.stripe.selected .letter{cursor:pointer;opacity:1}.stripe.small .letter{font-size:.2em;-webkit-transition-delay:0ms;-o-transition-delay:0ms;transition-delay:0ms;opacity:.2}.stripe.active.small .letter{opacity:1}.background{position:absolute;width:100%;height:100%;opacity:.2}.stripe .background{-webkit-transition:all .5s ease;-o-transition:.5s all ease;transition:all .5s ease;-webkit-filter:blur(0) contrast(1) saturate();filter:blur(0) contrast(1) saturate()}.stripe.selected .background{-webkit-filter:blur(5px) contrast(.3) saturate(.2);filter:blur(5px) contrast(.3) saturate(.2)}.inner{position:absolute;bottom:0;width:100%;height:100%;text-align:center;overflow:auto}.preview div.generic{font-family:Rubik Mono One,sans-serif;font-size:30px}.stripe .preview{width:100%;height:100%;-webkit-transition:height .25s ease,-webkit-transform .25s ease .5s;transition:height .25s ease,-webkit-transform .25s ease .5s;-o-transition:.25s transform ease .5s,.25s height ease;transition:transform .25s ease .5s,height .25s ease;transition:transform .25s ease .5s,height .25s ease,-webkit-transform .25s ease .5s;-webkit-transform:translateY(calc(-100% - 1.2em));-ms-transform:translateY(calc(-100% - 1.2em));transform:translateY(calc(-100% - 1.2em))}.stripe.active .preview{-webkit-transition-delay:0ms;-o-transition-delay:0ms;transition-delay:0ms;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.stripe.active.small .preview{-webkit-transform:translateY(calc(-100% - 1.2em));-ms-transform:translateY(calc(-100% - 1.2em));transform:translateY(calc(-100% - 1.2em))}.mobile{height:100%;width:100%}.mobile .controls{position:absolute;top:0;left:0;width:calc(100% - 30px);height:100%;overflow-y:auto}.formRow{margin:10px;width:200px;text-align:left}.mobile .formRow{width:calc(100% - 20px)}@media (max-width:768px){.sequin-controls{display:none!important}}.formRow .number{font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";opacity:.5}.columnParent,.rowParent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-align:stretch;align-items:stretch}.columnParent{-ms-flex-direction:column;flex-direction:column}.flexChild{-ms-flex:1;flex:1 1;-ms-flex-item-align:auto;align-self:auto;min-height:0;min-width:0}.flexChild.shrink{-ms-flex:0 0 auto;flex:0 0 auto}.columnParent.reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.rowParent.reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexChild.scroll{overflow-y:auto;overflow-x:hidden}.flexCenter{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flexLeft{-ms-flex-align:left;align-items:left}.bottomList{justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;min-height:-moz-min-content;min-height:-webkit-min-content;min-height:min-content}.columnParent.wrap,.rowParent.wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flexWrap{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.block{padding:.1em;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;cursor:pointer}.block .blockInner{height:100%;width:100%;border:1px solid #000;background:rgba(2,40,50,.3);font-size:16px;line-height:1em;color:#666;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.block.fill .blockInner{background:#24d3fd}.block.selected .blockInner{border-color:#24d3fd}.block.fill.selected .blockInner{background:#24d3fd}.block.relative .blockInner{border-color:#fff}.block.ghosted .blockInner{border-color:#24d3fd}.hud{width:200%;height:200%;top:-50%;left:-50%;background:rgba(0,0,0,.5);border-radius:10px;z-index:1000}.hud,.x{position:absolute}.x{color:#fff;top:-10px;right:-15px;line-height:28px;font-size:23px;background:#000;width:30px;height:30px;border-radius:50%;text-align:center}.toggle{position:absolute;top:25%;left:25%;width:50%;height:50%;background:#24d3fd}.block.fill .toggle{background:#000;border:1px solid #24d3fd}.buttonBar{position:absolute;top:100%;width:100%;min-width:100px}.buttonBar button{line-height:2em;width:100%;display:block}hr{margin:0;border-color:#000}.controls{padding:15px}.settings{position:absolute;bottom:100%;right:0;background:rgba(0,0,0,.8);padding:10px;min-width:150px}button.selected{background:#24d3fd}.throbberContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;position:absolute;top:0;left:0}.throbberContainer .throbber{height:1em;width:1.5em;position:relative}.throbberContainer .throbber .bar{width:.4em;min-width:5px;height:.6em;min-height:8px;background:#fff;position:absolute;top:.2em;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-animation:1s lift infinite;animation:1s lift infinite}.throbberContainer .throbber .bar:first-of-type{left:0;-webkit-animation-delay:0ms;animation-delay:0s}.throbberContainer .throbber .bar:nth-of-type(2){left:.5em;-webkit-animation-delay:.1ms;animation-delay:.1s}.throbberContainer .throbber .bar:last-of-type{left:1em;-webkit-animation-delay:.3ms;animation-delay:.3s}.throbberContainer.dark .throbber .bar{background:#444950}@-webkit-keyframes lift{0%,50%{-webkit-transform:translateY(0) scaleY(1)}25%{-webkit-transform:translateY(-.2em) scaleY(.5)}}@keyframes lift{0%,50%{-webkit-transform:translateY(0) scaleY(1);transform:translateY(0) scaleY(1)}25%{-webkit-transform:translateY(-.2em) scaleY(.5);transform:translateY(-.2em) scaleY(.5)}}.container{max-width:1000px;width:100%;padding:30px;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box}.phoneInput{width:100%}.phoneOutput{text-align:center;font-size:2em;font-weight:600;line-height:1em;padding:8px 16px;margin:20px auto;background:hsla(0,0%,100%,.9);color:#000;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.leftArrow{width:0;height:0;margin-top:8px;margin-right:8px;cursor:pointer;border-style:solid;border-width:10px 20px 10px 0;border-color:transparent #aaa transparent transparent}.leftArrow:hover{border-color:transparent #000 transparent transparent}.rightArrow{width:0;height:0;margin-top:8px;margin-left:8px;cursor:pointer;border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #aaa}.rightArrow:hover{border-color:transparent transparent transparent #000}.zoom{margin:0 4px;font-variant-numeric:tabular-nums}.disabled{opacity:.3;pointer-events:none}.range.hide{opacity:0}.DC{opacity:0}.flex{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.board,.flex{display:-ms-flexbox;display:flex}.board{width:450px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.line{position:absolute;border:1px solid #fff;-webkit-box-sizing:border-box;box-sizing:border-box}.line.horizontal{width:100%;height:0}.line.horizontal.a{top:33.33333%}.line.horizontal.b{bottom:33.33333%}.line.vertical{height:100%;width:0}.line.vertical.a{left:33.33333%}.line.vertical.b{right:33.33333%}.cell{border:1px solid hsla(0,0%,100%,.4);-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;cursor:pointer;position:relative}.cell.selected{background-color:#24d3fd}.cell.alsoSelected{background-color:rgba(36,210,253,.5)}.cell.selected.given{background-color:rgba(36,210,253,.1)}.cell.invalid{color:red}.numberBoard,.pencilBoard{width:150px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.numberCell{border:1px solid hsla(0,0%,100%,.4);-webkit-box-sizing:border-box;box-sizing:border-box;width:50px;height:50px;cursor:pointer}.numberCell.selected{background:rgba(36,210,253,.5)}.number{font-size:35px;line-height:50px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.given .number{opacity:.7}.pencilGrid{font-weight:300}.centerPencilGrid,.pencilGrid{position:absolute;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-wrap:wrap;flex-wrap:wrap}.centerPencilGrid{bottom:0;right:0;font-weight:900}.pencil{padding:0 2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.guessed .centerPencilGrid,.guessed .pencilGrid{display:none}.controls .numberCell{height:44px;width:44px}.controls .number{font-size:26px;line-height:44px}.title{position:relative}.x{position:absolute;right:0}.flexWrap{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}.sequin{position:relative;background:-webkit-linear-gradient(315deg,#d8d8d8,#e8e8e8 25%,#dadada 50%,#c8c8c8 75%,#b8b8b8);background:-o-linear-gradient(315deg,#d8d8d8 0,#e8e8e8 25%,#dadada 50%,#c8c8c8 75%,#b8b8b8 100%);background:linear-gradient(135deg,#d8d8d8,#e8e8e8 25%,#dadada 50%,#c8c8c8 75%,#b8b8b8);border-radius:50%;height:130%;width:130%;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.8),inset 0 -1px 0 rgba(0,0,0,.2);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.8),inset 0 -1px 0 rgba(0,0,0,.2);-webkit-transition:-webkit-box-shadow .3s ease;transition:-webkit-box-shadow .3s ease;-o-transition:box-shadow .3s ease;transition:box-shadow .3s ease;transition:box-shadow .3s ease,-webkit-box-shadow .3s ease;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;cursor:pointer;overflow:hidden;-webkit-transform-origin:center 10%;-ms-transform-origin:center 10%;transform-origin:center 10%}.sequin:hover{-webkit-box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.9),inset 0 -1px 0 rgba(0,0,0,.3);box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.9),inset 0 -1px 0 rgba(0,0,0,.3)}.sequin.flipped{background:none;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 0 10px rgba(0,0,0,.3);box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 0 10px rgba(0,0,0,.3)}.sequinBox{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-perspective:1000px;perspective:1000px}.fade{-webkit-transition:all 1s ease;-o-transition:1s all ease;transition:all 1s ease;opacity:0}.fade.active{opacity:1}input{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0!important;margin-top:0!important}.chat-container{background-color:rgba(0,0,0,.5);padding:20px;border-radius:8px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);width:300px;margin:0 auto}.chat-area{height:300px;overflow-y:auto;border:1px solid #494949;border-radius:4px;padding:10px;margin-bottom:10px}.message{background-color:#02c5ff;border-radius:8px;padding:8px 12px;margin-bottom:10px;word-wrap:break-word;width:80%;text-align:right;color:#fff;margin-left:20%;-webkit-box-sizing:border-box;box-sizing:border-box}.message.received{background-color:#dddede;color:#000;margin-left:0;text-align:left}input{padding:10px;margin-top:10px;border:1px solid #ccc;border-radius:4px 0 0 4px}form.input{display:-ms-flexbox;display:flex}.prompt{-ms-flex:1 1;flex:1 1}button{padding:10px;margin-top:10px;background-color:#02c5ff;color:#fff;border:none;border-radius:0 4px 4px 0;cursor:pointer}button:hover{background-color:#04b2e7}
/*# sourceMappingURL=main.f459a6f9.css.map*/