.ws-board{background:var(--paper-raised);border-radius:18px;box-shadow:var(--shadow-card);padding:var(--s-2)}.ws-grid{--n: 9;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--rows, var(--n)),1fr);aspect-ratio:1;container-type:inline-size;user-select:none;-webkit-user-select:none;touch-action:none}.ws-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.ws-cell{position:relative;z-index:1;display:grid;place-items:center;font-weight:700;font-size:calc(100cqi / var(--n) * .58 * var(--scale-grid, 1));line-height:1;color:var(--ink);transition:color var(--t-base) var(--ease)}.ws-cell>span{position:relative;z-index:1}.ws-cell[data-state=selecting]{color:var(--accent)}.ws-cell[data-state=faded]{color:var(--ink-faint)}.ws-cell[data-state=hint]:before{content:"";position:absolute;inset:10%;border-radius:50%;border:2.5px solid var(--accent);animation:hint-pulse 1.1s var(--ease) 3 both}@keyframes hint-pulse{0%{transform:scale(.6);opacity:0}35%{transform:scale(1);opacity:1}to{transform:scale(1.25);opacity:0}}.ws-cell[data-state=lifted]>span{display:grid;place-items:center;width:82%;height:82%;border-radius:8px;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 12px -6px color-mix(in srgb,var(--accent) 80%,black);transform:translateY(-3px)}.hl{opacity:var(--hl-opacity);transform-box:fill-box;transform-origin:center}.hl-1{fill:var(--hl-1)}.hl-2{fill:var(--hl-2)}.hl-3{fill:var(--hl-3)}.hl-4{fill:var(--hl-4)}.hl-5{fill:var(--hl-5)}.hl-6{fill:var(--hl-6)}.hl--settle{animation:settle var(--t-base) var(--ease-spring) both}.hl--miss{animation:miss var(--t-fast) var(--ease) both}.hl--faded{opacity:calc(var(--hl-opacity) * .55)}@keyframes settle{0%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes miss{0%{transform:scale(1);opacity:var(--hl-opacity)}to{transform:scale(.85);opacity:0}}.hl-live{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:.045;stroke-linejoin:round}.ng{--n: 10;--clue-col: 2.6;--clue-row: 3;--cell: min(44px, calc((100cqi - 1px) / (var(--n) + var(--clue-col))));display:grid;grid-template-columns:calc(var(--clue-col) * var(--cell)) calc(var(--n) * var(--cell) + 1px);grid-template-rows:calc(var(--clue-row) * var(--cell)) calc(var(--n) * var(--cell) + 1px);font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none}.ng-wrap{container-type:inline-size;width:100%}.ng-cols{grid-column:2;display:grid;grid-template-columns:repeat(var(--n),var(--cell));padding-left:1px}.ng-rows{grid-row:2;display:grid;grid-template-rows:repeat(var(--n),var(--cell));padding-top:1px}.ng-field{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(var(--n),var(--cell));grid-template-rows:repeat(var(--n),var(--cell));border-top:1px solid var(--rule);border-left:1px solid var(--rule);touch-action:none}.ng-clue{display:flex;font-weight:700;font-size:calc(var(--cell) * .5);line-height:1;color:var(--ink);transition:color var(--t-base) var(--ease)}.ng-clue--col{flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-bottom:6px}.ng-clue--row{justify-content:flex-end;align-items:center;gap:.55em;padding-right:8px}.ng-clue .done,.ng-clue.done{color:var(--ink-faint)}.ng-clue--hover{background:var(--paper-hover);box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)}.ng-clue--col.ng-clue--hover{box-shadow:inset 1px 0 0 var(--rule),inset -1px 0 0 var(--rule)}.ng-clue--row{position:relative}.ng-dot:before{content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}.ng-cell{position:relative;display:grid;place-items:center;background:var(--paper-raised);box-shadow:inset -1px -1px 0 var(--rule);color:var(--ink-faint)}.ng-cell[data-hover]{background:var(--paper-hover)}.ng-cell[data-state=filled]:after{content:"";position:absolute;inset:2px;border-radius:4px;background:var(--ink);animation:fill-in var(--t-base) var(--ease-spring) both}.ng-cell[data-state=crossed] svg{width:58%;height:58%}.ng-cell.v5{box-shadow:inset -1px -1px 0 var(--rule),inset -2px 0 0 var(--ink-faint)}.ng-cell.h5{box-shadow:inset -1px -1px 0 var(--rule),inset 0 -2px 0 var(--ink-faint)}.ng-cell.v5.h5{box-shadow:inset -2px 0 0 var(--ink-faint),inset 0 -2px 0 var(--ink-faint)}@keyframes fill-in{0%{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}[data-motion=reduced] .ng-cell[data-state=filled]:after,[data-motion=reduced] .hl--settle{animation-duration:1ms}@media(prefers-reduced-motion:reduce){.ng-cell[data-state=filled]:after,.hl--settle{animation-duration:1ms}}
