:root{
  font-family:system-ui,Arial,sans-serif;
  color:#192b46;background:#f3f7fc;
}
*{box-sizing:border-box}
body{margin:0}
header{
  background:#102647;color:#fff;
  padding:20px 5%;
}
.nav{
  max-width:1100px;margin:auto;
  display:flex;justify-content:space-between;
  align-items:center;gap:15px;
}
.nav strong{font-size:26px}
.nav span{color:#b6c9e5;font-size:13px}
main{
  max-width:1100px;margin:auto;
  padding:35px 20px;
}
.hero{
  padding:45px 30px;border-radius:22px;
  background:linear-gradient(
    120deg,#152c53,#2860a5);
  color:white;margin-bottom:36px;
}
.hero h1{
  font-size:clamp(32px,5vw,56px);
  margin:12px 0;
}
.hero p{color:#d9e8ff;line-height:1.7}
.eyebrow{font-weight:700;letter-spacing:2px}
h2{font-size:25px}
p{line-height:1.6}
.grid{
  display:grid;gap:15px;
  grid-template-columns:repeat(
    auto-fit,minmax(220px,1fr));
  margin:25px 0 45px;
}
button{
  padding:23px;text-align:left;
  border:1px solid #dbe4f0;
  border-radius:15px;background:white;
  cursor:pointer;color:#172d50;
  box-shadow:0 5px 22px #19396310;
}
button:hover,button:focus-visible{
  border-color:#3681dc;background:#f7fbff;
}
button b{display:block;font-size:17px}
button span{
  display:block;margin-top:8px;
  font-size:13px;color:#74849b;
}
.editors{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px;
}
.editors>div{
  background:white;border-radius:15px;
  border:1px solid #dbe4f0;padding:18px;
  min-width:0;
}
label{display:block;margin-bottom:12px}
textarea,pre{
  width:100%;height:230px;
  border:1px solid #dbe4f0;
  border-radius:9px;padding:14px;
  background:#f8faff;
  font:13px/1.6 ui-monospace,monospace;
  overflow:auto;overflow-wrap:anywhere;
}
textarea{resize:vertical}
pre{white-space:pre-wrap;margin:0}
footer{
  padding:25px;text-align:center;
  color:#73849a;font-size:13px;
}
@media(max-width:700px){
  .editors{grid-template-columns:1fr}
  .hero{padding:30px 20px}
}