:root {
  color-scheme: light dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #f7fbff;
  color: #243142;
  --page-bg-start: #fbfdff;
  --page-bg-end: #edf8f1;
  --canvas-bg: #fbfdff;
  --canvas-border: #c9d9ec;
  --canvas-focus: rgba(111, 168, 255, 0.35);
  --grid-color: #d2ddeb;
  --text-color: #243142;
  --header-row-color: #b9dbff;
  --header-col-color: #bef0cc;
  --square-color: #ffc4c4;
  --hover-color: #dbeaff;
  --button-color: #d8ebff;
  --button-hover: #c8f2d4;
}

@media (prefers-color-scheme: dark) {
  :root {
    background: #11161d;
    color: #f3f6fb;
    --page-bg-start: #18202a;
    --page-bg-end: #11161d;
    --canvas-bg: #1b222d;
    --canvas-border: #526071;
    --canvas-focus: rgba(150, 190, 255, 0.45);
    --grid-color: #506070;
    --text-color: #f3f6fb;
    --header-row-color: #6fa8ff;
    --header-col-color: #7ddf98;
    --square-color: #ff8f8f;
    --hover-color: #496996;
    --button-color: #3f5f86;
    --button-hover: #4f8060;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: linear-gradient(
    180deg,
    var(--page-bg-start) 0%,
    var(--page-bg-end) 100%
  );
}

.stage {
  display: grid;
  width: min(100vw, 700px);
  padding: clamp(8px, 2vw, 16px);
  place-items: center;
}

canvas {
  display: block;
  width: min(100%, 700px);
  max-height: calc(100vh - 16px);
  aspect-ratio: 700 / 760;
  border: 1px solid var(--canvas-border);
  background: var(--canvas-bg);
  outline: none;
  touch-action: manipulation;
}

canvas:focus-visible {
  border-color: var(--header-row-color);
  box-shadow: 0 0 0 3px var(--canvas-focus);
}