:root{
  --jj-nav-height:72px;
  --jj-nav-mobile-height:64px;
  --jj-nav-padding:34px;
  --jj-nav-logo-size:34px;
}

.nav{
  height:var(--jj-nav-height);
  padding-right:var(--jj-nav-padding);
  padding-left:var(--jj-nav-padding);
}

.nav .brand span{
  width:var(--jj-nav-logo-size);
  height:var(--jj-nav-logo-size);
  flex:0 0 var(--jj-nav-logo-size);
}

.nav .brand .brand-nav-image{
  width:100%;
  height:100%;
  object-fit:contain;
}

.nav-sizing-card{
  margin-top:18px;
}

.nav-sizing-card .card-title{
  align-items:flex-start;
}

.nav-sizing-layout{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}

.nav-sizing-controls{
  display:grid;
  gap:12px;
}

.nav-size-control{
  display:grid;
  gap:10px;
  padding:15px 16px;
  background:#f6f6f8;
  border:1px solid #e1e2e6;
  border-radius:12px;
}

.nav-size-control>span{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.nav-size-control b{
  display:block;
  color:#34373d;
  font-size:11px;
}

.nav-size-control small{
  display:block;
  margin-top:4px;
  color:#858991;
  font-size:9px;
  line-height:1.5;
}

.nav-size-control output{
  flex:0 0 auto;
  min-width:62px;
  color:#34373d;
  font-size:10px;
  font-weight:700;
  text-align:right;
}

.nav-size-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 116px;
  gap:12px;
  align-items:center;
}

.nav-size-range{
  width:100%;
  margin:0;
}

.nav-size-exact{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  overflow:hidden;
  background:#fff;
  border:1px solid #d7d9de;
  border-radius:9px;
}

.nav-size-exact:focus-within{
  border-color:#8f939b;
  box-shadow:0 0 0 3px rgba(80,85,95,.08);
}

.nav-size-exact input{
  min-width:0;
  width:100%;
  padding:9px 6px 9px 10px;
  color:#25272c;
  background:transparent;
  border:0;
  outline:0;
  font-size:10px;
  font-weight:700;
}

.nav-size-exact i{
  padding-right:10px;
  color:#8a8e96;
  font-size:9px;
  font-style:normal;
}

.nav-size-authority-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
  padding:12px 14px;
  color:#676b73;
  background:#f8f8fa;
  border:1px dashed #d7d9de;
  border-radius:10px;
  font-size:9px;
  line-height:1.55;
}

.nav-size-authority-note b{
  flex:0 0 auto;
  color:#30333a;
}

.nav-size-preview-shell{
  position:sticky;
  top:100px;
  overflow:hidden;
  min-height:260px;
  background:radial-gradient(circle at 70% 30%,#363a44,#0a0b0e 68%);
  border:1px solid #dfe0e4;
  border-radius:14px;
}

.nav-size-preview-label{
  position:absolute;
  right:16px;
  bottom:14px;
  left:16px;
  overflow:hidden;
  color:rgba(255,255,255,.48);
  font-size:8px;
  letter-spacing:.08em;
  text-align:right;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.nav-size-preview{
  width:100%;
  height:var(--preview-nav-height,72px);
  min-height:0;
  padding:0 var(--preview-nav-padding,34px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  background:rgba(12,13,16,.72);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(20px);
  transition:height .2s,padding .2s;
}

.nav-size-preview-brand,
.nav-size-preview-links,
.nav-size-preview-actions{
  display:flex;
  align-items:center;
}

.nav-size-preview-brand{
  gap:11px;
  font-size:10px;
  font-weight:700;
}

.nav-size-preview-mark{
  width:var(--preview-logo-size,34px);
  height:var(--preview-logo-size,34px);
  flex:0 0 var(--preview-logo-size,34px);
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  font-size:8px;
  transition:width .2s,height .2s,flex-basis .2s;
}

.nav-size-preview-links{
  gap:22px;
  color:rgba(255,255,255,.7);
  font-size:8px;
}

.nav-size-preview-actions{
  gap:10px;
}

.nav-size-preview-pill{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:rgba(255,255,255,.76);
  font-size:7px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav-size-reset{
  margin-top:14px;
}

@media(max-width:900px){
  .nav{
    height:var(--jj-nav-mobile-height);
  }
  .nav .brand span{
    width:var(--jj-nav-logo-size);
    height:var(--jj-nav-logo-size);
    flex-basis:var(--jj-nav-logo-size);
  }
  .nav-sizing-layout{
    grid-template-columns:1fr;
  }
  .nav-size-preview-shell{
    position:relative;
    top:auto;
    min-height:220px;
  }
  .nav-size-preview-links{
    display:none;
  }
}

@media(max-width:560px){
  .nav{
    padding-right:var(--jj-nav-padding);
    padding-left:var(--jj-nav-padding);
  }
  .nav-size-preview{
    padding-right:var(--preview-nav-padding,34px);
    padding-left:var(--preview-nav-padding,34px);
  }
  .nav-size-preview-pill{
    display:none;
  }
  .nav-size-input-row{
    grid-template-columns:1fr;
  }
  .nav-size-exact{
    width:100%;
  }
}