.zip-game{--zip-blue:#1264f4;--zip-grid:#8b9292;--zip-hedge:#f2f0e9;--zip-magenta:#df3ca8}.zip-board{aspect-ratio:var(--zip-columns) / var(--zip-rows);grid-template-columns:repeat(var(--zip-columns), minmax(0, 1fr));grid-template-rows:repeat(var(--zip-rows), minmax(0, 1fr));isolation:isolate;touch-action:none;user-select:none;background:#151b1e;border-radius:1rem;width:100%;max-width:38rem;max-height:min(68vh,38rem);margin-inline:auto;display:grid;position:relative;overflow:hidden;container-type:inline-size}.zip-board:after{border:3px solid var(--zip-grid);border-radius:inherit;content:"";pointer-events:none;z-index:4;position:absolute;inset:0}.zip-cell{z-index:3;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}.zip-board:not([data-complete=true]):focus-visible .zip-cell[data-keyboard-selected=true]{outline-offset:-5px;z-index:5;outline:3px solid #fff1a8}.zip-cell:before{border-bottom:1px solid var(--zip-grid);border-right:1px solid var(--zip-grid);content:"";pointer-events:none;position:absolute;inset:0}.zip-path-layer{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.zip-path,.zip-live-path{fill:none;filter:drop-shadow(0 .25rem .35rem #05070a55);stroke-linecap:round;stroke-linejoin:round;stroke-width:54px}.zip-clue{color:#16191c;letter-spacing:.01em;z-index:7;background:#f3f1ed;border:2px solid #171b1e;border-radius:999px;justify-content:center;align-items:center;width:clamp(2.15rem,10.5vw,3.1rem);height:clamp(2.15rem,10.5vw,3.1rem);font:500 clamp(1.05rem,5vw,1.55rem)/1 Avenir Next,Century Gothic,sans-serif;display:flex;position:relative;box-shadow:0 .18rem .45rem #00000045}.zip-game[data-large-board=true] .zip-clue{aspect-ratio:1;width:82%;height:auto;font-size:clamp(.68rem,3.1cqw,1rem)}@media (width<=32rem){.zip-game[data-large-board=true]{margin-inline:-.45rem}.zip-game[data-large-board=true] .game-card{padding-inline:.35rem}}.zip-cell[data-start=true] .zip-clue{border-color:#baff8a;font-weight:700;box-shadow:0 0 0 .28rem #a6ff7738,0 .18rem .45rem #00000045}.zip-wall{background:var(--zip-hedge);pointer-events:none;z-index:6;position:absolute;transform:translate(-50%);box-shadow:0 0 .25rem #0008}.zip-wall[data-orientation=vertical]{width:clamp(.3rem,1.2vw,.48rem)}.zip-wall[data-orientation=horizontal]{height:clamp(.3rem,1.2vw,.48rem);transform:translateY(-50%)}.zip-cell[data-hint=next]:after,.zip-cell[data-hint=mistake]:after{content:"";pointer-events:none;z-index:8;border:4px solid #a6ff77;border-radius:38%;animation:.72s ease-out infinite alternate zip-hint-pulse;position:absolute;inset:13%}.zip-cell[data-hint=mistake]:after{border-color:#ff6e91}@keyframes zip-hint-pulse{0%{opacity:.45;transform:scale(.76)}to{opacity:1;transform:scale(1)}}.zip-board[data-complete=true] .zip-cell:before{animation:.72s cubic-bezier(.45,.05,.8,.3) both zip-grid-fall;animation-delay:var(--zip-fall-delay)}.zip-board[data-complete=true] .zip-clue{animation:.42s cubic-bezier(.4,0,.8,.4) both zip-clue-dismiss;animation-delay:var(--zip-fall-delay)}.zip-board[data-complete=true]:after,.zip-board[data-complete=true] .zip-wall{animation:.76s cubic-bezier(.45,.05,.8,.3) 90ms both zip-grid-fall}.zip-board[data-complete=true] .zip-path-layer{transform-origin:50%;animation:1.65s cubic-bezier(.2,.85,.2,1) .18s both zip-path-finish}.zip-board[data-complete=true] .zip-path{animation:1.15s ease-out .22s both zip-path-flash}.zip-start-marker{fill:#f5f2e9;stroke:#151b1e;stroke-width:4px;transform-box:fill-box;transform-origin:50%;animation:.46s cubic-bezier(.2,.8,.2,1) 1.05s both zip-start-reveal}@keyframes zip-grid-fall{35%{opacity:.7}to{opacity:0;transform:translateY(5.5rem)rotate(4deg)}}@keyframes zip-clue-dismiss{to{opacity:0;transform:translateY(.8rem)scale(.72)}}@keyframes zip-path-finish{0%{transform:skew(0)rotate(0)scale(1)}38%{transform:skew(-5deg)rotate(-1.25deg)scale(.96)}68%{transform:skew(2deg)rotate(.65deg)scale(1.008)}to{transform:skew(0)rotate(0)scale(1)}}@keyframes zip-path-flash{28%{filter:brightness(1.8)saturate(1.25)drop-shadow(0 0 .8rem #b9e8ff);stroke-width:59px}to{filter:drop-shadow(0 .25rem .35rem #05070a55);stroke-width:54px}}@keyframes zip-start-reveal{0%{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.zip-cell[data-hint=next]:after,.zip-cell[data-hint=mistake]:after{opacity:1;animation:none;transform:none}.zip-board[data-complete=true] .zip-cell:before,.zip-board[data-complete=true] .zip-clue,.zip-board[data-complete=true]:after,.zip-board[data-complete=true] .zip-wall{opacity:0;animation:none}.zip-board[data-complete=true] .zip-path,.zip-board[data-complete=true] .zip-path-layer{animation:none}.zip-start-marker{opacity:1;animation:none}}