:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c232c;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: #30363d;
  --accent: #79c0ff;
  --green: #3fb950;
  --yellow: #d29922;
  --red: #f85149;
  --purple: #d2a8ff;
  --orange: #ffa657;
  --pink: #ff7b72;
  --cyan: #56d4dd;
}
html, body { background: var(--bg); color: var(--ink); margin: 0; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 28px 96px;
}
h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 20px; margin: 56px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
h3 { font-size: 14px; margin: 22px 0 6px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
p.lead { color: var(--muted); margin-top: 2px; }
code { font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--panel-2); padding: 1px 5px; border-radius: 3px; color: var(--cyan); }
a { color: var(--accent); }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.nav { display: flex; gap: 8px 14px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; margin: 16px 0 8px; font-size: 13px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin: 12px 0 24px; }
.callout { background: var(--panel-2); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 12px 0; border-radius: 4px; font-size: 14px; }
.callout.warn { border-left-color: var(--yellow); }
.callout.note { border-left-color: var(--purple); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.legend span.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; vertical-align: middle; margin-left: 6px; font-weight: 600; }
.b-done { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.4); }
.b-prog { background: rgba(210,153,34,0.15); color: var(--yellow); border: 1px solid rgba(210,153,34,0.4); }
.b-defer { background: rgba(139,148,158,0.15); color: var(--muted); border: 1px solid var(--line); }
.b-todo { background: rgba(248,81,73,0.12); color: var(--red); border: 1px solid rgba(248,81,73,0.4); }
svg { display: block; max-width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
svg text { font: 13px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--ink); }
svg .lbl { font: 12px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--muted); }
svg .mono { font: 12px ui-monospace, "SF Mono", Menlo, monospace; fill: var(--cyan); }
svg .title { font: bold 14px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--ink); }
svg .small { font: 11px -apple-system, BlinkMacSystemFont, sans-serif; fill: var(--muted); }
svg rect.box { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
svg rect.http { fill: #1c2a3a; stroke: var(--accent); }
svg rect.sched { fill: #2a1f3a; stroke: var(--purple); }
svg rect.backend { fill: #2a2418; stroke: var(--orange); }
svg rect.cache { fill: #1c2a25; stroke: var(--green); }
svg rect.queue { fill: #2a1c1c; stroke: var(--pink); }
svg a:hover rect { stroke-width: 2.2; filter: brightness(1.25); }
svg a { cursor: pointer; }
svg path.flow { fill: none; stroke: var(--muted); stroke-width: 1.4; marker-end: url(#arrow); }
svg path.flow-strong { fill: none; stroke: var(--accent); stroke-width: 2; marker-end: url(#arrow-blue); }
svg path.flow-cache { fill: none; stroke: var(--green); stroke-width: 1.6; marker-end: url(#arrow-green); }
svg path.flow-evict { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 4 3; marker-end: url(#arrow-red); }
svg path.flow-loop { fill: none; stroke: var(--yellow); stroke-width: 1.6; stroke-dasharray: 5 3; marker-end: url(#arrow-yellow); }
table { border-collapse: collapse; margin: 8px 0 0; font-size: 13px; width: 100%; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td code { font-size: 12px; }
.footnote { color: var(--muted); font-size: 12px; margin-top: 6px; }
.click-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; font-style: italic; }