.spt-root{font-family:inherit}
.spt-bars{position:fixed;display:flex;flex-direction:column;gap:8px;z-index:var(--spt-z,99999);pointer-events:none}
.spt-bars-right{right:0;align-items:flex-end}
.spt-bars-left{left:0;align-items:flex-start}

.spt-bar{pointer-events:auto;cursor:pointer;border:0;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;
  width:var(--bw,38px);padding:var(--bp,16px) 0;background:var(--bg,#1d4ed8);color:var(--c,#fff);
  font-size:var(--fs,15px);font-weight:var(--fw,600);line-height:1;letter-spacing:.03em;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background .2s,transform var(--spt-speed,350ms) cubic-bezier(.4,0,.2,1),opacity .2s;
  writing-mode:vertical-rl}
.spt-bars-right .spt-bar{border-radius:var(--br,8px) 0 0 var(--br,8px)}
.spt-bars-left .spt-bar{border-radius:0 var(--br,8px) var(--br,8px) 0}
.spt-bar:hover,.spt-bar:focus-visible{background:var(--hv,#1e3a8a)}
.spt-bar:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.spt-bar.spt-dir-btt .spt-label,.spt-bar.spt-dir-btt .spt-icon{transform:rotate(180deg)}
.spt-bar.spt-dir-btt{flex-direction:column-reverse}
.spt-icon{display:inline-block}
a.spt-bar{text-decoration:none;box-sizing:border-box}
a.spt-bar:hover,a.spt-bar:focus-visible{color:var(--c,#fff)}

/* shift the open bar so it sits against the panel edge */
.spt-bars-right .spt-bar.spt-open{transform:translateX(calc(-1 * var(--spt-open-w,400px)))}
.spt-bars-left .spt-bar.spt-open{transform:translateX(var(--spt-open-w,400px))}

.spt-overlay{position:fixed;inset:0;background:var(--spt-ov,#000);opacity:0;visibility:hidden;
  transition:opacity var(--spt-speed,350ms),visibility var(--spt-speed,350ms);z-index:calc(var(--spt-z,99999) - 2)}
.spt-overlay.spt-show{opacity:var(--spt-ov-op,.5);visibility:visible}

.spt-panel{position:fixed;top:0;bottom:0;width:var(--pw,400px);max-width:100vw;background:var(--pbg,#fff);color:var(--pc,#1f2937);
  z-index:calc(var(--spt-z,99999) - 1);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  box-shadow:0 0 30px rgba(0,0,0,.25);visibility:hidden;transition:transform var(--spt-speed,350ms) cubic-bezier(.4,0,.2,1),opacity var(--spt-speed,350ms),visibility 0s linear var(--spt-speed,350ms)}
.spt-panel.spt-side-right{right:0;transform:translateX(100%)}
.spt-panel.spt-side-left{left:0;transform:translateX(-100%)}
.spt-panel.spt-style-fade{transform:none!important;opacity:0}
.spt-panel.spt-open{visibility:visible;transition-delay:0s}
.spt-panel.spt-side-right.spt-open,.spt-panel.spt-side-left.spt-open{transform:none}
.spt-panel.spt-style-fade.spt-open{opacity:1}
.spt-content{padding:var(--pp,28px)}
.spt-content>:first-child{margin-top:0}
.spt-close{position:absolute;top:8px;right:12px;width:36px;height:36px;border:0;background:transparent;color:inherit;font-size:28px;line-height:1;cursor:pointer;opacity:.7;z-index:2}
.spt-panel.spt-side-left .spt-close{right:12px}
.spt-close:hover,.spt-close:focus-visible{opacity:1}

body.spt-lock{overflow:hidden}
body.spt-push-active{transition:transform var(--spt-speed,350ms) cubic-bezier(.4,0,.2,1)}

.spt-hidden-device{display:none!important}

@media (prefers-reduced-motion:reduce){
  .spt-bar,.spt-panel,.spt-overlay,body.spt-push-active{transition-duration:.01ms!important}
}

/* Beat theme button styles in every state */
.spt-root .spt-bars .spt-bar,
.spt-root .spt-bars .spt-bar:link,
.spt-root .spt-bars .spt-bar:visited,
.spt-root .spt-bars .spt-bar:focus,
.spt-root .spt-bars .spt-bar:active,
.spt-root .spt-bars .spt-bar.spt-open{
  background:var(--bg,#1d4ed8)!important;color:var(--c,#fff)!important;
  border:0!important;text-shadow:none!important;text-transform:none!important;
  min-height:0!important;height:auto!important;margin:0!important;
  font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.2)!important;outline:0}
.spt-root .spt-bars .spt-bar:hover,
.spt-root .spt-bars .spt-bar.spt-open:hover{
  background:var(--hv,#1e3a8a)!important;color:var(--c,#fff)!important}
.spt-root .spt-bars .spt-bar:focus-visible{outline:2px solid var(--c,#fff)!important;outline-offset:-4px}
.spt-root .spt-bars .spt-bar .spt-label,
.spt-root .spt-bars .spt-bar .spt-icon{color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:1!important}
.spt-root .spt-close,.spt-root .spt-close:hover,.spt-root .spt-close:focus,.spt-root .spt-close:active{
  background:transparent!important;color:inherit!important;border:0!important;box-shadow:none!important;padding:0!important}
