:root {
  --bg: #fff;
  --bg-1: rgba(255,255,255,0.067);
  --bg-4: rgba(255,255,255,0.267);
  --color: #000;
  --color-c: rgba(0,0,0,0.8);
  --color-4: rgba(0,0,0,0.267);
  --color-1: rgba(0,0,0,0.067);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --bg-1: rgba(0,0,0,0.067);
    --bg-4: rgba(0,0,0,0.267);
    --color: #fff;
    --color-c: rgba(255,255,255,0.8);
    --color-4: rgba(255,255,255,0.267);
    --color-1: rgba(255,255,255,0.067);
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 32px;
  background: var(--bg);
  color: var(--color);
  user-select: none;
}
h1,
h2 {
  margin: 0;
  font-weight: 100;
  font-size: 64px;
}
h2 {
  font-size: 32px;
}
a {
  color: var(--color-c);
  text-decoration: none;
}
a:hover {
  color: var(--color);
}
@media (prefers-color-scheme: dark) {
  .dark-filter {
    display: block;
  }
}
[data-theme='dark'] .dark-filter {
  display: block;
}
[data-theme='light'] .dark-filter {
  display: none;
}
* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  margin: 0;
  height: calc(100vh - 120px);
  font-size: 16px;
  user-select: none;
}
body>* {
  max-width: 100vw;
  width: 577px;
}
body.full {
  height: 100vh;
}
.dark-animation .dark-filter-animation {
  width: 300vmax;
  height: 300vmax;
  transition: 0.5s height ease, 0.5s width ease;
}
.pc .btn:hover {
  background: rgba(136,136,136,0.133);
}
.pc .block:hover {
  background: #ddd;
}
.pc .dialog .btns>*:hover {
  background: rgba(136,136,136,0.133);
}
.color-filter,
.dark-filter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.color-filter {
  animation: 30s rainbow linear infinite;
}
.dark-filter {
  display: none;
  backdrop-filter: invert(1) hue-rotate(180deg);
}
.btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--size, 48px);
  height: var(--size, 48px);
  border-radius: var(--size, 48px);
  transition: 0.1s background;
}
.btn:active,
.btn.active {
  background: #69d647 !important;
  transition: 0s;
}
.nav {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 4px;
}
.flex {
  flex: auto;
}
.timer {
  display: flex;
  align-items: center;
  padding: 0 8px 0 6px;
  height: 27px;
  border-radius: 2px;
  border-radius: 3px;
  background: #111;
  color: #fff;
  gap: 2px;
}
.time {
  font-size: 18px;
  font-family: 'Ubuntu Mono', monospace;
}
.darkmode {
  position: relative;
}
.dark-filter-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  width: 0vmax;
  height: 0vmax;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: invert(1) hue-rotate(180deg);
}
.center {
  display: flex;
  flex: auto;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.table {
  max-width: 577px;
  max-height: 577px;
}
.block {
  position: relative;
  display: inline-block;
  width: min(calc((100vw - 20px) / 9), 557px / 9, calc((100vh - 240px) / 9));
  height: 100%;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
}
.block.default .cur-num {
  color: #3300d7;
}
.block .cur-num {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: min(calc((100vw - 20px) / 13), 557px / 13, calc((100vh - 240px) / 13));
}
.block .cur-num:not(:empty)+.mark-num {
  opacity: 0;
}
.block .mark-num {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.block .mark-num>* {
  width: calc((100% / 3));
  text-align: center;
  font-size: min(calc((100vw - 20px) / 36), 557px / 36, calc((100vh - 240px) / 36));
  line-height: min(calc((100vw - 20px) / 27), 557px / 27, calc((100vh - 240px) / 27));
  opacity: 0;
}
.block:first-child {
  border-left: 3px solid #888;
}
.block:nth-child(3),
.block:nth-child(6),
.block:last-child {
  border-right: 3px solid #888;
}
.block.hl {
  background: #a4f78b !important;
}
.block.active {
  background: #69d647 !important;
}
.block.fake-active {
  background: #69d647 !important;
}
.a .a,
.b .b,
.c .c,
.d .d,
.e .e,
.f .f,
.g .g,
.h .h,
.i .i {
  opacity: 1;
}
.show-error .block.error {
  z-index: 101;
  background: #f05a5a !important;
}
.line {
  display: flex;
  height: min(calc((100vw - 20px) / 9), 557px / 9, calc((100vh - 240px) / 9));
}
.line:first-child>* {
  border-top: 3px solid #888;
}
.line:nth-child(3)>*,
.line:nth-child(6)>*,
.line:last-child>* {
  border-bottom: 3px solid #888;
}
.do {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px;
  --size: 48px;
  gap: 10px;
}
.do>* {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  gap: 0;
}
.do>*>* {
  border: 1px solid rgba(0,0,0,0.267);
}
.label {
  font-size: 18px;
  line-height: 1.2;
}
.less {
  font-size: 12px;
  line-height: 1;
}
.tool {
  display: flex;
  padding: 4px;
  gap: 4px;
}
.mark {
  flex: auto;
}
.dialog {
  position: fixed;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0.533);
  opacity: 0;
  transition: 0.2s opacity;
  pointer-events: none;
}
.dialog>* {
  overflow: hidden;
  border-radius: 6px;
  background: #f8f8f8;
  transition: 0.2s transform;
  transform: translateY(-50px);
}
.dialog .title {
  padding: 10px;
  text-align: center;
  font-size: 18px;
}
.dialog .content {
  padding: 30px 10px;
  text-align: center;
}
.dialog .btns {
  display: flex;
  flex-wrap: wrap;
}
.dialog .btns>* {
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transition: 0.2s background;
}
.dialog .btns>*:active {
  background: rgba(136,136,136,0.533) !important;
}
.dialog.open {
  opacity: 1;
  pointer-events: all;
}
.dialog.open>* {
  transform: translateY(0px);
}
.main-btn {
  color: #3c7a29;
}
@media screen and (max-width: 879px) {
  .dialog .btns>* {
    width: calc(((100vw - 80px) / 2));
  }
}
.panel {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 98;
  margin: auto;
  height: 100vh;
  background: rgba(255,255,255,0);
  transition: 0.3s background;
  pointer-events: none;
}
.close-panel {
  height: 64px;
}
.save-load {
  position: absolute;
  top: calc(100vh + 8px);
  width: 100%;
  height: calc(100vh - 64px);
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: 0 -4px 4px rgba(0,0,0,0.533);
  transition: 0.3s top;
}
.save-load .title>* {
  padding: 20px 10px;
  text-align: center;
  font-size: 18px;
}
.save-load .content {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
  overflow: overlay;
  padding: 0 10px;
  height: calc(100vh - 128px);
  gap: 10px;
}
.save-load .content>* {
  width: min(calc((100vw - 40px) / 3), calc(537px / 3));
  height: min(calc((100vw - 40px) / 3), calc(537px / 3));
  border: 1px solid rgba(136,136,136,0.533);
  border-radius: 10px;
}
.save-load .content>*:not(.save-item) {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: min(calc((100vw - 35px) / 40), calc(537px / 35));
}
.save-load .content>*:not(.save-item)>* .icon {
  padding-bottom: 10px;
}
.save-load .content>*:not(.save-item) .icon {
  text-align: center;
  font-size: min(calc((100vw - 40px) / 10), calc(537px / 10));
}
.save-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.save-item .view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.save-item .view>* {
  display: flex;
}
.save-item .view>*>* {
  width: min(calc((100vw - 35px) / 40), calc(537px / 35));
  height: min(calc((100vw - 35px) / 40), calc(537px / 35));
  outline: 1px solid #bbb;
}
.save-item .view>* .h {
  background: #69d647;
}
.save-item>*:not(.view) {
  text-align: center;
  font-size: min(calc((100vw - 35px) / 40), calc(537px / 35));
}
.save-new,
.save-label,
.load-label,
.save-title,
.load-title {
  display: none;
}
.save-mode .save-label,
.save-mode .save-title {
  display: block;
}
.save-mode .save-load-outside,
.save-mode .save-new {
  display: flex;
}
.load-mode .load-label,
.load-mode .load-title {
  display: block;
}
.load-mode .save-load-outside {
  display: flex;
}
.save-mode,
.panel.load-mode {
  background: rgba(255,255,255,0.533);
  pointer-events: all;
}
.save-mode .save-load,
.panel.load-mode .save-load {
  top: 64px;
}
.input {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 98;
  margin: auto;
  height: 100vh;
}
.input div {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.533);
}
.input input {
  position: absolute;
  top: 30vh;
  width: 100%;
}
.win {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgba(255,255,255,0);
  transition: 0.3s background;
  pointer-events: none;
}
.win .icon {
  width: min(calc((100vw - 20px) / 5), 557px / 5, calc((100vh - 240px) / 5));
  height: min(calc((100vw - 20px) / 5), 557px / 5, calc((100vh - 240px) / 5));
  border: 1px solid #000;
  border-radius: 100%;
  background: #fff;
  text-align: center;
  font-size: min(calc((100vw - 20px) / 10), 557px / 10, calc((100vh - 240px) / 10));
  line-height: min(calc((100vw - 20px) / 5), 557px / 5, calc((100vh - 240px) / 5));
  transition: 0.3s transform;
  transform: scale(0);
}
.win.open {
  background: rgba(255,255,255,0.533);
  pointer-events: all;
}
.win.open .icon {
  transform: scale(1);
}
@-moz-keyframes rainbow {
  0% {
    backdrop-filter: hue-rotate(0deg);
  }
  100% {
    backdrop-filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes rainbow {
  0% {
    backdrop-filter: hue-rotate(0deg);
  }
  100% {
    backdrop-filter: hue-rotate(360deg);
  }
}
@-o-keyframes rainbow {
  0% {
    backdrop-filter: hue-rotate(0deg);
  }
  100% {
    backdrop-filter: hue-rotate(360deg);
  }
}
@keyframes rainbow {
  0% {
    backdrop-filter: hue-rotate(0deg);
  }
  100% {
    backdrop-filter: hue-rotate(360deg);
  }
}