.code-background{left:calc((100% - 100vw)/2);width:100vw;top:270px;height:220px;font-size:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.code-line.c1{left:24%;top:0}.code-line.c2{left:68%;top:10px}.code-line.c3{left:5%;top:65px}.code-line.c4{left:69%;top:65px}.code-line.c5{left:73%;top:95px}.code-line.c6{left:69%;top:125px}.code-line.c7{left:6%;top:130px}.code-line.c8{left:72%;top:185px}
.code-line.c9{left:3%;top:30px;color:#bac9c8}.code-line.c10{left:77%;top:155px;color:#b7c5cf}.code-line.c11{left:11%;top:185px;color:#c3c2b9}.code-line.c12{left:69%;top:210px;color:#bdc7c7}
.lens-overlay{pointer-events:none;overflow:visible}
.lens-code-strip{animation:lens-code-flow 11s linear infinite;will-change:transform}
.lens-code-1{animation-duration:13s;animation-delay:-4s}
.lens-code-strip text{font-family:Consolas,'Courier New',monospace;font-size:11px;letter-spacing:-.25px}
.lens-code-strip .code-teal{fill:#86d4d0}.lens-code-strip .code-ivory{fill:#d7e1d5}
@keyframes lens-code-flow{from{transform:translateY(0)}to{transform:translateY(-160px)}}
.lenses-paused .lens-code-strip{animation-play-state:paused}
.motion-disabled .lens-code-strip{animation:none!important;will-change:auto}
@media(min-width:1400px){.code-background{top:295px;height:250px;font-size:15px}}
@media(max-width:950px){.code-background{top:255px;font-size:12px}.code-line.c9{left:1%}.code-line.c10{left:77%}}
@media(max-width:650px){.code-background{top:230px;font-size:8px;height:180px}.code-line.c1{left:0;top:0}.code-line.c2{left:76%;top:0}.code-line.c3{left:0;top:45px}.code-line.c4{left:77%;top:58px}.code-line.c5{left:81%;top:80px}.code-line.c6{left:79%;top:95px}.code-line.c7{left:0;top:113px}.code-line.c8{left:83%;top:138px}.code-line.c9{left:1%;top:23px}.code-line.c10{left:82%;top:117px}.code-line.c11{left:0;top:150px}.code-line.c12{left:80%;top:162px}}
@media(prefers-reduced-motion:reduce){.lens-code-strip{animation:none!important;will-change:auto}}
@media(min-width:651px){.code-line.c12{top:170px}}
/* Eén compositie, gecentreerd achter het portret. */
.code-background{left:50%;width:min(1160px,100vw);translate:-50% 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.code-background .code-line{left:50%;right:auto;top:calc(var(--code-row)*17px);width:max-content;text-align:center;transform:translateX(-50%);font-size:13px;line-height:1.3;letter-spacing:-.35px}
.motion-enabled .code-background .code-line{animation:center-code-reveal 1.3s cubic-bezier(.2,.65,.3,1) both;animation-delay:calc(.35s + var(--code-row)*.055s)}
@keyframes center-code-reveal{from{clip-path:inset(0 50%);opacity:0}to{clip-path:inset(0 0);opacity:1}}
@media(min-width:1400px){.code-background .code-line{font-size:14px;top:calc(var(--code-row)*19px)}}
@media(max-width:950px){.code-background .code-line{font-size:11px;top:calc(var(--code-row)*16px)}}
@media(max-width:650px){.code-background .code-line{font-size:7px;letter-spacing:-.2px;top:calc(var(--code-row)*14px)}}
@media(prefers-reduced-motion:reduce){.code-background .code-line{animation:none!important;clip-path:none;opacity:1}}
/* Losser ritme en meer witruimte, met het midden als uitgangspunt. */
.code-background{top:265px}
.code-background .code-line{left:calc(50% + var(--code-x));top:var(--code-y);font-size:var(--code-size);line-height:1.6;letter-spacing:.15px;transform:translateX(-50%) rotate(var(--code-angle));opacity:var(--code-opacity)}
@keyframes center-code-reveal{from{clip-path:inset(0 50%);opacity:0}to{clip-path:inset(0 0);opacity:var(--code-opacity)}}
@media(min-width:1400px){.code-background{top:290px}.code-background .code-line{top:calc(var(--code-y)*1.1);font-size:calc(var(--code-size)*1.05)}}
@media(max-width:950px){.code-background{top:250px}.code-background .code-line{left:calc(50% + var(--code-x)*.65);top:calc(var(--code-y)*.9);font-size:calc(var(--code-size)*.85)}}
@media(max-width:650px){.code-background{top:225px}.code-background .code-line{left:calc(50% + var(--code-x)*.35);top:calc(var(--code-y)*.8);font-size:calc(var(--code-size)*.55);letter-spacing:0}}