body{font-family:"Press Start 2P",cursive}body{background-color:#f0f0f0;color:#212529;min-height:100vh}.app-container{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}.header{text-align:center;margin-bottom:2rem;margin-top:2rem;transition:margin-top .3s ease,opacity .3s ease}.header.hidden{margin-top:0;opacity:0;pointer-events:none}.header h1{font-size:1.25rem;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.header p{color:#767676;font-size:.8rem;line-height:1.5}.footer{display:flex;justify-content:space-between;margin-top:2rem;padding-top:1rem}.github-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:#24292e;text-decoration:none;padding:.5rem 1rem;border:2px solid #24292e;border-radius:4px;transition:background-color .2s,color .2s}.github-link:hover{background-color:#24292e;color:#fff}.main-content{display:flex;gap:2rem;align-items:flex-start}.controls{display:flex;flex-direction:column;gap:2rem;width:320px;flex-shrink:0;background-color:#fff}.control-group{display:flex;flex-direction:column;gap:.75rem}.control-group label{font-size:.8rem;margin-bottom:.5rem}.dimensions-inputs{display:flex;gap:1rem}.input-wrap{display:flex;align-items:center;gap:.5rem;flex:1}.input-wrap span{font-size:.8rem}.input-wrap input{width:100%;padding:.5rem;font-size:.8rem}.tools{display:flex;gap:1rem}.tools .nes-btn{flex:1;font-size:.8rem;padding:.5rem}.color-picker{height:60px;padding:.5rem;cursor:pointer}.actions{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.actions .nes-btn{font-size:.8rem;width:100%}.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.gallery-save-btn{font-size:.7rem;padding:.35rem .75rem}.gallery-list{display:flex;flex-direction:column;gap:.75rem;max-height:360px;overflow-y:auto;box-shadow:inset 0 4px #848484,inset -4px -4px #fff;background-color:#f8f8f8;padding:.5rem}.gallery-card{border:3px solid #212529;background:#f8f8f8;box-shadow:4px 4px #d3d3d3}.gallery-card.is-active{border-color:#209cee;box-shadow:4px 4px #209cee}.gallery-load{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:.85rem;padding:.75rem;cursor:pointer;text-align:left}.gallery-preview{width:64px;flex-shrink:0;border:2px solid #212529;background-color:#fff;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.gallery-copy{display:flex;flex-direction:column;gap:.25rem;min-width:0}.gallery-copy strong,.gallery-copy span{font-size:.75rem}.gallery-copy span{color:#767676}.gallery-delete-btn{width:calc(100% - 1.5rem);margin:0 .75rem .75rem;font-size:.7rem}.canvas-section{flex:1;display:flex;flex-direction:column;gap:2rem;min-width:0}.canvas-wrapper{background-color:#fff;padding:2rem;display:flex;align-items:center;justify-content:center;overflow:auto}.pixel-grid{display:grid;background-color:#fff;border:4px solid #212529;width:100%;max-width:600px;-webkit-user-select:none;user-select:none;touch-action:none;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0px}.pixel-cell{width:100%;height:100%;border-right:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);cursor:crosshair}.preview-section{background-color:#fff}.svg-preview-container{background-color:#fff;padding:1rem;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0px;box-shadow:inset 4px 4px #000,inset -4px -4px #ccc;border:4px solid #212529}.svg-preview-container svg{max-width:200px;max-height:200px}@media(max-width:768px){.main-content{flex-direction:column}.controls{width:100%}}.dialog-menu{display:flex;justify-content:flex-end;gap:1rem;margin-top:1.5rem;padding:0}.nes-dialog{min-width:300px;max-width:90vw}.nes-dialog::backdrop{background:#00000080}