:root {
	--ground: #fbfaf7;
	--panel: #ffffff;
	--ink: #1d1d1f;
	--muted: #6b6b70;
	--line: #e3e1db;
	--accent: #c47f00;
	--error: #c0362c;
	--warning: #a35f00;
	--hint: #0b7a75;
	--keyword: #7b3fbf;
	--code-ground: #f2f0ea;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ground: #17171a;
		--panel: #1f1f23;
		--ink: #e8e6e1;
		--muted: #9a9aa2;
		--line: #34343a;
		--accent: #f2b33d;
		--error: #ff7b6e;
		--warning: #f0a54a;
		--hint: #4fd1c5;
		--keyword: #c49bff;
		--code-ground: #2a2a30;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 16px 24px;
	background: var(--ground);
	color: var(--ink);
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: 12px; }
h1 { margin: 0; font-size: 1.5rem; }
h1 span { color: var(--accent); font-weight: 500; }
.tagline { margin: 0; color: var(--muted); flex: 1; }
.source { color: var(--muted); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; }
.status { color: var(--muted); font-size: 0.9em; margin-left: auto; }
.status.failed { color: var(--error); }

button, select {
	font: inherit;
	color: inherit;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 3px 10px;
	cursor: pointer;
}
button:hover { border-color: var(--accent); }
#run { background: var(--accent); border-color: var(--accent); color: #1d1d1f; font-weight: 600; }

main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 800px) { main { grid-template-columns: minmax(0, 1fr); } }

.editor-pane, .output-pane { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-height: 60vh; }
.editor-pane { overflow: hidden; }
.CodeMirror { height: 100%; min-height: 60vh; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--panel); color: var(--ink); }
.CodeMirror-gutters { background: var(--panel); border-right: 1px solid var(--line); }
.CodeMirror-cursor { border-left-color: var(--ink); }
.cm-s-default .cm-comment { color: var(--muted); }
.cm-s-default .cm-string { color: #2f8a3d; }
.cm-s-default .cm-number, .cm-s-default .cm-atom { color: #b5590a; }
.cm-s-default .cm-keyword { color: var(--keyword); }
.cm-s-default .cm-type { color: var(--hint); }
@media (prefers-color-scheme: dark) { .cm-s-default .cm-string { color: #8bd17c; } .cm-s-default .cm-number, .cm-s-default .cm-atom { color: #f0a54a; } .cm-s-default .cm-variable { color: var(--ink); } }

.output-pane { padding: 12px 14px; overflow-x: auto; }
code, .result, .printed { font-family: ui-monospace, Menlo, Consolas, monospace; }
code { background: var(--code-ground); padding: 0 4px; border-radius: 4px; }

.result { font-size: 1.15em; white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--muted); }
output.error { color: var(--error); }
.printed { margin: 10px 0 0; padding: 8px 10px; background: var(--code-ground); border-radius: 6px; white-space: pre-wrap; max-height: 40vh; overflow: auto; }

.diagnostics { list-style: none; padding: 0; margin: 12px 0 0; }
.diagnostics li { padding: 6px 0; border-top: 1px solid var(--line); }
.label { display: inline-block; min-width: 4.5em; font-weight: 600; text-transform: lowercase; }
.position { color: var(--muted); margin-right: 8px; font-size: 0.9em; }
.warning .label { color: var(--warning); }
.hint .label { color: var(--hint); }
.note .label { color: var(--hint); }
.reason, .fix { display: block; color: var(--muted); padding-left: 4.5em; }

.silenced { margin-top: 16px; color: var(--muted); }
.silenced ul { padding-left: 1.2em; }
.forget { font-size: 0.85em; padding: 0 6px; margin-left: 6px; }
main.single { grid-template-columns: minmax(0, 1fr); }