.nl-board{--rows:5;--cols:5;width:min(100%,520px);aspect-ratio:var(--cols) / var(--rows);grid-template-columns:repeat(var(--cols), 1fr);grid-template-rows:repeat(var(--rows), 1fr);border:2px solid var(--line-strong);background:var(--panel);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:4px;margin:0 auto;display:grid;position:relative;overflow:hidden;container-type:inline-size}.nl-cell{--w:34%;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0;position:relative}.nl-cell.last-col{border-right:0}.nl-cell.last-row{border-bottom:0}.nl-cell.on{background:color-mix(in srgb, var(--c) 16%, transparent)}.nl-seg,.nl-joint{background:var(--c);pointer-events:none;display:none;position:absolute}.nl-seg.u,.nl-seg.d{left:calc(50% - var(--w) / 2);width:var(--w);height:calc(50% + 1px)}.nl-seg.l,.nl-seg.r{top:calc(50% - var(--w) / 2);height:var(--w);width:calc(50% + 1px)}.nl-seg.u{top:-1px}.nl-seg.d{bottom:-1px}.nl-seg.l{left:-1px}.nl-seg.r{right:-1px}.nl-cell.u .nl-seg.u,.nl-cell.d .nl-seg.d,.nl-cell.l .nl-seg.l,.nl-cell.r .nl-seg.r{display:block}.nl-joint{left:calc(50% - var(--w) / 2);top:calc(50% - var(--w) / 2);width:var(--w);height:var(--w);border-radius:50%}.nl-cell.on .nl-joint{display:block}.nl-end{background:var(--c);color:var(--fg);font-size:calc(100cqw / var(--cols) * .42);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-weight:700;line-height:1;display:flex;position:absolute;inset:13%}.nl-cell.done .nl-end{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--c)}.nl-status{text-align:center;font-variant-numeric:tabular-nums;margin:10px auto 0;font-size:13px}.nl-board.solved{border-color:var(--ok)}
