: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}
.row{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.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)}