.flow-page main, .flow-page .site-header, .flow-page footer { max-width: none; }
.flow-page .review-banner { padding: .8rem 1rem; margin-bottom: 1rem; }
.flow-page main > h1 { font-size: 1.8rem; }
.flow-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; margin-bottom: 1rem; }
.flow-tools label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.flow-tools select { width: auto; max-width: min(24rem, 70vw); }
.flow-tools .hint { flex-basis: 100%; }
.flow-viewport { height: calc(100dvh - 23rem); min-height: 28rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 12px; background: #e9e4da; }
.flow-grid { position: relative; isolation: isolate; display: grid; grid-auto-columns: 390px; grid-auto-rows: 844px; gap: 80px 64px; padding: 32px; width: max-content; }
.flow-card { display: flex; flex-direction: column; min-height: 0; background: #f5f3ee; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px #24211c12; }
.flow-card > h2 { margin: 0; padding: .7rem 1rem; min-height: 3.8rem; font-size: 1rem; color: #fff; background: #24211c; }
.flow-card > .flow-toggle { align-self: flex-start; margin: .5rem 1rem; padding: .2rem .5rem; min-height: 32px; font-size: .75rem; }
.flow-screen-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.flow-screen { padding: 1.2rem 1rem 2rem; min-height: 100%; container: screen / inline-size; }
.flow-edges { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: visible; color: var(--accent); }
.flow-edges path { fill: none; stroke: currentColor; stroke-width: 2; }