/* Hand-drawn selection boxes sit on the aperture's edge. */
.sheet-tools{display:flex;align-items:center;flex-shrink:0;margin-left:auto}
.frame-image-wrap{display:block;position:relative}
.edit-mark{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none;color:#ed3f2b;z-index:3;opacity:0;transition:opacity 160ms ease}
.edit-mark path{stroke-dasharray:none;stroke-dashoffset:0}
.frame-bottom{position:relative}
.hover-note{position:absolute;right:6px;top:-3px;max-width:calc(100% - 12px);font-family:'Reenie Beanie','Segoe Print','Bradley Hand',cursive;font-size:24px;font-weight:400;line-height:1;letter-spacing:0;color:#ed604b;white-space:nowrap;pointer-events:none;opacity:0;transform:rotate(var(--note-angle));clip-path:inset(0 100% 0 0);transition:opacity 160ms ease,clip-path 0s 160ms;z-index:4}
.frame:nth-of-type(3n) .hover-note{right:auto;left:9px}
.frame.selected .frame-mount{outline:1px solid #bebaa5;outline-offset:1px}
.frame.selected .frame-label{color:#dedbcf}
.frame-number:after{content:none}
.frame-button:focus-visible .edit-mark{opacity:1}
.frame-button:focus-visible .hover-note{opacity:1;clip-path:inset(0 -3px -5px -3px);transition:opacity 100ms ease 180ms,clip-path 300ms ease 180ms}
.frame-button:focus-visible .edge-bottom{opacity:.12}
.frame:focus-within{z-index:5}
@media(hover:hover) and (pointer:fine){
  .frame:hover{z-index:5}
  .frame-button:hover .edit-mark{opacity:1}
  .frame-button:hover .hover-note{opacity:1;clip-path:inset(0 -3px -5px -3px);transition:opacity 100ms ease 180ms,clip-path 300ms ease 180ms}
  .frame-button:hover .edge-bottom{opacity:.12}
}
.dense .hover-note{font-size:21px}
@media(max-width:700px){.hover-note{font-size:23px}.dense .hover-note{font-size:18px}}
@media(prefers-reduced-motion:reduce){.edit-mark,.edit-mark path,.hover-note,.film-edge{transition:none!important}}

.contact-sheets:not(.edit-mode) .frame-button:focus-visible{outline:none}