/* Compact examples: each drawing explains a specific function. */
.app-examples{padding-block:64px 80px}
.app-examples-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:35px}
.app-examples-heading .kicker{margin-bottom:18px}
.app-examples-heading h2{font-size:clamp(34px,3.3vw,48px);line-height:1.12;letter-spacing:-.05em}
.app-examples-heading>p{max-width:385px;font-size:14px;line-height:1.85;padding-bottom:4px}
.app-example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;align-items:stretch}
.app-example{min-width:0;border:1px solid #3c494e;background:#141b1e;position:relative;border-radius:4px;overflow:hidden;transition:border-color .2s,background .2s}
.app-example:hover{border-color:#738b8c;background:#182023}
.app-mini{height:178px;border-bottom:1px solid #354347;background:#10181c;display:flex;align-items:center;justify-content:center;padding:5px 12px;color:#c5d6d5}
.app-mini svg{width:100%;height:100%;max-width:290px;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.app-mini text{fill:#b7cbc6;stroke:none;font:8px var(--mono);text-anchor:middle}
.app-mini .mini-surface{fill:#19262c;stroke:#92aaa9;stroke-width:1.3}
.app-mini .mini-window{fill:#0e191e;stroke:#536d73;stroke-width:1}
.app-mini .mini-outline{stroke:#92aaa9;stroke-width:1.2}
.app-mini .mini-ground{stroke:#455b61;stroke-width:1}
.app-mini .mini-grid{stroke:#3e555c;stroke-width:1}
.app-mini .mini-muted-block{fill:#4b6468}
.app-mini .mini-highlight-fill{fill:#a7c9b7}
.app-mini .mini-dark-check{stroke:#14231f;stroke-width:1.4}
.app-mini .mini-route{stroke:#475f65;stroke-width:1;stroke-dasharray:3 4}
.app-mini .mini-ok{fill:#a7c9b7}
.app-mini .mini-phone-booking{fill:#87a99b;stroke:#adcdbd;stroke-width:1}
.app-mini .mini-phone-tick{stroke:#10251d;stroke-width:1.5}
.app-summary{padding:22px 20px 25px}
.app-kind{display:block;font:9px/1.5 var(--mono);letter-spacing:.055em;text-transform:uppercase;color:#a6bdb7;margin-bottom:11px}
.app-summary h3{font-size:23px;line-height:1.17;letter-spacing:-.035em;min-height:54px;max-width:230px;margin-bottom:13px;color:#edf0eb;scroll-margin-top:115px}
.app-summary p{font-size:13px;line-height:1.85;color:#b5c0c1}
.app-mini .mini-production-bar{stroke:#a7c9b7;stroke-width:3;stroke-dasharray:60;stroke-dashoffset:0;animation:mini-count 6s linear infinite}
.app-mini .mini-machine-alarm{fill:#a7c9b7;animation:mini-alarm 6s linear infinite}
.app-mini .mini-stop-mark{stroke:#ed8c80;stroke-width:2;opacity:0;animation:mini-stop 6s linear infinite}
.app-mini .mini-wall{stroke:#4d6268;stroke-width:5}
.app-mini .mini-phone-screen{fill:#10242c;stroke:#365a68;stroke-width:1}
.app-mini .mini-alert-fill{fill:#ed8c80}
.app-mini .mini-dark-bell{stroke:#38221f;stroke-width:1.3}
.app-mini .mini-notification{opacity:0;animation:mini-notify 6s linear infinite}
.app-mini .mini-phone-rays{stroke:#ed8c80;stroke-width:1.5;opacity:0;animation:mini-notify 6s linear infinite}
.app-mini .mini-alert-phone{animation:mini-phone-vibrate 6s linear infinite}
.app-mini .mini-alert-packet,.app-mini .mini-booking-packet,.app-mini .mini-control-packet{stroke:#ed8c80;stroke-width:2.3;stroke-dasharray:9 110;stroke-dashoffset:9;opacity:0;animation:mini-alert-send 6s linear infinite}
.app-mini .mini-booking-packet{stroke:#a7c9b7;animation-name:mini-booking-send}
.app-mini .mini-new-booking{opacity:0;animation:mini-booked 6s linear infinite}
.app-mini .mini-control-packet{stroke:#a7c9b7;animation-name:mini-control-send}
.app-mini .mini-control-led{fill:#a7c9b7;animation:mini-control-led 6s linear infinite}
.app-mini .mini-workpiece{fill:#b9c6c7;stroke:#e2e7e1;stroke-width:1}
.app-mini .mini-grip-left,.app-mini .mini-grip-right{stroke:#a6bfba;stroke-width:3}
.app-mini .mini-grip-left{animation:mini-grip-left 6s ease-in-out infinite}
.app-mini .mini-grip-right{animation:mini-grip-right 6s ease-in-out infinite}
.app-mini .mini-cycle-led{fill:#425a5b;animation:mini-cycle-led 6s linear infinite}
.app-examples:not(.examples-in-view) .app-mini svg *{animation-play-state:paused}
@keyframes mini-count{0%,10%{stroke-dashoffset:45}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:45}}
@keyframes mini-alarm{0%,25%,88%,100%{fill:#a7c9b7}30%,39%,48%,57%,66%,75%,84%{fill:#ed8c80}34%,43%,52%,61%,70%,79%{fill:#5c3c3a}}
@keyframes mini-stop{0%,25%,90%,100%{opacity:0}30%,85%{opacity:1}}
@keyframes mini-alert-send{0%,26%{opacity:0;stroke-dashoffset:9}28%{opacity:1;stroke-dashoffset:9}44%{opacity:1;stroke-dashoffset:-100}46%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes mini-notify{0%,43%,90%,100%{opacity:.18}47%,55%,64%,73%,82%{opacity:1}59%,68%,77%,86%{opacity:.35}}
@keyframes mini-phone-vibrate{0%,45%,50%,55%,60%,100%{transform:translateX(0)}46%,51%,56%{transform:translateX(-1.5px)}48%,53%,58%{transform:translateX(1.5px)}}
@keyframes mini-booking-send{0%,14%{opacity:0;stroke-dashoffset:9}16%{opacity:1;stroke-dashoffset:9}38%{opacity:1;stroke-dashoffset:-100}40%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes mini-booked{0%,37%,95%,100%{opacity:0}43%,88%{opacity:1}}
@keyframes mini-control-send{0%,15%{opacity:0;stroke-dashoffset:9}18%{opacity:1;stroke-dashoffset:9}35%{opacity:1;stroke-dashoffset:-100}37%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes mini-control-led{0%,15%,35%,100%{fill:#a7c9b7}18%,30%{fill:#e2f0d7}}
@keyframes mini-grip-left{0%,35%,90%,100%{transform:translateX(0)}45%,78%{transform:translateX(3px)}}
@keyframes mini-grip-right{0%,35%,90%,100%{transform:translateX(0)}45%,78%{transform:translateX(-3px)}}
@keyframes mini-cycle-led{0%,43%,90%,100%{fill:#425a5b}47%,85%{fill:#a7c9b7}}
@media(min-width:1500px){.app-mini{height:195px}.app-summary{padding:24px}.app-summary p{font-size:13px}.app-summary h3{font-size:25px;min-height:59px}.app-kind{font-size:10px}}
@media(min-width:761px) and (max-width:1170px){.app-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.app-mini{height:185px}.app-summary{padding:23px}.app-summary h3{font-size:27px;min-height:0;max-width:none}.app-summary p{font-size:13px;max-width:360px}}
@media(max-width:760px){.app-examples{padding-block:60px}.app-examples-heading{display:block;margin-bottom:28px}.app-examples-heading h2{font-size:40px}.app-examples-heading>p{margin-top:22px;font-size:13px;max-width:460px}.app-example-grid{grid-template-columns:1fr;gap:18px}.app-example{display:grid;grid-template-columns:150px minmax(0,1fr)}.app-mini{height:auto;min-height:210px;padding:8px 5px;border-bottom:0;border-right:1px solid #354347}.app-summary{padding:23px 21px}.app-summary h3{min-height:0;font-size:23px;max-width:none;margin-bottom:12px}.app-kind{font-size:9px}.app-summary p{font-size:12px;line-height:1.8}}
@media(max-width:460px){.app-example{display:block}.app-mini{height:165px;min-height:0;padding:2px 25px;border-right:0;border-bottom:1px solid #354347}.app-summary{padding:23px}.app-summary h3{font-size:26px}.app-summary p{font-size:13px}.app-kind{font-size:10px}}
@media(prefers-reduced-motion:reduce){.app-mini svg *{animation:none!important}.app-mini .mini-notification,.app-mini .mini-new-booking{opacity:1}.app-mini .mini-machine-alarm{fill:#ed8c80}.app-mini .mini-stop-mark{opacity:1}.app-mini .mini-cycle-led{fill:#a7c9b7}.app-mini .mini-grip-left{transform:translateX(3px)}.app-mini .mini-grip-right{transform:translateX(-3px)}.app-example{transition:none}}