:root{
  --gsm-black:#101112;
  --gsm-graphite:#343536;
  --gsm-panel:#f4f2ee;
  --gsm-text:#111214;
  --gsm-muted:#777a7d;
  --gsm-line:rgba(17,18,20,.12);
}

.gocce-sm,
.gocce-sm *{box-sizing:border-box}

.gocce-sm{
  position:fixed;
  inset:0;
  z-index:99980;
  pointer-events:none;
  visibility:hidden;
  font-family:Arial,Helvetica,sans-serif;
}
.gocce-sm.is-mounted{visibility:visible}
.gocce-sm.is-open{pointer-events:auto}

.gocce-sm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .36s cubic-bezier(.2,.7,.2,1);
}
.gocce-sm.is-open .gocce-sm-backdrop{opacity:1}

.gocce-sm-prelayers,
.gocce-sm-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(39vw,610px);
  transform:translate3d(105%,0,0);
  will-change:transform;
}
.gocce-sm-prelayers{z-index:2;pointer-events:none}
.gocce-sm-prelayer{position:absolute;inset:0;transform:translate3d(105%,0,0);will-change:transform}
.gocce-sm-prelayer-1{background:var(--gsm-black)}
.gocce-sm-prelayer-2{background:var(--gsm-graphite)}

.gocce-sm-panel{
  z-index:3;
  background:var(--gsm-panel);
  color:var(--gsm-text);
  padding:44px clamp(30px,4vw,64px) 34px;
  display:flex;
  flex-direction:column;
  overflow:auto;
  box-shadow:-32px 0 80px rgba(0,0,0,.12);
}

.gocce-sm-panel-head{padding-bottom:46px;border-bottom:1px solid var(--gsm-line)}
.gocce-sm-brand{display:inline-flex;align-items:center;gap:14px;color:var(--gsm-text)!important;text-decoration:none!important}
.gocce-sm-logo-wrap{width:48px;height:48px;border-radius:50%;background:#111;display:grid;place-items:center;overflow:hidden}
.gocce-sm-logo-wrap img{width:33px;height:33px;object-fit:contain;display:block}
.gocce-sm-wordmark{font-family:Georgia,'Times New Roman',serif;font-size:24px;letter-spacing:.22em;line-height:1}
.gocce-sm-wordmark small{display:block;font-family:Arial,Helvetica,sans-serif;font-size:9px;letter-spacing:.34em;margin-top:7px;color:#777}

.gocce-sm-nav{padding:38px 0 26px}
.gocce-sm-nav ol{list-style:none!important;margin:0!important;padding:0!important}
.gocce-sm-item{overflow:hidden;border-bottom:1px solid var(--gsm-line)}
.gocce-sm-item>a{display:grid;grid-template-columns:42px minmax(0,1fr) 26px;align-items:center;gap:10px;padding:16px 0;color:var(--gsm-text)!important;text-decoration:none!important}
.gocce-sm-num{font-size:11px;line-height:1;color:#8a8c8e;transform:translateY(-8px)}
.gocce-sm-label-wrap{display:block;overflow:hidden;padding:2px 0}
.gocce-sm-label{display:inline-block;font-size:clamp(28px,3.1vw,50px);font-weight:700;line-height:.98;letter-spacing:-.045em;transform:translate3d(0,135%,0) rotate(8deg);transform-origin:0 100%;will-change:transform;transition:color .2s ease}
.gocce-sm-arrow{font-size:18px;opacity:.35;transform:translateX(-3px);transition:.25s ease}
.gocce-sm-item>a:hover .gocce-sm-label{color:#606367}
.gocce-sm-item>a:hover .gocce-sm-arrow{opacity:1;transform:translateX(2px)}

.gocce-sm-foot{margin-top:auto;padding-top:32px;opacity:0;transform:translateY(18px);will-change:opacity,transform}
.gocce-sm-foot-title{font-size:10px;font-weight:700;letter-spacing:.22em}
.gocce-sm-foot p{margin:10px 0 15px;color:var(--gsm-muted);font-size:13px}
.gocce-sm-foot a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gsm-text)!important;text-decoration:none!important}

.gocce-sm-toggle{
  position:fixed;
  top:18px;
  right:22px;
  z-index:99990;
  height:46px;
  min-width:116px;
  padding:0 17px;
  border:1px solid rgba(17,18,20,.14)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#111!important;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;
  backdrop-filter:blur(12px);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.gocce-sm-toggle:hover{transform:translateY(-1px)}
.gocce-sm-toggle.is-open{background:#111!important;color:#fff!important;border-color:#111!important}
.admin-bar .gocce-sm-toggle{top:50px}

.gocce-sm-toggle-text-clip{height:14px;overflow:hidden;display:block;min-width:48px;text-align:left}
.gocce-sm-toggle-text-track{display:flex;flex-direction:column;transform:translateY(0);will-change:transform}
.gocce-sm-toggle-text-track>span{height:14px;display:flex;align-items:center;font-size:10px;line-height:14px;font-weight:700;letter-spacing:.16em}

.gocce-sm-plus{position:relative;width:15px;height:15px;display:block}
.gocce-sm-plus i,.gocce-sm-plus b{position:absolute;left:50%;top:50%;display:block;background:currentColor;border-radius:9px;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gocce-sm-plus i{width:15px;height:1.5px;transform:translate(-50%,-50%) rotate(0deg)}
.gocce-sm-plus b{width:1.5px;height:15px;transform:translate(-50%,-50%) rotate(0deg)}
.gocce-sm-toggle.is-open .gocce-sm-plus i{transform:translate(-50%,-50%) rotate(45deg)}
.gocce-sm-toggle.is-open .gocce-sm-plus b{transform:translate(-50%,-50%) rotate(45deg)}

body.gocce-sm-lock{overflow:hidden!important}

@media (max-width:1024px){
  .gocce-sm-prelayers,.gocce-sm-panel{width:min(52vw,560px)}
}
@media (max-width:720px){
  .gocce-sm-prelayers,.gocce-sm-panel{width:100vw}
  .gocce-sm-panel{padding:34px 24px 28px}
  .gocce-sm-panel-head{padding-bottom:30px}
  .gocce-sm-nav{padding-top:24px}
  .gocce-sm-item>a{padding:14px 0;grid-template-columns:34px minmax(0,1fr) 24px}
  .gocce-sm-label{font-size:clamp(28px,10vw,44px)}
  .gocce-sm-toggle{top:12px;right:12px;height:42px;min-width:102px;padding:0 14px}
  .admin-bar .gocce-sm-toggle{top:58px}
}

@media (prefers-reduced-motion:reduce){
  .gocce-sm-backdrop,.gocce-sm-toggle,.gocce-sm-plus i,.gocce-sm-plus b{transition:none!important}
}
