@property --bl-sheen{syntax:'<percentage>';inherits:false;initial-value:160%}
/* Office to model (#build-loop). The base rules are the plain stack, stills and words in reading order, for reduced motion and
   for a page whose script never ran. effects.mjs sets data-live; with motion allowed that makes the section one sticky stage
   over --bl-screens story screens (times --bl-pace) of scroll (keep it equal to SCREENS in build-loop.mjs), and build-loop.mjs draws the picture. */
.build-loop{position:relative;isolation:isolate;box-sizing:border-box;padding-block:var(--mish-section);padding-inline:max(var(--mish-gutter),calc((100% - var(--mish-max))/2));border-block:1px solid var(--mish-rule)}
.bl-view,.bl-rail{display:none}
.bl-arrow{display:none}
.bl-kicker{margin-bottom:var(--mish-space-6)}
/* The section's promise, large enough to stop a scroller: same mono face, bold and bright, with the mark scaled to match. */
.mish-kicker.bl-kicker{gap:.45em;font-size:clamp(22px,2.6vw,56px);font-weight:800;line-height:1.15;letter-spacing:.05em;color:#fbf7ff}
.mish-kicker.bl-kicker::before{width:1.7em;height:.85em;background:linear-gradient(90deg,#fbe9f2 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c)}
@media(forced-colors:active){.mish-kicker.bl-kicker::before{background:CanvasText}}
.bl-beat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--mish-space-6);align-items:center;margin-top:var(--mish-space-6)}
.bl-still{display:block;width:100%;height:auto;border-radius:8px;background:#0b0c0e}
.bl-copy{display:grid;gap:var(--mish-space-3);align-content:start;max-width:38rem}
.bl-note{margin:0;font:400 var(--mish-step-small)/1.4 var(--mish-font-mono);color:var(--mish-text-dim)}
.bl-cta{margin:var(--mish-space-8) 0 0}
@media (max-width:700px){.bl-beat{grid-template-columns:minmax(0,1fr);gap:var(--mish-space-4)}}

@media (prefers-reduced-motion:no-preference){
 .build-loop[data-live]{--bl-screens:13.6;--bl-pace:.6;--bl-h:calc(100svh - var(--mish-header-h));--bl-x:clamp(var(--mish-gutter),4vw,120px);height:calc(var(--bl-h)*(1 + var(--bl-screens)*var(--bl-pace)));padding:0;border:0}
 .build-loop[data-live] .bl-stage{position:sticky;top:var(--mish-header-h);height:var(--bl-h);overflow:hidden;background:var(--bl-ground,#0b0c0e)}
 .build-loop[data-live] .bl-view{display:block;position:absolute;inset:0;overflow:hidden}
 .build-loop[data-live] .bl-view canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
 .build-loop[data-live] .bl-film{opacity:1}
 .build-loop[data-live] .bl-grains{opacity:0}
 .build-loop[data-live] .bl-dim{position:absolute;inset:0;background:#050607;opacity:0}
 /* The stage's edges melt into the page, and a scrim holds the words wherever the picture is bright. */
 .build-loop[data-live] .bl-view::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(5,6,7,.9),rgba(5,6,7,.6) 20%,rgba(5,6,7,0) 46%),linear-gradient(to bottom,rgba(5,6,7,.82),rgba(5,6,7,0) 15%),linear-gradient(to right,rgba(5,6,7,.7),rgba(5,6,7,.38) min(28%,620px),rgba(5,6,7,0) min(50%,1000px));opacity:var(--bl-scrim,1)}
 .build-loop[data-live] .bl-kicker{position:absolute;left:var(--bl-x);right:var(--bl-x);top:clamp(14px,3vh,28px);margin:0;text-shadow:0 0 18px rgba(5,6,7,.95),0 1px 3px rgba(5,6,7,.9)}
 .build-loop[data-live] .bl-still{display:none}
 .build-loop[data-live] .bl-beat{position:absolute;left:var(--bl-x);bottom:clamp(82px,12vh,112px);display:block;width:min(58rem,calc(100% - var(--bl-x) - clamp(220px,25vw,560px)));margin:0;opacity:0;text-shadow:0 1px 14px rgba(5,6,7,.85)}
 .build-loop[data-live] .bl-beat:first-of-type{opacity:1}
 .build-loop[data-live] .bl-copy{gap:var(--mish-space-2);max-width:none}
 .build-loop[data-live] .bl-copy .mish-heading{font-size:clamp(28px,min(3.7vw,6.6vh),68px)}
 .build-loop[data-live] .bl-copy .mish-title{font-size:clamp(22px,min(2.5vw,4.4vh),44px)}
 .build-loop[data-live] .bl-copy .mish-text{color:var(--mish-text);font-size:clamp(15px,min(1.5vw,2.5vh),23px)}
 /* The steps, loud enough to read at a glance: the kicker's mono face, heavy, in the corner that is sand floor in every picture, so it stays on for the whole story and covers no desk or person. */
 .build-loop[data-live] .bl-rail{display:grid;gap:clamp(6px,1.1vh,14px);--px:clamp(12px,1.6vw,40px);--pb:clamp(14px,3vh,28px);position:absolute;width:max-content;white-space:nowrap;left:calc(var(--px) + (100% - 2*var(--px))*var(--ax,1));top:calc(var(--bl-rail-top,var(--pb)) + (100% - var(--bl-rail-top,var(--pb)) - var(--pb))*var(--ay,1));transform:translate(calc(var(--ax,1)*-100%),calc(var(--ay,1)*-100%));transition:left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);margin:0;padding:clamp(10px,1.6vh,20px) clamp(12px,1.2vw,24px) clamp(10px,1.6vh,20px) 2.1em;list-style:none;border-radius:10px;background:rgba(5,6,7,.66);font:800 clamp(15px,min(1.45vw,2.5vh),34px)/1.2 var(--mish-font-mono);letter-spacing:.05em;text-transform:uppercase;text-align:right;color:rgba(251,247,255,.62)}
 .build-loop[data-live] .bl-rail li{padding-right:.8em}
 /* Every step is lettered in its own two colours, and scroll slides those colours through the letters. Steps ahead sit back, steps done
    stay lit, and the step being talked about gets the full treatment: wider letters, fine scan lines, a white edge, a light that keeps
    sweeping across it, a glow and a rule under it. */
 .build-loop[data-live] .bl-rail li{--c:#65e6df;--d:#54b4ff;justify-self:end;color:transparent;background:linear-gradient(90deg,var(--c),var(--d),var(--c)) calc(var(--bl-rail-x,0)*1%) 0/300% 100%;-webkit-background-clip:text;background-clip:text;opacity:.5;transition:opacity .35s,transform .35s,letter-spacing .35s;transform-origin:right center}
 .build-loop[data-live] .bl-rail li:nth-child(2){--c:#54b4ff;--d:#7f8cff}
 .build-loop[data-live] .bl-rail li:nth-child(3){--c:#7f8cff;--d:#b57bff}
 .build-loop[data-live] .bl-rail li:nth-child(4){--c:#b57bff;--d:#f06fd8}
 .build-loop[data-live] .bl-rail li:nth-child(5){--c:#f06fd8;--d:#ff6f91}
 .build-loop[data-live] .bl-rail li:nth-child(6){--c:#ff6f91;--d:#ff8a3c}
 .build-loop[data-live] .bl-rail li:nth-child(7){--c:#ff8a3c;--d:#ffc24d}
 .build-loop[data-live] .bl-rail li:nth-child(8){--c:#ffc24d;--d:#b6f05a}
 .build-loop[data-live] .bl-rail li:nth-child(9){--c:#b6f05a;--d:#65e6df}
 .build-loop[data-live] .bl-rail .is-done{opacity:.82}
 .build-loop[data-live] .bl-rail .is-on{opacity:1;letter-spacing:.08em;transform:scale(1.1);-webkit-text-stroke:.018em #fff9;filter:drop-shadow(0 0 .3em var(--c));box-shadow:inset -.32em 0 0 var(--c);animation:bl-rail-sheen 2.6s linear infinite;
  background:linear-gradient(100deg,#0000 40%,#fff 50%,#0000 60%) var(--bl-sheen) 0/260% 100% no-repeat,repeating-linear-gradient(0deg,#0005 0 1px,#0000 1px 3px),linear-gradient(90deg,var(--c),#fff,var(--d),#fff,var(--c)) calc(var(--bl-rail-x,0)*3%) 0/300% 100%,linear-gradient(90deg,#0000,var(--c),var(--d)) 0 100%/calc(100% - .8em) 2px no-repeat;
  -webkit-background-clip:text,text,text,padding-box;background-clip:text,text,text,padding-box}
 /* The list moves to wherever is beside the picture: build-loop.mjs sets how far across and down (--ax, --ay), and is-left when it sits on the left. */
 .build-loop[data-live] .bl-rail.is-left{--px:var(--bl-x);padding-left:clamp(12px,1.2vw,24px);padding-right:2.1em;text-align:left}
 .build-loop[data-live] .bl-rail.is-left li{justify-self:start;padding:0 0 0 .8em;transform-origin:left center}
 .build-loop[data-live] .bl-rail.is-left .is-on{box-shadow:inset .32em 0 0 var(--c);background-position:var(--bl-sheen) 0,0 0,calc(var(--bl-rail-x,0)*3%) 0,100% 100%}
 /* An arrow from the step being talked about to the picture, in that step's colour: a soft line, bright dashes running along it, and a solid head. */
 .build-loop[data-live] .bl-arrow{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--bl-arrow,#fff);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--bl-arrow,#fff));opacity:0;transition:opacity .3s}
 .build-loop[data-live] .bl-arrow path:first-child{stroke-width:1.5;opacity:.45}
 .build-loop[data-live] .bl-arrow path:nth-child(2){stroke-dasharray:10 12;animation:bl-arrow-run .7s linear infinite}
 .build-loop[data-live] .bl-arrow path:last-child{fill:var(--bl-arrow,#fff)}
 :root[data-motion=paused] .build-loop[data-live] :is(.bl-rail .is-on,.bl-arrow path){animation-play-state:paused}
 @keyframes bl-arrow-run{to{stroke-dashoffset:-22}}
 @keyframes bl-rail-sheen{from{--bl-sheen:160%}to{--bl-sheen:-60%}}
 .build-loop[data-live] .bl-cta{position:absolute;left:var(--bl-x);bottom:clamp(16px,3vh,28px);margin:0;z-index:2}
}
@media (prefers-reduced-motion:no-preference) and (min-width:701px){
 /* Once the camera has pulled back, the caption stays left of the desks. */
 .build-loop[data-live] .bl-beat:is([data-bl-beat=deploy],[data-bl-beat=loop],[data-bl-beat=monitor],[data-bl-beat=compound]){width:var(--bl-cap,58rem);max-width:58rem}
}
@media (prefers-reduced-motion:no-preference) and (max-height:520px){
 .build-loop[data-live] .bl-rail{display:none}
}
@media (prefers-reduced-motion:no-preference) and (max-width:700px){
 .build-loop[data-live] .bl-view{bottom:auto;height:60%}
 .build-loop[data-live] .bl-view::after{background:linear-gradient(to top,var(--bl-ground,#0b0c0e),rgba(5,6,7,0) 20%),linear-gradient(to bottom,rgba(5,6,7,.82),rgba(5,6,7,0) 18%)}
 .build-loop[data-live] .bl-beat{top:calc(60% + 8px);bottom:auto;width:calc(100% - var(--bl-x)*2)}
 .build-loop[data-live] .bl-copy .mish-text{font-size:15px}
 .build-loop[data-live] .bl-rail{display:none}
}