/* Individual illustrations for each demonstration. */
.story-art{height:165px;margin:20px 0;position:relative;overflow:hidden}.cost-waterfall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;border-bottom:1px solid #adcbbf;padding:0 10px}.cost-waterfall>div{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:9px;font-size:10px}.cost-waterfall b{font-size:17px;color:#326e5a;font-variant-numeric:tabular-nums}.cost-waterfall i{display:block;width:80%;height:45%;background:#96bca8;transform-origin:bottom}.cost-waterfall>div:nth-child(2) i{height:30%;background:#83a8bc}.cost-waterfall>div:nth-child(3) i{height:22%;background:#aeb8ce}.cost-waterfall>div:nth-child(4) i{height:70%;background:#396f65}.story-playing .cost-waterfall i{animation:variety-grow 2.4s ease-in-out infinite alternate}.story-player-cost .story-player-steps button{border:0;border-bottom:3px solid #c4d9ce;background:transparent;color:#628572}.story-player-cost .story-player-steps button[aria-pressed=true]{background:#e0f0e7;border-color:#397e61;color:#285e45}.export-conveyor{background:#edf3f7;border:1px solid #d2e0e8}.conveyor-caption{position:absolute;left:15px;top:12px;font-size:9px;letter-spacing:1px}.conveyor-parcel{position:absolute;left:10%;bottom:27px;text-align:center;color:#a48a61}.conveyor-parcel b{font-size:65px;font-weight:400}.conveyor-parcel small{display:block;font-size:8px}.conveyor-belt{position:absolute;left:0;right:0;bottom:12px;height:14px;background:repeating-linear-gradient(90deg,#8099a5 0 12px,#bccbd1 12px 18px);border:2px solid #5d7d8f}.conveyor-scanner{position:absolute;left:60%;bottom:28px;width:60px;height:100px;border:5px solid #7ca8a4;border-bottom:0}.conveyor-scanner i{display:block;height:2px;background:#81c8b5;margin-top:20px;box-shadow:0 0 8px #6bc5ab}.conveyor-scanner span{position:absolute;font-size:6px;top:-22px;left:-7px;white-space:nowrap}.conveyor-stamp{position:absolute;right:12px;top:15px;border:1px solid #82af99;padding:8px;color:#5d8e75;font-size:11px;transform:rotate(-8deg)}.story-playing .conveyor-parcel{animation:variety-parcel 3s ease-in-out infinite}.story-player-export .story-player-steps{gap:0;border:1px solid #adcbd5}.story-player-export .story-player-steps button{border:0;border-right:1px solid #c9dce2}.staff-pass{height:155px;display:flex;align-items:center;gap:18px;background:#fff;border-left:5px solid #7ba9b9;box-shadow:3px 3px 0 #dce8ed;padding:15px}.staff-photo{width:72px;height:88px;background:#e0ecee;flex-shrink:0}.staff-photo svg{fill:#5d8b95;width:100%;height:100%}.staff-pass>div:nth-child(2){display:grid;gap:10px}.staff-pass span{font-size:7px;letter-spacing:1px;color:#88a1ad}.staff-pass strong{font-size:18px}.staff-pass small{font-size:9px;color:#7f99a6}.staff-pass b{font-size:8px;color:#5b9279}.staff-pass>i{position:absolute;right:14px;bottom:15px;background:#e1f1e7;color:#64937e;padding:7px;font-style:normal}.story-playing .staff-pass{animation:variety-card 2.4s ease-in-out infinite}.support-terminal{height:185px;background:#142f3b;color:#a8d6c6;font-family:Consolas,monospace;padding:14px}.support-terminal>div{font-size:8px;letter-spacing:1px;border-bottom:1px solid #3b5d66;padding-bottom:12px}.support-terminal p{font-size:9px;line-height:1.8;margin:12px 0}.support-terminal p>span{color:#608fa2;margin-right:8px}.story-playing .support-terminal p{animation:variety-log 2.4s ease-in-out infinite}.support-terminal p:nth-child(3){animation-delay:.4s}.support-terminal p:nth-child(4){animation-delay:.8s}.support-terminal p:nth-child(5){animation-delay:1.2s}.story-player-security .story-player-result{background:#edf5f2;border-left:2px solid #79aa93;padding:15px}.pdf-composer{height:195px;display:flex;justify-content:center;gap:22px;background:#e8eff5;padding:12px}.pdf-tools{display:grid;align-content:start;gap:13px;font-size:8px;padding-top:15px}.pdf-tools span{border:1px solid #c4d5e3;padding:7px;background:#f7fafc}.pdf-sheet{width:155px;background:white;padding:14px;box-shadow:4px 4px 0 #d2dce7;color:#6685a0;transform:rotate(2deg)}.pdf-sheet header{display:flex;gap:12px;align-items:center;font-size:7px;margin-bottom:15px}.pdf-sheet header b{background:#40688f;color:#fff;padding:5px}.pdf-sheet>i{display:block;background:#e2eaf2;height:3px;width:70%;margin:7px 0}.pdf-sheet>i:nth-of-type(2){width:45%}.pdf-sheet>div{display:flex;justify-content:space-between;gap:7px;font-size:6px;padding:10px 0;border-bottom:1px solid #e0e8ef}.pdf-sheet footer{font-size:5px;margin-top:14px}.pdf-ready{position:absolute;right:12px;bottom:20px;padding:9px;background:#e3f1e8;color:#4b8466;font-size:10px}.story-playing .pdf-sheet{animation:variety-paper 2.4s ease-in-out infinite alternate}.report-dashboard{display:flex;gap:25px;align-items:center;padding:12px 10px 30px;background:#edf3f8}.report-donut{width:100px;height:100px;border-radius:50%;background:conic-gradient(#658ea8 0 64%,#d6e2ec 64%);display:grid;place-items:center;flex-shrink:0}.report-donut strong{width:72px;height:72px;border-radius:50%;display:grid;place-content:center;background:#f7fafc;font-size:23px}.report-donut small{font-size:10px}.report-bars{height:110px;flex:1;display:flex;gap:9px;align-items:end}.report-bars i{width:14%;height:45%;background:#8aadc2;transform-origin:bottom}.report-bars i:nth-child(2){height:70%}.report-bars i:nth-child(3){height:55%}.report-bars i:nth-child(4){height:90%}.report-bars i:nth-child(5){height:75%}.report-bars i:nth-child(6){height:100%}.report-dashboard>span{position:absolute;bottom:10px;left:15px;font-size:7px;letter-spacing:1px}.story-playing .report-bars i{animation:variety-grow 1.8s ease-in-out infinite alternate}.story-playing .report-bars i:nth-child(2n){animation-delay:-.8s}.file-desk{height:180px;padding:15px;display:flex;gap:10px;align-items:center}.file-desk>div{width:30%;height:130px;background:#fff;border:1px solid #cadfd7;padding:15px 8px;box-shadow:3px 3px 0 #dbe9e3;transform:rotate(-4deg)}.file-desk>div:nth-child(2){transform:translateY(-10px) rotate(2deg)}.file-desk>div:nth-child(3){transform:rotate(6deg)}.file-desk b{font-size:24px;color:#8fbaa7}.file-desk span,.file-desk small{display:block;font-size:7px;margin-top:15px;color:#71988a}.file-transfer{position:absolute;right:10px;top:0;font-size:28px!important}.story-playing .file-desk>div{animation:variety-paper 2.4s ease-in-out infinite alternate}.file-desk>div:nth-child(2){animation-delay:.5s}.research-bench{display:flex;align-items:center;gap:12px;padding:15px 0}.research-bench>div{flex:1;text-align:center;border:1px solid #c6ddce;background:#fafffc;padding:15px 7px}.research-bench b{display:block;font-size:36px;color:#679d81;margin:15px 0}.research-bench span{font-size:9px;color:#739589}.research-bench small{display:block;font-size:8px;color:#8ba496}.story-playing .research-bench b{animation:variety-card 1.8s infinite alternate}.production-cell{display:flex;align-items:center;gap:25px;background:#293f4d;padding:18px;color:#b6d3d9}.production-casing{width:50%;background:#567589;border:2px solid #9ab3be;padding:9px}.production-casing>span,.production-casing small{font-size:8px}.production-casing>div{position:relative;background:#132e40;margin:8px 0;height:66px;display:grid;place-items:center}.production-casing b{font-size:45px;font-weight:400;color:#b2d9ce}.production-casing i{position:absolute;width:9px;height:28px;background:#9bcbad;right:10px;top:0}.production-output{display:grid;gap:10px;text-align:center;flex:1}.production-output span{font-size:7px}.production-output i{font-style:normal;font-size:20px}.production-output strong{color:#a9d8bd;font-size:22px}.story-playing .production-casing b{animation:variety-gear 2s linear infinite}.story-playing .production-output strong{animation:variety-log 1.8s infinite}
.hero-flip-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:14px}.hero-flip-controls button{font-size:8px;padding:8px}.hero-flip-controls button>span{margin-bottom:4px}.hero-scroll-hint{align-items:center;gap:10px;flex-wrap:wrap}.hero-scroll-hint button{font-size:8px;border:1px solid #ffffff30;background:transparent;color:#b5cec9;padding:6px 9px}.hero-scroll-track{height:310vh}.hero-sheet{transition-duration:.45s,.35s,.45s}.hero-sheet .product-sidebar>span:not(:first-child){padding:9px 7px}.hero-workshop{display:grid;grid-template-columns:1fr 1.4fr;gap:15px;margin-top:20px}.hero-machine-drawing{background:#284c66;padding:15px;position:relative;text-align:center;overflow:hidden}.hero-machine-drawing>span{font-size:80px;display:block;color:#a9d4c6}.hero-machine-drawing>b{display:block;font-size:9px;color:#d2e4e8;margin-top:10px}.hero-machine-drawing i{width:10px;height:35px;background:#b2d8c4;position:absolute;right:18px;top:15px}.hero-operation-rows>div{padding:15px 0;border-bottom:1px solid #d9e5ec;display:grid;gap:12px}.hero-operation-rows strong{font-size:10px;color:#4c7696}.hero-operation-rows span{font-size:8px;color:#8ba5b8}.hero-operation-rows progress{width:100%;height:6px;accent-color:#83b59b}.hero-sheet.is-current .hero-machine-drawing>span{animation:variety-gear 3s linear infinite}.hero-attendance{margin-top:20px;border:1px solid #d9e4ed}.hero-attendance>div{display:flex;gap:15px;align-items:center;padding:18px 12px;border-bottom:1px solid #dfe8ef}.hero-attendance b{background:#e5f1ed;color:#77a592;padding:10px;font-size:10px}.hero-attendance span{display:grid;gap:10px}.hero-attendance strong{font-size:10px;color:#517a9b}.hero-attendance small{font-size:8px;color:#83a69a}.hero-attendance time{margin-left:auto;font-size:10px;color:#7e9caf}.hero-sheet.is-current .hero-attendance>div{animation:variety-log 3s infinite}.hero-cost-screen{margin-top:20px;background:#eef5f2;padding:18px}.hero-cost-screen>span{font-size:7px;color:#86a99c;letter-spacing:1px}.hero-cost-screen>div{display:flex;gap:10px;align-items:center;padding:12px 0;font-size:8px;color:#5f847b}.hero-cost-screen>div>span{width:75px}.hero-cost-screen progress{flex:1;width:30px;height:8px;accent-color:#78a995}.hero-cost-screen>strong{display:flex;justify-content:space-between;margin-top:15px;padding-top:14px;border-top:1px solid #c3dacf;font-size:10px;color:#376c5b}.hero-mini-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0}.hero-mini-boxes>div{background:#f7f1e6;border:1px solid #e3d5bd;text-align:center;padding:14px 5px;display:grid;gap:9px;color:#a28c69}.hero-mini-boxes b{font-size:38px;font-weight:400}.hero-mini-boxes span,.hero-mini-boxes small{font-size:7px}.hero-export-label{padding:20px;background:#edf3f7;display:grid;gap:12px;color:#6d8fa9}.hero-export-label span{font-size:8px}.hero-export-label strong{font-size:14px}.hero-export-label small{font-size:8px}.hero-sheet.is-current .hero-mini-boxes b{animation:variety-card 2s infinite alternate}.hero-finance-screen{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.hero-finance-screen>div{background:#eaf4ed;display:grid;gap:15px;padding:20px;color:#5a8875;align-content:center}.hero-finance-screen>div span{font-size:8px}.hero-finance-screen strong{font-size:20px}.hero-finance-screen small{font-size:8px;line-height:1.8}.hero-finance-screen ol{list-style:none;padding:0}.hero-finance-screen li{font-size:9px;color:#7994a9;padding:18px 0;border-bottom:1px solid #dbe7ee}.hero-finance-screen li b{margin-right:8px;color:#a0b5c5}.hero-finance-screen li span{float:right;color:#6ca58b}
@keyframes variety-grow{from{transform:scaleY(.75)}to{transform:scaleY(1)}}@keyframes variety-parcel{0%{left:5%;opacity:0}15%{opacity:1}80%{left:70%;opacity:1}100%{left:82%;opacity:0}}@keyframes variety-card{50%{transform:translateY(-3px)}}@keyframes variety-log{50%{opacity:.5}}@keyframes variety-paper{to{transform:translateY(-5px) rotate(-2deg)}}@keyframes variety-gear{to{transform:rotate(360deg)}}
@media(max-width:1000px){.hero-finance-screen{gap:10px}.hero-finance-screen>div{padding:12px}.hero-finance-screen strong{font-size:16px}.hero-workshop{gap:9px}.hero-machine-drawing>span{font-size:56px}.hero-operation-rows>div{padding:10px 0}.hero-sheet .product-sidebar>span:not(:first-child){padding:8px 5px}.hero-mini-boxes{gap:5px}.hero-mini-boxes b{font-size:28px}.cost-waterfall b{font-size:14px}}
@media(max-width:740px){.hero-flip-controls{gap:3px;margin-top:9px}.hero-flip-controls button{font-size:6px;padding:6px 4px}.hero-flip-controls button>span{font-size:5px;margin-bottom:2px}.hero-scroll-track{height:290vh}.hero-scroll-hint{font-size:7px;margin-top:7px}.hero-sheet .product-sidebar>span:not(:first-child){padding:6px 3px}.hero-workshop{margin-top:10px}.hero-machine-drawing{padding:8px}.hero-machine-drawing>span{font-size:38px}.hero-machine-drawing>b{font-size:6px}.hero-operation-rows strong{font-size:7px}.hero-operation-rows span{font-size:6px}.hero-operation-rows>div{gap:6px;padding:6px 0}.hero-attendance{margin-top:8px}.hero-attendance>div{padding:9px 7px;gap:8px}.hero-attendance b{padding:7px;font-size:7px}.hero-attendance strong{font-size:7px}.hero-attendance small{font-size:6px}.hero-attendance span{gap:5px}.hero-attendance time{font-size:7px}.hero-cost-screen{padding:9px;margin-top:8px}.hero-cost-screen>div{padding:6px 0;font-size:6px;gap:6px}.hero-cost-screen>span{font-size:5px}.hero-cost-screen>div>span{width:50px}.hero-cost-screen>strong{font-size:7px;margin-top:7px;padding-top:7px}.hero-mini-boxes{margin:10px 0}.hero-mini-boxes>div{padding:8px 3px;gap:5px}.hero-mini-boxes b{font-size:23px}.hero-mini-boxes span,.hero-mini-boxes small{font-size:5px}.hero-export-label{padding:10px;gap:7px}.hero-export-label strong{font-size:10px}.hero-export-label span,.hero-export-label small{font-size:6px}.hero-finance-screen{margin-top:9px}.hero-finance-screen>div{gap:9px;padding:9px}.hero-finance-screen strong{font-size:11px}.hero-finance-screen>div span,.hero-finance-screen small{font-size:6px}.hero-finance-screen li{padding:9px 0;font-size:6px}.story-art{height:150px}.support-terminal{height:185px}.pdf-composer{height:195px}.cost-waterfall{gap:6px;padding:0 4px}.cost-waterfall>div{font-size:8px}.cost-waterfall b{font-size:12px}.staff-pass{gap:12px}.staff-pass strong{font-size:15px}.research-bench{gap:7px}.research-bench span{font-size:7px}.research-bench small{font-size:6px}.research-bench b{font-size:28px}.report-donut{width:80px;height:80px}.report-donut strong{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.story-art *,.hero-sheet *{animation:none!important;transition:none!important}}