.wp-nonet{display: flex;flex-direction: column;align-items: center;gap: .8rem}.wp-nonet form{display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;gap: 1.2rem}.wp-nonet-grid{display: grid;grid-template-columns: repeat(9,minmax(0,1fr));width: min(100%,27rem);aspect-ratio: 1;border: 3px solid var(--ww-ink);background: var(--ww-paper)}.wp-nonet-cell{position: relative;display: grid;place-items: center;min-width: 0;border-right: 1px solid color-mix(in oklch,var(--ww-line) 85%,var(--ww-ink));border-bottom: 1px solid color-mix(in oklch,var(--ww-line) 85%,var(--ww-ink));color: var(--ww-blue-deep,var(--ww-blue));font: 600 clamp(1rem,4.6vw,1.55rem) var(--ww-mono);cursor: pointer;user-select: none}.wp-nonet-cell:nth-child(9n){border-right: 0}.wp-nonet-cell:nth-last-child(-n + 9){border-bottom: 0}.wp-nonet-cell.is-box-right{border-right: 2px solid var(--ww-ink)}.wp-nonet-cell.is-box-bottom{border-bottom: 2px solid var(--ww-ink)}.wp-nonet-cell.is-given{color: var(--ww-ink);font-weight: 800;cursor: default;background: color-mix(in oklch,var(--ww-paper-2) 70%,var(--ww-paper))}.wp-nonet-cell.is-same{background: color-mix(in oklch,var(--ww-gold) 22%,var(--ww-paper))}.wp-nonet-cell.is-clash .wp-nonet-digit{color: var(--ww-danger-text);text-decoration: underline wavy}.wp-nonet-pick{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer}.wp-nonet-cell:has(.wp-nonet-pick:checked){background: color-mix(in oklch,var(--ww-gold) 48%,var(--ww-paper))}.wp-nonet-cell:has(.wp-nonet-pick:focus-visible){outline: 3px solid var(--ww-focus);outline-offset: -3px;z-index: 1}@media (hover: hover){label.wp-nonet-cell:hover{background: color-mix(in oklch,var(--ww-gold) 14%,var(--ww-paper))}}.wp-nonet-digit{pointer-events: none}.wp-nonet-notes{display: grid;grid-template: repeat(3,1fr) / repeat(3,1fr);width: 100%;height: 100%;padding: 2px;pointer-events: none}.wp-nonet-notes i{display: grid;place-items: center;font: 600 clamp(.42rem,1.6vw,.6rem) var(--ww-mono);font-style: normal;color: var(--ww-ink-soft)}.wp-nonet-tools{display: flex;flex-direction: column;align-items: center;gap: .7rem}.wp-nonet-mode,.wp-sampler-mode{display: inline-flex;margin: 0;padding: 3px;border: 1px solid var(--ww-line);border-radius: 999px}.wp-nonet-mode label,.wp-sampler-mode label{position: relative;cursor: pointer}.wp-nonet-mode input,.wp-sampler-mode input{position: absolute;opacity: 0}.wp-nonet-mode span,.wp-sampler-mode span{display: inline-flex;align-items: center;gap: .35rem;min-height: 44px;padding: 0 1rem;border-radius: 999px;font-weight: 700;font-size: .85rem}.wp-nonet-mode input:checked + span,.wp-sampler-mode input:checked + span{color: var(--ww-paper);background: var(--ww-ink)}.wp-nonet-mode input:focus-visible + span,.wp-sampler-mode input:focus-visible + span{outline: 3px solid var(--ww-focus);outline-offset: 2px}.wp-nonet-pad{display: grid;grid-template-columns: repeat(5,3rem);gap: .4rem}.wp-nonet-key{min-height: 44px;border: 2px solid var(--ww-ink);border-radius: var(--ww-radius-sm);background: var(--ww-paper);color: var(--ww-ink);font: 800 1.15rem var(--ww-mono);cursor: pointer;transition: transform var(--ww-dur-micro) var(--ww-ease-out),background-color var(--ww-dur-micro) var(--ww-ease-out)}@media (hover: hover){.wp-nonet-key:hover{background: color-mix(in oklch,var(--ww-gold) 30%,var(--ww-paper));transform: translateY(-1px)}}.wp-nonet-key:focus-visible{outline: 3px solid var(--ww-focus);outline-offset: 2px}.wp-nonet-key:active{transform: translateY(1px)}.wp-nonet-key:disabled{opacity: .5;cursor: not-allowed}.wp-nonet-key--erase{color: var(--ww-ink-soft)}.wp-nonet-hint{max-width: 30rem;margin: 0;font-size: .78rem;color: var(--ww-ink-soft);text-align: center}.wp-sampler{display: flex;flex-direction: column;align-items: center;gap: .8rem}.wp-sampler form{display: flex;flex-direction: column;align-items: center;gap: .8rem;width: 100%}.wp-sampler-grid{--cell: min(2.4rem,calc((100vw - 7rem) / var(--sampler-size)));display: grid;grid-template-columns: auto repeat(var(--sampler-size),var(--cell));grid-auto-rows: auto;align-items: end}.wp-sampler-corner{grid-column: 1}.wp-sampler-clue{display: flex;gap: .2rem;font: 700 clamp(.6rem,2.6vw,.82rem) var(--ww-mono);color: var(--ww-ink);font-variant-numeric: tabular-nums}.wp-sampler-clue--col{flex-direction: column;align-items: center;justify-content: flex-end;padding-bottom: .25rem}.wp-sampler-clue--row{justify-content: flex-end;align-self: stretch;align-items: center;padding-right: .4rem}.wp-sampler-clue.is-done{color: color-mix(in oklch,var(--ww-ink-soft) 70%,transparent);text-decoration: line-through}.wp-sampler-cell{position: relative;display: block;width: var(--cell);height: var(--cell);padding: 0;border: 1px solid color-mix(in oklch,var(--ww-line) 80%,var(--ww-ink));border-radius: 0;background: var(--ww-paper);cursor: pointer}.wp-sampler-cell.is-fifth-right{border-right: 2px solid var(--ww-ink)}.wp-sampler-cell.is-fifth-bottom{border-bottom: 2px solid var(--ww-ink)}.wp-sampler-cell.is-fill{background: var(--ww-ink)}.wp-sampler-cell.is-cross::before,.wp-sampler-cell.is-cross::after{content: "";position: absolute;top: 50%;left: 22%;right: 22%;height: 2px;background: var(--ww-ink-soft)}.wp-sampler-cell.is-cross::before{transform: rotate(45deg)}.wp-sampler-cell.is-cross::after{transform: rotate(-45deg)}@media (hover: hover){button.wp-sampler-cell:not(.is-fill):hover{background: color-mix(in oklch,var(--ww-gold) 28%,var(--ww-paper))}}button.wp-sampler-cell:focus-visible{outline: 3px solid var(--ww-focus);outline-offset: -2px;z-index: 1}button.wp-sampler-cell:active{transform: scale(.94)}button.wp-sampler-cell:disabled{cursor: not-allowed;opacity: .6}@media (max-width: 40rem){.wp-nonet-pad{grid-template-columns: repeat(5,2.75rem)}}