/* iwb unmanned-weighbridge-system */
.iwb{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.iwb *,.iwb *::before,.iwb *::after{box-sizing:border-box}
.iwb{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.iwb .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.iwb section{padding:clamp(60px,8vw,104px) 0}
.iwb .alt{background:#F6F7F8}
.iwb .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.iwb .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.iwb .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.iwb .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.iwb .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.iwb .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.iwb .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.iwb .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.iwb .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.iwb .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.iwb .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.iwb .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.iwb .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.iwb .lens{fill:#B9BEC6;transition:fill .3s}
.iwb .lens.on{fill:var(--g)}
.iwb .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.iwb .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.iwb .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.iwb .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.iwb .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.iwb .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:iwbdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes iwbdr{to{stroke-dashoffset:0}}
.iwb .road{stroke:#C9CCD2;stroke-width:2;stroke-dasharray:18 14}
.iwb .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.iwb .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.iwb .chip.cr{background:#FFE9E4;color:#D9472A}
.iwb .chip.wr{background:#FFF1E8;color:#C25510}
.iwb .chip.ok{background:#E3F6EC;color:#1E8A55}
.iwb .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes iwbbl{50%{opacity:.3}}
@keyframes iwbai{from{opacity:0;transform:translateY(-10px)}}
.iwb .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.iwb .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.iwb .mbar .d{display:flex;gap:5px}
.iwb .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.iwb .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.iwb .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:iwbbl 1.6s infinite}
.iwb .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.iwb .mbar .gv b{color:var(--o)}
.iwb .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.iwb .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.iwb .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.iwb .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.iwb .rl{display:flex;flex-direction:column;gap:4px}
.iwb .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:iwbai .5s both}
.iwb .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iwb .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.iwb .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.iwb .rw em.wr{background:var(--o)}
.iwb .rw em.cr{background:var(--c)}
.iwb .rw.new{background:rgba(43,182,115,.2)}
.iwb .rw.bad{background:rgba(255,109,76,.16)}
.iwb .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.iwb .snap svg{position:absolute;inset:0;width:100%;height:100%}
.iwb .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.iwb .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.iwb .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.iwb .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.iwb .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.iwb .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.iwb .fd{display:grid;gap:3px}
.iwb .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.iwb .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.iwb .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.iwb .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.iwb .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.iwb .fd div.scn{color:#8D9199}
.iwb .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.iwb .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.iwb .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.iwb .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.iwb .tb .st b{color:#fff}
@media(max-width:700px){.iwb .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.iwb .mg .lst{display:none}
}
@media(max-width:440px){.iwb .mg{grid-template-columns:1fr}
.iwb .tb .st{margin-left:0}
}
.iwb .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.iwb .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.iwb .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:iwbbl 1.6s infinite}
.iwb .flt{margin-left:auto;display:flex;gap:6px}
.iwb .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.iwb .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.iwb .list{display:flex;flex-direction:column;gap:10px}
.iwb .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:iwbai .6s cubic-bezier(.2,.8,.2,1) both}
.iwb .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.iwb .al.cr .ic{background:rgba(255,109,76,.18)}
.iwb .al.wr .ic{background:rgba(243,112,33,.18)}
.iwb .al.ok .ic{background:rgba(43,182,115,.18)}
.iwb .al b{font-size:14.5px}
.iwb .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.iwb .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.iwb .al .chip{margin-left:8px}
.iwb .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.iwb .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.iwb .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.iwb .pts b{color:var(--ink)}
.iwb .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.iwb .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.iwb .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.iwb .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.iwb .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.iwb .ch svg{width:100%;height:auto;display:block}
.iwb .gl{stroke:#EEF0F2}
.iwb .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.iwb .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.iwb .bars.on rect{transform:scaleY(1)}
.iwb .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.iwb .mk{opacity:0;transition:opacity .5s}
.iwb .mk.on{opacity:1}
.iwb .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.iwb .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.iwb .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.iwb .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.iwb .g2{grid-template-columns:1fr}
.iwb .feed{height:420px}
}
@media(max-width:520px){.iwb .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.iwb *{animation:none!important;transition:none!important}
.iwb .draw{stroke-dashoffset:0}
.iwb .bars rect{transform:none}
}
.iwb{min-width:0}.iwb .fd{grid-template-columns:minmax(0,1fr)}.iwb .fd>span{display:block;min-width:0}.iwb .pn{min-width:0;overflow:hidden}

/* vbs vehicle-booking-system */
.vbs{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.vbs *,.vbs *::before,.vbs *::after{box-sizing:border-box}
.vbs{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.vbs .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.vbs section{padding:clamp(60px,8vw,104px) 0}
.vbs .alt{background:#F6F7F8}
.vbs .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.vbs .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.vbs .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.vbs .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.vbs .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.vbs .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.vbs .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.vbs .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.vbs .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.vbs .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.vbs .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.vbs .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.vbs .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.vbs .lens{fill:#B9BEC6;transition:fill .3s}
.vbs .lens.on{fill:var(--g)}
.vbs .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.vbs .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.vbs .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vbs .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.vbs .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vbs .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:vbsdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes vbsdr{to{stroke-dashoffset:0}}
.vbs .road{stroke:#C9CCD2;stroke-width:2;stroke-dasharray:18 14}
.vbs .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.vbs .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.vbs .chip.cr{background:#FFE9E4;color:#D9472A}
.vbs .chip.wr{background:#FFF1E8;color:#C25510}
.vbs .chip.ok{background:#E3F6EC;color:#1E8A55}
.vbs .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes vbsbl{50%{opacity:.3}}
@keyframes vbsai{from{opacity:0;transform:translateY(-10px)}}
.vbs .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.vbs .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.vbs .mbar .d{display:flex;gap:5px}
.vbs .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.vbs .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.vbs .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:vbsbl 1.6s infinite}
.vbs .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.vbs .mbar .gv b{color:var(--o)}
.vbs .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.vbs .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.vbs .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.vbs .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.vbs .rl{display:flex;flex-direction:column;gap:4px}
.vbs .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:vbsai .5s both}
.vbs .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbs .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.vbs .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.vbs .rw em.wr{background:var(--o)}
.vbs .rw em.cr{background:var(--c)}
.vbs .rw.new{background:rgba(43,182,115,.2)}
.vbs .rw.bad{background:rgba(255,109,76,.16)}
.vbs .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.vbs .snap svg{position:absolute;inset:0;width:100%;height:100%}
.vbs .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.vbs .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.vbs .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.vbs .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.vbs .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.vbs .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.vbs .fd{display:grid;gap:3px}
.vbs .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.vbs .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.vbs .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.vbs .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.vbs .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.vbs .fd div.scn{color:#8D9199}
.vbs .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.vbs .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.vbs .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.vbs .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.vbs .tb .st b{color:#fff}
@media(max-width:700px){.vbs .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vbs .mg .lst{display:none}
}
@media(max-width:440px){.vbs .mg{grid-template-columns:1fr}
.vbs .tb .st{margin-left:0}
}
.vbs .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.vbs .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.vbs .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:vbsbl 1.6s infinite}
.vbs .flt{margin-left:auto;display:flex;gap:6px}
.vbs .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.vbs .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.vbs .list{display:flex;flex-direction:column;gap:10px}
.vbs .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:vbsai .6s cubic-bezier(.2,.8,.2,1) both}
.vbs .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.vbs .al.cr .ic{background:rgba(255,109,76,.18)}
.vbs .al.wr .ic{background:rgba(243,112,33,.18)}
.vbs .al.ok .ic{background:rgba(43,182,115,.18)}
.vbs .al b{font-size:14.5px}
.vbs .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.vbs .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.vbs .al .chip{margin-left:8px}
.vbs .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.vbs .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.vbs .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.vbs .pts b{color:var(--ink)}
.vbs .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.vbs .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.vbs .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.vbs .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.vbs .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.vbs .ch svg{width:100%;height:auto;display:block}
.vbs .gl{stroke:#EEF0F2}
.vbs .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.vbs .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vbs .bars.on rect{transform:scaleY(1)}
.vbs .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.vbs .mk{opacity:0;transition:opacity .5s}
.vbs .mk.on{opacity:1}
.vbs .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.vbs .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.vbs .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.vbs .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.vbs .g2{grid-template-columns:1fr}
.vbs .feed{height:420px}
}
@media(max-width:520px){.vbs .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.vbs *{animation:none!important;transition:none!important}
.vbs .draw{stroke-dashoffset:0}
.vbs .bars rect{transform:none}
}
.vbs{min-width:0}.vbs .fd{grid-template-columns:minmax(0,1fr)}.vbs .fd>span{display:block;min-width:0}.vbs .pn{min-width:0;overflow:hidden}

/* wms warehouse-management-system */
.wms{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.wms *,.wms *::before,.wms *::after{box-sizing:border-box}
.wms{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.wms .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.wms section{padding:clamp(60px,8vw,104px) 0}
.wms .alt{background:#F6F7F8}
.wms .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.wms .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.wms .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.wms .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.wms .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.wms .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.wms .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.wms .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.wms .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.wms .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.wms .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.wms .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.wms .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.wms .lens{fill:#B9BEC6;transition:fill .3s}
.wms .lens.on{fill:var(--g)}
.wms .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.wms .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.wms .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.wms .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.wms .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wms .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:wmsdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes wmsdr{to{stroke-dashoffset:0}}
.wms .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.wms .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.wms .chip.cr{background:#FFE9E4;color:#D9472A}
.wms .chip.wr{background:#FFF1E8;color:#C25510}
.wms .chip.ok{background:#E3F6EC;color:#1E8A55}
.wms .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes wmsbl{50%{opacity:.3}}
@keyframes wmsai{from{opacity:0;transform:translateY(-10px)}}
.wms .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.wms .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.wms .mbar .d{display:flex;gap:5px}
.wms .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.wms .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.wms .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:wmsbl 1.6s infinite}
.wms .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.wms .mbar .gv b{color:var(--o)}
.wms .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.wms .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.wms .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.wms .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.wms .rl{display:flex;flex-direction:column;gap:4px}
.wms .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:wmsai .5s both}
.wms .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wms .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.wms .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.wms .rw em.wr{background:var(--o)}
.wms .rw em.cr{background:var(--c)}
.wms .rw.new{background:rgba(43,182,115,.2)}
.wms .rw.bad{background:rgba(255,109,76,.16)}
.wms .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.wms .snap svg{position:absolute;inset:0;width:100%;height:100%}
.wms .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.wms .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.wms .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.wms .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.wms .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.wms .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.wms .fd{display:grid;gap:3px}
.wms .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.wms .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.wms .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.wms .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.wms .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.wms .fd div.scn{color:#8D9199}
.wms .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.wms .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.wms .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.wms .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.wms .tb .st b{color:#fff}
@media(max-width:700px){.wms .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wms .mg .lst{display:none}
}
@media(max-width:440px){.wms .mg{grid-template-columns:1fr}
.wms .tb .st{margin-left:0}
}
.wms .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.wms .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.wms .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:wmsbl 1.6s infinite}
.wms .flt{margin-left:auto;display:flex;gap:6px}
.wms .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.wms .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.wms .list{display:flex;flex-direction:column;gap:10px}
.wms .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:wmsai .6s cubic-bezier(.2,.8,.2,1) both}
.wms .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.wms .al.cr .ic{background:rgba(255,109,76,.18)}
.wms .al.wr .ic{background:rgba(243,112,33,.18)}
.wms .al.ok .ic{background:rgba(43,182,115,.18)}
.wms .al b{font-size:14.5px}
.wms .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.wms .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.wms .al .chip{margin-left:8px}
.wms .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.wms .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.wms .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.wms .pts b{color:var(--ink)}
.wms .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.wms .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.wms .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.wms .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.wms .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.wms .ch svg{width:100%;height:auto;display:block}
.wms .gl{stroke:#EEF0F2}
.wms .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.wms .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wms .bars.on rect{transform:scaleY(1)}
.wms .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wms .mk{opacity:0;transition:opacity .5s}
.wms .mk.on{opacity:1}
.wms .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.wms .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.wms .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.wms .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.wms .g2{grid-template-columns:1fr}
.wms .feed{height:420px}
}
@media(max-width:520px){.wms .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.wms *{animation:none!important;transition:none!important}
.wms .draw{stroke-dashoffset:0}
.wms .bars rect{transform:none}
}
.wms{min-width:0}.wms .fd{grid-template-columns:minmax(0,1fr)}.wms .fd>span{display:block;min-width:0}.wms .pn{min-width:0;overflow:hidden}

/* yrd yard-management-system */
.yrd{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.yrd *,.yrd *::before,.yrd *::after{box-sizing:border-box}
.yrd{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.yrd .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.yrd section{padding:clamp(60px,8vw,104px) 0}
.yrd .alt{background:#F6F7F8}
.yrd .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.yrd .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.yrd .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.yrd .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.yrd .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.yrd .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.yrd .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.yrd .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.yrd .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.yrd .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.yrd .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.yrd .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.yrd .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.yrd .lens{fill:#B9BEC6;transition:fill .3s}
.yrd .lens.on{fill:var(--g)}
.yrd .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.yrd .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.yrd .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.yrd .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.yrd .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.yrd .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:yrddr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes yrddr{to{stroke-dashoffset:0}}
.yrd .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.yrd .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.yrd .chip.cr{background:#FFE9E4;color:#D9472A}
.yrd .chip.wr{background:#FFF1E8;color:#C25510}
.yrd .chip.ok{background:#E3F6EC;color:#1E8A55}
.yrd .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes yrdbl{50%{opacity:.3}}
@keyframes yrdai{from{opacity:0;transform:translateY(-10px)}}
.yrd .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.yrd .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.yrd .mbar .d{display:flex;gap:5px}
.yrd .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.yrd .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.yrd .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:yrdbl 1.6s infinite}
.yrd .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.yrd .mbar .gv b{color:var(--o)}
.yrd .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.yrd .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.yrd .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.yrd .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.yrd .rl{display:flex;flex-direction:column;gap:4px}
.yrd .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:yrdai .5s both}
.yrd .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yrd .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.yrd .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.yrd .rw em.wr{background:var(--o)}
.yrd .rw em.cr{background:var(--c)}
.yrd .rw.new{background:rgba(43,182,115,.2)}
.yrd .rw.bad{background:rgba(255,109,76,.16)}
.yrd .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.yrd .snap svg{position:absolute;inset:0;width:100%;height:100%}
.yrd .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.yrd .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.yrd .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.yrd .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.yrd .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.yrd .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.yrd .fd{display:grid;gap:3px}
.yrd .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.yrd .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.yrd .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.yrd .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.yrd .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.yrd .fd div.scn{color:#8D9199}
.yrd .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.yrd .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.yrd .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.yrd .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.yrd .tb .st b{color:#fff}
@media(max-width:700px){.yrd .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.yrd .mg .lst{display:none}
}
@media(max-width:440px){.yrd .mg{grid-template-columns:1fr}
.yrd .tb .st{margin-left:0}
}
.yrd .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.yrd .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.yrd .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:yrdbl 1.6s infinite}
.yrd .flt{margin-left:auto;display:flex;gap:6px}
.yrd .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.yrd .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.yrd .list{display:flex;flex-direction:column;gap:10px}
.yrd .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:yrdai .6s cubic-bezier(.2,.8,.2,1) both}
.yrd .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.yrd .al.cr .ic{background:rgba(255,109,76,.18)}
.yrd .al.wr .ic{background:rgba(243,112,33,.18)}
.yrd .al.ok .ic{background:rgba(43,182,115,.18)}
.yrd .al b{font-size:14.5px}
.yrd .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.yrd .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.yrd .al .chip{margin-left:8px}
.yrd .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.yrd .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.yrd .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.yrd .pts b{color:var(--ink)}
.yrd .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.yrd .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.yrd .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.yrd .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.yrd .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.yrd .ch svg{width:100%;height:auto;display:block}
.yrd .gl{stroke:#EEF0F2}
.yrd .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.yrd .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.yrd .bars.on rect{transform:scaleY(1)}
.yrd .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.yrd .mk{opacity:0;transition:opacity .5s}
.yrd .mk.on{opacity:1}
.yrd .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.yrd .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.yrd .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.yrd .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.yrd .g2{grid-template-columns:1fr}
.yrd .feed{height:420px}
}
@media(max-width:520px){.yrd .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.yrd *{animation:none!important;transition:none!important}
.yrd .draw{stroke-dashoffset:0}
.yrd .bars rect{transform:none}
}
.yrd{min-width:0}.yrd .fd{grid-template-columns:minmax(0,1fr)}.yrd .fd>span{display:block;min-width:0}.yrd .pn{min-width:0;overflow:hidden}

/* mvx fleet-management-system */
.mvx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.mvx *,.mvx *::before,.mvx *::after{box-sizing:border-box}
.mvx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.mvx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.mvx section{padding:clamp(60px,8vw,104px) 0}
.mvx .alt{background:#F6F7F8}
.mvx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.mvx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.mvx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.mvx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.mvx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.mvx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.mvx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.mvx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s;background:#F6F7F8}
.mvx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.mvx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.mvx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.mvx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.mvx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.mvx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.mvx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.mvx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.mvx .chip.cr{background:#FFE9E4;color:#D9472A}
.mvx .chip.wr{background:#FFF1E8;color:#C25510}
.mvx .chip.ok{background:#E3F6EC;color:#1E8A55}
.mvx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes mvxbl{50%{opacity:.3}}
@keyframes mvxai{from{opacity:0;transform:translateY(-10px)}}
.mvx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.mvx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.mvx .mbar .d{display:flex;gap:5px}
.mvx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.mvx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.mvx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:mvxbl 1.6s infinite}
.mvx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.mvx .mbar .gv b{color:var(--o)}
.mvx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.mvx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.mvx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.mvx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.mvx .rl{display:flex;flex-direction:column;gap:4px}
.mvx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:mvxai .5s both}
.mvx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.mvx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.mvx .rw em.wr{background:var(--o)}
.mvx .rw em.cr{background:var(--c)}
.mvx .rw.new{background:rgba(43,182,115,.2)}
.mvx .rw.bad{background:rgba(255,109,76,.16)}
.mvx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.mvx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.mvx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.mvx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.mvx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.mvx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.mvx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.mvx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.mvx .fd{display:grid;gap:3px}
.mvx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.mvx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.mvx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.mvx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.mvx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.mvx .fd div.scn{color:#8D9199}
.mvx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.mvx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.mvx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.mvx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.mvx .tb .st b{color:#fff}
@media(max-width:700px){.mvx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mvx .mg .lst{display:none}
}
@media(max-width:440px){.mvx .mg{grid-template-columns:1fr}
.mvx .tb .st{margin-left:0}
}
.mvx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.mvx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.mvx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:mvxbl 1.6s infinite}
.mvx .flt{margin-left:auto;display:flex;gap:6px}
.mvx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.mvx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.mvx .list{display:flex;flex-direction:column;gap:10px}
.mvx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:mvxai .6s cubic-bezier(.2,.8,.2,1) both}
.mvx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.mvx .al.cr .ic{background:rgba(255,109,76,.18)}
.mvx .al.wr .ic{background:rgba(243,112,33,.18)}
.mvx .al.ok .ic{background:rgba(43,182,115,.18)}
.mvx .al b{font-size:14.5px}
.mvx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.mvx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.mvx .al .chip{margin-left:8px}
.mvx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.mvx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.mvx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.mvx .pts b{color:var(--ink)}
.mvx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.mvx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.mvx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.mvx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.mvx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.mvx .ch svg{width:100%;height:auto;display:block}
.mvx .gl{stroke:#EEF0F2}
.mvx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.mvx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mvx .bars.on rect{transform:scaleY(1)}
.mvx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.mvx .mk{opacity:0;transition:opacity .5s}
.mvx .mk.on{opacity:1}
.mvx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.mvx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.mvx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.mvx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.mvx .g2{grid-template-columns:1fr}
.mvx .feed{height:420px}
}
@media(max-width:520px){.mvx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.mvx *{animation:none!important;transition:none!important}
.mvx .bars rect{transform:none}
}
.mvx{min-width:0}.mvx .fd{grid-template-columns:minmax(0,1fr)}.mvx .fd>span{display:block;min-width:0}.mvx .pn{min-width:0;overflow:hidden}

/* rol rail-wagon-ocr-system */
.rol{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.rol *,.rol *::before,.rol *::after{box-sizing:border-box}
.rol{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.rol .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.rol section{padding:clamp(60px,8vw,104px) 0}
.rol .alt{background:#F6F7F8}
.rol .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.rol .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.rol .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.rol .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.rol .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.rol .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.rol .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.rol .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.rol .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.rol .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.rol .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.rol .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.rol .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.rol .lens{fill:#B9BEC6;transition:fill .3s}
.rol .lens.on{fill:var(--g)}
.rol .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.rol .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.rol .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rol .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.rol .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rol .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:roldr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes roldr{to{stroke-dashoffset:0}}
.rol .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.rol .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.rol .chip.cr{background:#FFE9E4;color:#D9472A}
.rol .chip.wr{background:#FFF1E8;color:#C25510}
.rol .chip.ok{background:#E3F6EC;color:#1E8A55}
.rol .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes rolbl{50%{opacity:.3}}
@keyframes rolai{from{opacity:0;transform:translateY(-10px)}}
.rol .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.rol .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.rol .mbar .d{display:flex;gap:5px}
.rol .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.rol .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.rol .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:rolbl 1.6s infinite}
.rol .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.rol .mbar .gv b{color:var(--o)}
.rol .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.rol .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.rol .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.rol .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.rol .rl{display:flex;flex-direction:column;gap:4px}
.rol .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:rolai .5s both}
.rol .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rol .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.rol .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.rol .rw em.wr{background:var(--o)}
.rol .rw em.cr{background:var(--c)}
.rol .rw.new{background:rgba(43,182,115,.2)}
.rol .rw.bad{background:rgba(255,109,76,.16)}
.rol .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.rol .snap svg{position:absolute;inset:0;width:100%;height:100%}
.rol .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.rol .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.rol .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.rol .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.rol .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.rol .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.rol .fd{display:grid;gap:3px}
.rol .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.rol .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.rol .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.rol .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.rol .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.rol .fd div.scn{color:#8D9199}
.rol .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.rol .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.rol .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.rol .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.rol .tb .st b{color:#fff}
@media(max-width:700px){.rol .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rol .mg .lst{display:none}
}
@media(max-width:440px){.rol .mg{grid-template-columns:1fr}
.rol .tb .st{margin-left:0}
}
.rol .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.rol .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.rol .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:rolbl 1.6s infinite}
.rol .flt{margin-left:auto;display:flex;gap:6px}
.rol .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.rol .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.rol .list{display:flex;flex-direction:column;gap:10px}
.rol .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:rolai .6s cubic-bezier(.2,.8,.2,1) both}
.rol .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.rol .al.cr .ic{background:rgba(255,109,76,.18)}
.rol .al.wr .ic{background:rgba(243,112,33,.18)}
.rol .al.ok .ic{background:rgba(43,182,115,.18)}
.rol .al b{font-size:14.5px}
.rol .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.rol .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.rol .al .chip{margin-left:8px}
.rol .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.rol .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.rol .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.rol .pts b{color:var(--ink)}
.rol .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.rol .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.rol .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.rol .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.rol .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.rol .ch svg{width:100%;height:auto;display:block}
.rol .gl{stroke:#EEF0F2}
.rol .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.rol .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rol .bars.on rect{transform:scaleY(1)}
.rol .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.rol .mk{opacity:0;transition:opacity .5s}
.rol .mk.on{opacity:1}
.rol .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.rol .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.rol .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.rol .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.rol .g2{grid-template-columns:1fr}
.rol .feed{height:420px}
}
@media(max-width:520px){.rol .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.rol *{animation:none!important;transition:none!important}
.rol .draw{stroke-dashoffset:0}
.rol .bars rect{transform:none}
}
.rol{min-width:0}.rol .fd{grid-template-columns:minmax(0,1fr)}.rol .fd>span{display:block;min-width:0}.rol .pn{min-width:0;overflow:hidden}

/* prx proximity-warning-system */
.prx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.prx *,.prx *::before,.prx *::after{box-sizing:border-box}
.prx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.prx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.prx section{padding:clamp(60px,8vw,104px) 0}
.prx .alt{background:#F6F7F8}
.prx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.prx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.prx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.prx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.prx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.prx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.prx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.prx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.prx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.prx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.prx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.prx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.prx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.prx .lens{fill:#B9BEC6;transition:fill .3s}
.prx .lens.on{fill:var(--g)}
.prx .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.prx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.prx .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.prx .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.prx .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prx .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:prxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes prxdr{to{stroke-dashoffset:0}}
.prx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.prx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.prx .chip.cr{background:#FFE9E4;color:#D9472A}
.prx .chip.wr{background:#FFF1E8;color:#C25510}
.prx .chip.ok{background:#E3F6EC;color:#1E8A55}
.prx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes prxbl{50%{opacity:.3}}
@keyframes prxai{from{opacity:0;transform:translateY(-10px)}}
.prx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.prx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.prx .mbar .d{display:flex;gap:5px}
.prx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.prx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.prx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:prxbl 1.6s infinite}
.prx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.prx .mbar .gv b{color:var(--o)}
.prx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.prx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.prx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.prx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.prx .rl{display:flex;flex-direction:column;gap:4px}
.prx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:prxai .5s both}
.prx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.prx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.prx .rw em.wr{background:var(--o)}
.prx .rw em.cr{background:var(--c)}
.prx .rw.new{background:rgba(43,182,115,.2)}
.prx .rw.bad{background:rgba(255,109,76,.16)}
.prx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.prx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.prx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.prx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.prx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.prx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.prx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.prx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.prx .fd{display:grid;gap:3px}
.prx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.prx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.prx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.prx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.prx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.prx .fd div.scn{color:#8D9199}
.prx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.prx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.prx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.prx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.prx .tb .st b{color:#fff}
@media(max-width:700px){.prx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.prx .mg .lst{display:none}
}
@media(max-width:440px){.prx .mg{grid-template-columns:1fr}
.prx .tb .st{margin-left:0}
}
.prx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.prx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.prx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:prxbl 1.6s infinite}
.prx .flt{margin-left:auto;display:flex;gap:6px}
.prx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.prx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.prx .list{display:flex;flex-direction:column;gap:10px}
.prx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:prxai .6s cubic-bezier(.2,.8,.2,1) both}
.prx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.prx .al.cr .ic{background:rgba(255,109,76,.18)}
.prx .al.wr .ic{background:rgba(243,112,33,.18)}
.prx .al.ok .ic{background:rgba(43,182,115,.18)}
.prx .al b{font-size:14.5px}
.prx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.prx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.prx .al .chip{margin-left:8px}
.prx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.prx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.prx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.prx .pts b{color:var(--ink)}
.prx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.prx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.prx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.prx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.prx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.prx .ch svg{width:100%;height:auto;display:block}
.prx .gl{stroke:#EEF0F2}
.prx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.prx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.prx .bars.on rect{transform:scaleY(1)}
.prx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.prx .mk{opacity:0;transition:opacity .5s}
.prx .mk.on{opacity:1}
.prx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.prx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.prx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.prx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.prx .g2{grid-template-columns:1fr}
.prx .feed{height:420px}
}
@media(max-width:520px){.prx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.prx *{animation:none!important;transition:none!important}
.prx .draw{stroke-dashoffset:0}
.prx .bars rect{transform:none}
}
.prx{min-width:0}.prx .fd{grid-template-columns:minmax(0,1fr)}.prx .fd>span{display:block;min-width:0}.prx .pn{min-width:0;overflow:hidden}

/* fux fuel-management-system */
.fux{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.fux *,.fux *::before,.fux *::after{box-sizing:border-box}
.fux{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.fux .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.fux section{padding:clamp(60px,8vw,104px) 0}
.fux .alt{background:#F6F7F8}
.fux .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.fux .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.fux .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.fux .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.fux .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.fux .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.fux .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.fux .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.fux .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.fux .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.fux .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.fux .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.fux .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.fux .lens{fill:#B9BEC6;transition:fill .3s}
.fux .lens.on{fill:var(--g)}
.fux .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.fux .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.fux .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fux .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.fux .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fux .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:fuxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes fuxdr{to{stroke-dashoffset:0}}
.fux .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.fux .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.fux .chip.cr{background:#FFE9E4;color:#D9472A}
.fux .chip.wr{background:#FFF1E8;color:#C25510}
.fux .chip.ok{background:#E3F6EC;color:#1E8A55}
.fux .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes fuxbl{50%{opacity:.3}}
@keyframes fuxai{from{opacity:0;transform:translateY(-10px)}}
.fux .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.fux .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.fux .mbar .d{display:flex;gap:5px}
.fux .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.fux .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.fux .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:fuxbl 1.6s infinite}
.fux .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.fux .mbar .gv b{color:var(--o)}
.fux .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.fux .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.fux .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.fux .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.fux .rl{display:flex;flex-direction:column;gap:4px}
.fux .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:fuxai .5s both}
.fux .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fux .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.fux .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.fux .rw em.wr{background:var(--o)}
.fux .rw em.cr{background:var(--c)}
.fux .rw.new{background:rgba(43,182,115,.2)}
.fux .rw.bad{background:rgba(255,109,76,.16)}
.fux .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.fux .snap svg{position:absolute;inset:0;width:100%;height:100%}
.fux .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.fux .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.fux .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.fux .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.fux .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.fux .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.fux .fd{display:grid;gap:3px}
.fux .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.fux .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.fux .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.fux .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.fux .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.fux .fd div.scn{color:#8D9199}
.fux .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.fux .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.fux .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.fux .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.fux .tb .st b{color:#fff}
@media(max-width:700px){.fux .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fux .mg .lst{display:none}
}
@media(max-width:440px){.fux .mg{grid-template-columns:1fr}
.fux .tb .st{margin-left:0}
}
.fux .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.fux .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.fux .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:fuxbl 1.6s infinite}
.fux .flt{margin-left:auto;display:flex;gap:6px}
.fux .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.fux .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.fux .list{display:flex;flex-direction:column;gap:10px}
.fux .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:fuxai .6s cubic-bezier(.2,.8,.2,1) both}
.fux .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.fux .al.cr .ic{background:rgba(255,109,76,.18)}
.fux .al.wr .ic{background:rgba(243,112,33,.18)}
.fux .al.ok .ic{background:rgba(43,182,115,.18)}
.fux .al b{font-size:14.5px}
.fux .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.fux .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.fux .al .chip{margin-left:8px}
.fux .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.fux .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.fux .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.fux .pts b{color:var(--ink)}
.fux .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.fux .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.fux .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.fux .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.fux .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.fux .ch svg{width:100%;height:auto;display:block}
.fux .gl{stroke:#EEF0F2}
.fux .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.fux .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fux .bars.on rect{transform:scaleY(1)}
.fux .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.fux .mk{opacity:0;transition:opacity .5s}
.fux .mk.on{opacity:1}
.fux .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.fux .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.fux .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.fux .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.fux .g2{grid-template-columns:1fr}
.fux .feed{height:420px}
}
@media(max-width:520px){.fux .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.fux *{animation:none!important;transition:none!important}
.fux .draw{stroke-dashoffset:0}
.fux .bars rect{transform:none}
}
.fux{min-width:0}.fux .fd{grid-template-columns:minmax(0,1fr)}.fux .fd>span{display:block;min-width:0}.fux .pn{min-width:0;overflow:hidden}

/* vsx visitor-management-system */
.vsx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.vsx *,.vsx *::before,.vsx *::after{box-sizing:border-box}
.vsx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.vsx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.vsx section{padding:clamp(60px,8vw,104px) 0}
.vsx .alt{background:#F6F7F8}
.vsx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.vsx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.vsx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.vsx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.vsx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.vsx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.vsx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.vsx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.vsx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.vsx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.vsx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.vsx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.vsx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.vsx .lens{fill:#B9BEC6;transition:fill .3s}
.vsx .lens.on{fill:var(--g)}
.vsx .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.vsx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.vsx .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.vsx .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.vsx .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vsx .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:vsxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes vsxdr{to{stroke-dashoffset:0}}
.vsx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.vsx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.vsx .chip.cr{background:#FFE9E4;color:#D9472A}
.vsx .chip.wr{background:#FFF1E8;color:#C25510}
.vsx .chip.ok{background:#E3F6EC;color:#1E8A55}
.vsx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes vsxbl{50%{opacity:.3}}
@keyframes vsxai{from{opacity:0;transform:translateY(-10px)}}
.vsx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.vsx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.vsx .mbar .d{display:flex;gap:5px}
.vsx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.vsx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.vsx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:vsxbl 1.6s infinite}
.vsx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.vsx .mbar .gv b{color:var(--o)}
.vsx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.vsx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.vsx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.vsx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.vsx .rl{display:flex;flex-direction:column;gap:4px}
.vsx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:vsxai .5s both}
.vsx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.vsx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.vsx .rw em.wr{background:var(--o)}
.vsx .rw em.cr{background:var(--c)}
.vsx .rw.new{background:rgba(43,182,115,.2)}
.vsx .rw.bad{background:rgba(255,109,76,.16)}
.vsx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.vsx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.vsx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.vsx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.vsx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.vsx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.vsx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.vsx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.vsx .fd{display:grid;gap:3px}
.vsx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.vsx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.vsx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.vsx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.vsx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.vsx .fd div.scn{color:#8D9199}
.vsx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.vsx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.vsx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.vsx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.vsx .tb .st b{color:#fff}
@media(max-width:700px){.vsx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vsx .mg .lst{display:none}
}
@media(max-width:440px){.vsx .mg{grid-template-columns:1fr}
.vsx .tb .st{margin-left:0}
}
.vsx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.vsx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.vsx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:vsxbl 1.6s infinite}
.vsx .flt{margin-left:auto;display:flex;gap:6px}
.vsx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.vsx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.vsx .list{display:flex;flex-direction:column;gap:10px}
.vsx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:vsxai .6s cubic-bezier(.2,.8,.2,1) both}
.vsx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.vsx .al.cr .ic{background:rgba(255,109,76,.18)}
.vsx .al.wr .ic{background:rgba(243,112,33,.18)}
.vsx .al.ok .ic{background:rgba(43,182,115,.18)}
.vsx .al b{font-size:14.5px}
.vsx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.vsx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.vsx .al .chip{margin-left:8px}
.vsx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.vsx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.vsx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.vsx .pts b{color:var(--ink)}
.vsx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.vsx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.vsx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.vsx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.vsx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.vsx .ch svg{width:100%;height:auto;display:block}
.vsx .gl{stroke:#EEF0F2}
.vsx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.vsx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vsx .bars.on rect{transform:scaleY(1)}
.vsx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.vsx .mk{opacity:0;transition:opacity .5s}
.vsx .mk.on{opacity:1}
.vsx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.vsx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.vsx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.vsx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.vsx .g2{grid-template-columns:1fr}
.vsx .feed{height:420px}
}
@media(max-width:520px){.vsx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.vsx *{animation:none!important;transition:none!important}
.vsx .draw{stroke-dashoffset:0}
.vsx .bars rect{transform:none}
}
.vsx{min-width:0}.vsx .fd{grid-template-columns:minmax(0,1fr)}.vsx .fd>span{display:block;min-width:0}.vsx .pn{min-width:0;overflow:hidden}

/* pkx parking-management-system */
.pkx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.pkx *,.pkx *::before,.pkx *::after{box-sizing:border-box}
.pkx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.pkx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.pkx section{padding:clamp(60px,8vw,104px) 0}
.pkx .alt{background:#F6F7F8}
.pkx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.pkx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.pkx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.pkx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.pkx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.pkx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.pkx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.pkx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.pkx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.pkx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.pkx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.pkx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.pkx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.pkx .lens{fill:#B9BEC6;transition:fill .3s}
.pkx .lens.on{fill:var(--g)}
.pkx .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.pkx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.pkx .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pkx .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.pkx .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pkx .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:pkxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes pkxdr{to{stroke-dashoffset:0}}
.pkx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.pkx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.pkx .chip.cr{background:#FFE9E4;color:#D9472A}
.pkx .chip.wr{background:#FFF1E8;color:#C25510}
.pkx .chip.ok{background:#E3F6EC;color:#1E8A55}
.pkx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes pkxbl{50%{opacity:.3}}
@keyframes pkxai{from{opacity:0;transform:translateY(-10px)}}
.pkx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.pkx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.pkx .mbar .d{display:flex;gap:5px}
.pkx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.pkx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.pkx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:pkxbl 1.6s infinite}
.pkx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.pkx .mbar .gv b{color:var(--o)}
.pkx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.pkx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.pkx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.pkx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.pkx .rl{display:flex;flex-direction:column;gap:4px}
.pkx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:pkxai .5s both}
.pkx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.pkx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.pkx .rw em.wr{background:var(--o)}
.pkx .rw em.cr{background:var(--c)}
.pkx .rw.new{background:rgba(43,182,115,.2)}
.pkx .rw.bad{background:rgba(255,109,76,.16)}
.pkx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.pkx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.pkx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.pkx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.pkx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.pkx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.pkx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.pkx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.pkx .fd{display:grid;gap:3px}
.pkx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.pkx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.pkx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.pkx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.pkx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.pkx .fd div.scn{color:#8D9199}
.pkx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.pkx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.pkx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.pkx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.pkx .tb .st b{color:#fff}
@media(max-width:700px){.pkx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pkx .mg .lst{display:none}
}
@media(max-width:440px){.pkx .mg{grid-template-columns:1fr}
.pkx .tb .st{margin-left:0}
}
.pkx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.pkx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.pkx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:pkxbl 1.6s infinite}
.pkx .flt{margin-left:auto;display:flex;gap:6px}
.pkx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.pkx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.pkx .list{display:flex;flex-direction:column;gap:10px}
.pkx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:pkxai .6s cubic-bezier(.2,.8,.2,1) both}
.pkx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.pkx .al.cr .ic{background:rgba(255,109,76,.18)}
.pkx .al.wr .ic{background:rgba(243,112,33,.18)}
.pkx .al.ok .ic{background:rgba(43,182,115,.18)}
.pkx .al b{font-size:14.5px}
.pkx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.pkx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.pkx .al .chip{margin-left:8px}
.pkx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.pkx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.pkx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.pkx .pts b{color:var(--ink)}
.pkx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.pkx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.pkx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.pkx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.pkx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.pkx .ch svg{width:100%;height:auto;display:block}
.pkx .gl{stroke:#EEF0F2}
.pkx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.pkx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pkx .bars.on rect{transform:scaleY(1)}
.pkx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pkx .mk{opacity:0;transition:opacity .5s}
.pkx .mk.on{opacity:1}
.pkx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.pkx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.pkx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.pkx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.pkx .g2{grid-template-columns:1fr}
.pkx .feed{height:420px}
}
@media(max-width:520px){.pkx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.pkx *{animation:none!important;transition:none!important}
.pkx .draw{stroke-dashoffset:0}
.pkx .bars rect{transform:none}
}
.pkx{min-width:0}.pkx .fd{grid-template-columns:minmax(0,1fr)}.pkx .fd>span{display:block;min-width:0}.pkx .pn{min-width:0;overflow:hidden}

/* crx crane-ocr-system */
.crx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.crx *,.crx *::before,.crx *::after{box-sizing:border-box}
.crx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.crx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.crx section{padding:clamp(60px,8vw,104px) 0}
.crx .alt{background:#F6F7F8}
.crx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.crx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.crx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.crx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.crx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.crx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.crx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.crx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.crx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.crx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.crx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.crx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.crx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.crx .lens{fill:#B9BEC6;transition:fill .3s}
.crx .lens.on{fill:var(--g)}
.crx .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.crx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.crx .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.crx .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.crx .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.crx .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:crxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes crxdr{to{stroke-dashoffset:0}}
.crx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.crx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.crx .chip.cr{background:#FFE9E4;color:#D9472A}
.crx .chip.wr{background:#FFF1E8;color:#C25510}
.crx .chip.ok{background:#E3F6EC;color:#1E8A55}
.crx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes crxbl{50%{opacity:.3}}
@keyframes crxai{from{opacity:0;transform:translateY(-10px)}}
.crx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.crx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.crx .mbar .d{display:flex;gap:5px}
.crx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.crx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.crx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:crxbl 1.6s infinite}
.crx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.crx .mbar .gv b{color:var(--o)}
.crx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.crx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.crx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.crx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.crx .rl{display:flex;flex-direction:column;gap:4px}
.crx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:crxai .5s both}
.crx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.crx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.crx .rw em.wr{background:var(--o)}
.crx .rw em.cr{background:var(--c)}
.crx .rw.new{background:rgba(43,182,115,.2)}
.crx .rw.bad{background:rgba(255,109,76,.16)}
.crx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.crx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.crx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.crx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.crx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.crx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.crx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.crx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.crx .fd{display:grid;gap:3px}
.crx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.crx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.crx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.crx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.crx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.crx .fd div.scn{color:#8D9199}
.crx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.crx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.crx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.crx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.crx .tb .st b{color:#fff}
@media(max-width:700px){.crx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.crx .mg .lst{display:none}
}
@media(max-width:440px){.crx .mg{grid-template-columns:1fr}
.crx .tb .st{margin-left:0}
}
.crx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.crx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.crx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:crxbl 1.6s infinite}
.crx .flt{margin-left:auto;display:flex;gap:6px}
.crx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.crx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.crx .list{display:flex;flex-direction:column;gap:10px}
.crx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:crxai .6s cubic-bezier(.2,.8,.2,1) both}
.crx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.crx .al.cr .ic{background:rgba(255,109,76,.18)}
.crx .al.wr .ic{background:rgba(243,112,33,.18)}
.crx .al.ok .ic{background:rgba(43,182,115,.18)}
.crx .al b{font-size:14.5px}
.crx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.crx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.crx .al .chip{margin-left:8px}
.crx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.crx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.crx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.crx .pts b{color:var(--ink)}
.crx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.crx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.crx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.crx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.crx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.crx .ch svg{width:100%;height:auto;display:block}
.crx .gl{stroke:#EEF0F2}
.crx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.crx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.crx .bars.on rect{transform:scaleY(1)}
.crx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.crx .mk{opacity:0;transition:opacity .5s}
.crx .mk.on{opacity:1}
.crx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.crx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.crx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.crx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.crx .g2{grid-template-columns:1fr}
.crx .feed{height:420px}
}
@media(max-width:520px){.crx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.crx *{animation:none!important;transition:none!important}
.crx .draw{stroke-dashoffset:0}
.crx .bars rect{transform:none}
}
.crx{min-width:0}.crx .fd{grid-template-columns:minmax(0,1fr)}.crx .fd>span{display:block;min-width:0}.crx .pn{min-width:0;overflow:hidden}

/* cnx object-counting-system */
.cnx{--ink:#1F2226;--mut:#5C6068;--ln:#DDE0E4;--o:#F37021;--c:#FF6D4C;--g:#2BB673;--st:#2E3136}
.cnx *,.cnx *::before,.cnx *::after{box-sizing:border-box}
.cnx{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:#fff}
.cnx .w{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.cnx section{padding:clamp(60px,8vw,104px) 0}
.cnx .alt{background:#F6F7F8}
.cnx .ey{font-size:13px;font-weight:600;color:#B9500F;background:#FFF1E8;padding:6px 14px;border-radius:999px;display:inline-block}
.cnx .h1{font-size:clamp(34px,4.8vw,62px);line-height:1.04;letter-spacing:-.04em;font-weight:800;margin:16px 0 18px;max-width:15ch}
.cnx .h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:14px 0 14px;max-width:20ch}
.cnx .ld{color:var(--mut);font-size:18px;line-height:1.6;max-width:54ch;margin:0}
.cnx .btn{display:inline-flex;border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;margin-top:26px;background:var(--o);color:#fff}
.cnx .g2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.cnx .hv{position:relative;border-radius:22px;background:#fff;border:1px solid var(--ln);overflow:hidden;box-shadow:0 40px 80px -50px rgba(31,34,38,.5)}
.cnx .sc{position:relative;aspect-ratio:760/270;transition:box-shadow .4s}
.cnx .stp{position:absolute;left:14px;top:12px;z-index:3;font-size:12px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 11px;border-radius:999px;transition:.3s}
.cnx .stp.on{color:#1E8A55;border-color:#BFE8D2;background:#F1FBF6}
.cnx .stp.ok{color:#fff;background:var(--g);border-color:var(--g)}
.cnx .stp.bad{color:#fff;background:var(--c);border-color:var(--c)}
.cnx .mode{position:absolute;left:14px;top:46px;z-index:3;font-size:11.5px;font-weight:700;color:var(--mut);background:#fff;border:1px solid var(--ln);padding:5px 10px;border-radius:999px}
.cnx .lens{fill:#B9BEC6;transition:fill .3s}
.cnx .lens.on{fill:var(--g)}
.cnx .sc::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#E3E6EA 1.2px,transparent 1.2px);background-size:22px 22px}
.cnx .sc>svg{position:absolute;inset:0;width:100%;height:100%}
.cnx .la{fill:none;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cnx .lw{fill:#fff;stroke:#3A3D43;stroke-width:2;stroke-linejoin:round}
.cnx .lg{fill:none;stroke:#B9BEC6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cnx .draw{stroke-dasharray:1600;stroke-dashoffset:1600;animation:cnxdr 2.4s .2s cubic-bezier(.6,0,.2,1) forwards}
@keyframes cnxdr{to{stroke-dashoffset:0}}
.cnx .ctag{font:600 11px "Plus Jakarta Sans",sans-serif;fill:#5C6068}
.cnx .chip{font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.cnx .chip.cr{background:#FFE9E4;color:#D9472A}
.cnx .chip.wr{background:#FFF1E8;color:#C25510}
.cnx .chip.ok{background:#E3F6EC;color:#1E8A55}
.cnx .sc.alarm{box-shadow:inset 0 0 0 3px rgba(255,109,76,.7)}
@keyframes cnxbl{50%{opacity:.3}}
@keyframes cnxai{from{opacity:0;transform:translateY(-10px)}}
.cnx .mon{background:var(--st);color:#fff;padding:10px 12px 12px;font-size:12px}
.cnx .mbar{display:flex;align-items:center;gap:8px;color:#C9CCD2;font-weight:600;font-size:12px;padding:0 2px 9px}
.cnx .mbar .d{display:flex;gap:5px}
.cnx .mbar .d i{width:9px;height:9px;border-radius:50%;background:#55595F}
.cnx .mbar .lv{margin-left:auto;display:flex;align-items:center;gap:6px;color:#fff}
.cnx .mbar .lv i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:cnxbl 1.6s infinite}
.cnx .mbar .gv{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#fff;padding-right:9px;border-right:1px solid rgba(255,255,255,.15);margin-right:1px}
.cnx .mbar .gv b{color:var(--o)}
.cnx .mbar .gv i{width:5px;height:5px;border-radius:50%;background:var(--g);display:inline-block}
.cnx .mg{display:grid;grid-template-columns:128px minmax(0,1fr) minmax(0,1fr);gap:10px}
.cnx .pn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}
.cnx .pn h6{margin:0 0 6px;font-size:10.5px;font-weight:600;color:#8D9199;letter-spacing:.02em}
.cnx .rl{display:flex;flex-direction:column;gap:4px}
.cnx .rw{display:grid;grid-template-columns:1fr auto;gap:0 4px;padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.04);animation:cnxai .5s both}
.cnx .rw b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnx .rw span{white-space:nowrap;font-size:10px;color:#8D9199}
.cnx .rw em{grid-row:span 2;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--g)}
.cnx .rw em.wr{background:var(--o)}
.cnx .rw em.cr{background:var(--c)}
.cnx .rw.new{background:rgba(43,182,115,.2)}
.cnx .rw.bad{background:rgba(255,109,76,.16)}
.cnx .snap{position:relative;border-radius:8px;overflow:hidden;background:#1C1E22;aspect-ratio:4/3}
.cnx .snap svg{position:absolute;inset:0;width:100%;height:100%}
.cnx .snap .tg{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;z-index:1}
.cnx .snap .wt{position:absolute;inset:0;display:grid;place-items:center;color:#8D9199;font-size:11px;font-weight:600;transition:opacity .4s}
.cnx .prow{display:flex;align-items:center;gap:4px 8px;margin-top:8px;flex-wrap:wrap}
.cnx .pc{background:#fff;color:#111;border:2px solid #111;border-radius:4px;font-weight:800;font-size:11px;padding:2px 6px;white-space:nowrap;opacity:.25;transition:opacity .4s}
.cnx .pr{font-size:14px;font-weight:800;letter-spacing:.01em;min-height:22px;white-space:nowrap;overflow:hidden}
.cnx .cf{margin-left:auto;font-size:10px;font-weight:700;color:#7BE0AE;opacity:0;transition:opacity .4s}
.cnx .fd{display:grid;gap:3px}
.cnx .fd label{display:block;font-size:10px;color:#8D9199;font-weight:600;margin-bottom:2px}
.cnx .fd div{background:rgba(255,255,255,.08);border-radius:6px;padding:5px 8px;font-weight:700;font-size:12px;min-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s}
.cnx .fd div.ok{background:rgba(43,182,115,.22);color:#9FF0C6}
.cnx .fd div.wr{background:rgba(243,112,33,.24);color:#FFC59E}
.cnx .fd div.cr{background:rgba(255,109,76,.26);color:#FFC1B2}
.cnx .fd div.scn{color:#8D9199}
.cnx .tb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.cnx .tb button{font:inherit;font-size:11px;font-weight:600;color:#C9CCD2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px}
.cnx .tb button.on{background:var(--o);border-color:var(--o);color:#fff}
.cnx .tb .st{margin-left:auto;color:#AEB2B9;font-size:11px;font-weight:600}
.cnx .tb .st b{color:#fff}
@media(max-width:700px){.cnx .mg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cnx .mg .lst{display:none}
}
@media(max-width:440px){.cnx .mg{grid-template-columns:1fr}
.cnx .tb .st{margin-left:0}
}
.cnx .feed{position:relative;height:460px;border-radius:22px;background:var(--st);overflow:hidden;padding:16px}
.cnx .feed .top{display:flex;align-items:center;gap:10px;color:#C9CCD2;font-size:13px;font-weight:600;padding:2px 4px 12px;flex-wrap:wrap}
.cnx .feed .top i{width:8px;height:8px;border-radius:50%;background:var(--g);animation:cnxbl 1.6s infinite}
.cnx .flt{margin-left:auto;display:flex;gap:6px}
.cnx .flt button{font:inherit;font-size:12px;font-weight:600;border:1px solid rgba(255,255,255,.18);background:none;color:#C9CCD2;border-radius:999px;padding:4px 10px;cursor:pointer}
.cnx .flt button.on{background:#fff;color:var(--ink);border-color:#fff}
.cnx .list{display:flex;flex-direction:column;gap:10px}
.cnx .al{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;animation:cnxai .6s cubic-bezier(.2,.8,.2,1) both}
.cnx .al .ic{grid-row:span 2;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.cnx .al.cr .ic{background:rgba(255,109,76,.18)}
.cnx .al.wr .ic{background:rgba(243,112,33,.18)}
.cnx .al.ok .ic{background:rgba(43,182,115,.18)}
.cnx .al b{font-size:14.5px}
.cnx .al .m{grid-column:2;font-size:12.5px;color:#AEB2B9}
.cnx .al .t{grid-row:span 2;font-size:11.5px;color:#8D9199;text-align:right}
.cnx .al .chip{margin-left:8px}
.cnx .feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--st));pointer-events:none}
.cnx .pts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.cnx .pts li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;color:var(--mut)}
.cnx .pts b{color:var(--ink)}
.cnx .ch{border-radius:22px;background:#fff;border:1px solid var(--ln);padding:18px;box-shadow:0 40px 80px -50px rgba(31,34,38,.45)}
.cnx .ch .hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:6px;gap:10px;flex-wrap:wrap}
.cnx .ch .hd span{font-size:12.5px;font-weight:600;color:var(--mut)}
.cnx .lgd{display:flex;gap:16px;font-size:12px;color:var(--mut);font-weight:600;margin:0 0 6px;flex-wrap:wrap}
.cnx .lgd i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.cnx .ch svg{width:100%;height:auto;display:block}
.cnx .gl{stroke:#EEF0F2}
.cnx .ax{font-size:11px;fill:#9A9EA5;font-family:"Plus Jakarta Sans",sans-serif}
.cnx .bars rect{fill:#E3E6EA;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cnx .bars.on rect{transform:scaleY(1)}
.cnx .lnp{fill:none;stroke:var(--o);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.cnx .mk{opacity:0;transition:opacity .5s}
.cnx .mk.on{opacity:1}
.cnx .ann{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700}
.cnx .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.cnx .kp div{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--mut)}
.cnx .kp b{display:block;font-size:20px;color:var(--ink);letter-spacing:-.02em}
@media(max-width:900px){.cnx .g2{grid-template-columns:1fr}
.cnx .feed{height:420px}
}
@media(max-width:520px){.cnx .kp b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.cnx *{animation:none!important;transition:none!important}
.cnx .draw{stroke-dashoffset:0}
.cnx .bars rect{transform:none}
}
.cnx{min-width:0}.cnx .fd{grid-template-columns:minmax(0,1fr)}.cnx .fd>span{display:block;min-width:0}.cnx .pn{min-width:0;overflow:hidden}