:root{
  --bg:#07121e;--bg2:#0b1d2d;--panel:#10273a;--panel2:#17364d;--border:#28536e;
  --text:#f7fbff;--muted:#94b1c5;--accent:#22c55e;--blue:#3b82f6;--yellow:#facc15;
  --purple:#a855f7;--orange:#f97316;--danger:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
button,a{font:inherit}button{cursor:pointer}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px max(18px,calc((100% - 1500px)/2));border-bottom:1px solid var(--border);background:#091725}
.topbar h1{margin:4px 0 6px;font-size:clamp(26px,4vw,40px)}.topbar p{margin:0;color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;color:#93c5fd;font-weight:800}
.levels{display:flex;gap:8px;flex-wrap:wrap}.levels a{text-decoration:none;color:var(--text);padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.levels a.active{border-color:#93c5fd;color:#bfdbfe}
.app-shell{max-width:1500px;margin:auto;display:grid;grid-template-columns:280px minmax(0,1fr) 340px;gap:18px;padding:20px}
.panel{background:rgba(16,39,58,.97);border:1px solid var(--border);border-radius:18px;padding:17px}
.toolbox,.program-panel{align-self:start}
h2,h3{margin-top:0}.muted{color:var(--muted);font-size:13px}
.blocks{display:grid;gap:8px}.block{border:1px solid transparent;color:white;padding:11px 12px;border-radius:10px;text-align:left;font-weight:800}
.block.move{background:#2563eb}.block.turn{background:#0f766e}.block.logic{background:#7c3aed}.block.loop{background:#c2410c}
.help{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}.help p{font-size:12px;color:var(--muted);line-height:1.45}
.center{display:grid;gap:16px;min-width:0}.maze-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.mode-label{font-size:11px;letter-spacing:.13em;color:var(--muted)}.maze-head h2{margin:3px 0 12px}
.status-box{min-width:150px;padding:9px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:10px}.status-box span{display:block;font-size:10px;color:var(--muted)}.status-box strong{display:block;margin-top:3px;font-size:13px}
.maze-wrap{display:flex;justify-content:center;background:#071018;border:1px solid var(--border);border-radius:14px;padding:12px;overflow:auto}
canvas{display:block;width:min(100%,600px);height:auto;border-radius:8px;background:#061017}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px}
.lesson p{color:var(--muted);line-height:1.5}
.program-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.program-head h2{margin:3px 0 10px}.program-head strong{font-size:12px;color:var(--muted)}
.start-block{padding:10px 12px;border-radius:10px;background:var(--accent);color:#052e16;font-weight:900;margin-bottom:8px}
.program-list{margin:0;padding-left:24px;display:grid;gap:7px;min-height:80px}
.program-list li{padding:9px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--border);font-size:13px;position:relative}
.program-list li.active{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}
.program-list li.logic{border-left:4px solid var(--purple)}.program-list li.loop{border-left:4px solid var(--orange)}
.program-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.program-actions button{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px;border-radius:9px}.program-actions .run{background:var(--accent);color:#052e16;border-color:transparent;font-weight:900;grid-column:1/-1}
.execution{margin-top:15px;padding:11px;background:#0b1b2a;border:1px solid var(--border);border-radius:10px}.execution span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.execution strong{display:block;margin-top:4px;font-size:12px;line-height:1.45}
footer{text-align:center;padding:20px;color:var(--muted);font-size:12px}
@media(max-width:1150px){.app-shell{grid-template-columns:260px 1fr}.program-panel{grid-column:1/-1}}
@media(max-width:780px){.app-shell{grid-template-columns:1fr}.program-panel{grid-column:auto}}
@media(max-width:500px){.app-shell{padding:10px}.panel{padding:13px}.program-actions{grid-template-columns:1fr}.program-actions .run{grid-column:auto}.levels{width:100%}.levels a{flex:1;text-align:center}}