.kl-shell{--kl-maxh:min(44svh,22rem);--kl-fr:clamp(0.5rem,2.2vw,0.75rem)}@media (min-width:640px){.kl-shell{--kl-maxh:min(54vh,30rem)}}@media (min-width:900px){.kl-shell{--kl-maxh:min(60vh,32rem)}}.kl-bar{margin-bottom:.6rem;row-gap:.4rem}.kl-bar .kl-name{order:2;flex:1 1 7rem;min-width:0;margin:0;color:var(--pp-muted);font-size:.85rem;font-weight:800;line-height:1.3}.kl-bar .kl-pill{order:3}.kl-done-tag{color:var(--pp-cta)}.kl-level-trigger strong{margin:0 .1rem}.kl-pill strong{font-family:var(--font-display),Fraunces,Georgia,serif;font-size:1rem}.kl-stage{position:relative;display:flex;justify-content:center;container-type:inline-size;padding-bottom:.9rem}.kl-frame{position:relative;padding:var(--kl-fr,.6rem);background:repeating-linear-gradient(100deg,rgb(255 255 255/4%) 0 7px,transparent 7px 15px),var(--pp-walnut);border-radius:18px;box-shadow:inset 0 2px 0 rgb(255 255 255/18%),0 6px 0 var(--pp-walnut-edge)}.kl-board{position:relative;width:min(calc(100cqi - 2 * var(--kl-fr, .6rem)),calc(var(--kl-maxh, 24rem) * var(--w) / var(--h)),calc(var(--w) * 5.4rem));aspect-ratio:var(--w) /var(--h);background:linear-gradient(90deg,var(--pp-line) 1px,transparent 1px) 0 0 /calc(100% / var(--w)) 100%,linear-gradient(180deg,var(--pp-line) 1px,transparent 1px) 0 0 /100% calc(100% / var(--h)),var(--pp-board);border-radius:9px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.kl-gate{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}.kl-gate--bottom,.kl-gate--top{left:calc(var(--ex) / var(--w) * 100% + 6px);width:calc(var(--el) / var(--w) * 100% - 12px);height:calc(var(--kl-fr, .6rem) + 2px)}.kl-gate--bottom{top:100%;background:linear-gradient(var(--pp-board),#f6efe2);border-radius:0 0 8px 8px}.kl-gate--top{bottom:100%;background:linear-gradient(#f6efe2,var(--pp-board));border-radius:8px 8px 0 0}.kl-gate--left,.kl-gate--right{top:calc(var(--ex) / var(--h) * 100% + 6px);height:calc(var(--el) / var(--h) * 100% - 12px);width:calc(var(--kl-fr, .6rem) + 2px)}.kl-gate--right{left:100%;background:linear-gradient(90deg,var(--pp-board),#f6efe2);border-radius:0 8px 8px 0}.kl-gate--left{right:100%;background:linear-gradient(270deg,var(--pp-board),#f6efe2);border-radius:8px 0 0 8px}.kl-gate>span{position:absolute;padding:.1rem .5rem;color:var(--pp-paper);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:var(--pp-cta);border-radius:999px;box-shadow:0 2px 0 var(--pp-cta-edge)}.kl-gate--bottom>span{top:calc(100% + 3px)}.kl-gate--top>span{bottom:calc(100% + 3px)}.kl-gate--right>span{left:calc(100% + 3px)}.kl-gate--left>span,.kl-gate--right>span{writing-mode:vertical-rl;padding:.5rem .1rem}.kl-gate--left>span{right:calc(100% + 3px)}.kl-piece{position:absolute;z-index:3;left:calc(var(--x) / var(--w) * 100%);top:calc(var(--y) / var(--h) * 100%);width:calc(var(--pw) / var(--w) * 100%);height:calc(var(--ph) / var(--h) * 100%);padding:clamp(2px,.9cqi,4px);margin:0;background:none;border:0;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;transform:translate(calc(var(--ox, 0) * 100% / var(--pw)),calc(var(--oy, 0) * 100% / var(--ph)));transition:left .12s cubic-bezier(.2,.9,.3,1.1),top .12s cubic-bezier(.2,.9,.3,1.1)}.kl-piece:focus-visible{outline:none}.kl-piece:focus-visible .kl-wood{box-shadow:0 0 0 3px var(--pp-focus),inset 0 2px 0 rgb(255 255 255/35%)}.kl-wood{position:relative;display:grid;place-items:center;width:100%;height:100%;color:#3E2A1C;background:repeating-linear-gradient(var(--grain,92deg),rgb(255 255 255/7%) 0 5px,rgb(0 0 0/3%) 5px 9px,transparent 9px 15px),linear-gradient(rgb(255 255 255/26%),transparent 45%,rgb(0 0 0/10%)),var(--wood,#B8865B);border:1.5px solid rgb(62 42 28/70%);border-radius:clamp(6px,2.6cqi,12px);box-shadow:inset 0 2px 0 rgb(255 255 255/35%),inset 0 -3px 0 rgb(0 0 0/16%),0 3px 0 rgb(0 0 0/18%);transition:transform .14s ease,box-shadow .14s ease}.kl-wood--small{--wood:#8BA888}.kl-wood--tall{--wood:#B8865B;--grain:2deg}.kl-wood--wide{--wood:#D9A72B}.kl-wood--target{--wood:#C0573F;color:#F7D27A}.kl-wood--2x1{--wood:#D9A72B}.kl-star{width:36%;max-width:3rem;filter:drop-shadow(0 1px 0 rgb(0 0 0/30%))}.kl-label{font-family:var(--font-display),Fraunces,Georgia,serif;font-size:clamp(.8rem,4.2cqi,1.35rem);font-weight:700;line-height:1;writing-mode:horizontal-tb;color:rgb(43 38 32/82%);text-shadow:0 1px 0 rgb(255 255 255/35%)}.kl-wood--tall .kl-label{writing-mode:vertical-rl;letter-spacing:.15em}.kl-wood--target .kl-label{color:#FBE7B0;font-size:clamp(1rem,6cqi,1.9rem);text-shadow:0 1px 0 rgb(0 0 0/30%)}.kl-piece.is-selected{z-index:5}.kl-piece.is-selected .kl-wood{box-shadow:0 0 0 3px var(--pp-focus),inset 0 2px 0 rgb(255 255 255/35%),0 4px 0 rgb(0 0 0/18%)}.kl-piece.is-dragging{z-index:6;cursor:grabbing;transition:left 70ms ease-out,top 70ms ease-out}.kl-piece.is-dragging .kl-wood{transform:scale(1.03);box-shadow:0 0 0 3px var(--pp-focus),0 10px 18px -6px rgb(30 24 18/45%)}@keyframes kl-bump{0%,to{translate:0}30%{translate:-3px 0}60%{translate:3px 0}}.kl-piece.is-bumped .kl-wood{animation:kl-bump .22s ease}.kl-piece.is-hinted .kl-wood:after{content:"";position:absolute;inset:-4px;border:3px dashed var(--pp-mustard);border-radius:inherit;animation:puzzle-hint-pulse 1.2s ease-in-out infinite}@keyframes kl-exit-bottom{to{transform:translateY(110%);opacity:0}}@keyframes kl-exit-right{to{transform:translateX(110%);opacity:0}}.kl-exit-bottom .kl-piece.is-exiting .kl-wood{animation:kl-exit-bottom .7s cubic-bezier(.5,0,.8,.4) .25s forwards}.kl-exit-right .kl-piece.is-exiting .kl-wood{animation:kl-exit-right .7s cubic-bezier(.5,0,.8,.4) .25s forwards}.kl-dot{position:absolute;z-index:2;pointer-events:none;left:calc((var(--x) + .5) / var(--w) * 100%);top:calc((var(--y) + .5) / var(--h) * 100%);width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;background:color-mix(in srgb,var(--pp-focus) 70%,transparent);border-radius:999px;box-shadow:0 0 0 4px color-mix(in srgb,var(--pp-focus) 22%,transparent)}.kl-complete{z-index:15;gap:.35rem;max-width:min(92%,22rem)}.kl-complete .pp-btn{margin-top:.4rem}.kl-perfect{color:#F7D27A;font-weight:800}.kl-thinking{top:.6rem}.kl-beads{display:inline-flex;gap:3px;margin-right:.45rem}.kl-beads i{width:7px;height:7px;border-radius:999px;background:var(--pp-walnut);animation:puzzle-hint-pulse .9s ease-in-out infinite}.kl-beads i:nth-child(2){animation-delay:.15s}.kl-beads i:nth-child(3){animation-delay:.3s}.kl-controls{display:grid;gap:.45rem;margin-top:.6rem}.kl-actions,.kl-dpad{display:grid;gap:.4rem}.kl-dpad{grid-template-columns:repeat(4,minmax(0,1fr))}.kl-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.kl-controls .pp-btn{min-height:46px;padding:0 .35rem;font-size:.95rem}.kl-dpad .pp-btn{font-size:1.25rem}.kl-help{margin:.1rem 0 0;color:var(--pp-muted);font-size:.78rem;line-height:1.4;text-align:center}@media (min-width:900px){.kl-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;max-width:40rem;margin-inline:auto}.kl-help{grid-column:1/-1}}.kl-toast{bottom:7.4rem}.kl-picker{max-width:30rem}.kl-picker__list{display:grid;gap:.35rem;max-height:min(60vh,28rem);overflow-y:auto;padding-right:.2rem}.kl-picker__row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:center;gap:.5rem;min-height:46px;padding:.35rem .7rem;text-align:left;background:var(--pp-paper);border:1.5px solid var(--pp-line);border-radius:12px;font:inherit;color:var(--pp-ink)}.kl-picker__row.is-current{border-color:var(--pp-focus);box-shadow:0 0 0 2px var(--pp-focus)}.kl-picker__row.is-done{background:color-mix(in srgb,var(--pp-sage) 18%,var(--pp-paper))}.kl-picker__id{font-family:var(--font-display),Fraunces,Georgia,serif;font-size:1.15rem;font-weight:700}.kl-picker__name{font-weight:800;font-size:.92rem;line-height:1.2}.kl-picker__name em{color:var(--pp-muted);font-style:normal;font-weight:700}.kl-picker__min{color:var(--pp-muted);font-size:.8rem;font-weight:800;white-space:nowrap}.kl-picker__min b{color:var(--pp-cta)}.kl-mini{--kl-fr:4px;border-radius:9px;box-shadow:0 3px 0 var(--pp-walnut-edge)}.kl-mini .kl-board{width:calc(var(--w) * var(--kl-cell, 1.3rem));border-radius:5px}.kl-mini .kl-piece{padding:1px;transition:none;cursor:default}.kl-mini .kl-wood{border-width:1px;border-radius:4px;box-shadow:inset 0 1px 0 rgb(255 255 255/30%)}.kl-mini .kl-star{width:46%}.kl-mini .kl-label{font-size:calc(var(--kl-cell, 1.3rem) * .42)}.kl-mini .kl-wood--target .kl-label{font-size:calc(var(--kl-cell, 1.3rem) * .55)}.kl-mini .kl-gate--bottom,.kl-mini .kl-gate--top{height:6px}.kl-mini .kl-gate--left,.kl-mini .kl-gate--right{width:6px}@media (prefers-reduced-motion:reduce){.kl-piece,.kl-wood{transition:none}.kl-piece.is-exiting .kl-wood,.kl-piece.is-hinted .kl-wood:after{animation:none}}.kl-range{width:100%;accent-color:var(--pp-walnut);min-height:32px}.kl-replay .kl-name{color:var(--pp-ink);font-size:.95rem;min-height:2.6em}.kl-steps{display:grid;gap:.25rem 1rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.kl-steps li{scroll-margin-top:6rem}.kl-steps a{display:block;padding:.25rem .4rem;border-radius:8px;color:var(--pp-muted);font-size:.9rem;text-decoration:none}.kl-steps a:hover{background:var(--pp-bg);color:var(--pp-ink)}.kl-steps b{display:inline-block;min-width:2.2rem;color:var(--pp-walnut)}