:root{--ink:#1b2140;--sub:#6b7094;--panel:#eef0fb;--panel-line:#c9cdec;--accent:#4b5bd6;--accent-light:#eef0fb;--bg:#f4f5fb}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink)}
body{display:flex;align-items:center;justify-content:center;padding:24px}
.flowchart-slide{width:1280px;max-width:100%;aspect-ratio:16/9;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(27,33,64,.12);padding:40px 56px 28px;display:flex;flex-direction:column}
.flowchart-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;border-bottom:1px solid #e7e9f5;padding-bottom:14px;margin-bottom:6px}
.flowchart-head h1{font-size:24px;margin:0;letter-spacing:-.01em}
.flowchart-tag{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-light);padding:5px 10px;border-radius:20px;white-space:nowrap}
.flowchart-diagram{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.mermaid{width:100%}
.flowchart-footnote{text-align:center;font-size:11.5px;color:var(--sub);margin-top:6px}
@media(max-width:700px){body{padding:10px}.flowchart-slide{aspect-ratio:auto;min-height:100%;padding:22px 18px 17px}.flowchart-head{display:block}.flowchart-head h1{font-size:20px}.flowchart-tag{display:inline-block;margin-top:9px}.flowchart-diagram{min-height:360px}.flowchart-footnote{font-size:10px;line-height:1.45}}