.sp-overlay{inset:0;background:#00000073;z-index:300;align-items:stretch}.sp-overlay,.sp-panel{position:fixed;display:flex}.sp-panel{top:0;bottom:0;background:var(--panel);flex-direction:column;outline:none;box-shadow:-4px 0 32px #0000001f}.sp-panel--right{right:0;border-left:1px solid var(--rule)}.sp-panel--left{left:0;border-right:1px solid var(--rule);box-shadow:4px 0 32px #0000001f}.sp-panel--sm{width:min(320px,100vw)}.sp-panel--md{width:min(440px,100vw)}.sp-panel--lg{width:min(560px,100vw)}.sp-panel--xl{width:min(720px,100vw)}.sp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 20px;border-bottom:1px solid var(--rule);flex-shrink:0}.sp-head-content{flex:1;min-width:0}.sp-title{margin:0 0 4px;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink)}.sp-description{margin:0;font-size:var(--text-base);color:var(--ink-3);line-height:1.4}.sp-close{width:32px;height:32px;border-radius:6px;border:1px solid var(--rule);background:var(--bg);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:all .15s;flex-shrink:0}.sp-close:hover{border-color:var(--ink-3);color:var(--ink)}.sp-close svg{width:15px;height:15px}.sp-body{flex:1;overflow-y:auto;padding:24px}.sp-foot{padding:16px 24px;border-top:1px solid var(--rule);flex-shrink:0;display:flex;justify-content:flex-end;gap:10px}.sp-left-enter-active,.sp-left-leave-active,.sp-right-enter-active,.sp-right-leave-active{transition:opacity .25s ease}.sp-left-enter-active .sp-panel,.sp-left-leave-active .sp-panel,.sp-right-enter-active .sp-panel,.sp-right-leave-active .sp-panel{transition:transform .28s cubic-bezier(.4,0,.2,1)}.sp-right-enter-from,.sp-right-leave-to{opacity:0}.sp-right-enter-from .sp-panel,.sp-right-leave-to .sp-panel{transform:translate(100%)}.sp-left-enter-from,.sp-left-leave-to{opacity:0}.sp-left-enter-from .sp-panel,.sp-left-leave-to .sp-panel{transform:translate(-100%)}@media(max-width:640px){.sp-overlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.sp-panel{position:fixed;inset:auto 0 0;width:100%;max-height:92dvh;border-radius:20px 20px 0 0;border:none;border-top:1px solid var(--rule);box-shadow:0 -8px 40px -8px #00000038;padding-bottom:env(safe-area-inset-bottom,16px)}.sp-panel:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--rule-2);margin:12px auto 4px;flex-shrink:0}.sp-panel--lg,.sp-panel--md,.sp-panel--sm,.sp-panel--xl{width:100%}.sp-head{padding:16px 20px 14px}.sp-body{padding:20px}.sp-foot{padding:14px 20px}.sp-left-enter-active .sp-panel,.sp-right-enter-active .sp-panel{transition:transform .32s cubic-bezier(.16,1,.3,1)}.sp-left-leave-active .sp-panel,.sp-right-leave-active .sp-panel{transition:transform .22s cubic-bezier(.4,0,1,1)}.sp-left-enter-from .sp-panel,.sp-left-leave-to .sp-panel,.sp-right-enter-from .sp-panel,.sp-right-leave-to .sp-panel{transform:translateY(100%)}}