:root{--background:#f2e4ce;--sandstone-light:#e8d5b7;--sandstone-mid:#d4b896;--sandstone-dark:#a8906f;--ochre-light:#e0a94f;--ochre-mid:#c08432;--ochre-dark:#8a5a1e;--lapis-light:#4a6fa5;--lapis-mid:#2e4a73;--lapis-dark:#1b2e4a;--date-light:#7a9455;--date-mid:#5c7340;--date-dark:#3e4f2b}*{box-sizing:border-box}body{background:var(--background);height:100dvh;min-height:100vh;color:var(--lapis-dark);flex-direction:column;margin:0;font-family:system-ui,sans-serif;line-height:1.5;display:flex;overflow:hidden}header{text-align:center;padding:1.25rem 1rem 0}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;min-height:0;padding:1rem 1rem 1.5rem;display:flex}h1{letter-spacing:.3em;text-transform:uppercase;margin:0;font-size:1rem;font-weight:500}.stage{background:var(--background);flex:1;width:100%;min-height:0;transition:filter .4s ease-out;position:relative}.stage canvas{width:100%;height:100%;display:block}.handles{position:absolute;inset:0}.handle{cursor:pointer;background:0 0;border:0;border-radius:50%;width:clamp(2.6rem,5vw,3.6rem);height:clamp(2.6rem,5vw,3.6rem);padding:0;position:absolute;transform:translate(-50%,-50%)}.handle.area{border-radius:0;width:auto;height:auto;transform:none}.attap canvas{animation:1.7s ease-in-out infinite thirst}@keyframes thirst{0%,to{filter:brightness()}50%{filter:brightness(1.045)}}.ripple{--ripple-size:clamp(.9rem, 1.8vw, 1.3rem);width:var(--ripple-size);height:var(--ripple-size);border:2px solid var(--lapis-dark);pointer-events:none;border-radius:50%;animation:.52s ease-out forwards ripple;position:absolute;transform:translate(-50%,-50%)}@keyframes ripple{0%{opacity:.9;scale:.4}to{opacity:0;scale:1.35}}.ripple.miss{border-width:1px;animation-name:ripple-miss}@keyframes ripple-miss{0%{opacity:.5;scale:.35}to{opacity:0;scale:.85}}.handle:focus-visible{outline:3px solid var(--lapis-dark);outline-offset:2px}.handle.area:focus-visible{background:var(--lapis-dark);opacity:.3;outline:none}.progress{gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.progress li{display:flex}.progress button{cursor:pointer;background:0 0;border:0;width:2rem;height:2rem;padding:0}.progress button:before{border:2px solid var(--lapis-dark);background:var(--sandstone-light);content:"";border-radius:50%;width:.9rem;height:.9rem;margin:0 auto;transition:background .2s ease-out;display:block}.progress button.here:before{background:var(--lapis-dark)}.progress button.done:before{border-color:var(--date-mid);background:var(--date-mid)}.progress button:focus-visible{outline:3px solid var(--lapis-dark);outline-offset:2px}@media (prefers-reduced-motion:reduce){.progress button:before{transition:none}.attap canvas{animation:none}.ripple{opacity:0;animation:none}.stage{transition:none}}