:root {
  --bg: #fafaf9; --fg: #1c1917; --muted: #78716c; --line: #e7e5e4; --panel: #fff;
  --error: #b91c1c; --error-bg: #fee2e2; --warning: #b45309; --warning-bg: #fef3c7; --ok: #15803d;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --size: 14px; --lh: 20px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09; --fg: #e7e5e4; --muted: #a8a29e; --line: #292524; --panel: #1c1917;
    --error: #f87171; --error-bg: #450a0a; --warning: #fbbf24; --warning-bg: #422006; --ok: #4ade80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
h1 { margin: 0; font-size: 1.5rem; }
header p { margin: 0; color: var(--muted); }
header a { color: inherit; }
.bar { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; }
select { font: inherit; padding: 4px 8px; border: 1px solid var(--muted); border-radius: 6px; background: var(--panel); color: var(--fg); }
#status { margin-left: auto; font-size: .9rem; color: var(--muted); }
#status.ok { color: var(--ok); }
#status.bad { color: var(--error); }
.editor { position: relative; display: flex; height: 50vh; min-height: 240px; border: 1px solid var(--muted); border-radius: 8px; background: var(--panel); overflow: hidden; }
.editor:focus-within { outline: 2px solid var(--muted); outline-offset: -1px; }
.gutter, .layer, textarea { margin: 0; padding: 8px; font: var(--size)/var(--lh) var(--mono); white-space: pre; tab-size: 4; }
.gutter { flex: none; min-width: 4.5em; text-align: right; color: var(--muted); border-right: 1px solid var(--line); overflow: hidden; user-select: none; }
.text { position: relative; flex: 1; min-width: 0; }
.layer, textarea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: auto; }
/* Room for the textarea's scrollbar, so the layers scroll as far as it does. */
.layer, .gutter { padding-bottom: 40px; }
.layer { color: transparent; pointer-events: none; overflow: hidden; }
.layer div, .gutter div { min-height: var(--lh); }
.layer .error, .gutter .error { background: var(--error-bg); }
.layer .warning, .gutter .warning { background: var(--warning-bg); }
.gutter .error { color: var(--error); }
.gutter .warning { color: var(--warning); }
textarea { border: 0; resize: none; background: transparent; color: var(--fg); outline: none; }
ol { list-style: none; margin: 12px 0 0; padding: 0; }
.more { padding: 8px 12px; color: var(--muted); font-size: .95rem; }
li button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; gap: 2px 12px; width: 100%; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .95rem; }
li button:hover, li button:focus-visible { background: var(--panel); }
li button:focus-visible { outline: 2px solid var(--muted); }
.at { font-family: var(--mono); color: var(--muted); }
.rule { font-family: var(--mono); }
.rule.error { color: var(--error); }
.rule.warning { color: var(--warning); }
.path { grid-column: 3; font-family: var(--mono); color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* 16px, or iOS zooms in when the text area gets focus. */
  :root { --size: 16px; --lh: 22px; }
  li button { grid-template-columns: auto 1fr; }
  .msg, .path { grid-column: 1 / -1; }
}
footer { margin-top: 24px; font-size: .85rem; color: var(--muted); }
footer a { color: inherit; }
noscript p { max-width: 960px; margin: 0 auto; padding: 0 16px 24px; color: var(--error); }