
.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(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}


:root{--rail-clue:#b45309}:root[data-theme=dark]{--rail-clue:#fbbf24}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--rail-clue:#fbbf24}}.rail-frame{display:grid;grid-template-columns:24px minmax(0,1fr);width:min(100%,400px,max(224px,calc(100svh - 235px)));margin:auto}.loop-board{max-width:none}.col-counts{display:grid;grid-template-columns:repeat(4,1fr);height:24px}.row-counts{display:grid;grid-template-rows:repeat(4,1fr)}.count{display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700}.count.error{color:var(--error)}.endpoint,.center-dot{position:relative;z-index:2;display:inline-block;vertical-align:middle}.endpoint{padding:2px 5px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--text);font-size:1rem;font-weight:800}.center-dot{width:4px;height:4px;border-radius:50%;background:var(--text)}.fixed-line{stroke:var(--rail-clue);stroke-width:2;stroke-linecap:round}.loop-cell.error{outline:2px solid var(--error);outline-offset:-3px}#lines{z-index:1}.play-actions button{min-height:44px}
