:root {
  color-scheme: light;
  background: #eeedf1;
}

* { box-sizing: border-box; }

html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  -webkit-tap-highlight-color: transparent;
}

main { position: relative; }

.pond-bed, #pond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pond-bed {
  background: #eeedf1 url("./assets/pebbles-rendered.1112975a3c9608ab.png") center / cover no-repeat;
}

#pond {
  display: block;
  opacity: 0;
  touch-action: none;
  outline: none;
  transition: opacity 700ms ease;
}

#pond.ready { opacity: 1; }

#pond:focus-visible { box-shadow: inset 0 0 0 2px #77708f99; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #pond { transition: none; }
}