* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Open Sans", sans-serif;
  color: #333;
  font-weight: 600;
  box-sizing: border-box;
}

html {
  height: 100%;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100%;
  display: grid;
  gap: 0px;
  align-content: stretch;
  justify-content: stretch;
  align-items: stretch;
  justify-items: stretch;
}
body.align-content-start {
  align-content: start;
}
body.justify-content-start {
  justify-content: start;
}
body.align-content-center {
  align-content: center;
}
body.justify-content-center {
  justify-content: center;
}
body.align-content-end {
  align-content: end;
}
body.justify-content-end {
  justify-content: end;
}
body.align-content-stretch {
  align-content: stretch;
}
body.justify-content-stretch {
  justify-content: stretch;
}
body.align-content-space-around {
  align-content: space-around;
}
body.justify-content-space-around {
  justify-content: space-around;
}
body.align-content-space-between {
  align-content: space-between;
}
body.justify-content-space-between {
  justify-content: space-between;
}
body.align-content-space-evenly {
  align-content: space-evenly;
}
body.justify-content-space-evenly {
  justify-content: space-evenly;
}
body.align-items-start {
  align-items: start;
}
body.justify-items-start {
  justify-items: start;
}
body.align-items-center {
  align-items: center;
}
body.justify-items-center {
  justify-items: center;
}
body.align-items-end {
  align-items: end;
}
body.justify-items-end {
  justify-items: end;
}
body.align-items-stretch {
  align-items: stretch;
}
body.justify-items-stretch {
  justify-items: stretch;
}

button {
  --height: auto;
  --font-size: 1.1rem;
  --primary-color: #30a8ee;
  --secondary-color: #fff;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  height: var(--height);
  transition: all 150ms;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-size);
  margin: 0;
  padding: 8px 12px;
}
button.large {
  --font-size: 2rem;
}
button.square {
  --height: calc(1.5 * var(--font-size));
  padding: 0;
}
button.purple {
  --primary-color: #6054b9;
}
button.yellow {
  --primary-color: #fae08b;
  --secondary-color: #333;
}
button.dark-gray {
  --primary-color: #555;
}
button.outlined {
  background-color: unset;
  color: var(--primary-color);
}
button.toggle:not([data-toggled]) {
  --primary-color: #555;
  background-color: unset;
  color: var(--primary-color);
}
button:hover {
  transform: scale(1.05);
}
button:active {
  transform: scale(0.95);
}

p {
  margin: 0;
  padding: 0;
}

.text {
  --font-size: 36px;
  --correction: 10.5px;
  font-size: var(--font-size);
  line-height: calc(var(--font-size) + var(--correction));
}
@media screen and (max-width: 600px) {
  .text {
    --font-size: 26px;
    --correction: 7.4px;
  }
}
.text::before {
  content: "";
  display: table;
  margin-bottom: calc(-1 * var(--correction));
}
.text::after {
  content: "";
  display: table;
  margin-top: calc(-1 * var(--correction));
}
.text.small {
  --font-size: 18px;
  --correction: 5.5px;
}
@media screen and (max-width: 600px) {
  .text.small {
    --font-size: 13px;
    --correction: 3.5px;
  }
}
.text.medium {
  --font-size: 27px;
  --correction: 8.8px;
}
@media screen and (max-width: 600px) {
  .text.medium {
    --font-size: 20px;
    --correction: 5.5px;
  }
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.full-size {
  width: 100%;
  height: 100%;
}

.square {
  aspect-ratio: 1;
}

.hidden {
  display: none;
}

.grid,
.stack,
.row {
  display: grid;
  gap: 16px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
}
.grid.align-content-start,
.stack.align-content-start,
.row.align-content-start {
  align-content: start;
}
.grid.justify-content-start,
.stack.justify-content-start,
.row.justify-content-start {
  justify-content: start;
}
.grid.align-content-center,
.stack.align-content-center,
.row.align-content-center {
  align-content: center;
}
.grid.justify-content-center,
.stack.justify-content-center,
.row.justify-content-center {
  justify-content: center;
}
.grid.align-content-end,
.stack.align-content-end,
.row.align-content-end {
  align-content: end;
}
.grid.justify-content-end,
.stack.justify-content-end,
.row.justify-content-end {
  justify-content: end;
}
.grid.align-content-stretch,
.stack.align-content-stretch,
.row.align-content-stretch {
  align-content: stretch;
}
.grid.justify-content-stretch,
.stack.justify-content-stretch,
.row.justify-content-stretch {
  justify-content: stretch;
}
.grid.align-content-space-around,
.stack.align-content-space-around,
.row.align-content-space-around {
  align-content: space-around;
}
.grid.justify-content-space-around,
.stack.justify-content-space-around,
.row.justify-content-space-around {
  justify-content: space-around;
}
.grid.align-content-space-between,
.stack.align-content-space-between,
.row.align-content-space-between {
  align-content: space-between;
}
.grid.justify-content-space-between,
.stack.justify-content-space-between,
.row.justify-content-space-between {
  justify-content: space-between;
}
.grid.align-content-space-evenly,
.stack.align-content-space-evenly,
.row.align-content-space-evenly {
  align-content: space-evenly;
}
.grid.justify-content-space-evenly,
.stack.justify-content-space-evenly,
.row.justify-content-space-evenly {
  justify-content: space-evenly;
}
.grid.align-items-start,
.stack.align-items-start,
.row.align-items-start {
  align-items: start;
}
.grid.justify-items-start,
.stack.justify-items-start,
.row.justify-items-start {
  justify-items: start;
}
.grid.align-items-center,
.stack.align-items-center,
.row.align-items-center {
  align-items: center;
}
.grid.justify-items-center,
.stack.justify-items-center,
.row.justify-items-center {
  justify-items: center;
}
.grid.align-items-end,
.stack.align-items-end,
.row.align-items-end {
  align-items: end;
}
.grid.justify-items-end,
.stack.justify-items-end,
.row.justify-items-end {
  justify-items: end;
}
.grid.align-items-stretch,
.stack.align-items-stretch,
.row.align-items-stretch {
  align-items: stretch;
}
.grid.justify-items-stretch,
.stack.justify-items-stretch,
.row.justify-items-stretch {
  justify-items: stretch;
}
.grid.gap-0,
.stack.gap-0,
.row.gap-0 {
  gap: 0px;
}
.grid.gap-1,
.stack.gap-1,
.row.gap-1 {
  gap: 4px;
}
.grid.gap-2,
.stack.gap-2,
.row.gap-2 {
  gap: 8px;
}
.grid.gap-3,
.stack.gap-3,
.row.gap-3 {
  gap: 12px;
}
.grid.gap-4,
.stack.gap-4,
.row.gap-4 {
  gap: 16px;
}
.grid.gap-5,
.stack.gap-5,
.row.gap-5 {
  gap: 20px;
}
.grid.gap-6,
.stack.gap-6,
.row.gap-6 {
  gap: 24px;
}
.grid.gap-7,
.stack.gap-7,
.row.gap-7 {
  gap: 28px;
}
.grid.gap-8,
.stack.gap-8,
.row.gap-8 {
  gap: 32px;
}
.grid.gap-9,
.stack.gap-9,
.row.gap-9 {
  gap: 36px;
}
.grid.gap-10,
.stack.gap-10,
.row.gap-10 {
  gap: 40px;
}

.grid.direction-content-alignment {
  justify-content: start;
}
.grid.direction-items-alignment {
  justify-items: start;
}
.grid.direction-content-alignment {
  justify-content: center;
}
.grid.direction-items-alignment {
  justify-items: center;
}
.grid.direction-content-alignment {
  justify-content: end;
}
.grid.direction-items-alignment {
  justify-items: end;
}
.grid.direction-content-alignment {
  justify-content: stretch;
}
.grid.direction-items-alignment {
  justify-items: stretch;
}
.grid.direction-content-alignment {
  justify-content: space-around;
}
.grid.direction-items-alignment {
  justify-items: space-around;
}
.grid.direction-content-alignment {
  justify-content: space-between;
}
.grid.direction-items-alignment {
  justify-items: space-between;
}
.grid.direction-content-alignment {
  justify-content: space-evenly;
}
.grid.direction-items-alignment {
  justify-items: space-evenly;
}
.grid.direction-content-alignment {
  align-content: start;
}
.grid.direction-items-alignment {
  align-items: start;
}
.grid.direction-content-alignment {
  align-content: center;
}
.grid.direction-items-alignment {
  align-items: center;
}
.grid.direction-content-alignment {
  align-content: end;
}
.grid.direction-items-alignment {
  align-items: end;
}
.grid.direction-content-alignment {
  align-content: stretch;
}
.grid.direction-items-alignment {
  align-items: stretch;
}
.grid.direction-content-alignment {
  align-content: space-around;
}
.grid.direction-items-alignment {
  align-items: space-around;
}
.grid.direction-content-alignment {
  align-content: space-between;
}
.grid.direction-items-alignment {
  align-items: space-between;
}
.grid.direction-content-alignment {
  align-content: space-evenly;
}
.grid.direction-items-alignment {
  align-items: space-evenly;
}

.page {
  width: 100%;
  height: 100%;
  padding: 16px 8px;
}

.page:not(.active) {
  display: none;
}

.template {
  display: none;
}

.game {
  display: grid;
  gap: 40px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  row-gap: 16px;
  grid-template-columns: minmax(auto, 600px) auto;
}
.game.align-content-start {
  align-content: start;
}
.game.justify-content-start {
  justify-content: start;
}
.game.align-content-center {
  align-content: center;
}
.game.justify-content-center {
  justify-content: center;
}
.game.align-content-end {
  align-content: end;
}
.game.justify-content-end {
  justify-content: end;
}
.game.align-content-stretch {
  align-content: stretch;
}
.game.justify-content-stretch {
  justify-content: stretch;
}
.game.align-content-space-around {
  align-content: space-around;
}
.game.justify-content-space-around {
  justify-content: space-around;
}
.game.align-content-space-between {
  align-content: space-between;
}
.game.justify-content-space-between {
  justify-content: space-between;
}
.game.align-content-space-evenly {
  align-content: space-evenly;
}
.game.justify-content-space-evenly {
  justify-content: space-evenly;
}
.game.align-items-start {
  align-items: start;
}
.game.justify-items-start {
  justify-items: start;
}
.game.align-items-center {
  align-items: center;
}
.game.justify-items-center {
  justify-items: center;
}
.game.align-items-end {
  align-items: end;
}
.game.justify-items-end {
  justify-items: end;
}
.game.align-items-stretch {
  align-items: stretch;
}
.game.justify-items-stretch {
  justify-items: stretch;
}
.game #info {
  grid-column: 1/span 2;
}
@media screen and (max-width: 600px) {
  .game {
    gap: 16px;
    grid-template-columns: 1fr;
  }
  .game #info {
    grid-column: 1;
  }
}

#table {
  display: grid;
  gap: 0px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  grid-template: repeat(9, 1fr)/repeat(9, 1fr);
  border: 4px solid #333;
  border-bottom: none;
  border-right: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}
#table.align-content-start {
  align-content: start;
}
#table.justify-content-start {
  justify-content: start;
}
#table.align-content-center {
  align-content: center;
}
#table.justify-content-center {
  justify-content: center;
}
#table.align-content-end {
  align-content: end;
}
#table.justify-content-end {
  justify-content: end;
}
#table.align-content-stretch {
  align-content: stretch;
}
#table.justify-content-stretch {
  justify-content: stretch;
}
#table.align-content-space-around {
  align-content: space-around;
}
#table.justify-content-space-around {
  justify-content: space-around;
}
#table.align-content-space-between {
  align-content: space-between;
}
#table.justify-content-space-between {
  justify-content: space-between;
}
#table.align-content-space-evenly {
  align-content: space-evenly;
}
#table.justify-content-space-evenly {
  justify-content: space-evenly;
}
#table.align-items-start {
  align-items: start;
}
#table.justify-items-start {
  justify-items: start;
}
#table.align-items-center {
  align-items: center;
}
#table.justify-items-center {
  justify-items: center;
}
#table.align-items-end {
  align-items: end;
}
#table.justify-items-end {
  justify-items: end;
}
#table.align-items-stretch {
  align-items: stretch;
}
#table.justify-items-stretch {
  justify-items: stretch;
}
#table .cell {
  display: grid;
  gap: 0px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  grid-template: repeat(3, 1fr)/repeat(3, 1fr);
  color: #30a8ee;
  cursor: pointer;
  position: relative;
  text-align: center;
  border: 1px solid #333;
  border-left: none;
  border-top: none;
  transition: all 150ms;
}
#table .cell.align-content-start {
  align-content: start;
}
#table .cell.justify-content-start {
  justify-content: start;
}
#table .cell.align-content-center {
  align-content: center;
}
#table .cell.justify-content-center {
  justify-content: center;
}
#table .cell.align-content-end {
  align-content: end;
}
#table .cell.justify-content-end {
  justify-content: end;
}
#table .cell.align-content-stretch {
  align-content: stretch;
}
#table .cell.justify-content-stretch {
  justify-content: stretch;
}
#table .cell.align-content-space-around {
  align-content: space-around;
}
#table .cell.justify-content-space-around {
  justify-content: space-around;
}
#table .cell.align-content-space-between {
  align-content: space-between;
}
#table .cell.justify-content-space-between {
  justify-content: space-between;
}
#table .cell.align-content-space-evenly {
  align-content: space-evenly;
}
#table .cell.justify-content-space-evenly {
  justify-content: space-evenly;
}
#table .cell.align-items-start {
  align-items: start;
}
#table .cell.justify-items-start {
  justify-items: start;
}
#table .cell.align-items-center {
  align-items: center;
}
#table .cell.justify-items-center {
  justify-items: center;
}
#table .cell.align-items-end {
  align-items: end;
}
#table .cell.justify-items-end {
  justify-items: end;
}
#table .cell.align-items-stretch {
  align-items: stretch;
}
#table .cell.justify-items-stretch {
  justify-items: stretch;
}
#table .cell[data-row="2"] {
  border-bottom-width: 4px;
}
#table .cell[data-column="2"] {
  border-right-width: 4px;
}
#table .cell[data-row="5"] {
  border-bottom-width: 4px;
}
#table .cell[data-column="5"] {
  border-right-width: 4px;
}
#table .cell[data-row="8"] {
  border-bottom-width: 4px;
}
#table .cell[data-column="8"] {
  border-right-width: 4px;
}
#table .cell.experimental {
  color: #6054b9;
}
#table .cell.experimental.selected-by-position {
  background-color: rgba(181, 173, 235, 0.4);
}
#table .cell.experimental.selected-by-value {
  background-color: rgba(79, 62, 207, 0.4);
}
#table .cell.experimental.active {
  background-color: rgba(169, 158, 250, 0.7);
}
#table .cell.selected-by-position {
  background-color: rgba(196, 222, 235, 0.4);
}
#table .cell.selected-by-value {
  background-color: rgba(64, 147, 191, 0.4);
}
#table .cell.hinted {
  background-color: #fae08b;
}
#table .cell.conflicting {
  color: #df4050;
  background-color: rgba(191, 64, 77, 0.4);
}
#table .cell.active {
  background-color: #b5e2fa;
}
#table .cell.locked {
  color: #333;
}
#table .cell.solved {
  color: #50cc90;
  background-color: rgba(64, 191, 130, 0.4);
}
#table .cell .note {
  color: #aaa;
}
#table .cell .note[data-value="1"] {
  grid-row: 1;
  grid-column: 1;
}
#table .cell .note[data-value="2"] {
  grid-row: 1;
  grid-column: 2;
}
#table .cell .note[data-value="3"] {
  grid-row: 1;
  grid-column: 3;
}
#table .cell .note[data-value="4"] {
  grid-row: 2;
  grid-column: 1;
}
#table .cell .note[data-value="5"] {
  grid-row: 2;
  grid-column: 2;
}
#table .cell .note[data-value="6"] {
  grid-row: 2;
  grid-column: 3;
}
#table .cell .note[data-value="7"] {
  grid-row: 3;
  grid-column: 1;
}
#table .cell .note[data-value="8"] {
  grid-row: 3;
  grid-column: 2;
}
#table .cell .note[data-value="9"] {
  grid-row: 3;
  grid-column: 3;
}
#table .cell .value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: inherit;
}

.button-panel {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  grid-template-areas: "m  m  m " "b1 b2 b3" "b4 b5 b6" "b7 b8 b9" "e  n  h " "x  x  x ";
}
.button-panel.align-content-start {
  align-content: start;
}
.button-panel.justify-content-start {
  justify-content: start;
}
.button-panel.align-content-center {
  align-content: center;
}
.button-panel.justify-content-center {
  justify-content: center;
}
.button-panel.align-content-end {
  align-content: end;
}
.button-panel.justify-content-end {
  justify-content: end;
}
.button-panel.align-content-stretch {
  align-content: stretch;
}
.button-panel.justify-content-stretch {
  justify-content: stretch;
}
.button-panel.align-content-space-around {
  align-content: space-around;
}
.button-panel.justify-content-space-around {
  justify-content: space-around;
}
.button-panel.align-content-space-between {
  align-content: space-between;
}
.button-panel.justify-content-space-between {
  justify-content: space-between;
}
.button-panel.align-content-space-evenly {
  align-content: space-evenly;
}
.button-panel.justify-content-space-evenly {
  justify-content: space-evenly;
}
.button-panel.align-items-start {
  align-items: start;
}
.button-panel.justify-items-start {
  justify-items: start;
}
.button-panel.align-items-center {
  align-items: center;
}
.button-panel.justify-items-center {
  justify-items: center;
}
.button-panel.align-items-end {
  align-items: end;
}
.button-panel.justify-items-end {
  justify-items: end;
}
.button-panel.align-items-stretch {
  align-items: stretch;
}
.button-panel.justify-items-stretch {
  justify-items: stretch;
}
@media screen and (max-width: 600px) {
  .button-panel {
    grid-template-areas: "b1 b2 b3 b4 b5" "b6 b7 b8 b9 e " "n  .  h  .  x" "m  m  m  m  m";
  }
}
.button-panel button.set-value {
  justify-self: center;
}
.button-panel button[data-value="1"] {
  grid-area: b1;
}
.button-panel button[data-value="2"] {
  grid-area: b2;
}
.button-panel button[data-value="3"] {
  grid-area: b3;
}
.button-panel button[data-value="4"] {
  grid-area: b4;
}
.button-panel button[data-value="5"] {
  grid-area: b5;
}
.button-panel button[data-value="6"] {
  grid-area: b6;
}
.button-panel button[data-value="7"] {
  grid-area: b7;
}
.button-panel button[data-value="8"] {
  grid-area: b8;
}
.button-panel button[data-value="9"] {
  grid-area: b9;
}
.button-panel button.erase {
  grid-area: e;
}
.button-panel button.notes {
  grid-area: n;
}
.button-panel button.hint {
  grid-area: h;
}
.button-panel button.experiment {
  grid-area: x;
}
.button-panel button.menu {
  grid-area: m;
}