#projectCode{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.code-conduit{position:fixed;left:8px;top:70px;width:82px;z-index:7;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-15px);transition:opacity .45s,transform .55s,visibility .55s;filter:drop-shadow(0 0 15px #a7e2ca28)}
.code-conduit.is-active{opacity:.92;visibility:visible;transform:none}
html[data-project-assembly=boot] :is(.project-card,.project-heading,.filters,.project-invitation,footer){opacity:0}
html[data-project-assembly=ready] [data-assembly-text]{opacity:0}
html[data-project-assembly=ready] .project-card[data-assembly=waiting] picture{opacity:0}
html[data-project-assembly=ready] .project-card:is([data-assembly=waiting],[data-assembly=building]) .project-cover{background:transparent}
.project-card:is([data-assembly=waiting],[data-assembly=building]) .project-cover:after{opacity:var(--assembly-shade,0)}
.project-card[data-assembly=building] picture{will-change:mask-image}
html[data-project-assembly=ready] .project-card:focus-within [data-assembly-text]{opacity:1}
html[data-project-assembly=ready] .project-card:focus-within picture{opacity:1;mask-image:none!important}
@media(max-width:1000px){.code-conduit{width:65px;left:4px}}
@media(max-width:650px){.code-conduit{width:58px;left:auto;right:9px;top:12px}}
@media(prefers-reduced-motion:reduce){#projectCode{display:none}.code-conduit{transition:none}html[data-project-assembly] [data-assembly-text],html[data-project-assembly] .project-card picture{opacity:1!important;mask-image:none!important}}

@media(min-width:651px){.code-conduit{width:clamp(36px,calc(6vw - 12px),82px);left:5px}}