:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#fafafa; --muted:#666; --line:#ddd; --acc:#2b6cb0; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e8; --bg:#161616; --muted:#999; --line:#333; --acc:#63b3ed; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
h1 { font-size: 1.45rem; margin: 0 0 .3rem; }
.sub { color: var(--muted); margin: 0 0 2rem; font-size: .9rem; }
label { display:block; margin: 0 0 1rem; font-size: .82rem; color: var(--muted); }
input { display:block; width:100%; margin-top:.35rem; padding:.6rem .7rem; font-size:.95rem;
  color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:8px; }
input:focus { outline:2px solid var(--acc); outline-offset:-1px; border-color:transparent; }
details { margin: 0 0 1.4rem; padding: .8rem 1rem 0; border:1px solid var(--line); border-radius:8px; }
summary { cursor:pointer; font-size:.85rem; color:var(--muted); margin-bottom:.9rem; }
button { padding:.65rem 1.3rem; margin-right:.6rem; font-size:.92rem; font-weight:500;
  color:#fff; background:var(--acc); border:0; border-radius:8px; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
#dl { background:#2f855a; }
#bar { height:4px; margin:1.4rem 0 .6rem; background:var(--line); border-radius:2px; overflow:hidden; }
#barfill { height:100%; width:0; background:var(--acc); transition:width .25s; }
pre { margin:1rem 0 0; padding:1rem; max-height:420px; overflow:auto; font-size:.78rem; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; background:rgba(128,128,128,.09);
  border:1px solid var(--line); border-radius:8px; }
#preview { font-size:.85rem; max-height:520px; }

/* 字段下方的说明文字 */
.hint { font-size: .78rem; color: var(--muted); margin: -.4rem 0 1rem; }