:root { --pico-font-family: 'Fira Sans', sans-serif; --pico-font-size: 17px; --pico-background-color: white; --blue: #1769aa; --orange: #c8640c; --green: #23754b; }
body { background: white; }
main.container { max-width: 1440px; padding-block: 32px; }
[hidden] { display: none !important; }
#setup { max-width: 640px; margin: 40px auto; }
textarea, code, svg text, .history { font-family: 'Fira Code', monospace; }
textarea { line-height: 1.5; white-space: pre; overflow: auto; }
#error { color: #ae302c; margin-block: 12px; }
#error:empty { display: none; }
#setup button { margin-top: 20px; }
.heading { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
h1 { font-size: 2rem; margin-bottom: 10px; }
.heading p { margin: 0; color: var(--pico-muted-color); }
.heading button { flex-shrink: 0; }
.work { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(360px, 6fr); gap: 24px; align-items: start; }
.work > * { min-width: 0; }
.play-area, details { padding: 22px; border: 1px solid #dce3e1; border-radius: 8px; background: white; }
.stats, .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stats { justify-content: space-between; font-size: .9rem; }
small { color: var(--pico-muted-color); }
.maze-scroll { overflow: auto; margin-block: 22px; }
#board { display: block; width: 85%; max-height: 408px; min-width: 220px; margin: auto; }
#board .wall { fill: #374753; }
#board .floor { fill: #f0f4f3; stroke: #cbd6d1; }
#board .cell-id { display: none; fill: #6b7c73; font-size: 10px; }
#board.show-cell-ids .cell-id { display: block; }
#board .robot-a { fill: var(--blue); }
#board .robot-b { fill: #9b4784; }
#board .robot-label { fill: white; font-size: 20px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.movement-help { display: block; text-align: center; }
.directions { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 48px); gap: 6px; justify-content: center; margin: 18px 0; }
.directions button { padding: 0; margin: 0; font-size: 1.6rem; }
.up { grid-column: 2; }.left { grid-row: 2; grid-column: 1; }.down { grid-row: 2; grid-column: 2; }.right { grid-row: 2; grid-column: 3; }
.actions { margin-top: 16px; }
.actions button, .heading button { margin-bottom: 0; padding: 8px 14px; font-size: .85rem; }
.history { overflow-wrap: anywhere; margin: 16px 0 0; font-size: 1.2rem; letter-spacing: .15em; }
details { margin: 0; }
details summary { font-weight: 600; }
details p, details small { font-size: .85rem; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; }
.goal-key { color: var(--green); }.current-key { color: var(--orange); }.start-key { color: var(--blue); }
.product-graph { border: 1px solid #dde4e1; border-radius: 5px; background: white; }
#graph { display: block; width: 100%; height: auto; }
#graph .axis { fill: #67746e; font-size: 11px; text-anchor: middle; }
#graph .edge path { fill: none; stroke: #81908a; stroke-width: 1; }
#graph .edge { opacity: .22; }
#graph .edge text { fill: #53625b; font-size: 10px; text-anchor: middle; paint-order: stroke; stroke: white; stroke-width: 3px; stroke-linejoin: round; }
#graph .edge.tree { opacity: .75; }
#graph .edge.tree path { stroke: #355e79; stroke-width: 2.5; }
#graph .edge.shortest { opacity: 1; }
#graph .edge.shortest path { stroke: var(--green); stroke-width: 4; }
#graph .edge.shortest text { fill: var(--green); font-weight: 600; }
#graph .node circle { fill: white; stroke: #b4c1bb; stroke-width: 1.3; }
#graph .node.unreachable circle { stroke-dasharray: 3 3; }
#graph .node.goal circle { fill: #dcefe2; stroke: var(--green); }
#graph .node.current circle { stroke: var(--orange); stroke-width: 4; }
#graph .node.start .start-ring { fill: none; stroke: var(--blue); stroke-width: 3; }
#graph .node.current .main { font-weight: 600; fill: #914608; }
#graph .node text { text-anchor: middle; fill: #293d32; font-size: 11px; pointer-events: none; }
#graph .node .annotation { font-size: 8px; fill: #66736c; }
@media (max-width: 850px) { .work { grid-template-columns: minmax(0, 1fr); } .heading { flex-wrap: wrap; } main.container { padding-block: 20px; } }