*{box-sizing:border-box}:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e8e8e8;--border-color: #e5e5e5;--border-focus: #0d99ff;--text-primary: #1e1e1e;--text-secondary: #6b6b6b;--text-muted: #999999;--accent-color: #0d99ff;--input-bg: #f0f0f0;--input-bg-hover: #e8e8e8;--button-hover: rgba(0, 0, 0, .05);--button-active: rgba(0, 0, 0, .1);--sidebar-width: 260px}html,body,#root{margin:0;padding:0;height:100%;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:11px;color:var(--text-primary);background-color:var(--bg-secondary)}.app{display:flex;flex-direction:column;height:100%;overflow:hidden}.menu-bar{display:flex;align-items:center;background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:0 8px;height:32px;flex-shrink:0}.menu-item{position:relative}.menu-label{padding:6px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;font-weight:500}.menu-label:hover{background-color:var(--button-hover)}.menu-dropdown{display:none;position:absolute;top:100%;left:0;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 16px #0000001f;min-width:200px;z-index:1000;padding:4px}.menu-item:hover .menu-dropdown{display:block}.menu-dropdown button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;font-size:11px;border-radius:4px}.menu-dropdown button:hover:not(:disabled){background-color:var(--button-hover)}.menu-dropdown button:disabled{color:var(--text-muted);cursor:default}.menu-separator{height:1px;background-color:var(--border-color);margin:4px 8px}.shortcut{color:var(--text-muted);font-size:10px}.file-name{margin-left:auto;padding:0 12px;color:var(--text-secondary);font-size:11px;font-weight:500}.main-content{display:flex;flex:1;overflow:hidden}.panel{border-bottom:1px solid var(--border-color)}.panel-header{padding:12px 12px 8px;font-weight:600;font-size:11px;color:var(--text-primary);display:flex;align-items:center;justify-content:space-between}.panel-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:flex-start;gap:4px}.panel-header.collapsible:hover{background-color:var(--button-hover)}.panel-header.collapsible.collapsed{padding:10px 12px}.collapse-chevron{color:var(--text-muted);transition:transform .15s;flex-shrink:0}.collapse-chevron.expanded{transform:rotate(90deg)}.panel-header-actions{display:flex;gap:4px}.panel-content{padding:0 12px 12px;overflow:visible}.input-row{display:flex;gap:8px;margin-bottom:8px}.input-row:last-child{margin-bottom:0}.input-group{flex:1;display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;padding:0 8px;height:28px;transition:background-color .15s}.input-group:hover{background-color:var(--input-bg-hover)}.input-group:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.input-group .input-label{font-size:11px;color:var(--text-secondary);min-width:16px;-webkit-user-select:none;user-select:none}.input-group input{flex:1;border:none;background:transparent;font-size:11px;font-family:inherit;color:var(--text-primary);padding:0;min-width:0;outline:none}.input-group input::-webkit-inner-spin-button,.input-group input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-group input[type=number]{-moz-appearance:textfield}.input-group.disabled{opacity:.5}.input-group.disabled input{cursor:not-allowed}.input-wide{flex:1;display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;padding:0 8px;height:28px}.input-wide:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.input-wide input{flex:1;border:none;background:transparent;font-size:11px;font-family:monospace;color:var(--text-primary);padding:0;outline:none}.icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--text-secondary);font-size:12px;transition:background-color .15s}.icon-btn:hover{background-color:var(--button-hover);color:var(--text-primary)}.icon-btn:active{background-color:var(--button-active)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn.active{background-color:var(--button-active);color:var(--text-primary)}.text-btn{padding:6px 12px;border:none;background:transparent;border-radius:4px;cursor:pointer;font-size:11px;font-weight:500;color:var(--text-secondary);transition:all .15s}.text-btn:hover{background-color:var(--button-hover);color:var(--text-primary)}.text-btn:active{background-color:var(--button-active)}.text-btn:disabled{opacity:.3;cursor:not-allowed}.btn-row{display:flex;gap:4px;margin-bottom:8px}.checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 0;font-size:11px;color:var(--text-primary)}.checkbox input{width:14px;height:14px;margin:0;accent-color:var(--accent-color)}.checkbox.compact{font-size:10px;gap:4px}.select-input{flex:1;padding:6px 8px;border:none;background-color:var(--input-bg);border-radius:4px;font-size:11px;font-family:inherit;color:var(--text-primary);cursor:pointer;outline:none}.select-input:hover{background-color:var(--input-bg-hover)}.select-input:focus{outline:2px solid var(--border-focus);outline-offset:-2px}.prop-label{font-size:11px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;margin-top:8px}.prop-label:first-child{margin-top:0}.section-label{font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.info-box{font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;color:var(--text-secondary);background-color:var(--input-bg);border-radius:4px;padding:8px;min-height:32px;white-space:pre}.input-icon{color:var(--text-secondary);flex-shrink:0;margin-right:4px}.input-suffix{font-size:11px;color:var(--text-secondary);margin-left:2px;flex-shrink:0}.input-group.small{flex:1 1 50px;min-width:50px;max-width:70px}.divider{height:1px;background-color:var(--border-color);margin:8px 0}.pixel-info{font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;white-space:pre;color:var(--text-secondary);background-color:var(--input-bg);border-radius:4px;padding:8px;min-height:32px}.stride-section{display:flex;flex-direction:column;gap:6px}.stride-row{display:flex;align-items:center;gap:4px;overflow:visible}.stride-label{font-size:10px;color:var(--text-secondary);min-width:32px;flex-shrink:0}.stride-inputs{flex:1;display:flex;gap:4px;min-width:0}.stride-input{flex:1;min-width:0;background-color:var(--input-bg);border-radius:4px;padding:0 6px;height:24px;display:flex;align-items:center}.stride-input input{flex:1;border:none;background:transparent;font-size:10px;font-family:inherit;color:var(--text-primary);padding:0;outline:none;text-align:center;min-width:0}.stride-input input::-webkit-inner-spin-button,.stride-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stride-input.disabled{opacity:.4}.stride-input.bit input{color:var(--accent-color)}.stride-auto{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px}.stride-auto input{width:14px;height:14px;margin:0;cursor:pointer;accent-color:var(--accent-color)}.bit-stride-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto}.bit-stride-row{display:flex;align-items:center;gap:4px}.bit-stride-index{font-size:10px;color:var(--text-muted);min-width:20px;text-align:center}.palette-layout{display:flex;gap:12px}.palette-preview-container{flex-shrink:0}.palette-preview{width:100px;height:100px;border-radius:4px;cursor:pointer;image-rendering:pixelated;border:1px solid var(--border-color)}.palette-controls{flex:1;display:flex;flex-direction:column;gap:8px}.color-picker-row{display:flex;align-items:center;gap:8px}.color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid var(--border-color);cursor:pointer;flex-shrink:0}.color-label{font-size:11px;color:var(--text-secondary)}.palette-info-box{font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;color:var(--text-secondary);background-color:var(--input-bg);border-radius:4px;padding:6px 8px;min-height:32px;white-space:pre}.disabled-message{padding:12px;color:var(--text-muted);font-size:10px;text-align:center;font-style:italic}.viewer-container{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative}.pixel-viewer{flex:1;overflow:auto;background-color:gray;position:relative}.pixel-canvas{image-rendering:pixelated;cursor:crosshair;display:block}.drop-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:48px;border:2px dashed #a0a0a0;border-radius:12px;color:#d0d0d0;font-size:14px;text-align:center;pointer-events:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.toggle-group{display:flex;background-color:var(--input-bg);border-radius:4px;padding:2px}.toggle-btn{flex:1;padding:4px 8px;border:none;background:transparent;border-radius:3px;cursor:pointer;font-size:10px;font-weight:500;color:var(--text-secondary);transition:all .15s}.toggle-btn.active{background-color:var(--bg-primary);color:var(--text-primary)}.toggle-btn:hover:not(.active){color:var(--text-primary)}.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}.flex{display:flex}.gap-4{gap:4px}.gap-8{gap:8px}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.field-row{display:flex;gap:8px;margin-bottom:8px}.field-half{flex:1;min-width:0}.field-full{flex:1 1 100%}.field-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px}.byte-bit-field{display:flex;gap:4px}.byte-field,.bit-field{flex:1;min-width:0;display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;padding:0 6px;height:28px;gap:4px}.byte-field:hover,.bit-field:hover{background-color:var(--input-bg-hover)}.byte-field:focus-within,.bit-field:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.byte-field .field-icon,.bit-field .field-icon{color:var(--text-muted);flex-shrink:0}.bit-field input{color:var(--accent-color)}.byte-field input,.bit-field input{flex:1;border:none;background:transparent;font-size:11px;font-family:inherit;color:var(--text-primary);padding:0;outline:none;min-width:0}.byte-field input::-webkit-inner-spin-button,.byte-field input::-webkit-outer-spin-button,.bit-field input::-webkit-inner-spin-button,.bit-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.byte-field.disabled,.bit-field.disabled{opacity:.4}.auto-checkbox{display:flex;align-items:center;flex-shrink:0}.auto-checkbox input{width:14px;height:14px;margin:0;cursor:pointer;accent-color:var(--accent-color)}.status-bar{display:flex;align-items:center;background-color:var(--bg-primary);border-top:1px solid var(--border-color);padding:0 12px;height:24px;flex-shrink:0;font-size:11px;gap:8px}.status-section{display:flex;align-items:center;gap:6px}.status-label{color:var(--text-muted)}.status-value{color:var(--text-primary)}.status-value.mono{font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px}.status-value.muted{color:var(--text-muted)}.status-value.preset-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-separator{width:1px;height:12px;background-color:var(--border-color)}.status-spacer{flex:1}.status-color-swatch{width:12px;height:12px;border-radius:2px;border:1px solid var(--border-color)}.status-icon{color:var(--text-muted)}.nav-buttons{gap:4px}.nav-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border:none;background-color:var(--input-bg);border-radius:4px;cursor:pointer;font-size:10px;font-weight:500;color:var(--text-secondary);transition:all .15s}.nav-btn:hover{background-color:var(--input-bg-hover);color:var(--text-primary)}.nav-btn:active{background-color:var(--button-active)}.combined-offset{font-family:SF Mono,Monaco,Consolas,monospace}.combined-offset:hover{background-color:var(--input-bg-hover)}.stride-header{display:grid;grid-template-columns:40px 1fr 1fr 28px;gap:4px;font-size:10px;color:var(--text-muted);padding:4px 0;margin-top:8px}.stride-header .bit-label{color:var(--accent-color)}.stride-row-compact{display:grid;grid-template-columns:40px 1fr 1fr 28px;gap:4px;align-items:center;margin-bottom:4px}.stride-row-compact .stride-label{font-size:10px;color:var(--text-secondary)}.palette-strip{width:100%;height:16px;border-radius:4px;margin-bottom:8px;border:1px solid var(--border-color)}.field-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.field-row:last-child{margin-bottom:0}.field-row .field-label{font-size:11px;color:var(--text-secondary);min-width:45px;flex-shrink:0;margin-bottom:0}.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.format-row{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;margin-bottom:8px}.format-value{display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;height:28px;padding:0 8px;min-width:0}.format-value:hover{background-color:var(--input-bg-hover)}.format-value:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.format-value input{flex:1;border:none;background:transparent;font-size:11px;font-family:SF Mono,Monaco,Consolas,monospace;color:var(--text-primary);padding:0;min-width:0;outline:none;text-align:right}.format-value input::-webkit-inner-spin-button,.format-value input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.format-value input[type=number]{-moz-appearance:textfield}.tiling-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.tiling-input{display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;padding:0 8px;height:28px;min-width:0}.tiling-input:hover{background-color:var(--input-bg-hover)}.tiling-input:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.tiling-label{font-size:11px;color:var(--text-secondary);min-width:16px;flex-shrink:0;-webkit-user-select:none;user-select:none}.tiling-input input{flex:1;border:none;background:transparent;font-size:11px;font-family:SF Mono,Monaco,Consolas,monospace;color:var(--text-primary);padding:0;min-width:0;outline:none;text-align:right}.tiling-input input::-webkit-inner-spin-button,.tiling-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tiling-input input[type=number]{-moz-appearance:textfield}.byte-bit-label{position:absolute;left:8px;font-size:11px;color:var(--text-secondary);-webkit-user-select:none;user-select:none;pointer-events:none}.byte-bit-input.has-label{position:relative}.byte-bit-input.has-label .byte-part{padding-left:20px}.tiling-grid .byte-bit-row,.format-row .byte-bit-row{margin-bottom:0}.tiling-grid .byte-bit-row{min-width:0}.format-row .byte-bit-row{min-width:0;margin-bottom:0}.byte-bit-row{display:flex;align-items:center;gap:4px;margin-bottom:8px}.byte-bit-input{flex:1;display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;height:28px;min-width:0}.byte-bit-input:hover:not(.disabled){background-color:var(--input-bg-hover)}.byte-bit-input .byte-part,.byte-bit-input .bit-part{border:none;background:transparent;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;color:var(--text-primary);outline:none;min-width:0;height:100%;border-radius:4px}.byte-bit-input .byte-part{flex:3;padding:0 4px 0 8px;text-align:right;border-radius:4px 0 0 4px}.byte-bit-input .bit-part{box-sizing:content-box;width:1ch;flex:none;padding:0 8px 0 4px;text-align:left;border-radius:0 4px 4px 0}.byte-bit-input .byte-part:focus{outline:none;box-shadow:inset 2px 0 0 var(--border-focus),inset 0 2px 0 var(--border-focus),inset 0 -2px 0 var(--border-focus)}.byte-bit-input .bit-part:focus{outline:none;box-shadow:inset -2px 0 0 var(--border-focus),inset 0 2px 0 var(--border-focus),inset 0 -2px 0 var(--border-focus)}.byte-bit-input .byte-bit-sep{color:var(--text-muted);font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;flex-shrink:0;position:relative;height:100%;display:flex;align-items:center}.byte-bit-input .byte-bit-sep.focused-byte:before,.byte-bit-input .byte-bit-sep.focused-byte:after{content:"";position:absolute;left:0;right:0;height:2px}.byte-bit-input .byte-bit-sep.focused-byte:before{top:0;background:linear-gradient(to right,var(--border-focus),transparent)}.byte-bit-input .byte-bit-sep.focused-byte:after{bottom:0;background:linear-gradient(to right,var(--border-focus),transparent)}.byte-bit-input .byte-bit-sep.focused-bit:before,.byte-bit-input .byte-bit-sep.focused-bit:after{content:"";position:absolute;left:0;right:0;height:2px}.byte-bit-input .byte-bit-sep.focused-bit:before{top:0;background:linear-gradient(to right,transparent,var(--border-focus))}.byte-bit-input .byte-bit-sep.focused-bit:after{bottom:0;background:linear-gradient(to right,transparent,var(--border-focus))}.byte-bit-input input::-webkit-inner-spin-button,.byte-bit-input input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.byte-bit-input input[type=number]{-moz-appearance:textfield}.byte-bit-input.disabled{opacity:.5}.byte-bit-input.disabled input{cursor:not-allowed}.auto-toggle-btn{display:flex;align-items:center;justify-content:center;width:24px;height:28px;border:none;background:transparent;cursor:pointer;color:var(--text-muted);transition:color .15s;flex-shrink:0}.auto-toggle-btn:hover{color:var(--text-secondary)}.auto-toggle-btn.linked{color:var(--text-primary)}.auto-toggle-btn.linked:hover{color:var(--text-secondary)}.position-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.position-column{min-width:0}.position-column .byte-bit-row,.position-column .zoom-control{margin-bottom:0}.zoom-control{display:flex;align-items:center;background-color:var(--input-bg);border-radius:4px;height:28px;margin-bottom:8px}.zoom-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;cursor:pointer;color:var(--text-secondary);flex-shrink:0}.zoom-btn:first-child{border-radius:4px 0 0 4px}.zoom-btn:last-child{border-radius:0 4px 4px 0}.zoom-btn:hover:not(:disabled){background-color:var(--button-hover);color:var(--text-primary)}.zoom-btn:disabled{opacity:.3;cursor:not-allowed}.zoom-input{flex:1;border:none;background:transparent;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;color:var(--text-primary);text-align:center;outline:none;min-width:0;padding:0}.zoom-input:focus{outline:none}.zoom-control:focus-within{outline:2px solid var(--border-focus);outline-offset:-2px}.zoom-input::-webkit-inner-spin-button,.zoom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bit-planes-compact{display:flex;flex-direction:column;gap:4px}.bit-plane-group{display:flex;align-items:center;gap:2px;background-color:var(--input-bg);border-radius:4px;padding:4px 8px}.bit-plane-byte-label{font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;color:var(--text-secondary);min-width:20px;text-align:right}.bit-plane-bit-input{width:20px;height:20px;border:none;background:transparent;font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;color:var(--accent-color);text-align:center;outline:none;padding:0}.bit-plane-bit-input:hover:not(:disabled){background-color:var(--button-hover);border-radius:2px}.bit-plane-bit-input:focus{background-color:var(--bg-primary);border-radius:2px;outline:2px solid var(--border-focus);outline-offset:-2px}.bit-plane-bit-input:disabled{opacity:.5;cursor:not-allowed}.bit-plane-bit-input::-webkit-inner-spin-button,.bit-plane-bit-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bit-plane-bit-input[type=number]{-moz-appearance:textfield}.pixel-info-panel{margin-top:auto;padding:8px 12px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:10px;color:var(--text-secondary);white-space:pre;border-top:1px solid var(--border-color)}.sidebar{width:var(--sidebar-width);flex-shrink:0;overflow-y:auto;background-color:var(--bg-primary);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.register-table{display:flex;flex-direction:column;gap:8px}.register-row-group{display:flex;flex-direction:column;gap:0}.register-header{display:flex;gap:2px}.register-header .register-cell{flex:1;text-align:right;font-family:SF Mono,Monaco,Consolas,monospace;font-size:9px;color:var(--text-muted);padding:2px 6px}.register-values{display:flex;gap:2px}.register-cell-group{flex:1;display:flex;align-items:center;justify-content:stretch}.register-output{width:100%;border:none;background-color:var(--input-bg);font-family:SF Mono,Monaco,Consolas,monospace;font-size:9px;color:var(--text-primary);text-align:right;outline:none;padding:0 6px;height:20px;border-radius:2px}.register-output:hover:not(:disabled){background-color:var(--input-bg-hover)}.register-output:focus{background-color:var(--bg-primary);outline:2px solid var(--border-focus);outline-offset:-2px}.register-output:disabled{opacity:.6;cursor:not-allowed}.register-output::-webkit-inner-spin-button,.register-output::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.register-output[type=number]{-moz-appearance:textfield}.register-empty{width:100%;height:20px}