:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #d4d4d4; background: #1e1e1e; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
[hidden] { display: none !important; }
main { position: absolute; inset: 0; }
#preview { overflow: hidden; user-select: none; -webkit-user-select: none; pointer-events: none; }
#code { margin: 0; padding: 12px; font: 10px/1.6 Consolas, "Courier New", monospace; white-space: pre; tab-size: 2; }
#message { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #292929; font-size: 12px; border-top: 1px solid #484848; }
#status { flex: 1 1 160px; overflow-wrap: anywhere; }
button { font: inherit; color: #eee; background: #3c3c3c; border: 1px solid #666; border-radius: 3px; padding: 4px 8px; cursor: pointer; }
button:focus-visible { outline: 2px solid #75beff; }
.hljs-comment, .hljs-quote { color: #6a9955; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #569cd6; }
.hljs-string, .hljs-regexp, .hljs-attribute { color: #ce9178; }
.hljs-number { color: #b5cea8; }
.hljs-title, .hljs-title.function_ { color: #dcdcaa; }
.hljs-type, .hljs-built_in, .hljs-title.class_ { color: #4ec9b0; }
.hljs-property, .hljs-variable, .hljs-attr { color: #9cdcfe; }
.hljs-meta, .hljs-tag, .hljs-name { color: #c586c0; }