:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.4;--cell-size: 56px;--cell-gap: 4px;--cell-step: calc(var(--cell-size) + var(--cell-gap));--move-ms: .16s;--robot-cycle-ms: .32s;--robot-frame-size: 52px;--robot-sheet-width: 208px;--robot-bored-sheet-width: 416px;--robot-walk-sheet-height: 156px;--door-sheet-width: 312px}body{margin:0;min-height:100vh;display:flex;justify-content:center;background:#f5f7fb}.app{padding:24px;max-width:560px;width:100%;display:flex;flex-direction:column;gap:16px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{margin:0;font-size:2rem;line-height:1.08}.mute-toggle{width:40px;height:40px;border-radius:50%;border:1px solid #cbd5e0;background:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.mute-toggle[aria-pressed=true]{background:#edf2f7;color:#718096}.subtitle{margin:0;color:#555}.grid{position:relative;background:#222;padding:var(--cell-gap);border-radius:8px;width:max-content}.grid-cells{display:flex;flex-direction:column;gap:var(--cell-gap)}.grid-row{display:flex;gap:var(--cell-gap)}.grid-cell{width:var(--cell-size);height:var(--cell-size);background:#e8ecf3;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:2rem;transition:background .2s ease}.grid-cell.pulse{animation:door-cell-glow 1.2s ease-out forwards}.grid-cell.visited .tile-content{opacity:.3;filter:grayscale(.8)}.door-cell{overflow:hidden}.door-sprite{width:var(--robot-frame-size);height:var(--robot-frame-size);background-image:url(/sprites/door-open.png);background-repeat:no-repeat;background-size:var(--door-sheet-width) var(--robot-frame-size);background-position:0 0;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.door-cell.pulse .door-sprite{animation:door-open-cycle .9s steps(5,end) forwards}@keyframes door-cell-glow{0%{background:#e8ecf3;transform:scale(1)}50%{background:#fff1b8;transform:scale(1.04)}to{background:#fff8dc;transform:scale(1)}}@keyframes door-open-cycle{0%{background-position:0 0}to{background-position:-260px 0}}.robot{position:absolute;top:var(--cell-gap);left:var(--cell-gap);width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-size:2rem;transition:transform var(--move-ms) linear;will-change:transform;pointer-events:none}.robot-sprite{--robot-facing: 1;--robot-row-offset: 0;width:var(--robot-frame-size);height:var(--robot-frame-size);background-image:url(/sprites/robot-idle.png);background-repeat:no-repeat;background-size:var(--robot-sheet-width) var(--robot-frame-size);background-position:0 var(--robot-row-offset);display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));transform:scaleX(var(--robot-facing));transform-origin:center;animation:robot-frame-cycle 3.4s steps(4,end) infinite}.robot[data-facing=Left] .robot-sprite{--robot-facing: -1}.robot[data-motion=walk-horizontal] .robot-sprite{--robot-row-offset: -52px;background-image:url(/sprites/robot-cycles.png);background-size:var(--robot-sheet-width) var(--robot-walk-sheet-height);animation-duration:var(--robot-cycle-ms)}.robot[data-motion=walk-vertical] .robot-sprite{--robot-row-offset: -104px;background-image:url(/sprites/robot-cycles.png);background-size:var(--robot-sheet-width) var(--robot-walk-sheet-height);animation-duration:var(--robot-cycle-ms)}.robot[data-motion=bored] .robot-sprite{background-image:url(/sprites/robot-bored.png);background-size:var(--robot-bored-sheet-width) var(--robot-frame-size);animation:robot-bored-cycle 2.6s steps(7,end) 1 forwards}.robot[data-motion=enter]{z-index:3}.robot[data-motion=enter] .robot-sprite{--robot-row-offset: -104px;background-image:url(/sprites/robot-cycles.png);background-size:var(--robot-sheet-width) var(--robot-walk-sheet-height);animation:robot-frame-cycle var(--robot-cycle-ms) steps(4,end) infinite,robot-enter-door 1.2s ease-in .3s forwards}.robot-reaction{position:absolute;top:-10px;right:-10px;font-size:1.3rem;background:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000040;animation:reaction-pop .32s ease-out}.robot-active{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:#2b6cb0;color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #00000040;animation:active-pulse .9s ease-in-out infinite}.robot-active[data-kind=open]{background:#38a169;font-size:1rem}@keyframes active-pulse{0%,to{transform:scale(1);box-shadow:0 2px 5px #00000040}50%{transform:scale(1.12);box-shadow:0 0 0 4px #2b6cb040}}.robot-lost[data-outcome=LostOutOfBounds] .robot-sprite{animation:robot-shake .32s ease-in-out 2;filter:grayscale(.6) drop-shadow(0 2px 3px rgba(0,0,0,.28));opacity:.75}@keyframes robot-frame-cycle{0%{background-position:0 var(--robot-row-offset)}to{background-position:-208px var(--robot-row-offset)}}@keyframes robot-bored-cycle{0%{background-position:0 0}to{background-position:-364px 0}}@keyframes robot-enter-door{0%{opacity:1;transform:translateY(0) scaleX(var(--robot-facing)) scale(1)}45%{opacity:1;transform:translateY(-4px) scaleX(var(--robot-facing)) scale(.9)}to{opacity:0;transform:translateY(-13px) scaleX(var(--robot-facing)) scale(.42)}}.tile-content{line-height:1}.cell-marker{position:absolute;top:2px;right:4px;font-size:1rem;line-height:1}.trail-dot{position:absolute;bottom:4px;left:50%;width:8px;height:8px;border-radius:50%;background:#3182ce8c;box-shadow:0 0 4px #3182ce73;transform:translate(-50%);pointer-events:none;animation:trail-pop .22s ease-out}@keyframes trail-pop{0%{transform:translate(-50%,4px) scale(.4);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}.grid-cell{position:relative}.grid-cell.hint-door{animation:hint-door-pulse 1.2s ease-in-out infinite}.grid-cell.hint-waypoint{animation:hint-waypoint-pulse .9s ease-in-out infinite}.oob-marker{position:absolute;top:var(--cell-gap);left:var(--cell-gap);width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;font-size:2rem;pointer-events:none;filter:drop-shadow(0 0 6px rgba(229,62,62,.7));z-index:2}.oob-marker>span{display:inline-block;animation:oob-flash .6s ease-out}@keyframes reaction-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes robot-shake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-4px) rotate(-8deg)}40%{transform:translate(4px) rotate(8deg)}60%{transform:translate(-3px) rotate(-6deg)}80%{transform:translate(3px) rotate(6deg)}}@keyframes hint-door-pulse{0%,to{background:#e8ecf3;box-shadow:inset 0 0 #3182ce00}50%{background:#bee3f8;box-shadow:inset 0 0 0 3px #3182ceb3}}@keyframes hint-waypoint-pulse{0%,to{background:#e8ecf3;box-shadow:inset 0 0 #d69e2e00}50%{background:#fefcbf;box-shadow:inset 0 0 0 3px #d69e2ed9}}@keyframes oob-flash{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.95}}.command-ui{display:flex;flex-direction:column;gap:12px}.palette{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:#edf2f7;border-radius:8px}.palette-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#fff;border:2px solid #cbd5e0;border-radius:8px;cursor:grab;font-weight:600;-webkit-user-select:none;user-select:none}.palette-chip[data-disabled=true]{opacity:.5;cursor:not-allowed}.palette-chip-icon{font-size:1.2rem}.program{display:flex;flex-direction:column;gap:6px;min-height:64px;padding:10px;background:#fafbfc;border:2px dashed #cbd5e0;border-radius:8px}.insert-indicator{height:3px;background:#3182ce;border-radius:2px;box-shadow:0 0 6px #3182ce80;pointer-events:none}.slot{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#fff;border:2px solid #cbd5e0;border-radius:6px;cursor:grab}.slot[data-active=true]{border-color:#2b6cb0;background:#ebf4ff}.slot[data-placeholder=true]{background:transparent;border-style:dashed;border-color:#cbd5e0;color:#a0aec0;cursor:default}.slot[data-placeholder=true] .slot-label{font-weight:500;font-style:italic}.slot[data-over-budget=true]{border-color:#e53e3e;background:#fff5f5}.slot-index{font-weight:700;color:#718096;width:20px}.slot-icon{font-size:1.3rem}.slot-label{flex:1;font-weight:600}.stepper{display:flex;align-items:center;gap:4px}.stepper-btn{width:28px;height:28px;border:1px solid #cbd5e0;border-radius:4px;background:#edf2f7;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center}.stepper-btn:disabled{opacity:.4;cursor:not-allowed}.stepper-value{display:inline-block;min-width:22px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.trash{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:#fff5f5;border:2px dashed #feb2b2;border-radius:8px;color:#742a2a;font-weight:600}.trash-icon{font-size:1.4rem}.controls{display:flex;flex-wrap:wrap;gap:8px}.ctrl{padding:10px 16px;font-size:1rem;border-radius:6px;border:0;cursor:pointer;font-weight:600;color:#fff}.ctrl:disabled{opacity:.5;cursor:not-allowed}.ctrl-run{background:#38a169}.ctrl-step{background:#3182ce}.ctrl-pause{background:#d69e2e}.ctrl-reset{background:#718096}.outcome-actions{display:flex;gap:8px}.retry-button,.next-button{padding:10px 18px;font-size:1rem;border-radius:6px;border:0;cursor:pointer}.retry-button{background:#edf2f7;color:#2d3748}.next-button{background:#38a169;color:#fff}.level-badge{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:#edf2f7;color:#2d3748;border-radius:6px;font-size:.95rem}.level-badge-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.level-badge-activity{font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.level-badge-title{font-weight:700;color:#2d3748}.level-badge-intro{margin:0;color:#4a5568;font-size:.9rem}.status{padding:10px 12px;border-radius:6px;font-weight:500}.status.running{background:#edf2f7;color:#2d3748}.status.won{background:#c6f6d5;color:#22543d}.status.lost{background:#fed7d7;color:#742a2a}.status.error{background:#feebc8;color:#7b341e}.site-footer{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:14px;border-top:1px solid #d8dee8;color:#4a5568;font-size:.9rem}.footer-logo{width:40px;height:40px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}.footer-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.site-footer p{margin:0}.site-footer address{font-style:normal}.site-footer a{color:#2b6cb0;font-weight:600;text-decoration-thickness:2px;text-underline-offset:2px}