*{box-sizing:border-box}
:root{--ink:#16181d;--muted:#5b6170;--line:#e3e6ec;--brand:#d93025;--bg:#f6f7f9}
body{margin:0;font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:#0b57d0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef0f4;padding:1px 6px;border-radius:5px;font-size:.92em}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo{background:var(--brand);color:#fff;font-size:.7rem;padding:4px 6px;border-radius:5px;letter-spacing:.04em}
.top nav a{margin-left:14px;text-decoration:none;font-size:.95rem}
main{max-width:1040px;margin:0 auto;padding:12px 20px 48px}
.hero{text-align:center;padding:28px 0 10px}
.eyebrow{color:var(--brand);font-weight:600;margin:0}
h1{font-size:2.1rem;line-height:1.25;margin:.3em 0}
h1 code{font-size:.9em;background:#fde8e6;color:#a1271c}
.lead{max-width:760px;margin:0 auto;color:#333}
h2{font-size:1.45rem;margin-top:2em}
h3{font-size:1.08rem;margin-bottom:.2em}
section>p,section>ul,section>ol,#faq p{max-width:820px}
.tool{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:22px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.tool-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.tabs{display:flex;gap:6px}
.tab{border:1px solid var(--line);background:#fff;padding:6px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:.92rem}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.opts{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.opts select,.opts input{font:inherit;font-size:.9rem;padding:4px 6px;border:1px solid var(--line);border-radius:6px;margin-left:4px}
.opts input{width:130px}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
textarea{width:100%;min-height:380px;resize:vertical;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfbfc}
.doc{min-height:380px;max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:18px 22px;background:#fff;font-size:15px}
.doc table{border-collapse:collapse;width:100%;margin:10px 0}
.doc th,.doc td{border:1px solid #cfd4dc;padding:6px 8px;text-align:left}
.doc th{background:#f1f3f6}
.doc pre{background:#f4f5f7;padding:10px;border-radius:6px;overflow:auto;white-space:pre-wrap}
.doc img{max-width:100%}
.doc.serif{font-family:Georgia,"Times New Roman",serif}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions button{font:inherit;padding:9px 18px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer}
.actions .primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.hint{color:var(--muted);font-size:.88rem}
.steps li{margin-bottom:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.card p{margin:.3em 0 0;font-size:.95rem}
.sr{position:absolute;left:-9999px}
footer{max-width:1040px;margin:0 auto;padding:18px 20px 40px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line)}
article{max-width:780px;margin:0 auto;background:#fff;padding:24px 28px;border-radius:12px;border:1px solid var(--line)}
@media (max-width:760px){.panes{grid-template-columns:1fr}h1{font-size:1.6rem}textarea,.doc{min-height:260px}}
@media print{
  body{background:#fff}
  body>*:not(#print-root){display:none!important}
  #print-root{display:block!important}
}
#print-root{display:none}