.container{
  max-width:980px;
  padding-left:14px;
  padding-right:14px;
}

.header-inner{
  min-height:48px;
  gap:18px;
}

.site-header{
  height:58px;
}

.brand{
  font-size:18px;
}

.top-nav{
  gap:2px;
}

.nav-btn{
  padding:8px 11px;
  font-size:13px;
  border-radius:6px;
}

.hero{
  padding:20px 0 10px;
}

h1{
  font-size:25px;
  margin:0 0 5px;
}

.hero p{
  font-size:13px;
}

.icon-btn{
  width:34px;
  height:34px;
  border-radius:7px;
}

.tool-panel{
  border-radius:9px;
}

.editor-toolbar{
  padding:8px 10px;
}

.mode-label{
  font-size:13px;
}

.stats{
  font-size:11px;
}

.small-btn{
  padding:5px 8px;
  font-size:11px;
}

.editor-shell{
  height:430px;
}

.line-numbers{
  width:38px;
  padding:14px 7px;
  font-size:11px;
  line-height:1.55;
}

#jsonInput{
  padding:13px;
  font-size:12px;
  line-height:1.55;
}

.status{
  margin-top:7px;
  padding:7px 10px;
  font-size:12px;
}

.action-row{
  gap:7px;
  padding:9px 0;
}

.btn{
  padding:8px 13px;
  border-radius:6px;
  font-size:13px;
}

.info-section{
  padding:30px 0 20px;
}

.info-section h2{
  font-size:20px;
}

.feature-grid{
  gap:10px;
  margin-top:15px;
}

.feature-grid article{
  padding:13px;
}

.feature-grid h3{
  font-size:15px;
}

.feature-grid p{
  font-size:12px;
}

.site-footer{
  padding:18px 0;
  font-size:12px;
}

.compare-head{
  padding:12px;
}

.compare-head h2{
  font-size:19px;
}

.compare-head p{
  font-size:12px;
}

.compare-grid{
  gap:10px;
  padding:12px;
}

.compare-editor{
  height:330px;
  padding:10px;
  font-size:12px;
}

/* Keep mobile compact too */
@media(max-width:800px){
  .container{
    padding-left:10px;
    padding-right:10px;
  }

  .header-inner{
    gap:8px;
  }

  .brand{
    font-size:17px;
  }

  .nav-btn{
    padding:7px 9px;
    font-size:12px;
  }

  .hero{
    padding:16px 0 8px;
  }

  h1{
    font-size:22px;
  }

  .hero p{
    font-size:12px;
  }

  .editor-shell{
    height:350px;
  }

  .btn{
    padding:7px 10px;
    font-size:12px;
  }
}

@media(max-width:560px){
  .editor-shell{
    height:320px;
  }
}