:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, sans-serif; background: #111827; color: #e5e7eb; }
body { margin: 0; } main { max-width: 960px; margin: 0 auto; padding: 3rem 1.25rem; } header { margin-bottom: 2rem; } h1 { margin-bottom: .25rem; } h2 { margin: 0; } p { color: #cbd5e1; } section { display: grid; gap: 1rem; } section[hidden] { display: none; } label { display: grid; gap: .4rem; font-weight: 600; } label.check { display: flex; align-items: center; font-weight: 400; } label.check input { width: auto; } input, select, textarea, button { font: inherit; border-radius: .4rem; border: 1px solid #475569; padding: .7rem; } textarea { min-height: 13rem; resize: vertical; font-family: ui-monospace, monospace; line-height: 1.45; } button { background: #38bdf8; color: #082f49; font-weight: 700; cursor: pointer; } button.secondary { background: #cbd5e1; } .buttons { display: flex; gap: .8rem; flex-wrap: wrap; } .status, .rules-intro, .preview, details { padding: .9rem; background: #1e293b; border-radius: .4rem; } .rules-intro, .preview { display: grid; gap: .7rem; } .rules-intro p { margin: 0; } pre { margin: 0; padding: .8rem; border: 1px solid #475569; border-radius: .4rem; white-space: pre-wrap; font-family: ui-monospace, monospace; } summary { cursor: pointer; font-weight: 700; } .error { color: #fca5a5; } .note { margin: 0; font-size: .92rem; color: #94a3b8; }