/* The user's original film illustration is the frame; no redrawn canister. */
.moments-feed{position:relative;color:var(--surface-ink);scroll-margin-top:0}
.film-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:84px 0 12px}
.film-pin h2{font-size:17px;font-weight:400;line-height:1.6;letter-spacing:0;margin:0;text-align:center}
.film-pin h2:focus{outline:none}
.film-projector{position:relative;display:flex;flex-direction:column;width:min(440px,92%);min-height:0;flex:1;isolation:isolate}
.projector-canister{position:relative;z-index:3;flex:none;width:100%;aspect-ratio:315/174;overflow:hidden;pointer-events:none}
.projector-canister img{position:absolute;left:-98.412698%;top:-25.862069%;width:298.730159%;height:960.91954%;max-width:none}
.projector-gate{position:relative;flex:1;min-height:0;width:100%;overflow:clip}
.projector-track{position:relative;width:100%;will-change:transform}
.projector-cell{position:relative;width:100%;aspect-ratio:315/190;overflow:hidden}
.projector-film{position:absolute;z-index:2;left:-98.412698%;top:-213.157895%;width:298.730159%;height:880%;max-width:none;pointer-events:none}
.projector-frame{position:absolute;z-index:1;left:27.936508%;top:3.157895%;width:46.349206%;height:93.684211%;border:0;padding:0;border-radius:3px;background:none;overflow:hidden;cursor:pointer}
.projector-frame img{width:100%;height:100%;object-fit:cover;display:block}
.film-projector:focus-visible{outline:1px solid currentColor;outline-offset:6px;border-radius:4px}
.projector-frame:focus-visible{outline:3px solid var(--surface-ink);outline-offset:-4px}
.film-return-slot{flex:none;min-height:44px;display:grid;place-items:center}
.film-return{font-size:14px;color:inherit;min-height:44px;padding:8px 4px;border:0;border-bottom:1px solid currentColor;background:none;cursor:pointer}
.film-return[hidden]{display:none}
.film-static .film-pin{position:relative;height:auto;padding:76px 0 48px}
.film-static .film-projector{flex:none}
.film-static .projector-canister{position:relative;height:auto;aspect-ratio:315/174}
.film-static .projector-gate{flex:none;height:auto;overflow:visible}
.film-static .projector-track{will-change:auto;transform:none!important}
.film-static .film-return-slot{margin-top:20px}
.film-roll-art{position:relative;width:100%;aspect-ratio:315/1600;overflow:hidden}
.film-roll-reference{position:absolute;left:-98.412698%;top:-1.875%;width:298.730159%;height:104.5%;max-width:none;display:block;pointer-events:none}
.film-exposure{position:absolute;z-index:2;top:var(--frame-top);left:27.936508%;width:46.349206%;height:11.125%;border-radius:3px;overflow:hidden;border:0;padding:0;background:#16251c;display:block}
.film-exposure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--hover-duration) var(--ease)}
button.film-exposure:hover img{transform:scale(1.035)}
button.film-exposure:focus-visible{outline:3px solid #31543d;outline-offset:7px}
.film-frame-number{position:absolute;bottom:7px;left:7px;display:grid;place-items:center;min-width:26px;height:26px;padding:3px;background:#16251ccc;color:#fff8e9;font-size:12px;border-radius:2px}
.moments-page{padding:116px 24px 80px;min-height:100svh;color:var(--surface-ink)}
.moments-page-heading{max-width:660px;margin:auto;text-align:center}
.moments-page-heading .quiet-link{margin:0 0 34px;display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.moments-page h1{font-size:clamp(42px,5vw,68px);line-height:1.15;letter-spacing:-.035em;margin:0 0 18px}
.moments-page-heading p{font-size:16px;color:var(--surface-muted)}
.film-roll-complete{width:min(440px,100%);margin:42px auto 0;animation:roll-unfold 900ms cubic-bezier(.22,.7,.25,1) both}
@keyframes roll-unfold{from{clip-path:inset(0 0 85%)}to{clip-path:inset(0)}}
.moment-viewer{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#111918;color:#fff3df;overflow:hidden;overscroll-behavior:contain}
.moment-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.moment-viewer::backdrop{background:#111918}
.moment-viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:66px;padding:calc(8px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 8px max(24px,env(safe-area-inset-left,0px))}
.moment-position{font-size:14px;font-variant-numeric:tabular-nums}
.moment-viewer button{color:inherit;background:none;border:1px solid #fff3df66;min-width:48px;min-height:48px;border-radius:50%;font-size:24px;padding:7px}
.moment-viewer [data-moment-close]{font-size:29px;border-color:transparent}
.moment-media{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;overflow:hidden;padding:0 18px}
.moment-media>img,.moment-media>video{width:100%;height:100%;object-fit:contain;display:block}
.moment-viewer-footer{padding:20px 24px max(20px,env(safe-area-inset-bottom,0px));text-align:center}
.moment-viewer-footer h2{font-size:21px;line-height:1.35;margin:0 0 18px}
.moment-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:440px;margin:auto}
.moment-swipe-hint{font-size:14px;color:#d2d1c8}
.moment-viewer button:disabled{opacity:.25;cursor:default}
.moment-error{font-size:16px;text-align:center;max-width:280px;line-height:1.6}
.moment-media:has(.moment-error){flex-direction:column;gap:20px}
.moment-viewer .moment-retry{border-radius:3px;font-size:16px;padding:10px 25px}
@media(max-width:760px){
 .film-pin{padding-top:76px;padding-bottom:8px;gap:8px}
 .film-pin h2{font-size:16px}
 .moments-page{padding:96px 24px 50px}
 .moments-page h1{font-size:40px}
 .moments-page-heading .quiet-link{margin-bottom:24px}
 .film-roll-complete{margin-top:32px;max-width:355px}
 .moment-media{padding:0 10px}
 .moment-viewer-footer h2{font-size:20px}
}
@media(max-height:720px){
 .film-pin{padding-top:76px;padding-bottom:8px;gap:4px}
}
@media(max-width:360px){.moment-viewer-footer{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){.film-roll-complete{animation:none}.film-exposure img{transition:none}button.film-exposure:hover img{transform:none}}