body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#282c34}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1e222a;border-radius:4px}::-webkit-scrollbar-thumb{background:#4a5568;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#5a6478}*{scrollbar-width:thin;scrollbar-color:#4a5568 #1e222a}body{scrollbar-face-color:#4a5568;scrollbar-track-color:#1e222a;scrollbar-arrow-color:#4a5568;scrollbar-shadow-color:#4a5568}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center;max-width:1200px;margin:0 auto}.App-header{margin-bottom:20px}.App-header h1{color:#3f51b5}footer{margin-top:40px;color:#757575;font-size:.9rem}.App{text-align:center}.App-header h1{margin:0;font-size:2.5rem;color:#3f51b5}main{display:flex;justify-content:center}.nes-emulator{width:100%;padding:8px;font-family:Courier New,monospace;background-color:#282c34;color:#f0f0f0}.emulator-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-radius:4px}.rom-controls{display:flex;align-items:center}input[type=file]{display:none}.rom-upload-label{padding:6px 12px;background-color:#4a5568;color:#fff;border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.rom-upload-label:hover{background-color:#2d3748}.playback-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.playback-controls button{padding:6px 10px;border:none;border-radius:3px;cursor:pointer;font-weight:700;color:#fff;font-size:11px}.play-button{background-color:#38a169}.pause-button{background-color:#e53e3e}.reset-button{background-color:#4299e1}.audio-on,.audio-off{background-color:#805ad5}.keyboard-locked{background-color:#e53e3e}.keyboard-unlocked{background-color:#38a169}button:disabled{background-color:#718096;cursor:not-allowed;opacity:.6}.fps-counter{margin-left:6px;font-size:11px;background-color:#0000004d;padding:3px 6px;border-radius:3px}.error-message{color:#fc8181;margin-top:8px;width:100%;text-align:center}.debug-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;height:calc(100vh - 100px);min-height:500px}.grid-cell{background-color:#1e2228;border-radius:3px;padding:6px;overflow:hidden;position:relative;border:1px solid #333740}.grid-cell.main-display{display:flex;justify-content:center;align-items:center;background-color:#000;position:relative}.grid-cell canvas{max-width:100%;max-height:100%;object-fit:contain}.grid-cell.disabled{opacity:.3;pointer-events:none}.faded .grid-cell:not(.main-display){opacity:.3}.no-rom-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#a0aec0}.no-rom-message h2{margin:0 0 8px;font-size:16px}.no-rom-message p{margin:0;font-size:12px}.visualizer{height:100%;display:flex;flex-direction:column}.visualizer-title{font-size:11px;text-transform:uppercase;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid #333740;color:#90cdf4;font-weight:700}.visualizer-content{flex:1;overflow:auto;font-size:10px}.canvas-visualizer{height:100%;display:flex;flex-direction:column;overflow:hidden}.canvas-visualizer-title{font-size:11px;text-transform:uppercase;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid #333740;color:#90cdf4;font-weight:700}.canvas-visualizer .visualizer-content{flex:1;display:flex;flex-direction:row;font-size:10px;overflow:hidden}.canvas-visualizer .canvas-container{flex:1;height:100%;position:relative}.canvas-visualizer canvas{position:absolute;width:auto!important;height:auto!important;max-width:100%;max-height:100%;top:50%;left:0;transform:translateY(-50%);image-rendering:pixelated}.pattern-table-visualizer .canvas-container canvas{width:256px!important;height:240px!important;image-rendering:pixelated;transform-origin:left center}.canvas-visualizer .layer-controls{display:flex;flex-direction:column;justify-content:flex-start;width:100px;padding-left:8px;margin-left:8px;border-left:1px solid #333740}.canvas-visualizer select{width:100%;margin-bottom:6px;padding:2px;font-size:9px;background-color:#4a5568;color:#fff;border:none;border-radius:2px}.canvas-visualizer label{display:flex;align-items:center;margin-bottom:8px;gap:4px;cursor:pointer}.register-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.register-item{display:flex;justify-content:space-between;background-color:#2d3748;padding:2px 4px;border-radius:2px}.register-name{color:#cbd5e0}.register-value{font-weight:700;color:#68d391}.memory-log{list-style:none;padding:0;margin:0;font-family:Courier New,monospace}.memory-log li{padding:2px 0;border-bottom:1px dotted #4a5568;white-space:nowrap}.memory-log .read{color:#90cdf4}.memory-log .write{color:#fbd38d}.timestamp{color:#718096;font-size:8px;margin-left:4px}.layer-controls input[type=checkbox]{margin:0}.flags-container{margin-top:6px}.flags-title{font-size:10px;margin-bottom:4px;color:#cbd5e0}.flag-bits{display:flex;gap:2px}.flag-bit{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:2px}.flag-bit.active{background-color:#38a169;color:#fff}.flag-bit.inactive{background-color:#2d3748;color:#a0aec0}.recent-opcodes{margin-top:6px}.opcodes-title{font-size:10px;margin-bottom:4px;color:#cbd5e0}.opcodes-list{font-family:Courier New,monospace;font-size:9px}.opcode-entry{padding:1px 0;display:grid;grid-template-columns:50px 40px 85px 65px 40px 45px;white-space:nowrap}.opcode-address{text-align:left}.opcode-bytes{text-align:left;overflow:hidden;text-overflow:ellipsis}.opcode-instruction,.opcode-mode{text-align:left}.opcode-reg{text-align:center}.opcode-pagecross{text-align:right}.current-opcode{background-color:#38a169;color:#fff;border-radius:2px;padding:0 2px}.section{margin-bottom:6px}.section-title{font-size:10px;color:#cbd5e0;margin-bottom:4px}.flags-grid,.attributes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.flag-item,.attribute-item{display:flex;justify-content:space-between;background-color:#2d3748;padding:2px 4px;border-radius:2px}.flag-name,.attribute-name{color:#cbd5e0}.flag-value,.attribute-value{font-weight:700;color:#68d391}.audio-visualizer{margin-bottom:6px}.audio-visualizer canvas{background-color:#2d3748;width:100%;height:60px;border-radius:2px}.audio-controls{display:flex;justify-content:space-between;margin-top:4px}.test-tone-button{padding:2px 4px;font-size:9px;background-color:#4a5568;color:#fff;border:none;border-radius:2px;cursor:pointer}.test-tone-button:hover{background-color:#2d3748}.audio-stats{font-size:9px;margin-top:4px;color:#a0aec0;font-family:Courier New,monospace}.channels-container{overflow-y:auto;flex:1}.channels-scroll{padding-right:4px}.channel-section{margin-bottom:6px}.channel-title{font-size:10px;color:#cbd5e0;margin-bottom:4px}.channel-registers{display:grid;grid-template-columns:repeat(1,1fr);gap:2px}.status-section{margin-top:6px;padding-top:6px;border-top:1px dotted #333740}.controller-diagram{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}.controller-button{padding:3px 6px;font-size:9px;background-color:#2d3748;color:#a0aec0;border-radius:2px;text-align:center}.controller-button.pressed{background-color:#38a169;color:#fff}.controller-log-container,.memory-log-container{flex:1;overflow-y:auto}.tabs{display:flex;gap:4px;margin-bottom:4px}.tab{padding:2px 6px;font-size:9px;cursor:pointer;border-radius:2px 2px 0 0;background-color:#2d3748}.tab.active{background-color:#4a5568;color:#fff}.placeholder-message{display:flex;align-items:center;justify-content:center;height:100%;color:#a0aec0;font-size:10px;font-style:italic;text-align:center;padding:10px}.visualizer-toggles{display:flex;align-items:center;margin:10px 0;border-radius:4px}.toggle-label{font-weight:700;margin-right:12px;white-space:nowrap}.toggle-controls{display:flex;flex-wrap:wrap;gap:12px}.toggle-control{display:flex;align-items:center}.toggle-control input[type=checkbox]{margin-right:4px}.toggle-control label{cursor:pointer;font-size:.9em;-webkit-user-select:none;user-select:none}.toggle-control input[type=checkbox]:disabled+label{opacity:.5;cursor:not-allowed}.fps-selector{display:flex;align-items:center}.fps-selector label{padding:6px 10px;border:none;border-radius:3px;cursor:pointer;font-weight:700;color:#fff;font-size:12px}.fps-selector select{background-color:inherit;padding:6px 10px;border:none;border-radius:3px;cursor:pointer;font-weight:700;color:#fff;font-size:11px}.fps-selector select option{background-color:#000;color:#fff}.fps-selector select:focus{outline:none;border-color:#2a7de1;box-shadow:0 0 0 2px #2a7de140}.fps-selector select:disabled{background-color:#f0f0f0;color:#999;cursor:not-allowed}@media (max-width: 1200px){.debug-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.grid-cell.main-display{grid-column:span 2;height:250px}}@media (max-width: 768px){.emulator-controls{flex-direction:column;gap:8px;align-items:flex-start}.rom-controls,.playback-controls{width:100%}.debug-grid{grid-template-columns:1fr}.grid-cell.main-display{grid-column:span 1}}