body {
  margin:0;
  background:#1e1e1e;
  color:white;
  font-family:Arial, sans-serif;
  height:100vh;
  display:flex;
  flex-direction:column;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#333;
  padding:10px 20px;
}
header .brand {
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  font-size:18px;
}
header .link {
  color:#fff;
  margin-left:15px;
  text-decoration:none;
}
header .link:hover { text-decoration:underline; }

.controls {
  background:#222;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.controls select, .controls button {
  padding:6px 12px;
  border:none;
  border-radius:4px;
  font-size:14px;
}
.controls button {
  background:#007acc;
  color:white;
  cursor:pointer;
  margin-left:8px;
}
.controls .counter {
  margin-right:10px;
  font-size:14px;
  color:#ccc;
}

main {
  flex:1;
  display:flex;
  flex-direction:column;
}
#editor {
  flex:1;
  height:25vh;
}
#preview {
  flex:2;
  height:75vh;
  background:white;
  border:none;
}