*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.title{text-align:center;color:#fff;margin-bottom:5px;font-size:28px}.subtitle{text-align:center;color:#fffc;margin-bottom:30px;font-size:14px}.content{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}.canvas-container{background:#fffffff2;border-radius:12px;padding:20px;box-shadow:0 8px 32px #0000001a;display:flex;justify-content:center;align-items:center;min-height:450px}.canvas{max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.controls{display:flex;flex-direction:column;gap:20px}.section{background:#fffffff2;border-radius:12px;padding:20px;box-shadow:0 8px 32px #0000001a}.section-title{margin:0 0 15px;font-size:14px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:1px}.resolution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.res-button{padding:10px;border:2px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s;font-family:Courier New,monospace}.res-button:hover{border-color:#667eea;transform:translateY(-2px)}.res-button.active{border-color:#667eea;background:#667eea;color:#fff}.custom-input{width:100%;padding:10px;border:2px solid #ddd;border-radius:6px;font-size:12px;box-sizing:border-box;font-family:Courier New,monospace;transition:all .2s}.custom-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.format-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.format-button{padding:10px;border:2px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s;font-family:Courier New,monospace}.format-button:hover{border-color:#667eea;transform:translateY(-2px)}.format-button.active{border-color:#667eea;background:#667eea;color:#fff}.primary-button{padding:12px;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s;width:100%;font-family:Courier New,monospace}.primary-button:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.secondary-button{padding:12px;background:#fff;color:#667eea;border:2px solid #667eea;border-radius:6px;cursor:pointer;font-size:14px;font-weight:700;transition:all .2s;margin-top:8px;width:100%;font-family:Courier New,monospace}.secondary-button:hover{background:#f5f5ff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea33}@media (max-width: 768px){.content{grid-template-columns:1fr}.title{font-size:24px}.resolution-grid{grid-template-columns:repeat(2,1fr)}}