.flowchart-story-hero{grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(34px,4vw,58px);width:min(100% - 48px,1280px);min-height:auto;padding:clamp(56px,6vw,82px) 0 52px}.flowchart-story-hero-copy h1{letter-spacing:-.052em;max-width:8.5em;margin-top:16px;font-size:clamp(2.65rem,4.4vw,4.8rem);line-height:1.02}.flowchart-story-hero-copy>p{max-width:30em;margin-top:19px;font-size:clamp(.9rem,1.05vw,1rem);line-height:1.68}.flowchart-story-hero-copy .button-row{margin-top:23px}.flowchart-story-hero-shot{border-radius:18px;width:100%;margin:0;transform:none;box-shadow:0 18px 44px #29323021}.flowchart-story-hero-shot img{aspect-ratio:16/10;object-fit:cover}.flowchart-story-hero-shot figcaption{display:none}.flowchart-story-index{z-index:16;-webkit-backdrop-filter:blur(16px)saturate(1.08);backdrop-filter:blur(16px)saturate(1.08);background:#f8f7f2e0;border:1px solid #465b6333;border-radius:999px;width:min(100% - 48px,760px);margin-top:0;padding:5px;position:sticky;top:106px;box-shadow:0 8px 24px #323f4114}.flowchart-story-index a{border-radius:999px;justify-content:center;padding:10px 12px;transition:background-color .18s,color .18s;position:relative;margin:0!important}.flowchart-story-index a.is-active{color:#fff;background:#174f6b;box-shadow:0 4px 12px #174f6b38}.flowchart-story-index a.is-active b,.flowchart-story-index a.is-active span{color:#fff}.flowchart-story-index a.is-active b{color:#bfe4f3}.flowchart-story-index a:focus-visible{outline-offset:2px;outline:2px solid #2c789e}.flowchart-playground{width:min(100% - 48px,1180px);padding:clamp(58px,6vw,76px) 0 clamp(54px,6vw,72px);scroll-margin-top:104px}.flowchart-playground>header{grid-template-columns:92px minmax(260px,.92fr) minmax(260px,.8fr);gap:24px;margin-bottom:24px}.flowchart-playground>header h2{letter-spacing:-.045em;font-size:clamp(2rem,3.2vw,3rem);line-height:1.04}.flowchart-playground>header p{font-size:.86rem;line-height:1.6}.flowchart-animation-shell{border-radius:18px;grid-template-columns:250px minmax(0,1fr);min-height:520px;max-height:520px;box-shadow:0 18px 44px #2731301a}.flowchart-animation-library{scrollbar-width:thin;max-height:520px;padding:16px 14px;overflow-y:auto}.flowchart-animation-tabs{margin-bottom:12px}.flowchart-animation-tabs span{border-radius:10px;min-height:40px;font-size:.68rem}.flowchart-animation-search{border-radius:11px;min-height:42px;padding:0 11px;font-size:.62rem}.flowchart-animation-group{padding:12px 2px;font-size:.66rem}.flowchart-animation-materials{gap:7px;max-height:none;padding:3px 0 11px;overflow:visible}.flowchart-animation-materials>div{border-radius:11px;gap:0;min-height:62px;font-size:.56rem}.flowchart-animation-materials>div span{text-align:center;max-width:92%;line-height:1.18}.flowchart-material-icon{width:62px;height:39px;display:block;overflow:visible}.flowchart-material-icon text{fill:#d7dadd;font-size:40px;font-weight:700}.flowchart-animation-canvas{min-height:520px}.flowchart-animation-node{border-width:2px;border-radius:8px;width:160px;height:68px;font-size:.9rem}.flowchart-animation-node.is-selected:after{inset:-8px}.flowchart-animation-plus{border-width:2px;width:32px;height:32px;font-size:1.4rem}.flowchart-animation-plus.is-top{top:-48px}.flowchart-animation-plus.is-right{right:-48px}.flowchart-animation-plus.is-bottom{bottom:-48px}.flowchart-animation-plus.is-left{left:-48px}.flowchart-animation-resize{width:10px;height:10px}.flowchart-animation-resize.is-nw{top:-12px;left:-12px}.flowchart-animation-resize.is-n{top:-12px}.flowchart-animation-resize.is-ne{top:-12px;right:-12px}.flowchart-animation-resize.is-e{right:-12px}.flowchart-animation-resize.is-se{bottom:-12px;right:-12px}.flowchart-animation-resize.is-s{bottom:-12px}.flowchart-animation-resize.is-sw{bottom:-12px;left:-12px}.flowchart-animation-resize.is-w{left:-12px}.flowchart-animation-drag-line{height:14%;top:29%}.flowchart-animation-drag-arrow{top:calc(43% - 1px)}.flowchart-animation-cursor{width:24px;height:30px}.flowchart-example-spread{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:min(100% - 48px,1180px);min-height:auto;padding:clamp(52px,5vw,64px) 0 clamp(64px,7vw,84px);scroll-margin-top:92px;display:grid}.flowchart-example-intro{grid-column:1/-1;width:min(520px,100%);margin:0 0 8px}.flowchart-example-intro h2{letter-spacing:-.045em;margin-top:12px;font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.04}.flowchart-example-intro p{margin-top:14px;font-size:.88rem;line-height:1.62}.flowchart-example-sheet,.flowchart-example-sheet-prisma,.flowchart-example-sheet-molecular{border-radius:14px;width:auto;position:relative;inset:auto;transform:none;box-shadow:0 14px 34px #2434391f}.flowchart-example-sheet-molecular{margin-top:clamp(34px,4vw,54px)}.flowchart-example-sheet figcaption{padding:10px 13px;font-size:.66rem}.flowchart-mcp-story{gap:clamp(42px,6vw,82px);width:min(100% - 48px,1120px);padding:clamp(78px,8vw,112px) 0;scroll-margin-top:104px}.flowchart-mcp-statement h2{letter-spacing:-.045em;font-size:clamp(2.15rem,3.6vw,3.7rem);line-height:1.03}.flowchart-story-final{width:min(100% - 48px,1120px);padding:42px 0 72px}.flowchart-story-final p{font-size:clamp(1.45rem,2.2vw,2.2rem)}@media (max-width:900px){.flowchart-story-hero{grid-template-columns:1fr;width:min(100% - 36px,700px);padding-top:46px}.flowchart-story-hero-copy h1{max-width:11em}.flowchart-playground>header{grid-template-columns:70px 1fr}.flowchart-playground>header p{grid-column:2}.flowchart-animation-shell{grid-template-columns:224px minmax(0,1fr)}.flowchart-animation-library{padding-inline:12px}.flowchart-animation-materials>div{min-height:64px}.flowchart-material-icon{width:60px;height:39px}}@media (max-width:720px){.flowchart-story-hero,.flowchart-playground,.flowchart-example-spread,.flowchart-mcp-story,.flowchart-story-final{width:calc(100% - 28px)}.flowchart-story-hero-copy h1{font-size:clamp(2.35rem,12vw,3.45rem)}.flowchart-story-index{padding:4px;top:96px}.flowchart-story-index a{gap:4px;padding:9px 5px}.flowchart-story-index b{display:none}.flowchart-playground>header{display:block}.flowchart-playground>header>span{margin-bottom:10px;display:block}.flowchart-playground>header p{margin-top:12px}.flowchart-animation-shell{grid-template-columns:1fr;max-height:none}.flowchart-animation-library{border-bottom:1px solid #7282864d;border-right:0;max-height:410px}.flowchart-animation-materials{grid-template-columns:repeat(3,minmax(0,1fr))}.flowchart-animation-canvas{min-height:500px}.flowchart-example-spread{grid-template-columns:1fr}.flowchart-example-intro{grid-column:1}.flowchart-example-sheet-molecular{margin-top:0}.flowchart-mcp-story{grid-template-columns:1fr}.flowchart-mcp-story aside,.flowchart-mcp-story>a{grid-column:1}}