:root {
  --bg: #fafafa;
  --fg: #18181b;
  --muted: #71717a;
  --line: #e4e4e7;
  --field: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --fg: #f4f4f5;
    --muted: #a1a1aa;
    --line: #27272a;
    --field: #18181b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  /* Must stay explicit. The canvas carries a pixel width, so any layout that
     lets main size to its content will be inflated by it. */
  width: 100%;
  max-width: 520px;
  /* Auto margins take the free space, so main is centred in whatever is left
     over and the footer lands on the bottom edge. When the content is taller
     than the screen the free space is negative, the margins collapse to zero,
     and the page simply scrolls. */
  margin: auto;
}

footer {
  padding-top: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

footer a:hover {
  color: var(--fg);
  border-bottom-color: var(--muted);
}

footer span {
  padding: 0 6px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  margin: 0 0 6px;
  font-family: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
}

header p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

#stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}

#stage canvas {
  display: block;
}

#empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
}

#empty[hidden] {
  display: none;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  /* One row at any normal width. Below ~340px the three fixed items no longer
     fit, so the mode control drops to a second line rather than overflowing. */
  flex-wrap: wrap;
}

input,
button {
  font: inherit;
  font-size: 14px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--fg);
}

input {
  flex: 1 1 56px;
  /* Overrides the flex floor, which would otherwise be the input's
     20-character min-content width. */
  min-width: 56px;
  padding: 0 12px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

button {
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}

button:hover {
  border-color: var(--muted);
}

/* Segmented control. Both options always render, so its width does not change
   when the mode switches. */

.modes {
  display: flex;
  flex: none;
  height: 40px;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
}

.mode {
  height: 100%;
  min-width: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}

.mode:hover {
  color: var(--fg);
}

.mode[aria-checked='true'] {
  background: var(--fg);
  color: var(--bg);
}

.count {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}