/* one column by default (phones, DOM order: header → switch → picture → line → end); two columns once the stage pins */
#s4 .s4-g{width:100%;display:grid;grid-template-columns:minmax(0,1fr);row-gap:18px}
#s4 .s4-g>*{min-width:0}
#s4 .h2{font-size:clamp(1.9rem,3.4vw,3rem)}
#s4 .ba-sw,#s4 .ba-end{justify-self:start}
#s4 .kick{margin:0 0 8px;font-size:.95rem;font-weight:600;opacity:.7}
/* the picture. --c: the corner closes the ring (last 12% of t). --j: the rows join the ring (narrow layout) */
#s4 .s4-fig{position:relative;margin:0;width:100%;--c:clamp(0,calc((var(--t,0) - .88)*8.4),1);--j:clamp(0,calc((var(--t,0) - .5)*3),1)}
#s4 .s4-ring{position:relative;width:min(100%,340px);aspect-ratio:1/1;margin-inline:auto;background:radial-gradient(circle,rgba(101,141,255,.09),transparent 48%)}
#s4 .s4-ring svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#s4 :where(.s4-ring path){fill:none;stroke-width:1}
#s4 .gl{stroke:var(--sky);stroke-width:26;stroke-linejoin:miter;opacity:calc(.42*var(--c))}
#s4 .sl{stroke:rgba(169,188,255,.22);stroke-dasharray:3 4;transition:opacity .3s}
#s4 .sl.gp{stroke:var(--alert);stroke-width:1.5;stroke-dasharray:6 4;fill:rgba(255,122,89,.1)}
#s4 .sl.on{opacity:0}
/* a piece: fallen inside the ring and tilted today; slides out to its slot inside its own window of t (--s … --s + .2) */
#s4 .pc{--k:clamp(0,calc((var(--t,0) - var(--s,0))*5),1);--u:calc(1 - var(--k)*var(--k)*(3 - 2*var(--k)));fill:var(--sky-2);fill-opacity:calc(.08 + .92*var(--k));stroke:rgba(169,188,255,.6);stroke-dasharray:4 3;transform-box:view-box;transform:translate(calc(var(--dx)*var(--u)),calc(var(--dy)*var(--u))) rotate(calc(var(--sp)*var(--u)))}
#s4 .pc.on{stroke:var(--sky-2);stroke-dasharray:none}
#s4 .pc.gp{fill:var(--sky);fill-opacity:1;stroke:var(--sky);stroke-dasharray:none;transform:none;opacity:var(--k)}
#s4 .ar{fill:var(--sky);fill-opacity:var(--c);stroke:rgba(169,188,255,.4);stroke-dasharray:3 3;stroke-linejoin:miter}
#s4.shut .ar{stroke:var(--sky);stroke-dasharray:none}
#s4 .sp{stroke:var(--sky);stroke-width:1.5;stroke-dasharray:112px;stroke-dashoffset:calc(112px*(1 - var(--j)))}
#s4 .s4-0 .sp{display:none}
/* segment names: HTML over the ring, each pushed outward from its slot; readable in both states */
#s4 .s4-ov{position:absolute;inset:0;pointer-events:none}
#s4 .nm{position:absolute;width:max-content;max-width:6.4em;transform:translate(var(--tx),var(--ty));font-size:12px;font-weight:500;line-height:1.35;color:var(--mute-d);text-wrap:balance;transition:color .3s}
/* the index is an LTR-isolated run, so its logical end is the outer (right) side: the gap to the Arabic name is its physical left */
#s4 .nm i{font-style:normal;font-size:var(--fs-label-s);letter-spacing:.06em;opacity:.75;margin-left:5px}
#s4 .nm.on{color:var(--paper)}
#s4 .nm.gp{color:var(--alert)}
#s4 .nm.gp.on{color:var(--sky)}
#s4 .fl{display:block;font-weight:700}
/* the visitor's rows: loose and tilted today, docked after. Narrow layout: a list hanging from the ring */
#s4 .s4-rows{position:relative;list-style:none;margin:0 auto;padding:10px 0 0;max-width:440px;display:grid;gap:6px;border-top:1px solid var(--line-d)}
#s4 .s4-rows::before{content:"";position:absolute;inset:-1px 0 auto;height:1px;background:var(--sky);transform:scaleX(var(--j))}
#s4 .s4-rows li{--k:clamp(0,calc((var(--t,0) - var(--s,.3))*2.5),1);--u:calc(1 - var(--k)*var(--k)*(3 - 2*var(--k)));position:relative;min-width:0;transform:translate(calc(var(--lx,0px)*var(--u)),calc(var(--ly,0px)*var(--u))) rotate(calc(var(--lr,0deg)*var(--u)))}
#s4 .tg{justify-self:start;--s:.28}
#s4 .rw{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:7px 10px}
#s4 .rw::before{content:"";position:absolute;inset:0;z-index:-1;border:1px dashed rgba(255,122,89,.65);border-radius:8px;background:var(--night-2);opacity:var(--u)}
/* a row whose after state is still bad (the visitor's own choice) keeps its alert card: shown honestly */
#s4 .rw.kp::before{opacity:1}
#s4 .rl{min-width:0;font-size:.95rem;font-weight:500;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s4 .rw .ba-rs{font-size:.8rem;padding:1px 10px}
#s4 .s4-rows li:nth-child(2){--s:.3;--lx:-4%;--lr:-2.5deg}
#s4 .s4-rows li:nth-child(3){--s:.38;--lx:4%;--ly:6px;--lr:2deg}
#s4 .s4-rows li:nth-child(4){--s:.46;--lx:-2.5%;--ly:8px;--lr:-3deg}
@media (min-width:701px){
  #s4 .stage{justify-content:flex-start;padding:var(--nav-clear) 0 16px}
  #s4 .s4-g{margin-block:auto;grid-template:". fig" 1fr "hd fig" auto "sw fig" auto "ln fig" auto "en fig" auto ". fig" 1fr / minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,72px)}
  #s4 .ba-hd{grid-area:hd}
  #s4 .ba-sw{grid-area:sw}
  #s4 .ba-line{grid-area:ln}
  #s4 .ba-end{grid-area:en}
  #s4 .s4-fig{grid-area:fig;align-self:center}
  #s4 .s4-ring{width:min(100%,440px,calc(100vh - var(--nav-clear) - 290px));width:min(100%,440px,calc(100svh - var(--nav-clear) - 290px))}
}
@media (min-width:701px) and (max-height:680px){
  #s4 .s4-g{row-gap:10px}
  #s4 .h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
  #s4 .kick{margin-bottom:4px}
  #s4 .ba-say{margin-top:8px}
}
/* wide stage: the ring fills the picture and holds the rows inside it; today they sit outside, spilled through the open corner.
   Below 700px of height the ring is too small for three two-line rows plus the tag, so the list-under-the-ring layout stays. */
@media (min-width:1100px) and (min-height:700px){
  #s4 .s4-fig{container-type:inline-size;justify-self:center;width:min(100%,calc(100vh - var(--nav-clear) - 44px));width:min(100%,calc(100svh - var(--nav-clear) - 44px))}
  #s4 .s4-ring{width:100%}
  #s4 .sp,#s4 .s4-rows::before{display:none}
  #s4 .nm{font-size:13px;max-width:7.4em}
  #s4 .s4-rows{position:absolute;left:50%;top:50%;width:40%;max-width:none;margin:0;padding:0;border:0;gap:4px;transform:translate(-50%,-50%);justify-items:center;text-align:center}
  #s4 .tg{justify-self:center;--lx:30cqw;--ly:-28cqw;--lr:4deg}
  #s4 .rw{width:100%;grid-template-columns:minmax(0,1fr);justify-items:center;padding:4px 8px}
  #s4 .rl{font-size:clamp(12.5px,2.5cqw,15px);text-wrap:balance}
  #s4 .s4-rows li:nth-child(2){--lx:26cqw;--ly:-25.7cqw;--lr:-5deg}
  #s4 .s4-rows li:nth-child(3){--lx:29cqw;--ly:-24.3cqw;--lr:4deg}
  #s4 .s4-rows li:nth-child(4){--lx:25cqw;--ly:-23cqw;--lr:-3deg}
}
/* reduced motion: no pinned scroll, the after state stands as a plain block */
@media (prefers-reduced-motion:reduce){
  #s4.pin{height:auto!important}
  #s4 .stage{position:relative;height:auto;overflow:visible;padding-block:calc(var(--nav-clear) + 28px) 72px}
}#s5 .s5-g{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:". fig" "hd fig" "sw fig" "ln fig" "en fig" ". fig";column-gap:clamp(24px,4vw,64px);padding-top:calc(var(--nav-clear) + 6px);padding-bottom:clamp(14px,3vh,30px)}
#s5 .s5-g>*{min-width:0}
#s5 .ba-hd{grid-area:hd}
#s5 .kick{margin:0 0 clamp(6px,1.4vh,12px);font-size:.95rem;font-weight:600;opacity:.7}
#s5 .h2{font-size:clamp(1.8rem,3.5vw,3.3rem);font-size:clamp(1.8rem,min(3.5vw,6.4svh),3.3rem);max-width:none}
#s5 .ba-say{margin-top:clamp(10px,2vh,18px)}
#s5 .ba-sw{grid-area:sw;justify-self:start;margin-top:clamp(14px,2.6vh,24px)}
#s5 .ba-line{grid-area:ln;margin-top:clamp(12px,2.4vh,22px);font-size:clamp(1.05rem,1.6vw,1.4rem)}
#s5 .ba-end{grid-area:en;margin-top:clamp(12px,2.4vh,22px)}
/* the picture: one desk on top, the visitor's rows as cards, one owner ring per row */
#s5 .s5-fig{grid-area:fig;margin:0;min-height:0;height:100%;max-height:660px;align-self:center;display:flex;flex-direction:column;gap:8px}
#s5 .s5-cap{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:28px}
#s5 .s5-st{font-size:.85rem;font-weight:600;line-height:1.4;color:var(--alert);transition:color .4s}
#s5[data-state="after"] .s5-st:not(.bad){color:var(--sky)}
#s5 .s5-bx{position:relative;flex:1;min-height:0}
#s5 .s5-sv{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:1.5}
#s5 .s5-la{stroke:var(--alert);stroke-dasharray:1 1;stroke-linecap:round}
#s5 .s5-lc{stroke:var(--sky);stroke-linecap:round}
#s5 .s5-df{fill:var(--alert);stroke:none}
#s5 .s5-da{stroke:var(--alert);stroke-width:2.2}
#s5 .s5-ds{stroke:var(--sky);stroke-width:2.2}
#s5 .s5-n0{stroke:var(--mute-d);stroke-dasharray:2 4}
#s5 .s5-nd{color:var(--ok)}
#s5 .s5-nd[data-tone="mid"]{color:var(--sky-2)}
#s5 .s5-nd[data-tone="hold"]{color:var(--sky)}
#s5 .s5-n1{stroke:currentColor;stroke-width:2}
#s5 .s5-dl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);text-align:center;font-size:.82rem;font-weight:600;line-height:1.2;pointer-events:none}
#s5 .s5-c{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:8px 12px;background:var(--night-3);border:1px solid rgba(255,122,89,.6);border-radius:10px;box-shadow:0 6px 18px rgba(11,12,23,.5);will-change:transform;transition:border-color .4s}
#s5[data-state="after"] .s5-c:not(.stay){border-color:var(--line-d)}
#s5 .s5-c b{min-width:0;font-size:.9rem;font-weight:500;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s5 .s5-c .ba-rs{flex:none;max-width:100%;font-size:.8rem;padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s5 .s5-bx.nar .s5-c{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px}
#s5 .s5-bx.nar .s5-c b{flex:1}
#s5 .s5-bx.nar .s5-c .ba-rs{max-width:46%}
/* every pinned width keeps two columns (the picture switches to its narrow layout by its own width); one column only on phones */
@media (max-width:1000px){#s5 .s5-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* the end action is invisible until the after state: not clickable before it, and shown if the keyboard reaches it */
@media (min-width:701px) and (min-height:561px){
  #s5 .ba-end:not(.on):not(:focus-within){pointer-events:none}
  #s5 .ba-end:focus-within{opacity:1;transform:none}
}
/* reduced motion or a window too short for the stage: no pin, the scene flows as a plain block */
@media (prefers-reduced-motion:reduce),(max-height:560px){
  #s5.pin{height:auto!important}
  #s5 .stage{position:relative;height:auto;overflow:visible}
  #s5 .s5-g{padding-block:calc(var(--nav-clear) + 28px) 72px}
  #s5 [data-at]{opacity:1;transform:none}
}
@media (max-width:700px),(prefers-reduced-motion:reduce),(max-height:560px){
  #s5 .s5-g{height:auto}
  #s5 .s5-fig{height:auto;max-height:none}
  #s5 .s5-bx{flex:none;height:var(--s5-h,460px)}
}
@media (max-width:700px){
  #s5 .s5-g{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"hd" "sw" "fig" "ln" "en";padding-block:0}
  #s5 .s5-fig{margin-top:22px}
}/* One picture, flow-based: the settled (after) state is the natural layout; the loose (before) state is a per-object transform scaled by --k (1 loose, 0 settled). */
#s6{--pt:26px;--gap:clamp(18px,2.4vw,30px);--pad:14px}
#s6 .stage{padding-block:calc(var(--nav-clear) + 8px) 20px}
#s6 .s6-g{width:100%;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(28px,4.5vw,72px)}
/* start side, top to bottom: headline, sentence, switch, the line, the end action */
#s6 .ba-hd{grid-area:2/1}
#s6 .ba-sw{grid-area:3/1;justify-self:start;margin-top:22px}
#s6 .ba-line{grid-area:4/1;margin-top:22px;min-height:4.8em;font-size:clamp(1.1rem,1.6vw,1.4rem)}
#s6 .ba-end{grid-area:5/1;margin-top:20px}
#s6 .kick{margin:0 0 12px;font-size:.95rem;font-weight:600;opacity:.7}
#s6 .h2{font-size:clamp(1.9rem,3.2vw,3rem);max-width:17ch}
/* end side: the picture */
#s6 .s6-fig{grid-area:1/2/7/3;margin:0;min-width:0;min-height:0;height:min(620px,calc(100vh - var(--nav-clear) - 60px));height:min(620px,calc(100svh - var(--nav-clear) - 60px));display:grid;grid-template-rows:auto minmax(0,1fr)}
/* the sentence: loose words today, one line after */
#s6 .s6-in{display:grid;gap:6px;min-width:0;padding-bottom:12px;border-bottom:1px solid var(--line-d);transition:border-color .4s}
/* the band above the line is where the loose words float today; they settle down onto the rule */
#s6 .s6-w{margin:0;padding-top:2.1em;min-height:3.7em;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:clamp(.95rem,1.25vw,1.1rem);font-weight:300;line-height:1.6}
#s6 .s6-wd{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(246,247,245,.6);transition:color .4s}
#s6 .s6-wd,#s6 .s6-n{transform:translate(calc(var(--dx,0%)*var(--k,0)),calc(var(--dy,0%)*var(--k,0))) rotate(calc(var(--a,0deg)*var(--k,0))) scale(calc(1 - var(--s,0)*var(--k,0)))}
/* the thread with its six gates | the system panel on its far side */
#s6 .s6-z{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--gap);min-height:0}
#s6 .s6-gc{position:relative;display:flex;flex-direction:column;min-height:0}
#s6 .s6-gl{height:var(--pt);display:flex;align-items:center;justify-content:flex-end;padding-inline-end:26px;white-space:nowrap;font-size:var(--fs-tag);font-weight:600;color:var(--mute-d)}
#s6 .s6-gc::before,#s6 .s6-gc::after{content:"";position:absolute;inset-block:0;inset-inline-end:7px;width:2px}
#s6 .s6-gc::before{background:repeating-linear-gradient(rgba(169,188,255,.32) 0 5px,transparent 5px 10px)}
#s6 .s6-gc::after{background:var(--sky);clip-path:inset(0 0 calc((100% - var(--pt))*(1 - var(--th,1))) 0);opacity:calc(var(--th,1)*30)}
#s6 .s6-gt,#s6 .s6-ls{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr)}
#s6 .s6-gt li{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;font-size:var(--fs-tag);line-height:1.35;color:var(--mute-d);transition:color .35s}
#s6 .s6-gt span{max-width:10em;text-align:end;text-wrap:balance}
#s6 .s6-gt .on{color:var(--paper)}
/* the logo O: three round quarters, the square corner closes when a gate is passed */
#s6 .s6-o{flex:none;position:relative;z-index:1;width:16px;height:16px;fill:none;stroke:rgba(169,188,255,.45);stroke-width:2;transition:stroke .35s}
#s6 .s6-o .b{fill:var(--night-2);stroke:none}
#s6 .s6-o .q{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s}
#s6 .on>.s6-o,#s6 .s6-p .s6-o{stroke:var(--sky)}
#s6 .on>.s6-o .q{stroke-dashoffset:0}
#s6 .s6-p .b{fill:none}
#s6 .s6-p .q{stroke-dashoffset:calc(1 - var(--q,1));transition:none}
#s6 .s6-p{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin-top:12px;padding:var(--pad)}
#s6 .s6-p::before{content:"";position:absolute;inset:0;border:1px solid rgba(101,141,255,.5);border-radius:var(--r);background:rgba(26,29,58,.55);opacity:var(--f,1)}
#s6 .s6-p>*{position:relative}
#s6 .s6-ph{display:flex;align-items:center;gap:10px;height:var(--pt);padding-inline:12px;opacity:var(--f,1)}
#s6 .s6-ph .s6-o{width:20px;height:20px}
#s6 .s6-ph b{font-weight:500;font-size:1rem;line-height:1.3}
#s6 .s6-ls{margin-top:8px}
#s6 .s6-sl{position:relative;display:flex;align-items:center;min-width:0;border-top:1px solid transparent;transition:border-color .4s}
/* each row joins the thread */
#s6 .s6-c{position:absolute;top:50%;inset-inline-start:calc(-1*(var(--pad) + var(--gap) + 8px));width:calc(var(--gap) + 8px);height:2px;margin-top:-1px;background:var(--sky);transform:scaleX(var(--c,1));transform-origin:100% 50%}
#s6 .s6-c::after{content:"";position:absolute;left:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--sky)}
/* a row: a loose note today, a part of the system after */
#s6 .s6-n{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 12px;border:1px dashed rgba(255,122,89,.6);border-radius:8px;background:var(--night-3);transition:border-color .4s,background .4s}
#s6 .s6-nl{min-width:0;font-size:1.02rem;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s6 .s6-e{display:grid;place-items:center;opacity:var(--f,1)}
#s6 .s6-e .s6-o{width:min(120px,40%);height:auto;stroke-width:1.2}
#s6 .s6-src{display:flex;align-items:center;min-height:30px;margin-top:6px;padding-inline:12px}
#s6 .s6-src:empty{display:none}
#s6 .s6-src>*{white-space:normal}
#s6[data-state=after] .s6-in{border-bottom-color:rgba(101,141,255,.5)}
#s6[data-state=after] .s6-wd{color:var(--paper)}
#s6[data-state=after] .s6-sl{border-top-color:var(--line-d)}
#s6[data-state=after] .s6-n{border-color:transparent;background:transparent}
#s6[data-state=after] .s6-n.bad{border-color:rgba(255,122,89,.6)}
@media (min-width:701px) and (min-height:521px) and (prefers-reduced-motion:no-preference){
#s6 .ba-end:not(.on){visibility:hidden}
#s6 .s6-g{position:relative}
}
@media (min-width:701px) and (max-height:640px){
#s6 .h2{font-size:clamp(1.7rem,3vw,2.3rem)}
#s6 .ba-say{margin-top:10px}
#s6 .ba-say q{-webkit-line-clamp:1}
#s6 .ba-line{font-size:1.1rem}
#s6 .ba-sw,#s6 .ba-line,#s6 .ba-end{margin-top:14px}
#s6 .s6-n{padding-block:5px}
#s6 .s6-nl{-webkit-line-clamp:1}
}
/* too short to pin, or no motion: the stage flows */
@media (max-height:520px),(prefers-reduced-motion:reduce){
#s6.pin{height:auto!important}
#s6 .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;overflow:visible;padding-bottom:56px}
#s6 [data-at]{opacity:1;transform:none}
}
@media (max-height:520px){
#s6 .s6-fig{height:auto;min-height:400px}
}
@media (max-width:980px){
#s6 .s6-g{column-gap:24px}
#s6 .s6-gt span{max-width:7em}
#s6 .s6-n{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media (min-width:701px) and (max-width:980px) and (max-height:640px){
#s6 .s6-n{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width:700px){
#s6{--gap:16px;--pad:10px}
#s6 .stage{min-height:0;padding-bottom:72px;overflow-x:clip}
#s6 .s6-g{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:26px}
#s6 .ba-hd,#s6 .ba-sw,#s6 .ba-line,#s6 .ba-end,#s6 .s6-fig{grid-area:auto;margin-top:0}
#s6 .s6-fig{height:auto;min-height:0}
#s6 .ba-line{min-height:0}
#s6 .s6-z{min-height:340px}
#s6 .s6-sl{min-height:84px}
}/* desktop: text on the start side (header → switch → line → end), the picture fills the end side */
#s7 .s7-g{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:1fr auto auto auto auto 1fr;grid-template-areas:". fig" "hd fig" "sw fig" "ln fig" "en fig" ". fig";column-gap:clamp(24px,4.5vw,64px);padding-top:calc(var(--nav-clear) + 8px);padding-bottom:clamp(14px,3vh,28px)}
#s7 .s7-g>*{min-width:0}
#s7 .ba-hd{grid-area:hd}
#s7 .kick{margin:0 0 12px;font-size:.95rem;font-weight:600;opacity:.7}
#s7 .h2{font-size:clamp(1.9rem,3.3vw,3.1rem);max-width:none}
#s7 .ba-say{margin-top:clamp(10px,2vh,18px)}
#s7 .ba-sw{grid-area:sw;justify-self:start;margin-top:clamp(14px,2.6vh,24px)}
#s7 .ba-line{grid-area:ln;margin-top:clamp(12px,2.4vh,22px);font-size:clamp(1.05rem,1.55vw,1.35rem);max-width:32ch}
#s7 .ba-end{grid-area:en;margin-top:clamp(12px,2.4vh,22px)}
#s7 [data-at]:focus-within{opacity:1;transform:none}
/* the picture: the visitor's rows (start side) run into the ring; the square corner of the logo is the gate */
#s7 .s7-fig{grid-area:fig;margin:0;min-height:0;display:flex;flex-direction:column;justify-content:center}
#s7 .s7-bx{position:relative;flex:1 1 auto;min-width:0;min-height:0;max-height:620px;display:flex;align-items:center}
#s7 .s7-col{flex:none;width:clamp(138px,30%,220px);min-width:0;display:grid;gap:8px}
#s7 .s7-tg{margin:0;line-height:1.4}
#s7 .s7-tg .assume{display:inline-block;white-space:normal;border-radius:var(--r)}
#s7 .s7-rows{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.6vh,14px)}
/* --k: one colour per row, alert today → the row's own tone after */
#s7 :is(.s7-c,.s7-r){--k:color-mix(in srgb,var(--c,var(--sky)) calc(var(--t,0)*100%),var(--alert))}
#s7 .s7-c{min-width:0;display:grid;gap:2px;padding:9px 12px 10px;background:var(--night-2);border:1px solid var(--line-d);border-inline-end:2px solid var(--k);border-radius:var(--r)}
#s7 .s7-c b{font-size:clamp(.84rem,1.15vw,.96rem);font-weight:600;line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s7 .s7-st{font-size:.84rem;font-weight:600;line-height:1.5;color:var(--k)}
/* the one interaction: approve / return on the row that stops; it opens with t, so the rows never jump */
#s7 .s7-cd{display:flex;gap:6px;margin:0 -4px calc(var(--t,0)*-4px);padding:calc(var(--t,0)*6px) 4px calc(var(--t,0)*4px);overflow:hidden;max-height:calc(var(--t,0)*56px);opacity:calc(var(--t,0)*2 - 1)}
#s7[data-state="before"] .s7-cd{visibility:hidden}
#s7 .s7-cd .btn{flex:1;min-width:0;justify-content:center;padding:7px 8px;font-size:.86rem;min-height:36px}
#s7 .s7-cd .btn:focus-visible{outline-offset:1px}
#s7 .s7-sv{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#s7 .s7-sv :where(path){fill:none;stroke-width:2}
#s7 .s7-rb{stroke:var(--mute-d);opacity:.5;stroke-dasharray:3 7}
#s7 .s7-rg,#s7 .s7-gt{stroke:var(--sky);stroke-width:3}
#s7 .s7-rg,#s7 .s7-lm{opacity:var(--t,0)}
#s7 .s7-gt{stroke-dasharray:1;stroke-dashoffset:1}
#s7 .s7-gh{stroke:var(--alert);stroke-dasharray:4 6;opacity:calc(1 - var(--t,0)*2)}
#s7 .s7-gd{stroke:rgba(169,188,255,.3);stroke-width:1}
#s7 .s7-op{stroke:var(--night);stroke-width:7}
#s7 .s7-ck{stroke:var(--coffee)}
#s7 .s7-l{stroke:var(--k);stroke-linecap:round}
#s7 .s7-a{stroke:var(--alert)}
#s7 .s7-k{fill:var(--k);stroke:var(--night);stroke-width:2}
#s7 .s7-gl,#s7 .s7-cp{position:absolute;white-space:nowrap;pointer-events:none}
#s7 .s7-gl{display:grid;translate:-50% -100%;font-size:var(--fs-tag);font-weight:600;line-height:1.3;text-align:center}
#s7 .s7-gl i{grid-area:1/1;font-style:normal;color:var(--alert);opacity:calc(1 - var(--t,0)*2)}
#s7 .s7-gl i+i{color:var(--sky);opacity:calc(var(--t,0)*2 - 1)}
#s7 .s7-cp{translate:-50% 0;font-size:var(--fs-tag);font-weight:600;color:var(--mute-d);opacity:calc(var(--t,0)*2 - 1)}
@supports not (color:color-mix(in srgb,red,blue)){#s7 :is(.s7-c,.s7-r){--k:var(--c,var(--sky))}#s7[data-state="before"] :is(.s7-c,.s7-r){--k:var(--alert)}}
/* the line keeps three lines of room, so the centred text column does not jump when today's line gives way to the shorter win */
@media (min-width:701px){#s7 .ba-line{min-height:4.8em}#s7 .ba-end:not(.on):not(:focus-within){pointer-events:none}}
@media (min-width:701px) and (max-height:760px){#s7 .h2{font-size:clamp(1.6rem,2.7vw,2.4rem)}#s7 .kick{margin-bottom:8px}}
@media (pointer:coarse){#s7 .s7-cd .btn{min-height:40px}}
/* flow: reduced motion and very short screens un-pin (the after state is there at once) */
@media (min-width:701px) and (prefers-reduced-motion:reduce),(min-width:701px) and (max-height:600px){
#s7.pin{height:auto!important}
#s7 .stage{position:relative;height:auto;overflow:visible}
#s7 .s7-g{height:auto;padding-block:112px 80px}
#s7 .s7-bx{flex:none;height:clamp(320px,76vh,560px)}
}
/* phones: one column, header → switch → picture → line → end */
@media (max-width:700px){
#s7 .s7-g{display:block;height:auto;padding-block:0}
#s7 .ba-sw,#s7 .s7-fig{margin-top:22px}
#s7 .s7-fig{display:block}
#s7 .s7-bx{height:auto;max-height:none;min-height:clamp(300px,84vw,400px)}
#s7 .s7-c b{-webkit-line-clamp:3}
#s7 .s7-cd .btn{min-height:40px}
}/* one column in DOM order (phones); two columns from 701px: text on the start side, the picture on the end side */
#s8 .s8-g{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px}
#s8 .kick{margin:0 0 10px;font-size:.95rem;font-weight:600;opacity:.7}
#s8 .h2{font-size:clamp(1.9rem,min(4vw,6.6vh),3.6rem)}
#s8 .ba-say{margin-top:14px}
#s8 .ba-line{font-size:clamp(1.05rem,min(1.7vw,3vh),1.4rem)}
#s8 .s8-fig{width:100%;margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;aspect-ratio:5/6;max-height:480px}
#s8 .s8-pl{position:relative;flex:1;min-height:0}
#s8 .s8-sv{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s8 .s8-sv path,#s8 .s8-sv line{fill:none}
/* the logo O: a broken trace today, one drawn line after */
#s8 .r0{stroke:rgba(169,188,255,.3);stroke-width:1.2;stroke-dasharray:2 9}
#s8 .r1{stroke:var(--sky);stroke-width:2;stroke-dasharray:1}
#s8 .tk{stroke:var(--mute-d);stroke-width:2;opacity:.55;transition:stroke .3s,opacity .3s}
#s8 .tk.on{stroke:var(--sky);opacity:1}
#s8 .fd path{stroke:var(--sky-2);stroke-width:1.2;stroke-dasharray:1}
#s8 .fd rect{fill:var(--sky)}
#s8 .mm line{stroke:var(--alert);stroke-width:1.3;stroke-dasharray:4 5}
#s8 .mm circle{fill:var(--night);stroke:var(--alert);stroke-width:1.3}
#s8 .mm text{fill:var(--alert);font:600 16px var(--f-mono);text-anchor:middle;dominant-baseline:central}
/* the record in the middle of the ring: its rows are the same cards, docked */
#s8 .s8-rec{position:absolute;left:0;top:0;z-index:1;opacity:0;border:1px solid rgba(101,141,255,.55);border-radius:var(--r);background:var(--night-2)}
#s8 .s8-rh{display:flex;align-items:baseline;padding:10px 12px 8px}
#s8 .s8-rh b{min-width:0;font-size:1.02rem;font-weight:400;line-height:1.4;color:var(--sky-2)}
#s8 .s8-cs{position:absolute;inset:0;z-index:2}
#s8 .s8-c{position:absolute;left:0;top:0;padding:8px 12px 9px;border:1px dashed var(--alert);border-radius:8px;background:var(--night-2);will-change:transform;transition:border-color .4s,border-radius .4s}
#s8[data-state=after] .s8-c{border-style:solid;border-color:var(--line-d) transparent transparent;border-radius:0}
#s8 .s8-cl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:.95rem;font-weight:500;line-height:1.45}
#s8 .s8-st{display:flex;align-items:center;gap:7px;min-height:1.6em;margin-top:2px;font-size:var(--fs-tag);font-weight:600;line-height:1.6;color:var(--mute-d);transition:color .35s}
#s8 .s8-st i{flex:none;width:7px;height:7px;background:currentColor}
#s8 .s8-st span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s8 .s8-st[data-tone=bad]{color:var(--alert)}
#s8 .s8-st[data-tone=mid]{color:#f3c37d} /* the amber of the shared .ba-rs mid tone */
#s8 .s8-st[data-tone=good]{color:var(--ok)}
#s8 .s8-st[data-tone=hold]{color:var(--sky)}
/* compact (set by lay() when the record would not fit inside the ring): labels keep one line, tighter rows */
#s8 .k .s8-cl{-webkit-line-clamp:1}
#s8 .k .s8-c{padding:5px 10px 6px}
#s8 .k .s8-st{margin-top:0}
#s8 .k .s8-rh{padding:7px 10px 5px}
#s8 .s8-cap{flex:none;height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
#s8 .s8-tg{flex:none}
#s8 .s8-stp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-tag);color:var(--sky-2)}
#s8 .s8-n{margin-inline-end:8px;font-size:var(--fs-label-s);color:var(--mute-d)}
@media (min-width:701px){
#s8 .stage{padding:var(--nav-clear) 0 clamp(12px,2.6vh,24px)}
#s8 .s8-g{flex:1;min-height:0;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr) auto auto auto auto minmax(0,1fr);gap:0 clamp(24px,4vw,64px)}
#s8 .ba-hd{grid-area:2/1}
#s8 .ba-sw{grid-area:3/1;justify-self:start;margin-top:clamp(14px,2.8vh,26px)}
#s8 .ba-line{grid-area:4/1;min-height:4.8em;margin-top:clamp(12px,2.4vh,22px)}
#s8 .ba-end{grid-area:5/1;margin-top:clamp(10px,2vh,18px)}
#s8 .s8-fig{grid-area:1/2/-1/3;aspect-ratio:auto;max-height:100%;justify-content:center}
#s8 .s8-pl{max-height:calc(min(100vw,1240px)*.6)} /* on tall screens the caption stays under the ring, not at the stage floor */
}
@media (max-width:700px){#s8 .s8-n{display:none}}
/* very short screens: let the scene flow instead of clipping it */
@media (min-width:701px) and (max-height:520px){#s8.pin{height:auto!important}#s8 .stage{position:relative;height:auto;overflow:visible;padding-block:96px 48px}#s8 .s8-fig{height:min(440px,80vw)}#s8 [data-at]{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#s8.pin{height:auto!important}}#s11 .stage{padding-block:calc(var(--nav-clear) + 4px) 20px}
#s11 .s11-g{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(28px,5vw,80px)}
#s11 .ba-hd{grid-area:2/1}
#s11 .h2{font-size:clamp(2.1rem,4.2vw,3.8rem)}
#s11 .h2 em{display:block}
#s11 .ba-sw{grid-area:3/1;justify-self:start;margin-top:22px}
#s11 .ba-line{grid-area:4/1;margin-top:20px;min-height:4.8em}
#s11 .ba-end{grid-area:5/1;margin-top:16px}
#s11 .ba-end:focus-within{opacity:1;transform:none}
#s11 .kick{margin:0 0 10px;font-size:.95rem;font-weight:600;opacity:.7}
/* the picture: a canvas (dots, curve, ring, arrow) under the visitor's tiles */
#s11 .s11-fig{--e:0;container-type:inline-size;grid-area:1/2/7/3;align-self:center;position:relative;margin:0;min-width:0;min-height:0;height:min(calc(100vh - var(--nav-clear) - 56px),640px);height:min(calc(100svh - var(--nav-clear) - 56px),640px);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;border:1px solid var(--line-d);border-radius:var(--r);background:rgba(11,12,23,.4);overflow:hidden}
#s11 canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#s11 .s11-be{position:absolute;left:26px;top:50%;transform:translateY(-135%);font-size:var(--fs-tag);line-height:1.4;color:var(--sky-2);white-space:nowrap;pointer-events:none;opacity:calc((var(--e) - .15) * 3)}
#s11 .s11-tls{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#s11 .s11-tls li{min-width:0;display:grid;align-content:space-between;gap:8px;padding:10px 12px;background:rgba(18,20,42,.94);border:1px solid var(--line-d);border-radius:var(--r);transform:translate(calc(var(--dx,0px) * (1 - var(--e))),calc(var(--dy,0px) * (1 - var(--e)))) rotate(calc(var(--rot,0deg) * (1 - var(--e))));transition:border-color .35s}
#s11 .s11-tls li[data-tone="bad"]{border-color:rgba(255,122,89,.5)}
#s11 .s11-tls li[data-tone="good"]{border-color:rgba(111,208,160,.5)}
#s11 .s11-l{font-size:.92rem;font-weight:500;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#s11 .s11-v{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
#s11 .s11-v svg{flex:none;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;color:var(--alert);transition:color .35s}
#s11 li[data-tone="mid"] svg{color:var(--coffee)}
#s11 li[data-tone="good"] svg{color:var(--ok)}
#s11 li[data-tone="hold"] svg{color:var(--sky)}
#s11 .s11-tls .ba-rs{min-width:0;font-size:.82rem;padding:3px 10px;white-space:normal;text-align:center}
#s11 .s11-k{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:10px 0 0;min-height:26px}
#s11 .s11-nt{opacity:.6;margin-inline-start:auto;font-size:var(--fs-tag)}
/* a narrow picture (tablets, phones) stacks the tiles: label and value side by side, then one under the other */
@container (max-width:500px){
#s11 .s11-tls{grid-template-columns:minmax(0,1fr);gap:8px}
#s11 .s11-tls li{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
@container (max-width:360px){#s11 .s11-tls li{grid-template-columns:minmax(0,1fr)}}
@media (min-width:701px) and (prefers-reduced-motion:no-preference){#s11 .ba-end:not(.on):not(:focus-within){pointer-events:none}}
@media (min-width:701px) and (max-height:780px){
#s11 .h2{font-size:clamp(2rem,3.4vw,3rem)}
#s11 .ba-say{margin-top:12px}
#s11 .ba-line{font-size:clamp(1.05rem,1.5vw,1.3rem)}
}
@media (min-width:701px) and (max-height:640px){
#s11 .h2{font-size:clamp(1.8rem,2.9vw,2.5rem)}
#s11 .ba-sw{margin-top:14px}
#s11 .ba-line{margin-top:12px}
#s11 .ba-end{margin-top:10px}
}
@media (min-width:701px) and (max-height:700px){@container (max-width:500px){
#s11 .s11-tls li{grid-template-columns:minmax(0,1fr) auto}
#s11 .s11-l{-webkit-line-clamp:2}
}}
/* no pin when motion is reduced (the engine shows the after state at once) or the window is too short to hold the stage */
@media (prefers-reduced-motion:reduce),(max-height:560px){
#s11.pin{height:auto!important}
#s11 .stage{position:relative;height:auto;overflow:visible;padding-block:calc(var(--nav-clear) + 20px) 64px}
#s11 .s11-fig{height:auto;min-height:max(380px,min(calc(100svh - var(--nav-clear) - 56px),640px));padding-top:170px}
}
@media (max-width:700px){
#s11 .stage{padding-block:88px 72px}
#s11 .s11-g{display:block}
#s11 .ba-sw{margin-top:20px}
#s11 .s11-fig{height:auto;min-height:0;margin-top:20px;padding-top:clamp(210px,38svh,290px)}
}