.robot-scene { position:relative; width:100%; max-width:420px; height:310px; margin:16px auto; display:grid; place-items:center; }
.robot-orbit { position:absolute; width:280px; height:280px; border:1px solid color-mix(in srgb,var(--site-primary) 14%,transparent); border-radius:50%; }
.orbit-two { width:350px; height:350px; border-style:dashed; animation:robot-orbit-spin 55s linear infinite; }
.friendly-robot { position:relative; width:130px; height:156px; z-index:1; animation:robot-hover 4s ease-in-out infinite; }
.robot-head { position:absolute; top:15px; width:130px; height:94px; border-radius:33px; border:2px solid #c5cff2; background:linear-gradient(145deg,#fff,#dbe3fb); box-shadow:inset -7px -7px 12px #9aaed42b,0 16px 28px #28387016; padding:17px 12px; }
.robot-face { position:relative; height:57px; border-radius:22px; background:#22314d; display:flex; justify-content:center; align-items:center; gap:22px; box-shadow:inset 0 2px 9px #0004; }
.robot-face i { width:10px; height:17px; background:#bbcaff; border-radius:7px; box-shadow:0 0 12px #a8bcff70; animation:robot-blink 5s infinite; }
.robot-face span { position:absolute; bottom:10px; width:14px; height:6px; border-bottom:2px solid #bbcaff; border-radius:50%; }
.robot-antenna { position:absolute; top:-5px; left:63px; height:22px; width:3px; background:#a6b7e6; }
.robot-antenna::before { content:''; position:absolute; top:-6px; left:-4px; width:11px; height:11px; background:#8c9de9; border-radius:50%; box-shadow:0 0 0 5px #8c9de91a; }
.robot-body { position:absolute; top:114px; left:23px; width:84px; height:48px; border-radius:15px 15px 27px 27px; border:2px solid #c5cff2; background:linear-gradient(135deg,#fff,#dae3fc); display:grid; place-items:center; }
.robot-body span { width:18px; height:8px; border-radius:8px; background:#7c8ed0; }
.robot-arm { position:absolute; top:115px; height:39px; width:18px; border-radius:15px; background:linear-gradient(#f7f9ff,#cbd6f3); border:1px solid #c5cff2; }
.arm-left { left:-2px; transform:rotate(22deg); }
.arm-right { right:-5px; transform-origin:50% 80%; animation:robot-wave 3s ease-in-out infinite; }
.robot-shadow { position:absolute; bottom:30px; width:100px; height:12px; background:#344f8f18; filter:blur(5px); border-radius:50%; animation:robot-shadow 4s ease-in-out infinite; }
.robot-spark { position:absolute; font-size:25px; color:var(--site-accent); font-weight:400; }
.spark-one { left:12%; top:25%; }.spark-two { right:13%; bottom:28%; font-size:17px; }
.robot-chip { position:absolute; z-index:2; display:flex; gap:17px; align-items:center; padding:11px 13px; border:1px solid var(--site-border); background:var(--site-panel); border-radius:10px; box-shadow:0 7px 22px #23355208; color:var(--site-muted); font-size:10px; }
.robot-chip b { color:var(--site-accent); font-size:13px; }.chip-one { top:35px; right:0; transform:rotate(5deg); }.chip-two { bottom:30px; left:0; transform:rotate(-5deg); }
@keyframes robot-hover { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-13px) rotate(3deg); } }
@keyframes robot-wave { 0%,100% { transform:rotate(-25deg); } 40%,60% { transform:rotate(-95deg); } 50% { transform:rotate(-75deg); } }
@keyframes robot-blink { 0%,43%,49%,100% { transform:scaleY(1); } 46% { transform:scaleY(.12); } }
@keyframes robot-shadow { 50% { transform:scale(.8); opacity:.5; } }
@keyframes robot-orbit-spin { to { transform:rotate(360deg); } }

.workspace-robot { position:relative; width:210px; height:155px; flex-shrink:0; pointer-events:none; overflow:hidden; }
.workspace-robot .robot-scene { position:absolute; top:50%; left:50%; width:420px; height:310px; margin:0; transform:translate(-50%,-50%) scale(.47); }
.workspace-robot .robot-chip { display:none; }
.workspace-robot .robot-orbit { border-color:color-mix(in srgb,var(--site-primary) 16%,transparent); }
.workspace-robot .robot-shadow { background:color-mix(in srgb,var(--site-primary) 15%,transparent); }
.setup-welcome { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.workspace-refined .workspace-heading { flex-direction:row; }
@media(max-width:767px) { .workspace-robot { width:106px; height:120px; }.workspace-robot .robot-scene { transform:translate(-50%,-50%) scale(.32); }.setup-welcome { gap:8px; align-items:flex-start; }.setup-welcome .workspace-robot { margin-top:32px; }.workspace-refined .workspace-heading { gap:10px; }.workspace-refined .workspace-heading > div:first-child { min-width:0; }.workspace-refined .workspace-heading h1 { font-size:27px; }.setup-welcome .beginner-intro h1 { font-size:27px; } }
@media(max-width:400px) { .workspace-robot { width:76px; }.workspace-robot .robot-scene { transform:translate(-50%,-50%) scale(.27); } }
@media(prefers-reduced-motion:reduce) { .robot-scene * { animation:none!important; } }