:root { color-scheme: light; --ink:#141821; --muted:#636b7c; --line:#e6e9ef; --input:#858d9e; --blue:#3369ff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:"IBM Plex Sans","PingFang SC","HarmonyOS Sans SC",MiSans,"Microsoft YaHei","Noto Sans CJK SC",sans-serif; font-size:16px; line-height:1.75; line-break:strict; text-wrap:pretty; }
.container { width:min(100%,800px); margin:0 auto; padding:0 20px; }
header { border-bottom:1px solid var(--line); }
header .container { display:flex; align-items:center; min-height:64px; }
header a { font-weight:600; }
main.container { padding-top:40px; padding-bottom:48px; }
h1 { font-size:26px; line-height:1.3; margin:0 0 20px; text-wrap:balance; }
h2 { font-size:18px; line-height:1.5; margin:0 0 20px; }
p { margin:0 0 16px; overflow-wrap:anywhere; }
.lead { font-size:16px; color:#4a5263; }
section { border-top:1px solid var(--line); padding:24px 0; margin-top:24px; }
label { display:block; margin:16px 0 8px; font-weight:500; }
label span,.muted { color:var(--muted); }
.muted { font-size:13px; line-height:1.6; }
textarea,select { display:block; width:100%; min-width:0; border:1px solid var(--input); border-radius:8px; padding:12px 14px; background:#fff; color:var(--ink); font:inherit; font-size:16px; }
textarea { resize:vertical; min-height:160px; overflow-wrap:anywhere; }
select { min-height:48px; margin-bottom:12px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 16px; }
button { min-height:44px; padding:12px 16px; border:1px solid transparent; border-radius:8px; font:inherit; font-weight:500; line-height:1.2; color:#fff; background:var(--blue); cursor:pointer; }
button:hover { background:#2454e0; }
button.secondary { color:var(--ink); background:#fff; border-color:var(--input); }
button.secondary:hover { background:#f6f7f9; }
button:disabled { color:var(--muted); background:#eef0f4; border-color:transparent; cursor:default; }
a { color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-color:#cfd5df; }
a:hover { text-decoration-color:var(--ink); }
:is(button,a,textarea,select):focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
#tool-status[data-error="true"] { color:#d92d20; }
footer { background:#f6f7f9; padding:24px 0; color:var(--muted); font-size:13px; }
[hidden] { display:none !important; }
@media(min-width:1024px) { h1 { font-size:36px; } .lead { font-size:19px; } main.container { padding-top:48px; } }