@font-face{font-family:StorySans;src:local('Arial')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{--sans:StorySans,Arial,sans-serif;--mono:'SFMono-Regular',Consolas,monospace;--text:#141820;--text-2:#687181;--line:#e1e5eb;--accent:#4260be;margin:0;color:var(--text);background:#fafbfe;font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a,input{ -webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid #4260be;outline-offset:5px}button{cursor:pointer}h1,h2,p{margin:0} .site-header{height:92px;max-width:1600px;margin:auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between}.wordmark{font-size:23px;font-weight:650;letter-spacing:-1px;display:flex;gap:10px;align-items:center}.brand-symbol{font-size:40px;line-height:20px;font-weight:400}.site-header nav{display:flex;gap:30px;align-items:center;font-size:13px}.access-link{border:1px solid #bdc6d5;border-radius:5px;padding:11px 17px}.arrival{max-width:1440px;padding:80px 5vw 90px;margin:auto}.arrival h1{font-size:clamp(54px,6.4vw,106px);font-weight:450;letter-spacing:-.065em;line-height:1.02;max-width:1100px}.arrival-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:40px;gap:30px}.arrival p{font-size:18px;line-height:1.55;color:var(--text-2);max-width:420px}.arrival-bottom>a{font-size:13px;padding-bottom:6px}.arrival-bottom>a span{margin-left:32px}.story{position:relative;max-width:1600px;margin:auto}.story-stage{position:sticky;top:30px;height:calc(100svh - 60px);max-height:950px;margin:0 5vw;display:flex;flex-direction:column;justify-content:center;z-index:2}.story-beats{margin-top:calc(-100svh + 60px)}.story-beat{height:110svh;scroll-margin-top:0;pointer-events:none}.story-beat>div{display:none}.stage-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:23px;letter-spacing:-.6px}.scroll-hint{font-size:11px;letter-spacing:0;color:#747e8e}.workspace-mask{border-radius:8px;overflow:hidden;box-shadow:0 28px 65px -30px #20364a40;transition:background .7s,transform .7s}.flow-demo{margin:0}.flow-heading{display:none}.flow-window{border-radius:7px;box-shadow:none;border-color:#cad2df}.flow-workspace{grid-template-columns:minmax(0,1fr) minmax(240px,29%);transition:grid-template-columns .8s ease}.flow-canvas{height:clamp(310px,51svh,540px)}.flow-chat{border-left:1px solid var(--line);padding:0 16px 14px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.flow-chat h3{height:39px;margin:0;display:flex;align-items:center;font-size:12px;font-weight:500}.flow-source{font-size:clamp(10px,1vw,13px)!important;line-height:1.6!important;padding-bottom:75px!important}.flow-circuit .wire,.flow-circuit .symbol{stroke:#111820}.flow-proposal{bottom:0!important}.flow-answer{font-size:12px}.scene-nav{display:flex;justify-content:center;gap:10px;margin-top:22px}.scene-nav a{padding:8px 0}.scene-nav span{display:block;height:3px;width:32px;background:#d7dce5;border-radius:2px;transition:background .4s,width .4s}.scene-nav a[aria-current] span{background:#4260be;width:64px}.outro{max-width:1280px;padding:140px 5vw;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:10vw}.outro h2,.access h2{font-weight:450;font-size:clamp(40px,4.5vw,68px);letter-spacing:-.055em;line-height:1.1}.outro p{font-size:18px;line-height:1.6;color:var(--text-2);max-width:420px}.capability-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:32px;font-size:12px;color:#44546a}.access{margin:0 5vw;padding:80px 0 100px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.access>a{background:#243f92;color:white;padding:19px 24px;border-radius:5px;font-size:15px}.access>a span{margin-left:45px}footer{padding:30px 5vw 85px;display:flex;justify-content:space-between;font-size:12px;color:var(--text-2)}.version-switch{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;background:#ffffffed;backdrop-filter:blur(16px);border:1px solid #d8dfe9;border-radius:7px;padding:4px;display:flex;box-shadow:0 4px 18px #17234412;white-space:nowrap}.version-switch a{font-size:11px;padding:8px 12px;border-radius:4px;color:#687181}.version-switch a[aria-current]{background:#e9edf6;color:#203864}
/* Full frame gives the active panel room without losing its surroundings. */
[data-story=full-frame][data-scene="1"] .flow-workspace{grid-template-columns:minmax(0,1fr) minmax(270px,37%)}
/* Close-up crops a continuous workspace, then returns to the complete view. */
[data-story=close-up]{background:#e8ecf2}[data-story=close-up] .arrival{text-align:center;padding-top:65px}[data-story=close-up] .arrival h1{margin:auto}[data-story=close-up] .arrival-bottom{justify-content:center;flex-direction:column;align-items:center}[data-story=close-up] .workspace-mask{background:#d4dce7;padding:35px 5%;height:calc(66svh + 15px);max-height:690px;min-height:405px;position:relative}[data-story=close-up] .flow-demo{transform-origin:center center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}[data-story=close-up] .flow-canvas{height:clamp(310px,47svh,490px)}[data-story=close-up][data-scene="1"] .flow-demo{transform:scale(1.13) translateX(-4%)}[data-story=close-up][data-scene="2"] .flow-demo,[data-story=close-up][data-scene="4"] .flow-demo{transform:scale(1.08) translateX(3%)}[data-story=close-up] .stage-heading{justify-content:center}.close-up .scroll-hint{display:none}
/* Reading room puts explanation in the scrolling column. */
[data-story=reading-room]{background:white}[data-story=reading-room] .arrival{padding-bottom:110px}[data-story=reading-room] .story-stage{margin-left:32%;margin-right:4vw;top:40px;height:calc(100svh - 80px)}[data-story=reading-room] .stage-heading{display:none}[data-story=reading-room] .story-beat{display:flex;align-items:center;padding:0 4vw}[data-story=reading-room] .story-beat>div{display:block;width:24%;opacity:.22;transition:opacity .5s}[data-story=reading-room] .story-beat.active>div{opacity:1}[data-story=reading-room] .story-beat h2{font-size:clamp(28px,3vw,44px);font-weight:450;letter-spacing:-1.8px;line-height:1.1;margin-bottom:20px}[data-story=reading-room] .story-beat p{font-size:15px;line-height:1.6;color:var(--text-2)}[data-story=reading-room] .flow-workspace{grid-template-columns:minmax(0,1fr) 230px}[data-story=reading-room] .flow-canvas{height:49svh}[data-story=reading-room] .flow-source{font-size:10px!important}
/* The opening diagram occupies the frame; the editor forms around it. */
[data-story=diagram-first]{background:#fff}[data-story=diagram-first] .arrival{padding-bottom:25px}[data-story=diagram-first] .workspace-mask{box-shadow:none;transition:box-shadow 1s}[data-story=diagram-first] .flow-window{transition:border-color 1s}[data-story=diagram-first][data-scene="0"] .flow-window{border-color:transparent}[data-story=diagram-first][data-scene="0"] .flow-workspace{grid-template-columns:minmax(0,1fr) 0px}[data-story=diagram-first][data-scene="0"] .flow-chat{padding:0;opacity:0}[data-story=diagram-first][data-scene="0"] .flow-toolbar,[data-story=diagram-first][data-scene="0"] .flow-tabs{opacity:0}[data-story=diagram-first] .flow-toolbar,[data-story=diagram-first] .flow-tabs,[data-story=diagram-first] .flow-chat{transition:opacity .8s}[data-story=diagram-first][data-scene="0"] .stage-heading{opacity:0}[data-story=diagram-first] .flow-circuit{transition:transform 1s}[data-story=diagram-first][data-scene="0"] .flow-circuit{transform:scale(1.15)}[data-story=diagram-first]:not([data-scene="0"]) .workspace-mask{box-shadow:0 25px 70px -35px #23384c50}
.index .arrival p{margin-top:30px}.design-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 35px;padding:0 5vw 100px;max-width:1440px;margin:auto}.design-preview{height:330px;background:#edf1f8;padding:30px;overflow:hidden;position:relative}.design-preview>span{font-size:32px;letter-spacing:-1.5px;line-height:1.05}.mini-app{background:white;border:1px solid #c4cedd;margin:25px auto 0;width:90%;height:150px;box-shadow:0 14px 30px #30436815}.mini-app i{display:block;height:22px;border-bottom:1px solid #e1e5eb}.mini-app svg{height:100px;width:100%}.design-card h2{font-size:23px;font-weight:450;margin:22px 0 10px;display:flex;justify-content:space-between}.design-card p{font-size:14px;color:var(--text-2);line-height:1.5}.card-1 .design-preview{background:#dbe2ec;text-align:center}.card-1 .mini-app{transform:scale(1.15)}.card-2 .design-preview{display:flex;align-items:center;gap:15px;background:#f7f8fa}.card-2 .design-preview>span{font-size:24px;width:40%}.card-2 .mini-app{width:60%}.card-3 .design-preview{background:white;border:1px solid #eee}.card-3 .mini-app{border:0;box-shadow:none}.card-3 .mini-app i{display:none}
@media(min-width:1500px){.flow-canvas{height:55svh}.story-stage{margin-inline:7vw}}
@media(max-width:900px){.site-header{height:75px}.site-header nav{gap:17px}.site-header nav>a:first-child{display:none}.arrival{padding-top:45px;padding-bottom:60px}.arrival h1{font-size:60px}.arrival p{font-size:16px}.flow-workspace,[data-story=reading-room] .flow-workspace{grid-template-columns:minmax(0,1fr) 220px}.flow-source{font-size:10px!important}[data-story=reading-room] .story-stage{margin-left:28%;margin-right:3vw}[data-story=reading-room] .flow-workspace{grid-template-columns:minmax(0,1fr)}[data-story=reading-room] .flow-chat{height:185px;border-top:1px solid var(--line)}[data-story=reading-room] .flow-canvas{height:33svh}[data-story=reading-room] .story-beat>div{width:22%}}
@media(max-width:600px){.site-header{padding-inline:22px}.wordmark{font-size:20px}.site-header nav{font-size:11px;gap:14px}.access-link{padding:9px}.arrival{padding:40px 24px 50px}.arrival h1{font-size:48px;letter-spacing:-2.8px}.arrival-bottom{display:block;margin-top:24px}.arrival-bottom>a{display:inline-block;margin-top:24px}.arrival p{font-size:15px}.story-stage,[data-story=reading-room] .story-stage{top:12px;margin:0 12px;height:calc(100svh - 60px);justify-content:center}.story-beat{height:105svh}.stage-heading,[data-story=reading-room] .stage-heading{display:flex;font-size:20px;margin:0 10px 14px}.scroll-hint{display:none}.flow-workspace,[data-story=reading-room] .flow-workspace,[data-story=full-frame][data-scene="1"] .flow-workspace{grid-template-columns:1fr}.flow-canvas,[data-story=reading-room] .flow-canvas,[data-story=close-up] .flow-canvas{height:31svh;min-height:220px}.flow-chat,[data-story=reading-room] .flow-chat{height:185px;padding:0 12px 9px;border-left:0;border-top:1px solid var(--line)}.flow-chat h3{height:24px;min-height:24px;font-size:10px}#flow-messages{font-size:11px;padding:6px 0}#flow-composer textarea{height:30px;font-size:11px}#flow-composer{padding:6px 9px}.flow-toolbar{height:35px}.flow-tabs{height:32px}.flow-tabs button{font-size:10px;padding:5px}.flow-source{font-size:9px!important;line-height:1.4!important}.flow-answer{font-size:11px}.flow-user{padding:7px;margin-bottom:8px}.scene-nav{margin-top:8px}.scene-nav span{width:24px}.scene-nav a[aria-current] span{width:42px}.outro{display:block;padding:80px 25px}.outro h2{font-size:42px;margin-bottom:30px}.outro p{font-size:16px}.access{padding:50px 0 70px;display:block}.access h2{font-size:42px;margin-bottom:35px}.access>a{display:inline-block}.version-switch{bottom:8px}.version-switch a{font-size:10px;padding:8px}.outro,.access{margin-inline:20px}.outro{padding-inline:0}[data-story=reading-room] .story-beat>div{display:none}[data-story=close-up] .workspace-mask{padding:0;min-height:0;height:auto}[data-story=close-up] .flow-demo{transform:none!important}[data-story=diagram-first][data-scene="0"] .flow-chat{height:0}[data-story=diagram-first][data-scene="0"] .flow-canvas{height:50svh}.design-grid{grid-template-columns:1fr}.design-preview{height:300px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
[data-story=full-frame] .workspace-mask{transform:scale(calc(.94 + var(--entry,1)*.06));transform-origin:center top}
[data-story=close-up] .scroll-hint{display:none}
/* Keep coordinates stable while close-up redistributes space to the active panel. */
[data-story=close-up] .flow-demo{transform:none!important}
[data-story=close-up][data-scene="1"] .flow-workspace{grid-template-columns:minmax(0,1fr) 44%}
[data-story=close-up][data-scene="2"] .flow-workspace,[data-story=close-up][data-scene="4"] .flow-workspace{grid-template-columns:minmax(0,1fr) 24%}
[data-story=reading-room] .flow-source{font-size:11px!important}
@media(max-width:600px){[data-story=close-up][data-scene] .flow-workspace{grid-template-columns:1fr}[data-story=reading-room] .flow-source{font-size:9px!important}}
[data-story=close-up] .flow-source{font-size:11px!important;line-height:1.45!important;padding-top:16px!important}
@media(max-width:600px){[data-story=close-up] .flow-source{font-size:9px!important;line-height:1.4!important}}
/* Full-frame: one fixed stage and one scroll-position timeline. */
html:has([data-story=full-frame]){scroll-behavior:auto}
[data-story=full-frame] .story{height:calc(var(--story-distance,720svh) + 100svh - 80px)}
[data-story=full-frame] .story-stage{top:40px;height:calc(100svh - 80px);max-height:none}
[data-story=full-frame] .story-beats{margin:0;position:absolute;inset:0;pointer-events:none}
[data-story=full-frame] .story-beat{position:absolute;width:1px;height:1px;scroll-margin-top:40px}
[data-story=full-frame] .workspace-mask{transform:none;transition:none}
[data-story=full-frame][data-scene] .flow-workspace{grid-template-columns:minmax(0,1fr) minmax(240px,29%);transition:none}
[data-story=full-frame] .flow-canvas{height:clamp(300px,calc(100svh - 265px),540px)}
[data-story=full-frame] .flow-source{font-size:11px!important;line-height:1.45!important;padding-top:14px!important}
[data-story=full-frame]:not([data-inspect=true]) #flow-messages,[data-story=full-frame]:not([data-inspect=true]) .flow-source,[data-story=full-frame]:not([data-inspect=true]) .flow-inspector{overflow:hidden!important}
[data-story=full-frame] .flow-pointer,[data-story=full-frame] .flow-pointer i{animation:none!important;transition:none!important}
[data-story=full-frame] .flow-pointer.scroll-pressed i{opacity:1;transform:scale(1.1);border-color:#4260be}
[data-story=full-frame] .scene-nav{align-items:center;position:relative}
.inspect-story{position:absolute;right:0;background:transparent;border:0;font:11px var(--sans);color:#52617a;cursor:pointer;padding:8px}
@media(max-width:600px){
[data-story=full-frame] .story-stage{top:12px;height:calc(100svh - 60px)}
[data-story=full-frame] .story{height:calc(var(--story-distance,720svh) + 100svh - 60px)}
[data-story=full-frame] .story-beat{scroll-margin-top:12px}
[data-story=full-frame][data-scene] .flow-workspace{grid-template-columns:1fr}
[data-story=full-frame] .flow-canvas{height:clamp(200px,calc(100svh - 450px),330px)}
[data-story=full-frame] .flow-source{font-size:9px!important;line-height:1.35!important}
[data-story=full-frame] .scene-nav{padding-bottom:25px}
.inspect-story{top:25px;left:0;right:0}
}
html:has([data-story=full-frame]){scroll-padding-top:0}
@media(max-width:600px){[data-story=full-frame] .flow-proposal{display:grid;grid-template-columns:1fr auto auto;gap:5px}[data-story=full-frame] .flow-proposal span{font-size:9px;line-height:1.3}[data-story=full-frame] .flow-proposal button{padding:6px 8px;font-size:10px}}
@media(max-width:600px){[data-story=full-frame] .flow-source{white-space:pre-wrap;overflow-wrap:anywhere}}
/* Gesture presentation: one ordinary viewport section, no scrub spacer. */
[data-story=full-frame] .story{height:calc(100svh + 100px);--story-distance:0px}
[data-story=full-frame] .story-beats{display:none}
[data-story=full-frame] .story-stage{position:sticky}
[data-story=full-frame] .flow-model,[data-story=full-frame] .flow-chat{position:relative}
[data-story=full-frame] .flow-chat #flow-messages{position:relative}
[data-story=full-frame] .scene-nav{margin-top:16px;padding-bottom:0}
.keypoint-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:9px;font-size:11px;color:#647188}
.keypoint-controls button{background:transparent;border:1px solid #d6dce7;border-radius:4px;padding:5px 10px;color:inherit;font:inherit;cursor:pointer}
.keypoint-controls .key-explore{border:0}.key-skip{margin-left:12px}
[data-story=full-frame] .flow-canvas{height:clamp(280px,calc(100svh - 305px),500px)}
[data-story=full-frame] .flow-pointer{display:none!important}
@media(max-width:600px){[data-story=full-frame] .flow-canvas{height:clamp(190px,calc(100svh - 480px),310px)}.keypoint-controls{gap:8px;font-size:10px}.key-skip{margin-left:0}}
[data-story=full-frame] .flow-tabs button{transition:color .3s,border-color .3s}
/* The story is the interface. Review/presentation controls stay out of the page. */
[data-story=full-frame] .scene-nav,[data-story=full-frame] .version-switch,[data-story=full-frame] .keypoint-controls{display:none}
[data-story=full-frame] .stage-heading{margin-bottom:24px;font-size:22px}
.story-skip{font-size:11px;letter-spacing:0;color:#7a8493;padding:8px 0}
.story-skip:hover{color:#243f92}
[data-story=full-frame] .flow-model>.flow-proposal{z-index:12}
[data-story=full-frame] .workspace-mask{box-shadow:0 25px 70px -40px #23384c38}
[data-story=full-frame] .flow-canvas{height:clamp(280px,calc(100svh - 245px),530px)}
@media(max-width:600px){[data-story=full-frame] .flow-canvas{height:clamp(190px,calc(100svh - 425px),340px)}[data-story=full-frame] .stage-heading{font-size:19px}}
[data-story=full-frame] .flow-chat{height:auto}
[data-story=full-frame] .flow-source{font-size:12px!important;line-height:1.6!important}
@media(max-width:600px){[data-story=full-frame] .flow-chat{height:185px}[data-story=full-frame] .flow-source{font-size:9px!important;line-height:1.35!important}}
/* Step headings carry the explanation while the workspace remains visually stable. */
[data-story=full-frame] .stage-heading{font-size:clamp(30px,3vw,44px);font-weight:500;letter-spacing:-1.25px;line-height:1.12;margin-bottom:28px;min-height:50px}
[data-story=full-frame] .story-skip{font-weight:400;letter-spacing:0;flex-shrink:0;margin-left:20px}
@media(max-width:600px){[data-story=full-frame] .stage-heading{font-size:28px;letter-spacing:-.9px;min-height:62px;margin-bottom:20px;align-items:center}[data-story=full-frame] #scene-heading{max-width:250px}[data-story=full-frame] .story-skip{margin-left:10px}}

[data-story=full-frame] .arrival-bottom p{max-width:550px}
.arrival-actions{display:flex;align-items:center;gap:26px;font-size:13px;flex-shrink:0}
.arrival-actions a{padding:12px 0;white-space:nowrap}
.arrival-actions .try-link{background:#243f92;color:#fff;border-radius:5px;padding:15px 20px}
.arrival-actions span{margin-left:14px}
.outro .modelica-detail{margin-top:24px;font-size:15px}
@media(max-width:800px){[data-story=full-frame] .arrival-bottom{align-items:start;flex-direction:column}.arrival-actions{gap:22px}}
/* Full-frame product explanation: one demonstration, compact supporting sections. */
[data-story=full-frame] .arrival-copy{max-width:550px}
[data-story=full-frame] .arrival-copy .domains{font-size:14px;line-height:1.5;margin-top:18px;color:#596575}
[data-story=full-frame] .arrival-actions{align-items:flex-start;flex-direction:column;gap:8px}
[data-story=full-frame] .arrival-actions>a:last-child{padding-left:0}
[data-story=full-frame] .outro{padding-top:100px;padding-bottom:62px;gap:7vw}
[data-story=full-frame] .outro h2{font-size:clamp(36px,4vw,56px)}
.compatibility{max-width:1280px;margin:auto;padding:0 5vw 100px;display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.compatibility article{border-top:1px solid var(--line);padding-top:26px}
.compatibility h3{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:0 0 14px}
.compatibility p{font-size:16px;line-height:1.65;color:var(--text-2);max-width:440px}
[data-story=full-frame] .access{gap:40px;max-width:1280px;margin:auto;padding:65px 5vw 85px}
.access p{font-size:15px;line-height:1.6;color:var(--text-2);max-width:400px;margin-top:22px}
.access-action{display:flex;flex-direction:column;gap:14px;flex-shrink:0}
.access-action a{background:#243f92;color:#fff;padding:19px 24px;border-radius:5px;font-size:15px}
.access-action span{margin-left:24px}
.access-action small{font-size:12px;color:var(--text-2)}
[data-story=full-frame] .flow-source{overflow:auto!important}
@media(max-width:600px){
 [data-story=full-frame] .outro{padding-top:70px;padding-bottom:36px;display:block}
 [data-story=full-frame] .outro>div{margin-top:24px}
 [data-story=full-frame] .outro p{font-size:16px}
 .compatibility{grid-template-columns:1fr;gap:30px;padding-bottom:60px}
 [data-story=full-frame] .access{align-items:flex-start;flex-direction:column;gap:28px}
 [data-story=full-frame] .stage-heading{min-height:94px}
 [data-story=full-frame] .flow-source{font-size:11px!important;line-height:1.5!important}
 [data-story=full-frame] .flow-canvas{height:clamp(190px,calc(100svh - 455px),310px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Supporting visuals stay still so the walkthrough owns the page's motion. */
[data-story=full-frame] .outro{grid-template-columns:1fr 1.1fr;column-gap:6vw;row-gap:24px;align-items:start}
[data-story=full-frame] .outro h2{grid-column:1;grid-row:1}
[data-story=full-frame] .outro>div{grid-column:1;grid-row:2}
[data-story=full-frame] .outro p{font-size:17px;line-height:1.6}
[data-story=full-frame] .outro .modelica-detail{font-size:14px;margin-top:20px}
.feature-source{grid-column:2;grid-row:1/3;margin:0;min-width:0;background:#fff;border:1px solid #dce2e9;border-radius:6px;overflow:hidden;box-shadow:0 12px 35px -24px #23384c40}
.feature-source figcaption{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);font:12px var(--mono);color:#455264}
.feature-source figcaption span{font:12px var(--sans);color:#687181}
.feature-source pre{margin:0;padding:22px 16px;font:clamp(10px,1.05vw,13px)/1.9 var(--mono);overflow:auto;color:#283642}
.feature-source mark{display:inline;background:#edf5ef;color:inherit;box-shadow:none;margin:0;padding:3px 0;box-decoration-break:clone}
.feature-source code{white-space:pre}
.feature-library,.feature-export{height:210px;margin-bottom:28px;border:1px solid #dce2e9;border-radius:6px;background:#fff}
.library-path{font:11px var(--mono);padding:16px 18px;color:#687181;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.library-symbols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:23px 18px}
.library-symbols>div{min-width:0;text-align:center;font:12px var(--mono);color:#283642}
.library-symbols svg{display:block;width:100%;height:76px;margin-bottom:12px;fill:#fff;stroke:#17212b;stroke-width:1.6}
.feature-export{display:flex;align-items:center;justify-content:center;gap:24px;padding:25px}
.export-file{text-align:center;font:12px var(--mono);color:#283642}
.export-file>svg{display:block;margin:0 auto 18px;width:52px;height:65px;fill:none;stroke:#344659;stroke-width:1.4}
.export-file .file-lines{stroke:#7e90a2}
.file-extension{color:#4260be}
.export-arrow{width:48px;flex-shrink:1;fill:none;stroke:#8b98a7;stroke-width:1.3;margin-bottom:30px}
@media(max-width:850px){[data-story=full-frame] .outro{grid-template-columns:1fr}.feature-source{grid-column:1;grid-row:3}.feature-source pre{font-size:12px}.feature-export{gap:12px;padding:18px}.export-file{font-size:10px}}
@media(max-width:600px){[data-story=full-frame] .outro{display:grid}.feature-source{margin-top:8px}[data-story=full-frame] .outro>div{margin-top:0}.feature-source pre{font-size:10px}.library-path{font-size:10px}.library-symbols{gap:8px;padding:23px 12px}.library-symbols>div{font-size:11px}.feature-library,.feature-export{height:195px}.export-file{font-size:12px}}
/* Persistent access without adding controls to the demonstration. */
[data-story=full-frame] .site-header{position:sticky;top:0;z-index:30;height:64px;max-width:none;background:#fafbfef5;backdrop-filter:blur(12px);border-bottom:1px solid #e1e5eb}
[data-story=full-frame] .access-link{background:#243f92;border-color:#243f92;color:white}
[data-story=full-frame] .story-stage{top:80px;height:calc(100svh - 96px)}
[data-story=full-frame] .flow-canvas{height:clamp(230px,calc(100svh - 325px),470px)}
.library-symbols>a{min-width:0;text-align:center;color:#283642;border-radius:4px;padding:4px 0}
.library-symbols>a:hover{background:#f4f6fa}
.library-symbols img{display:block;width:100%;height:80px;object-fit:contain;margin-bottom:12px}
.library-symbols span{font:12px var(--sans)}
.library-symbols small{display:block;margin-top:7px;font:10px var(--mono);color:#687181;overflow-wrap:anywhere}
.feature-library .library-symbols{padding:14px 10px;gap:8px}
@media(max-width:600px){
 [data-story=full-frame] .site-header{height:56px;padding-inline:16px}
 [data-story=full-frame] .story-stage{top:68px;height:calc(100svh - 80px)}
 [data-story=full-frame] .flow-canvas{height:clamp(150px,calc(100svh - 515px),270px);min-height:150px}
 .library-symbols span{font-size:11px}.library-symbols small{font-size:9px}
 .library-symbols img{height:70px}
}
.feature-search{height:auto;min-height:270px}
.feature-search-query{display:flex;gap:11px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);font:14px var(--sans);color:#283642}
.feature-search-query svg{width:17px;height:17px;fill:none;stroke:#687181;stroke-width:1.6;flex:none}
.feature-search-results{padding:5px}
.feature-search-results a{display:block;padding:12px 12px;border-radius:4px}
.feature-search-results a:hover,.feature-search-results a:focus-visible{background:#edf1fa}
.search-result-path{display:block;font:10px/1.6 var(--mono);color:#687181;overflow-wrap:anywhere}
.search-result-path strong{font-weight:500;color:#17212b}
.search-result-description{display:block;margin-top:3px;font:12px/1.5 var(--sans);color:#283642}
.compatibility .feature-export{height:270px}
@media(max-width:600px){.feature-search{min-height:0}.search-result-path{font-size:10px}.feature-search-results a{padding:12px 9px}}
.feature-search-results a{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center}
.search-result-icon{grid-column:1;grid-row:1/3;width:44px;height:44px;object-fit:contain}
.search-result-path,.search-result-description{grid-column:2}
@media(max-width:600px){.feature-search-results a{grid-template-columns:36px minmax(0,1fr);column-gap:9px}.search-result-icon{width:36px;height:40px}}
.product-comparison{max-width:1440px;margin:auto;padding:0 5vw 90px}
.comparison-heading{margin-bottom:30px;display:flex;gap:30px;justify-content:space-between;align-items:end}
.comparison-heading h2{font-size:clamp(30px,3.4vw,46px);font-weight:450;letter-spacing:-1.5px;line-height:1.15}
.comparison-heading>p{max-width:300px;font-size:15px;line-height:1.6;color:var(--text-2)}
.comparison-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.comparison-card{background:#fff;border:1px solid #dce2e9;border-radius:7px;padding:24px 20px;display:flex;flex-direction:column;min-width:0}
.comparison-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:8px}
.comparison-card h3{font-size:21px;font-weight:550;letter-spacing:-.5px;margin:0}
.comparison-card header>span{font:10px var(--mono);color:#4260be;border:1px solid #c7d1ed;border-radius:3px;padding:3px 5px}
.comparison-focus{font-size:15px;line-height:1.5;min-height:68px;color:#283642}
.comparison-card dl{margin:18px 0 26px;font-size:13px;line-height:1.6;flex:1}
.comparison-card dt{font-size:11px;color:#687181;margin:18px 0 5px}
.comparison-card dt:first-child{margin-top:0}
.comparison-card dd{margin:0;min-height:84px}
.comparison-card>a{font-size:12px;color:#4260be;padding-top:16px;border-top:1px solid var(--line)}
.comparison-spiral{background:#f1f4fc;border-color:#7187c7;box-shadow:0 8px 25px -20px #243f9260}
.comparison-spiral>a{color:#243f92;font-weight:550}
.comparison-sources{margin-top:20px;font-size:12px;line-height:1.6;color:#687181}
.comparison-sources summary{cursor:pointer;width:fit-content}
.comparison-sources p{max-width:900px;margin-top:12px}
.comparison-sources a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-focus{min-height:45px}.comparison-card dd{min-height:50px}}
@media(max-width:600px){.comparison-heading{display:block}.comparison-heading>p{margin-top:18px}.comparison-grid{grid-template-columns:1fr}.comparison-card dd,.comparison-focus{min-height:0}.product-comparison{padding-bottom:60px}.comparison-card{padding:24px}}
.comparison-table-wrap{overflow-x:auto;border:1px solid #d5dce7;border-radius:7px;background:#fff}
.comparison-table{width:100%;min-width:900px;border-collapse:collapse;table-layout:fixed;font-size:13px;line-height:1.55}
.comparison-table caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.comparison-table col:first-child{width:17%}
.comparison-table .spiral-column{background:#eef2fc}
.comparison-table th,.comparison-table td{text-align:left;vertical-align:top;padding:20px 18px;border-bottom:1px solid #e1e5eb;border-right:1px solid #e1e5eb}
.comparison-table tr>*:last-child{border-right:0}
.comparison-table thead th{font-size:19px;font-weight:550;letter-spacing:-.4px;padding-block:24px}
.comparison-table thead th:first-child{font-size:12px;letter-spacing:0;color:#687181;vertical-align:middle}
.comparison-table thead th:nth-child(2){color:#243f92;box-shadow:inset 0 3px #4260be}
.comparison-table tbody th,.comparison-table tfoot th{font-size:12px;font-weight:500;color:#526071}
.comparison-table tbody td{color:#283642}
.comparison-table tbody td:nth-child(2){color:#1c315f}
.comparison-table tfoot th,.comparison-table tfoot td{border-bottom:0}
.comparison-table a{color:#243f92;font-size:12px}
.table-beta{display:block;font:10px var(--mono);margin-top:5px;letter-spacing:0;color:#6275a4}
@media(max-width:600px){.comparison-table{min-width:860px}.comparison-table th,.comparison-table td{padding:16px 13px}}