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

* { box-sizing: border-box; }

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

main {
  position: relative;
  background: radial-gradient(ellipse at 52% 55%, #f9fcfa 0%, #e9f1f1 68%, #dbe9e9 100%);
}

#bubbles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.liquid {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  touch-action: none;
}

.liquid polyline {
  fill: none;
  stroke: url(#ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#strands { filter: blur(.8px); }