.machines{padding:90px 0;background:linear-gradient(var(--bg),var(--bg2))}
.viewer{--m:var(--red);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;margin-top:28px;border:1px solid var(--line);background:#05080c}
.v-stage{position:relative;aspect-ratio:4/3;grid-row:1/3;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,color-mix(in srgb,var(--m) 26%,transparent),transparent 62%),#05080c}
.v-stage::before{content:"";position:absolute;inset:14px;border:1px solid transparent;pointer-events:none;z-index:1;
  background:linear-gradient(var(--m),var(--m)) top left/22px 2px,linear-gradient(var(--m),var(--m)) top left/2px 22px,linear-gradient(var(--m),var(--m)) top right/22px 2px,linear-gradient(var(--m),var(--m)) top right/2px 22px,
  linear-gradient(var(--m),var(--m)) bottom left/22px 2px,linear-gradient(var(--m),var(--m)) bottom left/2px 22px,linear-gradient(var(--m),var(--m)) bottom right/22px 2px,linear-gradient(var(--m),var(--m)) bottom right/2px 22px;background-repeat:no-repeat}
#mCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#mCanvas:active{cursor:grabbing}
.v-hint,.v-load{position:absolute;font:13px var(--mono);letter-spacing:.2em;color:var(--m);pointer-events:none}
.v-hint{left:28px;bottom:24px;opacity:.8}
.v-load{inset:0;display:none;place-content:center;background:#05080ccc;animation:vblink 1s infinite}
.viewer.loading .v-load{display:grid}
@keyframes vblink{50%{opacity:.4}}
.v-wp{position:absolute;left:0;top:0;pointer-events:none;z-index:1}
.v-wp i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:2px solid var(--red);border-radius:50%;animation:wp 1.4s ease-out infinite}
.v-wp i::after{content:"";position:absolute;inset:13px;background:var(--red);border-radius:50%}
.v-wp span{position:absolute;left:26px;top:-10px;font:12px var(--mono);letter-spacing:.16em;color:var(--red);white-space:nowrap;background:#000a;padding:2px 6px}
@keyframes wp{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
.v-panel{padding:28px 26px;border-left:1px solid var(--line)}
.v-side{font:13px var(--mono);letter-spacing:.24em;color:var(--m)}
.v-panel h3{font:700 34px/1.1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin:6px 0 12px}
.v-role{color:var(--mute);font-size:16px;line-height:1.5;margin-bottom:22px}
.m-stat{display:grid;grid-template-columns:70px 1fr 64px;align-items:center;gap:10px;font:13px var(--mono);letter-spacing:.06em;margin-top:10px;color:var(--mute)}
.m-stat i{height:8px;background:#ffffff14;display:block}
.m-stat b{display:block;height:100%;background:var(--m);box-shadow:0 0 10px var(--m)}
.m-stat em{font-style:normal;color:var(--ink);text-align:right}
.v-tabs{display:flex;border-left:1px solid var(--line);border-top:1px solid var(--line);align-self:end}
.v-tabs button{flex:1;background:none;border:0;border-right:1px solid var(--line);color:var(--mute);font:700 13px var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:14px 4px;cursor:pointer}
.v-tabs button:last-child{border-right:0}
.v-tabs button:hover{color:var(--ink)}
.v-tabs button[aria-selected=true]{color:#000;background:var(--red)}
.v-tabs button.athena[aria-selected=true]{background:var(--cyan)}
@media (max-width:860px){
  .viewer{grid-template-columns:1fr}
  .v-stage{grid-row:auto;aspect-ratio:1/1}
  .v-panel{border-left:0;border-top:1px solid var(--line)}
  .v-tabs{border-left:0;flex-wrap:wrap}.v-tabs button{flex:1 1 50%;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.v-wp i,.v-load{animation:none}}