:root{--bg:#fff;--fg:#1b1f24;--mut:#5c6670;--line:#d7dce1;--acc:#0b5fff}
@media (prefers-color-scheme:dark){:root{--bg:#14171a;--fg:#e8ebee;--mut:#9aa5b1;--line:#2c333a;--acc:#6ea0ff}}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,"Hiragino Sans","Yu Gothic",sans-serif}
main{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:1.4rem}
label{display:block;font-size:.85rem;color:var(--mut);margin-top:10px}
input,select{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:6px;background:transparent;color:inherit;font:inherit}
.out{margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:8px}
.out strong{font-size:1.25rem}
.note{color:var(--mut);font-size:.85rem}
a{color:var(--acc)}