html,body {
  margin:0;
  height:100%;
  background:#fff4f8;
  font-family:consolas,monospace;
  overflow:hidden;
  font-size:16px;
  tab-size:4;
}

#wrap {
  display:flex;
  height:calc(100% - 24px);
}

#ln {
  width:50px;
  background:#ffe3ee;
  color:#c06a8b;
  padding:8px;
  text-align:right;
  user-select:none;
  white-space:pre;
  overflow:hidden;
  border-right:1px solid #f7bfd4;
}

#box {
  flex:1;
  position:relative;
}

#view, #edit {
  position:absolute;
  inset:0;
  margin:0;
  padding:8px;
  white-space:pre;
  overflow:auto;
  font:inherit;
}

#view {
  color:#5a3d4d;
  pointer-events:none;
}

#edit {
  background:transparent;
  color:transparent;
  caret-color:#ff4f93;
  border:none;
  outline:none;
  resize:none;
}

#bar {
  height:24px;
  background:#ffd6e6;
  color:#9b5570;
  display:flex;
  align-items:center;
  padding:0 8px;
  border-top:1px solid #f0b7cc;
}

.bar-left {
  flex:1;
}

.bar-center {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-weight:bold;
  color:#d63384;
}

/* Syntax highlighting */
.kw { color:#d63384; }   /* keywords */
.st { color:#e67e22; }   /* strings */
.cm { color:#5ca37a; }   /* comments */
.nu { color:#9b59b6; }   /* numbers */