:root{--wall-back:#15131a;--wall-front:#221f2b;--grout:#ffffff0a;--hold-size:clamp(54px, 10vmin, 116px)}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(120% 90% at 50% 0%, var(--wall-front), var(--wall-back)), var(--wall-back);color:#f4f1ea;touch-action:manipulation;-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,sans-serif;overflow:hidden}body:before{background-image:linear-gradient(var(--grout) 1px, transparent 1px), linear-gradient(90deg, var(--grout) 1px, transparent 1px);content:"";pointer-events:none;background-size:25vmin 25vmin;position:fixed;inset:0}.offscreen{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.gauge{z-index:2;opacity:1;width:13px;transition:opacity .4s;position:fixed;top:12vh;bottom:12vh;left:clamp(12px,2.4vw,30px)}body[data-phase=ready] .gauge{opacity:0}.gauge-track{background:repeating-linear-gradient(0deg,#ffffff47 0 1px,#0000 1px 12.5%),#ffffff17;border:1px solid #ffffff38;border-radius:999px;height:100%;position:relative}.gauge-fill{--height:0;height:calc(var(--height) * 100%);background:linear-gradient(#f2b134,#d94f3d);border-radius:999px;transition:height .42s cubic-bezier(.2,.7,.3,1);position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 14px #f2b13473}.wall{inset:calc(var(--hold-size) * .62);transition:filter .5s;position:fixed}body[data-phase=showing] .wall{filter:brightness(78%)}body[data-phase=showing] .hold{cursor:default}.hold[data-kind=green]{--gain:1.67;--lift:2.4}.hold[data-kind=red]{--gain:.99;--lift:1.5}.hold[data-kind=yellow]{--gain:.48;--lift:1}.hold[data-kind=orange]{--gain:.53;--lift:1.05}.hold{--gain:1;--lift:1;--dormant:grayscale(100%) brightness(var(--gain)) contrast(88%);width:var(--hold-size);height:var(--hold-size);cursor:pointer;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%,-50%)}.hold img{width:100%;height:100%;filter:var(--dormant);object-fit:contain;rotate:var(--spin);scale:calc(var(--flip) * var(--scale)) var(--scale);-webkit-user-select:none;user-select:none;transition:filter .26s,translate .16s}body[data-phase=climbing] .hold:not(.done):hover img,body[data-phase=ready] .hold:not(.done):hover img,.hold:not(.done):focus-visible img{filter:grayscale(70%) brightness(calc(var(--gain,1) * 1.62));translate:0 -3px}.hold:focus-visible{outline:none}.hold.lit img{filter:brightness(var(--lift)) saturate(1.12) drop-shadow(0 0 18px #ffd68aa6);transition:filter 90ms;translate:0 -5px}.hold.done img{filter:brightness(var(--lift)) saturate(1.05)}.hold.held img{filter:brightness(var(--lift)) saturate(1.12);scale:calc(var(--flip) * var(--scale) * .92) calc(var(--scale) * .92);transition:filter 60ms,scale 60ms,translate 60ms;translate:0 2px}.hold.wrong img{animation:.5s both miss}body[data-phase=ready] .hold.start img{animation:2.1s ease-in-out infinite breathe}@keyframes breathe{0%,to{filter:var(--dormant)}50%{filter:brightness(var(--lift)) saturate(1.12) drop-shadow(0 0 16px #ffd68a73);translate:0 -4px}}@keyframes miss{0%{filter:none}30%{filter:brightness(180%)saturate(160%)}to{filter:grayscale()brightness(22%)}}body[data-phase=fallen] .wall{filter:brightness(65%)saturate(40%);animation:.62s cubic-bezier(.36,.07,.19,.97) both slip}body[data-phase=fallen] .hold img{animation:peel calc(var(--scale) * .72s) cubic-bezier(.4, .1, .9, .6) calc(.38s + var(--lag) * .32s) forwards}body[data-phase=fallen] .hold.wrong img{animation:miss .38s ease both, peel calc(var(--scale) * .72s) cubic-bezier(.4, .1, .9, .6) .34s forwards}@keyframes peel{0%{translate:0;rotate:var(--spin)}to{translate:calc(var(--drift) * 90px) 125vh;rotate:calc(var(--spin) + var(--tumble))}}.hold.landing img{animation:land .38s cubic-bezier(.22, 1.4, .5, 1) calc(var(--lag) * .26s) both}@keyframes land{0%{scale:calc(var(--flip) * var(--scale) * .14) calc(var(--scale) * .14);opacity:0}55%{opacity:1}to{scale:calc(var(--flip) * var(--scale)) var(--scale);opacity:1}}@keyframes slip{10%,90%{translate:-5px 2px}20%,80%{translate:8px -3px}30%,50%,70%{translate:-11px 4px}40%,60%{translate:11px -2px}}body[data-phase=topped] .wall{filter:brightness(112%)}@media (prefers-reduced-motion:reduce){.hold img,.gauge-fill,.wall{transition-duration:1ms}body[data-phase=fallen] .wall{animation:none}body[data-phase=fallen] .hold img,body[data-phase=fallen] .hold.wrong img{animation:dropout .26s ease calc(var(--lag) * .14s) forwards}.hold.landing img{animation:none}@keyframes dropout{to{opacity:0}}body[data-phase=ready] .hold.start img{animation:2.1s steps(2,jump-none) infinite breathe}}