.reference-media.demo-showcase{container-type:inline-size;aspect-ratio:auto;height:510px;max-height:none;border:1px solid #d7d7d4;border-radius:18px;background:#fff;box-shadow:0 20px 55px #22221e12;overflow:hidden;display:flex;flex-direction:column;font-family:'Poppins',sans-serif;font-size:13px;line-height:1.4;color:#22221e;text-align:start}
.demo-showcase *{box-sizing:border-box}.demo-showcase button,.demo-showcase select{font:inherit;color:#22221e;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer}.demo-showcase button:hover,.demo-showcase button:focus-visible{background:#EF5E20;border-color:#EF5E20;color:#FFFFFF}.demo-showcase button:focus-visible,.demo-showcase select:focus-visible{outline:2px solid #22221e;outline-offset:2px}
.demo-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;min-height:52px;background:#f5f5f4;border-bottom:1px solid #e5e5e3;gap:10px}.demo-identity{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap}.demo-locale select{padding:6px;max-width:115px;font-size:12px}.demo-chapters{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid #e5e5e3}.demo-chapters button{flex:1;min-height:34px;padding:6px 10px;font-size:12px;white-space:normal}.demo-chapters button span:first-child{opacity:.55;margin-inline-end:5px}.demo-chapters button[aria-pressed=true]{background:#22221e;border-color:#22221e;color:#fff}
.demo-scene{flex:1;min-height:0;position:relative;background:#f7f7f7;overflow:hidden}.demo-stage{height:100%;animation:demo-enter .55s ease both}.demo-chat{padding:20px clamp(16px,5cqw,36px);display:flex;flex-direction:column;gap:14px;justify-content:center;background:radial-gradient(ellipse at 100% 0,#EF5E20,transparent 70%),#fff}.demo-chat-title{display:flex;justify-content:space-between;font-size:13px;font-weight:600}.demo-chat-title span:last-child{color:#777}.demo-prompt{margin-inline-start:24px;padding:15px 18px;background:#f0f0ef;border:1px solid #e9e9e7;border-radius:17px 17px 4px 17px;font-size:clamp(13px,2.2cqw,15px);line-height:1.5}.demo-prompt p{font:inherit;margin:0;text-wrap:wrap}.demo-ai-reply{display:flex;align-items:flex-start;gap:10px;font-size:13px}.demo-ai-reply img{flex:none;margin-top:1px}.demo-work{display:flex;gap:7px;flex-wrap:wrap;margin-inline-start:32px}.demo-work span{border:1px solid #ddd;border-radius:20px;padding:5px 9px;font-size:11px;background:white;transition:opacity .5s}.demo-work span.waiting{opacity:.25}.demo-spark{color:#22221e;font-size:17px}.demo-cursor{display:inline-block;width:2px;height:1em;background:#22221e;vertical-align:middle;animation:demo-blink 1s steps(2) infinite}
.demo-editor{display:flex;flex-direction:column}.demo-appbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#eee;border-bottom:1px solid #ddd;gap:6px;font-size:12px}.demo-app-title{display:flex;align-items:center;gap:6px;font-weight:600}.demo-tag{background:#fff;border:1px solid #d5d5d5;padding:3px 7px;border-radius:6px;font-size:10px;white-space:nowrap}.demo-language-tabs{display:flex;gap:0;background:#f3f3f3;border-bottom:1px solid #ddd;font-size:11px}.demo-language-tabs span{padding:7px 12px;border-inline-end:1px solid #ddd;white-space:nowrap}.demo-language-tabs span.active{background:white;font-weight:600;box-shadow:inset 0 -2px #22221e}.demo-language-tabs span i{font-style:normal;color:#597161;margin-inline-start:4px}.demo-editor-body{display:grid;grid-template-columns:1fr 132px;min-height:0;flex:1}.demo-email-area{overflow:hidden;padding:0 12px 12px}.demo-subject{background:#fff;border-bottom:1px solid #ddd;padding:7px 8px;font-size:10px;display:flex;gap:12px;white-space:nowrap;overflow:hidden}.demo-subject span{color:#777}.demo-toolbar{font-size:10px;padding:6px 3px;display:flex;justify-content:space-between;color:#555}.demo-email{background:#fff;max-width:340px;margin:0 auto;padding:12px 14px 18px;text-align:center;border:1px solid #eee;animation:demo-enter .7s ease}.demo-shop{font-weight:700;font-size:11px;letter-spacing:2px;margin-bottom:8px}.demo-shop-nav{border-block:1px solid #e5e5e0;display:flex;justify-content:space-around;font-size:8px;padding:5px 0;margin-bottom:10px}.demo-email h3{font-family:'Poppins',sans-serif;font-size:clamp(28px,6.5cqw,47px);line-height:.88;letter-spacing:-.025em;font-weight:700;margin:0}.demo-email h3 span{display:block}.demo-email .demo-offer{font-family:'Poppins',sans-serif;display:inline-block;font-size:clamp(17px,3.4cqw,23px);line-height:1.1;background:#22221e;color:#fff;padding:2px 6px;margin-top:5px}.demo-email p{font-size:12px;font-weight:600;border-top:1px solid #e5e5e0;margin:10px 0 0;padding-top:7px}.demo-inspector{background:white;border-inline-start:1px solid #ddd;padding:10px;font-size:10px;display:flex;flex-direction:column;gap:9px}.demo-inspector strong{font-size:11px}.demo-field{padding:5px;border:1px solid #ddd;border-radius:5px}.demo-swatch{width:22px;height:22px;border-radius:5px;background:#22221e}.demo-slider{height:3px;background:#ddd;margin:4px 0;position:relative}.demo-slider:before{content:'';width:10px;height:10px;background:#22221e;position:absolute;top:-3px;inset-inline-start:18%;border-radius:100%}
.demo-flow{background:#f7f7f7;display:flex;flex-direction:column}.demo-flow-canvas{padding:10px 14px 12px 34px;overflow:auto;position:relative;flex:1;scrollbar-width:thin}.demo-flow-canvas:before{content:'';position:absolute;inset-inline-start:20px;top:25px;bottom:26px;width:2px;background:#6c96b4}.demo-node{position:relative;background:#fff;border:1px solid #d7d7d7;border-radius:8px;margin-bottom:8px;padding:8px 10px;transition:opacity .6s,transform .6s}.demo-node:before{content:'';position:absolute;inset-inline-start:-15px;top:20px;width:14px;height:2px;background:#6c96b4}.demo-node.waiting{opacity:0;transform:translateY(12px)}.demo-node-title{font-weight:600;font-size:11px;display:flex;justify-content:space-between;gap:6px}.demo-node p{font-size:10px;color:#555;margin:4px 0;text-wrap:wrap}.demo-node .demo-language-tabs{font-size:9px;border:1px solid #eee;border-radius:5px;overflow:hidden;margin-top:5px}.demo-node .demo-language-tabs span{padding:3px 7px}.demo-flow .demo-language-tabs i{color:#557e61}.demo-ready{font-size:10px;padding:2px 7px;border-radius:10px;background:#fff;border:1px solid #ccc}
.demo-caption{display:flex;align-items:center;gap:7px;min-height:43px;padding:8px 16px;background:#fff;font-size:12px;border-top:1px solid #e6e6e6}.demo-status{font-size:18px}.demo-progress{height:2px;background:#e9e9e7;flex:none}.demo-progress>span{display:block;height:100%;width:0;background:#EF5E20;transition:width .2s linear;color:#FFFFFF}.demo-controls{display:flex;align-items:center;justify-content:space-between;padding:3px 10px 3px 16px;min-height:41px;font-size:10px;color:#757570;gap:4px}.demo-controls>div{display:flex;gap:3px}.demo-controls button{width:34px;height:34px;font-size:18px;border:0}.demo-fallback{padding:30px}.demo-fallback p{font:inherit;margin-top:16px}
@keyframes demo-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes demo-blink{50%{opacity:0}}
.demo-showcase[data-paused=true] .demo-cursor{animation-play-state:paused!important}
@container(max-width:430px){.demo-inspector{display:none}.demo-editor-body{grid-template-columns:1fr}.demo-chat{padding:16px;gap:12px}.demo-prompt{margin-inline-start:8px;padding:12px}.demo-work{margin-inline-start:0}.demo-language-tabs span{padding:7px 10px}.demo-email{max-width:300px}.demo-email h3{font-size:40px}.demo-email .demo-offer{font-size:20px}.demo-chapters{padding:8px;gap:5px}.demo-top{padding-inline:12px}.demo-caption{font-size:11px;padding-inline:12px}.demo-node .demo-language-tabs span{padding:3px 5px}}
@media(max-width:900px){.reference-media.demo-showcase{height:510px;max-height:none}}
@media(prefers-reduced-motion:reduce){.demo-showcase *{animation:none!important;transition:none!important}}
.demo-showcase .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-email{padding:8px 12px 12px}.demo-email h3{font-size:clamp(28px,5.5cqw,37px)}.demo-email .demo-offer{font-size:clamp(16px,3cqw,21px)}.demo-shop{margin-bottom:5px}.demo-shop-nav{margin-bottom:7px}.demo-email>*{animation:demo-enter .5s both}.demo-email>:nth-child(2){animation-delay:.15s}.demo-email>:nth-child(3){animation-delay:.35s}.demo-email>:nth-child(4){animation-delay:.55s}.demo-email>:nth-child(5){animation-delay:.75s}
.reference-media.demo-showcase{height:540px}.demo-email-area,.demo-inspector{min-height:0;overflow:hidden}.demo-editor-body{grid-template-rows:minmax(0,1fr)}

/* A single product canvas with a discreet playback footer. */
.reference-media.demo-showcase{border-color:#e7e7e4;border-radius:20px;box-shadow:0 14px 42px #22221e09}
.demo-controls{min-height:48px;padding:7px 12px 7px 18px;gap:12px;font-size:11px;line-height:1.5;color:#63635e}
.demo-controls>span{max-width:calc(100% - 114px)}
.demo-controls>div{flex-shrink:0}
.demo-progress{height:1px;background:#efefed}
.demo-chat{padding:32px clamp(20px,6cqw,42px);gap:20px;background:#fff}
.demo-prompt{background:#f5f5f3;border-color:transparent;border-radius:16px 16px 4px 16px}
.demo-appbar{background:#fafaf9;padding-block:12px;border-bottom-color:#e9e9e6}
.demo-scene{background:#fafaf9}

/* Product editor reconstructed from the supplied Sendvio screenshot. */
.faithful-editor{display:grid;grid-template-columns:minmax(0,70fr) minmax(0,30fr);gap:0;padding:0;background:#fff;font-family:Arial,sans-serif;color:#303030;font-size:clamp(7px,1.05cqw,9px);line-height:1.4}
.faithful-main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:white;border:1px solid #e7e7e7;border-radius:8px 8px 0 0}
.faithful-tabs{height:30px;flex:none;display:flex;background:#f7f7f7;border-bottom:1px solid #e7e7e7;white-space:nowrap}
.faithful-tabs>span{padding:8px;display:flex;gap:4px;align-items:center;border-inline-end:1px solid #e7e7e7;border-radius:8px 8px 0 0}
.faithful-tabs>span.active{background:white;font-weight:600}
.faithful-editor .ui-icon{width:10px;height:10px;flex:none}
.faithful-meta{padding:4px 9px;background:#fff}
.faithful-meta>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid #eee}
.faithful-meta>div:last-child{border-bottom:0}
.faithful-meta>div>span:first-child{color:#777}
.faithful-meta>div>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faithful-toolbar{display:flex;align-items:center;gap:12px;padding:8px 10px;border-block:1px solid #e8e8e8;flex:none}
.faithful-toolbar>.ui-icon,.faithful-toolbar>.redo{opacity:.4}.faithful-toolbar .redo{transform:scaleX(-1);display:flex}
.faithful-personalize{padding-inline-start:8px;border-inline-start:1px solid #999}
.faithful-canvas{flex:1;min-height:0;overflow:hidden;margin:8px 9px 0;background:#f8f8f8}
.faithful-template{width:82%;max-width:365px;margin:14px auto 0;text-align:center}
.faithful-wordmark{display:block;width:110px;height:auto;padding:4px 7px;border:0;border-radius:0;margin:0 auto 16px}
.faithful-message{background:#222;color:white;border-radius:24px;padding:22px 0 20px}
.faithful-message h3{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;font-weight:700;font-size:clamp(21px,3.5cqw,29px);line-height:1.08;letter-spacing:-.02em;margin:0 12px 12px;color:#fff}
.faithful-message p{font-family:Arial,sans-serif;font-size:clamp(9px,1.4cqw,11px);line-height:1.5;font-weight:400;margin:0 16px 6px;color:#fff;text-wrap:pretty}
.faithful-selected{position:relative;padding:8px;background:#3e3e3e;outline:1px solid #3983dc}
.faithful-cta{display:block;width:46%;min-width:110px;margin:auto;padding:7px 10px;border-radius:35px;background:#EF5E20;color:#fff;font-family:Arial,sans-serif;font-size:11px;font-weight:700}
.faithful-handle{position:absolute;inset-inline-start:-22px;top:1px;width:20px;height:20px;background:white;color:#222;border:1px solid #ccc;border-radius:4px;display:grid;place-items:center}
.faithful-next{position:relative;display:flex;gap:12px;text-align:start;margin-top:12px;border-radius:24px;background:linear-gradient(110deg,#1d0e03,#713007);padding:18px 20px;overflow:hidden;color:white;min-height:125px}
.faithful-next>strong{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:18px;line-height:1.1;flex:1;padding-top:8px}.faithful-next em{display:block;font-style:normal;color:#EF5E20;font-size:27px}
.faithful-mini-chat{width:46%;background:#fff;border:1px solid #ddd;border-radius:7px;padding:8px;color:#333;font:6px Arial,sans-serif;transform:rotate(1deg)}.faithful-mini-chat p{margin:8px 0;background:#f2f2f2;padding:7px;border-radius:6px}
.faithful-inspector{min-width:0;background:white;border-radius:8px 8px 0 0;overflow:hidden}
.faithful-inspector header{height:32px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #eee;position:relative;font-size:11px}.faithful-inspector header>.ui-icon{position:absolute;inset-inline-start:10px;transform:rotate(90deg)}
.faithful-settings{padding:0 8px}.faithful-settings h4{font:600 8px Arial,sans-serif;margin:9px 0;padding-top:9px;border-top:1px solid #e8e8e8}.faithful-setting{display:grid;grid-template-columns:43% minmax(0,1fr);gap:5px;align-items:center;min-height:23px}.faithful-input{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;overflow:hidden;border:1px solid #bcbcbc;border-radius:4px;padding:3px 5px;font-size:7px}
.faithful-range{position:relative;display:block;text-align:end;font-size:7px;white-space:nowrap;padding-inline-start:40%;background:linear-gradient(#333,#333) left center/45% 2px no-repeat}.faithful-range:before{content:'';position:absolute;inset-inline-start:25%;top:50%;transform:translateY(-50%);height:8px;width:8px;border-radius:50%;background:#333}
.faithful-style{display:flex;gap:4px}.faithful-style>*{flex:1;text-align:center;border:1px solid #bbb;border-radius:4px;font-size:7px;padding:2px;font-style:normal;font-weight:400}.faithful-style b{background:#ccc}
.faithful-color{width:22px;height:16px;background:#EF5E20;border:1px solid #999;border-radius:3px}.faithful-color.white{background:white}
@container(max-width:430px){.faithful-editor{grid-template-columns:1fr}.faithful-inspector{display:none}.faithful-template{width:78%;max-width:320px}.faithful-message h3{font-size:24px}.faithful-message p{font-size:10px}.faithful-meta{font-size:8px}.faithful-tabs{font-size:9px}}
.faithful-editor .icon-chevron-down{--icon:url('icons/lucide/chevron-down.svg')}
.faithful-editor .icon-plus{--icon:url('icons/lucide/plus.svg')}
.faithful-editor .icon-menu{--icon:url('icons/lucide/menu.svg')}
.demo-showcase .faithful-editor .ui-icon{width:10px;height:10px}

/* Workflow editor follows the supplied Sendvio product reference. */
.faithful-flow{display:flex;flex-direction:column;padding:0;background:#fff;color:#303030;font-family:Arial,sans-serif;font-size:clamp(8px,1.22cqw,10px)}
.workflow-title{flex:none;background:white;border:1px solid #e1e1e1;border-bottom:0;border-radius:9px 9px 0 0;margin:0;padding:10px 9px 7px;font:600 10px Arial,sans-serif}
.faithful-flow .workflow-canvas{position:relative;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:3px;padding:20px 14px 28px 46px;scrollbar-width:none;overscroll-behavior:contain;box-shadow:inset 0 1px 2px #00000004}
.workflow-canvas:before{display:none}.workflow-canvas::-webkit-scrollbar{display:none}
.workflow-rail{position:relative;border-inline-start:1.5px solid transparent;padding-inline-start:23px;margin-inline-start:-23px}
.workflow-rail:before{content:"";position:absolute;inset-inline-start:-1px;top:10px;bottom:0;width:24px;border-inline-start:1px solid #0064e6;border-top:1px solid #0064e6;border-top-left-radius:10px;pointer-events:none}
.workflow-card{position:relative;background:white;border:1px solid #ddd;border-radius:9px;margin:0 0 25px;box-shadow:0 1px 1px #00000006;transition:opacity .6s ease,transform .6s ease}
.workflow-card:before{content:'';position:absolute;inset-inline-start:-25px;top:10px;width:24px;height:11px;border-inline-start:1px solid #0064e6;border-bottom:1px solid #0064e6;border-bottom-left-radius:8px}
.workflow-trigger:before{display:none}.workflow-trigger{margin-top:0}
.workflow-card.waiting{opacity:0;transform:translateY(12px)}
.workflow-card header{min-height:34px;padding:9px 11px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #e9e9e9;font-size:clamp(9px,1.35cqw,11px);line-height:1.3}
.workflow-card header strong{font-weight:600}.workflow-card header>span:not(.workflow-delete){color:#666}
.workflow-icon{width:13px;height:13px;flex:none}.workflow-delete{color:#b00020;margin-inline-start:auto;display:flex}
.workflow-add{position:absolute;inset-inline-start:-33px;top:-20px;width:16px;height:16px;border:1px solid #0064e6;border-radius:50%;display:grid;place-items:center;font:20px/13px Arial,sans-serif;color:#0064e6;background:#f7f7f7}
.workflow-card-body{padding:10px;display:grid;gap:7px}
.workflow-field{position:relative;border:1px solid #ddd;border-radius:8px;padding:10px 22px 10px 10px;box-shadow:0 1px 1px #00000006;background:#fff}
.workflow-field h4{font:600 8px/1.4 Arial,sans-serif;margin:0 0 5px;color:#333}
.workflow-field ul{padding-inline-start:13px;margin:0;list-style:disc}.workflow-field li{margin:2px 0;font:inherit;line-height:1.5}
.workflow-field p{margin:0;font:inherit;line-height:1.5;color:#555}
.workflow-chevron{position:absolute;inset-inline-end:14px;top:50%;height:5px;width:5px;border-top:1px solid #888;border-inline-end:1px solid #888;transform:rotate(45deg)}
.workflow-template{padding-inline-end:10px}.workflow-template>h4{margin-bottom:8px}
.workflow-tabs{display:flex;align-items:stretch;font-size:clamp(6px,1.07cqw,9px);white-space:nowrap}
.workflow-tabs>span{padding:5px 7px;background:#f7f7f7;border:1px solid #e9e9e9;border-bottom:0;display:flex;align-items:center;gap:4px}
.workflow-tabs>span:first-child{border-radius:8px 8px 0 0}.workflow-tabs>span:last-child{border-radius:0 8px 0 0;color:#666}
.workflow-tabs>span.active{background:white;font-weight:600}.workflow-tabs b{background:#a5f9bd;color:#174c3c;font-weight:400;padding:1px 5px;border-radius:12px}.workflow-tabs i{width:5px;height:5px;border-radius:50%;background:#a5f9bd}
.workflow-add-language{display:inline-grid;place-items:center;border:1px solid #999;width:8px;height:8px;border-radius:50%;font:8px/1 Arial,sans-serif}
.workflow-envelope{display:grid;grid-template-columns:24% 1fr auto;gap:8px;border:1px solid #e8e8e8;border-radius:0 8px 8px 8px;padding:9px}
.workflow-envelope>div:first-child{border-inline-end:1px solid #ddd;padding-inline-end:5px}.workflow-envelope>div>span{display:block;color:#666;margin-bottom:3px}.workflow-envelope p{color:#303030}.workflow-more{align-self:center;font-weight:bold}
@container(max-width:430px){
 .faithful-flow{padding:0;font-size:9px}
 .faithful-flow .workflow-canvas{padding:16px 7px 22px 30px}
 .workflow-rail{padding-inline-start:15px;margin-inline-start:-15px}
 .workflow-rail:before{width:16px;border-top-left-radius:8px}
 .workflow-card:before{inset-inline-start:-17px;width:16px}.workflow-add{inset-inline-start:-24px;width:14px;height:14px;font-size:18px}
 .workflow-card header{padding:9px 7px;gap:4px;font-size:9px}.workflow-card-body{padding:7px}
 .workflow-field{padding:9px 17px 9px 8px}.workflow-template{padding-inline-end:8px}
 .workflow-tabs{flex-wrap:wrap;font-size:7px}.workflow-tabs>span{padding:5px 4px}
 .workflow-envelope{grid-template-columns:26% 1fr auto;gap:6px;padding:7px;font-size:8px}
}

/* Editor surfaces meet the outer cream frame without a gray gutter. */
.faithful-main{border:0;border-radius:0}
.faithful-inspector{border-inline-start:1px solid #e7e7e7;border-radius:0}
.workflow-title{border:0;border-bottom:1px solid #e3e3e3;border-radius:0}
.faithful-flow .workflow-canvas{border:0;border-radius:0;box-shadow:none}

/* Visible task execution, replacing the static progress badges. */
.demo-chat{gap:14px;padding:24px clamp(18px,5cqw,34px);overflow-y:auto;justify-content:center}
.demo-execution{list-style:none;padding:0;margin:0 0 0 28px;display:grid;gap:11px;font-size:12px;line-height:1.5}
.demo-execution li{display:flex;align-items:flex-start;gap:10px;transition:opacity .35s ease,transform .35s ease;min-height:18px}
.demo-execution .is-pending,.demo-ai-reply.is-pending{opacity:0;visibility:hidden;transform:translateY(5px)}
.demo-ai-reply{transition:opacity .35s ease; font-size:12px}
.execution-indicator{width:16px;height:16px;flex:none;margin-top:1px;display:grid;place-items:center;border-radius:50%}
.execution-indicator>.ui-icon{width:13px;height:13px;display:none}
.is-running .execution-indicator{border:1.5px solid #e4e4e4;border-top-color:#EF5E20;animation:execution-spin .85s linear infinite}
.is-complete .execution-indicator{color:#666}.is-complete .execution-indicator>.ui-icon{display:block}
.demo-execution .is-complete{color:#777}.demo-execution .is-running{color:#22221e}
.demo-cursor.is-finished{visibility:hidden}
.demo-showcase[data-paused=true] .execution-indicator{animation-play-state:paused}
@keyframes execution-spin{to{transform:rotate(360deg)}}
@container(max-width:430px){.demo-chat{justify-content:flex-start;padding:18px 16px;gap:12px}.demo-execution{margin-inline-start:0;font-size:11px;gap:8px}.demo-prompt{font-size:12px}.demo-ai-reply{font-size:11px}}
@media(prefers-reduced-motion:reduce){.demo-execution li,.demo-ai-reply{transition:none}.execution-indicator{animation:none}}

/* Soft ambient halo reflects processing without moving around the frame. */
@property --demo-halo-strength{syntax:'<number>';initial-value:0;inherits:false}
@property --demo-halo-breath{syntax:'<number>';initial-value:.6;inherits:false}
.reference-hero-grid .reference-media.demo-showcase{
 border-color:#FFF8F5;background:#fff;
 --demo-halo-strength:0;--demo-halo-breath:.6;
 --demo-depth-shadow:0 4px 12px -4px rgba(239,94,32,.12),0 20px 48px -14px rgba(239,94,32,.20),0 36px 72px -28px rgba(239,94,32,.14);
 box-shadow:var(--demo-depth-shadow),
  0 0 0 1px rgba(239,94,32,calc(var(--demo-halo-strength) * var(--demo-halo-breath) * .32)),
  0 0 24px 3px rgba(239,94,32,calc(var(--demo-halo-strength) * var(--demo-halo-breath) * .28)),
  0 0 56px 10px rgba(239,94,32,calc(var(--demo-halo-strength) * var(--demo-halo-breath) * .24));
 transition:--demo-halo-strength 1s ease;
 animation:demo-halo-breathe 3.6s ease-in-out infinite;
 animation-play-state:paused;
}
.reference-hero-grid .reference-media.demo-showcase[data-processing=true]{--demo-halo-strength:1;animation-play-state:running}
.reference-hero-grid .reference-media.demo-showcase[data-paused=true]{animation-play-state:paused}
@keyframes demo-halo-breathe{0%,100%{--demo-halo-breath:.6}50%{--demo-halo-breath:1}}
@media(prefers-reduced-motion:reduce){
 .reference-hero-grid .reference-media.demo-showcase{animation:none;transition:none;--demo-halo-strength:0;box-shadow:var(--demo-depth-shadow)}
}

/* A conversation begins in the composer, then moves into the message history. */
.demo-chat{justify-content:flex-start;padding:18px 22px;gap:0;overflow:hidden}
.demo-chat-title{flex:none;padding:0 0 14px;border-bottom:1px solid #eee;min-height:33px;font-size:12px;font-weight:500;color:#303030}
.demo-chat-title [data-conversation-title]{color:#303030;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-transcript{flex:1;min-height:0;overflow-y:auto;padding:18px 0;scrollbar-width:thin}
.demo-transcript .demo-prompt{margin:0 0 16px 24px;font-size:12px;line-height:1.55;padding:13px 16px}
.demo-transcript .demo-ai-reply{margin-bottom:14px}
.demo-chat[data-chat-submitted=false] .demo-transcript{visibility:hidden}
.demo-chat[data-chat-submitted=true] .demo-prompt{animation:demo-enter .35s ease both}
.demo-composer{flex:none;display:flex;align-items:flex-end;gap:12px;border:1px solid #dedede;border-radius:12px;padding:12px 13px;background:white;font-size:12px;line-height:1.55;color:#303030;box-shadow:0 1px 3px #00000004}
.demo-composer>div{flex:1;min-width:0;max-height:150px;overflow:auto}
.demo-composer-send{height:25px;width:25px;display:grid;place-items:center;border-radius:50%;background:#22221e;color:white;flex:none}
.demo-composer-placeholder{display:none;color:#858585}
.demo-chat[data-chat-submitted=true] .demo-composer-placeholder{display:inline}
.demo-chat[data-chat-submitted=true] .demo-composer [data-typed],.demo-chat[data-chat-submitted=true] .demo-composer .demo-cursor{display:none}
.demo-chat[data-chat-submitted=true] .demo-composer-send{background:#f1f1f1;color:#999}
@container(max-width:430px){.demo-chat{padding:14px}.demo-transcript{padding:14px 0}.demo-transcript .demo-prompt{margin-inline-start:12px;font-size:11px;padding:10px 12px}.demo-composer{font-size:11px;padding:10px}.demo-execution{font-size:10px}.demo-chat-title{font-size:11px}}
@media(prefers-reduced-motion:reduce){.demo-chat[data-chat-submitted=true] .demo-prompt{animation:none}}

/* Icon and label share a single centered row in every editor control. */
.demo-showcase .demo-language-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1.2}
.demo-language-label{display:block;line-height:1.2}
.demo-language-icon{display:grid;place-items:center;width:10px;height:10px;flex:0 0 10px;border:1px solid currentColor;border-radius:50%;color:#777}
.demo-showcase .demo-language-icon .ui-icon{display:block;width:7px;height:7px;margin:0;vertical-align:0;--icon:url('icons/lucide/plus.svg')}
.demo-showcase :is(.faithful-tabs,.faithful-toolbar,.faithful-input,.faithful-handle,.demo-controls button,.demo-composer-send) .ui-icon{display:block;vertical-align:0;margin:0;flex-shrink:0}
.faithful-tabs>span{line-height:1.2}
.faithful-input{min-height:20px;gap:5px;line-height:1.2}
.faithful-style>*{display:flex;align-items:center;justify-content:center;min-height:19px;line-height:1.2}
.faithful-cta{display:flex;align-items:center;justify-content:center;min-height:29px;line-height:1.2}
.workflow-card header{align-items:center}.workflow-delete{align-items:center;justify-content:center}.workflow-icon{display:block}
.workflow-tabs>span{min-height:23px;line-height:1.2}.workflow-tabs b{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.workflow-add:before,.workflow-add:after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);border-radius:1px}
.workflow-add:before{width:8px;height:1px}.workflow-add:after{width:1px;height:8px}
.demo-controls button{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
@container(max-width:430px){.demo-showcase .demo-language-action{gap:4px}.demo-language-icon{width:9px;height:9px;flex-basis:9px}.demo-showcase .demo-language-icon .ui-icon{width:6px;height:6px}}

/* Match the dashboard sliders: solid fill, dotted remainder, circular thumb, right-hand value. */
.faithful-range{--range-position:45%;display:flex;align-items:center;gap:5px;padding:0;background:none;min-width:0;font-size:7px;line-height:1.2}
.faithful-range:before{display:none}
.faithful-range-track{position:relative;display:block;flex:1;min-width:0;height:12px;background:repeating-linear-gradient(to right,#ddd 0 1px,transparent 1px 2px) left center/100% 2px no-repeat}
.faithful-range-track:before{content:"";position:absolute;inset-inline-start:0;top:50%;width:var(--range-position);height:2px;background:#303030;transform:translateY(-50%)}
.faithful-range-track i{position:absolute;inset-inline-start:var(--range-position);top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:#303030}
.faithful-range-value{flex:none;text-align:end;color:#303030;font-variant-numeric:tabular-nums;white-space:nowrap}
.faithful-range-font{--range-position:8%}
.faithful-setting>.ui-icon{justify-self:end;transform:rotate(-90deg)}
.faithful-settings .faithful-input{width:100%}