:root {
  --bg: #f6f5f1;
  --panel: #ffffff;
  --border: #dedbd2;
  --text: #24231f;
  --muted: #77746b;
  --accent: #b5462b;
  --accent-text: #ffffff;
  --value: #2f6f4f;
  --error: #b42318;
  --error-bg: #fdecea;
  --gutter: #f0eee8;
  --selection: #f3dccf;
  --tok-keyword: #8a3ffc;
  --tok-atom: #b5462b;
  --tok-number: #0b6e99;
  --tok-string: #2f6f4f;
  --tok-comment: #9a968c;
  --tok-builtin: #7a4d00;
  --tok-bracket: #77746b;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161614;
    --panel: #1e1e1b;
    --border: #34332e;
    --text: #e8e6df;
    --muted: #9b988e;
    --accent: #e0714f;
    --accent-text: #1a0d08;
    --value: #7fcf9f;
    --error: #ff8a7a;
    --error-bg: #3a1f1b;
    --gutter: #1a1a18;
    --selection: #4a3328;
    --tok-keyword: #c3a6ff;
    --tok-atom: #f0936f;
    --tok-number: #6cc4e8;
    --tok-string: #8fd6a8;
    --tok-comment: #77746b;
    --tok-builtin: #e6c07b;
    --tok-bracket: #9b988e;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--sans);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 .lambda { color: var(--accent); }
h1 .sub { color: var(--muted); font-weight: 450; }

.title {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* The pages: Compile and REPL. */
nav {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}

nav a {
  padding: 3px 10px;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}

nav a:hover { color: var(--text); }
nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* Link to the source repository. */
.git { display: flex; color: var(--muted); }
.git:hover { color: #f05032; }

.controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Vim mode's structural editing keys, under the header's controls. */
.keybinds {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  width: min(380px, 90vw);
  max-height: 70vh;
  overflow: auto;
  padding: 4px 14px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
  font-size: 12.5px;
}
.keybinds h2 {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.keybinds dl {
  display: grid;
  grid-template-columns: 10ch 1fr;
  gap: 2px 12px;
  margin: 0;
}
.keybinds dt { font-family: var(--mono); color: var(--accent); white-space: pre; }
.keybinds dd { margin: 0; }

button, select {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

button:disabled { opacity: 0.45; cursor: default; }

.toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

kbd {
  font: 11px var(--mono);
  opacity: 0.75;
  margin-left: 4px;
}

main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 12px;
  padding: 12px 16px 16px;
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pane-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#download { margin-left: auto; color: var(--muted); }

#editor {
  flex: 1;
  min-height: 0;
}

#editor .CodeMirror, #editor textarea {
  height: 100%;
  width: 100%;
  font: 13.5px/1.55 var(--mono);
  background: var(--panel);
  color: var(--text);
}

#editor textarea {
  border: 0;
  padding: 8px 12px;
  resize: none;
  outline: none;
}

/* CodeMirror, in the page's colours. */
.CodeMirror-gutters { background: var(--gutter); border-right: 1px solid var(--border); }
.CodeMirror-linenumber { color: var(--muted); }
.CodeMirror-cursor { border-left-color: var(--text); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--selection); }
.cm-fat-cursor .CodeMirror-cursor { background: var(--accent); opacity: 0.5; }
.cm-fat-cursor-mark { background: var(--selection); }
.CodeMirror-dialog { background: var(--panel); color: var(--text); }
.CodeMirror-dialog-top { border-bottom-color: var(--border); }
.CodeMirror-dialog-bottom { border-top-color: var(--border); }
.CodeMirror-matchingbracket { color: var(--accent) !important; font-weight: 700; }
.cm-s-default .cm-keyword { color: var(--tok-keyword); }
.cm-s-default .cm-atom { color: var(--tok-atom); }
.cm-s-default .cm-number { color: var(--tok-number); }
.cm-s-default .cm-string, .cm-s-default .cm-string-2 { color: var(--tok-string); }
.cm-s-default .cm-comment { color: var(--tok-comment); font-style: italic; }
.cm-s-default .cm-builtin { color: var(--tok-builtin); }
.cm-s-default .cm-bracket { color: var(--tok-bracket); }
.cm-s-default .cm-variable, .cm-s-default .cm-def, .cm-s-default .cm-tag { color: var(--text); }
.cm-s-default .cm-meta { color: var(--muted); }

.line-flash { background: var(--selection); }
.text-flash { background: var(--selection); }
.line-error { background: var(--error-bg); }

/* Results shown at the end of each form's last line. */
.inline-result {
  margin-left: 1.5em;
  color: var(--muted);
  font-style: italic;
  white-space: pre;
}
.inline-result.error { color: var(--error); }

#output {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px 0;
  font: 13px/1.5 var(--mono);
}

.entry {
  display: flex;
  gap: 10px;
  padding: 2px 12px;
}

.entry .where {
  flex: none;
  min-width: 3.5em;
  color: var(--muted);
  text-align: right;
  cursor: pointer;
  user-select: none;
}

.entry .where:hover { color: var(--accent); }
.entry .body { white-space: pre-wrap; word-break: break-word; min-width: 0; }
.entry.value .body { color: var(--value); }
.entry.error { background: var(--error-bg); }
.entry.error .body { color: var(--error); }
.entry.out .body { color: var(--text); }
.entry.note .body { color: var(--muted); font-style: italic; font-family: var(--sans); }
.entry.input .where { cursor: default; color: var(--accent); }
.entry.input .where:hover { color: var(--accent); }
.entry.input .body { color: var(--text); }

/* The REPL page's input, under its output. */
button.link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
}
button.link:hover { color: var(--accent); }

.repl-input {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  font: 13px/1.5 var(--mono);
}

.repl-input .prompt {
  flex: none;
  padding-top: 4px;
  color: var(--accent);
  user-select: none;
}

#input {
  flex: 1;
  min-width: 0;
}

#input .CodeMirror, #input textarea {
  height: auto;
  max-height: 40vh;
  width: 100%;
  font: 13px/1.5 var(--mono);
  background: var(--panel);
  color: var(--text);
}

#input .CodeMirror-scroll { max-height: 40vh; }
#input .CodeMirror-placeholder { color: var(--muted); }

#input textarea {
  border: 0;
  padding: 4px 0;
  resize: vertical;
  outline: none;
}

.empty {
  padding: 16px;
  color: var(--muted);
  font-family: var(--sans);
}

@media (max-width: 760px) {
  main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(260px, 3fr) minmax(200px, 2fr);
  }
  .pane-head .hint:not(#status, #clear, #format) { display: none; }
  kbd { display: none; }
}