/* Not Moogle Docs: page-scoped styles (carousel sizing, app-routes flow, roles diagram). Calm, no frames. */
body.pc-not-moogle-docs { --pc-accent:#8fa9f5; }
html[data-theme="light"] body.pc-not-moogle-docs { --pc-accent:#2f55c4; }

/* Screenshots carousel: a bit taller in the wide block */
body.pc-not-moogle-docs .nmd-shots .pc-carousel { margin-top: 0; }
body.pc-not-moogle-docs .nmd-shots .pc-track { height: clamp(240px, 52vw, 540px); }

/* App routes: four steps, accent arrows, no boxes */
body.pc-not-moogle-docs .nmd-flow {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px;
}
body.pc-not-moogle-docs .nmd-flow li {
  position: relative; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--pc-line); min-width: 0;
}
body.pc-not-moogle-docs .nmd-flow li:not(:last-child)::after {
  content: "\2192"; position: absolute; right: -22px; top: 8px;
  color: var(--pc-accent); font: 400 16px/1.4 'DM Sans', system-ui, sans-serif;
}
body.pc-not-moogle-docs .nmd-flow strong { display: block; font: 600 15px/1.4 'DM Sans', system-ui, sans-serif; color: var(--pc-text); }
body.pc-not-moogle-docs .nmd-flow span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--pc-muted); }
body.pc-not-moogle-docs .nmd-flow span::before { content: "\2192\00a0"; color: var(--pc-accent); }

/* Roles diagram: text nodes and accent connectors, readable in both themes */
body.pc-not-moogle-docs .nmd-roles { margin: 8px 0 14px; }
body.pc-not-moogle-docs .nmd-roles svg { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
body.pc-not-moogle-docs .nmd-r-node text { fill: var(--pc-text); font: 600 15px 'DM Sans', system-ui, sans-serif; }
body.pc-not-moogle-docs .nmd-r-lbl text { fill: var(--pc-muted); font: 400 12.5px 'DM Mono', ui-monospace, monospace; }
body.pc-not-moogle-docs .nmd-r-arr { fill: none; stroke: var(--pc-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.pc-not-moogle-docs .nmd-r-bar { fill: none; stroke: var(--pc-accent); stroke-width: 2; stroke-linecap: round; }

@media (max-width: 599px) {
  body.pc-not-moogle-docs .nmd-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.pc-not-moogle-docs .nmd-flow li { padding: 8px 0 10px; display: flex; gap: 10px; align-items: baseline; }
  body.pc-not-moogle-docs .nmd-flow li:not(:last-child)::after { content: none; }
  body.pc-not-moogle-docs .nmd-flow strong { flex: 0 0 5.5em; }
  body.pc-not-moogle-docs .nmd-flow span { margin: 0; }
}