:root { font-family: system-ui, sans-serif; color: #403b34; background: #f7f2e9; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #235f67; } h1 { margin-bottom: .25rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #776a57; border-radius: .6rem; background: white; color: #403b34; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #165e91; outline-offset: 3px; }
button:disabled { opacity: .75; cursor: default; } .controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.sand { position: relative; width: min(100%, 300px); aspect-ratio: 1; overflow: hidden; border-radius: 1rem; background: #ead5ae; }
.sand svg, .points, .wave { position: absolute; inset: 0; width: 100%; height: 100%; } .points { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center; }
.point { width: 48px; height: 48px; border: 2px solid #755842; border-radius: 50%; padding: 0; background: #fffaf0; }
.point[aria-pressed='true'] { background: #97c5bc; border-width: 4px; } .wave { pointer-events: none; background: #a5d6d7aa; animation: wash .8s ease-out forwards; }
.wave[hidden] { display: none; } @keyframes wash { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; opacity: 0; } }
.result { margin-top: 1rem; padding: 1rem; background: #e0e9dc; border-radius: .75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.memory-sand { display: block; width: min(100%, 300px); aspect-ratio: 1; border-radius: 1rem; background: #ead5ae; }