/* The assembly is tied to document scroll, never a playback clock. */
:root{--header-height:72px}.film-scroll{height:350vh;min-height:1800px}.film-stage{height:calc(100svh - var(--header-height));min-height:0;top:var(--header-height);isolation:isolate}.film-stage #scene{inset:0 0 25px}.film-heading{top:25%;left:6%;width:42%;max-width:580px;will-change:transform,opacity}.film-heading h1{font-size:clamp(36px,3.45vw,60px);line-height:1.2}.film-heading #film-copy{min-height:76px;max-width:420px;font-size:16px}.film-heading .text-button{margin-top:15px}.film-topline{top:27px;font-size:12px}.scene-tag{bottom:16%;right:6%}.scroll-instruction{position:absolute;bottom:35px;left:5%;right:5%;z-index:3;display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:1px}.scroll-instruction>span:last-child{margin-left:auto;color:#606060}.scroll-ticks{display:flex;gap:5px}.scroll-ticks i{height:7px;width:7px;background:#1b1b1b}.scroll-ticks i:nth-child(2){opacity:.55}.scroll-ticks i:last-child{opacity:.2}.graph{background-size:60px 60px;transform-origin:center;will-change:transform}.stage-corner.corner-br{bottom:13%}.header .plain-button{font-size:12px;text-decoration:underline;text-underline-offset:6px}.process-scroll{height:235vh;min-height:1500px;position:relative;background:#f1f1f1;border-top:1px solid #cecece}.process-stage{height:calc(100svh - var(--header-height));min-height:670px;position:sticky;top:var(--header-height);padding:32px 6% 26px;overflow:hidden;background-image:radial-gradient(#ccc .8px,transparent .8px);background-size:22px 22px;isolation:isolate}.process-top{display:flex;align-items:center;justify-content:space-between}.process-top .eyebrow{margin:0;font-size:12px;color:#5c5c5c}.sequence-count{font-size:12px;letter-spacing:2px;color:#5c5c5c}.process-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:30px 0 0}.process-heading h2{font-size:clamp(25px,2.5vw,39px);line-height:1.3;max-width:620px}.process-heading p{font-size:14px;line-height:1.9;width:330px;color:#555;margin:0;min-height:54px}.pipeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8%;height:calc(100% - 245px);min-height:390px;margin-top:14px;align-items:center}.flow-station{position:relative;z-index:1;text-align:center;opacity:.3;transform:translateY(20px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.3,1);padding:18px 0}.flow-station.is-active,.flow-station.is-complete{opacity:1;transform:none}.station-number{font-size:11px;letter-spacing:1.5px;color:#5b5b5b;display:block}.station-symbol{height:190px;display:flex;align-items:center;justify-content:center}.ca-symbol{font:clamp(28px,4vw,61px) var(--pixel);letter-spacing:-3px}.station-bot{z-index:2}.station-bot .station-symbol{position:relative;width:100%;height:190px;overflow:visible}.station-bot img{position:absolute;inset:-48px 0 -5px;width:100%;height:250px;object-fit:contain;mix-blend-mode:multiply}.station-bot canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.station-bot:has(canvas) img{display:none}.receipt{display:flex;flex-direction:column;gap:10px;font-size:11px;align-items:stretch;justify-content:center;text-align:left;width:220px;max-width:100%;margin:auto;padding:20px 15px;clip-path:polygon(0 4%,4% 4%,4% 0,96% 0,96% 4%,100% 4%,100% 96%,96% 96%,96% 100%,4% 100%,4% 96%,0 96%);background:#fbfbfb;border-bottom:3px solid #777;transform:rotate(-3deg);transition:transform .5s}.receipt span:first-child{border-bottom:1px dashed #bbb;padding-bottom:12px;margin-bottom:2px}.receipt b{font:14px var(--pixel)}.receipt span:last-child{padding-top:10px;border-top:1px dashed #bbb;margin-top:2px}.station-result.is-active .receipt{transform:rotate(0)}.flow-port{width:14px;height:14px;margin:8px auto 24px;background:#f1f1f1;border:2px solid #aaa;box-shadow:0 0 0 7px #f1f1f1}.is-active .flow-port,.is-complete .flow-port{background:#222;border-color:#222}.flow-station h3{font:28px var(--pixel);margin:0 0 16px;letter-spacing:1px}.flow-station p{font-size:14px;line-height:1.8;margin:0}.station-foot{font-size:10px;letter-spacing:1px;color:#6a6a6a;margin-top:22px}.flow-path{position:absolute;height:2px;background:#c6c6c6;left:14%;right:14%;top:calc(50% + 17px);z-index:0}.flow-ink{height:100%;background:#222;transform:scaleX(0);transform-origin:left;will-change:transform}.flow-cursor{width:9px;height:9px;background:#222;position:absolute;left:0;top:-3.5px;transform:translateX(-50%)}.process-bottom{position:absolute;bottom:25px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;padding-top:19px;border-top:1px solid #c9c9c9;font-size:11px;letter-spacing:.6px}.process-bottom .text-button{margin:0;padding:6px 0;font-size:12px;letter-spacing:.5px}.mode-note{font-size:12px;line-height:1.7;color:#666;margin:14px 0}.desk-grid{border-top:1px solid #c8c8c8}.desk-heading{will-change:transform,opacity}.desk{position:relative;background:var(--paper)}.desk::before{content:'';position:absolute;top:0;left:5%;width:0;height:3px;background:#222;transition:width .8s steps(20)}.desk.is-in-view::before{width:90%}.reveal-heading{opacity:.3;transform:translateY(28px);transition:opacity .65s,transform .65s cubic-bezier(.2,.8,.3,1)}.is-in-view .reveal-heading{opacity:1;transform:none}.journal{background:#f8f8f8}.desk.manual{background:#eee}.workshop-status{transition:border-left-color .3s}.process-stage .process-heading h2{will-change:transform}.film-heading.caption-change{animation:none}.film-stage .scene-poster{height:94%;top:0}.film-stage[data-static=true] .film-heading{opacity:1!important;transform:none!important}@media(min-height:1000px){.pipeline{margin-top:35px}.station-symbol,.station-bot .station-symbol{height:235px}.station-bot img{height:290px}.flow-path{top:calc(50% + 37px)}}@media(max-height:800px) and (min-width:901px){.process-stage{min-height:0}.process-heading{margin-top:20px}.process-heading h2{font-size:26px}.pipeline{min-height:320px;height:calc(100% - 220px);margin-top:0}.station-symbol,.station-bot .station-symbol{height:140px}.station-bot img{height:195px;inset:-36px 0 0}.flow-station{padding:8px 0}.flow-station h3{font-size:23px;margin-bottom:8px}.flow-port{margin-bottom:15px}.station-foot{margin-top:12px}.flow-path{top:calc(50% + 5px)}.receipt{gap:6px;font-size:10px;padding:12px}.receipt b{font-size:12px}.receipt span:first-child{padding-bottom:7px}.receipt span:last-child{padding-top:7px}.process-bottom{bottom:20px}.film-heading{top:22%}.scene-tag{bottom:15%}}
@media(max-width:900px){.pipeline{gap:3%}.process-heading{gap:25px}.process-heading h2{font-size:28px}.process-heading p{width:270px}.station-foot{font-size:9px}.receipt{width:180px}.receipt b{font-size:12px}}@media(max-width:650px){.process-scroll{height:auto;min-height:0}.process-stage{position:relative;height:auto;min-height:0;top:0;padding:40px 6%}.process-heading{display:block}.process-heading p{margin-top:20px;width:auto}.pipeline{grid-template-columns:1fr;height:auto;gap:40px;margin-top:35px}.flow-path{display:none}.flow-station{opacity:1;transform:none}.station-symbol{height:150px}.station-bot .station-symbol{height:240px}.flow-port{display:none}.process-bottom{position:relative;left:auto;right:auto;bottom:auto;display:block;margin-top:40px;line-height:1.8}.process-bottom a{margin-top:20px!important}.film-scroll{height:300vh;min-height:1600px}.film-heading{top:12%;width:90%;left:6%}.film-heading h1{font-size:30px}.film-heading #film-copy{font-size:14px}.scene-tag{right:4%;bottom:17%}.scroll-instruction{font-size:10px}.film-topline{font-size:10px}.scroll-instruction>span:last-child{font-size:10px}.process-top{gap:15px}.process-top .eyebrow{font-size:10px}.header .plain-button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.film-scroll{height:calc(100svh - 72px);min-height:650px}.film-stage{position:relative;top:0;height:100%;min-height:650px}.process-scroll{height:auto;min-height:0}.process-stage{position:relative;top:0;height:750px}.flow-station{opacity:1;transform:none;transition:none}.flow-ink{transform:scaleX(1)!important}.flow-cursor{display:none}.reveal-heading{opacity:1;transform:none;transition:none}.desk::before{transition:none}.receipt{transition:none}.scroll-ticks{display:none}.graph{transform:none!important}.film-heading{transform:none!important;opacity:1!important}}
.flow-station{transform:none}.flow-station h3{transform:translateY(8px);transition:transform .4s}.flow-station.is-active h3,.flow-station.is-complete h3{transform:none}
.flow-station{opacity:.62}.flow-station.is-active,.flow-station.is-complete{opacity:1}

/* The three assembly markers use the same green / white / green order as the cubes. */
.scroll-ticks i,.load-pixels i{background:#5fcb88;opacity:1}.scroll-ticks i:nth-child(2),.load-pixels i:nth-child(2){background:#fff;opacity:1;box-shadow:inset 0 0 0 1px #c9c9c9}.scroll-ticks i:last-child{opacity:1}