Gravity spot

The .gravity-spot is the center of mass of a system. Every ring is its direct child, and its gravity reaches as far as the shorter side of the universe.

Two systems in one universe. The teal one uses the default reach and touches the top and bottom of the box; the amber one has --o-force in px and ignores the box.

Reach

The reach is --o-force, the diameter of orbit-12. Between the center and that edge there are 12 lanes. The default, 100cqmin, is the shorter side of the nearest .bigbang or satellite, so the system follows its box as it resizes. Set it when you want something else:

a length, for a fixed size that ignores the box: --o-force: 120px;
100cqw, to reach the width of a wide universe instead of its height;
a fraction of the default, like calc(100cqmin * .8), to leave a margin around the system.

Systems with a fixed px reach can still scale with their container through Orbit.resize(). See Runtime and resizing.

Every system starts fresh

A .gravity-spot resets the reach, the angles, the thickness and the spacing to their defaults. A system nested in a satellite does not inherit any of them from the one around it.

A satellite is a universe too: a .gravity-spot inside one reaches the satellite's edge, so its orbit-12 is the satellite's outline. Here the outer system makes its planets five lanes thick, and each planet holds a system of its own whose moons start again from one lane and set their own size.

Each planet holds a system of its own. Its moons are three lanes of the planet, not of the sun.

An empty core

.core-1 to .core-12 on a .gravity-spot leave an empty core in the middle, N lanes wide. With core-4 the radius is split into 16 lanes instead of 12 and orbit-N lands on lane N + 4: rings sit closer together, further from the center, and orbit-12 still touches the edge. Compare the cyan rings (default) with the purple ones (core-4), both orbit-4, orbit-8 and orbit-12.

In 1.x these classes were from-1x to from-12x. They still work.

Teal: orbit-4, orbit-8 and orbit-12 with no core. Amber: the same rings in a system with an empty core.

Rings off the center

A .gravity-spot centers its rings on itself. An alignment class on it (.at-top-left, .at-top, .at-bottom-right and the rest) moves every ring toward that edge or corner, so the rings touch the center instead of surrounding it. Four systems in the same spot, one per corner:

Every ring touches the center, the amber dot, instead of surrounding it.

Reference

Set these on the .gravity-spot to change the whole system, or on a ring or element for just that part.

Class or property	Default	What it does
`--o-force`	`100cqmin`	Reach: the diameter of `orbit-12`.
`--o-size-ratio`	`1`	Thickness of the elements on the rings, in lanes.
`--o-range`	`360deg`	How much of the circle the rings use. See Orbits.
`--o-from`	`0deg`	Where the range starts, clockwise from the top.
`--o-gap`	`1`	Space between sibling arcs.
`--o-ellipse-x` / `--o-ellipse-y`	`1`	Stretch the rings into ellipses. See Orbits.
`.core-1` … `.core-12`		An empty core N lanes wide; every ring moves N lanes out. Old name: `from-Nx`.
`.at-top-left` … `.at-bottom-right`	`.at-center`	Move the rings toward an edge or a corner, touching the center.
`.depth`		Stacks the rings as 3D layers. See Depth layers.