.nono{display:grid;gap:10px;justify-items:center}.nono-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px}.nono-tools button{min-width:86px;min-height:40px}.nono-caption{font-weight:700;color:var(--accent);min-height:1.4em}.nono-stage{position:relative;width:100%;display:grid;justify-items:center;overflow-x:auto}.nono-overlay{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;background:color-mix(in srgb,var(--surface) 80%,transparent);z-index:3;border-radius:8px}.nono-board{--cs: 28px;display:grid;grid-template-columns:auto repeat(var(--w),var(--cs));grid-template-rows:auto repeat(var(--h),var(--cs));touch-action:none;user-select:none;-webkit-user-select:none;padding:2px}.nono-cc,.nono-rc{display:flex;color:var(--text);font-weight:700;font-size:calc(var(--cs) * .5);line-height:1.15;font-variant-numeric:tabular-nums;transition:opacity .2s}.nono-cc{flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:4px;border-radius:6px 6px 0 0}.nono-rc{flex-direction:row;justify-content:flex-end;align-items:center;gap:calc(var(--cs) * .22);padding-right:6px;border-radius:6px 0 0 6px}.nono-cc:nth-child(odd),.nono-rc:nth-child(odd){background:color-mix(in srgb,var(--surface-2) 60%,transparent)}.nono-cc.active,.nono-rc.active{background:var(--accent-soft)}.nono-cc.done,.nono-rc.done{color:var(--muted);opacity:.55}.nono-cell{background:var(--cell);border-right:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);position:relative;cursor:pointer;display:grid;place-items:center}.nono-cell.c0{border-left:2px solid var(--cell-strong)}.nono-cell.r0{border-top:2px solid var(--cell-strong)}.nono-cell.cl{border-right:2px solid var(--cell-strong)}.nono-cell.rl{border-bottom:2px solid var(--cell-strong)}.nono-cell.v5{border-right:2px solid var(--cell-strong)}.nono-cell.h5{border-bottom:2px solid var(--cell-strong)}.nono-cell.line{background:color-mix(in srgb,var(--accent-soft) 55%,var(--cell))}.nono-cell.f{background:var(--text)}.nono-cell.x:after{content:"✕";color:var(--muted);font-size:calc(var(--cs) * .55);line-height:1;font-weight:700}.nono-cell.cur{outline:3px solid var(--focus);outline-offset:-2px;z-index:1}.nono-cell.bad{box-shadow:inset 0 0 0 3px var(--danger)}.nono-cell.hinted{box-shadow:inset 0 0 0 3px var(--good)}.nono-board .nono-cell{box-sizing:border-box}.nono-board.reveal .nono-cell{border-color:transparent;cursor:default;transition:background .5s ease var(--d)}.nono-board.reveal .nono-cell.x:after{content:none}.nono-board.reveal .nono-cell.f{background:hsl(var(--hue) 62% 50%)}.nono-board.reveal .nono-cc,.nono-board.reveal .nono-rc{opacity:.25}