.people-photo-preview{display:flex;flex-direction:column;align-items:center;gap:16px;margin:20px auto 26px;max-width:260px;text-align:center}.people-photo-circle{position:relative;display:grid;place-items:center;width:min(188px,64vw);height:min(188px,64vw);overflow:hidden;border-radius:50%;background:#f3f0e6;color:#675923;font-size:36px;font-weight:700;isolation:isolate}.people-photo-circle img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--photo-fit,cover);object-position:var(--photo-x,50%) var(--photo-y,50%);transform:scale(var(--photo-zoom,1));transform-origin:var(--photo-x,50%) var(--photo-y,50%)}.people-photo-circle img[hidden]{display:none}.photo-controls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.photo-controls-grid label{display:grid;gap:12px}.photo-controls-grid input[type=range]{width:100%}.photo-controls-grid output{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}@media(max-width:560px){.photo-controls-grid{grid-template-columns:1fr;gap:8px}}
.people-photo-circle:has(img[src]:not([hidden]))>span{visibility:hidden}.people-photo-circle>span{display:grid;place-items:center;width:100%;height:100%;text-align:center}
.people-photo-circle{width:min(270px,65vw);height:min(270px,65vw);background:#1f1f1f;color:#c9b97a;border:1px solid #525252}
.people-photo-preview{max-width:340px;gap:12px}
.people-photo-circle.is-draggable{cursor:grab;touch-action:none;user-select:none}
.people-photo-circle.is-dragging{cursor:grabbing}
.people-photo-circle.is-draggable:focus-visible{outline:2px solid #f1ce4a;outline-offset:5px}
.people-photo-circle img{pointer-events:none;user-select:none}
.photo-drag-hint{color:#cdc9c0;font-size:12px}
.photo-controls-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin:18px auto}
.photo-zoom-control>div{display:flex;align-items:center;gap:12px;padding:12px;background:#1f1f1f;border:1px solid #3e3e3e;border-radius:12px}
.photo-zoom-control input{flex:1;min-width:0;accent-color:#f1ce4a}
.photo-zoom-control output{min-width:42px;text-align:right}
.photo-zoom-control .icon-button{flex:none;width:34px;height:34px;font-size:20px}
