/* Rendered as responsive HTML rather than screenshots of private systems. */
.system-visual{container-type:inline-size;position:relative;aspect-ratio:1.46;border:1px solid #c6c4cc22;border-radius:8px;padding:6% 5% 8%;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#1e3942;color:#283943}
.system-visual:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:30px 30px}
.system-ancora{background:radial-gradient(ellipse at 80% 10%,#416773,#102a36 70%)}
.system-hitech{background:radial-gradient(ellipse at 70% 0,#6c8770,#334e43 80%)}
.system-musaed{background:radial-gradient(ellipse at 75% 0,#8bafa5,#35544f 85%)}
.system-frame{width:100%;border:1px solid #ffffff30;border-radius:1cqw;box-shadow:0 3cqw 7cqw #04131b55;overflow:hidden;background:#ecf1f2;transform:perspective(1200px) rotateY(-3deg) rotateX(1deg)}
.system-browser{display:flex;align-items:center;justify-content:space-between;font-size:1.25cqw;color:#b3ccd2;background:#152c35;padding:1.1cqw 1.7cqw;line-height:1;letter-spacing:.03em}
.system-browser>span:first-child{display:flex;gap:.6cqw}
.system-browser i{display:block;width:.6cqw;height:.6cqw;background:#7c979d;border-radius:50%}
.system-ui{display:flex;aspect-ratio:1.62;font:400 1.45cqw/1.4 var(--body);overflow:hidden}
.ui-sidebar{width:23%;flex-shrink:0;background:#122f3b;color:#aac2cd;padding:2.3cqw 1.6cqw;display:flex;flex-direction:column}
.ui-brand{display:flex;align-items:center;gap:.8cqw;margin-bottom:2.5cqw;color:#e6f2f3;white-space:nowrap}
.ui-brand>svg{width:2.5cqw;height:2.5cqw;flex-shrink:0;color:#9bd2cc}
.ui-brand>b{font:500 2.1cqw var(--display);letter-spacing:-.05em}
.ui-brand em{font-style:normal;font-size:1.65cqw;color:#80c0bb}
.ui-sidebar>small{font-size:.85cqw;letter-spacing:.1em;opacity:.65;margin:1cqw 0 1.1cqw}
.ui-sidebar>span:not(.ui-sidebar-foot){display:flex;align-items:center;gap:1cqw;padding:.75cqw .8cqw;font-size:1.24cqw;white-space:nowrap}
.ui-sidebar>span>i{font-style:normal;opacity:.7;font-size:1.4cqw;width:1.3cqw}
.ui-sidebar .ui-active{background:#6cb6b41c;color:#d1efeb;border-radius:.4cqw}
.ui-sidebar .ui-sidebar-foot{font-size:.85cqw;margin-top:auto;color:#8caeaf;white-space:nowrap;padding-top:2cqw}
.ui-body{padding:2.6cqw 2.5cqw 1.5cqw;width:77%;min-width:0;display:flex;flex-direction:column;background:linear-gradient(145deg,#edf3f3,#dbe5e8)}
.ui-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:2cqw}
.ui-heading small{font-size:.95cqw;letter-spacing:.09em;color:#71868d;display:block;margin-bottom:.6cqw}
.ui-heading b{display:block;font:500 2.8cqw/1.2 var(--display);letter-spacing:-.05em;color:#233d49}
.ui-avatar{display:grid;place-items:center;width:3cqw;height:3cqw;font-size:1.1cqw;border-radius:50%;background:#c6d5d9;color:#42575e}
.ui-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw;margin-bottom:2cqw}
.ui-stats>div{background:#ffffffba;border:1px solid #b4c8cd65;border-radius:.5cqw;padding:1.3cqw 1.2cqw}
.ui-stats small{display:block;font-size:.8cqw;letter-spacing:.04em;color:#6c818a;white-space:nowrap}
.ui-stats b{display:block;font:500 2cqw var(--display);letter-spacing:-.04em;margin-top:.7cqw;color:#2c5261}
.ui-stats i{display:block;width:36%;height:.22cqw;background:#6b9a9a;margin-top:1.2cqw;opacity:.5}
.ui-ancora-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:1.2cqw;flex:1;min-height:0}
.ui-network,.ui-agent,.ui-chart,.ui-job-flow{background:#ffffff80;border:1px solid #b5c6cc50;border-radius:.5cqw;padding:1.4cqw;min-width:0}
.ui-panel-title{font-size:1.18cqw;display:block;color:#435d68;font-weight:500}
.ui-network svg{width:100%;height:calc(100% - 2cqw);min-height:15cqw;overflow:visible}
.network-lines{stroke:#52878f;stroke-width:.7;fill:none;stroke-dasharray:5 4;animation:network-flow 35s linear infinite}
@keyframes network-flow{to{stroke-dashoffset:-180}}
.network-orbit{stroke:#b5cccf;stroke-width:.8;fill:none;stroke-dasharray:3 5}
.network-core{fill:#1f4a59;stroke:#6bb9b5;stroke-width:1}
.network-node{fill:#5b9898;stroke:#fff;stroke-width:3}
.ui-network text{font:9px var(--body);letter-spacing:1px;fill:#64818b}
.ui-network text:first-of-type{font-size:8px;fill:#d2eeeb}
.network-pulse{fill:none;stroke:#58a3a3;opacity:.35;stroke-width:1;animation:network-pulse 4s ease-in-out infinite;transform-origin:180px 92px}
@keyframes network-pulse{50%{transform:scale(1.24);opacity:.05}}
.ui-agent{display:flex;flex-direction:column;background:#173e49;color:#d0e6e6;border-color:transparent}
.ui-agent .ui-panel-title{color:#c7e4df;font-size:1.25cqw}
.ui-agent>p{font:400 2cqw/1.2 Georgia,serif;color:#eef8f6;margin:1.8cqw 0}
.ui-agent-line{font-size:1cqw;border-top:1px solid #b2d5d328;padding:1.3cqw 0;color:#b4ced1}
.ui-approval{font-size:.86cqw;background:#b0d2ba20;border:1px solid #bddbc440;padding:.65cqw;color:#c2e0ce;white-space:nowrap;margin-top:auto;border-radius:.3cqw}
.ui-agent small{font-size:.8cqw;color:#88a7ad;margin-top:.9cqw}
.ui-bottom-row{display:flex;justify-content:space-between;gap:1cqw;font-size:.9cqw;color:#729098;padding-top:1.7cqw;margin-top:auto}
.system-caption{position:absolute;bottom:3%;left:5%;right:5%;display:flex;justify-content:space-between;font-size:1.05cqw;color:#bbcfce;letter-spacing:.04em}
.system-caption>span:first-child{letter-spacing:.14em}
.system-hitech .system-browser{background:#223c31;color:#bfd4c4}
.system-hitech .ui-sidebar{background:#f0f3ea;color:#5a6a58;border-right:1px solid #c2d0ba}
.system-hitech .ui-brand{color:#304b38}
.system-hitech .ui-brand svg{color:#60864f}
.system-hitech .ui-active{background:#d9e4c9;color:#365337}
.system-hitech .ui-sidebar-foot{color:#7e8b73}
.system-hitech .ui-body{background:#f8faf5}
.system-hitech .ui-heading b,.system-hitech .ui-stats b{color:#3e5841}
.system-hitech .ui-stats>div{border-color:#d7e1cb;background:#f0f4e9}
.system-hitech .ui-stats i{background:#7d9a64}
.system-hitech .ui-panel-title{color:#4b624c}
.ui-waste-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.2cqw;flex:1;min-height:0}
.ui-chart,.ui-job-flow{border-color:#d9e1d3;background:#fff}
.ui-chart>.ui-panel-title>small{display:block;font-size:.8cqw;color:#a0a68f;margin-top:.4cqw}
.bar-chart{display:flex;align-items:end;gap:1cqw;height:17cqw;border-bottom:1px solid #dbe3d6;padding:2cqw .4cqw 0;background:repeating-linear-gradient(0deg,transparent 0 4cqw,#e6ebe2 4cqw 4.1cqw)}
.bar-chart i{display:block;flex:1;height:var(--bar);background:#829e68;border-radius:.3cqw .3cqw 0 0;transform-origin:bottom;animation:bar-enter .7s ease-out both;animation-delay:var(--bar-delay)}
.bar-chart i:nth-child(2n){background:#b9c99e}
@keyframes bar-enter{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
.chart-legend{display:flex;justify-content:space-between;color:#7e8a72;font-size:.7cqw;padding-top:1cqw;gap:.5cqw}
.ui-job-flow>span:not(.ui-panel-title){display:flex;align-items:center;gap:.8cqw;margin-top:1.5cqw;padding:1cqw 0;border-bottom:1px solid #e1e6d9;font-size:1.05cqw;color:#637458;white-space:nowrap}
.ui-job-flow>span>i{font-style:normal;color:#7b985c;font-size:.9cqw}
.system-musaed .system-browser{background:#2b514c;color:#c2ded3}
.system-musaed .ui-sidebar{background:#e6efe8;color:#577368;border-right:1px solid #c6d8cd}
.system-musaed .ui-brand{color:#365b4f}
.system-musaed .ui-brand svg{color:#5b8a75}
.system-musaed .ui-brand>b{font-family:Georgia,serif;font-size:2.5cqw;letter-spacing:0}
.system-musaed .ui-brand b span{font-size:1.6cqw;display:block;font-family:var(--body)}
.system-musaed .ui-sidebar .ui-active{background:#cfdfd2;color:#426554}
.system-musaed .ui-sidebar-foot{color:#749182}
.system-musaed .ui-body{background:#f7faf6}
.ui-language{display:flex;justify-content:space-between;font-size:1cqw;background:#f5f8f0;border:1px solid #c3d4c7;padding:.8cqw;margin-top:2cqw;border-radius:.4cqw}
.ui-musaed-heading{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;padding:.5cqw 0 1.8cqw}
.ui-flower{font-size:3.3cqw;line-height:1;color:#73967d;margin-bottom:.9cqw}
.ui-musaed-heading small{font-size:.83cqw;letter-spacing:.12em;color:#9aab98}
.ui-musaed-heading b{font:400 4cqw/1.03 Georgia,serif;letter-spacing:-.025em;margin:1cqw 0;color:#2d5345}
.ui-musaed-heading>span:last-child{font-size:1.16cqw;color:#779487;margin-top:.5cqw}
.ui-help-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.7cqw}
.ui-help-options>span{display:flex;flex-direction:column;gap:.6cqw;font-size:.89cqw;color:#50705d;background:#e8f0e4;padding:1cqw;border:1px solid #cfdfc9;border-radius:.5cqw;white-space:nowrap}
.ui-help-options i{font-size:1.5cqw;font-style:normal;color:#73916d}
.ui-evidence{margin-top:1.3cqw;border:1px solid #cbdcd2;border-radius:.5cqw;padding:1.2cqw 1.6cqw;background:#fff}
.ui-evidence .ui-panel-title{font-size:1cqw;color:#648271}
.ui-evidence p{font-size:1.5cqw;color:#4b6d5a;margin-top:.7cqw;line-height:1.4}
.ui-evidence>span:last-child{font-size:.86cqw;color:#90a48d;display:block;border-top:1px solid #e3ebe1;padding-top:.8cqw;margin-top:1cqw}
.ui-evidence i{padding:0 .4cqw;font-style:normal;color:#476b4c}

.system-visual{--display:'Outfit',sans-serif;border-radius:0;border:0}
.card-image .system-visual{aspect-ratio:1.46}
.work-slide .system-visual{background:transparent;padding:5% 2% 8%}
.work-slide .system-visual:before{display:none}
.case-cover>.system-visual{aspect-ratio:1.65;padding:5% 10% 9%}
.case-cover .system-frame{container-type:inline-size}
.case-cover .system-caption{font-size:10px;bottom:3%}
@media(max-width:600px){.case-cover>.system-visual{aspect-ratio:1.46;padding:6% 5% 8%}.case-cover .system-frame{container-type:normal}.case-cover .system-caption{font-size:7px}.work-slide .system-visual{padding:5% 6% 9%}}