.app--nonogram{grid-template-rows:auto 1fr auto auto}.board{place-items:center;min-height:0;padding:4px 8px 6px;display:grid}.nono{grid-template-columns:calc(var(--cell) * var(--row-clues) * .62) auto;grid-template-rows:calc(var(--cell) * var(--col-clues) * .72) auto;isolation:isolate;background:var(--surface);box-shadow:0 6px 18px var(--shadow);touch-action:none;border-radius:12px;padding:6px;display:grid}.nono[data-empty]{visibility:hidden}.nono-corner{grid-area:1/1}.nono-cols{grid-area:1/2;grid-template-columns:repeat(var(--cols), var(--cell));display:grid}.nono-rows{grid-area:2/1;grid-template-rows:repeat(var(--rows), var(--cell));display:grid}.nono-clue{color:var(--text-dim);font-size:calc(var(--cell) * .46);font-variant-numeric:tabular-nums;gap:1px;font-weight:700;line-height:1;transition:color .15s,opacity .15s;display:flex}.nono-clue--col{flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:3px}.nono-clue--row{justify-content:flex-end;align-items:center;gap:calc(var(--cell) * .14);flex-direction:row;padding-right:4px}.nono-clue i{font-style:normal}.nono-clue.is-done{opacity:.33}.nono-clue.is-lit{color:var(--accent);opacity:1}.nono-grid{grid-area:2/2;grid-template-columns:repeat(var(--cols), var(--cell));grid-template-rows:repeat(var(--rows), var(--cell));touch-action:none;border-radius:4px;display:grid;overflow:hidden}.nc{width:var(--cell);height:var(--cell);background:var(--bg);box-shadow:inset -1px -1px 0 color-mix(in srgb, var(--text-dim) 26%, transparent);transition:background .1s;position:relative}.nc.edge-right,.nono-clue.edge-right{border-right:2px solid color-mix(in srgb, var(--text-dim) 50%, transparent)}.nc.edge-bottom,.nono-clue.edge-bottom{border-bottom:2px solid color-mix(in srgb, var(--text-dim) 50%, transparent)}.nc.is-filled{background:var(--accent);box-shadow:none}.nc.is-cross:before,.nc.is-cross:after{content:"";background:color-mix(in srgb, var(--text-dim) 70%, transparent);border-radius:1px;width:2px;height:56%;position:absolute;top:22%;left:50%}.nc.is-cross:before{transform:translate(-50%)rotate(45deg)}.nc.is-cross:after{transform:translate(-50%)rotate(-45deg)}.nc.is-hinted{box-shadow:inset 0 0 0 2px var(--accent)}.nc[data-hint=fill]:after{content:"";background:var(--accent);opacity:.5;border-radius:2px;position:absolute;inset:3px}.nc[data-hint=cross]:before,.nc[data-hint=cross]:after{content:"";background:var(--accent);opacity:.55;border-radius:1px;width:2px;height:56%;position:absolute;top:22%;left:50%}.nc[data-hint=cross]:before{transform:translate(-50%)rotate(45deg)}.nc[data-hint=cross]:after{transform:translate(-50%)rotate(-45deg)}.nc.is-mistake{background:var(--danger);box-shadow:inset 0 0 0 2px var(--danger)}.brushes{justify-content:center;gap:8px;padding:4px 14px 0;display:flex}.brush{border-radius:var(--radius);background:var(--surface);min-width:118px;color:var(--text-dim);box-shadow:0 2px 0 var(--shadow);justify-content:center;align-items:center;gap:7px;padding:10px 16px;font-size:.8rem;font-weight:600;transition:background .15s,color .15s,transform .1s;display:flex}.brush:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.brush:disabled{opacity:.38;cursor:default}.brush.is-on{background:var(--accent);color:#fff}.brush-swatch{border:1.5px solid;border-radius:3px;width:17px;height:17px;position:relative}.brush--fill .brush-swatch{background:currentColor}.brush--cross .brush-swatch:before,.brush--cross .brush-swatch:after{content:"";background:currentColor;width:1.8px;height:70%;position:absolute;top:15%;left:50%}.brush--cross .brush-swatch:before{transform:translate(-50%)rotate(45deg)}.brush--cross .brush-swatch:after{transform:translate(-50%)rotate(-45deg)}