:root {
  --bg: #f3ece0;
  --fg: #1d1a17;
  --muted: #5c5148;
  --line: #8a7a69;
  --accent: #a4442c;
  --on-accent: #fff;
  --raise: #fffaf2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --fg: #eee5d6;
    --muted: #b3a593;
    --line: #6e6153;
    --accent: #e0835f;
    --on-accent: #1a1714;
    --raise: #26211c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: 0 16px;
}
header { text-align: center; margin: 1rem 0 .25rem; }
h1 { font: 2.4rem/1 'Rubik Dirt', system-ui, sans-serif; margin: 0; }
.tagline { margin: .25rem 0 0; color: var(--muted); font-style: italic; }
main { width: 100%; display: flex; flex-direction: column; align-items: center; }
h2 { font-size: 1rem; font-weight: 600; margin: .5rem 0; color: var(--muted); }

.wall {
  position: relative;
  isolation: isolate;
  width: min(100%, max(18rem, calc((100svh - 17rem) * 4 / 3)));
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgb(0 0 0 / .25);
  opacity: .6;
  transition: opacity .2s;
}
.wall.ready { opacity: 1; }
.wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#earth { mix-blend-mode: multiply; }
#relief { mix-blend-mode: hard-light; }
#touch { touch-action: none; cursor: crosshair; outline: none; }
.wall:has(#touch:focus-visible) { outline: 3px solid var(--fg); outline-offset: 3px; }

.kit {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: center;
  align-items: center;
  margin-top: .75rem;
  max-width: 60rem;
}
fieldset { border: 0; margin: 0; padding: 0; }
#palette { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.swatch {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.swatch input, .tools input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.swatch:has(:checked) { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fg); }
.swatch:has(:focus-visible) { outline: 3px dashed var(--fg); outline-offset: 5px; }
.swatch.locked {
  background: repeating-linear-gradient(45deg, var(--raise) 0 6px, var(--bg) 6px 12px);
  color: var(--muted);
  font-weight: 700;
  cursor: not-allowed;
}

.tools { display: flex; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; }
.tools label { position: relative; min-height: 44px; display: grid; place-items: center; padding: 0 1rem; cursor: pointer; }
.tools label:has(:checked) { background: var(--fg); color: var(--bg); }
.tools label:has(:focus-visible) { outline: 3px dashed var(--accent); outline-offset: -5px; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
button {
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  color: var(--fg);
  background: var(--raise);
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 3px dashed var(--fg); outline-offset: 2px; }
button.home { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

#status { min-height: 1.4em; margin: .75rem 0 0; text-align: center; font-weight: 600; }
footer { margin: auto 0 1rem; padding-top: 1.5rem; font-size: .875rem; color: var(--muted); text-align: center; }
footer a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .wall { transition: none; } }