/* One backdrop sampling layer; content and pointer effects stay crisp above it. */
html{scroll-padding-top:124px}
.product-nav{
  position:sticky;top:12px;z-index:50;
  margin:12px clamp(12px,1.7vw,28px) 0;
  padding-inline:clamp(14px,2.2vw,40px);
  border:1px solid rgb(255 255 255 / .09);border-radius:24px;
  background:linear-gradient(135deg,rgb(255 255 255 / .035),transparent 65%),rgb(14 15 18 / .68);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .045),0 8px 32px rgb(0 0 0 / .18);
  isolation:isolate;
}
.product-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:rgb(5 7 10 / .16);opacity:0;
}
/* .hero{min-height:calc(100svh - 102px)} */
.workspace-menu{top:calc(100% + 10px);right:0}
.editor{top:116px}
.studio-mode .editor{top:100px}
@supports(animation-timeline:scroll()){
  .product-nav::before{
    animation:nav-glass-depth linear both;
    animation-timeline:scroll(root block);animation-range:0px 140px;
  }
}
@keyframes nav-glass-depth{from{opacity:0}to{opacity:1}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .product-nav{background:rgb(15 16 19 / .97)}
}
@media(max-width:720px){
  html{scroll-padding-top:104px}
  .product-nav{top:8px;margin:8px 8px 0;padding-inline:12px;border-radius:22px}
  /* .hero{min-height:calc(90svh - 84px)} */
}
@media(max-width:360px){
  .product-nav{top:6px;margin:6px 6px 0;padding-inline:8px;border-radius:20px}
  /* .hero{min-height:calc(90svh - 82px)} */
}
@media(prefers-reduced-motion:reduce){.product-nav::before{animation:none;opacity:.5}}
@media(prefers-reduced-transparency:reduce){.product-nav{background:rgb(15 16 19 / .98);-webkit-backdrop-filter:none;backdrop-filter:none}}