.operation-demo{margin-top:80px;background:#17121f;color:#fff;padding:48px;border:1px solid #30283d;overflow:hidden}.operation-demo *{box-sizing:border-box}.op-heading{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:38px}.operation-demo .op-kicker{color:#c6a1f0;font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 20px}.op-heading h3{font-size:clamp(32px,4vw,56px);letter-spacing:-2px;line-height:1.22;margin:0}.op-heading em{font-style:normal;color:#c09aef}.op-intro p{font-size:14px;line-height:1.8;color:#c4bacd;margin:14px 0 0}.op-example{font-size:11px;border:1px solid #665375;padding:6px 10px;display:inline-block;border-radius:20px}.op-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#40344f;padding:1px}.op-tabs button{appearance:none;border:0;border-radius:0;background:#251d30;color:#cbbfd5;padding:20px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;font:inherit;font-size:14px;text-align:left}.op-tabs button span{font-size:10px;color:#aa91bd}.op-tabs button b{margin-left:auto;font-size:17px;font-weight:400}.op-tabs button[aria-selected=true]{background:#7d28d2;color:white}.op-tabs button[aria-selected=true] span{color:#ead8ff}.op-tabs button:hover{background:#513369}.operation-demo :focus-visible{outline:3px solid #e4c6ff;outline-offset:4px;position:relative;z-index:2}.op-panel{padding:36px 0 0}.op-panel[hidden]{display:none}.op-panel-top{display:grid;grid-template-columns:1fr 1.12fr;gap:36px;align-items:center;min-height:250px}.op-panel-copy h4{font-size:32px;letter-spacing:-1.1px;line-height:1.35;margin:0 0 20px}.op-panel-copy>p:last-child{font-size:14px;line-height:1.9;color:#c4bacd;max-width:380px;margin:0}.op-art{height:245px;background:#241a31;margin:0;position:relative;overflow:hidden;border:1px solid #493358}.op-map{background:radial-gradient(ellipse at center,#542c76,#21182d 72%)}.op-map-label{position:absolute;top:18px;left:20px;font-size:9px;letter-spacing:1.5px;color:#c8a7e6}.op-map-footer{position:absolute;bottom:14px;left:20px;font-size:10px;color:#c5b2d2}.op-map svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}.op-map path{fill:none;stroke:#ae74e8;stroke-width:1.6;stroke-dasharray:6 7}.op-node{position:absolute;font-size:12px;font-weight:700;padding:14px 18px;background:#2c203b;border:1px solid #8557ab;z-index:1;box-shadow:0 10px 25px #110a1c50}.op-node-a{left:6%;top:27%}.op-node-core{left:41%;top:43%;background:#7d28d2;border-color:#c28bf6}.op-node-core span{display:block;font-size:7px;letter-spacing:1.5px;margin-top:5px;color:#e4cff8}.op-node-b{right:5%;top:65%}.op-orbit{position:absolute;width:180px;height:180px;border:1px solid #a177c436;border-radius:50%;top:28px;left:32%;box-shadow:0 0 0 24px #7d28d20b,0 0 0 48px #7d28d209}.op-panel:not([hidden]) .op-steps article{animation:op-enter .45s ease both}.op-panel:not([hidden]) .op-steps article:nth-child(2){animation-delay:.08s}.op-panel:not([hidden]) .op-steps article:nth-child(3){animation-delay:.16s}@keyframes op-enter{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}.op-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.op-steps article{display:flex;gap:15px;padding:22px 18px;background:#251d30;border-top:2px solid #7346a3}.op-step-number{font-size:10px;color:#b58bdf;padding-top:5px}.op-steps h5{font-size:16px;margin:0 0 10px}.op-steps p{font-size:12px;line-height:1.8;color:#c4bacd;margin:0}.op-connect{display:flex;align-items:center;gap:18px;font-size:12px;padding:20px 0;color:#b9a9c7}.op-connect strong{font-size:13px;color:#e2cef6;font-weight:500}.op-connect>span:last-child{margin-left:auto;color:#d6b2f9;font-size:24px}.op-footer{border-top:1px solid #493b56;display:flex;gap:20px;justify-content:space-between;align-items:center;padding-top:24px}.op-footer p{font-size:10px;color:#b9a9c7;margin:0;line-height:2}.op-footer p span{margin:0 8px;color:#9974ba}.op-footer a{font-size:12px;color:#fff;font-weight:700}.op-art-top{display:flex;justify-content:space-between;padding:15px;font-size:10px;color:#d4b9ec}.op-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 15px}.op-thumbs img{width:100%;height:185px;object-fit:cover;object-position:top;background:white}.op-warehouse img{display:block;width:100%;height:210px;object-fit:cover}.op-warehouse figcaption{font-size:10px;color:#cabbd5;padding:8px 12px}.motion-paused .operation-demo *, .motion-reduced .operation-demo *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){.operation-demo *{animation:none!important;transition:none!important}}@media(max-width:1000px){.operation-demo{padding:30px}.op-tabs button{gap:7px;padding:17px 10px;font-size:12px}.op-tabs button b{display:none}.op-panel-top{gap:24px}.op-panel-copy h4{font-size:28px}}@media(max-width:760px){.operation-demo{margin-top:45px;padding:24px 18px}.op-heading{display:block;margin-bottom:24px}.op-heading h3{font-size:34px;letter-spacing:-1.3px}.op-intro{margin-top:22px;display:flex;gap:15px;align-items:start}.op-example{white-space:nowrap;margin-top:2px;font-size:9px;padding:5px 8px}.op-intro p{font-size:11px;margin:0}.op-tabs{grid-template-columns:repeat(3,1fr);gap:2px;background:none}.op-tabs button{font-size:11px;padding:14px 8px;gap:7px}.op-tabs button span{font-size:8px}.op-panel-top{grid-template-columns:1fr;gap:24px}.op-panel{padding-top:26px}.op-panel-copy h4{font-size:28px}.op-panel-copy>p:last-child{font-size:13px}.op-art{height:225px}.op-warehouse img{height:190px}.op-thumbs img{height:164px}.op-steps{grid-template-columns:1fr;gap:8px;margin-top:18px}.op-steps article{padding:17px 14px;gap:15px}.op-steps h5{font-size:14px;margin-bottom:5px}.op-steps p{font-size:12px}.op-connect{gap:10px;font-size:10px}.op-connect strong{font-size:11px}.op-footer{display:block;padding-top:17px}.op-footer p{font-size:9px}.op-footer p span{margin:0 3px}.op-footer a{display:inline-block;margin-top:15px;font-size:12px}.op-node{font-size:10px;padding:12px}.op-map-footer{font-size:9px}.op-orbit{left:24%}}
.operation-demo .op-heading{position:static;background:transparent;backdrop-filter:none;z-index:auto;padding:0;border:0;flex-wrap:nowrap;box-shadow:none;color:#fff}.operation-demo .op-footer{background:transparent;padding-bottom:0;color:inherit}.op-tabs button[aria-selected=true]:hover{background:#7d28d2}
