.np-shell{--np-line:#d9d1c1;--np-line-strong:#2b303a;--np-cell:#fffdf8;--np-given:#f5f0e6;--np-related:#e8f0ff;--np-same:#c9efe9;--np-selected:#bcd3ff;--np-conflict-bg:#fff0dc;--np-conflict-fg:#9a4600;--np-board:640px;--np-chrome:330px;justify-items:center;row-gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-xl);background:radial-gradient(70% 50% at 30% 0,#ffffffe6,#0000 70%),radial-gradient(circle at 1px 1px,#5a461e12 1.5px,#0000 0) 0 0/22px 22px,linear-gradient(#fdfbf7,#f1ece2);border:1px solid #e7e0d2;grid-template-columns:minmax(0,1fr);display:grid;box-shadow:0 1px 2px #3c2d140f,0 22px 44px -22px #3c2d1447}.np-shell[data-state=complete]{--np-line-strong:#0f6f64}.np-shell:not([data-play-mode]) .np-stats,.np-shell:not([data-play-mode]) .np-panel{display:none}.np-shell:not([data-play-mode]) .np-board{pointer-events:none}.np-shell:not([data-play-mode]) .np-cell[data-selected=true],.np-shell:not([data-play-mode]) .np-cell[data-related=true],.np-shell:not([data-play-mode]) .np-cell[data-same=true]{background:var(--np-cell);box-shadow:none}.np-shell:not([data-play-mode]) .np-cell[data-given=true]{background:var(--np-given)}.np-shell[data-play-mode=on] .np-enter{display:none}.np-enter__btn{min-width:220px;min-height:56px;font-size:1.15rem}.np-panel{display:contents}.np-top{gap:var(--space-3);grid-area:top;display:grid}.np-notices{gap:var(--space-2);grid-area:notices;display:grid}.np-notices:not(:has(.np-confirm:not([hidden]),.np-message:not(:empty))){display:none}.np-shell[data-play-mode=on] .np-notices{min-height:1.5em;display:grid}.np-controls{gap:var(--space-3);grid-area:controls;display:grid}.np-complete{grid-area:controls}.np-shell[data-state=complete] .np-controls{display:none}.np-shell[data-state=complete] .np-panel{display:contents}.np-diff{gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-full);background:var(--color-primary-tint);display:flex}.np-diff__btn{min-height:var(--tap-min);padding-inline:var(--space-2);border-radius:var(--radius-full);color:var(--color-text-muted);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex:1;font-weight:700}.np-diff__btn[aria-checked=true]{background:var(--color-surface);color:var(--color-primary-strong);box-shadow:inset 0 0 0 2px var(--color-primary)}.np-stats{justify-content:center;gap:var(--space-5);margin:0;display:flex}.np-stat{align-items:baseline;gap:var(--space-2);display:inline-flex}.np-stat__label{color:var(--color-text-muted);font-size:.85rem;font-weight:700}.np-stat__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:800}.np-shell[data-paused=true] .np-time{opacity:.45}.np-message{text-align:center;color:var(--color-text-muted);margin:0;font-size:.9rem}.np-message:empty{display:none}.np-confirm{padding:var(--space-3) var(--space-4);border:2px solid var(--color-primary);border-radius:var(--radius-md);background:var(--color-surface)}.np-confirm p{margin:0 0 var(--space-3);font-weight:700}.np-confirm__actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.np-confirm__actions .np-btn{flex:140px}.np-board{border:3px solid var(--np-line-strong);border-radius:var(--radius-sm);background:var(--np-line-strong);flex-direction:column;justify-self:center;width:min(100%,440px);transition:border-color .3s,background-color .3s;display:flex;overflow:hidden;box-shadow:inset 0 1px #fff,0 3px #d8cdb7,0 4px #3c2d141f,0 22px 34px -16px #3c2d1461;container-type:inline-size}.np-row{grid-template-columns:repeat(9,minmax(0,1fr));display:grid}.np-cell{aspect-ratio:1;border:0;border-right:1px solid var(--np-line);border-bottom:1px solid var(--np-line);background:var(--np-cell);min-width:0;color:var(--color-primary-strong);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;border-radius:0;place-items:center;padding:0;font-size:6cqi;font-weight:700;line-height:1;display:grid;position:relative}.np-cell[data-c="2"],.np-cell[data-c="5"]{border-right:3px solid var(--np-line-strong)}.np-cell[data-c="8"]{border-right:0}.np-row:nth-child(3) .np-cell,.np-row:nth-child(6) .np-cell{border-bottom:3px solid var(--np-line-strong)}.np-row:last-child .np-cell{border-bottom:0}.np-cell[data-given=true]{background:var(--np-given);color:var(--color-text);font-weight:800}.np-cell[data-related=true]{background:var(--np-related)}.np-cell[data-same=true]{background:var(--np-same)}.np-cell[data-conflict=true]{background:var(--np-conflict-bg);color:var(--np-conflict-fg);text-underline-offset:.12em;text-decoration:underline .08em dotted}.np-cell[data-selected=true]{background:var(--np-selected);box-shadow:inset 0 0 0 3px var(--color-primary)}.np-cell[data-selected=true][data-conflict=true]{background:var(--np-conflict-bg)}.np-cell:focus-visible{outline-offset:-3px;z-index:1}.np-cell:before,.np-cell:after{content:"";opacity:0;pointer-events:none;position:absolute;inset:0}.np-cell:before{background:#2f6fed4d}.np-cell:after{background:#22b8a766}.np-cell[data-pop]:before{animation:.16s ease-out both np-flash}.np-cell[data-wash]:after{animation:np-wash .46s ease-out var(--wd,0s) both}.np-shell[data-celebrate=true] .np-cell:after{animation:np-wave .75s ease-out calc(var(--wave) * 32ms) both}.np-d{display:inline-block}.np-cell[data-pop] .np-d{animation:.16s cubic-bezier(.2,.9,.3,1.25) both np-pop}@keyframes np-flash{0%{opacity:1}to{opacity:0}}@keyframes np-pop{0%{opacity:.35;scale:.55}to{opacity:1;scale:1}}@keyframes np-wash{0%{opacity:0}30%{opacity:1}to{opacity:0}}@keyframes np-wave{0%{opacity:0}25%{opacity:1}to{opacity:0}}.np-pad{gap:var(--space-2);grid-template-columns:repeat(5,minmax(0,1fr));justify-self:center;width:min(100%,520px);display:grid}.np-pad__btn{border:2px solid var(--color-primary-tint);border-radius:var(--radius-md);background:var(--color-surface);min-height:52px;color:var(--color-primary-strong);font:inherit;box-shadow:0 3px 0 var(--color-primary-tint);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:1.6rem;font-weight:800}.np-pad__btn:active{box-shadow:0 1px 0 var(--color-primary-tint);transform:translateY(2px)}.np-pad__btn--erase{color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:.8rem;display:inline-flex}.np-actions{gap:var(--space-2);justify-self:center;width:min(100%,520px);display:flex}.np-actions .np-btn{flex:1}.np-btn{min-height:var(--tap-min);padding:var(--space-2) var(--space-4);border:2px solid var(--color-primary);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-primary-strong);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:800}.np-btn--primary{background:var(--color-primary);color:var(--on-primary);box-shadow:0 4px 0 var(--color-primary-strong)}.np-btn--primary:active{box-shadow:0 2px 0 var(--color-primary-strong);transform:translateY(2px)}.np-keys{text-align:center;color:var(--color-text-muted);margin:0;font-size:.8rem}@media (hover:none),(pointer:coarse){.np-keys{display:none}}.np-complete{justify-items:center;gap:var(--space-2);text-align:center;animation:.4s cubic-bezier(.2,.8,.2,1) .12s both np-rise;display:grid}.np-complete>*{margin:0}.np-complete__title{color:var(--color-accent-strong);font-size:2rem}.np-complete__body{color:var(--color-text-muted);font-size:.9rem;display:none}.np-complete__stats{justify-content:center;gap:var(--space-1) var(--space-5);margin:0 0 var(--space-2);flex-wrap:wrap;display:flex}.np-complete__stats dt{color:var(--color-text-muted);font-size:.8rem;font-weight:700}.np-complete__stats dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin:0;font-size:1.25rem;font-weight:800}.np-complete .np-btn{min-width:200px;min-height:52px}@keyframes np-rise{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0}}.np-shell[data-play-mode=on]{--play-ink:var(--color-text);--play-icon-bg:#24344f12;--play-icon-bg-active:#24344f29;justify-items:stretch;row-gap:var(--space-2);padding:env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));box-shadow:none;-webkit-touch-callout:none;background:linear-gradient(#5a461e0b 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#5a461e0b 1px,#0000 1px) 0 0/32px 32px,radial-gradient(60% 45% at 50% 0,#ffffffd9,#0000 70%),linear-gradient(#fdfcf9,#f1ece3);border:0;border-radius:0;grid-template-rows:auto auto auto minmax(min-content,1fr) auto;grid-template-areas:"bar""top""notices""board""controls";animation:.24s ease-out np-fade;position:fixed;overflow:hidden auto}@keyframes np-fade{0%{opacity:0}to{opacity:1}}.np-shell[data-play-mode=on] .play-bar{grid-area:bar;padding-inline:0}.np-shell[data-play-mode=on] .np-stats{pointer-events:none;place-self:center;gap:var(--space-4);grid-area:bar}.np-shell[data-play-mode=on] .np-stat__value{font-size:1.3rem}.np-shell[data-play-mode=on] .np-board{width:min(100%, max(264px, calc(100dvh - var(--np-chrome))), 560px);grid-area:board;align-self:center;box-shadow:0 10px 28px #24344f29}.np-shell[data-play-mode=on] .np-pad,.np-shell[data-play-mode=on] .np-actions{width:min(100%,560px)}.np-shell[data-play-mode=on] .np-complete{padding-bottom:var(--space-2)}@media (width>=900px) and (height>=520px) and (orientation:landscape){.np-shell[data-play-mode=on]{--np-board:min(calc(100dvh - 128px), 640px);grid-template-columns:var(--np-board) minmax(300px, 380px);justify-content:center;column-gap:var(--space-7);row-gap:var(--space-3);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar""board panel"}.np-shell[data-play-mode=on] .np-board{align-self:center;width:100%}.np-shell[data-play-mode=on] .np-panel{align-content:center;row-gap:var(--space-4);grid-area:panel;min-width:0;display:grid}.np-shell[data-play-mode=on] .np-panel>*{grid-area:auto}.np-shell[data-play-mode=on] .np-pad{gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr))}.np-shell[data-play-mode=on] .np-pad__btn{min-height:64px;font-size:1.9rem}.np-shell[data-play-mode=on] .np-pad__btn--erase{gap:var(--space-2);flex-direction:row;grid-column:1/-1;min-height:52px;font-size:.95rem}.np-shell[data-play-mode=on] .np-stat__value{font-size:1.5rem}.np-shell[data-play-mode=on] .np-complete__title{font-size:2.4rem}.np-shell[data-play-mode=on] .np-complete__body{display:block}}@media (orientation:landscape) and (height<=520px){.np-shell[data-play-mode=on]{--np-board:calc(100dvh - 16px);grid-template-columns:var(--np-board) minmax(0, 1fr);column-gap:var(--space-4);row-gap:var(--space-1);padding-block:var(--space-1);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board bar""board panel";align-items:start}.np-shell[data-play-mode=on] .np-board{align-self:center;width:100%}.np-shell[data-play-mode=on] .np-panel{align-content:start;row-gap:var(--space-2);grid-area:panel;min-width:0;display:grid}.np-shell[data-play-mode=on] .np-panel>*{grid-area:auto}.np-shell[data-play-mode=on] .np-pad__btn{min-height:var(--tap-min);font-size:1.35rem}.np-shell[data-play-mode=on] .np-pad__btn--erase span{display:none}.np-shell[data-play-mode=on] .np-complete__title{font-size:1.5rem}.np-shell[data-play-mode=on] .np-stat__value{font-size:1.15rem}}@media (height<=640px){.np-shell[data-play-mode=on] .np-notices{display:contents}.np-shell[data-play-mode=on] .np-notices:has(.np-confirm:not([hidden]),.np-message:not(:empty):not([data-kind=hint])){display:grid}.np-message[data-kind=hint]{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (height<=640px) and (orientation:portrait){.np-shell[data-play-mode=on]{--np-chrome:300px;row-gap:var(--space-1)}.np-shell[data-play-mode=on] .np-pad__btn{min-height:var(--tap-min)}.np-shell[data-play-mode=on] .np-controls{gap:var(--space-2)}.np-shell[data-play-mode=on] .np-complete{gap:2px}.np-shell[data-play-mode=on] .np-complete__title{font-size:1.6rem;line-height:1.15}.np-shell[data-play-mode=on] .np-complete__stats{margin-bottom:var(--space-1)}.np-shell[data-play-mode=on] .np-complete__stats dd{font-size:1.05rem}.np-shell[data-play-mode=on] .np-complete .np-btn{min-height:var(--tap-min)}}@media (width<=400px){.np-shell[data-play-mode=on] .np-stats{justify-content:center;justify-self:stretch;gap:var(--space-3);margin-inline:56px 108px}}@media (width<=360px){.np-shell:not([data-play-mode]){padding:var(--space-3)}.np-diff__btn{white-space:nowrap;padding-inline:2px;font-size:.9rem}.np-shell[data-play-mode=on] .np-stats{gap:var(--space-2)}.np-shell[data-play-mode=on] .np-stat{flex-direction:column;align-items:center;gap:0}.np-shell[data-play-mode=on] .np-stat__label{font-size:.7rem;line-height:1.1}}@media (prefers-reduced-motion:reduce){.np-pad__btn:active,.np-btn--primary:active{transform:none}}