:root { --bg:#fff; --fg:#1b1f24; --mut:#5b6672; --line:#d0d7de; --acc:#1f5fbf; --bad:#b42318; --ok:#1a7f37; }
@media (prefers-color-scheme: dark) { :root { --bg:#12161b; --fg:#e6edf3; --mut:#9aa7b4; --line:#2d353e; --acc:#6aa6ff; --bad:#ff8a80; --ok:#56d364; } }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }
header, main { max-width:42rem; margin:0 auto; padding:0 16px; }
header { padding-top:24px; }
a { color:var(--acc); }
label { display:block; margin:12px 0; }
input:not([type=radio]), textarea { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:8px; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:6px; }
fieldset { border:1px solid var(--line); border-radius:6px; } fieldset label { display:inline-block; margin:4px 12px 4px 0; }
button { font:inherit; padding:8px 16px; border-radius:6px; border:1px solid var(--acc); background:var(--acc); color:var(--bg); cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.hp { position:absolute; left:-9999px; }
.small { color:var(--mut); font-size:.875rem; }
.ok { color:var(--ok); } .bad { color:var(--bad); }
.tag { margin-left:8px; padding:0 8px; border:1px solid var(--line); border-radius:10px; font-size:.8rem; color:var(--mut); }
ul#list { list-style:none; padding:0; } ul#list li { border-top:1px solid var(--line); padding:12px 0; }