/* Restore the selected object's pixels without moving the photograph. */
.shape-room { min-height: 100dvh; isolation: isolate; }
.shape-room > main { min-width: 0; }
.shape-stage { position: relative; width: 100%; background: var(--color-paper); }
.shape-photograph { display: block; width: 100%; height: auto; }
.photo-background, .photo-layer, .photo-layer image { pointer-events: none; }
/* WebKit ignores CSS filter functions on SVG images, so fading uses opacity. */
.photo-background { transition: opacity 160ms ease, filter 160ms ease; }
.shape-stage.has-selection .photo-background { opacity: .68; filter: saturate(.65); }
.photo-layer { opacity: 0; transition: opacity 120ms ease; }
.shape-object { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shape-object.is-selected .photo-layer { opacity: 1; }
.photo-hit { fill: transparent; pointer-events: visiblePainted; }
.shape-object:focus { outline: none; }
.shape-object:focus-visible .photo-hit { stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.shape-room-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 24px; }
.shape-room-header a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; white-space: nowrap; }
.shape-room-header .shape-room-brand { font-size: 28px; }
.shape-room-nav { display: flex; gap: 24px; }
.shape-room-heading { padding: 38px 16px 4px; text-align: center; }
.shape-room-heading h1 { font-size: clamp(36px, 4.5vw, 62px); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; margin: 14px 0; }
.shape-room-status { margin: 0; min-height: 28px; font-size: clamp(16px, 3vw, 20px); line-height: 1.4; }
.shape-room-controls { padding: 8px 24px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.shape-room-footer { display: flex; justify-content: center; align-items: center; font-size: 11px; }
.shape-room-footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.shape-collection-header { padding: 28px 0 32px; border-bottom: 1px solid var(--color-rule); margin-bottom: 24px; }
.shape-collection-header a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
.shape-collection-header h1 { margin: 20px 0 16px; font-size: clamp(36px, 5vw, 68px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.shape-collection-header p { max-width: 48ch; font-size: 15px; }
.shape-empty { padding-block: 24px; }
.shape-empty p { margin-bottom: 12px; }
.shape-empty a { display: inline-flex; align-items: center; min-height: 44px; }
.shape-collection .index-footer { margin-top: 64px; }
@media (min-width: 761px) {
  .shape-room { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; }
  .shape-room > main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  .shape-stage { min-height: 0; height: 100%; }
  .shape-photograph { height: 100%; }
}
@media (min-width: 761px) and (hover: hover) {
  .shape-photograph:has(.shape-object:hover) .photo-background { opacity: .68; filter: saturate(.65); }
  .shape-object:hover .photo-layer { opacity: 1; }
}
@media (max-width: 760px) {
  .shape-room { display: flex; flex-direction: column; }
  .shape-room > main { display: flex; flex: 1; flex-direction: column; }
  .shape-stage { overflow: clip; margin-block: auto; }
  .shape-photograph { width: 176%; max-width: none; margin-left: -38%; }
  .shape-room-header { padding: 8px 16px; gap: 8px; }
  .shape-room-header a { font-size: 11px; }
  .shape-room-header .shape-room-brand { font-size: 25px; }
  .shape-room-nav { gap: 12px; }
  .shape-room-nav span { display: none; }
  .shape-room-heading { padding-top: 30px; }
  .shape-room-controls { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-background, .photo-layer { transition: none; }
}