.pp-layout { display: grid; gap: 20px; }
@media (min-width: 820px) { .pp-layout { grid-template-columns: auto 1fr; align-items: start; } }
.pp-frame { position: relative; width: 280px; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; touch-action: none; cursor: grab; }
.pp-frame canvas { display: block; width: 100%; height: auto; }
.pp-guide { position: absolute; inset: 0; pointer-events: none; }
.pp-head { position: absolute; left: 22%; right: 22%; top: 9%; bottom: 20%; border: 2px dashed rgba(2, 96, 162, .75); border-radius: 50%; }
.pp-chin { position: absolute; left: 0; right: 0; top: 80%; border-top: 1px dashed rgba(157, 2, 7, .6); }
.pp-zoom { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; font-weight: 600; font-size: .9rem; width: 280px; max-width: 100%; }
.pp-zoom input { flex: 1; }
.pp-actions { flex-wrap: wrap; }