:root {
  --bg: #0b0d10; --panel: #101318; --line: #222732; --fg: #d9dee6; --muted: #6f7888;
  --accent: #ffcf5a; --pos: #ff7b54; --neg: #45b8f5; --ok: #6fdc8c; --bad: #ff5f6d;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
body { display: flex; flex-direction: column; }
button { font: 12px var(--mono); color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
button:hover { border-color: var(--muted); }
button.active { border-color: var(--accent); color: var(--accent); }

header { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand b { font: 700 20px var(--mono); color: var(--accent); letter-spacing: 0.02em; }
.brand span { color: var(--muted); font: 13px var(--mono); }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
.actions { margin-left: auto; display: flex; gap: 6px; }

main { flex: 1; min-height: 0; display: grid; gap: 1px; background: var(--line);
       grid-template-columns: minmax(360px, 0.85fr) 1.15fr; grid-template-rows: 1.15fr 0.85fr;
       grid-template-areas: "code net" "code run"; }
section { background: var(--bg); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#code-pane { grid-area: code; } #net-pane { grid-area: net; } #run-pane { grid-area: run; }
.head { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.head > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.stage { flex: 1; min-height: 0; position: relative; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#net { touch-action: none; }
#run { touch-action: none; }
.foot { display: flex; align-items: center; gap: 16px; padding: 6px 14px; font: 12px var(--mono); color: var(--muted); min-height: 30px; }
#hint { margin-left: auto; }
#controls { display: flex; gap: 14px; flex-wrap: wrap; }
#controls label { display: flex; align-items: center; gap: 6px; }
#controls input { width: 110px; accent-color: var(--accent); }

#editor { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#hl, #src { position: absolute; inset: 0; margin: 0; padding: 10px 16px 40px; font: 13.5px/1.6 var(--mono); white-space: pre;
            tab-size: 2; border: 0; overflow: auto; letter-spacing: 0; }
#src { background: transparent; color: transparent; caret-color: var(--fg); resize: none; outline: none; z-index: 1; }
#src::selection { background: rgba(255, 207, 90, 0.22); }
#hl { pointer-events: none; overflow: hidden; color: var(--fg); }
#hl .ln { min-height: 1.6em; margin: 0 -16px; padding: 0 16px; transition: background 0.15s; }
#hl .ln.hot { background: rgba(255, 207, 90, 0.10); }
#hl .ln.changed { background: rgba(111, 220, 140, 0.13); }
#hl .kw, #ref .kw { color: #c792ea; } #hl .num { color: #f78c6c; } #hl .par { color: var(--accent); } #hl .cst { color: #89ddff; }
#hl .fn, #ref .fn { color: #82aaff; } #hl .cm, #ref .cm { color: #5c6577; font-style: italic; }
#msg { padding: 8px 16px; font: 12px var(--mono); color: var(--muted); border-top: 1px solid var(--line); min-height: 34px; }
#msg.bad { color: var(--bad); }
#ref { border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }
#ref summary { padding: 7px 16px; cursor: pointer; }
#ref summary:hover { color: var(--fg); }
#ref pre { margin: 0; padding: 0 16px 10px; color: var(--fg); max-height: 40vh; overflow: auto; }

#proof.ok { color: var(--ok); } #proof.bad { color: var(--bad); }
#tip { position: absolute; pointer-events: none; display: none; max-width: 340px; padding: 7px 9px; background: rgba(16, 19, 24, 0.96);
       border: 1px solid var(--line); border-radius: 6px; font: 11.5px/1.45 var(--mono); color: var(--fg); z-index: 2; }
#tip .k { color: var(--muted); } #tip .p { color: var(--accent); } #tip .v { color: #fff; }

@media (max-width: 900px) {
  html, body { height: auto; }
  main { grid-template-columns: 1fr; grid-template-rows: 420px 320px 380px; grid-template-areas: "code" "net" "run"; }
  .brand span { display: none; }
}

.head .cue { color: var(--accent); font-weight: 600; }