:root { font-family: system-ui, sans-serif; color: #283d38; background: #eef4e9; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #17564d; } h1 { margin-bottom: .25rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #436760; border-radius: .6rem; background: white; color: #203b38; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #b35d20; outline-offset: 2px; z-index: 1; }
button:disabled { opacity: .8; cursor: default; } .scroll { overflow: auto; } .board { display: grid; width: max-content; margin: 1rem 0; }
.edge { min-height: var(--track, 44px); width: var(--track, 44px); padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.edge::after { content: ''; display: block; border-color: #647d70; }
.horizontal::after { width: 200%; border-top: 4px dashed #647d70; }
.vertical::after { height: 200%; border-left: 4px dashed #647d70; }
.horizontal.on::after { border-top: 8px solid #235e45; } .vertical.on::after { border-left: 8px solid #235e45; }
.cell { display: grid; place-items: center; font-weight: 700; background: #fff; border-radius: .4rem; font-size: 1.1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; } .result { margin-top: 1rem; padding: 1rem; background: #d6ecda; border-radius: .75rem; }
p, label, h1 { word-break: keep-all; }