.photo-source { display: grid; gap: .2rem; margin-top: .85rem; overflow-wrap: anywhere; }
.photo-settings { min-width: 0; border: 0; padding: 0; margin: 1.2rem 0; }
.photo-settings legend { margin-bottom: .65rem; font-weight: 650; }
.photo-settings p { margin: .55rem 0 .8rem; }
.photo-settings input, .photo-settings select { min-height: 2.75rem; max-width: 100%; padding: .45rem .55rem; color: var(--ink); background: var(--panel); border: 1px solid #9b7f6d; border-radius: .45rem; font: inherit; }
.photo-field { display: grid; gap: .3rem; min-width: 0; font-weight: 620; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .8rem; }
.photo-grid input { width: 100%; min-width: 0; }
.photo-preview { display: grid; justify-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background-color: #fff; background-image: repeating-conic-gradient(#e9e4dc 0% 25%, transparent 0% 50%); background-size: 1rem 1rem; margin-top: .8rem; }
.photo-page { position: relative; overflow: hidden; max-width: 100%; }
.photo-page canvas { display: block; width: auto; max-width: 100%; height: auto; }
.photo-frame { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 10000px #0005; pointer-events: none; }
.photo-result { display: grid; justify-items: start; gap: .75rem; margin-top: .8rem; }
.photo-result img { display: block; max-width: 100%; max-height: 20rem; width: auto; height: auto; border: 1px solid var(--line); background-color: #fff; background-image: repeating-conic-gradient(#e9e4dc 0% 25%, transparent 0% 50%); background-size: 1rem 1rem; }
.photo-settings [aria-invalid=true] { border-color: var(--accent); }
.photo-form .primary { min-height: 2.75rem; }