.lo-top { align-items: flex-end; }
.lo-top .field { width: 96px; }
.lo-wrap { margin: 16px auto 0; max-width: 380px; }
.lo-board { display: grid; gap: 6px; }
.lo-cell { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--soft-2); cursor: pointer; position: relative; padding: 0; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .12s; }
.lo-cell.on { background: #ffd500; box-shadow: 0 0 12px rgba(255, 213, 0, .55), inset 0 0 0 1px rgba(0,0,0,.15); }
.lo-cell.press::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 3px solid var(--ink); }
.lo-cell.on.press::after { border-color: #000; }
.lo-cell.next::after { background: var(--ink); }
.lo-cell.on.next::after { background: #000; }
.lo-cell.quiet { outline: 3px dashed var(--err); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .lo-cell { transition: none; } }
.lo-mini { display: inline-grid; gap: 2px; vertical-align: middle; margin: 4px 8px 4px 0; }
.lo-mini i { width: 12px; height: 12px; border-radius: 3px; background: var(--soft-2); box-shadow: inset 0 0 0 1px var(--line); }
.lo-mini i.x { background: var(--ink); }
.lo .split > *, .lo .panel { min-width: 0; }