/* The explanatory presentation preserves the existing projection's access and calculations. */
#flowProjSection .flow-proj-head{align-items:center;gap:20px;margin-bottom:20px}
#flowProjSection .flow-proj-title-wrap{display:block}
#flowProjSection .flow-proj-title{display:block;margin:0 0 6px;font-family:inherit;font-size:clamp(17px,1.6vw,22px);font-weight:650;letter-spacing:-.025em;text-transform:none;text-shadow:none;line-height:1.3;color:var(--text)}
#flowProjSection .flow-proj-sub{display:block;font-size:12px;font-style:normal;letter-spacing:0;line-height:1.6}
.ff-flow-help{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0;border:1px solid rgba(var(--ar),.35);border-radius:999px;background:rgba(var(--ar),.08);color:var(--accent);font-weight:600;font-family:inherit;font-size:12px;padding:11px 16px;cursor:pointer;min-height:42px}
.ff-flow-help:hover{background:rgba(var(--ar),.16)}
.ff-flow-help svg{width:16px;height:16px;fill:currentColor}
.ff-flow-help:focus-visible,.ff-flow-guide button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ff-flow-guide{--fg-green:#00ff9f;--fg-red:#ff8a9d;--fg-ink:#edf6f2;--fg-muted:#a2b6ac;box-sizing:border-box;width:min(820px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid #2b493b;border-radius:24px;background:#0b1713;color:var(--fg-ink);box-shadow:0 35px 110px #0009;font-family:inherit;overflow:auto;overscroll-behavior:contain}
.ff-flow-guide::backdrop{background:#020b09ba;backdrop-filter:blur(8px)}
.ff-flow-guide *{box-sizing:border-box}
.ff-flow-guide-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 26px;border-bottom:1px solid #ffffff12;font-size:16px;font-weight:700}
.ff-flow-guide-top>span>span{color:var(--fg-green)}
.ff-flow-guide-top small{display:block;margin-top:5px;color:var(--fg-muted);font-size:9px;letter-spacing:.13em;font-weight:500}
.ff-flow-guide button{font-family:inherit;cursor:pointer}
.ff-flow-guide [data-flow-close]{width:34px;height:34px;flex:0 0 34px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff08;color:var(--fg-ink);font-size:24px;line-height:1}
.ff-flow-guide-main{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:365px}
.ff-flow-art{padding:26px 20px;background:radial-gradient(ellipse at 50% 45%,#00ff9f12,transparent 70%);align-self:stretch;display:flex;align-items:center;justify-content:center}
.ff-flow-guide-copy{padding:32px 30px 32px 10px}
.ff-flow-tag{color:var(--fg-green);font-size:10px;font-weight:650;letter-spacing:.1em}
.ff-flow-guide h2{margin:12px 0 14px;color:var(--fg-ink);font-size:25px;font-weight:600;line-height:1.2;letter-spacing:-.04em;text-transform:none}
.ff-flow-guide h2:focus{outline:none}
.ff-flow-guide p{margin:0;color:var(--fg-muted);font-size:13px;line-height:1.7}
.ff-flow-guide .ff-flow-note{margin-top:19px;padding:0 0 0 13px;border-left:2px solid var(--fg-green);color:var(--fg-ink);font-size:12px;line-height:1.65}
.ff-flow-guide .ff-flow-extra{font-size:11px;margin-top:12px}
.ff-flow-visual{margin:0;width:100%}
.ff-flow-chart-label{font-size:10px;color:var(--fg-muted);padding-left:6%}
.ff-flow-visual svg{width:100%;height:auto;display:block;overflow:visible;margin-top:12px}
.ff-flow-grid{stroke:#ffffff12;fill:none;stroke-width:1}
.ff-flow-fixed,.ff-flow-passive{fill:none;stroke-width:3.5;stroke-linecap:round}
.ff-flow-fixed{stroke:var(--fg-red)}
.ff-flow-passive{stroke:var(--fg-green);stroke-dasharray:1;animation:ff-flow-draw 1.6s ease-out both}
.ff-flow-marker{stroke:var(--fg-green);stroke-dasharray:4 5;opacity:.45}
.ff-flow-point{fill:var(--fg-green);stroke:#0b1713;stroke-width:2}
.ff-flow-pulse{fill:#00ff9f20;stroke:#00ff9f55;transform-origin:240px 105px;animation:ff-flow-pulse 2.5s ease-in-out infinite}
.ff-flow-axis{display:flex;justify-content:space-between;padding:0 6%;font-size:10px;color:var(--fg-muted);margin-top:-12px}
.ff-flow-keys{display:flex;justify-content:center;gap:8px 14px;flex-wrap:wrap;margin:23px 0 12px;font-size:10px}
.ff-flow-keys span:before{content:'';display:inline-block;width:12px;height:3px;margin-right:6px;vertical-align:middle;background:var(--fg-green);border-radius:4px}
.ff-flow-keys .fixed:before{background:var(--fg-red)}
.ff-flow-visual figcaption{text-align:center;color:var(--fg-muted);font-size:9px;line-height:1.5}
.ff-flow-data{display:grid;gap:10px;width:100%}
.ff-flow-data-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1px solid #ffffff12;background:#ffffff03;border-radius:12px}
.ff-flow-data-row>span{display:grid;place-items:center;width:28px;height:28px;background:#00ff9f13;border-radius:8px;color:var(--fg-green);font-size:17px;flex-shrink:0}
.ff-flow-data-row strong{display:block;font-size:12px;font-weight:600}
.ff-flow-data-row small{display:block;font-size:10px;line-height:1.45;margin-top:3px;color:var(--fg-muted)}
.ff-flow-data-row.line-2>span,.ff-flow-data-row.line-3>span{background:#ff8a9d15;color:var(--fg-red)}
.ff-flow-scenario{text-align:center;width:100%}
.ff-flow-scenario>div{border:1px solid #00ff9f30;border-radius:12px;padding:14px;background:#00ff9f08;display:flex;justify-content:space-between;align-items:center;gap:15px}
.ff-flow-scenario span,.ff-flow-scenario>strong{font-size:10px;letter-spacing:.04em}
.ff-flow-scenario b{color:var(--fg-green);font-size:23px;font-weight:500}
.ff-flow-scenario i{display:block;font-style:normal;color:var(--fg-muted);margin:9px}
.ff-flow-scenario>strong{color:var(--fg-green)}
.ff-flow-scenario p{margin-top:22px;font-size:11px}
.ff-flow-guide-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;border-top:1px solid #ffffff12}
.ff-flow-progress>span{display:block;font-size:10px;color:var(--fg-muted);margin-bottom:8px}
.ff-flow-progress>div{display:flex;gap:5px}
.ff-flow-progress i{width:23px;height:3px;border-radius:3px;background:#ffffff20}
.ff-flow-progress i.active{background:var(--fg-green)}
.ff-flow-nav{display:flex;align-items:center;gap:10px}
.ff-flow-nav button{min-height:42px;padding:10px 15px;border:1px solid #ffffff25;border-radius:999px;background:transparent;color:var(--fg-ink);font-size:12px;font-weight:600}
.ff-flow-nav [data-flow-next]{background:var(--fg-green);border-color:var(--fg-green);color:#062015}
.ff-flow-nav [data-flow-next] span{margin-left:8px}
.ff-flow-guide button:hover{filter:brightness(1.12)}
/* The desktop app uses html zoom: 1.275; keep the whole dialog inside the viewport. */
@media(min-width:1101px){.ff-flow-guide{max-height:calc((100dvh - 32px) / 1.275)}}
@keyframes ff-flow-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ff-flow-pulse{50%{transform:scale(1.2);opacity:.6}}
@media(max-width:600px){
  #flowProjSection .flow-proj-head{align-items:flex-start;flex-direction:column;gap:12px}
  #flowProjSection .flow-proj-title{font-size:19px}
  .ff-flow-guide{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:20px}
  .ff-flow-guide-top{padding:17px 19px}
  .ff-flow-guide-top small{font-size:8px;letter-spacing:.08em}
  .ff-flow-guide-main{grid-template-columns:1fr;min-height:0}
  .ff-flow-art{padding:12px 24px 8px;min-height:0}
  .ff-flow-visual{max-width:270px}
  .ff-flow-visual svg{max-height:135px;margin-top:6px}
  .ff-flow-chart-label{font-size:9px}
  .ff-flow-keys{margin:15px 0 7px}
  .ff-flow-guide-copy{padding:16px 22px 22px}
  .ff-flow-guide h2{font-size:23px}
  .ff-flow-guide .ff-flow-note{margin-top:14px}
  .ff-flow-guide-footer{padding:16px 18px;gap:10px;flex-wrap:wrap}
  .ff-flow-nav{margin-left:auto}
  .ff-flow-nav button{font-size:11px;padding:10px 12px}
  .ff-flow-data{grid-template-columns:1fr 1fr;gap:7px;margin-top:5px}
  .ff-flow-data-row{padding:10px 8px;gap:7px}
  .ff-flow-data-row>span{width:23px;height:23px;font-size:14px}
  .ff-flow-data-row strong{font-size:10px}
  .ff-flow-data-row small{font-size:9px}
  .ff-flow-scenario{max-width:300px}
  .ff-flow-scenario>div{padding:8px 14px}
  .ff-flow-scenario i{margin:4px}
  .ff-flow-scenario p{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.ff-flow-passive,.ff-flow-pulse{animation:none}}