The universe sets the size.
A .bigbang is the space. Its .gravity-spot reaches the shorter side, so orbit-12 touches the edge and every other ring is a fraction of it. Resize the parent: the system follows without JavaScript.
- universe
- reach
- one lane
.bigbang — the universe
Its box is the space. Square by default: it takes the parent's width, and a parent with a height caps it. Give it any width, height or aspect-ratio.
.gravity-spot — the center
Where the system starts. Its --o-force is the reach of gravity: the diameter of orbit-12. By default, the shorter side of the universe.
.orbit-N — a lane
The radius is split into 12 lanes. orbit-N runs N lanes from the center; orbit-13 to 24 lie beyond the edge. Elements on a ring are one lane thick, times --o-size-ratio.
.satellite — a world
Sits on its ring. It is also a universe: a .gravity-spot inside it reaches the satellite's edge, so moons scale with planets.