.portrait { margin: 0; width: 280px; max-width: 100%; min-width: 0; aspect-ratio: 1; align-self: center; --dock-size: 40px; }
.portrait-stage { position: relative; aspect-ratio: 1; isolation: isolate; background: var(--portrait-bg); border-radius: 20px; overflow: hidden; }
.portrait-image, .portrait-canvas, .portrait-icon, .portrait-home { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-image { object-fit: contain; image-rendering: pixelated; }
.portrait-canvas { visibility: hidden; }
.portrait-loading .portrait-image, .portrait-ready .portrait-image { visibility: hidden; }
.portrait-ready .portrait-canvas { visibility: visible; }
.portrait-image, .portrait-canvas { mix-blend-mode: screen; opacity: calc(1 - var(--dock-fade, 0)); }

/* Scroll dock: the stage shrinks into the top bar slot and the face gives way to the icon. */
.portrait-icon { opacity: var(--dock-fade, 0); pointer-events: none; }
.portrait-home { display: block; pointer-events: none; border-radius: inherit; }
.portrait-slot { flex: none; width: 40px; height: 40px; visibility: hidden; pointer-events: none; }
.portrait-moving .portrait-stage { z-index: 20; will-change: transform; transform-origin: 0 0; }
.portrait-docked .portrait-stage {
  position: fixed; z-index: 20; left: var(--dock-x); top: var(--dock-y);
  width: var(--dock-size); border-radius: 22%; --dock-fade: 1; overflow: visible; background: transparent;
}
.portrait-docked .portrait-home { pointer-events: auto; }
/* Desktop after the first scroll: the row is gone for good, only the docked icon stays. */
.portrait.portrait-folded { height: 0; margin: 0 !important; aspect-ratio: auto; }
.portrait-home:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 700px) {
  .portrait { width: 240px; }
}
@media print {
  .portrait-stage { position: relative !important; transform: none !important; width: auto !important; border-radius: 16px !important; }
  .portrait-image, .portrait-canvas { opacity: 1 !important; }
  .portrait.portrait-folded { height: auto; aspect-ratio: 1; }
  .portrait-icon, .portrait-home, .portrait-slot { display: none !important; }
}