.sl-board { position: relative; margin: 18px auto; touch-action: none; user-select: none; }
.sl-num { position: absolute; transform: translate(-50%,-50%); font-weight: 800; font-size: 18px; color: var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sl-dot { position: absolute; width: 8px; height: 8px; background: #c9c2dd; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.sl-eh, .sl-ev { position: absolute; cursor: pointer; z-index: 2; }
.sl-eh { height: 26px; transform: translateY(-50%); }
.sl-ev { width: 26px; transform: translateX(-50%); }
.sl-eh .ln, .sl-ev .ln { position: absolute; background: transparent; border-radius: 3px; transition: background .08s; }
.sl-eh .ln { left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); }
.sl-ev .ln { top: 0; bottom: 0; left: 50%; width: 6px; transform: translateX(-50%); }
.sl-eh.on .ln, .sl-ev.on .ln { background: var(--ink); }
.sl-eh.x .ln, .sl-ev.x .ln { background: transparent; }
.sl-eh.x::after, .sl-ev.x::after {
  content: "×"; position: absolute; color: #e1574c; font-weight: 800; font-size: 16px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.sl-eh.on::after, .sl-ev.on::after { content: ""; }
.status-line { text-align: center; font-weight: 700; color: var(--brand); min-height: 22px; }