.modal{z-index:100;background:var(--overlay-color);justify-content:center;align-items:flex-start;display:flex;position:fixed;inset:0}@media (width>=768px){.modal{align-items:center}}.modal--floating{align-items:center;padding:16px}.modal__panel{background:var(--white);flex-direction:column;width:100%;max-height:100vh;display:flex;overflow:hidden}@media (width>=768px){.modal__panel{border-radius:var(--radius-l);width:auto;min-width:460px;max-width:656px;height:auto;max-height:90vh}}.modal__panel--floating{border-radius:var(--radius-l);max-height:calc(100vh - 32px);box-shadow:0 12px 40px var(--black-a24);position:relative;overflow-y:auto}@media (width>=768px){.modal__panel--floating{width:100%;min-width:0;max-width:none}}.modal__header{flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:16px 16px 0;display:flex}@media (width>=768px){.modal__header{padding:32px 32px 0}}.modal__title{letter-spacing:-.02rem;color:var(--black-100);margin:0;font-size:1.375rem;font-weight:700;line-height:1.27}.modal__close{cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin:-4px -4px -4px 0;padding:0;display:flex}.modal__close .icon{width:24px;height:24px}.modal__close--floating{z-index:1;color:var(--black);margin:0;position:absolute;top:16px;right:16px}.modal__body{padding:16px;overflow-y:auto}@media (width>=768px){.modal__body{padding:32px}}