.loop-board{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:auto}#board{width:100%;height:100%;padding:0;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));grid-template-rows:repeat(5,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}

.pearl,.center-dot{position:relative;z-index:2;display:inline-block;vertical-align:middle}.pearl{width:20px;height:20px;border-radius:50%;border:2px solid #334155}.white-pearl{background:#fff}.black-pearl{background:#0f172a;border-color:#94a3b8}.center-dot{width:4px;height:4px;border-radius:50%;background:var(--text)}.loop-cell.error{box-shadow:inset 0 0 0 2px var(--error)}#lines{z-index:1}