.hero:has(.robot-stage){grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
.hero-stage.robot-stage{min-height:0;min-width:0;margin-right:-20px;padding:20px 0 45px;transform:none;overflow:visible}
.robot-viewport{position:relative;width:100%;aspect-ratio:1/1.03;min-height:320px;max-height:590px}
.robot-canvas{position:absolute;inset:0;display:block;width:100%;max-width:100%;visibility:hidden}
.has-3d .robot-canvas{visibility:visible}
.robot-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#8fabc5;font-size:12px;letter-spacing:.06em;background:radial-gradient(ellipse at center,#8072cc10,transparent 65%)}
.has-3d .robot-placeholder{display:none}
.robot-stage .label-top{top:0;left:7%;font-size:9px}.robot-stage .label-bottom{bottom:0;left:7%;right:7%}
.robot-toggle{position:absolute;right:7%;top:8%;z-index:2;border:1px solid #89a6cf40;border-radius:50%;width:36px;height:36px;color:#c4d9ee;background:#132033c9;cursor:pointer;font-size:14px;visibility:hidden}
.has-3d .robot-toggle{visibility:visible}
.robot-toggle:hover,.robot-toggle:focus-visible{border-color:#80edef;outline:2px solid #80edef40;outline-offset:3px}
@media(max-width:900px){.hero:has(.robot-stage){grid-template-columns:minmax(0,1fr)}.hero-stage.robot-stage{width:100%;max-width:590px;margin:20px auto 0}}
@media(max-width:600px){.hero-stage.robot-stage{padding-bottom:35px;margin-top:8px}.robot-stage .label-top{font-size:8px}.robot-stage .coordinate{font-size:17px}.robot-stage .label-bottom{font-size:8px}.robot-toggle{right:2%}}
@media(prefers-reduced-motion:reduce){.robot-toggle{display:none}}