/* Continuation: Onest, paper/charcoal and pale lime.
   Design variance 9, motion 7, density 3. Native CSS and existing GSAP.
   Layers: media planes 0–1; content 2; existing site navigation 20+.
   Media radius 6px, controls 8px; one selected theme throughout these sections. */
.motion-preview section.shell:not(#hero){padding-block:112px}.motion-preview .btn,.motion-preview .chip,.motion-preview .form input{border-radius:8px}.motion-preview #stats{padding-top:58px;padding-bottom:32px}.motion-preview .stats{border-top:0;padding:0 0 40px;gap:50px}.motion-preview .stat{display:block}.motion-preview .stat b{display:block;font-size:42px;font-weight:500;margin-bottom:10px}.motion-preview .stat span{display:block;font-size:12px;max-width:180px}.motion-preview #keysy{padding-top:70px}.motion-preview #keysy .sec-head{max-width:100%;margin-bottom:70px}.motion-preview #keysy .portfolio-title{font-size:clamp(64px,8.2vw,120px);line-height:.98;letter-spacing:-.065em}.portfolio-title span{display:block;color:var(--muted)}.motion-preview #keysy .sec-head .lead{max-width:460px;margin-top:30px;font-size:15px}
.motion-preview .work-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:100px 5%;align-items:start}.motion-preview .work-grid .work{grid-column:span 7}.motion-preview .work-grid .work-wide{display:block;grid-column:1/-1;padding:0;background:none;perspective:1600px}.motion-preview .work-grid .work:nth-child(3),.motion-preview .work-grid .work:nth-child(4){grid-column:span 5}.motion-preview .work-grid .work:nth-child(3){margin-top:160px}.motion-preview .work-grid .work:nth-child(5){margin-top:110px}.motion-preview .work-img{border-radius:6px;aspect-ratio:1.32;background:var(--panel);position:relative}.motion-preview .work-img img{object-position:50% 0%;transition:none;transform-origin:center}.motion-preview .work-grid .work-wide .work-img{aspect-ratio:1.85;padding:4% 9%;background:var(--panel);overflow:hidden}.motion-preview .work-wide .work-img img{object-fit:cover;border-radius:3px;box-shadow:0 20px 55px -32px #28302280}.motion-preview .work-grid .work-wide .work-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 8%;padding-top:30px}.motion-preview .work-wide .work-name{font-size:64px;grid-column:1;grid-row:1/3;align-self:start}.motion-preview .work-wide .work-fact{font-size:21px;line-height:1.5;max-width:440px;margin:0}.motion-preview .work-wide .work-tags{grid-column:2;margin:0;gap:8px 18px}.motion-preview .work-wide .case-hint{grid-column:2;justify-self:start}.motion-preview .work-wide .case-body{grid-column:1/-1}.motion-preview .work-meta{padding-top:22px}.motion-preview .work-name{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.2}.motion-preview .work-fact{font-size:14px;max-width:440px;margin-top:12px}.motion-preview .work-ar{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:background .25s,transform .25s}.motion-preview .work:hover .work-ar{background:var(--lime);color:var(--accent-ink);transform:rotate(7deg)}.motion-preview .work:hover .work-img img{transform:none}.motion-preview .case-hint{font-size:12px;min-height:44px;padding-block:10px}.motion-preview .cb{padding-top:25px}.motion-preview .work-wide .cb{display:grid;grid-template-columns:1fr 1fr;gap:25px 8%}
/* Service catalogue: choose a direction, then inspect a real project. */
.motion-preview #ceny{border-top:1px solid var(--line)}.motion-preview #ceny .sec-head{max-width:850px;margin-bottom:55px}.motion-preview #ceny .h-sec{font-size:clamp(40px,5.6vw,80px);line-height:1.04}.service-catalog{display:grid;grid-template-columns:0.85fr 1.15fr;gap:9%;align-items:start;margin-bottom:44px}.service-tabs{display:grid}.service-tabs button{position:relative;text-align:left;display:grid;gap:6px;border:0;border-bottom:1px solid var(--line);padding:25px 50px 26px 0;background:transparent;color:var(--muted);transition:color .25s}.service-tabs button>span:first-child{font-size:clamp(34px,3.8vw,55px);line-height:1.15;letter-spacing:-.05em;font-weight:500}.service-tabs small{font-size:12px;font-weight:400}.service-tabs .service-arrow{position:absolute;right:5px;top:35%;font-size:27px;opacity:0;transform:translate(-8px,8px);transition:opacity .25s,transform .25s}.service-tabs button[aria-selected=true]{color:var(--ink)}.service-tabs button[aria-selected=true] .service-arrow{opacity:1;transform:none}.service-tabs button[aria-selected=true]:after{content:'';position:absolute;left:0;bottom:-1px;right:0;height:2px;background:var(--ink)}.service-panel{outline-offset:9px}.service-art{aspect-ratio:1.58;padding:22px;background:var(--panel);overflow:hidden;border-radius:6px}.service-art img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:3px}.service-detail{padding-top:23px}.service-detail>p{font-size:14px;line-height:1.7;color:var(--muted);max-width:460px;min-height:72px}.service-detail>div{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:21px}.service-detail strong{font-size:24px;letter-spacing:-.035em;font-weight:500;white-space:nowrap}.service-detail .text-link{font-size:12px;border-bottom:1px solid var(--line);gap:15px}.motion-preview .price-fast{background:transparent;border:0;padding:12px 0 28px;margin:0;color:var(--muted);font-size:13px}.motion-preview .price-fast strong{color:var(--ink)}.site-packages{border-block:1px solid var(--line)}.site-packages>summary{display:flex;justify-content:space-between;align-items:center;padding:26px 0;cursor:pointer;list-style:none;font-size:17px;gap:20px}.site-packages>summary::-webkit-details-marker{display:none}.site-packages>summary>span:last-child{font-size:26px;transition:transform .25s}.site-packages[open]>summary>span:last-child{transform:rotate(45deg)}.site-packages .price-grid{margin-bottom:30px;border-radius:6px}.motion-preview .price-more{margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 40px}.motion-preview .pm{border:0;padding:0;display:block}.motion-preview .pm-l{font-size:12px}.motion-preview .pm-v{font-size:17px;margin-top:4px;font-weight:500}
/* A functional diagram, not an imitation of a back-office screenshot. */
.motion-preview .flag{background:var(--paper);border-block:1px solid var(--line);padding-block:110px}.motion-preview .flag>.shell{display:block}.integration-heading .h-sec{font-size:clamp(54px,7vw,100px);line-height:1;letter-spacing:-.06em}.integration-heading .h-sec>span{color:var(--muted)}.integration-heading .lead{max-width:450px;margin-top:28px;font-size:15px}.integration-console{padding:38px 0 12px;margin-top:36px}.flow-choices{display:flex;gap:8px}.flow-choices button{border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);padding:10px 20px;font-size:12px;min-height:42px}.flow-choices button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.integration-map{height:430px;position:relative;isolation:isolate;perspective:1100px;margin-top:20px}.connection-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.connection{fill:none;stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}.signal{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:.08 .92;stroke-dashoffset:1;opacity:0;vector-effect:non-scaling-stroke}.integration-console[data-flow=catalog] .connection.route-catalog,.integration-console[data-flow=order] .connection.route-order,.integration-console[data-flow=order] .connection.route-catalog,.integration-console[data-flow=delivery] .connection.route-delivery{stroke:var(--ink);stroke-width:2}.integration-node{position:absolute;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:6px;min-width:150px;width:19%;padding:23px 15px;text-align:center;transition:border-color .3s,background .3s;transform:translate(-50%,-50%)}.integration-node strong{display:block;font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-.04em}.integration-node span{display:block;color:var(--muted);font-size:11px;margin-top:8px}.node-account{left:14%;top:50%}.node-account strong{font-size:60px;line-height:1}.node-payment{left:87%;top:25%}.node-delivery{left:87%;top:75%}.integration-console[data-flow=catalog] .node-account,.integration-console[data-flow=order] .node-payment,.integration-console[data-flow=delivery] .node-delivery{background:var(--lime);border-color:var(--lime);color:var(--accent-ink)}.integration-console[data-flow=catalog] .node-account span,.integration-console[data-flow=order] .node-payment span,.integration-console[data-flow=delivery] .node-delivery span{color:#4b5639}.integration-store{position:absolute;width:35%;left:33%;top:27%;transform-style:preserve-3d;z-index:1;aspect-ratio:1.6}.integration-store>img{width:100%;height:100%;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:4px;box-shadow:0 25px 50px -30px #28302266}.store-back{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;transform:translate(10px,14px) translateZ(-18px)}.integration-store>span{display:block;text-align:center;margin-top:24px;font-size:12px;color:var(--muted)}.flow-explanation{font-size:15px;min-height:52px;max-width:680px;margin:5px auto 0;text-align:center;color:var(--muted)}.motion-preview .flag .tiers{grid-template-columns:1fr 1.35fr 1fr;gap:45px;margin-top:44px}.motion-preview .flag .tier{border-top:1px solid var(--line);padding:24px 0}.motion-preview .flag .tname{font-size:19px;font-weight:500;letter-spacing:-.02em}.motion-preview .flag .tlist{font-size:12px;line-height:1.7;margin-top:12px}.motion-preview .flag-cta{margin-top:25px;gap:30px}.motion-preview .fc-note{max-width:440px}
/* Process: a stationary heading alongside the actual deliverables. */
.motion-preview #kak{display:grid;grid-template-columns:.9fr 1.1fr;gap:0 10%;align-items:start}.motion-preview #kak .sec-head{position:sticky;top:155px;margin:0}.motion-preview #kak .h-sec{font-size:clamp(48px,5.5vw,78px);line-height:1.04}.process-period{color:#789b30}html[data-tone=dark] .process-period{color:var(--lime)}.motion-preview #kak .lead{font-size:14px;max-width:340px;margin-top:25px}.motion-preview #kak .steps{display:block;padding-bottom:24px}.motion-preview #kak .step{display:grid;grid-template-columns:64px 1fr;gap:5px 25px;padding:28px 0 35px;border:0;border-bottom:1px solid var(--line);position:relative}.motion-preview #kak .step:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(var(--step-progress,0));transform-origin:left}.motion-preview #kak .sn{grid-row:1/3;font-size:38px;font-weight:400;letter-spacing:-.04em;line-height:1.2;color:var(--muted);margin:0}.motion-preview #kak .st{font-size:30px;font-weight:500;letter-spacing:-.035em}.motion-preview #kak .sc{font-size:13px;max-width:330px;margin-top:3px}.motion-preview #kak .svc-chips,.motion-preview #kak .niche-tags,.motion-preview #kak .kak-note{grid-column:1/-1}.motion-preview #kak .svc-chips{margin-top:60px}.motion-preview #kak .svc-chip{background:none;border:0;border-radius:0;font-size:15px;padding:0}.motion-preview #kak .svc-chips{gap:14px 28px}.motion-preview #kak .niche-tags{margin-top:22px}.motion-preview #kak .ntag{border:0;padding:0;border-radius:0;font-size:11px}.motion-preview #kak .kak-note{font-size:12px}
/* Trust, questions and contact settle the pace after the case studies. */
.motion-preview #why{border-top:1px solid var(--line)}.motion-preview #why .h-sec{font-size:clamp(36px,4.2vw,60px);line-height:1.08}.motion-preview .why-grid{gap:10%}.motion-preview .why-points{background:none;padding:0;gap:28px}.motion-preview .wp{display:block;padding-bottom:25px;border-bottom:1px solid var(--line)}.motion-preview .wpn{grid-row:1/3;font-size:27px;line-height:1.2;color:var(--muted);margin:0}.motion-preview .wpt{font-size:20px;font-weight:500;letter-spacing:-.03em}.motion-preview .wpc{font-size:14px;margin-top:10px;line-height:1.7}.motion-preview #faq{gap:8%;grid-template-columns:.85fr 1.15fr}.motion-preview #faq .h-sec{font-size:clamp(40px,4.5vw,64px);line-height:1.05;position:sticky;top:155px;align-self:start}.motion-preview .faq-q{font-size:17px;padding-block:26px}.motion-preview .faq-item.open .faq-q{color:var(--ink)}.motion-preview #zayavka{padding-block:120px}.motion-preview .cta-wrap{gap:9%;grid-template-columns:1fr 1fr;align-items:start}.motion-preview .contact-title{font-size:clamp(66px,7.6vw,110px);line-height:.97;letter-spacing:-.06em}.motion-preview .cta-side .lead{margin-top:32px!important;max-width:375px;font-size:15px}.motion-preview .quiz{margin-top:12px;top:150px;padding:36px;border-radius:6px;background:var(--surface)}.motion-preview .q{font-size:31px;font-weight:500;line-height:1.15}.motion-preview .chips{gap:12px}.motion-preview .chip{padding:18px 12px}.motion-preview .founder{margin-top:34px;gap:20px}.motion-preview .f-ava{width:80px;height:80px;border-radius:6px}.motion-preview .f-txt{max-width:250px}.motion-preview .speed{margin-top:25px}.motion-preview footer{padding-block:58px 28px}.motion-preview .foot-cols{gap:5%}.motion-preview .foot-logo{font-size:36px}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){.motion-preview .work-grid .work:not(.work-wide):hover .work-img img{transform:scale(1.035);transition:transform .7s ease}}
@media(max-width:1100px){.motion-preview section.shell:not(#hero){padding-block:85px}.motion-preview .work-grid{gap:75px 5%}.motion-preview .work-grid .work:nth-child(3){margin-top:100px}.motion-preview .work-grid .work:nth-child(5){margin-top:70px}.motion-preview .work-wide .work-name{font-size:50px}.motion-preview .work-wide .work-fact{font-size:18px}.service-catalog{gap:6%}.service-tabs button>span:first-child{font-size:36px}.service-detail>div{display:flex;flex-wrap:wrap;gap:12px 24px}.service-detail .text-link{margin-top:0}.integration-map{height:360px}.integration-node{min-width:120px;padding:20px 10px}.integration-node strong{font-size:25px}.node-account strong{font-size:50px}.integration-node span{font-size:10px}.motion-preview .flag .tiers{gap:30px}.motion-preview #kak{gap:0 7%}.motion-preview #kak .step{grid-template-columns:48px 1fr;column-gap:15px}.motion-preview #kak .st{font-size:27px}.motion-preview .quiz{padding:26px}.motion-preview .q{font-size:26px}.motion-preview .foot-logo{font-size:28px}}
@media(max-width:767px){.motion-preview section.shell:not(#hero){padding-block:64px}.motion-preview #stats{padding-top:32px;padding-bottom:20px}.motion-preview .stats{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:28px}.motion-preview .stat b{font-size:32px;margin-bottom:7px}.motion-preview .stat span{font-size:11px;max-width:145px}.motion-preview #keysy{padding-top:38px}.motion-preview #keysy .portfolio-title{font-size:clamp(45px,8.6vw,64px);line-height:1.01}.motion-preview #keysy .sec-head{margin-bottom:35px}.motion-preview #keysy .sec-head .lead{font-size:13px;margin-top:22px}.motion-preview .work-grid{display:block}.motion-preview .work-grid .work{margin:0 0 55px!important}.motion-preview .work-grid .work:last-child{margin-bottom:0!important}.motion-preview .work-grid .work-wide .work-img{aspect-ratio:1.4;padding:6%}.motion-preview .work-img{aspect-ratio:1.45}.motion-preview .work-grid .work-wide .work-meta{display:block;padding-top:19px}.motion-preview .work-wide .work-name,.motion-preview .work-name{font-size:32px}.motion-preview .work-wide .work-fact,.motion-preview .work-fact{font-size:13px;margin-top:12px;max-width:100%}.motion-preview .work-wide .work-tags{margin-top:16px;gap:6px 12px}.motion-preview .work-tags span{font-size:10px}.motion-preview .work-wide .cb{display:block}.motion-preview .work-ar{width:34px;height:34px}.motion-preview .work-meta{padding-top:18px}.motion-preview #ceny .h-sec{font-size:clamp(34px,6.8vw,50px)}.motion-preview #ceny .sec-head{margin-bottom:28px}.service-catalog{display:block;margin-bottom:22px}.service-tabs{display:flex;gap:20px;margin-bottom:25px;overflow-x:auto}.service-tabs button{flex:none;padding:12px 0 16px;min-width:0}.service-tabs button>span:first-child{font-size:22px}.service-tabs small{font-size:10px}.service-tabs .service-arrow{display:none}.service-art{padding:16px;aspect-ratio:1.5}.service-detail{padding-top:19px}.service-detail>p{font-size:13px;min-height:0}.service-detail>div{display:flex;margin-top:16px}.service-detail strong{font-size:22px}.service-detail .text-link{font-size:11px;margin-top:0;gap:10px}.motion-preview .price-fast{font-size:12px;line-height:1.8}.site-packages>summary{font-size:14px;padding-block:22px}.motion-preview .price-more{grid-template-columns:1fr 1fr;gap:21px}.motion-preview .pm-l{font-size:11px}.motion-preview .pm-v{font-size:15px}.motion-preview .flag{padding-block:65px}.integration-heading .h-sec{font-size:clamp(45px,8.8vw,64px)}.integration-heading .lead{font-size:13px;max-width:360px;margin-top:22px}.integration-console{margin-top:20px;padding-top:12px}.flow-choices{gap:7px}.flow-choices button{font-size:11px;padding:9px 16px}.integration-map{height:365px;margin-top:20px}.connection-lines{display:none}.integration-node{width:42%;min-width:0;padding:14px 8px;transform:none}.node-account{left:0;top:0;width:36%;height:95px}.node-account strong{font-size:38px}.node-payment{left:0;top:auto;bottom:0;height:84px}.node-delivery{left:auto;right:0;top:auto;bottom:0;height:84px}.integration-node strong{font-size:24px}.node-account strong{font-size:38px}.integration-node span{font-size:9px;margin-top:7px}.integration-store{width:78%;left:20%;top:32%;aspect-ratio:1.6;transform:none}.integration-store>span{margin-top:15px;font-size:11px}.store-back{transform:translate(7px,9px) translateZ(-18px)}.integration-map:before{content:'';position:absolute;left:18%;top:70px;width:38%;height:220px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}.integration-map:after{content:'';position:absolute;left:56%;right:21%;top:53%;bottom:60px;border-right:1px solid var(--line);border-top:1px solid var(--line);z-index:-1}.flow-explanation{text-align:left;font-size:13px;margin-top:22px;min-height:62px}.motion-preview .flag .tiers{display:block;margin-top:20px}.motion-preview .flag .tier{padding:20px 0}.motion-preview .flag .tname{font-size:19px}.motion-preview .flag .tlist{font-size:12px;max-width:450px}.motion-preview .flag-cta{display:block;margin-top:14px}.motion-preview .fc-note{margin-top:18px;font-size:11px}.motion-preview #kak{display:block}.motion-preview #kak .sec-head{position:static;margin-bottom:27px}.motion-preview #kak .h-sec{font-size:46px}.motion-preview #kak .lead{font-size:13px;max-width:450px;margin-top:22px}.motion-preview #kak .step{padding:23px 0;grid-template-columns:48px 1fr;gap:5px 20px}.motion-preview #kak .sn{font-size:31px}.motion-preview #kak .st{font-size:26px}.motion-preview #kak .sc{font-size:12px}.motion-preview #kak .svc-chips{margin-top:26px;gap:12px 24px}.motion-preview #kak .svc-chip{font-size:13px}.motion-preview #kak .niche-tags{gap:10px 18px}.motion-preview .why-grid{display:block}.motion-preview #why .h-sec{font-size:36px}.motion-preview .why-points{display:block;margin-top:35px}.motion-preview .wp{margin-bottom:22px}.motion-preview .wpt{font-size:19px}.motion-preview #faq{display:block}.motion-preview #faq .h-sec{position:static;font-size:43px;margin-bottom:32px}.motion-preview .faq-q{font-size:14px;padding-block:22px}.motion-preview #zayavka{padding-block:70px}.motion-preview .cta-wrap{display:block}.motion-preview .contact-title{font-size:clamp(64px,12vw,88px)}.motion-preview .cta-side .lead{font-size:14px;margin-top:24px!important}.motion-preview .quiz{position:static;margin-top:34px;padding:25px}.motion-preview .q{font-size:26px}.motion-preview .chip{font-size:12px;padding:15px 8px}.motion-preview .founder{gap:16px;margin-top:28px}.motion-preview .f-ava{width:64px;height:64px}.motion-preview .foot-cols{gap:30px 20px}.motion-preview .foot-logo{font-size:26px}.motion-preview footer{padding-block:38px 22px}}
@media(max-width:370px){.service-tabs{gap:16px}.service-tabs button>span:first-child{font-size:19px}.service-tabs small{font-size:9px}.service-detail>div{align-items:start;gap:10px}.service-detail strong{font-size:19px}.service-detail .text-link{font-size:10px;gap:7px;padding-top:4px}.motion-preview .quiz{padding:20px}.motion-preview #kak .step{column-gap:14px}.integration-map{height:330px}.integration-store{top:34%}.motion-preview #keysy .portfolio-title{font-size:41px}}
html.motion-is-off .work-img img,html.motion-is-off .work-ar,html.motion-is-off .service-arrow{transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.motion-preview .work-img img,.motion-preview .work-ar{transform:none!important}.motion-preview #kak .step{--step-progress:1!important}}
.motion-preview .work-img{display:block}.motion-preview .work.expandable .work-ar{display:none}.motion-controls .motion-toggle{position:static;flex:none;min-height:28px;padding:5px 9px;font-size:10px;background:transparent;color:var(--ink);border-color:var(--line)}.motion-preview .totop{bottom:16px}
@media(max-width:767px){.integration-map{height:450px}.integration-store{top:28%}.integration-map:before{height:auto;bottom:42px}.motion-controls .motion-toggle{font-size:9px}}
@media(max-width:370px){.integration-map{height:400px}.integration-store{top:27%}}

/* Real screen captures retain their complete frame and native proportions. */
.motion-preview .work-grid .work .work-img{aspect-ratio:auto;padding:0;overflow:visible;border:0;background:transparent}
.motion-preview .work-grid .work .work-img img{display:block;width:min(100%,calc(var(--preview-height,78svh) * var(--preview-ratio)));aspect-ratio:var(--preview-ratio);height:auto;max-width:100%;max-height:none;margin-inline:auto;object-fit:contain;transform:none!important;box-shadow:none;border:1px solid var(--line);border-radius:4px}
.motion-preview .work-grid .work-wide .work-img{max-width:1200px;margin-inline:auto}
.motion-preview .service-art{aspect-ratio:auto;padding:0;border:0;background:transparent;overflow:visible}
.motion-preview .service-art img{display:block;width:auto;height:auto;max-width:100%;max-height:490px;margin-inline:auto;object-fit:contain;border:1px solid var(--line);border-radius:4px}
.motion-preview .case-reveal>img{object-fit:contain}

.full-preview-link{grid-column:2;justify-self:start;font-size:12px;display:inline-flex;gap:16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);min-height:40px}
.case-viewer{width:min(1280px,94vw);height:90svh;max-width:none;max-height:94svh;padding:0;border:1px solid var(--line);border-radius:8px;margin:auto;background:var(--surface);color:var(--ink);overflow:hidden}
.case-viewer::backdrop{background:rgba(18,22,17,.8)}.case-viewer[open]{display:flex;flex-direction:column}.case-viewer-bar{display:flex;align-items:center;gap:24px;padding:16px 22px;flex:none;border-bottom:1px solid var(--line)}.case-viewer-bar h2{font-size:15px;font-weight:500;margin-right:auto}.case-viewer-bar>a{font-size:11px;text-decoration:underline;text-underline-offset:3px}.case-viewer-close{border:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 13px;border-radius:6px;font-size:12px;min-height:38px}.case-viewer-scroll{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;background:var(--panel)}.case-viewer-scroll img{width:100%;height:auto;display:block}.case-viewer-error{padding:30px;font-size:14px}.case-viewer-error a{text-decoration:underline}html.case-viewer-open{overflow:hidden}
@media(max-width:767px){.full-preview-link{font-size:11px;margin-top:8px}.case-viewer{width:96vw;height:92svh}.case-viewer-bar{padding:12px;gap:12px;flex-wrap:wrap}.case-viewer-bar h2{font-size:12px}.case-viewer-bar>a{font-size:10px}.case-viewer-close{font-size:10px;padding:6px 9px}}

/* Fit complete source compositions, including the small store in the diagram. */
.motion-preview .integration-store>img{object-fit:contain;object-position:center;background:#fff}
.motion-preview .f-ava{object-fit:contain}