@import url("/assets/fonts/fonts.css");
:root{--bg:#F6F4EF;--ink:#111827;--mute:#5B6170;--line:#E3DFD5;--card:#fff;--acc:#111827;--ok:#15803d;--bad:#b91c1c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0D1117;--ink:#EDEFF3;--mute:#9AA3B2;--line:#232A35;--card:#151B24;--acc:#F59E0B;--ok:#4ade80;--bad:#f87171}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "DM Sans",system-ui,sans-serif}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}nav{display:flex;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
nav b{font:800 21px "Bricolage Grotesque",sans-serif}nav .sp{flex:1}nav a{color:var(--mute);text-decoration:none;font-size:15px}
h1{font:800 clamp(32px,5vw,46px)/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-1px;margin:40px 0 8px}h2{font:700 24px "Bricolage Grotesque",sans-serif;margin:36px 0 10px}
.mute{color:var(--mute)}li{margin:6px 0}
.tool{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;margin:30px 0}
input{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:11px}label{display:block;font-weight:600;margin-bottom:6px}
.btn{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:600 16px inherit;cursor:pointer}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#111}}
.form-msg{margin-top:10px;font-weight:600}.form-msg.ok{color:var(--ok)}.form-msg.bad{color:var(--bad)}
footer{margin:50px 0 30px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}