:root{
  --bg:#101010; --fg:#d5d5d5; --muted:#ffa500; --link:#ffa500;
  --accent:#ffa500; --border:#4a4a4a; --err:#ff6b6b;
  --mono:"Courier New", Courier, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-size:16px; line-height:1.4; padding:10px; -webkit-text-size-adjust:100%;
}
main{max-width:100%}
.pane{position:relative; padding:10px; background:var(--bg); border:1px solid var(--border)}
.pane::before{
  content:attr(data-title); position:absolute; top:-10px; left:8px; padding:0 4px;
  background:var(--bg); color:var(--muted); font-size:0.85em;
}
.intro{margin:14px 0 8px; font-size:0.85em; color:var(--fg)}
.grammar{margin:0 0 12px; font-size:0.75em; color:var(--muted)}
textarea{
  width:100%; background:#000; color:var(--fg); border:1px solid var(--border);
  font-family:var(--mono); font-size:0.9em; padding:8px; resize:vertical;
}
textarea:focus-visible{outline:1px dashed var(--accent); outline-offset:2px}
.controls{margin:10px 0; display:flex; gap:2ch}
.tui-btn{
  background:transparent; border:none; color:var(--link); font-family:var(--mono);
  font-size:0.9em; cursor:pointer; padding:4px 2px;
}
.tui-btn:hover, .tui-btn:focus-visible{background:var(--link); color:#000; outline:none}
.status{min-height:1.3em; color:var(--err); font-size:0.8em}
.entropy-line{margin:6px 0; font-size:0.9em}
#entropy{color:var(--accent)}
canvas{width:100%; height:120px; border:1px solid var(--border); background:#000; margin-top:6px; display:block}