#weather > div {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 10px 10px 5px 0px color-mix(in srgb, var(--obs-ink) 30%, transparent);
}

#ringss > div {
    margin: 1em 0 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 10px 10px 5px 0px color-mix(in srgb, var(--obs-ink) 30%, transparent);
}

/* the RINGSS layers, from the ground up: a ramp on the chart from the
   ground's plum through sky, teal and green to the high layers' amber
   (the seeing monitor's ground-dark to high-warm order); recent.js
   reads them through a probe, since a color-mix() reads back unresolved */
:root {
    --ringss-layer-0: var(--obs-plum);
    --ringss-layer-1: color-mix(in srgb, var(--obs-plum) 50%, var(--obs-sky));
    --ringss-layer-2: var(--obs-sky);
    --ringss-layer-3: var(--obs-teal);
    --ringss-layer-4: var(--obs-green);
    --ringss-layer-5: color-mix(in srgb, var(--obs-green) 50%, var(--obs-amber));
    --ringss-layer-6: var(--obs-amber);
    --ringss-layer-7: color-mix(in srgb, var(--obs-amber) 55%, var(--obs-paper));
}