:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-height:100vh;background-color:tan}#root{--cell-size: 40px;--peg-size: 25px;width:100%;max-width:1280px;margin:0 auto;text-align:center;padding:.5rem}#board{display:grid;max-width:max-content;grid-template-columns:repeat(7,var(--cell-size));grid-template-rows:repeat(7,var(--cell-size));gap:.5rem;background-color:#833e08db;padding:.5rem;border-radius:15px;box-shadow:0 10px 15px #0003;overflow:hidden;margin:0 auto}.cell{width:var(--cell-size);height:var(--cell-size);background-color:tan;border-radius:10px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.cell[data-selected=true]{border:2px solid #a0522d}.cell.unusable{background-color:transparent;box-shadow:none}.peg{width:var(--peg-size);height:var(--peg-size);background-color:wheat;border-radius:50%;box-shadow:0 5px 10px #0006;cursor:pointer;transition:transform .2s ease-in-out;-webkit-user-select:none;user-select:none}.peg:hover{transform:scale(1.1)}.empty{width:var(--peg-size);height:var(--peg-size);border:2px dashed #a0522d;border-radius:50%;box-shadow:inset 0 5px 8px #0003}.empty[data-droppable=true]{border-color:#2f8f20}.cell[data-drop-active=true]{background-color:#2f8f2033}@media screen and (min-width: 600px){#root{--cell-size: 60px;--peg-size: 40px}#board{padding:2rem}}