/* passport-photo-maker: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.pp-stage { align-items: center; }
.pp-stage .field, .pp-stage .button-row { width: min(100%, 380px); }
.pp-frame-wrap { width: min(100%, 380px); padding: 10px; border-radius: var(--r-panel); background: var(--mist); border: 1px solid var(--line); }
.pp-frame { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; box-shadow: var(--shadow-2); }
.pp-frame:active { cursor: grabbing; }
.pp-frame:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.pp-legend { max-width: 380px; text-align: center; }
.pp-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; }
.pp-key-head { background: rgb(14 138 95 / 0.45); }
.pp-key-eye { height: 3px; background: rgb(29 99 237); }