.board-trail{--board-accent:#c6f432;--on-accent:#1b1726;--path:#1b1726;--cell:44px}@media (prefers-color-scheme:dark){.board-trail{--path:#f4efe6}}.trail-grid{touch-action:none;-webkit-user-select:none;user-select:none;gap:0;width:max-content;max-width:100%;margin-inline:auto;display:grid;position:relative}.trail-grid[data-conflict=true]{outline:3px solid var(--danger,#e54858);outline-offset:3px}.trail-cell{box-sizing:border-box;width:var(--cell);height:var(--cell);border:1px solid color-mix(in srgb, var(--path) 28%, transparent);background:var(--surface,#fff8ee);color:var(--path);appearance:none;cursor:pointer;font:inherit;border-radius:8px;place-items:center;margin:0;padding:0;display:grid}.trail-cell[data-on=true]{background:color-mix(in srgb, var(--board-accent) 45%, var(--surface,#fff8ee))}.trail-cell[data-head=true]{outline:2px solid var(--board-accent);outline-offset:-3px}.trail-label{z-index:1;font-size:14px;font-weight:800;line-height:1;position:relative}.trail-line{width:100%;height:100%;color:var(--path);pointer-events:none;position:absolute;inset:0}.trail-line polyline{fill:none;stroke:currentColor;stroke-width:.16px;stroke-linecap:round;stroke-linejoin:round}.trail-conflict{text-align:center;color:var(--danger,#e54858);margin:0;font-weight:700}@media (max-height:430px){.board-trail{gap:6px}}
