/* The home stations (js/3d/space-stations.js, 18 Oct 2026): the silver mark, the client's name and one panel with the role,
 * the line, the link and the product itself, large (21 Oct, GAPS.md §3.1; before, two 150 px screens).
 * 19 Oct (refs/onebit-compositions.md, proposal 2): five compositions. The name stands behind the mark at up to 300 px,
 * drawn in the world (a plane the mark hides, dithered with it); this DOM name is the link and the layout the plane copies,
 * so its text is invisible. The panel takes the half opposite the mark. All small text sits on the panel, never on the world. */
/* the name a little smaller, centred over the centred mark (owner, 19 Oct); smaller again on 20 Oct, 13.5vw and 200 px at
 * most (14vw on phones): «название компании можно меньше чуть сделать, а то всё крупное» */
html:is(.space-on,.airy) .work-orbit.is-stations .st-name{position:absolute;z-index:1;top:clamp(60px,9.5svh,100px);left:3.4vw;right:3.4vw;margin:0;text-align:center;white-space:nowrap;
 font-family:'Archivo Lens',Basel,Arial,sans-serif;font-variation-settings:"wght" 400,"wdth" 98;font-size:clamp(48px,13.5vw,200px);line-height:.8;letter-spacing:-.055em;color:transparent;
 transition:opacity .45s cubic-bezier(.16,1,.3,1),visibility 0s}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-side=left] .st-name{text-align:left}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-side=right] .st-name{text-align:right}
html:is(.space-on,.airy) .work-orbit.is-stations .st-name a{color:transparent;-webkit-text-fill-color:transparent;text-decoration:none}
html:is(.space-on,.airy) .work-orbit.is-stations .st-name a:focus-visible{outline:2px solid #000000;outline-offset:6px;border-radius:6px}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-name a:focus-visible{outline-color:#fff}
/* the panel: the copy and the arrows in one column, the product beside it as large as the frame's lower half allows
   (16:9; 21 Oct, GAPS.md §3.1: «the work is the hero of each station», the picture at least as tall as the copy). Here
   from 701 to 1100 px: the width of the stage, the picture 38 % of the width at most */
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.st-panel{position:absolute;z-index:2;left:2.8vw;right:2.8vw;bottom:0;top:auto;width:auto;height:auto;min-height:24svh;max-width:none;margin:0;
 display:grid;grid-template-columns:minmax(0,1fr) min(38vw,50svh);grid-template-rows:minmax(0,1fr) auto;column-gap:2vw;row-gap:16px;padding:22px 22px 34px;background:#fff;color:#000000;border-radius:16px 16px 0 0;
 transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),visibility 0s}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-panel=left] .st-panel.st-panel{left:2.8vw;right:2.8vw}
html:is(.space-on,.airy) .work-orbit.is-stations .st-meta{grid-column:1;grid-row:1;display:grid;align-content:start;gap:12px;min-width:0}
html:is(.space-on,.airy) .work-orbit.is-stations .st-role{margin:0;font-size:14px;line-height:1.3;color:#707379}
html:is(.space-on,.airy) .work-orbit.is-stations .st-line{margin:0;max-width:20em;font-size:clamp(18px,1.67vw,24px);line-height:1.25;color:#000000;text-wrap:pretty}
html:is(.space-on,.airy) .work-orbit.is-stations .st-open{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#000000;text-decoration:underline;text-underline-offset:3px}
html:is(.space-on,.airy) .work-orbit.is-stations .st-open svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shots{grid-column:2;grid-row:1/span 2;display:grid;min-width:0;align-content:start}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot{display:grid;gap:8px;min-width:0;font-size:13px;color:#707379;text-decoration:none}
/* the product in its own colour, as the case's recording frames it (16:9) */
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot picture{display:block;min-width:0}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot img{display:block;width:100%;height:auto;max-width:none;aspect-ratio:16/9;object-fit:cover;object-position:50% 0;border-radius:10px;background:#eceff5}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-steps{position:static;grid-column:1;grid-row:2;align-self:end;display:grid;grid-auto-flow:column;justify-content:start;gap:8px;margin:0}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:#eef1f7;color:#000000;cursor:pointer;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step::before,html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step::after{content:none}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step:hover{background:#e4e7ed}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step[aria-disabled=true]{opacity:.35;cursor:default}
html:is(.space-on,.airy) .work-orbit.is-stations .st-nb{white-space:nowrap}
/* one anchor on the page's grid (21 Oct; review-frames.md fix 11): 12 columns in 4vw margins with 2vw gutters (a column
   5.8333vw); the copy from column 5, the product on columns 8-12 (37 % of the width at 1440, 535 px; on a short window
   it keeps to a third of the height and the copy takes the rest), the arrows under the copy, for every station, so the
   arrows stay under the hand from one station to the next. The stage already stands inside the 4vw margins, so the
   columns count from its edge; the panel's 22 px padding sits outside the columns */
@media (min-width:1101px){
 html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.st-panel{left:calc(31.3333vw - 22px);right:-22px;width:auto;grid-template-columns:minmax(0,1fr) min(37.1667vw,60.5svh);column-gap:2vw}
}
/* away while the stations do not hold the camera (the approach, the grid below) */
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky.is-away .st-name{opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky.is-away .st-panel{opacity:0;visibility:hidden;transform:translateY(40px);pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
/* (-73, 24 Oct; holdV) before the world's first frame the stage stands by itself (js/3d/space-stations.js preWorld): the
   name in the DOM's own type and the page's ink, till the art, drawn the same way over the same box, takes over */
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky.st-pre :is(.st-name,.st-name a){color:inherit;-webkit-text-fill-color:currentColor}
/* a new station: its panel's content arrives (the house curve); the name comes up in the world's dots (the plane), the
   product develops from glyphs (js/film-panels.js) */
@keyframes st-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.is-in :is(.st-meta>*,.st-shot){animation:st-in .6s cubic-bezier(.16,1,.3,1) both}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.is-in .st-meta>:nth-child(2){animation-delay:.05s}
html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.is-in .st-meta>:nth-child(3){animation-delay:.1s}
/* -73 (24 Oct; the m1 motion report h04-h07: «five stations, one choreography»): the screen comes in from where the
   station's camera comes (js/3d/space-stations.js data-move): round the mark, down from above, up from under, a slide, a
   turn from edge on; .7 s on `clear`; the screen's develop runs inside it */
@keyframes st-round{from{opacity:0;transform:perspective(1400px) rotateY(-24deg) translateX(-28px)}to{opacity:1;transform:none}}
@keyframes st-down{from{opacity:0;transform:translateY(-64px)}to{opacity:1;transform:none}}
@keyframes st-up{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes st-slide{from{opacity:0;transform:translateX(88px)}to{opacity:1;transform:none}}
@keyframes st-turn{from{opacity:0;transform:perspective(1400px) rotateY(58deg)}to{opacity:1;transform:none}}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-move=round] .st-panel.is-in .st-shot{animation:st-round .7s cubic-bezier(.16,1,.3,1) both;transform-origin:0 50%}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-move=down] .st-panel.is-in .st-shot{animation:st-down .7s cubic-bezier(.16,1,.3,1) both}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-move=up] .st-panel.is-in .st-shot{animation:st-up .7s cubic-bezier(.16,1,.3,1) both}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-move=slide] .st-panel.is-in .st-shot{animation:st-slide .7s cubic-bezier(.16,1,.3,1) both}
html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-move=turn] .st-panel.is-in .st-shot{animation:st-turn .7s cubic-bezier(.16,1,.3,1) both;transform-origin:100% 50%}
@media (max-width:700px){
 html:is(.space-on,.airy) .work-orbit.is-stations .st-name{top:clamp(56px,8.5svh,84px);left:16px;right:16px;font-size:clamp(40px,14vw,80px)}
}
@media (prefers-reduced-motion:reduce){html:is(.space-on,.airy) .work-orbit.is-stations :is(.st-meta>*,.st-shot){animation:none!important}}
/* by night the paper inverts: a black panel, white ink (owner, 19 Oct) */
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-panel.st-panel{background:#000000;color:#fff}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations :is(.st-line,.st-open){color:#fff}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations :is(.st-role,.st-shot){color:#888b91}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-shot img{background:#181b21}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step{background:#181b21;color:#fff}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step:hover{background:#22252b}
/* the name as type over the world (js/3d/space-stations.js): crisp, in the page's ink, the marks cut out of it */
html:is(.space-on,.airy) .work-orbit.is-stations .st-name .st-name-art{position:absolute;display:block;pointer-events:none;max-width:none}
/* phones: the product full width under the mark, then the line, «Open the case» and the two arrows beside it, no role
   line, no caption (21 Oct, GAPS.md §3.1; before, the cover alone at 36vw beside the line, review-20261021c/phones-os.md
   §1.6); the bottom padding clears the frame's bottom tab by one gap, 20 px (-73, 24 Oct: 66 px left «Open the case» 2 px over
   the tab; the same gap as the stills' orbit, css/space-ui.css QA-73 row 5). The mark keeps above the panel (space-stations.js
   framing: its foot one gap over the panel's top, its top under its name) */
@media (max-width:700px){
 html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.st-panel,html:is(.space-on,.airy) .work-orbit.is-stations .work-orbit-sticky[data-panel=left] .st-panel.st-panel{left:0;right:0;width:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:12px;padding:14px 16px calc(var(--frame,8px) + 2*var(--frame-pad,4px) + 48px + 20px + env(safe-area-inset-bottom,0px))}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-shots{grid-column:1/-1;grid-row:1}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-meta{grid-column:1;grid-row:2;gap:10px}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-line{font-size:17px;line-height:1.25}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-role{display:none}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-shot span{display:none}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-steps{grid-column:2;grid-row:2;align-self:start}
 html:is(.space-on,.airy) .work-orbit.is-stations .st-panel .wo-step{width:36px;height:36px}
}
@media (max-width:380px){
 html:is(.space-on,.airy) .work-orbit.is-stations .st-line{font-size:16px}
}
/* a shot's live loop (js/film-panels.js, FILM.md §2 act 2): the video stands in the picture's own cell, same frame
   and corners, over its poster, and shows once it plays; the picture and the name keep their rows */
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot[data-loop]>:is(img,picture){grid-row:1;grid-column:1}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot[data-loop]>span{grid-row:2;grid-column:1}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot>video.st-loop{grid-row:1;grid-column:1;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#eceff5;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1)}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-shot>video.st-loop{background:#181b21}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot.is-playing>video.st-loop{opacity:1}
@media (prefers-reduced-motion:reduce){html:is(.space-on,.airy) .work-orbit.is-stations .st-shot>video.st-loop{display:none}}
/* the waiting print (22 Oct, jury F12): a panel's picture hides until it has loaded and develops from glyphs, so on a
   slow phone the paper panel stood empty. Its cell now holds the print's dots from the first frame, in the picture's
   own box and corners; the picture, its develop canvas and its loop stand over them in the same cell */
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot::before{content:"";grid-row:1;grid-column:1;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:radial-gradient(circle,#b9bfc8 0 1px,transparent 1.4px) 0 0/5px 5px,#eceff5}
html:is(.space-on,.airy) .work-orbit.is-stations .st-shot>:is(img,picture){grid-row:1;grid-column:1}
html[data-theme=dark]:is(.space-on,.airy) .work-orbit.is-stations .st-shot::before{background:radial-gradient(circle,#3a3f47 0 1px,transparent 1.4px) 0 0/5px 5px,#181b21}

/* -73 (23 Oct; the main AD, AD-DIRECTION.md §8.3: «Станции прославляют клиента, а не работу… доминанта — экран продукта, не
   уже половины кадра… имя клиента — L, а не XL»; jury 4 C3): the client's name at L (96 px at 1440, 40 on phones; it was
   13.5vw up to 200 px) and, from 1101 px, the product at half the frame's width (it was 37 %). */
html:is(.space-on,.airy) .work-orbit.is-stations .st-name:not(#_u){font-size:var(--t-l);line-height:.9}
@media (min-width:1101px){
 html:is(.space-on,.airy) .work-orbit.is-stations .st-panel.st-panel:not(#_u){left:calc(25vw - 22px);grid-template-columns:minmax(0,1fr) min(50vw,68svh)}
}