*{margin:0;padding:0;box-sizing:border-box}body{background:#0a0a1a;color:#e0e0e0;font-family:Courier New,Fira Code,monospace;line-height:1.7;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 20px}.terminal-bar{background:#1a1a2e;border:1px solid #0f3460;border-bottom:none;border-radius:8px 8px 0 0;padding:8px 12px;display:flex;align-items:center;gap:6px;margin-top:40px}.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.red{background:#e94560}.dot.yellow{background:#f5a623}.dot.green{background:#00ff41}.terminal-title{color:#888;font-size:13px;margin-left:8px}.header{text-align:center;margin-bottom:60px}.header h1{background:#1a1a2e;border:1px solid #0f3460;border-top:none;border-radius:0 0 8px 8px;padding:30px 20px 20px;font-size:2rem;color:#e94560;text-shadow:0 0 10px rgba(233,69,96,.3)}.subtitle{margin-top:16px;color:#888;font-size:1rem}.content-section{margin-bottom:50px;padding:24px;border-left:3px solid #0f3460}.content-section h2{color:#00ff41;font-size:1.3rem;margin-bottom:16px}.prompt{color:#e94560}.content-section p{margin-bottom:14px;color:#ccc}.content-section strong{color:#fff}.content-section a{color:#00bfff;text-decoration:none;border-bottom:1px solid #00bfff33}.content-section a:hover{border-bottom-color:#00bfff}.cta{margin-top:20px;padding:12px;background:#1a1a2e;border-radius:4px;border:1px solid #0f3460}.code-block{background:#0d0d1f;border:1px solid #1a1a3e;border-radius:6px;padding:16px 20px;margin-top:16px;font-size:14px;line-height:1.8;overflow-x:auto}.code-comment{color:#555}.code-prompt{color:#e94560}.code-output{color:#00ff41}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}.comparison-col{padding:20px;border-radius:6px}.comparison-col.bad{background:#1a0a0a;border:1px solid #440000}.comparison-col.good{background:#0a1a0a;border:1px solid #004400}.comparison-col h3{margin-bottom:12px;font-size:1rem}.comparison-col.bad h3{color:#e94560}.comparison-col.good h3{color:#00ff41}.comparison-col ul{list-style:none;padding:0}.comparison-col ul li{padding:4px 0;font-size:14px}.comparison-col.bad ul li:before{content:"✗ ";color:#e94560}.comparison-col.good ul li:before{content:"✓ ";color:#00ff41}.game-section{margin:60px 0;text-align:center}.game-section h2{color:gold;font-size:1.5rem;margin-bottom:24px}.game-start{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px}.game-start label{color:#888;font-size:14px}.game-start input{background:#1a1a2e;border:1px solid #0f3460;color:#e0e0e0;padding:8px 16px;font-family:Courier New,monospace;font-size:16px;border-radius:4px;text-align:center;width:240px}.game-start input:focus{outline:none;border-color:#e94560}.game-start button{background:#e94560;color:#fff;border:none;padding:10px 24px;font-family:Courier New,monospace;font-size:16px;border-radius:4px;cursor:pointer;transition:background .2s}.game-start button:hover{background:#c23152}.game-container{display:flex;flex-direction:column;align-items:center;gap:0}.game-layout{display:flex;gap:0}#game-canvas{border:2px solid #0f3460;border-right:none;background:#0a0a1a}#hud-canvas{border:2px solid #0f3460;background:#1a1a2e}#msg-canvas{border:2px solid #0f3460;border-top:none;background:#1a1a2e}.controls{margin-top:30px;text-align:left;max-width:700px;margin-left:auto;margin-right:auto}.controls h3{color:#e94560;margin-bottom:12px;text-align:center}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;color:#aaa}kbd{background:#1a1a2e;border:1px solid #333;border-radius:3px;padding:1px 6px;font-size:12px;color:#e0e0e0;font-family:Courier New,monospace}footer{text-align:center;padding:40px 0;border-top:1px solid #1a1a2e;margin-top:60px}footer a{color:#00bfff;text-decoration:none}.footer-dim{color:#555;font-size:12px;margin-top:8px}@media (max-width: 768px){.header h1{font-size:1.3rem}.comparison,.controls-grid{grid-template-columns:1fr}#game-canvas{width:100%;height:auto}}