:root { color-scheme: light dark; --bg: #fff; --fg: #222; --sub: #666; --line: #ccc; --ok: #1a7f37; --bad: #c62828; --box: #fff8e1; --boxline: #c9a227; }
@media (prefers-color-scheme: dark) { :root { --bg: #18181b; --fg: #eee; --sub: #aaa; --line: #555; --ok: #6fd18a; --bad: #ff8a80; --box: #3a3218; --boxline: #b08d1e; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif; line-height: 1.6; }
main { max-width: 36rem; margin: 0 auto; padding: 1.2rem 16px 3rem; }
h1 { font-size: 1.4rem; } h1 small { font-size: .7em; color: var(--sub); }
form label { display: block; margin: 1rem 0; font-weight: 600; }
input { display: block; width: 100%; margin-top: .3rem; padding: .5rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.slugrow { display: flex; align-items: center; gap: .3rem; }
.slugrow input { flex: 1; min-width: 0; }
.suffix { color: var(--sub); white-space: nowrap; font-weight: 400; }
.msg { display: block; font-weight: 400; font-size: .9rem; min-height: 1.4em; }
.msg.ok { color: var(--ok); } .msg.bad, .err { color: var(--bad); }
button { padding: .55rem 1.2rem; font-size: 1rem; border-radius: 6px; border: 1px solid var(--line); background: var(--fg); color: var(--bg); cursor: pointer; }
button:disabled { opacity: .5; }
.keybox { padding: .8rem; border: 2px solid var(--boxline); border-radius: 8px; background: var(--box); }
.keybox input { font-family: monospace; margin-bottom: .5rem; }
a { color: inherit; word-break: break-all; }
.lead { font-size: 1.1rem; margin: -.4rem 0 .6rem; }