.ks{--cs:calc(100cqw / var(--n));--inset:3px;--box-gap:calc(var(--cell-gap) * .6);grid-template-columns:repeat(var(--n), minmax(0, 1fr));padding:calc(var(--cell-gap) / 2);background:var(--card);border:var(--board-border) solid var(--board-line);border-radius:calc(var(--radius) * .6);display:grid;overflow:hidden;container-type:inline-size}.ks .cell{aspect-ratio:1;cursor:pointer;border-right:var(--grid-line) solid var(--board-thin);border-bottom:var(--grid-line) solid var(--board-thin);position:relative}.ks .cell.bx{border-right:var(--region-border) solid var(--board-line)}.ks .cell.by{border-bottom:var(--region-border) solid var(--board-line)}.ks .cell.er{border-right:0}.ks .cell.eb{border-bottom:0}.ks .tile{inset:calc(var(--cell-gap) / 2);border-radius:var(--cell-radius);background-color:var(--cell);transition:background-color .15s;position:absolute}.ks .cell.bx .tile{right:calc(var(--cell-gap) / 2 + var(--box-gap))}.ks .cell.bl .tile{left:calc(var(--cell-gap) / 2 + var(--box-gap))}.ks .cell.by .tile{bottom:calc(var(--cell-gap) / 2 + var(--box-gap))}.ks .cell.bt .tile{top:calc(var(--cell-gap) / 2 + var(--box-gap))}.ks .cell.peer .tile{background-color:color-mix(in srgb, var(--foreground) 6%, var(--cell))}.ks .cell.same .tile{background-color:color-mix(in srgb, var(--primary) 18%, var(--cell))}.ks .cell.sel .tile{background-color:color-mix(in srgb, var(--primary) 34%, var(--cell))}.ks .cell.bad .tile{background-image:linear-gradient(color-mix(in srgb, var(--danger) 18%, transparent), color-mix(in srgb, var(--danger) 18%, transparent))}.ks.board:focus-visible .cursor .tile{box-shadow:inset 0 0 0 3px var(--primary)}@media (hover:hover){.ks .cell:hover .tile{filter:brightness(.97)}}.ks .v{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ks .d{font:var(--title-weight) calc(var(--cs) * .56) / 1 var(--font-title);color:var(--foreground)}.ks .cell.bad .d{color:var(--danger)}.ks .notes{inset:calc(var(--inset) + 1px);grid-template-columns:repeat(var(--bw), minmax(0, 1fr));grid-template-rows:repeat(var(--bh), minmax(0, 1fr));font:500 clamp(7.5px, calc(var(--cs) * .22), 13px) / 1 var(--font-body);color:var(--muted-foreground);display:grid;position:absolute}.ks .tile.has-sum .notes{top:calc(var(--inset) + clamp(8.5px, calc(var(--cs) * .22), 14px))}.ks .notes i{border-radius:3px;justify-content:center;align-items:center;font-style:normal;display:flex}.ks .notes i.hl{color:var(--foreground);background:color-mix(in srgb, var(--primary) 30%, transparent);font-weight:700}.ks .sum{top:max(1px, calc(var(--inset) - 3px));left:max(1px, calc(var(--inset) - 2px));font:600 clamp(8.5px, calc(var(--cs) * .22), 14px) / 1 var(--font-mono);color:var(--foreground);pointer-events:none;position:absolute}.ks .sum.bad{color:var(--danger)}.ks .cages{z-index:2;pointer-events:none;fill:none;width:100%;height:100%;stroke:color-mix(in srgb, var(--foreground) 60%, transparent);stroke-linejoin:round;transition:opacity .3s;position:absolute;inset:0;overflow:visible}.ks .cages path.on{stroke:var(--foreground)}.ks .cages path.bad{stroke:var(--danger)}.ks.celebrate .cages{opacity:.25}.is-done .ks .cell{cursor:default}.board-tools.ks-toolbar{flex:100%;min-width:0}.ks-pad{gap:8px;width:100%;max-width:520px;margin:0 auto;display:grid;container:ks-pad/inline-size}.ks-helper{white-space:nowrap;text-overflow:ellipsis;text-align:center;height:1.4em;color:var(--muted-foreground);margin:0;font-size:14px;line-height:1.4;overflow:hidden}.ks-helper b{color:var(--foreground);font-family:var(--font-mono)}.ks-helper .bad{color:var(--danger)}.ks-helper .more{white-space:nowrap}.ks-digits{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:6px;display:grid}.ks-key{cursor:pointer;border-radius:calc(var(--radius) * .6);min-height:52px;font:var(--title-weight) 24px / 1 var(--font-title);color:var(--secondary-foreground);background:var(--secondary);border:var(--line-width) solid var(--border);padding:0;transition:transform .12s,background-color .15s,opacity .2s}.ks-key:active{transform:scale(.94)}.ks-key.used{opacity:.4}.ks-pad.notes .ks-key{font:500 18px / 1 var(--font-body);color:var(--muted-foreground);border-style:dashed}@media (hover:hover){.ks-key:hover{background:color-mix(in srgb, var(--primary) 18%, var(--secondary))}}.ks-modes{justify-content:center;gap:10px;display:flex}@container ks-pad (width<=420px){.ks-modes{gap:8px}.ks-modes #undo span,.ks-modes #restart-tool span{display:none}}@container ks-pad (width<=360px){.ks-digits{gap:4px}.ks-key{font-size:22px}}@container ks-pad (width<=290px){.ks-digits.n9{grid-template-columns:repeat(5,minmax(0,1fr))}}.ks.has-givens .cell:not(.given) .d{color:color-mix(in srgb, var(--primary) 70%, var(--foreground))}.ks.has-givens .cell.bad:not(.given) .d{color:var(--danger)}.ks .cell.given,.ks .cell.clue{cursor:default}.ks .cell.open .v:after{content:"";width:max(2px, calc(var(--cs) * .045));background:var(--foreground);border-radius:2px;height:44%;animation:1.05s step-end infinite ks-caret}@keyframes ks-caret{50%{opacity:0}}.ks-pad .ks-key{opacity:.5}.ks-pad.live .ks-key{opacity:1}.ks-pad.live .ks-key.used{opacity:.4}.ks-helper.nudge{color:var(--foreground);animation:.32s cubic-bezier(.23,1,.32,1) ks-nudge}@keyframes ks-nudge{25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (prefers-reduced-motion:reduce){.ks .cell.open .v:after,.ks-helper.nudge{animation:none}}