/* The literal how-it-works flow, in the style of the "How it plugs in" diagram (Allen, Oct 22): your
   agents already write session logs, Powerplant syncs and redacts them, every agent can search them.
   The rf- rules are copied from flows.css on claude/homepage-flows so the live page needs no flows.css. */
.wf-page, .rf-dia, .wf-vars {
  --wf-ink: var(--theme-ink);
  --wf-muted: var(--theme-ink-muted);
  --wf-faint: var(--theme-ink-faint);
  --wf-line: var(--theme-line);
  --wf-fill: color-mix(in srgb, var(--theme-ink) 7%, transparent);
  --wf-fill-strong: color-mix(in srgb, var(--theme-ink) 14%, transparent);
  --wf-card: var(--theme-surface-raised);
  --wf-win: var(--theme-accent);
  --wf-win-soft: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface-raised));
  /* Connectors are traces, not arrows: one stroke at half strength, a brighter pulse travelling
     along it to show direction, and a round pad where it lands. The head vars all draw that pad. */
  --fl-stroke: 2px;
  --fl-c: var(--wf-muted);
  --fl-period: 96px;
  --fl-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1' fill-opacity='.5'/%3E%3C/svg%3E");
  --fl-pulse-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 8' preserveAspectRatio='none'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  --fl-pulse-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 1' preserveAspectRatio='none'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  --fl-head-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  --fl-head-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E");
  --fl-head-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E");
}
.rf-dia { display: grid; gap: 28px; max-width: 960px; margin-top: 8px; padding: 28px 20px; border: 1px solid var(--wf-line); border-radius: 10px; background-color: var(--theme-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23888' fill-opacity='.35'/%3E%3C/svg%3E"); }
.rf-col { display: grid; gap: 12px; justify-items: center; }
.rf-cap { margin: 0; font-size: 13px; color: var(--wf-muted); text-align: center; }
.rf-dia :is(.rf-ins, .rf-outs) { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.rf-ins li, .rf-outs li { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--wf-ink); }
.rf-box { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--wf-line); border-radius: 8px; background: var(--wf-card); color: var(--wf-ink); }
.rf-box-sm { width: 48px; height: 48px; }
/* People, each with their own agent's mark on a badge: the fix reaches teammates, not a list of tools. */
.rf-who { position: relative; display: block; width: 52px; height: 52px; }
.rf-who > img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wf-line); }
.rf-agent { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--wf-line); border-radius: 7px; background: var(--wf-card); }
.rf-outs small { margin-top: -4px; font-size: 11px; color: var(--wf-muted); }
.rf-pp { position: relative; display: grid; gap: 14px; padding: 18px 16px 16px; border: 1.5px solid var(--wf-win); border-radius: 10px; background: var(--wf-card); }
.rf-pp-tag { position: absolute; top: -12px; left: 14px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 8px; border-radius: 6px; background: var(--theme-surface); font: 400 15px/1.2 var(--font-heading); color: var(--wf-ink); }
.rf-pp-row { display: flex; justify-content: center; align-items: flex-start; gap: 36px; }
.rf-node { position: relative; display: grid; justify-items: center; gap: 6px; margin: 0; text-align: center; }
.rf-node figcaption { display: grid; gap: 2px; font-size: 13px; color: var(--wf-ink); }
.rf-node small { font-size: 11px; color: var(--wf-muted); }
.rf-node-on .rf-box { border-color: var(--wf-win); background: var(--wf-win-soft); }
.rf-node + .rf-node::before { content: none; }
/* The line joins the two boxes edge to edge: each node is a fixed width with its 64px box centred,
   so the span is the gap plus the space either side of the boxes. */
.rf-pp-row { --rf-gap: 36px; --rf-node-w: 120px; gap: var(--rf-gap); }
.rf-pp-row .rf-node { width: var(--rf-node-w); }
.rf-node + .rf-node .rf-box::before { content: ""; position: absolute; right: 100%; top: calc(50% - var(--fl-stroke) / 2); width: calc(var(--rf-gap) + var(--rf-node-w) - 64px); height: var(--fl-stroke); background: var(--wf-win); }
/* Phones: dashed drops between the three blocks; from 1120px (where all three fit) they become runs left to right. */
.rf-col, .rf-pp { position: relative; }
.rf-pp::before, .rf-pp::after { content: ""; position: absolute; left: 50%; height: 28px; border-left: 1.5px dashed var(--wf-dots, var(--wf-faint)); }
.rf-pp::before { bottom: 100%; }
.rf-pp::after { top: 100%; }
@media (min-width: 1120px) {
  .rf-dia { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 40px 36px; }
  .rf-dia .rf-ins { flex-direction: column; }
  .rf-dia .rf-outs { flex-direction: column; }
  .rf-pp::before, .rf-pp::after { left: auto; top: 50%; height: 0; width: 48px; border-left: 0; border-top: 1.5px dashed var(--wf-faint); }
  .rf-pp::before { right: 100%; bottom: auto; }
  .rf-pp::after { left: 100%; }
}
.rf-wires { display: none; }
@media (min-width: 1120px) {
  .rf-dia { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 96px; }
  .rf-pp::before, .rf-pp::after { display: none; }
  .rf-dia .rf-ins, .rf-dia .rf-outs { gap: 18px; }
  .rf-wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .rf-wires path { fill: none; stroke: var(--wf-faint); stroke-width: 1.5; stroke-dasharray: 1.5 4; stroke-linecap: round; }
  .rf-wires .rf-wire-in { stroke: var(--wf-win); stroke-dasharray: none; }
  .rf-wires circle, .rf-wires polygon { fill: var(--wf-win); }
  .rf-wires .rf-arrow { stroke: var(--wf-faint); stroke-dasharray: none; }
}
/* The loop inside Powerplant: a rail from the shared setup back to the logo, label above it. */
.rf-pp { position: relative; }
.rf-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rf-loop path { fill: none; stroke: var(--wf-win); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-loop polygon { fill: var(--wf-win); }
.rf-loop-label { margin: 6px 0 0; font-size: 13px; text-align: center; color: var(--wf-muted); }
.rf-pp-row { padding-top: 34px; }
/* Toggles under a diagram: 44px tap targets. */
/* Faces on each input box: whose sessions, memory or skill it is, overlapped like an avatar stack. */
.rf-box { position: relative; }
.rf-faces { position: absolute; right: -10px; bottom: -8px; display: flex; }
.rf-faces img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--theme-surface); }
.rf-faces img + img { margin-left: -8px; }
.wf-page, .wf-vars, .rf-dia { --wf-bad: var(--theme-bad); }
@media (min-width: 1120px) {
  .rf-pp { min-width: 320px; padding: 22px 22px 18px; }
  .rf-pp-row { --rf-gap: 44px; }

}
/* The flow pulse on the plug-in wires: a small glowing dot in the accent. */
.rf-wires .rf-pulse { fill: var(--wf-win); stroke: color-mix(in srgb, var(--wf-win) 35%, transparent); stroke-width: 6; }
.rf-dia ul { margin: 0; padding: 0; list-style: none; }
[data-theme="light"] :is(.rf-agent, .rf-box-sm) img:is([src*="cursor"], [src*="openai"]) { filter: brightness(0.2); }
.rf-dia .rf-wires { z-index: 5; }
.rf-wires circle:not(.rf-pulse) { stroke: var(--theme-surface); stroke-width: 2; }
:root[data-colorway="sage"][data-theme="light"] :is(.wf-page, .wf-vars, .rf-dia) {
  --wf-fill: var(--theme-surface);
  --wf-fill-strong: var(--theme-surface-raised-strong);
}
:root[data-theme="light"] :is(.rf-dia, .rf-pp-tag) { background-color: var(--theme-surface-raised); }

/* How it works (Oct 22): agents and their logs on the left, Powerplant on the right, and a return path
   under it all back to the agents. Phones stack it, with the return path up the right margin. */
.hw2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; justify-items: center; padding: 28px 44px 28px 34px; }
.hw2 > svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hw2 > :not(svg) { position: relative; z-index: 1; }
.hw2 .links path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Solid soft lines, like the tangle above (Jaycee, Oct 26). */
.hw2 .links .l-in { stroke: var(--wf-dots, var(--wf-faint)); stroke-width: 1.5; }
.hw2 .links .l-loop { stroke: var(--wf-win); stroke-width: 2; }
.hw2 .links .l-head { fill: var(--wf-win); stroke: none; }
.hw2 .links .l-pad { fill: var(--wf-win); stroke: var(--wf-card); stroke-width: 2; }
.hw2 > svg.links { z-index: 2; }
.hw2-team { display: grid; gap: 12px; width: 100%; max-width: 360px; }
.hw2-team .rf-cap { text-align: left; }
.hw2-rows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hw2-row { display: grid; grid-template-columns: auto auto minmax(16px, 1fr) auto; align-items: center; gap: 10px; }
.hw2-n { display: grid; gap: 1px; font-size: 14px; font-weight: 500; text-align: left; color: var(--wf-ink); }
.hw2-n small { font-size: 12px; font-weight: 400; color: var(--wf-muted); }
.hw2-dash { height: 0; border-top: 1.5px solid var(--wf-dots, var(--wf-faint)); }
.hw2-log { display: grid; justify-items: center; gap: 4px; width: 76px; }
/* Phones: the logs stack in one column, so one dashed line runs down through them into Powerplant
   instead of three curves crossing each other. */
.hw2-rows { position: relative; }
.hw2-rows::before { content: ""; position: absolute; right: 37px; top: 24px; bottom: -50px; z-index: -1; border-left: 1.5px solid var(--wf-dots, var(--wf-faint)); }
@media (max-width: 899px) { .hw2 .links .l-in { display: none; } }
.hw2-log small { font-size: 11px; color: var(--wf-muted); }
.hw2-pp::before, .hw2-pp::after { display: none; }
.hw2-pp { width: min(100%, 360px); }
.hw2-back { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--wf-card); font-size: 13px; color: var(--wf-ink); }
.hw2-back svg { flex: none; color: var(--wf-muted); }
@media (min-width: 900px) {
  .hw2 { grid-template-columns: minmax(0, 380px) auto; column-gap: clamp(64px, 9vw, 140px); row-gap: 0; justify-content: center; align-items: center; padding: 44px 40px 128px; }
  .hw2 { grid-template-columns: auto auto; }
  .hw2-team { width: auto; max-width: none; }
  .hw2-row { grid-template-columns: auto auto minmax(40px, 1fr) auto; }
  .hw2-rows::before { display: none; }
  .hw2-pp { width: auto; min-width: 320px; padding: 22px 22px 18px; }
  /* The "Session logs" label hangs under its box, so the log is just the box and every line meets
     the box's middle, not the middle of box plus label (Jaycee, Oct 26). */
  .hw2-log { position: relative; }
  .hw2-log small { position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%); white-space: nowrap; }
  .hw2-rows { gap: 40px; }
  .hw2 > .hw2-back { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; }
}
/* Stacked (under 900px): one caption says these are logs, so the per-row labels go and the dashed
   spine down to Powerplant no longer runs through words. */
@media (max-width: 899px) { .hw2-log small { display: none; } .hw2-log { width: auto; } .hw2-rows::before { right: 23px; } }
/* Stacked, the loop back is a short line straight up from Powerplant into Jaycee, so the label moves
   to the middle of the top edge, clear of it and of the logs line (Jaycee, Oct 26). */
@media (max-width: 899px) { .hw2 .rf-pp-tag { left: 50%; transform: translateX(-50%); white-space: nowrap; } }
/* Small phones (under 420px): tighter frame and Powerplant row so both steps fit at 320px. */
@media (max-width: 419px) {
  .hw2 { padding: 24px 28px 24px 14px; }
  .hw2-pp { padding-inline: 12px; }
  .hw2 .rf-pp-row { --rf-gap: 14px; --rf-node-w: min(124px, calc((100vw - 112px) / 2)); }
  .hw2 .rf-pp-row .rf-node figcaption { font-size: 14px; }
}
/* Bigger, and no text under 14px (Jaycee, Oct 26: it read tiny on desktop). Phones get the larger
   type; from 1200px, where it has room, the whole diagram scales up to fill its frame. */
.hw2 .hw2-n { font-size: 16px; }
.hw2 .hw2-n small { font-size: 14px; }
.hw2 .rf-node figcaption { gap: 4px; font-size: 15px; }
.hw2 .rf-node small, .hw2 .hw2-log small { font-size: 14px; }
.hw2 .rf-pp-tag { font-size: 17px; }
.hw2 .hw2-back { font-size: 15px; }
@media (min-width: 1200px) {
  .hw2 { column-gap: clamp(72px, 8vw, 140px); padding: 64px 48px 148px; }
  .hw2-rows { gap: 44px; }
  .hw2-row { gap: 16px; }
  .hw2 .rf-who, .hw2 .rf-who > img { width: 72px; height: 72px; }
  .hw2 .rf-agent { width: 28px; height: 28px; }
  .hw2 .rf-agent img { width: 16px; height: 16px; }
  .hw2 .hw2-n { gap: 2px; font-size: 22px; }
  .hw2 .hw2-n small { font-size: 17px; }
  .hw2-log { width: 112px; gap: 8px; }
  .hw2 .rf-box-sm { width: 64px; height: 64px; }
  .hw2 .rf-box-sm svg { width: 26px; height: 26px; }
  .hw2 .hw2-log small { font-size: 16px; }
  .hw2-pp { min-width: 420px; padding: 34px 30px 28px; }
  .hw2 .rf-pp-tag { top: -16px; left: 20px; gap: 8px; padding: 2px 10px; font-size: 24px; }
  .hw2 .rf-pp-tag img { width: 20px; height: auto; }
  .hw2 .rf-pp-row { --rf-gap: 48px; --rf-node-w: 190px; padding-top: 40px; }
  .hw2 .rf-box { width: 88px; height: 88px; border-radius: 12px; }
  .hw2 .rf-box svg { width: 30px; height: 30px; }
  .hw2 .rf-box img { width: 36px; height: auto; }
  .hw2 .rf-node + .rf-node .rf-box::before { width: calc(var(--rf-gap) + var(--rf-node-w) - 88px); }
  .hw2 .rf-node { gap: 10px; }
  .hw2 .rf-node figcaption { font-size: 20px; }
  .hw2 .rf-node small { font-size: 16px; }
  .hw2 > .hw2-back { bottom: 32px; gap: 8px; padding: 6px 14px; font-size: 18px; }
  .hw2 .hw2-back svg { width: 18px; height: 18px; }
}