:root { color-scheme: light dark; --fg: #1f2328; --bg: #ffffff; --muted: #59636e; --good: #1a7f37; --bad: #cf222e; --line: #d1d9e0; }
@media (prefers-color-scheme: dark) { :root { --fg: #f0f6fc; --bg: #0d1117; --muted: #9198a1; --good: #3fb950; --bad: #f85149; --line: #3d444d; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", "Sarabun", sans-serif; }
main { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
form { display: grid; gap: 0.5rem; margin: 1.5rem 0; }
label { font-weight: 600; margin-top: 0.5rem; }
input[type=text] { font: 0.9rem ui-monospace, monospace; padding: 0.5rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; width: 100%; }
button { justify-self: start; margin-top: 0.75rem; padding: 0.5rem 1.25rem; border: 0; border-radius: 6px; background: var(--fg); color: var(--bg); font-weight: 600; cursor: pointer; }
#result { border-left: 4px solid transparent; padding: 0 1rem; overflow-wrap: anywhere; }
#result.good { border-color: var(--good); }
#result.bad { border-color: var(--bad); color: var(--bad); }
.headline { font-weight: 700; }
.small { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
code { font-family: ui-monospace, monospace; font-size: 0.9em; }