/* Image buttons preserve the original image slots and absolute output crop. */
.page-pb .pb-image-preview{display:block;position:relative;width:100%;padding:0;border:0;background:transparent;line-height:0;text-align:inherit;cursor:zoom-in}
.page-pb .pb-image-preview:disabled{cursor:default}
.page-pb .pb-image-preview:focus-visible{outline-offset:-3px}
/* Figma 4144:4871: two original-size slots, six native flows. */
.page-pb .pb-workflows-band .pb-duo .txt h2{max-width:514px}
.page-pb .pb-workflows-band .pb-duo .txt p{color:#a7a7a3}
.page-pb .pb-workflow-native-set{position:relative;container-type:inline-size;width:min(1440px,calc(100% - 48px));height:auto;aspect-ratio:1440/var(--set-height);margin-left:auto;margin-right:auto;transform:translateX(-4px)}
.page-pb .pb-workflow-native-stage{display:grid;grid-template-columns:repeat(3,32.222222222cqw);gap:calc(var(--flow-gap,24)/14.4*1cqw);height:100%;font-family:var(--sans)}
.page-pb .pb-workflow-native{min-width:0}
.page-pb .pb-workflow-native header{position:relative;height:11.319444444cqw;padding:2.222222222cqw 1.111111111cqw 1.111111111cqw;background:#262625}
.page-pb .pb-workflow-native header h3{font-size:1.944444444cqw;line-height:1.6;font-weight:500;color:#f0f0f0;text-align:center;white-space:nowrap}
.page-pb .pb-flow-header-rule{position:absolute;left:1.111111111cqw;right:1.111111111cqw;top:5.833333333cqw;height:.069444444cqw;background:url(assets/playblocks-workflows/line79.svg) center/100% 100% no-repeat;transform-origin:left center}
/* Light is clipped to the original SVG wire, including its dashes and arrows. */
.page-pb .pb-line-pulse{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.page-pb .pb-line-pulse-path{opacity:0}
.page-pb .pb-workflow-native header p{margin-top:1.111111111cqw;font-size:1.111111111cqw;line-height:1.7;color:#a7a7a3}
.page-pb .pb-flow-stage{position:relative;height:calc(var(--flow-height)/14.4*1cqw);isolation:isolate}
.page-pb .pb-flow-node,.page-pb .pb-flow-label,.page-pb .pb-flow-decision,.page-pb .pb-flow-asset,.page-pb .pb-flow-asset i>span{position:absolute;left:calc(var(--x)/14.4*1cqw);top:calc(var(--y)/14.4*1cqw);width:calc(var(--w)/14.4*1cqw);height:calc(var(--h)/14.4*1cqw)}
.page-pb .pb-flow-node,.page-pb .pb-flow-label,.page-pb .pb-flow-decision{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.111111111cqw;line-height:1;color:#fff;text-align:center}
.page-pb .pb-flow-node{border:.069444444cqw solid #4b4e4d;border-radius:6.944444444cqw;background:rgba(75,78,77,.2)}
.page-pb .pb-flow-node--box{border-radius:.833333333cqw}
.page-pb .pb-flow-node p{margin:0;font-size:inherit;line-height:1}
.page-pb .pb-flow-node p.pb-flow-multiline{line-height:1.7}
.page-pb .pb-flow-label{background:#1f1f1e}
.page-pb .pb-flow-label--branch{background:rgba(75,78,77,.5)}
.page-pb .pb-flow-label p{margin:0;font-size:inherit;line-height:1}
.page-pb .pb-flow-asset{pointer-events:none}
.page-pb .pb-flow-asset:first-child{z-index:-1}
.page-pb .pb-flow-asset i{position:absolute;inset:0;display:block}
.page-pb .pb-flow-asset .pb-flow-flip{transform:scaleX(-1)}
.page-pb .pb-flow-asset i>span{background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.page-pb .pb-flow-diamond{position:absolute;left:50%;top:50%;width:5.951347222cqw;height:5.951347222cqw;transform:translate(-50%,-50%) rotate(-45deg);background-position:center;background-size:100% 100%;background-repeat:no-repeat;z-index:-1}
.page-pb .pb-workflow-native-set .pb-workflow-preview{position:absolute;right:16px;top:16px;width:24px;height:24px;z-index:3}
.page-pb .pb-level .pb-output-preview{position:absolute;right:114px;top:.5px;width:310px;height:268px;border-radius:0 24px 24px 0;overflow:hidden}
.page-pb .pb-output-preview>.shot{position:static;inset:auto;max-width:none}

/* Decorative lines replace only the paint of existing border slots. */
.page-pb .pb-numrows,.page-pb .pb-numrow,.page-pb .pb-step,.page-pb .pb-step-copy{position:relative}
.page-pb .pb-motion-rule{display:none;position:absolute;pointer-events:none;transform-origin:left center}
.page-pb.pb-motion-ready .pb-motion-rule{display:block}
.page-pb.pb-motion-ready .pb-numrows{border-top-color:transparent}
.page-pb.pb-motion-ready .pb-numrow{border-bottom-color:transparent}
.page-pb.pb-motion-ready .pb-step{border-left-color:transparent}
.page-pb.pb-motion-ready .pb-step-copy{border-top-color:transparent}
.page-pb .pb-motion-rule--problem-top{left:0;right:0;top:-2px;height:2px;background:var(--white)}
.page-pb .pb-motion-rule--problem-bottom{left:0;right:0;bottom:-1px;height:1px;background:var(--white)}
.page-pb .pb-motion-rule--step-vertical{left:-1px;top:0;bottom:0;width:1px;background:var(--green);transform-origin:center top}
.page-pb .pb-motion-rule--step-horizontal{left:0;right:0;top:-1px;height:1px;background:var(--green)}
.page-pb .pb-knowledge-head i,.page-pb .pb-impact .tline{transform-origin:left center}

/* Figma 4144:4259: real text in the original 1440 × 557 decision slot. */
.page-pb .pb-decisions{position:relative;container-type:inline-size;height:557px;margin-top:50px}
.page-pb .pb-decision-row{position:relative;height:142px;padding-top:48px}
.page-pb .pb-decision-row:last-child{height:131px}
.page-pb .pb-decision-copy{display:grid;grid-template-columns:3.958333cqw 6.666667cqw 41.666667cqw 34.722222cqw;column-gap:3.333333cqw;align-items:center;height:46px;padding-left:2.222222cqw;font-size:1.111111cqw;line-height:1.45;color:var(--mut2)}
.page-pb .pb-decision-row:last-child .pb-decision-copy{height:35px}
.page-pb .pb-decision-no{line-height:1.7;white-space:nowrap}
.page-pb .pb-decision-copy h3{font-size:1.666667cqw;font-weight:600;line-height:1.45;color:var(--white);white-space:nowrap}
.page-pb .pb-decision-reason{align-self:center;height:23px}
.page-pb .pb-decision-strategy{align-self:stretch;color:var(--mut3)}
.page-pb .pb-decision-strategy strong{font-weight:600}
.page-pb .pb-decision-rule{position:absolute;left:1.527778cqw;right:1.527778cqw;bottom:0;height:1px;pointer-events:none;background:url(assets/playblocks-decision-rule-inner.svg) center/100% 100% no-repeat}
.page-pb .pb-decision-rule--top,.page-pb .pb-decision-rule--outer{left:0;right:0;background-image:url(assets/playblocks-decision-rule-outer.svg)}
.page-pb .pb-decision-rule--top{top:-1px;bottom:auto}

/* Figma 4144:4487. Horizontal container units retain the original desktop slot. */
.page-pb .pb-routing{position:relative;container-type:inline-size;height:371px;margin-top:50px;font-family:'IBM Plex Sans',var(--sans);color:var(--white)}
.page-pb .pb-routing-panel{position:absolute;left:11.597222cqw;top:0;width:54.027778cqw;height:371px;border:1px solid var(--band);border-radius:24px;background:var(--panel)}
.page-pb .pb-routing-label{position:absolute;font-size:1.388889cqw;line-height:1.65;white-space:nowrap}
.page-pb .pb-routing-label--name{left:13.75cqw;top:26px;font-weight:600;color:var(--green)}
.page-pb .pb-routing-label--reference{left:37.361111cqw;top:117px}
.page-pb .pb-routing-node{position:absolute;border:2px solid var(--band);border-radius:12px;text-align:center;white-space:nowrap}
.page-pb .pb-routing-node h3{font-size:1.666667cqw;font-weight:600;line-height:1.7}
.page-pb .pb-routing-node p{font-size:1.388889cqw;line-height:1.7}
.page-pb .pb-routing-node--input{left:0;top:155px;width:9.583333cqw;height:60px;border-color:var(--green);border-radius:100px;background:rgba(36,199,137,.5);display:flex;align-items:center;justify-content:center}
.page-pb .pb-routing-node--input p{line-height:1.45}
.page-pb .pb-routing-node--skill{left:13.75cqw;top:112px;width:21.111111cqw;height:146px;border-color:var(--blue);background:rgba(155,190,255,.5);padding-top:30px}
.page-pb .pb-routing-node--reference{left:46.180556cqw;top:38px;width:17.916667cqw;height:124px;background:var(--bg);padding-top:19px}
.page-pb .pb-routing-node--reference h3{color:var(--green)}
.page-pb .pb-routing-node--output{left:42.708333cqw;top:215px;width:17.916667cqw;height:124px;background:var(--bg);padding-top:24px}
.page-pb .pb-routing-node--dify{left:69.652778cqw;top:123px;width:16.180556cqw;height:124px;border-color:#4b4e4d;border-style:dashed;padding-top:24px;color:rgba(255,255,255,.5)}
.page-pb .pb-routing-node--result{left:90.069444cqw;top:155px;width:9.930556cqw;height:60px;border-color:#e65943;border-style:dashed;border-radius:100px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5)}
/* Original Figma SVGs, including their arrowheads and dashed reference branch. */
.page-pb .pb-routing-link{position:absolute;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.page-pb .pb-routing-link--input{left:9.548611cqw;top:177.636px;width:4.166667cqw;height:14.7279px;background-image:url(assets/playblocks-routing-input.svg)}
.page-pb .pb-routing-link--reference{left:34.791667cqw;top:92.636px;width:11.458333cqw;height:93.364px;background-image:url(assets/playblocks-routing-reference.svg)}
.page-pb .pb-routing-link--output{left:34.791667cqw;top:184px;width:7.986111cqw;height:100.364px;background-image:url(assets/playblocks-routing-output.svg);transform:scaleY(-1)}
.page-pb .pb-routing-link--dify{left:60.555556cqw;top:177.636px;width:9.166667cqw;height:100.364px;background-image:url(assets/playblocks-routing-dify.svg)}
.page-pb .pb-routing-link--result{left:85.763889cqw;top:177.636px;width:4.305556cqw;height:14.7279px;background-image:url(assets/playblocks-routing-result.svg)}

/* Match the existing native LEVEL cards to the same Figma group. */
.page-pb .pb-knowledge-head>p:not(.lv):not(.pb-knowledge-result){min-height:58px;flex-shrink:0}
.page-pb .pb-knowledge-card:first-child .pb-knowledge-result{width:460px;max-width:100%}
.page-pb .pb-knowledge-head i{border:0;height:2px;background:url(assets/playblocks-level-rule.svg) left center/32px 2px no-repeat;flex-shrink:0}
.page-pb .pb-level .in{display:block;position:relative;border-color:rgba(255,255,255,.5)}
.page-pb .pb-level .in h4{margin-top:16px}
.page-pb .pb-level .in h4+p{margin-top:8px;min-height:58px}
.page-pb .pb-level .in::after{content:'';position:absolute;left:24px;bottom:24px;width:32px;height:2px;background:url(assets/playblocks-level-rule.svg) center/32px 2px no-repeat}
.page-pb .pb-level--dash{background:rgba(33,33,33,.5)}
.page-pb .pb-level--dash::after{content:'';position:absolute;right:1px;top:1px;bottom:1px;width:423px;border-radius:0 23px 23px 0;background:var(--white);pointer-events:none}
.page-pb .pb-level .pb-output-preview{z-index:1;border-radius:0}
/* Keep the delivery copy and screenshot disjoint as the desktop container narrows. */
.page-pb .pb-levels{container-type:inline-size}
.page-pb .pb-level--dash .in{width:calc(100% - 29.444444cqw)!important;padding-inline:1.666667cqw}
.page-pb .pb-level--dash .in h4{font-size:2.222222cqw;line-height:1.45}
.page-pb .pb-level--dash .in p{font-size:1.388889cqw;line-height:1.45}
.page-pb .pb-level--dash .in .lv{font-size:1.111111cqw}
.page-pb .pb-level--dash::after{width:calc(29.444444cqw - 1px)}
.page-pb .pb-level .pb-output-preview{right:7.916667cqw;width:21.527778cqw}
.page-pb .pb-output-preview>.shot{width:100%}

/* Figma 4144:4872. Native protocol content in the original 1444 × 1071 slot. */
.page-pb .pb-protocol-band{background-image:url(assets/playblocks-protocol/band.svg);background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.page-pb .pb-protocol{display:block;isolation:isolate;container-type:inline-size;height:auto;aspect-ratio:1444/1071}
.page-pb .pb-protocol-stage{position:relative;container-type:inline-size;width:100%;height:calc(1071 / 14.44 * 1cqw)}
.page-pb .pb-protocol-col{position:absolute;left:calc(var(--x) / 14.44 * 1cqw);top:0;width:calc(var(--w) / 14.44 * 1cqw);height:calc(1071 / 14.44 * 1cqw);background:var(--panel);border-radius:calc(24 / 14.44 * 1cqw)}
.page-pb .pb-protocol-col>h3{height:calc(25 / 14.44 * 1cqw);margin-top:calc(37 / 14.44 * 1cqw);font-size:calc(20 / 14.44 * 1cqw);line-height:calc(25 / 14.44 * 1cqw)}
.page-pb .pb-protocol-col--bones ol{inset:0;display:block}
.page-pb .pb-protocol-col--bones li{position:absolute;left:calc(43 / 14.44 * 1cqw);top:calc(var(--y) / 14.44 * 1cqw);width:calc(250 / 14.44 * 1cqw);height:calc(56 / 14.44 * 1cqw);padding:0;font-size:calc(20 / 14.44 * 1cqw);line-height:2;white-space:nowrap}
.page-pb .pb-protocol-col--bones li.dash{border-color:rgba(36,199,137,.5)}
.page-pb .pb-mod-list{inset:0 auto auto calc(45 / 14.44 * 1cqw);width:calc(500 / 14.44 * 1cqw);display:block}
.page-pb .pb-mod-list article{position:absolute;left:0;top:calc(var(--y) / 14.44 * 1cqw);width:100%;height:calc(var(--h) / 14.44 * 1cqw);grid-template-columns:calc(112 / 14.44 * 1cqw) minmax(0,1fr);border:0;background:var(--panel)}
.page-pb .pb-mod-list article::after{content:'';position:absolute;inset:0;border:1px solid var(--blue);pointer-events:none}
.page-pb .pb-mod-list article>b{padding:0;justify-content:center;font-size:calc(20 / 14.44 * 1cqw);line-height:2}
.page-pb .pb-mod-list article>div{padding:calc(8 / 14.44 * 1cqw) calc(24 / 14.44 * 1cqw);background:rgba(155,190,255,.7)}
.page-pb .pb-mod-list h4{font-size:calc(20 / 14.44 * 1cqw);font-weight:500;line-height:2;white-space:nowrap}
.page-pb .pb-mod-list p{margin-top:0;font-size:calc(16 / 14.44 * 1cqw);line-height:2;white-space:nowrap}
.page-pb .pb-function-list{inset:calc(87 / 14.44 * 1cqw) auto auto calc(40 / 14.44 * 1cqw);display:block;width:calc(395 / 14.44 * 1cqw);height:calc(952 / 14.44 * 1cqw)}
.page-pb .pb-function-list article{position:absolute;left:0;top:calc(var(--y) / 14.44 * 1cqw);width:100%;height:calc(170 / 14.44 * 1cqw);border:0;background:var(--panel);box-shadow:inset 0 0 0 1px #000}
.page-pb .pb-function-list h4{height:calc(51 / 14.44 * 1cqw);padding:calc(8 / 14.44 * 1cqw) calc(16 / 14.44 * 1cqw);background:rgba(75,78,77,.5);font-size:calc(24 / 14.44 * 1cqw);line-height:1.45;white-space:nowrap}
.page-pb .pb-function-list p{padding:calc(16 / 14.44 * 1cqw) calc(16 / 14.44 * 1cqw);font-size:calc(20 / 14.44 * 1cqw);line-height:1.45}
.page-pb .pb-protocol-connectors{position:absolute;inset:0;z-index:2;pointer-events:none}
.page-pb .pb-protocol-connector{position:absolute;left:calc(var(--x) / 14.44 * 1cqw);top:calc(var(--y) / 14.44 * 1cqw);width:calc(var(--w) / 14.44 * 1cqw);height:calc(var(--h) / 14.44 * 1cqw);background-position:center;background-size:100% 100%;background-repeat:no-repeat}
.page-pb .pb-protocol-connector--flip{transform:scaleY(-1)}
.page-pb .pb-protocol .pb-protocol-preview{position:absolute;right:16px;top:16px;z-index:3;width:24px;height:24px;border-radius:5px}
.page-pb .pb-protocol-preview .wl-preview-hint{inset:0}
.page-pb .pb-function-list article::after{content:'';position:absolute;inset:0;border:1px solid #000;pointer-events:none}

/* Stable, non-interactive reading bounds; no layout or painted content. */
.page-pb .pb-protocol-motion-trigger{position:absolute;left:0;right:0;top:calc(var(--top) / 14.44 * 1cqw);height:calc(var(--height) / 14.44 * 1cqw + 6px);opacity:0;pointer-events:none}