@charset "UTF-8";#game{outline:0;background-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.thermometers-cell-back{print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important;color-adjust:exact!important;background-color:#ccc}.task{outline:0;position:absolute;font-weight:700}.task.cell{background-color:transparent;border:none}.task.h{text-align:right;line-height:25px}.task.v{line-height:45px}.task.done{color:#aaa}.nightmode .task.done{color:#aaa}.task.err{color:#c00}.nightmode .task.err{color:#c00}.colorblind .task.err{color:#6cf}.nightmode .task.cell{background-color:transparent;border-color:transparent}.counter{position:absolute;font-size:12px;text-align:center}.counter.h{line-height:30px}.counter.v{line-height:30px}.counter .icon{display:none;color:#0c0}.counter .icon:before{margin-left:0}.nightmode .counter{color:#000}.cell{outline:0;position:absolute;color:#000;font-size:18px;line-height:28px;text-align:center;box-sizing:border-box;background-color:#fff;border:1px solid #fff}.bgcolor-1 .cell.selectable{background-color:var(--bg-color-1);border:1px solid var(--bg-color-1)}.bgcolor-2 .cell.selectable{background-color:var(--bg-color-2);border:1px solid var(--bg-color-2)}.bgcolor-3 .cell.selectable{background-color:var(--bg-color-9);border:1px solid var(--bg-color-9)}.bgcolor-4 .cell.selectable{background-color:var(--bg-color-4);border:1px solid var(--bg-color-4)}.bgcolor-5 .cell.selectable{background-color:var(--bg-color-5);border:1px solid var(--bg-color-5)}.cell .inner{position:absolute;left:-1px;top:-1px;width:32px;height:32px;pointer-events:none;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important;color-adjust:exact!important}.cell.r1 .inner{transform:rotate(90deg)}.cell.r2 .inner{transform:rotate(180deg)}.cell.r3 .inner{transform:rotate(270deg)}.cell.start .inner{background-color:transparent;background-image:url('data:image/svg+xml;utf8,        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <style>.inner{fill: rgb(204,204,204)} line {stroke: rgb(0, 0, 0); stroke-width: 2}</style>        <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:5" cx="50" cy="50" rx="30" ry="30"></ellipse>        <ellipse class="inner" cx="50" cy="50" rx="18" ry="18"></ellipse>        <rect x="30" width="40" style="fill: rgb(0, 0, 0);" height="25"></rect>        <rect x="36" width="28" height="28" style="fill: rgb(255, 255, 255);"></rect>        <rect class="inner" x="43" width="14" height="35"></rect>        <line class="inner" x1="45" y1="12.5" x2="55" y2="12.5"></line>        </svg>')}.cell.straight .inner{background-image:url('data:image/svg+xml;utf8,        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <style>.inner{fill: rgb(204,204,204)} line {stroke: rgb(0, 0, 0); stroke-width: 2}</style>        <rect x="30" y="0" width="40" height="100" style="fill: rgb(0, 0, 0);"></rect>        <rect x="36" width="28" height="100" style="fill: rgb(255, 255, 255);"></rect>        <rect class="inner" x="43" width="14" height="100"></rect>        <line x1="45" y1="12.5" x2="55" y2="12.5"></line>        <line x1="45" y1="37.5" x2="55" y2="37.5"></line>        <line x1="45" y1="62.5" x2="55" y2="62.5"></line>        <line x1="45" y1="87.5" x2="55" y2="87.5"></line>        </svg>')}.cell.end .inner{background-image:url('data:image/svg+xml;utf8,        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <style>.inner{fill: rgb(204,204,204)} line {stroke: rgb(0, 0, 0); stroke-width: 2}</style>        <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:6" cx="50" cy="60" rx="17" ry="17"></ellipse>        <ellipse class="inner" cx="50" cy="60" rx="7" ry="7"></ellipse>        <rect x="30" width="40" height="58" style="fill: rgb(0, 0, 0);"></rect>        <rect x="36" width="28" height="59" style="fill: rgb(255, 255, 255);" y="0"></rect>        <rect class="inner" x="43" width="14" height="60"></rect>        <line x1="45" y1="12.5" x2="55" y2="12.5"></line>        <line x1="45" y1="37.5" x2="55" y2="37.5"></line>        </svg>')}.cell.curve .inner{background-image:url('data:image/svg+xml;utf8,        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">        <style>.inner{fill: rgb(204,204,204)} line {stroke: rgb(0, 0, 0); stroke-width: 2}</style>        <rect x="30" width="40" height="48" style="fill: rgb(0, 0, 0);"></rect>        <rect x="52" width="48" height="40" style="fill: rgb(0, 0, 0);" y="30"></rect>        <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:6" cx="50" cy="50" rx="17" ry="17"></ellipse>        <rect x="51" width="49" height="28" style="fill: rgb(255, 255, 255);" y="36"></rect>        <ellipse class="inner" cx="50" cy="50" rx="7" ry="7"></ellipse>        <rect x="36" width="28" height="49" style="fill: rgb(255, 255, 255);"></rect>        <rect class="inner" x="43" width="14" height="50"></rect>        <line x1="45" y1="12.5" x2="55" y2="12.5"></line>        <line x1="45" y1="37.5" x2="55" y2="37.5"></line>        <rect class="inner" x="50" width="50" height="14" y="43"></rect>        <line x1="87.5" y1="45" x2="87.5" y2="55"></line>        <line x1="62.5" y1="45" x2="62.5" y2="55"></line>        </svg>')}.cell.cell-on{background-color:#fff!important;border-color:#fff!important}.cell.cell-on.start .inner{background-color:transparent;background-image:url('data:image/svg+xml;utf8,            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">            <style>.inner{fill: rgb(153, 0, 0)} line {stroke: rgb(255,255,255); stroke-width: 2}</style>            <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:5" cx="50" cy="50" rx="30" ry="30"></ellipse>            <ellipse class="inner" cx="50" cy="50" rx="18" ry="18"></ellipse>            <rect x="30" width="40" style="fill: rgb(0, 0, 0);" height="25"></rect>            <rect x="36" width="28" height="28" style="fill: rgb(255, 255, 255);"></rect>            <rect class="inner" x="43" width="14" height="35"></rect>            <line class="inner" x1="45" y1="12.5" x2="55" y2="12.5"></line>            </svg>')}.cell.cell-on.straight .inner{background-image:url('data:image/svg+xml;utf8,            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">            <style>.inner{fill: rgb(153, 0, 0)} line {stroke: rgb(255,255,255); stroke-width: 2}</style>            <rect x="30" y="0" width="40" height="100" style="fill: rgb(0, 0, 0);"></rect>            <rect x="36" width="28" height="100" style="fill: rgb(255, 255, 255);"></rect>            <rect class="inner" x="43" width="14" height="100"></rect>            <line x1="45" y1="12.5" x2="55" y2="12.5"></line>            <line x1="45" y1="37.5" x2="55" y2="37.5"></line>            <line x1="45" y1="62.5" x2="55" y2="62.5"></line>            <line x1="45" y1="87.5" x2="55" y2="87.5"></line>            </svg>')}.cell.cell-on.end .inner{background-image:url('data:image/svg+xml;utf8,            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">            <style>.inner{fill: rgb(153, 0, 0)} line {stroke: rgb(255,255,255); stroke-width: 2}</style>            <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:6" cx="50" cy="60" rx="17" ry="17"></ellipse>            <ellipse class="inner" cx="50" cy="60" rx="7" ry="7"></ellipse>            <rect x="30" width="40" height="58" style="fill: rgb(0, 0, 0);"></rect>            <rect x="36" width="28" height="59" style="fill: rgb(255, 255, 255);" y="0"></rect>            <rect class="inner" x="43" width="14" height="60"></rect>            <line x1="45" y1="12.5" x2="55" y2="12.5"></line>            <line x1="45" y1="37.5" x2="55" y2="37.5"></line>            </svg>')}.cell.cell-on.curve .inner{background-image:url('data:image/svg+xml;utf8,            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">            <style>.inner{fill: rgb(153, 0, 0)} line {stroke: rgb(255,255,255); stroke-width: 2}</style>            <rect x="30" width="40" height="48" style="fill: rgb(0, 0, 0);"></rect>            <rect x="52" width="48" height="40" style="fill: rgb(0, 0, 0);" y="30"></rect>            <ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width:6" cx="50" cy="50" rx="17" ry="17"></ellipse>            <rect x="51" width="49" height="28" style="fill: rgb(255, 255, 255);" y="36"></rect>            <ellipse class="inner" cx="50" cy="50" rx="7" ry="7"></ellipse>            <rect x="36" width="28" height="49" style="fill: rgb(255, 255, 255);"></rect>            <rect class="inner" x="43" width="14" height="50"></rect>            <line x1="45" y1="12.5" x2="55" y2="12.5"></line>            <line x1="45" y1="37.5" x2="55" y2="37.5"></line>            <rect class="inner" x="50" width="50" height="14" y="43"></rect>            <line x1="87.5" y1="45" x2="87.5" y2="55"></line>            <line x1="62.5" y1="45" x2="62.5" y2="55"></line>            </svg>')}.cell .inner::after,.cell .inner::before{content:"";width:20px;height:20px;position:absolute;top:-6px;left:6px;pointer-events:none}.cell .inner::before{border-bottom:4px solid transparent;-webkit-transform:skewY(-45deg);transform:skewY(-45deg)}.cell .inner::after{border-bottom:4px solid transparent;-webkit-transform:skewY(45deg);transform:skewY(45deg)}.cell.cell-x{color:#c00;font-size:15px;background-color:#fff!important;border-color:#fff!important}.cell.cell-x .inner::after,.cell.cell-x .inner::before{content:"";width:20px;height:20px;position:absolute;top:-6px;left:6px;pointer-events:none}.cell.cell-x .inner::before{border-bottom:4px solid #333;-webkit-transform:skewY(-45deg);transform:skewY(-45deg)}.cell.cell-x .inner::after{border-bottom:4px solid #333;-webkit-transform:skewY(45deg);transform:skewY(45deg)}.kbd .cell:focus{outline:1px solid #2196f3;outline:-webkit-focus-ring-color auto 5px}.kbd .cell:-moz-focusring{outline:1px solid #2196f3}.cell.active{outline:1px solid #2196f3}.cell.highlighted{background-color:#e6ffe6}.cell.cell-crosshair{border:1px solid red}.cell.blockerr{background-color:#f66}.colorblind .cell.blockerr{background-color:#6cf}.coordinate-sign{position:absolute;font-size:13px;color:#999;z-index:1000;line-height:30px}.btn .game-style{position:absolute;background-color:#fff;border:1px solid #000;position:absolute;top:10px;left:10px;width:20px;height:20px;font-size:20px}.btn .game-style.color-1{background-color:var(--bg-color-1)}.btn .game-style.color-2{background-color:var(--bg-color-2)}.btn .game-style.color-3{background-color:var(--bg-color-9)}.btn .game-style.color-4{background-color:var(--bg-color-4)}.btn .game-style.color-5{background-color:var(--bg-color-5)}.btn .game-style-on{background-color:#900;font-size:15px}.btn .game-style-on:before{display:block;margin-left:3px;margin-top:3px}.btn .game-style-x:before{display:block;margin-left:0;margin-top:0}.btn .color-arrow-down{transform:rotate(45deg);-webkit-transform:rotate(45deg);border:solid #000;border-width:0 2px 2px 0;padding:1px;display:block;width:2px;height:2px;position:absolute;top:34px;left:18px}.portrait .mobile .btn .color-arrow-down{transform:rotate(225deg);-webkit-transform:rotate(225deg);top:4px}.landscape .mobile .btn .color-arrow-down{transform:rotate(135deg);-webkit-transform:rotate(135deg);top:18px;left:4px}.btn.rotate .game-style{width:13px;height:13px;font-size:13px}.btn.rotate .game-style-on{top:10px;left:7px;font-size:11px;background-color:#900}.btn.rotate .game-style-on:before{margin-left:1px;margin-top:1px}.btn.rotate .game-style-off{top:21px;left:12px}.btn.rotate .game-style-x{top:14px;left:22px}.options .bgcolor{padding-top:5px;height:60px}.options .bgcolor .btn{padding:0;min-width:0}.options .bgcolor .btn:active{box-shadow:none;background-color:rgba(0,0,0,0)}.options .bgcolor .btn .game-style{top:5px}.options .bgcolor .btn span{margin:15px 10px 0 0}.options .bgcolor .btn input{margin-left:15px}.animate-transitions .cell,.animate-transitions .cell .inner,.animate-transitions .cell .inner:before,.animate-transitions .cell :after{transition:background-color .2s,border-color .2s,border-bottom .2s,background-image .2s}.animate-transitions .task{transition:color .2s}.game-btn-on{--game-style-color:#900}.game-btn-x{--game-style-color:#fff;line-height:1.3rem}.game-btn-x:before{color:#000;font-size:15px}@media screen{.darkmode{--bg-color-9:var(--bg-color-3)}.darkmode .thermometers-cell-back{filter:invert(100%) hue-rotate(180deg);outline:3px solid #333}.darkmode .task.done{color:#aaa}.darkmode .selectable{background-color:#f8ecc2;border-color:#f8ecc2}.darkmode .cell.cell-on,.darkmode .cell.cell-x{background-color:#f8ecc2!important;border-color:#f8ecc2!important}.nightmode #game{background-color:#f8ecc2}.nightmode .cell{background-color:#f8ecc2;border-color:#f8ecc2}.nightmode .cell.selectable.highlighted{background-color:#e6ffe6}.nightmode .cell.selectable.color-1{background-color:#ddd}.nightmode .cell.selectable.color-2{background-color:var(--bg-color-2)}.nightmode .cell.selectable.color-3{background-color:var(--bg-color-9)}.nightmode .cell.selectable.color-4{background-color:var(--bg-color-4)}.nightmode .cell.selectable.color-5{background-color:var(--bg-color-1)}.nightmode .cell.selectable.color-6{background-color:var(--bg-color-1)}.nightmode .cell.selectable.color-7{background-color:var(--bg-color-3)}.nightmode .cell.selectable.color-8{background-color:var(--bg-color-8)}.nightmode .cell.selectable.color-9{background-color:var(--bg-color-5)}.nightmode .cell.selectable.blockerr{background-color:#f66}.colorblind .nightmode .cell.selectable.blockerr{background-color:#6cf}.nightmode .cell.selectable.cell-on,.nightmode .cell.selectable.cell-x{background-color:#f8ecc2!important;border-color:#f8ecc2!important}.nightmode .task{color:#000}.nightmode .control{background-color:#f8ecc2}}