.hn-shell{--hn-maxh:min(34svh,15rem);--hn-fr:clamp(0.45rem,2vw,0.7rem)}@media (min-width:640px){.hn-shell{--hn-maxh:min(40vh,21rem)}}@media (min-width:900px){.hn-shell{--hn-maxh:min(40vh,22rem)}}.hn-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .75rem;margin-bottom:.7rem}.hn-sizes{display:inline-flex;padding:3px;background:var(--pp-board);border-radius:999px}.hn-size{min-width:2.6rem;min-height:40px;padding:0 .4rem;color:var(--pp-muted);font:inherit;font-weight:900;font-size:.95rem;background:transparent;border:0;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}.hn-size.is-on{color:var(--pp-paper);background:var(--pp-walnut);box-shadow:0 2px 0 var(--pp-walnut-edge)}.hn-size:focus-visible{outline:3px solid var(--pp-focus);outline-offset:1px}.hn-stats{display:flex;gap:.4rem}.hn-stat{display:grid;min-width:3.1rem;padding:.2rem .5rem;text-align:center;background:var(--pp-board);border-radius:12px;line-height:1.15}.hn-stat small{color:var(--pp-muted);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.hn-stat strong{font-family:var(--font-display),Fraunces,Georgia,serif;font-size:1.05rem;font-variant-numeric:tabular-nums;white-space:nowrap}.hn-stat--best strong{font-family:inherit;font-size:.78rem;font-weight:800;padding-top:.2rem}@media (max-width:480px){.hn-top{justify-content:center}.hn-sizes{width:100%;justify-content:space-between}.hn-size{flex:1 1 0;min-width:0}.hn-stats{width:100%}.hn-stat{flex:1 1 0;min-width:0;padding:.2rem .3rem}}.hn-stage{position:relative;display:flex;justify-content:center;container-type:inline-size;padding-bottom:.5rem}.hn-frame{padding:var(--hn-fr);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)}.hn-board{--base:13%;--dh:calc(68% / max(var(--n), 5));position:relative;width:min(calc(100cqi - 2 * var(--hn-fr)),calc(var(--hn-maxh) * 1.7),46rem);aspect-ratio:1.7;background:repeating-linear-gradient(92deg,rgb(255 255 255/10%) 0 9px,rgb(0 0 0/2%) 9px 15px,transparent 15px 26px),var(--pp-board);border-radius:10px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.hn-base{left:2%;right:2%;bottom:3%;height:calc(var(--base) - 3%);background:repeating-linear-gradient(92deg,rgb(255 255 255/8%) 0 6px,transparent 6px 14px),#A8774E;border-radius:6px;box-shadow:inset 0 2px 0 rgb(255 255 255/25%),0 2px 0 rgb(0 0 0/18%)}.hn-base,.hn-peg{position:absolute}.hn-peg{top:0;bottom:0;left:calc(100% / 3 * var(--p));width:calc(100% / 3);margin:0;padding:0;background:transparent;border:0;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}.hn-peg:focus-visible{outline:3px solid var(--pp-focus);outline-offset:-3px}.hn-peg.is-over,.hn-peg.is-sel{background:rgb(217 167 43/18%)}.hn-peg.is-bad{background:rgb(192 87 63/18%);animation:hn-shake .35s ease}.hn-peg.is-hint{background:rgb(47 107 85/14%)}.hn-post{position:absolute;left:50%;bottom:var(--base);width:clamp(7px,2.2cqi,12px);height:calc(100% - var(--base) - 12%);transform:translateX(-50%);background:linear-gradient(90deg,#7A5236,#B58457 45%,#7A5236);border-radius:6px 6px 2px 2px;box-shadow:0 1px 0 rgb(0 0 0/15%)}.hn-label{position:absolute;left:0;right:0;bottom:3.5%;height:calc(var(--base) - 4%);display:flex;align-items:center;justify-content:center;gap:.25em;white-space:nowrap;color:#FFF6E5;font-weight:900;font-size:clamp(.62rem,2.6cqi,.85rem);letter-spacing:.04em;line-height:1;text-shadow:0 1px 0 rgb(0 0 0/30%);pointer-events:none}.hn-label em{font-style:normal;font-weight:800;color:#F7D27A}.hn-disk{--w:calc(100% / 3 * (0.3 + 0.62 * (var(--d) - 1) / max(var(--n) - 1, 1)));position:absolute;left:calc(100% / 3 * (var(--p) + .5));bottom:calc(var(--base) + var(--i) * var(--dh));width:var(--w);height:var(--dh);transform:translateX(-50%);padding:0;box-sizing:border-box;background:repeating-linear-gradient(92deg,rgb(255 255 255/10%) 0 5px,rgb(0 0 0/4%) 5px 9px,transparent 9px 15px),linear-gradient(rgb(255 255 255/30%),transparent 50%,rgb(0 0 0/14%)),var(--disk,#D2A774);border:1.5px solid rgb(62 42 28/65%);border-radius:999px;box-shadow:inset 0 1px 0 rgb(255 255 255/35%),0 2px 0 rgb(0 0 0/16%);pointer-events:none;transition:bottom .14s cubic-bezier(.2,.9,.3,1.1),left .14s cubic-bezier(.2,.9,.3,1.1)}.hn-disk[data-disk="1"]{--disk:#E7C277}.hn-disk[data-disk="2"]{--disk:#D9A72B}.hn-disk[data-disk="3"]{--disk:#C98A4B}.hn-disk[data-disk="4"]{--disk:#C0573F}.hn-disk[data-disk="5"]{--disk:#9DB894}.hn-disk[data-disk="6"]{--disk:#5E8F7A}.hn-disk[data-disk="7"]{--disk:#8B6B4F}.hn-disk[data-disk="8"]{--disk:#6E4B32}.hn-disk.is-lifted{bottom:calc(100% - var(--dh) - 3%);box-shadow:0 0 0 3px var(--pp-mustard),0 6px 10px rgb(0 0 0/22%)}.hn-disk.is-hinted{box-shadow:0 0 0 3px var(--pp-cta),inset 0 1px 0 rgb(255 255 255/35%)}.hn-disk.is-ghost{opacity:.3}.hn-disk.is-drag{--w:calc(100% / 3 * (0.3 + 0.62 * (var(--d) - 1) / max(var(--n) - 1, 1)));bottom:auto;transform:translate(-50%,-50%);transition:none;z-index:5;box-shadow:0 0 0 3px var(--pp-mustard),0 8px 14px rgb(0 0 0/25%)}.hn-board.is-solved .hn-disk{box-shadow:0 0 0 2px rgb(47 107 85/55%),inset 0 1px 0 rgb(255 255 255/35%)}@keyframes hn-shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}.hn-complete{gap:.25rem;max-width:min(94%,24rem);padding:.85rem 1rem}.hn-complete strong{font-size:1.25rem}.hn-complete .pp-btn{min-height:42px}.hn-complete__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.4rem}.hn-complete .pp-btn--ghost{color:var(--pp-ink)}.hn-record{color:#F7D27A;font-weight:800}.hn-note{font-size:.85rem;opacity:.92}.hn-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;max-width:34rem;margin:.5rem auto 0}.hn-actions .pp-btn{min-height:46px;padding:0 .3rem;font-size:.92rem;white-space:nowrap}.hn-help{max-width:36rem;margin:.5rem auto 0;color:var(--pp-muted);font-size:.78rem;line-height:1.4;text-align:center}.hn-left{display:inline-block;color:var(--pp-cta);font-weight:800}.hn-toast{bottom:6.2rem}@media (prefers-reduced-motion:reduce){.hn-disk{transition:none}.hn-peg.is-bad{animation:none}}.hn-figure{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}.hn-figure figure{margin:0;padding:.5rem;background:var(--pp-bg);border-radius:12px;text-align:center}.hn-figure svg{width:100%;height:auto;display:block}.hn-figure figcaption{margin-top:.3rem;color:var(--pp-muted);font-size:.78rem;font-weight:700}