/* Shared styling for the conversion guide pages. Keeps each new landing page to
   content only, so adding a format pair costs a few hundred bytes instead of a
   copied stylesheet. */
:root {
  --bg:#fff; --fg:#16181d; --muted:#5b6370; --line:#e6e8ec;
  --accent:#2b62ff; --pill:#eef1f6; --code-bg:#0f1220; --code-fg:#e7e9f0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d0f14; --fg:#e9ebef; --muted:#9aa2af; --line:#232733;
    --accent:#6f92ff; --pill:#1a1e28; --code-bg:#05060a;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap { max-width:780px; margin:0 auto; padding:40px 22px 80px; }
.logo { display:block; width:150px; height:auto; margin-bottom:18px; }
@media (prefers-color-scheme: dark) { .logo { filter:invert(1); } }
header { border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:28px; }
h1 { font-size:28px; margin:0 0 8px; letter-spacing:-0.02em; }
h2 { font-size:19px; margin:34px 0 10px; }
.lead { color:var(--muted); margin:0; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code {
  background:var(--pill); padding:1px 6px; border-radius:5px; font-size:0.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
pre {
  background:var(--code-bg); color:var(--code-fg); border-radius:10px;
  padding:16px 18px; overflow-x:auto; font-size:13.5px; line-height:1.55;
}
pre code { background:none; padding:0; color:inherit; }
ul { padding-left:22px; } li { margin:6px 0; }
table { border-collapse:collapse; width:100%; font-size:14px; margin-top:8px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.cta {
  display:inline-block; background:var(--accent); color:#fff; padding:10px 18px;
  border-radius:8px; font-weight:600; margin-top:6px;
}
.cta:hover { text-decoration:none; opacity:.9; }
.related a, .grid a {
  display:inline-block; background:var(--pill); padding:5px 11px;
  border-radius:20px; margin:4px 6px 0 0; font-size:14px;
}
footer { margin-top:56px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
footer nav a { margin-right:14px; display:inline-block; }