/* A borderless film ribbon: the image itself is the surface. */
#spaceCanvas.ribbon-host{height:64svh;min-height:400px;max-height:760px;position:relative;background:transparent;overflow:hidden}
#spaceCanvas.ribbon-host canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
#spaceCanvas.ribbon-host canvas:active{cursor:grabbing}
#spaceView{background:transparent}
.coverflow-caption{position:relative;margin-top:-8px;padding-bottom:28px}
.coverflow-caption h3{font-size:clamp(34px,5vw,68px);font-weight:200;letter-spacing:-.055em}
.coverflow-caption p{letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.coverflow-controls{gap:28px}
#watchCurrentFilm{background:transparent;color:var(--text);border-bottom:1px solid #777;padding:10px 4px;min-width:0}
.film-index{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;border:0;padding:24px 3%}
.film-link,.film-link:last-child{padding:10px 0;border:0;gap:0;min-height:44px;background:transparent;box-shadow:none!important;opacity:.42;transition:opacity .25s}
.film-link>span,.film-link>span:first-child{font-size:14px!important;margin:0;letter-spacing:-.02em}
.film-link small{display:none}
.film-link:hover,.film-link:focus-visible,.film-link[aria-pressed=true]{opacity:1;background:transparent}
.space-instructions{opacity:.7}
#projectDialog[open]{animation:ribbon-reveal .28s ease-out}
@keyframes ribbon-reveal{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
.ribbon-lost canvas{display:none}.ribbon-lost p{text-align:center;padding:60px 20px}
@media(max-width:600px){#spaceCanvas.ribbon-host{height:55svh;min-height:370px;max-height:610px}.coverflow-caption h3{font-size:38px}.film-index{margin:0 6%;gap:3px 20px;padding:18px 0}.film-link{flex-direction:row}.coverflow-controls{gap:24px}.space-instructions{font-size:12px}}
@media(prefers-reduced-motion:reduce){#projectDialog[open]{animation:none}}