* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 860px;
  padding: 16px;
  background: #1c1f26;
  color: #e8eaf0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 0 0 8px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
a { color: #8ec5ff; }

.panel {
  background: #262a33;
  border: 1px solid #3a4050;
  border-radius: 6px;
  padding: 14px;
  margin: 14px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

button, select, input {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #55607a;
  border-radius: 4px;
  background: #323847;
  color: #e8eaf0;
}

input { width: 9em; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #3f475b; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button[aria-pressed="true"] { background: #4a6fa5; border-color: #8ec5ff; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
}

canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  background: #12141a;
  border: 1px solid #3a4050;
}

#grid { touch-action: none; cursor: crosshair; width: 768px; }
.sheet { width: 768px; }
.extras { width: 512px; }

.hint, .status { color: #aab2c5; font-size: 0.9rem; }
.status { margin-left: auto; }
.note { font-size: 1.05rem; }

footer { border-top: 1px solid #3a4050; margin-top: 20px; padding-top: 10px; font-size: 0.9rem; color: #c3c9d8; }
[hidden] { display: none; }