:root {
  --ink: #1b1b1b;
  --paper: #fbfaf7;
  --line: #d9d5cc;
  --soft: #f1efe9;
  --accent: #1d5fa8;
  --note: #b8860b;
  --error: #b03030;
  --mark: #fff3b0;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--paper); }
body { display: flex; flex-direction: column; }
header {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--soft);
}
.brand { font-weight: 700; letter-spacing: 0.04em; }
.file-name { font-family: Menlo, Consolas, monospace; color: #555; }
.grow { flex: 1; }
.status { color: #555; font-size: 13px; min-width: 200px; text-align: right; }
button {
  font: inherit; padding: 4px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: white; cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
main { flex: 1; display: flex; min-height: 0; position: relative; }
/* an ear on the edge, upright, that brings a shut pane back */
.ear { position: absolute; top: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 8px 3px; font-size: 12px; letter-spacing: 0.04em; color: #555; background: var(--soft); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,0.12); writing-mode: vertical-rl; }
.ear.left { left: 7px; transform: translateY(-50%) rotate(180deg); border-radius: 6px 0 0 6px; border-right: 0; }
.ear.right { right: 7px; transform: translateY(-50%); border-radius: 6px 0 0 6px; border-right: 0; }
.ear.left svg { transform: rotate(180deg); }
.ear[hidden], .editbar[hidden] { display: none; }
.ear:hover { color: var(--accent); border-color: var(--accent); }
.ear svg { color: var(--accent); }
.side { width: 240px; flex: none; display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease; }
.side > * { min-width: 240px; }
.side.closed { width: 0 !important; }
button.panel { padding: 1px 4px; margin-left: 8px; color: #999; border-color: transparent; background: transparent; line-height: 0; }
button.panel:hover { color: var(--accent); }
.side-head button.panel, .code-head button.panel { align-self: center; }
.vhandle.shut { background: #e3ecf7; position: relative; }
.vhandle.shut::after { content: "›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: var(--accent); pointer-events: none; }
#code-handle.shut::after { content: "‹"; }
.side-head { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; color: #777; }
.side-head button { font-size: 12px; padding: 1px 8px; }
.side-head .all { margin-left: 10px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.files { flex: 1; overflow: auto; padding: 8px 0; font-family: Menlo, Consolas, monospace; font-size: 12px; }
.editbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: -8px -8px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; color: #666; }
.editbar .hint code { font-family: Menlo, Consolas, monospace; }
.editbar button { font-size: 12px; padding: 1px 8px; }
#drawn > * { flex: none; }
.files .dir { padding: 6px 12px 2px; color: #777; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.files .file { padding: 3px 12px 3px 20px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files .file:hover { background: var(--soft); }
.files .file.current { background: #e3ecf7; color: var(--accent); }
.files .file.example::after { content: "example"; float: right; font-size: 10px; color: #999; letter-spacing: 0.04em; }
.middle { flex: 3; display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); background: var(--soft); }
.tab { border: 1px solid transparent; border-bottom: 0; background: transparent; border-radius: 4px 4px 0 0; color: #666; }
.tab.current { background: var(--paper); border-color: var(--line); color: var(--ink); }
.zoom { display: flex; gap: 2px; align-items: center; padding-bottom: 4px; }
.zoom button { padding: 1px 8px; font-size: 12px; min-width: 28px; }
.zoom #zoom-reset { min-width: 52px; font-family: Menlo, Consolas, monospace; }
.view { display: none; flex: 1; min-height: 0; }
.view.current { display: flex; flex-direction: column; }
.diagrams { overflow: auto; padding: 16px; }
.simulate { overflow: hidden; }
.sim-controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.sim-controls .sep { width: 12px; }
.sim-controls input[type=range] { width: 160px; }
.counter { font-family: Menlo, Consolas, monospace; color: #555; min-width: 70px; }
.event { padding: 4px 12px; font-family: Menlo, Consolas, monospace; font-size: 12px; color: #444; background: var(--mark); min-height: 22px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sim-body { flex: 1; display: flex; min-height: 0; }
.vhandle { flex: none; width: 7px; cursor: col-resize; background: var(--soft); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.vhandle:hover { background: #e3ecf7; }
.chart-pane { flex: 1; overflow: auto; padding: 12px; }
.chart-pane .empty { color: #777; max-width: 36em; padding: 8px; }
.chart-pane text { font-family: Menlo, Consolas, monospace; font-size: 12px; }
.chart-pane .row.future { opacity: 0.12; }
.sim-diagrams { flex: 1; overflow: auto; padding: 12px; }
.sim-diagrams h2 { font-size: 13px; font-weight: 600; margin: 8px 0; color: #444; }
.sim-diagrams h2 .kind { color: #999; font-weight: 400; margin-right: 6px; }
.sim-diagrams svg { display: block; }
.sim-diagrams { padding: 0; }
.sim-diagrams .machine-tabs { position: sticky; top: 0; left: 0; z-index: 1; align-items: center; }
.sim-diagrams .machine-tabs .tab { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; }
.sim-diagrams .machine-tabs .tab .kind { font-size: 11px; color: #999; }
.sim-diagrams .machine-tabs .tab .state { font: 11px Menlo, Consolas, monospace; color: var(--accent); }
.sim-diagrams .machine-tabs .tab.moved .name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sim-diagrams .machine-tabs .follow { font-size: 12px; color: #666; padding: 0 12px 4px 0; white-space: nowrap; }
.sim-diagrams .machine-pane { padding: 12px; }
.sim-diagrams text { font-family: Menlo, Consolas, monospace; font-size: 12px; pointer-events: none; }
.sim-diagrams .sym.lit .shape { fill: var(--mark); stroke: var(--accent); stroke-width: 2; }
.sim-diagrams .transition.active .shape { fill: #e3ecf7; }
.sim-output { margin: 0; padding: 8px 12px; flex: none; height: 110px; overflow: auto; background: var(--soft); font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre-wrap; }
.diagrams .empty { color: #777; max-width: 40em; }
.diagrams h2 { font-size: 14px; font-weight: 600; margin: 24px 0 8px; color: #444; }
.diagrams h2:first-child { margin-top: 0; }
.diagrams h2 .kind { color: #999; font-weight: 400; margin-right: 6px; }
/* the pane is a flex column: nothing in it may be squeezed to fit */
.diagrams > * { flex: none; }
.diagrams svg { display: block; }
.diagrams .sym { cursor: pointer; }
.diagrams .sym:hover .shape { stroke: var(--accent); stroke-width: 2; }
.diagrams .sym.lit .shape { fill: var(--mark); }
.diagrams .noted .shape { stroke: var(--note); }
.diagrams text { font-family: Menlo, Consolas, monospace; font-size: 12px; fill: var(--ink); pointer-events: none; }
.diagrams .badge { fill: var(--note); }
.diagrams .badge-text { fill: white; font-size: 10px; font-weight: 700; }
.code { flex: 2; min-width: 240px; display: flex; flex-direction: column; background: white; overflow: hidden; transition: width 0.2s ease, min-width 0.2s ease; }
.code.closed { width: 0 !important; min-width: 0 !important; flex: none !important; }
.code > * { min-width: 240px; }
.code-head { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--line); color: #777; font-size: 12px; background: var(--soft); }
.dirty { color: var(--error); }
.code-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.gutter {
  margin: 0; padding: 8px 6px 8px 10px; text-align: right; color: #aaa; background: var(--soft);
  font: 12px/1.5 Menlo, Consolas, monospace; user-select: none; overflow: hidden; white-space: pre;
}
.gutter .lit { background: var(--mark); color: var(--ink); }
.gutter .err { color: var(--error); font-weight: 700; }
.gutter .note { color: var(--note); }
.code-stack { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.colors, textarea#editor {
  margin: 0; padding: 8px 10px; border: 0; font: 12px/1.5 Menlo, Consolas, monospace;
  white-space: pre; tab-size: 2; letter-spacing: 0;
}
.colors {
  position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; pointer-events: none;
  color: var(--ink); overflow: visible; will-change: transform;
}
textarea#editor {
  position: absolute; inset: 0; width: 100%; height: 100%; outline: none; resize: none;
  background: transparent; color: transparent; caret-color: var(--ink); overflow: auto;
}
/* the colours are behind the textarea, so a selection must let them through */
textarea#editor::selection { background: rgba(29, 95, 168, 0.22); }
.tk-comment { color: #8a8378; font-style: italic; }
.tk-string { color: #2a7a3b; }
.tk-escape { color: #1f6f2f; font-weight: 600; }
.tk-number { color: #9a4a00; }
.tk-keyword { color: #7a1f8f; font-weight: 600; }
.tk-constant { color: #9a4a00; }
.tk-type { color: #1d5fa8; }
.tk-ctor { color: #1d5fa8; }
.tk-machine { color: #a0341f; }
.tk-call { color: #2d4f7f; }
.tk-wild { color: #999; }
.tk-arrow, .tk-op, .tk-lambda { color: #6b6b6b; }
.diagrams .adder { cursor: pointer; }
.diagrams .adder text { fill: #888; }
.diagrams .adder:hover .shape { stroke: var(--accent); }
.adder-button { margin-left: 12px; font-size: 12px; padding: 1px 8px; }
button.iconic { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
button.iconic svg { flex: none; }
button.iconic.plus svg { color: #2a7a3b; }
button.iconic.run svg { color: #2a7a3b; }
button.iconic.run:hover svg { color: #1f6b30; }
.editbar button.iconic svg, .side-head button.iconic svg { color: var(--accent); }
.editbox {
  position: fixed; z-index: 10; width: 440px; background: white; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.15); padding: 10px;
}
.editbox-title { font-size: 12px; color: #666; margin-bottom: 6px; }
.editbox input, .editbox textarea {
  width: 100%; font: 12px/1.5 Menlo, Consolas, monospace; padding: 6px; border: 1px solid var(--line); border-radius: 4px; white-space: pre; resize: vertical;
}
.editbox-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.editbox button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.editbox button.danger { color: var(--error); }
.editbox-status { font-size: 12px; color: var(--error); margin-left: 6px; }
.editbox.form { width: 540px; }
.form-body { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.form-row > label { flex: none; width: 84px; padding-top: 4px; color: #666; text-align: right; }
.form-row select, .form-row input { font: 12px/1.4 Menlo, Consolas, monospace; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; }
.form-row input { flex: 1; }
.choice { display: inline-flex; gap: 4px; align-items: center; flex: 1; }
.choice input { flex: 1; min-width: 90px; }
.choice input.args { flex: 2; }
.form-actions { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.form-action { display: flex; gap: 4px; align-items: center; }
.form-action .choice { flex: 1; }
.form-action input.ms { width: 70px; flex: none; }
.form-action input.wide { flex: 1; }
button.tiny { font-size: 11px; padding: 1px 6px; }
.form-ticks { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1; align-items: center; }
.form-ticks .tick { display: inline-flex; align-items: center; gap: 4px; font: 12px Menlo, Consolas, monospace; }
.form-ticks input.wide { flex-basis: 100%; }
.editbox.form.scenario { width: 720px; }
.form-word { font: 12px Menlo, Consolas, monospace; color: #666; flex: none; }
.form-action { flex-wrap: wrap; }
.form-preview-title { font-size: 11px; color: #888; margin-top: 8px; }
.form-preview { margin: 4px 0 0; padding: 6px 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre; overflow: auto; max-height: 160px; }
.hovertip {
  position: fixed; z-index: 20; max-width: 480px; padding: 6px 10px; background: #fffbe6; border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre; pointer-events: none;
}
.handle { flex: none; height: 7px; cursor: row-resize; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.handle:hover { background: #e3ecf7; }
.problems { list-style: none; margin: 0; padding: 0; flex: none; height: 140px; overflow: auto; font-size: 12px; background: white; }
.problems li { padding: 4px 12px; cursor: pointer; border-bottom: 1px solid #f0eee8; }
.problems li:hover { background: var(--soft); }
.problems li { display: flex; align-items: baseline; gap: 8px; }
.problems .icon {
  flex: none; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
  font-size: 10px; font-weight: 700; color: white; border-radius: 50%; position: relative; top: 2px;
}
.problems .icon.error { background: var(--error); }
.problems .icon.note { background: #2f6fbf; font-family: Georgia, serif; font-style: italic; }
.problems .icon.warning { background: var(--note); border-radius: 2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); line-height: 19px; }
.problems .line { flex: none; font-family: Menlo, Consolas, monospace; color: #777; min-width: 56px; }
.problems .error .line { color: var(--error); }
.problems .note .line { color: var(--note); }