@font-face{font-family:Pixel;src:url('./assets/silkscreen-latin-400-normal.woff2')}@font-face{font-family:Mono;src:url('./assets/ibm-plex-mono-latin-400-normal.woff2')}
:root{--ink:#191919;--paper:#fbfbfb;--line:#d7d7d7;--muted:#747474;--pixel:Pixel,monospace;--mono:Mono,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:16px}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button{border:0;background:none}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed #222222;outline-offset:6px}button:hover,a:hover{color:#727272}::selection{color:white;background:#292929}.skip{position:absolute;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:8px}.header{height:80px;padding:0 3.2vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:8;background:var(--paper)}.wordmark{font:22px var(--pixel);display:flex;align-items:center;gap:13px;letter-spacing:-1px}.unit{font:12px var(--mono);align-self:flex-end;margin-bottom:3px;color:var(--muted);letter-spacing:0}.face-mark{width:30px;height:24px;background:var(--ink);display:flex;justify-content:space-around;align-items:center;padding:0 6px;clip-path:polygon(0 15%,15% 15%,15% 0,85% 0,85% 15%,100% 15%,100% 100%,0 100%)}.face-mark i{height:8px;width:3px;background:white}.header nav{display:flex;gap:30px;font-size:13px}.plain-button{font-size:12px;display:flex;gap:20px;align-items:center}.plain-button span{font-size:22px}.film-scroll{height:255vh;position:relative}.film-stage{height:calc(100vh - 0px);min-height:650px;position:sticky;top:0;overflow:hidden;background:var(--paper)}.graph{position:absolute;inset:0;background-image:linear-gradient(#cccccc22 1px,transparent 1px),linear-gradient(90deg,#cccccc22 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#00000088,transparent 45%,#00000066);pointer-events:none}#scene{position:absolute;inset:0 0 80px;z-index:1}#scene canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.scene-poster{position:absolute;right:5%;height:94%;object-fit:contain;mix-blend-mode:multiply}.film-heading{position:absolute;left:7%;top:22%;z-index:2;pointer-events:none;width:38%;max-width:590px}.eyebrow,.section-index{font-size:12px;letter-spacing:1.5px}.eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:33px}.tiny-block{width:7px;height:7px;background:var(--ink)}h1{font:clamp(35px,3.75vw,64px)/1.15 var(--pixel);font-weight:400;letter-spacing:-2px;margin:0 0 26px;text-wrap:balance}h1 span{display:block}#film-copy{font-size:14px;line-height:1.85;color:#6c6c6c;min-height:80px}.text-button{font-size:11px;letter-spacing:1px;pointer-events:auto;border-bottom:1px solid var(--ink);padding:10px 0;margin-top:35px;display:inline-flex;align-items:center;gap:40px}.down-pixels{font-size:23px}.film-topline{position:absolute;left:3.2%;right:3.2%;top:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:var(--muted);z-index:3}.scene-tag{position:absolute;right:6%;bottom:23%;display:flex;gap:12px;align-items:center;font-size:12px;z-index:3}.scene-tag span:last-child{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-top:7px}.crosshair{font-size:30px;color:#777777}.stage-corner{position:absolute;width:16px;height:16px;border-color:#bfbfbf;z-index:2}.corner-tl{top:13%;left:3.2%;border-left:1px solid;border-top:1px solid}.corner-br{bottom:19%;right:3.2%;border-right:1px solid;border-bottom:1px solid}.film-controls{position:absolute;left:3.2%;right:3.2%;bottom:65px;z-index:4;display:flex;gap:24px;align-items:center;background:#fbfbfbb8}.square-control{width:40px;height:40px;border:1px solid #bebebe;font-size:16px;display:grid;place-items:center;flex-shrink:0}.square-control:hover{background:var(--ink);color:white}.chapters{display:flex;flex:1;gap:7px}.chapters button{flex:1;text-align:left;border-bottom:2px solid #dbdbdb;padding:0 0 12px;font-size:10px;letter-spacing:1px;color:#8b8b8b;white-space:nowrap}.chapters button span{margin-right:8px;font-size:9px}.chapters button.active{color:var(--ink);border-color:var(--ink)}.chapters button.past{border-color:#787878}.clock{font-size:10px;color:var(--muted);white-space:nowrap}.film-scrub{position:absolute;bottom:50px;left:3.2%;width:93.6%;height:3px;margin:0;z-index:4;accent-color:#282828;cursor:ew-resize}.film-bottomline{position:absolute;left:3.2%;right:3.2%;bottom:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#858585}.load-state{position:absolute;inset:0;z-index:7;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;font-size:11px;letter-spacing:2px;transition:opacity .5s}.load-state.done{opacity:0;pointer-events:none}.load-pixels{display:flex;gap:8px}.load-pixels i{width:13px;height:13px;background:#333333;animation:load 1s steps(3) infinite}.load-pixels i:nth-child(2){animation-delay:.15s}.load-pixels i:nth-child(3){animation-delay:.3s}@keyframes load{50%{transform:translateY(-15px)}}.section-wrap{padding:100px 7%;border-top:1px solid var(--line)}.section-index{margin-bottom:58px;color:var(--muted)}.section-intro{display:flex;justify-content:space-between;align-items:end;gap:80px}.section-intro h2{font:42px/1.25 var(--pixel);margin:0;letter-spacing:-1.5px}.section-intro p{font-size:14px;line-height:1.9;color:var(--muted);margin:0;max-width:430px}.caption-change{animation:caption .25s steps(4)}@keyframes caption{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.load-pixels i{animation:none}.caption-change{animation:none}}@media(max-width:900px){.header nav{gap:14px}.film-heading{left:5%;width:42%}h1{font-size:34px}.chapters button span{display:none}.film-controls{gap:12px}.section-intro{gap:35px}.scene-tag{right:5%}}@media(max-width:650px){.header nav{display:none}.header{height:68px}.wordmark{font-size:18px}.film-heading{top:9%;width:90%;left:6%}h1{font-size:32px}.eyebrow{margin-bottom:16px}.film-heading p{max-width:210px}#enter-workshop{margin-top:0}.scene-tag{bottom:22%}.clock{display:none}.chapters button{font-size:8px}.film-bottomline span:last-child{display:none}.section-intro{display:block}.section-intro h2{font-size:30px}.section-intro p{margin-top:30px}.film-stage{min-height:750px}}
/* The workbench continues beyond the film. */
.header{position:sticky;top:0}.film-stage{height:calc(100vh - 80px);top:80px}.film-heading{z-index:3}.film-heading h1{color:#191919}.film-heading p{color:#6c6c6c}.workbench-diagram{margin-top:78px;border:1px solid #c3c3c3;background-image:radial-gradient(#bfbfbf80 .7px,transparent .7px);background-size:16px 16px}.diagram-top,.diagram-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;font-size:10px;letter-spacing:1px;background:var(--paper);border-bottom:1px solid var(--line)}.diagram-bottom{border-bottom:0;border-top:1px solid var(--line)}.assembly-flow{height:305px;display:flex;align-items:center;justify-content:center;padding:25px 55px}.parts-bin,.parts-output{width:135px;height:170px;position:relative;flex-shrink:0}.bin-label{position:absolute;left:0;right:0;top:0;text-align:center;font-size:10px;letter-spacing:1px}.bin-foot{position:absolute;left:-15px;right:-15px;bottom:0;text-align:center;font-size:9px;color:var(--muted)}.pixel-part{position:absolute;width:40px;height:40px;border:2px solid #282828;background:#f3f3f3;box-shadow:7px -7px 0 #868686,9px -9px 0 #282828;transition:transform .6s steps(8)}.part-a{left:5px;top:51px}.part-b{left:71px;top:75px;background:#474747}.part-c{left:19px;top:110px;background:#ababab}.assembly-track{height:1px;background:#b0b0b0;flex:1;max-width:180px;position:relative;margin:0 35px}.track-label{position:absolute;font-size:8px;white-space:nowrap;top:21px;left:50%;transform:translateX(-50%);color:var(--muted)}.flow-packet{position:absolute;width:7px;height:7px;background:#383838;top:-3px;animation:packet 3s linear infinite}.flow-packet.second{animation-delay:1.5s}.robot-node{display:flex;flex-direction:column;align-items:center;gap:17px;flex-shrink:0;padding:25px;border:1px solid #9b9b9b;background:#fbfbfb;box-shadow:5px 5px 0 #dadada}.robot-node strong{font:18px var(--pixel);font-weight:400}.robot-node>span:last-child{font-size:9px;letter-spacing:.6px;color:var(--muted)}.bot-head{width:90px;height:70px;display:flex;align-items:center;justify-content:space-around;background:#191919;border:8px solid #dedede;outline:2px solid #191919;box-shadow:8px -6px 0 #aaaaaa;padding:14px}.bot-head i{height:19px;width:7px;background:#fbfbfb;animation:blink 6s steps(1) infinite}.robot-node:hover{transform:translateY(-3px);box-shadow:5px 8px 0 #dadada}.parts-output .built-a{left:45px;top:112px;background:#484848}.parts-output .built-b{left:45px;top:73px;background:#dddddd}.parts-output .built-c{left:45px;top:34px;background:#a8a8a8}.parts-output .bin-label{top:-16px}.parts-output .bin-foot{bottom:-5px}.compact{margin:0;padding:4px 0;font-size:10px;gap:0}.cycle{background:#f1f1f1}.cycle-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:9%}.cycle-heading h2{font:62px/1.07 var(--pixel);letter-spacing:-3px;margin:0}.cycle-heading h2>span{color:#969696}.cycle-heading p{font-size:13px;line-height:1.9;color:#757575;margin-top:30px}.stamp{margin-top:36px;display:inline-block;padding:12px 22px;border:2px dashed #6b6b6b;transform:rotate(-6deg);font-size:10px;letter-spacing:2px;line-height:1.7;color:#5a5a5a}.stamp strong{font:18px var(--pixel)}.cycle-step{display:flex;width:100%;gap:20px;border-top:1px solid #bfbfbf;padding:30px 0;text-align:left;color:var(--ink)}.cycle-step:hover{color:var(--ink)}.step-no{font-size:11px;padding-top:5px;color:#888888}.cycle-step h3{font-size:16px;line-height:1.6;font-weight:400;margin:0}.cycle-step p{display:none;font-size:13px;line-height:1.9;color:#6b6b6b;max-width:420px;margin:18px 0 0}.cycle-step.open p{display:block}.step-toggle{margin-left:auto;font-size:21px;padding-left:15px}.cycle-check{border-top:1px solid #bfbfbf;padding-top:26px;display:flex;gap:20px;align-items:center}.check-pixels{font:28px var(--pixel)}.cycle-check strong{font-size:10px;font-weight:400;letter-spacing:1px}.cycle-check span{display:block;font-size:11px;color:var(--muted);margin-top:9px}.notes-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%}.notes h2{font:29px/1.35 var(--pixel);letter-spacing:-1px;margin:0}.notes-lead{font-size:13px;line-height:1.8;color:var(--muted);margin-top:26px}.notes .text-button{font-size:10px}.notes .text-button span{font-size:9px;color:var(--muted)}details{border-top:1px solid var(--line);padding:25px 0}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-size:13px;list-style:none;position:relative;padding-right:22px;line-height:1.6}summary:after{content:'+';position:absolute;right:0}details[open] summary:after{content:'−'}summary span{font-size:10px;margin-right:18px;color:var(--muted)}details p{font-size:12px;line-height:1.9;color:var(--muted);margin:20px 0 0 40px;max-width:430px}.footer{padding:70px 7% 25px;border-top:1px solid var(--line)}.footer-main{display:flex;gap:30px;align-items:center;margin-bottom:75px}.face-mark.large{width:75px;height:60px;padding:0 14px}.face-mark.large i{width:8px;height:18px}.footer-main p{font-size:10px;letter-spacing:1.5px;color:var(--muted);margin:0 0 10px}#footer-replay{padding:0;font:22px var(--pixel);display:flex;gap:35px;align-items:center}#footer-replay span{font:35px var(--mono)}.footer-meta{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted)}.fallback-film{position:absolute;bottom:15%;right:20%;padding:12px;background:var(--ink);color:white;font-size:12px;z-index:4}@keyframes packet{from{left:0}to{left:100%}}@keyframes blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.15)}}@media(prefers-reduced-motion:reduce){.flow-packet,.bot-head i{animation:none}}@media(max-width:900px){.assembly-flow{padding:25px}.assembly-track{margin:0 20px}.robot-node{padding:22px 15px}.parts-bin,.parts-output{width:110px}.cycle-heading h2{font-size:49px}.notes-layout{gap:6%}.footer-meta{font-size:8px}}@media(max-width:650px){.film-stage{top:68px;height:calc(100vh - 68px)}.assembly-flow{transform:scale(.67);width:149%;transform-origin:left center;height:240px}.diagram-top,.diagram-bottom{padding:18px 14px;font-size:8px}.diagram-bottom{gap:22px}.diagram-bottom .text-button{font-size:8px}.cycle-layout,.notes-layout{display:block}.cycle-steps,.notes-list{margin-top:50px}.cycle-heading h2{font-size:48px}.section-wrap{padding:65px 6%}.footer-meta span:last-child{display:none}#footer-replay{font-size:16px;gap:15px}.footer{padding:50px 6% 25px}}

/* Reading sizes, while preserving the technical annotations. */
.header nav{font-size:14px}.eyebrow,.section-index,.film-topline,.plain-button,.text-button,.chapters button,.clock,.film-bottomline,.scene-tag,.scene-tag span:last-child{font-size:12px}.film-topline{letter-spacing:1px}.film-bottomline{font-size:10px}.scene-tag span:last-child{font-size:10px}.chapters button{letter-spacing:.4px}.chapters button span{font-size:10px}.section-intro p,#film-copy,.cycle-heading p,.cycle-step p,.notes-lead,details p{font-size:16px}.cycle-step h3,summary{font-size:16px}.cycle-check strong,.cycle-check span,.bin-label,.bin-foot,.track-label,.diagram-top,.diagram-bottom,.robot-node>span:last-child,.compact,.notes .text-button,.notes .text-button span,.footer-main p,.footer-meta,summary span{font-size:12px}.robot-node{min-width:200px}.assembly-flow{height:330px}.diagram-bottom .text-button{font-size:12px}.bin-foot{bottom:-15px}.parts-output .bin-foot{bottom:-20px}.track-label{font-size:10px}.footer-meta{letter-spacing:0}.film-controls{background:linear-gradient(transparent,#fafafae8)}
.film-controls{background:#fafafa}.scene-tag{background:#fafafae8;padding:8px 10px}.notes-list details p{font-size:14px}