.otit-illustration{margin-top:30px;}
.otit-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px;flex-direction:column;}
.otit-heading p{margin:0;color:#bfd0e6;font-size:15px;line-height:1.7;}
.illustrative-badge{display:block;color:#91a8c7;font-size:12px;letter-spacing:.13em;margin-bottom:4px;}
.otit-mobile-hint{display:none;font-size:14px;color:#a6bad5;margin:0 0 12px;}
.otit-viewport{overflow-x:auto;overscroll-behavior-x:contain;border-radius:0;scrollbar-color:#56749b #17263a;scrollbar-width:thin;padding-top:20px;background:transparent;}
.otit-stage{position:relative;margin:0;min-width:960px;isolation:auto;background:transparent;border-radius:0;}
.otit-stage>img{width:100%;height:auto;display:block;position:relative;background:transparent;border-radius:0;}
.network-zone{position:absolute;top:0;display:flex;align-items:center;gap:12px;color:#dceafa;z-index:2;}
.network-zone b{font-size:20px;font-weight:500;border:1px solid #93c5fd55;border-radius:6px;padding:6px 9px;}
.network-zone span{font-size:14px;}
.zone-ot{left:3%;}
.zone-it{left:78%;right:1%;}
.zone-it span{font-size:13px;}
.otit-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.data-node{position:absolute;font-size:13px;line-height:1.4;background:#16283fee;border:1px solid #86aed16b;border-radius:4px;color:#dceafa;padding:6px 9px;transform:translate(-50%,-50%);z-index:3;}
.data-node b{display:block;font-size:15px;font-weight:600;}
.data-node small{display:block;color:#bdd3ec;font-size:12px;}
.node-cnc{left:35%;top:45%;}
.node-plc{left:58%;top:63%;}
.node-drive{left:71%;top:36.5%;}
.node-iot{left:10%;top:31%;}
.node-box{left:51.4%;top:80%;}
.node-supervision{left:90.8%;top:53%;}
.otit-reading{margin-top:22px;}
.flow-reading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:#c7d9f0;margin:0 0 12px;}
.flow-reading b{font-weight:500;}
.flow-reading span{color:#93c5fd;}
.scenario-note{font-size:13px;color:#a5b9d2;line-height:1.7;margin:0;max-width:850px;}
.factory-note a{color:#a6c8ee;text-underline-offset:3px;}
.otit-stage .atelier-grid{display:block;}
.otit-stage,.otit-stage>img,.otit-viewport{border-radius:0!important;background:transparent!important;}
.watched-label{position:absolute;color:#dceafa;font-size:14px;line-height:1.4;background:rgba(15,23,42,.72);padding:5px 8px;border-radius:3px;pointer-events:none;}
.watched-spindle{left:3%;top:18%;}
.watched-axis{left:26%;top:10%;}
.watched-motor{left:71%;top:70%;}
@media(max-width:1000px){.otit-mobile-hint{display:block;font-size:14px;color:#a6bad5}.otit-heading{align-items:flex-start}}
/* Same fine spindle grid on a transparent wall and perspective floor. */
.atelier-grid{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(85% 90% at 50% 52%,#000 45%,transparent 80%);mask-image:radial-gradient(85% 90% at 50% 52%,#000 45%,transparent 80%);}
.atelier-grid::before,.atelier-grid::after{content:"";position:absolute;background-image:linear-gradient(rgba(125,180,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(125,180,255,.13) 1px,transparent 1px);background-size:74px 74px;background-position:center bottom;}
.atelier-grid::before{inset:0 0 45%;}
.atelier-grid::after{top:55%;left:-50%;width:200%;height:200%;background-position:center top;transform-origin:50% 0;transform:perspective(1800px) rotateX(55deg);}

.workshop-dashboard{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}