.fg{--fg-height: 240px;--fg-fade: 48px;color:inherit;min-width:0}.fg *{box-sizing:border-box}.fg-gate{overflow-x:auto;overscroll-behavior-x:contain;position:relative;scrollbar-width:thin}.fg[data-loop] .fg-gate{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 min(var(--fg-fade),20%),#000 calc(100% - min(var(--fg-fade),20%)),transparent);mask-image:linear-gradient(90deg,transparent,#000 min(var(--fg-fade),20%),#000 calc(100% - min(var(--fg-fade),20%)),transparent)}.fg-track{display:flex;width:max-content;gap:0}.fg-frame{position:relative;flex:none;display:block;padding:0;border:0;border-radius:0;background:#242322;color:#faf4df;height:calc(min(var(--fg-height),60vw) * 1065 / 855);width:calc(min(var(--fg-height),60vw) * 1200 / 855)}button.fg-frame{cursor:zoom-in}.fg-frame img{position:absolute;left:2.5%;top:calc(100% * 105 / 1065);width:95%;height:calc(100% * 855 / 1065);object-fit:cover}.fg-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/portfolio/filmstrip-gallery/assets/film-frame-CyUl8qRh.svg) center/100% 100%;pointer-events:none}.fg button:focus-visible{outline:3px solid #e8b96b;outline-offset:-4px}.fg-bar{display:flex;align-items:center;gap:16px;padding:20px 24px;font:12px/1.5 monospace}.fg-toggle,.fg-dialog button{font:inherit;color:inherit;border:1px solid currentColor;border-radius:3px;background:transparent;padding:9px 14px;cursor:pointer}.fg-toggle:disabled{opacity:.55;cursor:default}.fg-status{opacity:.65}.fg-empty{padding:32px}.fg-dialog{position:fixed;color:#f8f3e8;background:#171919;border:1px solid #515553;padding:20px;width:min(1000px,94vw);max-height:92dvh;overflow:auto}.fg-dialog::backdrop{background:#080b0ce8}.fg-dialog>img{display:block;max-width:100%;width:auto;height:auto;max-height:66dvh;object-fit:contain;margin:16px auto}.fg-close{display:block;margin-left:auto}.fg-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}.fg-nav p{font:14px/1.5 system-ui;text-align:center}.fg-nav button{flex-shrink:0}.fg-nav [hidden]{display:none}@media(max-width:600px){.fg-bar{padding:16px 8px;gap:10px}.fg-nav{flex-wrap:wrap}.fg-nav p{order:-1;width:100%}}@media(forced-colors:active){.fg[data-loop] .fg-gate{-webkit-mask-image:none;mask-image:none}.fg-frame:after{display:none}.fg-frame{height:min(var(--fg-height),60vw);width:calc(min(var(--fg-height),60vw) * 4 / 3)}.fg-frame img{top:0;right:0;bottom:0;left:0;width:100%;height:100%}}:root{font-family:Arial,Helvetica,sans-serif;color:#ebe6d9;background:#141918;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}header{margin:0 5vw;padding:28px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff25;font:11px monospace}.brand{font:24px Georgia,serif}.brand span{font:10px monospace;letter-spacing:1px;margin-left:15px}.intro{padding:64px 8vw 48px;max-width:1400px;margin:auto}.eyebrow{font:10px monospace;letter-spacing:2px;color:#c6ae79}h1{font:clamp(64px,8vw,116px) / .94 Georgia,serif;letter-spacing:-5px;font-weight:400;margin:28px 0 32px}h1 em{font-weight:400;color:#c6ae79}.intro-bottom{display:flex;justify-content:space-between;align-items:end}.intro-bottom p,.panel-heading>p:not(.eyebrow),.code-section p{font-size:14px;line-height:1.8;color:#b5bdb7}.edition{font:10px/1.7 monospace;letter-spacing:1px;color:#a3aca4}.reel{border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;background:#101513;padding-top:22px}.reel-heading{display:flex;justify-content:space-between;padding:0 5vw 22px;font:9px monospace;letter-spacing:1.5px;color:#a4b0a6}.fg-bar{padding-left:5vw}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:10vw;margin:0 8vw;padding:70px 0;border-bottom:1px solid #ffffff25}h2{font:42px/1.1 Georgia,serif;font-weight:400;letter-spacing:-1px;margin:20px 0}.quiet{margin-top:18px;border:0;border-bottom:1px solid #778476;padding:8px 0;background:none;color:#d2d8cd;font-size:12px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;align-content:start;padding-top:10px}.controls label{font-size:12px;color:#d5dbd2}.controls output{float:right;color:#b6a170;font:11px monospace}.controls input[type=range]{display:block;width:100%;margin:20px 0 0;accent-color:#c6ae79}.controls select{width:100%;margin-top:12px;padding:8px;background:#1f2822;color:#e8e8d9;border:1px solid #ffffff30}.check{display:flex;gap:8px;align-items:center}.check input{accent-color:#c6ae79}.upload{position:relative;border:1px dashed #738271;text-align:center;padding:16px;grid-column:1/-1;cursor:pointer}.upload input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;cursor:pointer}.upload:focus-within{outline:2px solid #c6ae79}.note{font:11px/1.6 monospace!important;color:#9aa798!important;margin:0;grid-column:1/-1}.images-section{margin:0 8vw;padding:40px 0 60px;border-bottom:1px solid #ffffff25}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h2{font-size:30px}.section-title span{font:9px monospace;letter-spacing:1px;color:#a2b09e}.image-row{display:grid;grid-template-columns:72px 1fr 1.7fr auto;gap:16px;align-items:center;border-bottom:1px solid #ffffff12;padding:12px 0}.image-row img{width:72px;height:50px;object-fit:cover}.image-row input{min-width:0;width:100%;background:transparent;color:#d6decf;border:0;border-bottom:1px solid #ffffff25;padding:8px 0;font-size:12px}.image-row button,.code-heading button{background:none;color:#c6ae79;border:0;font:11px monospace;padding:10px}.code-section{display:grid;grid-template-columns:1fr 1.4fr;gap:6vw;padding:70px 8vw}.code-section a{font:12px monospace;color:#c6ae79}.code-heading{display:flex;justify-content:space-between;align-items:center;background:#20291f;padding:10px 18px;font:10px monospace}pre{margin:0 0 14px;padding:24px;background:#0d130f;color:#bcccaa;font:12px/1.7 monospace;overflow:auto;max-height:330px}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff25;padding:28px 5vw;font:9px monospace;letter-spacing:.6px;color:#b0bbaa}:focus-visible{outline:2px solid #e3c68f;outline-offset:4px}@media(max-width:700px){header{padding:22px 0}.brand span{display:none}.intro{padding:48px 6vw 35px}h1{font-size:68px;letter-spacing:-3px}.intro-bottom p{font-size:12px}.edition{display:none}.reel-heading{font-size:8px;letter-spacing:0}.reel-heading span:last-child{max-width:120px;text-align:right}.workbench{grid-template-columns:1fr;margin:0 6vw;padding:40px 0;gap:20px}h2{font-size:36px}.controls{gap:24px 18px}.images-section{margin:0 6vw}.section-title{display:block}.image-row{grid-template-columns:54px 1fr auto;gap:10px}.image-row img{width:54px;height:45px}.image-row input:nth-child(3){grid-column:2;grid-row:2}.image-row button{grid-column:3;grid-row:1/3}.code-section{grid-template-columns:1fr;padding:40px 6vw}footer{flex-wrap:wrap;line-height:1.5}}.code-section>div{min-width:0}pre{max-width:100%}