*{box-sizing:border-box}html{display:flex;flex-direction:column;height:100%;background:#11a8e4}body{flex:1;margin:0}#root{display:contents}.info{padding:1em 1em 20em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.info,.info a{color:#f5f986}.info ul{padding:0 0 0 1.5em}.info li{padding:.25em 0;list-style:circle}.app{height:100vh;display:flex;flex-direction:column;align-items:center;transition:background 1s .4s}.app__block--board{width:100%}.app__block--keyboard{width:100%;position:fixed;bottom:-35%;transition:bottom .3s}.-show-keyboard .app__block--keyboard{bottom:0}.board,.board *{box-sizing:border-box;touch-action:none}.board{-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;opacity:1;transform:scale(1);transition:transform .5s,opacity .5s;--cell-padding: 1px;--board-width-cells: 8;--board-height-cells: 8;--board-width-px: calc(1px * var(--board-width-sc));width:var(--board-width-px);aspect-ratio:1;margin:0 auto;padding:5px;font-size:calc(.76px * var(--board-width-sc) / var(--board-width-cells));line-height:1.2}.board.-clear{transform:scale(0);opacity:0;transition:transform .5s .15s,opacity .5s .15s}.board__row{display:flex;width:100%;height:calc(100% / var(--board-height-cells))}.board__cell-spacing{padding:var(--cell-padding);width:calc(100% / var(--board-width-cells));height:100%}.board__cell{transition:transform .6s,color .2s;position:relative;width:100%;height:100%;background-color:#fff;border:1px solid black;text-align:center;box-shadow:0 0 3px #0003}.board__cell.--active-cell:after{position:absolute;bottom:0;left:0;width:100%;content:"_";font-weight:100;line-height:1.15}.board__cell--void{color:transparent;background-color:transparent;border-color:transparent;box-shadow:none}.board__cell:not(.board__cell--void){cursor:pointer}.board.-clear .board__cell{transform:scale(0);transition:transform .45s .2s}.mobile-keyboard-revealing-input{position:absolute;font-size:20px;width:2px;padding:0;margin:0;background:transparent;border:none;opacity:0}.keyboard-container{width:100%;background-color:#ebebeb;box-shadow:0 -1px 2px #00000026}@media (min-height: 700px){.keyboard-container{padding:1.5vh 0 2vh}}.keyboard{--keyboard-v-padding: calc(var(--keyboard-height) * .01);--keyboard-h-padding: calc(var(--keyboard-height) * .01);--key-spacing-aspect: 1.35;--key-spacing-width: calc(var(--keyboard-width) / 10);--key-spacing-height: calc( var(--key-spacing-width) * var(--key-spacing-aspect) );--key-font-size: calc(var(--key-spacing-width) / 2);--key-line-height: calc(var(--key-spacing-height) * .85);width:var(--keyboard-width);height:var(--keyboard-height);padding:var(--keyboard-v-padding) var(--keyboard-h-padding) 0;font-size:var(--key-font-size);line-height:calc(var(--key-line-height) * .9);-webkit-user-select:none;user-select:none;font-family:serif;margin:0 auto}.keyboard *{-webkit-user-select:none;user-select:none;color:#000}.keyboard__row{display:flex;justify-content:center;font-size:inherit;line-height:inherit;font-family:inherit}.keyboard__key-spacing{width:var(--key-spacing-width);height:var(--key-spacing-height);padding:1.6% .9%;font-size:inherit;line-height:inherit;font-family:inherit;border:none;touch-action:manipulation;background:transparent}.keyboard__key{border-radius:10%;background-color:#fff;box-shadow:0 1.5px 1.5px gray;width:100%;height:100%;text-align:center;position:relative}.keyboard__key--special{background-color:#d7d7d7;font-size:.9em}.keyboard__key--special .keyboard__key-letter{position:relative;top:1px}.keyboard__key-spacing:active .keyboard__key{transform:scale(.9) translateY(1px);filter:brightness(93%)}.app{background:#11a8e4}.-completion-complete-incorrect .app{background:#e42311}.-completion-complete-correct .app{background:#11e47a}.app__block--controls{width:100%;padding:0 2.5%;margin-top:90px}@media only screen and (max-width: 1100px){.app__block--controls{margin-top:55px}}.app__block--board{margin-top:60px}@media only screen and (max-width: 1100px){.app__block--board{margin-top:15px}}@media only screen and (max-width: 700px){.app__block--board{margin-top:5px}}.app__block--clues{margin-top:60px}@media only screen and (max-width: 1100px){.app__block--clues{position:fixed;margin-top:0;top:0;width:100%}}.app__block--completion{margin-top:40px}.app__completion{color:#ff0;font-family:math;font-size:1.5em;font-weight:700;font-style:italic;letter-spacing:1px;text-shadow:0 0 12px rgba(255,255,255,.5),0 0 2px black}.keyboard{--key-spacing-aspect: .8;--key-spacing-width: calc(var(--keyboard-width) / 6)}.-input-mode-candidates .keyboard__key-spacing[data-key="1"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="2"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="3"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="4"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="5"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="6"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="7"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="8"] .keyboard__key-letter,.-input-mode-candidates .keyboard__key-spacing[data-key="9"] .keyboard__key-letter{font-size:.5em;margin-left:1em;color:#009}.keyboard__key-spacing[data-key=N] .keyboard__key-letter{color:#009}.-input-mode-candidates .keyboard__key-spacing[data-key=N] .keyboard__key-letter{color:#000}.keyboard__key--grey{background-color:#ddd;opacity:.8}.keyboard__key-spacing--wide{width:calc(2 * var(--key-spacing-width))}.keyboard__key-spacing--wide .keyboard__key{border-radius:5%/10%}.controls{display:flex;flex-direction:row;align-items:center}.controls__sep{padding:0 1em;color:#0006}.controls__gap{padding:0 .3em}.controls__button{background:#ffffff26;border:1px solid rgba(0,0,0,.5);border-radius:6px;font-size:.8em;padding:.25em .5em;cursor:pointer;box-shadow:0 0 3px #0003;color:#0009}.controls__button:hover{background:#ffffff40}.controls__button:active{background:#0000001a;box-shadow:none}.app__block--board{margin-top:5px}.app__block--controls{margin-top:30px;width:calc(1px * var(--board-width-sc) - 16px);padding:0}.controls__line{display:flex}.controls__line:first-child{margin-bottom:9px}.controls__text{color:hsl(0,0,15%);text-shadow:0 -.8px hsl(0 0 90% / 50%);font-family:sans-serif;margin-left:1px;margin-right:1em;-webkit-user-select:none;user-select:none}.controls__text.--clickable,.controls__text.--clickable *{cursor:pointer}.controls__inline-button{border:none;background:none}.controls__text.--clickable:hover .controls__inline-button,.controls__inline-button:hover{color:#4d1919}.controls__text.--clickable:active .controls__inline-button,.controls__inline-button:active{transform:scale(.9)}.board__cell-candidates{font-size:32%;color:#0967aa;margin-left:15px}.board__cell-candidates-value{display:block;position:absolute;width:33%;height:33%;margin-left:-2%;margin-top:1%}.board__cell-candidates-value[data-n="1"]{top:5%;left:5%}.board__cell-candidates-value[data-n="2"]{top:5%;left:35%}.board__cell-candidates-value[data-n="3"]{top:5%;left:65%}.board__cell-candidates-value[data-n="4"]{top:35%;left:5%}.board__cell-candidates-value[data-n="5"]{top:35%;left:35%}.board__cell-candidates-value[data-n="6"]{top:35%;left:65%}.board__cell-candidates-value[data-n="7"]{top:65%;left:5%}.board__cell-candidates-value[data-n="8"]{top:65%;left:35%}.board__cell-candidates-value[data-n="9"]{top:65%;left:65%}.board{--cell-padding: 0;--board-width-cells: 9;--board-height-cells: 9;--s-border-width-sc: 2;--s-border-width-px: calc(1px * var(--s-border-width-sc));--s-in-border-colour: #555;--s-board-width-excl-border-sc: calc( (var(--board-width-sc) - var(--s-border-width-sc) * 4) );--s-fraction-norm: calc( var(--s-board-width-excl-border-sc) / (var(--board-width-sc) * var(--board-width-cells)) );--s-fraction-bordered: calc( var(--s-fraction-norm) + (var(--s-border-width-sc) / var(--board-width-sc)) );padding:0;border:4px solid #555}.board__cell{border-color:#333;border:none;box-shadow:0 0 0 1px #333}.board__row{height:calc(100% * var(--s-fraction-norm))}.board__row:nth-child(3),.board__row:nth-child(6){height:calc(100% * var(--s-fraction-bordered))}.board__row:nth-child(4),.board__row:nth-child(7){height:calc(100% * var(--s-fraction-bordered))}.board__row:nth-child(3) .board__cell,.board__row:nth-child(6) .board__cell{border-bottom:var(--s-border-width-px) solid var(--s-in-border-colour)}.board__row:nth-child(4) .board__cell,.board__row:nth-child(7) .board__cell{border-top:var(--s-border-width-px) solid var(--s-in-border-colour)}.board__row .board__cell-spacing{width:calc(100% * var(--s-fraction-norm))}.board__row .board__cell-spacing:nth-child(3),.board__row .board__cell-spacing:nth-child(6){width:calc(100% * var(--s-fraction-bordered))}.board__row .board__cell-spacing:nth-child(4),.board__row .board__cell-spacing:nth-child(7){width:calc(100% * var(--s-fraction-bordered))}.board__row .board__cell-spacing:nth-child(3) .board__cell,.board__row .board__cell-spacing:nth-child(6) .board__cell{border-right:var(--s-border-width-px) solid var(--s-in-border-colour)}.board__row .board__cell-spacing:nth-child(4) .board__cell,.board__row .board__cell-spacing:nth-child(7) .board__cell{border-left:var(--s-border-width-px) solid var(--s-in-border-colour)}.board__cell.--highlight-cell{background-color:#99f7ff}.board__cell.--seen-cell{background-color:#d2f5f9}.board__cell.--active-cell{background-color:#80f4ff}.board__cell{color:#0967aa}.board__cell.--given-cell{color:#0d0d0d}.board__cell.--duplicate{color:red}.board__cell.--check-error{color:red;text-decoration:line-through}.board__cell.--check-good{color:#15b300}.-complete-animation .board__cell.--active-cell:after{display:none}.-complete-animation .board__cell.--highlight-cell,.-complete-animation .board__cell.--active-cell,.-complete-animation .board__cell.--seen-cell{transition:background-color .1s .2s linear;background-color:#fff}@keyframes colour-in{0%{background-color:#fff}50%{background-color:var(--animation-colour)}75%{background-color:#fff}to{background-color:#fff}}.-complete-animation .board__cell{--animation-colour: hsl(185, 75%, 75%);--animation-it-duration: 1s;--animation-its: 4;transition:--background-color 2s linear}.-complete-animation .board__cell.--n1{animation:var(--animation-it-duration) linear 0s var(--animation-its) colour-in}.-complete-animation .board__cell.--n2{animation:var(--animation-it-duration) linear .1111s var(--animation-its) colour-in}.-complete-animation .board__cell.--n3{animation:var(--animation-it-duration) linear .2222s var(--animation-its) colour-in}.-complete-animation .board__cell.--n4{animation:var(--animation-it-duration) linear .3333s var(--animation-its) colour-in}.-complete-animation .board__cell.--n5{animation:var(--animation-it-duration) linear .4444s var(--animation-its) colour-in}.-complete-animation .board__cell.--n6{animation:var(--animation-it-duration) linear .5555s var(--animation-its) colour-in}.-complete-animation .board__cell.--n7{animation:var(--animation-it-duration) linear .6666s var(--animation-its) colour-in}.-complete-animation .board__cell.--n8{animation:var(--animation-it-duration) linear .7777s var(--animation-its) colour-in}.-complete-animation .board__cell.--n9{animation:var(--animation-it-duration) linear .8888s var(--animation-its) colour-in}.board__cell.--active-cell:after{display:none}.-timer-state-paused .board__cell-value,.-timer-state-paused .board__cell-candidates{transition:opacity .3s ease-out;opacity:0}.board:after{content:"";transition:opacity .3s ease-out .1s;opacity:0}.-timer-state-paused .board:after{opacity:1;content:"Paused";display:block;position:absolute;top:40%;padding:.5em;text-shadow:-2px -2px white,2px 2px white,-2px 2px white,2px -2px white}.-timer-state-paused .board__cell.--highlight-cell,.-timer-state-paused .board__cell.--active-cell,.-timer-state-paused .board__cell.--seen-cell{transition:background-color .1s .2s linear;background-color:#fff}
