.programming-topbar{max-width:1020px}.programming-tag{color:#466257;font-size:.95rem;font-weight:800}.programming-intro{text-align:center;margin:4px auto 24px}.programming-intro h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15}.programming-intro p{margin:8px 0 0;font-size:1.15rem;color:#44566c}.programming-game{max-width:1020px;margin:auto;padding:22px;background:#fffffff2;border:2px solid #fff;border-radius:28px;box-shadow:var(--shadow-lg)}.programming-game [hidden]{display:none!important}.programming-game button,.programming-game select,.programming-hint summary{cursor:pointer}.programming-game button:disabled{cursor:default;opacity:.48;box-shadow:none;transform:none}.programming-game button:focus-visible,.programming-game select:focus-visible{outline:3px solid #174fb4;outline-offset:3px}.programming-game h2{font-size:1.18rem;padding:0;letter-spacing:0}.programming-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px}.programming-progress label{display:flex;align-items:center;gap:10px;font-weight:800;min-width:0}.programming-progress select{min-height:44px;max-width:100%;min-width:0;padding:8px 30px 8px 12px;border:1px solid #cbdad2;border-radius:12px;background:#f6faf7;color:#254333;font:inherit}.programming-progress>span{flex-shrink:0;font-weight:800;color:#765017;background:#fff5d7;padding:8px 12px;border-radius:12px}.programming-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:28px}.programming-playground{scroll-margin-top:90px;background:#edf6ee;border:1px solid #d9e9d9;border-radius:20px;padding:18px}.programming-board-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}.programming-board-heading>span{font-size:.95rem;white-space:nowrap;color:#466257}.programming-board{--board-size: 4;display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));grid-template-rows:repeat(var(--board-size),minmax(0,1fr));position:relative;isolation:isolate;aspect-ratio:1;overflow:hidden;border-radius:16px;background:#c6dfb9;box-shadow:0 5px #b6cfa7}.programming-cell{position:relative;display:grid;place-items:center;min-width:0;background:#e5efcb;border:2px solid #c6dfb9;border-radius:9px;font-size:clamp(1.6rem,4vw,2.4rem)}.programming-cell:nth-child(2n){background:#ecf4d8}.programming-cell.is-visited:after{content:"";position:absolute;width:13px;height:13px;background:#72a66b;border-radius:50%;opacity:.7}.programming-cell.is-obstacle{background:#b4d399}.programming-cell.is-goal{background:#ffedaa}.programming-cell.is-goal.is-visited:after{display:none}.programming-cell.is-start{color:#537e47}.programming-dog{--dog-x: 0;--dog-y: 0;position:absolute;top:0;left:0;width:calc(100% / var(--board-size));height:calc(100% / var(--board-size));display:grid;place-items:center;z-index:1;font-size:clamp(2rem,5vw,3.4rem);line-height:1;transform:translate(calc(var(--dog-x) * 100%),calc(var(--dog-y) * 100%));transition:transform .4s ease-in-out;filter:drop-shadow(0 3px 1px #78684f55);pointer-events:none}.programming-board[data-status=editing] .programming-dog{transition:none}.programming-board[data-status=success]{outline:3px solid #3c994e;outline-offset:3px}.programming-board[data-status=success] .programming-dog{background:radial-gradient(circle,#fff5b2 15%,transparent 70%)}.programming-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 14px;color:#445b46;font-size:.88rem;margin:18px 0 0}.programming-legend span{white-space:nowrap}.programming-controls{min-width:0}.programming-step-number{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:4px;background:#edf2ff;color:#365b99;border-radius:50%;font-family:Arial,sans-serif;font-size:.9rem}.programming-small{margin:6px 0 12px;color:#566479;font-size:.92rem}.programming-directions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:280px;margin:12px auto 20px}.programming-direction{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px;min-height:69px;border-radius:13px;border:1px solid #c9d6e7;box-shadow:0 4px #bbcce2;color:#244c79;background:#e9f2ff;font-size:.82rem;transition:transform .1s}.programming-direction-up{grid-column:2;background:#e9f2ff;color:#244c79}.programming-direction-left{grid-column:1;grid-row:2;background:#fff0db;color:#875018}.programming-direction-down{grid-column:2;grid-row:2;background:#f2eaff;color:#68409e}.programming-direction-right{grid-column:3;grid-row:2;background:#dbf5e9;color:#206746}.programming-arrow{font:900 2.3rem/1 Arial,sans-serif}.programming-direction:hover:not(:disabled){filter:brightness(.97);transform:translateY(-2px)}.programming-direction:active:not(:disabled){transform:translateY(3px);box-shadow:none}.programming-program-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.programming-program-heading>span{color:#617087;font-size:.9rem}.programming-queue{display:flex;flex-wrap:wrap;align-content:start;gap:8px;list-style:none;margin:12px 0 6px;padding:10px;min-height:80px;background:#f6f8fb;border:2px dashed #d1dbe7;border-radius:14px}.programming-command{position:relative;display:grid;place-items:center;width:46px;height:52px;padding:9px 0 0;border:1px solid #d0d8e1;border-bottom-width:3px;border-radius:10px;font:700 1.9rem/1 Arial,sans-serif}.programming-command:before{content:attr(data-step);position:absolute;top:3px;left:6px;font:700 10px/1 Arial,sans-serif}.programming-command:disabled{opacity:1!important}.programming-command.is-done{border-color:#74a17f}.programming-command.is-current{outline:3px solid #235daa;outline-offset:1px;transform:translateY(-2px)}.programming-command.is-blocked{outline-color:#b65a15;background:#ffedda}.programming-queue-empty{align-self:center;text-align:center;width:100%;color:#64748b;font-size:1rem}.programming-edit-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}.programming-edit-actions button{padding:8px 12px;min-height:44px;border:1px solid #d6dfe8;border-radius:10px;color:#41566c;background:#f3f6fa;font-size:.95rem}.programming-run,.programming-stop{width:100%;min-height:58px;padding:10px 18px;border-radius:15px;font-size:1.45rem;font-weight:900}.programming-run{background:#21884a;color:#fff;box-shadow:0 5px #156234}.programming-run:hover:not(:disabled){background:#18763e}.programming-stop{margin-top:14px;min-height:44px;font-size:1rem;background:#ffedcc;color:#7d4713;box-shadow:0 5px #ddb575}.programming-keyboard-tip{text-align:center;font-size:.82rem;color:#66758b;margin:13px 0 0}.programming-result{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:12px;margin-top:22px;padding:14px 18px;min-height:64px;background:#eef4fc;border:1px solid #d9e5f3;border-radius:14px}.programming-result p{margin:0;font-size:1.05rem}.programming-result[data-mood=success]{background:#e7f7e7;border-color:#a8d9ac;color:#20562c}.programming-result[data-mood=try]{background:#fff3df;border-color:#ecd3a6;color:#794513}.programming-next{flex-shrink:0;min-height:46px;padding:10px 16px;border-radius:10px;background:#237b40;color:#fff;font-weight:800}.programming-hint{margin-top:14px;color:#4c5b70}.programming-hint summary{width:fit-content;padding:10px 4px;min-height:44px}.programming-hint p{margin:0;padding:8px 14px;border-left:3px solid #e5c261}.programming-learning{margin:20px auto 0;max-width:750px;text-align:center;color:#43556c;font-size:1rem}@media (max-width: 760px){.programming-tag{display:none}.programming-intro{margin-bottom:18px}.programming-intro p{font-size:1rem}.programming-game{padding:14px;border-radius:20px}.programming-progress{align-items:start;gap:8px}.programming-progress label{flex-direction:column;align-items:start;gap:3px}.programming-progress select{width:100%;font-size:.9rem}.programming-progress>span{margin-top:26px;padding:8px;font-size:.9rem}.programming-workspace{grid-template-columns:minmax(0,1fr);gap:22px}.programming-playground{padding:12px}.programming-board{max-width:400px;margin:auto}.programming-board-heading{margin-bottom:12px}.programming-dog{font-size:clamp(2rem,10vw,3.2rem)}.programming-cell{font-size:clamp(1.5rem,8vw,2.5rem)}.programming-legend{font-size:.78rem;gap:5px 8px}.programming-directions{max-width:290px}.programming-result{flex-direction:column;align-items:stretch;padding:12px}.programming-keyboard-tip{display:none}}@media (prefers-reduced-motion: reduce){.programming-game *,.programming-game *:after{transition:none!important;animation:none!important}}