html,body{min-height:100vh}body{background-color:#f5e4bc;background-image:radial-gradient(#edc978a6 1px,#0000 1px),radial-gradient(#edc978a6 1px,#0000 1px);background-position:0 0,2.5px 2.5px;background-size:5px 5px;place-items:center;margin:0;display:grid}body.is-dragging{cursor:grabbing}.maze{aspect-ratio:1;border-radius:50%;width:min(90vmin,600px);position:relative}.maze:before{content:"";z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(calc(135deg + var(--maze-tilt-y,0deg)*2 - var(--maze-tilt-x,0deg)*2),#fff0 0%,#ffffff1a 30%,#ffffff4d 50%,#ffffff1a 70%,#fff0 100%);mix-blend-mode:overlay;transform:rotateX(var(--maze-tilt-x,0deg))rotateY(var(--maze-tilt-y,0deg));position:absolute;inset:0;overflow:hidden}canvas{width:100%;height:100%;box-shadow:var(--maze-shadow-x)var(--maze-shadow-y)var(--maze-shadow-color),calc(2*var(--maze-shadow-x))calc(2*var(--maze-shadow-y))var(--maze-shadow-blur,0)#0000004d;cursor:grab;transform:rotateX(var(--maze-tilt-x,0deg))rotateY(var(--maze-tilt-y,0deg));border-radius:50%;display:block}canvas:not(.is-dragging){transition-property:transform,box-shadow;transition-duration:var(--maze-transition-duration,.2s)}canvas.is-dragging{--maze-shadow-blur:12px;cursor:grabbing}canvas.win{animation:.6s ease-out pulse}@keyframes pulse{0%{outline:0 solid #87cefa}to{outline:32px solid #0000}}