:root{
  --brand-bg:var(--studio-bg);
  --brand-panel:var(--studio-panel);
  --brand-text:var(--studio-text);
  --brand-muted:var(--studio-muted);
  --brand-accent:var(--studio-accent);
  --brand-line:var(--studio-line);
}

@media(prefers-reduced-motion:reduce){
  .product-masthead .main-nav>a,
  .lang-switch a,
  .plugin-tabs a{transition:none!important}
}

html:has(body.showcase){overflow-x:hidden}
body.showcase{
  background:var(--brand-bg);
  color:var(--brand-text);
  font-family:StudioText,sans-serif;
  overflow-x:hidden;
}

.plugin-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}

.plugin-tabs a{
  padding:18px 20px 16px;
  border-bottom:2px solid transparent;
  color:var(--brand-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:color .2s,border-color .2s;
}

.plugin-tabs a:hover,
.plugin-tabs a.active{
  border-color:var(--brand-accent);
  color:var(--brand-text);
}

.plugin-tabs a:focus-visible{
  outline:2px solid var(--brand-accent);
  outline-offset:4px;
}
.product-masthead a:focus-visible,.product-masthead summary:focus-visible,.product-masthead button:focus-visible{outline:3px solid var(--studio-focus);outline-offset:4px}

.rt-top .plugin-tabs{
  margin-inline:0;
  border-bottom:0;
}

.rt-top .plugin-tabs a{
  padding-block:8px;
  color:var(--secondary);
  text-decoration:none;
}

.rt-top .plugin-tabs a:hover,
.rt-top .plugin-tabs a.active{
  border-color:var(--accent);
  color:var(--accent);
}

.rt-top .plugin-tabs a:focus-visible{
  outline-color:#268064;
}

.product-masthead{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:var(--studio-header-height);
  padding-inline:max(24px,calc((100% - var(--studio-content-width))/2));
  border-bottom:1px solid #ffffff17;
  background:#0c1112;
  color:var(--brand-text);
  font-family:StudioText,sans-serif;
}

.product-masthead .wordmark{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--brand-text);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.06;
  text-decoration:none;
  white-space:nowrap;
}

.product-masthead .wordmark img{
  width:68px;
  height:44px;
  object-fit:contain;
}

.product-masthead .wordmark-dot{
  color:var(--brand-accent);
}

.product-masthead .main-nav{
  display:flex;
  align-items:center;
  gap:36px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.product-masthead .main-nav>a{
  display:flex;
  align-items:center;
  min-height:44px;
  color:var(--brand-muted);
  text-decoration:none;
  transition:color .2s;
}

.product-masthead .main-nav>a:hover{
  color:var(--brand-accent);
}

.product-masthead .main-nav .lang-switch{
  min-height:44px;
  padding-left:27px;
  border-left:1px solid #ffffff40;
  color:var(--brand-muted);
}

.product-masthead .menu-toggle{
  display:none;
}

.skip-link{
  position:absolute;
  top:-100px;
  left:20px;
  z-index:20;
  padding:12px 18px;
  background:var(--brand-accent);
  color:#061318;
  font:700 12px/1 StudioText,sans-serif;
}

.skip-link:focus{
  top:12px;
}

.skip-link:focus-visible{
  outline:3px solid var(--brand-focus,#8feaff);
  outline-offset:4px;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:12px;
}

.lang-switch a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:inherit;
  text-decoration:none;
  transition:color .2s;
}

.product-masthead .lang-switch a.active,
.product-masthead .lang-switch a:hover{
  color:var(--brand-accent);
}

.lang-switch>.lang-divider{
  display:block;
  flex:0 0 1px;
  width:1px;
  height:16px;
  background:currentColor;
  opacity:.35;
}

@media(max-width:768px){
  .plugin-tabs{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:0;
    white-space:normal;
  }

  .plugin-tabs a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding-inline:6px;
    text-align:center;
    font-size:10px;
  }

  .rt-top{
    flex-wrap:wrap;
  }

  .rt-top .plugin-tabs{
    order:4;
    width:100%;
    margin-top:6px;
  }

  .rt-top .rt-search{
    order:3;
    width:100%;
  }

  .product-masthead{
    min-height:78px;
    padding-inline:20px;
  }

  .product-masthead .wordmark{
    gap:10px;
    font-size:12px;
  }

  .product-masthead .wordmark img{
    width:55px;
    height:36px;
  }

  .product-masthead .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-width:82px;
    min-height:44px;
    padding:12px 0;
    border:0;
    background:none;
    color:var(--brand-text);
    font:700 11px/1 StudioText,sans-serif;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .product-masthead .menu-toggle span{
    font-size:24px;
    font-weight:400;
  }

  .product-masthead .main-nav{
    position:absolute;
    top:78px;
    right:0;
    left:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:24px 20px 28px;
    border-bottom:1px solid var(--brand-line);
    background:#101819;
  }

  .product-masthead .main-nav.open{
    display:flex;
  }

  .product-masthead .main-nav>a{
    width:fit-content;
  }

  .product-masthead .main-nav .lang-switch{
    margin-top:8px;
    padding-left:0;
    border-left:0;
  }
}