/* Licensed character animations carry the scene. The small cards show the custom system. */
#example .bp-example-picks{display:flex;gap:7px;flex-wrap:wrap;padding:18px 25px 0;background:#f4f5f0}
#example .bp-example-picks>button{display:flex;align-items:center;gap:8px;border:1px solid #d9dfd0;background:#fafbf7;border-radius:6px;padding:10px 12px;font-size:10px;line-height:1.5;color:#849375;min-height:40px;cursor:pointer}
#example .bp-example-picks>button>span{font:8px monospace;color:#a3af97}
#example .bp-example-picks>button[aria-pressed=true]{background:#fff;border-color:#9eaf8a;color:#4e643b;box-shadow:0 3px 9px #2f44200a}
#example .bp-example-picks>button[aria-pressed=true]>span{color:#839c69}
#example .bp-road-head{padding-top:18px;min-height:72px}
#example .bp-visual{min-height:410px;background:#fff;margin:15px 20px 0;border-radius:10px;border:1px solid #e4e8dc}
#example .bb-stage{height:410px;background:#fff;position:relative;overflow:hidden;color:#48583c;isolation:isolate}
#example .bb-actor{position:absolute;left:0;top:27px;width:69%;height:350px;z-index:0}
#example .bb-lottie,#example .bb-poster{position:absolute;width:100%;height:100%;inset:0;object-fit:contain}
#example .bb-lottie>svg{width:100%!important;height:100%!important;display:block}
#example .bb-poster[hidden]{display:none!important}
#example .bb-scene-setting{position:absolute;top:15px;left:17px;display:flex;align-items:center;gap:6px;z-index:2}
#example .bb-scene-setting>i{width:5px;height:5px;background:#94a780;border-radius:50%}
#example .bb-scene-setting>span{font:7px/1.6 Inter,sans-serif;letter-spacing:.08em;color:#82926e}
#example .bb-system-card{position:absolute;right:18px;top:75px;width:36%;background:#fff;border:1px solid #d7e1cb;border-radius:10px;box-shadow:0 10px 28px #41552d10;padding:16px 14px;z-index:3}
#example .bb-card-top{display:flex;align-items:center;gap:6px;border-bottom:1px solid #e7eddf;padding-bottom:12px;margin-bottom:15px}
#example .bb-system-mark{font-size:19px;line-height:1;color:#90a873}
#example .bb-card-top>small{font-size:6px;letter-spacing:.08em;color:#9bac88}
#example .bb-live-dot{width:4px;height:4px;background:#b3c69a;border-radius:50%;margin-left:auto}
#example .bb-system-kicker{display:block;font:7px/1.7 Inter,sans-serif;letter-spacing:.08em;color:#91a47b;margin-bottom:8px}
#example .bb-system-card>strong{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.035em;display:block;color:#4e6c37}
#example .bb-system-card>p{font-size:9px;line-height:1.8;color:#8fa179;margin:13px 0 0}
#example .bb-scene-bubble{position:absolute;left:4%;top:49px;max-width:49%;padding:11px 14px;border:1px solid #e4e9dc;border-radius:9px 9px 9px 0;background:#fafcf6;z-index:2;font-size:12px;line-height:1.6;letter-spacing:-.015em;color:#627a4d;box-shadow:0 4px 12px #3d512405}
#example .bb-concept-note{position:absolute;left:18px;bottom:13px;color:#a4b194;font:7px/1.6 Inter,sans-serif;letter-spacing:.02em}
#example .bp-film-footer{padding:16px 26px 21px;position:relative}
#example #bp-film-caption{padding-right:0;margin-bottom:7px;font-size:13px}
#example .bp-animation-credit{display:block;font-size:7px;line-height:1.7;color:#9baa89;text-decoration:none;margin-bottom:14px}
#example .bp-animation-credit:hover{text-decoration:underline;color:#6b8254}
#example .bb-step-confirm{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 9px;background:#f0f6e8;border:1px solid #dfe9d3;border-radius:6px}
#example .bb-step-confirm>i{display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:50%;background:#deebcf;color:#7ba05a;font-size:12px;font-style:normal}
#example .bb-step-confirm>span{font-size:8px;line-height:1.7;color:#8ba375}
#example .bb-table-code{display:grid;grid-template-columns:41px 1fr;column-gap:8px;align-items:center;background:#f4f7ee;border:1px solid #e2ead9;border-radius:6px;padding:9px;margin-top:14px}
#example .bb-table-code>span{font-size:40px;line-height:1.2;color:#819c65;grid-row:span 2}
#example .bb-table-code>b{font-size:10px;font-weight:500;color:#7d9665}
#example .bb-table-code>small{font-size:7px;line-height:1.7;color:#a0b28b}
#example .bb-split-tickets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:15px}
#example .bb-split-tickets>span{font-size:7px;line-height:1.7;color:#9eb28a;background:#f5f8f0;border:1px dashed #d1dfc2;border-radius:5px;padding:9px 7px}
#example .bb-split-tickets b{font-weight:500;font-size:9px;line-height:1.7;display:block;margin-top:6px;color:#7e9c61}
#example .bb-receipt{display:flex;align-items:center;gap:10px;background:#ecf4e2;border:1px solid #d2e2bf;border-radius:6px;padding:13px;margin-top:15px}
#example .bb-receipt>b{font-size:20px;color:#8aad6b;font-weight:400}
#example .bb-receipt>span{font-size:13px;letter-spacing:-.02em;color:#779853}
#example .bb-price-band{margin-top:15px;border:1px solid #e2ead8;background:#f7faf2;border-radius:6px;padding:12px}
#example .bb-price-band>small{font-size:6px;letter-spacing:.07em;color:#9fb28a;display:block}
#example .bb-price-band>b{font-size:31px;font-weight:500;letter-spacing:-.06em;line-height:1.5;color:#83a561;display:block}
#example .bb-price-band>span{font-size:7px;color:#a7b894;display:block;line-height:1.7}
#example .bb-time-blocks{margin-top:15px;border-radius:6px;overflow:hidden;border:1px solid #d9e7cb}
#example .bb-time-blocks>span{display:block;padding:12px 9px;background:#edf5e3;font-size:10px;color:#89a971}
#example .bb-time-blocks>b{display:block;padding:8px 9px;background:repeating-linear-gradient(-45deg,#f5f7ee 0 5px,#e8eedc 5px 6px);font-size:8px;color:#9fb389;font-weight:400;border-top:1px dashed #cddfba}
#example .bb-room-state{display:flex;align-items:center;gap:11px;background:#f5f9ee;border:1px solid #e2ecd6;border-radius:6px;padding:12px 10px;margin-top:15px}
#example .bb-room-state>span{font-size:24px;font-weight:400;letter-spacing:-.05em;color:#a0bb82}
#example .bb-room-state>b{font-size:10px;font-weight:500;line-height:1.7;color:#8eab70}
#example .bb-date-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
#example .bb-date-pair>span{font-size:7px;display:block;text-align:center;border:1px solid #dce8ce;background:#f5f9ee;border-radius:5px;padding:9px;color:#9bb784}
#example .bb-date-pair b{display:block;font-size:28px;font-weight:400;line-height:1.5;color:#8caf6c}
#example .bb-check-items{display:grid;gap:9px;border:1px solid #e0ead5;background:#f6faf0;border-radius:5px;padding:12px 10px;margin-top:15px}
#example .bb-check-items>span{font-size:8px;line-height:1.7;color:#8eab73}
#example .bb-tool-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:15px}
#example .bb-tool-pills>span{border:1px solid #d9e7cb;background:#f2f8e9;border-radius:5px;padding:8px;font-size:8px;color:#87a46b}
#example .bb-runsheet{display:grid;margin-top:15px;border:1px solid #e2ecd6;border-radius:5px;overflow:hidden}
#example .bb-runsheet>span{display:flex;justify-content:space-between;gap:10px;padding:10px 8px;font-size:8px;color:#9bb687;background:#f6faf0}
#example .bb-runsheet>span+span{border-top:1px solid #e1ebd4}
#example .bb-runsheet b{font-weight:500;color:#87a86b}
#example .bb-approval{border:1px solid #dce9ce;background:#f6faef;border-radius:5px;margin-top:15px;padding:11px}
#example .bb-approval>span{font-size:8px;color:#a2b88f;display:block}
#example .bb-approval>b{font-size:26px;font-weight:500;letter-spacing:-.05em;color:#89ad68;display:block;margin:7px 0 11px}
#example .bb-approval small{background:#87a96a;color:#fff;display:block;text-align:center;border-radius:4px;font-size:8px;padding:7px}
#example[data-variant="1"] .bp-explore-content>.bp-simulator,#example[data-variant="1"] .bp-explore-content>.bp-controls,#example[data-variant="1"] .bp-explore-content>.bp-bottom{display:none}
#example .bb-kind-1 .bb-actor{width:77%;left:-7%;height:355px;top:31px}
#example .bb-kind-1 .bb-scene-bubble{top:51px;left:5%}
#example .bb-kind-2 .bb-actor{left:-3%;width:72%;height:350px}
#example .bb-kind-4 .bb-actor{left:-5%;width:76%;top:30px;height:350px}
#example .bb-kind-5 .bb-actor{top:51px;height:330px}
#example .bb-kind-6 .bb-actor{width:76%;left:-4%;height:350px;top:38px}
@media(max-width:1100px) and (min-width:901px){#example .bb-system-card{width:39%;right:12px;padding:14px 12px}#example .bb-system-card>strong{font-size:16px}#example .bb-scene-bubble{font-size:11px;padding:10px 11px;max-width:46%}#example .bb-card-top>small{font-size:5px}#example .bb-system-mark{font-size:16px}}
@media(max-width:900px){#example .bb-stage{max-width:800px;margin:auto}#example .bp-visual{margin:15px 20px 0}#example .bp-example-picks{padding-top:18px}}
@media(max-width:540px){#example .bp-example-picks{padding:15px 12px 0;gap:6px}#example .bp-example-picks>button{font-size:10px;padding:10px;min-height:42px}#example .bp-example-picks>button>span{font-size:8px}#example .bp-road-head{padding:17px 15px 0}#example .bp-visual{margin:12px 10px 0;min-height:470px}#example .bb-stage{height:470px}#example .bb-actor,#example .bb-kind-1 .bb-actor,#example .bb-kind-2 .bb-actor,#example .bb-kind-4 .bb-actor,#example .bb-kind-5 .bb-actor,#example .bb-kind-6 .bb-actor{left:0;top:23px;width:100%;height:265px}#example .bb-kind-1 .bb-actor{top:25px;height:270px}#example .bb-kind-5 .bb-actor{height:250px;top:38px}#example .bb-scene-setting{top:12px;left:12px}#example .bb-scene-setting>span{font-size:6px}#example .bb-scene-bubble,#example .bb-kind-1 .bb-scene-bubble{font-size:10px;line-height:1.6;left:10px;top:41px;max-width:68%;padding:8px 10px;background:#fafcf5eb}#example .bb-system-card{left:13px;right:13px;top:auto;bottom:30px;width:auto;padding:13px 14px;min-height:139px;box-shadow:0 5px 20px #516c3410}#example .bb-card-top{margin-bottom:10px;padding-bottom:9px}#example .bb-card-top>small{font-size:6px}#example .bb-system-mark{font-size:17px}#example .bb-system-kicker{font-size:7px;margin-bottom:5px}#example .bb-system-card>strong{font-size:18px;max-width:100%;line-height:1.3}#example .bb-system-card>p{font-size:9px;line-height:1.8;margin-top:9px}#example .bb-concept-note{font-size:6px;bottom:10px;left:13px}#example .bp-animation-credit{font-size:8px;line-height:1.8;margin-bottom:13px}#example .bp-film-footer{padding:14px 16px 18px}#example .bb-step-confirm{display:none}#example .bb-table-code{position:absolute;right:13px;top:39px;width:77px;display:block;padding:7px;text-align:center;margin:0}#example .bb-table-code>span{font-size:35px;line-height:1.1;display:block}#example .bb-table-code>b{font-size:8px;display:block;margin-top:4px}#example .bb-table-code>small{display:none}#example .bb-kind-1[data-scene="0"] .bb-system-card>strong{max-width:165px}#example .bb-kind-1[data-scene="0"] .bb-system-card>p{max-width:170px}#example .bb-split-tickets{margin-top:11px}#example .bb-split-tickets>span{font-size:7px;padding:7px 9px}#example .bb-split-tickets b{font-size:10px;margin-top:3px}#example .bb-receipt{margin-top:9px;padding:8px 11px}#example .bb-receipt>span{font-size:13px}#example .bb-price-band{position:absolute;right:12px;top:41px;padding:8px;width:100px;margin:0}#example .bb-price-band>small{font-size:5px}#example .bb-price-band>b{font-size:26px;line-height:1.4}#example .bb-price-band>span{font-size:6px}#example .bb-kind-0.bb-variant-0 .bb-system-card>strong{max-width:155px}#example .bb-kind-0.bb-variant-0 .bb-system-card>p{max-width:165px}#example .bb-time-blocks{margin-top:10px;display:flex}#example .bb-time-blocks>*{flex:1}#example .bb-time-blocks>span{padding:9px;font-size:9px}#example .bb-time-blocks>b{padding:9px;font-size:8px;border-top:0;border-left:1px dashed #cddfba}#example .bb-room-state{margin-top:10px;padding:7px 10px}#example .bb-room-state>span{font-size:21px}#example .bb-room-state>b{font-size:10px}#example .bb-date-pair{position:absolute;right:13px;top:41px;margin:0;width:86px;gap:5px}#example .bb-date-pair>span{font-size:5px;padding:5px}#example .bb-date-pair b{font-size:20px}#example .bb-kind-4.bb-variant-0 .bb-system-card>strong{max-width:170px}#example .bb-kind-4.bb-variant-0 .bb-system-card>p{max-width:170px}#example .bb-check-items{margin-top:9px;gap:5px;grid-template-columns:1fr;padding:9px 10px}#example .bb-check-items>span{font-size:8px}#example .bb-tool-pills{margin-top:9px}#example .bb-tool-pills>span{font-size:9px;padding:7px 8px}#example .bb-runsheet{margin-top:10px;grid-template-columns:1fr 1fr}#example .bb-runsheet>span{font-size:8px;padding:9px}#example .bb-runsheet>span+span{border-top:0;border-left:1px solid #e1ebd4}#example .bb-approval{position:absolute;right:13px;top:40px;width:95px;margin:0;padding:8px}#example .bb-approval>span{font-size:6px}#example .bb-approval>b{font-size:23px;margin:5px 0 7px}#example .bb-approval small{font-size:6px;padding:6px}#example .bb-kind-3.bb-variant-0[data-scene="1"] .bb-system-card>strong{max-width:160px}#example .bb-kind-3.bb-variant-0[data-scene="1"] .bb-system-card>p{max-width:160px}}
@media(prefers-reduced-motion:reduce){#example .bb-stage *{animation:none!important;transition:none!important}}
/* Keep the important message readable beside the artwork. */
#example .bb-system-card>strong{color:#3d552e}
#example .bb-system-card>p{color:#6b7e5a}
#example .bb-system-kicker{color:#778a65}
#example .bb-scene-bubble{color:#526e3d}
#example .bb-card-top>small{color:#829571}
@media(max-width:540px){#example .bb-system-card:has(.bb-table-code)>strong{max-width:165px}#example .bb-system-card:has(.bb-table-code)>p{max-width:170px}}