/* RoundRoBin guide page. Same design tokens as the tool page (index.html),
   kept in a separate file so the guide can be cached and read on its own. */
:root {
  --ink: #171a1f; --card: #fff; --bg: #eef0f3; --line: #d5dae0;
  --accent: #0a7d4f; --accent2: #06c; --muted: #666e7a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 14px 60px; }
header { margin-bottom: 14px; }
header h1 { font-size: 20px; margin: 0; }
header p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.card h2 { font-size: 15.5px; margin: 0 0 8px; letter-spacing: .2px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
ol, ul { margin: 0; padding-left: 22px; }
li { margin: 7px 0; }
b { color: var(--ink); }
a { color: var(--accent2); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.note { color: #333a44; font-size: 14.5px; }
footer { margin-top: 20px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }
footer a { color: var(--muted); }
@media print {
  body { background: #fff; }
  .card { border: 0; padding: 0 0 10px; }
  footer { display: block; font-size: 10px; }
}