@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Canvas drawing, code, IDs, controls and event handlers are unchanged. */
* { box-sizing: border-box; }
body { margin: 0; padding: 20px; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.6; color: #192f3b; background: #f7f8f7; }
.robot-maze { max-width: 640px; margin: 0 auto; }
.maze-wrapper { display: block; position: relative; }
#canvasContainer { position: relative; width: 100%; max-width: 600px; aspect-ratio: 3 / 2; margin: 0 auto; background: #192f3b; }
#mazeCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#loadingIndicator { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #edf0f1; color: #53616a; font-family: 'IBM Plex Mono', monospace; font-size: 13px; z-index: 10; border: 1px solid #c8cfd2; }
#assemblyContainer { width: 100%; max-width: 600px; margin: 22px auto 16px; }
#assemblyCode { display: block; width: 100%; max-width: 100%; min-height: 270px; resize: both; padding: 16px; border: 1px solid #bcc9d0; border-radius: 2px; background: #edf0f1; color: #192f3b; font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.7; tab-size: 4; text-align: left; }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; width: 100%; max-width: 600px; }
.controls-row button { flex: 1; min-width: 80px; min-height: 44px; padding: 9px 14px; border: 1px solid #8299a5; border-radius: 2px; color: #192f3b; background: #f7f8f7; font-family: 'IBM Plex Mono', monospace; font-size: 13px; cursor: pointer; }
.controls-row button:hover { border-color: #245c84; background: #e6eef2; }
.controls-row #runButton { background: #245c84; color: #fff; border-color: #245c84; }
.controls-row #runButton:hover { background: #194463; }
.delay-group { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.delay-group input { width: 78px; min-height: 44px; padding: 8px; border: 1px solid #8299a5; border-radius: 2px; color: #192f3b; background: #fff; font: inherit; text-align: center; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #245c84; outline-offset: 3px; }
#output { margin: 16px 0 0; color: #53616a; font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
#errorOutput { margin: 12px 0 0; text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 12px; overflow-wrap: anywhere; }
#errorOutput:empty { display: none; }
@media (max-width: 520px) { body { padding: 14px; } #assemblyCode { font-size: 13px; } .delay-group { justify-content: flex-end; flex-basis: 100%; } }
@media (pointer: coarse) { #assemblyCode, .delay-group input { font-size: 16px; } }