.pd{--gk-max:28rem;--gk-chrome:0px;--pd-gap:5px;--pd-keyh:3.25rem;--pd-reserved:26.25rem;position:relative}.pd[data-mode=archive],.pd[data-mode=challenge]{--pd-reserved:30rem}.pd[data-challenge=none]{--pd-reserved:0px}.pd-msg{z-index:6;text-align:center;max-width:100%;font-size:var(--fs-sm);color:var(--text);pointer-events:none;font-weight:500;position:absolute;top:3.5rem;left:50%;transform:translate(-50%)}.pd-msg:not(:empty){padding:var(--s-2) var(--s-3);border:1px solid var(--border-strong);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-pop)}.pd[data-mode=archive] .pd-msg,.pd[data-mode=challenge] .pd-msg{top:7rem}.pd-hint{text-align:center;order:1}.pd>.gk-options,.pd>.gk-help,.pd>.gk-statsbox{order:2}.pd-extra{gap:var(--s-2);display:grid}.pd-extra[hidden],.pd-arch[hidden],.pd-banner[hidden],.pd-make[hidden],.pd-make-out[hidden],.pd-freeopts[hidden],.pd-ctbar[hidden]{display:none}.pd-freeopts{align-items:flex-end;gap:var(--s-3);flex-wrap:wrap;order:2;display:flex}.pd-ctbar{justify-content:center;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--accent);border-radius:var(--r-2);background:var(--accent-soft);color:var(--text);font-size:var(--fs-sm);flex-wrap:wrap;order:2;display:flex}.pd-arch{justify-content:space-between;align-items:center;gap:var(--s-2);display:flex}.pd-arch-mid{justify-content:center;align-items:center;gap:var(--s-1) var(--s-3);flex-wrap:wrap;min-width:0;display:flex}.pd-arch-l{font-size:var(--fs-sm);font-weight:500}.pd-arch-in{text-align:center;width:5rem}.pd-banner{text-align:center;font-size:var(--fs-sm);color:var(--text-2)}.pd-make{gap:var(--s-3);padding:var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-3);background:var(--surface-2);display:grid}.pd-make-out{gap:var(--s-2);display:grid}.pd[data-challenge=none] .pd-board,.pd[data-challenge=none] .pd-keys,.pd[data-challenge=none] .pd-hint,.pd[data-challenge=none] .gk-options{display:none}.pd-board{gap:var(--pd-gap);width:min(100%, 20rem, max(10rem, calc((var(--gk-vh) - var(--pd-reserved)) / 1.2)));margin-inline:auto;display:grid;container-type:inline-size}.pd-row{grid-template-columns:repeat(var(--pd-cols,5), minmax(0, 1fr));gap:var(--pd-gap);display:grid}.pd-tile{aspect-ratio:1;border:2px solid var(--border-strong);border-radius:var(--r-2);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:clamp(1rem, calc(55cqw / var(--pd-cols,5)), 2rem);text-transform:uppercase;justify-content:center;align-items:center;font-weight:700;line-height:1;display:flex;position:relative}.pd-tile[data-filled]{border-color:var(--text-2)}.pd-tile[data-pop]{animation:pd-pop .1s var(--ease)}.pd-tile[data-state=correct]{--fb:var(--accent);--fc:var(--accent-fg);--fbd:var(--accent);background:var(--fb);color:var(--fc);border-color:var(--fbd)}.pd-tile[data-state=present]{--fb:var(--accent-soft);--fc:var(--accent-text);--fbd:var(--accent);background:var(--fb);color:var(--fc);border-color:var(--fbd)}.pd-tile[data-state=absent]{--fb:var(--surface-3);--fc:var(--text-3);--fbd:var(--border-strong);background:var(--fb);color:var(--fc);border-color:var(--fbd)}.pd-tile[data-state]:after{content:"";position:absolute;top:5px;right:5px}.pd-tile[data-state=correct]:after{border-bottom:2px solid;border-left:2px solid;width:9px;height:5px;transform:rotate(-45deg)}.pd-tile[data-state=present]:after{border:2px solid;border-radius:50%;width:6px;height:6px}.pd-tile[data-state=absent]:after{background:currentColor;width:9px;height:2px;top:8px}.pd-tile[data-flip]{animation:pd-flip .48s var(--ease) both;animation-delay:calc(var(--i) * .24s)}.pd-row[data-shake]{animation:.32s pd-shake}@keyframes pd-pop{50%{transform:scale(1.08)}}@keyframes pd-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes pd-flip{0%{background:var(--surface);color:var(--text);border-color:var(--text-2);transform:rotateX(0)}49%{background:var(--surface);color:var(--text);border-color:var(--text-2);transform:rotateX(90deg)}50%{background:var(--fb);color:var(--fc);border-color:var(--fbd);transform:rotateX(90deg)}to{background:var(--fb);color:var(--fc);border-color:var(--fbd);transform:rotateX(0)}}.pd-tile[data-flip]:after{animation:.48s both pd-glyph;animation-delay:calc(var(--i) * .24s)}@keyframes pd-glyph{0%,49%{opacity:0}50%,to{opacity:1}}.pd-keys{gap:var(--pd-gap);width:100%;display:grid}.pd-keyrow{justify-content:center;gap:4px;display:flex}.pd-key{min-width:0;height:var(--pd-keyh);border:1px solid var(--control-border);border-radius:var(--r-1);background:var(--surface-2);color:var(--text);font-family:var(--font-mono);font-size:var(--fs-base);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;flex:1 1 0;justify-content:center;align-items:center;padding:0;font-weight:600;display:flex;position:relative}.pd-key-wide{font-size:var(--fs-xs);font-family:var(--font-sans);flex:1.6 1 0}.pd-key:hover{background:var(--surface-3)}.pd-key:focus-visible{outline:2px solid var(--focus);outline-offset:1px;z-index:1}.pd-key[data-state=correct]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.pd-key[data-state=present]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}.pd-key[data-state=absent]{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-3)}.pd-key[data-state]:after{content:"";position:absolute;top:3px;right:3px}.pd-key[data-state=correct]:after{border-bottom:2px solid;border-left:2px solid;width:6px;height:3px;transform:rotate(-45deg)}.pd-key[data-state=present]:after{border:2px solid;border-radius:50%;width:4px;height:4px}.pd-key[data-state=absent]:after{background:currentColor;width:6px;height:2px;top:5px}.pd-keys[hidden]{display:none}.pd-input{opacity:0;pointer-events:none;width:1px;height:1px;font-size:16px;position:absolute}.pd-result{gap:var(--s-3);padding:var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-3);background:var(--surface-2);display:grid}.pd-result[hidden]{display:none}.pd-result h3{font-size:var(--fs-lg);line-height:var(--lh-snug)}.pd-result p{color:var(--text-2)}.pd-share{padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.5}.pd-share-row{gap:var(--s-3);flex-wrap:wrap;align-items:flex-end;display:flex}.pd-share-row .field{flex:10rem}.pd-stats{gap:var(--s-2);margin-top:var(--s-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.pd-stat{padding:var(--s-2);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-2);flex-direction:column;gap:2px;display:flex}.pd-stat b{font-family:var(--font-mono);font-size:var(--fs-lg);font-weight:600}.pd-stat span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.3}.pd-dist{gap:var(--s-1);margin-top:var(--s-3);display:grid}.pd-bar{gap:var(--s-2);font-family:var(--font-mono);font-size:var(--fs-sm);grid-template-columns:1.25rem minmax(0,1fr);align-items:center;display:grid}.pd-bar i{min-width:1.75rem;padding:0 var(--s-2);border-radius:var(--r-1);background:var(--surface-3);color:var(--text);text-align:right;font-style:normal;line-height:1.6;display:block}.pd-bar[data-cur] i{background:var(--accent);color:var(--accent-fg)}.pd-examples{gap:var(--s-3);margin-top:var(--s-3);display:grid}.pd-example .pd-row-sm{width:9rem}.pd-example p{margin-top:var(--s-1)}.pd-tile-sm{font-size:var(--fs-md);border-width:2px}.pd-tile-sm:after{top:3px!important;right:3px!important}@media (width<=640px){.pd{--pd-keyh:3rem;--pd-reserved:24.5rem;--pd-gap:4px}.pd[data-mode=archive],.pd[data-mode=challenge]{--pd-reserved:28.5rem}.pd-keys{width:auto;margin-inline:calc(var(--s-3) * -1)}.pd-keyrow{gap:3px}}@media (width<=420px){.pd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px) and (height<=700px){.pd{--pd-keyh:2.75rem;--pd-reserved:23.75rem}.pd[data-mode=archive],.pd[data-mode=challenge]{--pd-reserved:27.75rem}}@media (prefers-reduced-motion:reduce){.pd-tile[data-flip],.pd-tile[data-flip]:after,.pd-row[data-shake],.pd-tile[data-pop]{animation:none}}