body{box-sizing:border-box;margin:0;padding:0}*,:before,:after{box-sizing:inherit}.app-container{color:#e9e9eb;background-color:#1a1a2e;flex-direction:column;min-height:100vh;font-family:Courier New,Courier,monospace;display:flex}.header{text-align:center;background-color:#16213e;padding:1rem;box-shadow:0 4px 6px #0000004d}.header h1{text-transform:uppercase;letter-spacing:2px;color:#0f3460;text-shadow:2px 2px #e94560;margin:0;font-size:2rem}.main-content{flex-wrap:wrap;flex:1;justify-content:center;align-items:flex-start;gap:2rem;padding:2rem;display:flex}.canvas-container{background-color:#16213e;border:4px solid #0f3460;border-radius:8px;padding:4px;box-shadow:0 0 20px #e9456033}.pixel-canvas{image-rendering:pixelated;cursor:crosshair;background-color:#fff;width:500px;height:500px;display:block}.toolbar{background-color:#16213e;border:2px solid #0f3460;border-radius:8px;flex-direction:column;gap:1rem;min-width:200px;padding:1.5rem;display:flex}.toolbar h3{color:#e9e9eb;border-bottom:2px solid #e94560;margin-top:0;padding-bottom:.5rem}.color-picker{grid-template-columns:repeat(5,1fr);gap:10px;display:grid}.color-btn{cursor:pointer;border:2px solid #1a1a2e;border-radius:4px;width:30px;height:30px;transition:transform .1s}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border:2px solid #e94560;box-shadow:0 0 8px #e94560}.clear-btn{color:#fff;cursor:pointer;text-transform:uppercase;background-color:#e94560;border:none;border-radius:4px;margin-top:1rem;padding:.75rem;font-weight:700;transition:background-color .2s}.clear-btn:hover{background-color:#d1304c}@media (width<=768px){.pixel-canvas{width:300px;height:300px}}