:root{
  --accent:#2fbf63; --ink:#111; --muted:#666; --line:#e6e6e6;
  --ring:rgba(47,191,99,.35); --bg:#fff; --bg-soft:#fafafa;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eee; --muted:#aaa; --line:#2b2b2b; --bg:#121212; --bg-soft:#1a1a1a; }
}
.manual-topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.1) blur(6px);
}
.manual-topbar .breadcrumbs{
  margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; min-width:0;
  color:var(--muted);
}
.manual-topbar .breadcrumbs li+li::before{ content:"›"; margin:0 6px; color:var(--muted); }
.manual-topbar .breadcrumbs a{ color:var(--ink); text-decoration:none; }
.manual-topbar .breadcrumbs a:hover{ text-decoration:underline; }
.manual-topbar .breadcrumbs [aria-current="page"]{ color:var(--ink); font-weight:600; }
.manual-topbar .pager{ margin-left:auto; display:flex; gap:8px; }
.manual-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--ink); background:var(--bg);
}
.manual-btn:hover{ border-color:#ccc; }
.manual-btn:focus{ outline:2px solid var(--ring); outline-offset:2px; }
/* Wider content on desktop */
.manual-body {
  width: 100%;         /* Fill full width of viewport */
  max-width: none;     /* Remove width cap */
  margin: 0;           /* No centering margins */
  padding: 24px 16px;  /* Some breathing room around content */
  box-sizing: border-box; /* Include padding in width calculation */
}


.callout{ margin:16px 0; padding:12px 14px; border-left:3px solid var(--accent); background:var(--bg-soft); }
@media (max-width:720px){
  .manual-topbar{ align-items:flex-start; }
  .manual-topbar .pager{ width:100%; justify-content:space-between; }
}
@media print{ .manual-topbar{ display:none; } .manual-body{ max-width:none; } }