.nonogram-app{--accent: #6b3fc0;--lp-accent: #9065e0;--lp-accent-deep: #6b3fc0;--ng-line: color-mix(in srgb, var(--ink) 20%, transparent);--ng-rule: color-mix(in srgb, var(--ink) 58%, transparent);--ng-fill: color-mix(in srgb, var(--ink) 88%, var(--card));--ng-wrong: #d1453b;--ng-paper: #faf6ee}:root[data-theme=dark] .nonogram-app{--ng-fill: color-mix(in srgb, var(--ink) 82%, transparent);--ng-wrong: #ff7a70;--ng-paper: #e7e1d5}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .nonogram-app{--ng-fill: color-mix(in srgb, var(--ink) 82%, transparent);--ng-wrong: #ff7a70;--ng-paper: #e7e1d5}}.ng-stage{margin:0 auto;max-width:34rem}.ng-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:.15rem}.ng-frame{aspect-ratio:var(--ng-cols) / var(--ng-rows);background:var(--card);container-type:inline-size;display:grid;grid-template-columns:repeat(var(--ng-cols),minmax(0,1fr));grid-template-rows:repeat(var(--ng-rows),minmax(0,1fr));margin:0 auto;min-width:calc(var(--ng-cols) * 1rem);touch-action:none;user-select:none;width:100%}.nonogram-app.is-solved .ng-frame{touch-action:manipulation}.ng-corner{background:transparent}.ng-clue{align-items:center;color:var(--muted);display:flex;font-size:clamp(8px,calc(80cqi / var(--ng-cols)),15px);font-variant-numeric:tabular-nums;font-weight:800;justify-content:center;line-height:1;min-width:0;overflow:hidden}.ng-clue[data-wide]{font-size:clamp(7px,calc(58cqi / var(--ng-cols)),13px);letter-spacing:-.03em}.ng-clue-row{justify-content:flex-end;padding-right:.22em}.ng-clue-row[data-wide]{padding-right:.12em}.ng-clue-col{align-items:flex-end;padding-bottom:.2em}.ng-clue-row,.ng-clue-col{background:color-mix(in srgb,var(--lp-accent) 7%,var(--card))}.ng-clue[data-band]{background:color-mix(in srgb,var(--lp-accent) 13%,var(--card))}.ng-clue.is-done{color:color-mix(in srgb,var(--muted) 42%,transparent)}.ng-clue.is-lit{color:var(--lp-accent-deep)}.ng-clue-row[data-edge]{border-right:2px solid var(--ng-rule)}.ng-clue-col[data-edge]{border-bottom:2px solid var(--ng-rule)}.ng-cell{background:var(--card);border:0;border-right:1px solid var(--ng-line);border-bottom:1px solid var(--ng-line);border-radius:0;cursor:pointer;min-height:0;min-width:0;padding:0;position:relative}.ng-cell[data-left]{border-left:2px solid var(--ng-rule)}.ng-cell[data-top]{border-top:2px solid var(--ng-rule)}.ng-cell[data-right]{border-right:2px solid var(--ng-rule)}.ng-cell[data-bottom]{border-bottom:2px solid var(--ng-rule)}.ng-cell:before{background:var(--ng-fill);border-radius:1px;content:"";inset:1px;opacity:0;position:absolute;transform:scale(.45)}.ng-cell.is-filled:before{opacity:1;transform:scale(1)}.ng-cell:after{content:"";inset:26%;opacity:0;position:absolute;background:linear-gradient(to bottom right,transparent calc(50% - .6px),currentColor calc(50% - .6px),currentColor calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(to bottom left,transparent calc(50% - .6px),currentColor calc(50% - .6px),currentColor calc(50% + .6px),transparent calc(50% + .6px));color:color-mix(in srgb,var(--muted) 80%,transparent)}.ng-cell.is-crossed:after{opacity:1}.ng-cell.is-given{background:color-mix(in srgb,var(--lp-accent) 6%,var(--card));cursor:default}.ng-cell.is-given:after{color:color-mix(in srgb,var(--lp-accent-deep) 55%,transparent);opacity:1}.ng-cell.is-wrong:before{background:color-mix(in srgb,var(--ng-wrong) 70%,var(--ng-fill))}.ng-cell.is-wrong{background:color-mix(in srgb,var(--ng-wrong) 16%,var(--card))}.ng-cell.is-hint{background:color-mix(in srgb,var(--lp-accent) 24%,var(--card))}.ng-cell.is-hint:before{outline:2px dashed var(--lp-accent-deep);outline-offset:1px}.ng-cell.is-selected:before,.ng-cell:focus-visible:before{opacity:1;outline:2px solid var(--lp-accent-deep);outline-offset:-1px;transform:scale(1)}.ng-cell.is-selected:not(.is-filled):before,.ng-cell:focus-visible:not(.is-filled):before{background:color-mix(in srgb,var(--lp-accent) 18%,transparent)}.ng-cell:focus{outline:none}.ng-cell.is-cross-lit:not(.is-filled):not(.is-crossed){background:color-mix(in srgb,var(--lp-accent) 9%,var(--card))}@media(prefers-reduced-motion:no-preference){.ng-cell:before{transition:opacity .1s,transform .12s cubic-bezier(.2,1.4,.4,1),background-color .2s}.ng-cell:after{transition:opacity .1s}}.ng-frame[data-revealed]{background:var(--card)}.ng-frame[data-revealed] .ng-cell{cursor:default}.ng-frame[data-revealed] .ng-cell:after{opacity:0}.ng-frame[data-revealed] .ng-cell:before{background:var(--ng-paint, transparent);border-radius:0;inset:0;opacity:1;transform:scale(1)}.ng-frame[data-revealed] .ng-cell[data-paper]:before{background:transparent}.ng-frame[data-revealed] .ng-cell{background:var(--ng-paper);border-color:transparent}.ng-frame[data-revealed] .ng-clue{color:color-mix(in srgb,var(--muted) 30%,transparent)}.ng-frame[data-revealed] .ng-clue-row,.ng-frame[data-revealed] .ng-clue-col{background:transparent}.ng-frame[data-revealed] .ng-clue[data-edge]{border-color:transparent}@media(prefers-reduced-motion:no-preference){.ng-frame[data-revealed] .ng-cell:before{animation:ng-bloom .42s cubic-bezier(.2,.9,.25,1) both;animation-delay:var(--ng-delay, 0ms)}@keyframes ng-bloom{0%{border-radius:40%;opacity:.25;transform:scale(.3)}60%{border-radius:10%;transform:scale(1.06)}to{border-radius:0;opacity:1;transform:scale(1)}}}.ng-reveal{background:linear-gradient(135deg,color-mix(in srgb,var(--lp-accent) 15%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--lp-accent) 32%,var(--line));border-radius:.75rem;display:grid;margin:.7rem auto 0;padding:.6rem .8rem;text-align:center}.ng-reveal[hidden]{display:none}.ng-reveal-kicker{color:var(--lp-accent-deep);font-size:.6rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.ng-reveal strong{font-size:1.12rem;line-height:1.25}.ng-reveal small{color:var(--muted);font-size:.7rem}.ng-tools{display:flex;gap:.4rem;justify-content:center;margin:.8rem auto .5rem;max-width:24rem}.ng-tools button{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:.45rem;color:var(--muted);display:inline-flex;flex:1;font-size:.78rem;font-weight:750;gap:.3rem;justify-content:center;min-height:2.5rem}.ng-tools button b{font-size:.9rem;line-height:1}.ng-tools button:hover{color:var(--ink)}.ng-tools button[aria-pressed=true]{background:color-mix(in srgb,var(--lp-accent) 15%,var(--card));border-color:color-mix(in srgb,var(--lp-accent) 55%,var(--line));color:var(--ink)}.nonogram-app.is-solved .ng-tools,.nonogram-app.is-solved .lp-subrow,.nonogram-app.is-solved .ng-controls{display:none}.ng-switch{align-items:center;color:var(--muted);cursor:pointer;display:inline-flex;font-size:.72rem;font-weight:700;gap:.35rem}.ng-switch input{accent-color:var(--lp-accent-deep)}.ng-controls{color:var(--muted);font-size:.67rem;line-height:1.5;margin:.4rem 0 0;text-align:center}.ng-theme{align-items:center;display:inline-flex;gap:.35rem;min-width:0}.ng-theme-label{color:var(--muted);font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.ng-theme select{background:var(--card);border:1px solid var(--line);border-radius:9999px;color:var(--ink);font:inherit;font-size:.74rem;font-weight:700;max-width:10.5rem;min-height:2.3rem;padding:.25rem .5rem}.ng-hint{background:color-mix(in srgb,var(--lp-accent) 8%,var(--card));border:1px solid color-mix(in srgb,var(--lp-accent) 32%,var(--card));border-radius:.5rem;font-size:.8rem;line-height:1.5;margin:.65rem 0;padding:.7rem .8rem}.ng-hint[hidden],.ng-result[hidden]{display:none}.ng-hint-label{color:var(--lp-accent-deep);display:block;font-size:.7rem;font-weight:800;margin-bottom:.2rem}.ng-hint strong{color:var(--ink);display:block;font-size:.86rem}.ng-hint p{color:var(--muted);margin:.2rem 0 0}.ng-result{margin-top:.8rem}dialog.ng-album-dialog{max-width:min(36rem,calc(100vw - 1.5rem))}.ng-album-close{color:var(--muted);font-size:.95rem;padding:.2rem .4rem}.ng-album-close:hover{color:var(--ink)}.ng-album{display:grid;gap:.4rem;margin-top:.7rem;max-height:min(60vh,30rem);overflow-y:auto}.ng-album details{background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:.4rem .6rem}.ng-album details[data-empty]{opacity:.6}.ng-album summary{align-items:baseline;cursor:pointer;display:flex;font-size:.8rem;font-weight:750;gap:.4rem;justify-content:space-between}.ng-album summary small{color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}.ng-album-grid{display:flex;flex-wrap:wrap;gap:.55rem;padding:.6rem 0 .2rem}.ng-album-item{display:grid;gap:.15rem;justify-items:center;width:4rem}.ng-album-item span{color:var(--muted);font-size:.57rem;line-height:1.2;text-align:center}.ng-album-thumb{display:grid;grid-template-columns:repeat(var(--n),1fr);height:3.3rem;width:3.3rem;background:var(--ng-paper);border:1px solid var(--line);border-radius:.25rem;overflow:hidden}.ng-album-thumb i{display:block}.ng-album-empty{color:var(--muted);font-size:.72rem;padding:.5rem 0 .2rem}@media(max-width:30rem){.ng-stage{margin-inline:-.35rem}.ng-tools button{font-size:.72rem}.ng-theme-label{display:none}.ng-theme select{max-width:8.5rem}.ng-album-item{width:3.4rem}.ng-album-thumb{height:2.8rem;width:2.8rem}}
