:root{--bg:#0b0b0c;--card:#141416;--fg:#f2f2f2;--muted:#9a9aa0;--line:#26262a;--ok:#5ee37a;--bad:#ff6b6b;--accent:#fff}
@media (prefers-color-scheme:light){:root{--bg:#f6f6f7;--card:#fff;--fg:#111;--muted:#666;--line:#e3e3e6;--accent:#111}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;justify-content:center;padding:24px 16px}
.card{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px}
.brand{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:.02em}
h1{font-size:26px;margin:12px 0 4px}
h2{font-size:17px;margin:28px 0 6px}
p{margin:6px 0}
.muted{color:var(--muted);font-size:14px}
.tick{color:var(--ok);letter-spacing:-.1em}
.tick.t3{color:var(--ok)}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:18px 0;font-size:15px}
dt{color:var(--muted)}dd{margin:0;word-break:break-all}
code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
code.hash{font-size:12px}
textarea{width:100%;resize:vertical;min-height:130px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:16px/1.5 inherit;outline:none}
textarea:focus{border-color:var(--muted)}
button{appearance:none;border:0;border-radius:12px;padding:14px 18px;font:600 16px system-ui,sans-serif;cursor:pointer;background:var(--accent);color:var(--bg);width:100%;margin-top:12px}
button.secondary{background:transparent;color:var(--fg);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px}.row button{margin-top:10px}
.result{margin-top:12px;padding:12px 14px;border-radius:10px;font-weight:600}
.result.ok{background:rgba(94,227,122,.12);color:var(--ok)}
.result.bad{background:rgba(255,107,107,.12);color:var(--bad)}
.out{margin-top:16px;padding:14px;border:1px dashed var(--line);border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:15px}
.token{color:var(--ok);font-weight:700}
details{margin-top:24px}summary{cursor:pointer;color:var(--muted)}
pre{font-size:11px;overflow:auto;background:var(--bg);padding:12px;border-radius:10px;border:1px solid var(--line)}
footer{margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
a{color:inherit}
.err{color:var(--bad);font-size:14px;margin-top:10px}
.hidden{display:none}