:root{
  --bg: #0b0e13;
  --panel: #11151d;
  --line: #232a36;
  --ink: #e7e4db;
  --ink-dim: #8891a1;
  --amber: #d4a24c;
  --teal: #5a9a94;
  --rose: #c1685f;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  display:flex;
  flex-direction:column;
}
header{
  padding:22px 28px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
header .brand{
  display:flex;
  align-items:baseline;
  gap:12px;
}
header h1{
  font-family:var(--mono);
  font-size:18px;
  font-weight:600;
  letter-spacing:0.02em;
  margin:0;
  color:var(--ink);
}
header h1 span{color:var(--amber);}
header .sub{
  font-size:12.5px;
  color:var(--ink-dim);
  font-family:var(--mono);
}
.stats{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--ink-dim);
  display:flex;
  gap:16px;
}
.stats b{color:var(--teal); font-weight:600;}

/* layout: left raw pane | draggable divider | right readable pane */
main{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 14px 1.6fr;
  min-height:0;
  height:calc(100vh - 68px);
}
.pane{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
}
.pane-head{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}
.pane-head button{
  background:none;
  border:1px solid var(--line);
  color:var(--ink-dim);
  font-family:var(--mono);
  font-size:10.5px;
  padding:4px 9px;
  border-radius:3px;
  cursor:pointer;
  letter-spacing:0.05em;
}
.pane-head button:hover{ color:var(--ink); border-color:var(--ink-dim); }

textarea{
  flex:1;
  resize:none;
  background:var(--panel);
  color:var(--ink);
  border:none;
  outline:none;
  padding:20px;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  tab-size:2;
  min-height:0;
}
textarea::placeholder{color:#4a5266;}

textarea.drag-over{
  border:2px solid var(--amber);
  padding:19px;
}

/* draggable divider between panes */
.divider{
  position:relative;
  background:var(--bg);
  cursor:col-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.divider::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background:var(--line);
}
.divider .handle{
  position:relative;
  z-index:1;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  width:14px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-dim);
  font-size:11px;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.divider.live .handle{ border-color:var(--amber); color:var(--amber); }
.divider:hover .handle,
.divider.dragging .handle{ border-color:var(--amber); color:var(--amber); }
.divider.dragging{ background:rgba(212,162,76,0.06); }

/* readable output pane — deliberately larger, this is the part people read */
.output{
  flex:1;
  overflow-y:auto;
  padding:26px 32px;
  background:var(--panel);
  font-size:19px;
  line-height:1.88;
  min-height:0;
}
.output .empty-msg{
  color:var(--ink-dim);
  font-family:var(--mono);
  font-size:14px;
}
.row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:5px 0;
  border-left:2px solid transparent;
  flex-wrap:wrap;
}
.row:hover{ border-left-color:var(--line); background:rgba(255,255,255,0.015); }
.key{
  font-family:var(--mono);
  color:var(--teal);
  font-weight:600;
  white-space:nowrap;
  font-size:0.96em;
}
.val-string{ color:var(--ink); }
.val-string::before, .val-string::after{ content:'"'; color:var(--ink-dim); }
.val-number{ color:var(--amber); font-family:var(--mono); }
.val-bool{ color:var(--rose); font-family:var(--mono); font-weight:600; }
.val-null{ color:var(--ink-dim); font-family:var(--mono); font-style:italic; }
.type-tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:3px;
  padding:2px 7px;
  margin-left:auto;
  white-space:nowrap;
}
.indent{ padding-left:26px; border-left:1px dashed var(--line); margin-left:6px; }
.sentence{
  font-family:var(--sans);
  color:var(--ink);
  padding:2px 0 10px;
  font-size:1.05em;
}
.sentence b{ color:var(--teal); font-weight:600; }
.sentence .n{ color:var(--amber); font-family:var(--mono); }
.section-title{
  font-family:var(--mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-dim);
  margin:20px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.section-title:first-child{ margin-top:0; padding-top:0; border-top:none; }
.error-box{
  font-family:var(--mono);
  color:var(--rose);
  background:rgba(193,104,95,0.08);
  border:1px solid rgba(193,104,95,0.35);
  border-radius:4px;
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.6;
}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--panel);}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px;}

@media (max-width:760px){
  main{ grid-template-columns:1fr !important; grid-template-rows:1fr 14px 1fr; height:auto; }
  .divider{ cursor:row-resize; }
  .divider::before{ top:50%; bottom:auto; left:0; right:0; width:auto; height:1px; }
  .divider .handle{ width:44px; height:14px; }
  .output{ font-size:17px; padding:18px 20px; }
}