#demo-web-invaders{--bg:#f3ece4;--paper:#fbf6ef;--ink:#2d2925;--orange:#c95d14;--room:#f6d39b;--corridor:#d99a56;--line:rgba(45,41,37,.16);font-family:Arial,sans-serif;color:var(--ink)}#demo-web-invaders *{box-sizing:border-box}#demo-web-invaders .demo{width:min(1100px,100%);margin:auto;padding:24px;border:1px solid var(--line);background:radial-gradient(circle at 12% 8%,rgba(201,93,20,.08),transparent 30%),var(--bg)}#demo-web-invaders header{display:flex;justify-content:space-between;gap:24px;margin-bottom:20px}#demo-web-invaders h2{margin:4px 0 8px;font-size:clamp(28px,4vw,42px)}#demo-web-invaders header p{max-width:680px;margin:0;line-height:1.6}#demo-web-invaders .eyebrow{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}#demo-web-invaders .stats{display:grid;grid-template-columns:repeat(3,minmax(85px,1fr));gap:8px}#demo-web-invaders .stats span{padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.42);font-size:12px}#demo-web-invaders .stats strong{display:block;margin-top:4px;color:var(--orange);font-size:18px}#demo-web-invaders .controls{display:flex;align-items:end;gap:14px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.35)}#demo-web-invaders label{display:grid;gap:6px;min-width:160px;font-size:13px;font-weight:700}#demo-web-invaders input{padding:10px;border:1px solid var(--line);background:var(--paper)}#demo-web-invaders .buttons{display:flex;flex-wrap:wrap;gap:8px}#demo-web-invaders button{min-height:42px;padding:0 16px;border:1px solid var(--orange);background:var(--orange);color:#fff;cursor:pointer;font-weight:700}#demo-web-invaders button:nth-child(n+2){background:0 0;color:var(--orange)}#demo-web-invaders .legend{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0;font-size:12px}#demo-web-invaders .legend span{display:flex;align-items:center;gap:6px}#demo-web-invaders .legend i{width:14px;height:14px;border:1px solid rgba(45,41,37,.35)}#demo-web-invaders .wall{background:#2d2925}#demo-web-invaders .corridor{background:#d99a56}#demo-web-invaders .room{background:#f6d39b}#demo-web-invaders .door{background:#c95d14}#demo-web-invaders .entry{background:#8da15b}#demo-web-invaders .exit{background:#8a4d38}#demo-web-invaders .stage{margin-top:14px;padding:14px;overflow:auto;border:1px solid var(--line);background:var(--paper)}#demo-web-invaders canvas{display:block;max-width:100%;height:auto;margin:auto;cursor:pointer;image-rendering:pixelated}#demo-web-invaders .hint{margin:10px 0 0;font-size:12px;color:rgba(45,41,37,.7)}@media(max-width:760px){#demo-web-invaders header{display:block}#demo-web-invaders .stats{margin-top:16px}#demo-web-invaders .controls{display:grid}}@media(max-width:520px){#demo-web-invaders .demo{padding:16px}#demo-web-invaders .stats{grid-template-columns:1fr}#demo-web-invaders .buttons{display:grid}#demo-web-invaders button{width:100%}}