@layer components{.modal{border:var(--stroke-025) solid var(--border-boldest);background:var(--background-main);color:var(--text-primary);width:min(560px,calc(100% - 2 * var(--space-400)));max-height:calc(100dvh - 2 * var(--space-400));margin:auto;padding:0}.modal::backdrop{background:var(--background-scrim)}.modal[open]{animation:modal-in var(--dur-default) var(--ease-out)}.modal-panel{gap:var(--space-500);padding:var(--space-700);flex-direction:column;display:flex}.modal-head{justify-content:space-between;align-items:flex-start;gap:var(--space-400);display:flex}.modal-close{width:40px;height:40px;color:var(--text-primary);cursor:pointer;transition:opacity var(--dur-fast) var(--ease);background:0 0;border:none;flex:none;justify-content:center;align-items:center;margin:-8px -8px 0 0;display:inline-flex}.modal-close:hover{opacity:.55}@keyframes modal-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.modal[open]{animation:none}}@media (max-width:600px){.modal-panel{padding:var(--space-500)}}}