.robot-steps { padding-left: 1.4rem; }
.robot-steps li { padding: .2rem 0; }
.robot-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; font-size: .9rem; }
.robot-legend span { display: inline-flex; gap: .3rem; align-items: center; }
.robot-legend img { width: 30px; height: 30px; }
.robot-grid { display: grid; gap: 5px; max-width: 420px; width: 100%; background: #d3e4eb; border: 6px solid #d3e4eb; border-radius: 12px; }
.robot-cell { aspect-ratio: 1; background: #edf8fc; border: 1px solid #9ebfca; display: flex; justify-content: center; align-items: center; border-radius: 8px; position: relative; }
.robot-cell.wall { background: #38566d; }
.robot-cell.goal { background: #d7f4df; border: 2px solid #45875e; }
.robot-cell.robot { background: #ffefb5; border: 3px solid #b77c10; }
.robot-cell img { width: 90%; height: 90%; }
.robot-cell img.robot-icon { position: absolute; z-index: 1; width: 85%; height: 85%; }
.robot-cell.goal img.robot-icon { filter: drop-shadow(0 0 4px #fff); }
.robot-speech { display: flex; gap: .75rem; align-items: center; padding: 12px; border-radius: 14px; background: #e4f6fb; border: 1px solid #abd4df; }
.robot-speech img { width: 48px; height: 48px; flex: none; }
.robot-program { padding-left: 24px; }
.robot-program li { margin-bottom: 10px; padding: 8px; border-radius: 8px; background: #eef5f8; }
.robot-program li.running { background: #ffe294; outline: 3px solid #be7b00; }
.robot-program button { margin-left: 8px; }