.code-critter-intro{text-align:center;padding:54px 3% 30px}.code-critter-intro h1 em{color:var(--coral);font-style:normal}.code-critter-intro>p:last-child{max-width:520px;color:var(--muted);margin:20px auto 0;line-height:1.5}.code-critter-card{text-align:center;background:#fffdf8;border:1px solid #e5dac8;border-radius:24px;max-width:900px;margin:0 auto 22px;padding:24px 34px 28px;box-shadow:0 12px #f0e5d2}.code-critter-topline{color:var(--muted);letter-spacing:.12em;justify-content:space-between;align-items:center;gap:10px;font-size:10px;font-weight:800;display:flex}.code-critter-topline strong{color:var(--coral);letter-spacing:0;font-size:18px}.code-critter-topline small{letter-spacing:0;font-size:10px}.critter-mission{text-align:left;background:#fff3d7;border-radius:16px;align-items:center;gap:13px;max-width:510px;margin:23px auto 18px;padding:11px 14px;display:flex}.critter-bubble{background:#f9c5b9;border-radius:17px;flex:0 0 52px;place-items:center;width:52px;height:52px;font-size:29px;display:grid;box-shadow:inset 0 -5px #efa69c}.critter-mission div{flex:1;min-width:0}.critter-mission strong,.critter-mission small{display:block}.critter-mission strong{font-size:15px}.critter-mission small{color:var(--muted);margin-top:4px;font-size:12px}.mission-badge{color:#dfa826;font-size:23px}.critter-workbench{grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);align-items:start;gap:25px;max-width:820px;margin:0 auto;display:grid}.critter-board,.critter-coding-panel{min-width:0}.critter-board{flex-direction:column;justify-content:center;min-height:100%;display:flex}.critter-grid{background:#d9d0f4;border:4px solid #7760ab;border-radius:17px;gap:5px;width:100%;max-width:510px;margin:0 auto 10px;padding:8px;display:grid;box-shadow:inset 0 0 0 3px #f3edff,0 6px #c7b9e6}.board-tip{color:#94899f;margin:0 auto;font-size:10px;line-height:1.35}.critter-cell{aspect-ratio:1;color:#31445b;background:#eff9f0;border:1px solid #d8e7dd;border-radius:10px;place-items:center;min-width:0;font-size:clamp(18px,4vw,30px);display:grid;position:relative;overflow:hidden}.critter-cell:after{content:"";background:#dceee0;border-radius:50%;width:17%;height:17%;position:absolute;bottom:12%;right:8%}.critter-cell.start{background:#fff0c3}.critter-cell.goal{background:#ffe69d;border-color:#efb548;box-shadow:inset 0 0 0 3px #fff4ce}.critter-cell.obstacle{background:#d6ecdc;border-color:#a8c9b2}.critter-cell.critter{z-index:1;background:#f9c5b9;border-color:#ed9d90;box-shadow:inset 0 -5px #efa69c}.critter-cell span{z-index:1;position:relative}.critter-coding-panel{background:#fcf9ff;border:1px solid #eadff2;border-radius:18px;padding:13px 14px 14px}.code-trail-heading{text-align:left;align-items:baseline;gap:9px;max-width:560px;margin:0 auto 8px;display:flex}.code-trail-heading strong{font-size:15px}.code-trail-heading small{color:var(--muted);flex:1;font-size:11px}.code-trail-heading button{min-height:35px;color:var(--ink);background:#fff;border:1px solid #e5dac8;border-radius:9px;padding:7px 10px;font-size:11px;font-weight:800}.code-trail-heading button:disabled{opacity:.5}.code-trail{background:#fffaf0;border:2px dashed #d8cdbd;border-radius:13px;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;max-width:560px;min-height:67px;margin:0 auto 12px;padding:8px;display:flex;overflow:auto}.code-empty{color:#a9a197;text-align:center;width:100%;font-size:13px}.code-trail button{color:#4d3d87;background:#eee8ff;border:1px solid #cfc0eb;border-radius:10px;place-items:center;width:43px;height:47px;padding:3px;font-size:25px;display:grid;position:relative}.code-trail button small{color:#8f83b0;font-size:8px;position:absolute;bottom:2px;right:4px}.code-trail button.active{border-color:var(--coral);background:#ffd5ca;box-shadow:0 0 0 3px #f8b6aa}.code-actions{justify-content:center;gap:9px;display:flex}.code-actions button{border-radius:10px;min-height:47px;padding:11px 17px;font-size:12px;font-weight:800}.clear-code{color:var(--ink);background:#fff;border:1px solid #e5dac8}.run-code{color:#fff;background:var(--coral);border:0;box-shadow:0 4px #cf514f}.code-actions button:disabled{opacity:.5;box-shadow:none}.code-message{min-height:20px;color:var(--muted);margin:15px 0 0;font-size:13px;font-weight:700}.code-message.failed{color:#d65b52}.code-message.success{color:#2c8a6c}.code-success{color:#286e58;text-align:left;background:#e0f4e7;border-radius:12px;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;display:flex}.code-success>span{color:#e0a62d;letter-spacing:2px;white-space:nowrap;font-size:22px}.code-success>span i{color:#9dcbb1;font-style:normal}.code-success strong{flex:1;font-size:12px}.code-success button,.retry-code{color:#fff;background:#2c8a6c;border:0;border-radius:9px;min-height:42px;padding:9px 12px;font-size:11px;font-weight:800}.retry-code{background:var(--ink);margin-top:6px}.code-learning-note{text-align:left;background:#e7f3ed;border-radius:15px;align-items:center;gap:13px;max-width:760px;margin:0 auto 25px;padding:14px 17px;display:flex}.code-learning-note>span{font-size:26px}.code-learning-note strong,.code-learning-note small{display:block}.code-learning-note strong{color:#286e58;font-size:13px}.code-learning-note small{color:#668477;margin-top:4px;font-size:11px;line-height:1.45}.code-difficulty-picker{text-align:center;max-width:760px;margin:0 auto 22px}.code-difficulty-picker>strong{margin-bottom:12px;font-size:13px;display:block}.code-difficulty-picker>div{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.code-difficulty-picker button{color:var(--ink);background:#fffdf8;border:1px solid #e5dac8;border-radius:18px;padding:10px 13px;font-size:11px;font-weight:800}.code-difficulty-picker button.selected,.code-difficulty-picker button:hover{background:#fff3d7;border-color:#f2d993;box-shadow:0 3px #f6e4b8}.arrow-pad{justify-items:center;gap:5px;max-width:220px;margin:0 auto 34px;display:grid}.arrow-pad>button,.arrow-pad>div button{color:#4d3d87;background:#eee8ff;border:1px solid #cfc0eb;border-radius:12px;width:62px;height:55px;font-size:27px;font-weight:700;box-shadow:0 4px #c7b9e6}.arrow-pad>div{gap:5px;display:flex}.arrow-pad button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #c7b9e6}.arrow-pad button:disabled{opacity:.45;box-shadow:none}.code-critter-page footer{margin-bottom:35px}@media (max-width:700px){.critter-workbench{grid-template-columns:1fr;gap:16px}.critter-coding-panel{padding:13px 12px 10px}.critter-board{min-height:0}}@media (min-width:701px){.arrow-pad{justify-content:center;align-items:center;gap:5px;margin:7px auto 14px;display:flex}.arrow-pad>div{display:contents}}@media (min-width:701px) and (max-height:850px){.code-critter-intro{padding:30px 3% 18px}.code-critter-intro h1{font-size:clamp(44px,5vw,64px)}.code-critter-intro>p:last-child{margin-top:12px}.critter-mission{margin-top:16px;margin-bottom:14px}}@media (max-width:600px){.code-critter-intro{padding:42px 0 26px}.code-critter-card{border-radius:20px;padding:18px 16px 24px}.code-critter-topline{flex-wrap:wrap}.code-critter-topline strong{order:3;width:100%;margin-top:4px}.critter-mission{margin-top:18px}.critter-grid{border-width:3px;gap:3px;padding:5px}.critter-cell{border-radius:7px}.code-trail-heading{flex-wrap:wrap}.code-trail-heading small{min-width:140px}.code-trail-heading button{margin-left:auto}.code-success{flex-wrap:wrap}.code-success strong{min-width:120px}}@media (prefers-reduced-motion:reduce){.arrow-pad button:active:not(:disabled){transform:none}}