.game{height:100%;max-width:420px;margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.game,.game>nav{display:-webkit-box;display:-ms-flexbox;display:flex}.game>nav{position:fixed;right:8px;top:8px;width:40px;height:40px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:50%;background:var(--background-transparent);outline:none;z-index:10;will-change:opacity;-webkit-transition:background-color .15s,opacity .15s;transition:background-color .15s,opacity .15s}.game .dropdown{position:fixed;right:8px;top:52px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.2);box-shadow:0 1px 3px 0 rgba(0,0,0,.2);border-radius:4px;min-width:170px;-webkit-transition:opacity .15s,-webkit-transform .15s;transition:opacity .15s,-webkit-transform .15s;transition:opacity .15s,transform .15s;transition:opacity .15s,transform .15s,-webkit-transform .15s;-webkit-transform-origin:right top;transform-origin:right top}.game .dropdown-item{padding:16px 18px;background:var(--dropdown-background);-webkit-transition:background-color .15s;transition:background-color .15s}.game .dropdown-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.game .dropdown-item:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}.game .dropdown-item:hover{outline:none;background:var(--dropdown-hover)}.game .dropdown-enter,.game .dropdown-leave-to{opacity:0}.game .dropdown-enter.dropdown,.game .dropdown-enter>.dropdown,.game .dropdown-leave-to.dropdown,.game .dropdown-leave-to>.dropdown{-webkit-transform:scale(.9);transform:scale(.9)}.color{width:40px;height:40px;margin:4px 2px;border-radius:50%;color:var(--background);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.color0{background:var(--color0);--selected:var(--color0-selected)}.color1{background:#f44336;--selected:rgba(244,67,54,0.5)}.color2{background:#9c27b0;--selected:rgba(156,39,176,0.5)}.color3{background:#3f51b5;--selected:rgba(63,81,181,0.5)}.color4{background:#03a9f4;--selected:rgba(3,169,244,0.5)}.color5{background:#009688;--selected:rgba(0,150,136,0.5)}.color6{background:#8bc34a;--selected:rgba(139,195,74,0.5)}.color7{background:#ffeb3b;--selected:rgba(255,235,59,0.5)}.color8{background:#ffc107;--selected:rgba(255,193,7,0.5)}.attempts{margin-top:auto;padding-top:8px;padding-bottom:124px}.colors8>.attempts{padding-bottom:156px}.attempt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;padding-bottom:4px}.attempt>.number{width:40px;text-align:center}.attempt>.result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}.attempt>.result.result3{width:54px}.attempt:last-child{position:fixed;left:0;right:0;max-width:420px;margin:0 auto;will-change:opacity;bottom:72px;z-index:1}.colors8>.attempts>.attempt:last-child{bottom:104px}.attempt.current>.color{position:relative;cursor:pointer;-webkit-box-shadow:0 0 0 0 var(--selected);box-shadow:0 0 0 0 var(--selected);-webkit-transition:background-color .15s,-webkit-box-shadow .15s;transition:background-color .15s,-webkit-box-shadow .15s;transition:background-color .15s,box-shadow .15s;transition:background-color .15s,box-shadow .15s,-webkit-box-shadow .15s}.attempt.current>.color.selected{-webkit-box-shadow:0 0 0 4px var(--selected);box-shadow:0 0 0 4px var(--selected)}.attempt.current>.result{margin:4px 0;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:color .15s;transition:color .15s;cursor:pointer}.attempt.current>.result.disabled{color:var(--color0-selected)}.colors{position:fixed;left:0;right:0;max-width:420px;margin:0 auto;will-change:opacity;bottom:0;min-height:128px;padding:56px 0 8px 0;background:var(--background-transparent);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(-webkit-min-content,64px);grid-auto-columns:minmax(min-content,64px);justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-transition:background-color .15s;transition:background-color .15s;border-top-left-radius:4px;border-top-right-radius:4px}.colors>.color{cursor:pointer}.colors>.button{grid-column:1/-1}.colors8>.colors{min-height:160px;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(-webkit-min-content,64px));grid-template-columns:repeat(4,minmax(min-content,64px))}.how-to-play-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.how-to-play{margin:auto;max-width:420px;padding:16px;line-height:1.25}.how-to-play>h1{text-align:center;font-weight:lighter;margin-top:0}.how-to-play>.dot-black,.how-to-play>.dot-white{display:inline-block;margin:0 4px 0 0}.how-to-play .button{margin:24px auto 0 auto}.settings{display:grid;grid-template-rows:minmax(56px,1fr) auto 1fr;height:100%}.settings>nav{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:56px;padding-right:4px}.settings>nav,.settings>nav>.item{display:-webkit-box;display:-ms-flexbox;display:flex}.settings>nav>.item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 12px;cursor:pointer}.settings>main{margin:0 auto;width:100%;max-width:420px;padding:8px}.settings .property{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.settings .button-group,.settings .switch,.settings .title{margin:8px}.settings .button-group{display:-webkit-box;display:-ms-flexbox;display:flex}.settings .button-group>.value{padding:8px;min-width:52px;margin-left:-1px;line-height:1.25;border:1px solid var(--color);cursor:pointer;-webkit-transition:background-color .15s;transition:background-color .15s;text-align:center}.settings .button-group>.value.selected{background:var(--color);color:var(--background)}.settings .button-group>.value:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.settings .button-group>.value:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.settings .switch{position:relative;width:68px;height:38px;background:var(--color);opacity:.5;border-radius:38px;cursor:pointer;-webkit-transition:opacity .3s,background-color .15s;transition:opacity .3s,background-color .15s}.settings .switch:before{content:"";position:absolute;width:30px;height:30px;left:4px;top:4px;background:var(--background);border-radius:50%;-webkit-transition:background-color .15s,-webkit-transform .3s;transition:background-color .15s,-webkit-transform .3s;transition:transform .3s,background-color .15s;transition:transform .3s,background-color .15s,-webkit-transform .3s}.settings .switch.on{opacity:1}.settings .switch.on:before{-webkit-transform:translateX(30px);transform:translateX(30px)}.settings .button{margin:24px auto 8px auto}body{--background:#fff;--background-transparent:hsla(0,0%,100%,0.97);--color:#222;--color0:#e9e9e9;--color0-selected:#d3d3d3;--dropdown-background:#fbfbfb;--dropdown-hover:#f4f4f4}@media(prefers-color-scheme:dark){body{--background:#000;--background-transparent:rgba(0,0,0,0.95);--color:#e5e5e5;--color0:#1b1b1b;--color0-selected:#373737;--dropdown-background:#171717;--dropdown-hover:#1e1e1e}}body{margin:0;background:var(--background);color:var(--color);font-size:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-ms-scroll-chaining:none;overscroll-behavior:none;-webkit-transition:background-color .15s;transition:background-color .15s}noscript>div{padding:8px}#app,body,html{height:100%}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}.button{padding:16px;width:210px;background:var(--color);color:var(--background);border-radius:100px;text-align:center;cursor:pointer;line-height:normal;-webkit-transition:background-color .15s;transition:background-color .15s}.svg-icon{width:24px;height:24px;fill:currentColor}.dot-none{width:6px;height:6px;margin:6px;border-radius:50%;background:var(--color0);-webkit-transition:background-color .15s;transition:background-color .15s}.dot-black,.dot-white{width:14px;height:14px;margin:2px;border-radius:50%;border:2px solid var(--color)}.dot-black{padding:2px;background:var(--color);background-clip:content-box}