/* hej — the temporary landing for nuet.dev, on systemet (tokens, type, grid: systemet/systemet.css, a git subtree).
   Only what this page adds: the stage, the now, its words and the stages under them. */
body{position:relative;min-height:100vh;min-height:100svh}         /* the page is at least the viewport */
.stage{height:calc(5*var(--st))}                                    /* header storey above; three storeys of stage; the words' storey below */
.line{position:absolute;left:0;right:0;height:0}                    /* the mark's row; no timeline (removed 2026-09-30) */
.rings{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}   /* the rings at ×3, drawn on the whole page around the mark, invisible between beats */
.rings circle{opacity:0}
.rings.pulse circle{animation:pulse 1.5s cubic-bezier(.2,.7,.2,1) both}                     /* the pulse: each ring lights up and fades, one after another outward */
.rings.pulse circle:nth-child(2){animation-delay:.15s} .rings.pulse circle:nth-child(3){animation-delay:.3s} .rings.pulse circle:nth-child(4){animation-delay:.45s} .rings.pulse circle:nth-child(5){animation-delay:.6s}
@keyframes pulse{20%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.rings.pulse circle{animation:none}}
.nowm{position:absolute;margin:calc(-3*var(--m)) 0 0 calc(-3*var(--m));z-index:2}   /* the mark (systemet .mark), centred on the line */
.words{position:absolute;white-space:nowrap}

/* the now: the mark alone in storey 3, resting on its second baseline like the headline in its storey, its edge on window 1's; the words in the storey below, on window 1. now.js measures the same. */
.line{top:calc(2*var(--st) + 2*var(--bl) - 3*var(--m))}
.nowm{left:calc(var(--mg) + 3*var(--m))}
.words{left:var(--mg);top:calc(3*var(--st))}
@media(max-width:699px){.words .m11{white-space:normal;max-width:calc(100vw - 2*var(--mg))}}   /* a long zone name may wrap on phones */

/* the stages: four, one after another, in the manner of a Claude Code spinner and in Swenglish, on the clock (one cycle of 7.5 s: declarar
   first; the four green hold 2.5 s to the next cycle, where declarar takes the first line and the rest fade, in one frame). They are the
   tail of the now's block: a baseline of air under the headline, then `your business :=`, then straight away * declarar… 3s (the glyph turns
   · + × * in Klein, the seconds count), which becomes · declarad => 3 objects, 2 links (a drawn kelly status dot, and it stays: current is
   green; the => is Fira Code's arrow), then the next stage under it. ex.js runs them; without JavaScript all four stand still, done. */
.words > .m11{margin-top:var(--bl)} .ex{margin-top:0}   /* a baseline of air above the define line, none below: the line belongs to the definition */
.ex .sp{display:inline-block;width:2ch;color:var(--klein)} .ex .tx{white-space:pre-wrap}   /* the padding that lines the arrows up; a long zone name may wrap after the time on phones */
.ex .sp.ok::before{content:'';display:inline-block;width:.5ex;height:.5ex;margin-left:calc(.5ch - .25ex);border-radius:50%;background:var(--kelly);vertical-align:.25ex}   /* done: the status dot to the rule — half the x-height, centred on the x-height, in the glyph's cell */
.ex p{transition:opacity .2s,visibility 0s} .ex p.off{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}   /* a line fades in and out over .2 s; the first line never goes off; the glyph's colour switches at once, in the frame of the pulse */
@media(prefers-reduced-motion:reduce){.ex p,.ex p.off{transition:none}}