.loop-board{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:auto}#board{width:100%;height:100%;padding:10%;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));gap:0;max-width:none}.loop-cell{min-width:44px;min-height:44px;width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0;font-size:1.5rem;touch-action:manipulation}.loop-cell.selected{background:var(--selected);box-shadow:inset 0 0 0 2px #2563eb}.loop-cell.error{text-decoration:underline wavy var(--error)}#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.dot{fill:var(--text)}.dot.error{fill:var(--error)}.drawn-line{stroke:var(--text);stroke-width:1.2;stroke-linecap:round}.excluded-edge{stroke:var(--muted);stroke-width:.6;fill:none}.mark-controls{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px;margin-top:8px}.mark-controls button{min-height:44px;padding:4px;font-size:.9rem}.mark-controls button[data-state="1"]{font-weight:800}.mark-controls button[data-state="0"]{color:var(--muted)}.play-actions{grid-template-columns:repeat(3,1fr);margin-top:8px}