:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #2c1b15;
  background: #f8ebd6;
}
body { margin: 0; }
main { max-width: 58rem; margin: auto; padding: clamp(1rem, 4vw, 3rem); }
header { border-bottom: 2px solid #9b5335; padding-bottom: .7rem; }
h1, h2 { font-family: Georgia, serif; }
h1 { margin: .25rem 0; font-size: clamp(2.2rem, 7vw, 4.5rem); }
p { line-height: 1.55; }
.label { color: #793817; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
nav, .tools { display: flex; flex-wrap: wrap; gap: .5rem; }
nav { margin: 1rem 0; }
button { font: inherit; font-weight: 700; cursor: pointer; color: #fff7df; background: #653321; border: 1px solid #653321; border-radius: .5rem; padding: .65rem .9rem; min-height: 44px; }
button[aria-current="step"] { background: #20564d; border-color: #20564d; }
button:disabled { opacity: .58; cursor: default; }
button:focus-visible { outline: 3px solid #1b6c65; outline-offset: 3px; }
#workshop { display: grid; grid-template-columns: 1fr minmax(0, 1fr); gap: 1.5rem; background: #fff8eb; padding: clamp(.75rem, 3vw, 1.5rem); border-radius: .8rem; align-items: start; }
#board { display: grid; gap: .25rem; grid-template-columns: repeat(var(--size), minmax(0, 1fr)); background: #35221a; border: .4rem solid #35221a; border-radius: .7rem; width: 100%; max-width: 27rem; box-sizing: border-box; }
.stone, .gap { aspect-ratio: 1; min-height: 0; padding: 0; border: 0; }
.stone { display: block; width: 100%; background: #854b31; border-radius: .35rem; box-shadow: inset 0 0 0 2px #c48657; }
.stone svg { display: block; width: 100%; }
.stone path { fill: none; stroke: #f9e7cb; stroke-width: 10; }
.stone circle { fill: #f9e7cb; }
.stone.connected { background: #20564d; }
.stone.connected path { stroke: #ffd57e; }
.stone.connected circle { fill: #ffd57e; }
.stone text { fill: #ffd57e; font: bold 36px system-ui; }
.stone:disabled { opacity: 1; }
.gap { background: #493227; border-radius: .35rem; }
#feedback { min-height: 1.6em; }
footer { margin-top: 1.5rem; font-size: .9rem; }
[hidden] { display: none !important; }
@media (max-width: 640px) { #workshop { grid-template-columns: 1fr; } }