@layer components{#headshot-disclaimer-modal,#crop-headshot-modal{width:32rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 4rem);padding:var(--pk-4);background:var(--pk-surface-raise);color:var(--pk-ink);border:1px solid var(--pk-line);border-radius:var(--pk-radius-lg);box-shadow:var(--pk-shadow-3);margin:auto;overflow-y:auto}#headshot-disclaimer-modal[open],#crop-headshot-modal[open]{gap:var(--pk-4);flex-direction:column;display:flex}#headshot-disclaimer-modal::backdrop,#crop-headshot-modal::backdrop{background:var(--pk-overlay)}#crop-headshot-modal[open]{align-items:center}#headshot-disclaimer-modal .hsd-title,#crop-headshot-modal .crop-headshot-title{font-size:var(--pk-text-lg);align-self:flex-start;margin:0}#headshot-disclaimer-modal .hsd-list{font-size:var(--pk-text-sm);color:var(--pk-ink-muted);gap:.35rem;margin:0;padding-left:1.25rem;display:grid}#headshot-disclaimer-modal .hsd-form{gap:var(--pk-4);flex-direction:column;width:100%;display:flex}#headshot-disclaimer-modal .hsd-actions,#crop-headshot-modal .crop-headshot-actions{gap:var(--pk-2);flex-wrap:wrap;display:flex}#crop-headshot-modal .crop-headshot-actions{justify-content:center;width:100%}#crop-headshot-modal .crop-headshot-viewport{aspect-ratio:1;border-radius:var(--pk-radius-sm);border:3px solid var(--pk-accent-strong);background:var(--pk-surface-sunk);cursor:grab;touch-action:none;flex-shrink:0;width:100%;max-width:18.75rem;position:relative;overflow:hidden}#crop-headshot-modal .crop-headshot-viewport.dragging{cursor:grabbing}#crop-headshot-modal .crop-headshot-viewport:focus-visible{box-shadow:var(--pk-focus);outline:none}#crop-headshot-modal .crop-headshot-viewport canvas{pointer-events:none;width:100%;height:100%;display:block}#crop-headshot-modal .crop-headshot-help{font-size:var(--pk-text-sm);color:var(--pk-ink-muted);margin:0}#crop-headshot-modal .crop-headshot-zoom{align-items:center;gap:var(--pk-2);width:100%;display:flex}#crop-headshot-modal .crop-headshot-slider{flex:1}@media (width<=30rem){#headshot-disclaimer-modal,#crop-headshot-modal{border-radius:var(--pk-radius-lg) var(--pk-radius-lg) 0 0;border-bottom:0;width:100vw;max-width:100vw;margin:auto 0 0}}}