.g-nonogram{--ng-cell:var(--tap);--ng-gap:1px;--ng-numw:16px;--ng-numline:15px;--ng-num-size:var(--fs-sm);--ng-line:var(--c-border-strong);--ng-face:var(--c-surface);--ng-band:color-mix(in srgb, var(--c-text) 7%, var(--c-surface));--ng-fill:var(--c-brand);--ng-x:var(--c-text-faint);--ng-done:color-mix(in srgb, var(--c-good) 14%, transparent);gap:var(--sp-3)}.g-nonogram[data-size="5"]{--ng-cell:48px}.g-nonogram[data-size="15"]{--ng-numw:15px;--ng-numline:14px;--ng-num-size:var(--fs-xs)}.g-nonogram .ng-bar{justify-content:center;align-items:center;gap:var(--sp-2);flex-wrap:wrap;width:100%;display:flex}.g-nonogram .ng-mode{align-items:center;gap:var(--sp-2);min-height:var(--tap);padding-inline:var(--sp-4);border:1px solid var(--c-border);border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text-dim);font:inherit;font-weight:var(--fw-semi);cursor:pointer;display:inline-flex}.g-nonogram .ng-mode:hover{border-color:var(--c-brand)}.g-nonogram .ng-mode.is-mark{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-brand-text)}.g-nonogram .ng-mode__icon{place-items:center;display:grid}.g-nonogram .ng-mode__glyph{width:20px;height:20px}.g-nonogram .ng-count{min-height:34px;padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:var(--fw-bold);align-items:center;display:inline-flex}.g-nonogram .ng-board{--ng-roww:calc(var(--ng-rowmax,1) * var(--ng-numw) + var(--sp-2));--ng-colh:calc(var(--ng-colmax,1) * var(--ng-numline) + var(--sp-2));grid-template-columns:var(--ng-roww) minmax(0, 1fr);grid-template-rows:var(--ng-colh) auto;gap:var(--sp-1);width:max-content;max-width:100%;padding:var(--sp-2);border-radius:var(--r-md);background:var(--c-surface);box-shadow:var(--shadow-xs);margin-inline:auto;display:grid}.g-nonogram .ng-corner{grid-area:1/1}.g-nonogram .ng-rows{grid-area:2/1;grid-template-rows:repeat(var(--ng-n,5), var(--ng-cell));gap:var(--ng-gap);padding-block:var(--ng-gap);width:var(--ng-roww);display:grid}.g-nonogram .ng-scroller{overscroll-behavior-x:contain;scrollbar-width:thin;grid-area:1/2/span 2;overflow-x:auto}.g-nonogram .ng-stack{grid-template-rows:var(--ng-colh) auto;gap:var(--sp-1);width:max-content;padding-block-end:3px;padding-inline:3px;display:grid}.g-nonogram .ng-cols{grid-template-columns:repeat(var(--ng-n,5), var(--ng-cell));gap:var(--ng-gap);padding-inline:var(--ng-gap);height:var(--ng-colh);display:grid}.g-nonogram .ng-clue{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--ng-num-size);font-weight:var(--fw-semi);color:var(--c-text-dim);border-radius:var(--r-xs);line-height:1.15;display:flex}.g-nonogram .ng-clue--row{justify-content:end;align-items:center;padding-inline-end:var(--sp-1)}.g-nonogram .ng-clue--col{flex-direction:column;justify-content:end;align-items:center;padding-block-end:var(--sp-1)}.g-nonogram .ng-clue.is-band{background:var(--ng-band)}.g-nonogram .ng-clue.is-done{background:var(--ng-done)}.g-nonogram .ng-num{text-align:center;min-width:1.15em}.g-nonogram .ng-num.is-done{color:var(--c-text-faint);text-decoration:line-through;text-decoration-thickness:2px}.g-nonogram .ng-grid{grid-template-columns:repeat(var(--ng-n,5), var(--ng-cell));grid-auto-rows:var(--ng-cell);gap:var(--ng-gap);padding:var(--ng-gap);border-radius:var(--r-xs);background:var(--ng-line);-webkit-user-select:none;user-select:none;touch-action:manipulation;display:grid}.g-nonogram .ng-cell{min-width:var(--tap);min-height:var(--tap);background:var(--ng-face);color:var(--ng-x);cursor:pointer;border:0;border-radius:0;place-items:center;padding:0;display:grid}.g-nonogram .ng-cell.is-band{background:var(--ng-band)}.g-nonogram .ng-cell.is-filled{background:var(--ng-fill)}.g-nonogram .ng-x{opacity:0;width:58%;height:58%}.g-nonogram .ng-cell.is-blocked .ng-x{opacity:1}.g-nonogram .ng-cell:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px}.g-nonogram .ng-cell.is-hint{outline:3px dashed var(--c-brand);outline-offset:-3px}.g-nonogram.is-solved .ng-grid{background:color-mix(in srgb, var(--c-good) 55%, var(--ng-line))}.g-nonogram.is-solved .ng-x{opacity:0}.g-nonogram .ng-note{max-width:40ch;color:var(--c-text-faint);font-size:var(--fs-xs);line-height:var(--lh-snug);text-align:center;margin:0}.g-nonogram .ng-sr{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.g-nonogram .ng-cell,.g-nonogram .ng-mode,.g-nonogram .ng-x,.g-nonogram .ng-clue{transition:none}.g-nonogram .ng-cell:active{transform:none}.g-nonogram.is-motion .ng-cell{transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}.g-nonogram.is-motion .ng-x{transition:opacity var(--dur-fast) var(--ease)}.g-nonogram.is-motion .ng-clue{transition:background var(--dur) var(--ease)}.g-nonogram.is-motion .ng-mode{transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}.g-nonogram.is-motion .ng-cell:active{transform:scale(.92)}@media (max-width:360px){.g-nonogram[data-size="5"]{--ng-cell:var(--tap)}.g-nonogram .ng-board{padding:var(--sp-1)}}