:root { color-scheme: dark; --bg: #000; --fg: #e6e6e6; --dim: #8a8a8a; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 14px/1.4 "Maple Mono NF CN", "SF Mono", ui-monospace, Menlo, monospace; }
[hidden] { display: none !important; }
main { height: 100%; display: grid; place-content: center; gap: 16px; justify-items: center; padding: 0 16px; }
#to { margin: 0; color: var(--dim); min-height: 1.4em; }
/* Like the links on zyx.tw: underlined text, inverted only on hover. */
#go { font: inherit; font-size: 16px; color: var(--fg); background: none; border: 0; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dim) 60%, transparent); text-underline-offset: 4px; }
#go:hover:not(:disabled), #go:focus-visible { color: var(--bg); background: var(--fg); text-decoration: none; outline: none; }
#go:disabled { opacity: 0.5; cursor: default; }
#msg { margin: 0; min-height: 1.4em; color: var(--dim); }