:root{--gb-body:#c6c6b6;--gb-body-dark:#9e9e8e;--gb-body-light:#e8e8d8;--gb-text:#2c2c2c;--gb-text-light:#555;--gb-border:#4a4a4a;--gb-shadow:#6b6b5e;--btn-red:#e4000f;--btn-blue:#004cff;--btn-yellow:#f8b800;--btn-green:#00a800;--btn-grey:#7a7a7a;--btn-grey-dark:#5c5c5c;--screen-bg:#1a1a1a;--screen-bezel:#3d3d3d;--screen-glow:#9bbc0f;--font-pixel:"Press Start 2P", cursive;--font-retro:"VT323", monospace;font:20px/130% var(--font-retro);letter-spacing:.5px;color:var(--gb-text);background:var(--gb-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:repeating-linear-gradient(0deg, #00000008 0px, #00000008 1px, transparent 1px, transparent 4px), var(--gb-body)}#root{flex-direction:column;width:100%;max-width:1100px;min-height:100svh;margin:0 auto;padding:24px;display:flex}h1,h2,h3{font-family:var(--font-pixel);color:var(--gb-text);text-transform:uppercase;letter-spacing:1px}h1{margin:0 0 16px;font-size:24px;line-height:140%}h2{margin:0 0 12px;font-size:16px}h3{margin:0 0 8px;font-size:12px}p{margin:0}button{font-family:var(--font-pixel);text-transform:uppercase;cursor:pointer;background:var(--btn-grey);color:#fff;box-shadow:inset -4px -4px 0 0 var(--btn-grey-dark), inset 4px 4px 0 0 #ffffff40, 4px 4px 0 0 var(--gb-shadow);border:none;padding:12px 16px;font-size:10px;transition:transform 50ms,box-shadow 50ms}button:hover:not(:disabled){filter:brightness(1.1)}button:active:not(:disabled){box-shadow:inset -2px -2px 0 0 var(--btn-grey-dark), inset 2px 2px 0 0 #ffffff40, 2px 2px 0 0 var(--gb-shadow);transform:translate(2px,2px)}button:disabled{opacity:.5;cursor:not-allowed}button.red{background:var(--btn-red);box-shadow:inset -4px -4px 0 0 #a3000a, inset 4px 4px 0 0 #ffffff40, 4px 4px 0 0 var(--gb-shadow)}button.blue{background:var(--btn-blue);box-shadow:inset -4px -4px 0 0 #0036b3, inset 4px 4px 0 0 #ffffff40, 4px 4px 0 0 var(--gb-shadow)}button.yellow{background:var(--btn-yellow);color:var(--gb-text);box-shadow:inset -4px -4px 0 0 #b38600, inset 4px 4px 0 0 #fff6, 4px 4px 0 0 var(--gb-shadow)}button.green{background:var(--btn-green);box-shadow:inset -4px -4px 0 0 #007500, inset 4px 4px 0 0 #ffffff40, 4px 4px 0 0 var(--gb-shadow)}.retro-card,.retro-panel{background:var(--gb-body-light);border:4px solid var(--gb-border);width:100%;max-width:900px;box-shadow:inset -4px -4px 0 0 var(--gb-body-dark), inset 4px 4px 0 0 #fff, 6px 6px 0 0 var(--gb-shadow);padding:20px 24px}.retro-card{padding:24px}.retro-screen{background:var(--screen-bg);border:8px solid var(--screen-bezel);box-shadow:inset -4px -4px 0 0 #2a2a2a, inset 4px 4px 0 0 #5a5a5a, 0 0 0 4px var(--gb-border), 6px 6px 0 0 var(--gb-shadow);border-radius:8px;padding:12px;position:relative}.retro-screen:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#9bbc0f0a 0 1px,#0000 1px 3px);border-radius:4px;position:absolute;inset:12px}.retro-screen img{border-radius:4px;max-width:100%;display:block}input[type=range]{appearance:none;background:var(--gb-body-dark);border:2px solid var(--gb-border);outline:none;width:100%;height:16px;box-shadow:inset 2px 2px #0003}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--btn-red);border:2px solid var(--gb-border);width:24px;height:24px;box-shadow:inset -2px -2px 0 0 #a3000a, inset 2px 2px 0 0 #ffffff4d, 2px 2px 0 0 var(--gb-shadow);cursor:pointer}input[type=range]::-moz-range-thumb{background:var(--btn-red);border:2px solid var(--gb-border);width:24px;height:24px;box-shadow:inset -2px -2px 0 0 #a3000a, inset 2px 2px 0 0 #ffffff4d, 2px 2px 0 0 var(--gb-shadow);cursor:pointer}input[type=range].green-thumb::-webkit-slider-thumb{background:var(--btn-green);box-shadow:inset -2px -2px 0 0 #007500, inset 2px 2px 0 0 #ffffff4d, 2px 2px 0 0 var(--gb-shadow)}input[type=range].green-thumb::-moz-range-thumb{background:var(--btn-green);box-shadow:inset -2px -2px 0 0 #007500, inset 2px 2px 0 0 #ffffff4d, 2px 2px 0 0 var(--gb-shadow)}.pixel-text{font-family:var(--font-pixel)}@media (width<=768px){:root{font-size:18px}h1{font-size:16px}h2{font-size:12px}#root{padding:16px}}.app{flex-direction:column;flex:1;align-items:center;gap:24px;width:100%;display:flex}.error-banner{border:4px solid var(--btn-red);color:var(--btn-red);text-align:center;width:100%;max-width:600px;font-family:var(--font-pixel);box-shadow:4px 4px 0 0 var(--gb-shadow);background:#fcc;padding:12px 16px;font-size:10px}.upload-screen{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;width:100%;max-width:600px;display:flex}.upload-zone{border:4px dashed var(--gb-border);background:var(--gb-body-light);text-align:center;cursor:pointer;width:100%;box-shadow:inset -4px -4px 0 0 var(--gb-body-dark), inset 4px 4px 0 0 #fff, 6px 6px 0 0 var(--gb-shadow);padding:48px 32px;transition:all .15s}.upload-zone.active{border-color:var(--btn-blue);background:#d8e8ff}.upload-zone:hover{border-color:var(--btn-green)}.upload-icon{margin-bottom:16px;font-size:56px}.upload-title{font-family:var(--font-pixel);margin-bottom:12px;font-size:12px}.upload-hint{color:var(--gb-text-light);font-size:18px}.privacy-hint{text-align:center;color:var(--gb-text-light);max-width:500px}.cartridge-switcher{background:var(--gb-body-dark);border:4px solid var(--gb-border);box-shadow:inset -4px -4px 0 0 #00000040, inset 4px 4px 0 0 #ffffff1a, 6px 6px 0 0 var(--gb-shadow);border-radius:8px 8px 4px 4px;justify-content:center;gap:16px;padding:16px 24px;display:flex}.cartridge{background:var(--gb-body-light);border:3px solid var(--gb-border);cursor:pointer;width:120px;height:70px;box-shadow:inset -3px -3px 0 0 var(--gb-body-dark), inset 3px 3px 0 0 #fff, 0 6px 0 0 var(--gb-border);border-radius:6px 6px 2px 2px;justify-content:center;align-items:center;transition:transform .1s,box-shadow .1s;display:flex;position:relative;transform:translateY(-8px)}.cartridge:hover{background:#fff}.cartridge.inserted{background:var(--btn-yellow);box-shadow:inset -3px -3px 0 0 #0003, inset 3px 3px 0 0 #fff6, 0 0 0 0 var(--gb-border);transform:translateY(4px)}.cartridge.inserted:hover{background:var(--btn-yellow)}.cartridge-label{font-family:var(--font-pixel);color:var(--gb-text);text-shadow:1px 1px #fff6;font-size:10px}.preview-screen,.page-content{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.top-slider{width:100%;max-width:600px}.slider-label-row{justify-content:center;align-items:center;gap:12px;margin-bottom:12px;display:flex}.slider-label{font-family:var(--font-pixel);color:var(--gb-text);font-size:10px}.slider-controls{align-items:center;gap:12px;display:flex}.slider-controls button{min-width:40px;padding:8px 12px}.reset-button{background:var(--btn-grey);box-shadow:inset -2px -2px 0 0 var(--btn-grey-dark), inset 2px 2px 0 0 #ffffff40, 2px 2px 0 0 var(--gb-shadow);padding:6px 10px;font-size:8px}.reset-button:active{box-shadow:inset -1px -1px 0 0 var(--btn-grey-dark), inset 1px 1px 0 0 #ffffff40, 1px 1px 0 0 var(--gb-shadow)}.page-content{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.horizontal-slider{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:900px;display:flex}.horizontal-slider .slider-controls{align-items:center;gap:12px;width:100%;display:flex}.horizontal-slider .slider-controls input[type=range]{flex:1}.horizontal-slider .slider-controls button{min-width:40px;padding:8px 12px}.preview-panel>.horizontal-slider.compact{gap:8px;width:648px;max-width:100%;margin-bottom:34px}.preview-panel>.horizontal-slider.compact .slider-label-row{display:none}.preview-panel>.horizontal-slider.compact .slider-controls{gap:12px}.preview-panel>.horizontal-slider.compact .slider-controls input[type=range]{flex:1}.vertical-slider{flex-direction:column;align-items:center;gap:8px;min-width:60px;display:flex}.vertical-slider-track{justify-content:center;align-items:center;width:36px;height:300px;display:flex}.vertical-slider-track input[type=range]{transform-origin:50%;width:300px;height:30px;transform:rotate(-90deg)}.vertical-slider.compact{justify-content:space-between;gap:0;height:225px;position:relative}.vertical-slider.compact .slider-label{display:none}.vertical-slider.compact .vertical-slider-track{flex:1;height:auto}.vertical-slider.compact .vertical-slider-track input[type=range]{width:160px;height:30px}.vertical-slider.compact .reset-button{white-space:nowrap;position:absolute;bottom:-40px;left:50%;transform:translate(-50%)}.preview-panel{flex-direction:column;align-items:center;gap:16px;display:flex}.preview-panel h3{text-align:center}.preview-panel>.horizontal-slider{width:100%;max-width:none}.preview-layout{justify-content:center;align-items:center;width:100%;padding-bottom:32px;display:flex;position:relative}.preview-layout>.vertical-slider{position:absolute;top:0;left:0}.preview-images{justify-content:center;align-items:flex-start;gap:48px;width:648px;display:flex}.preview-item{flex-direction:column;flex:none;align-items:center;gap:10px;width:300px;display:flex}.preview-label{font-family:var(--font-pixel);color:var(--gb-text);margin-top:16px;font-size:10px}.fixed-screen{aspect-ratio:4/3;background:var(--screen-bg);width:100%;height:auto;box-shadow:0 0 0 8px var(--screen-bezel), 0 0 0 12px var(--gb-border), 6px 6px 0 12px var(--gb-shadow);border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;display:flex;overflow:hidden}.retro-screen.fixed-screen:after{border-radius:4px;inset:0}.fixed-screen img,.fixed-screen canvas{width:100%;height:100%;display:block}.diff-cover-img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.viewport{background:#000;position:relative;overflow:hidden}.viewport-img{object-fit:cover;will-change:transform;position:absolute;top:0;left:0}.diff-score{font-family:var(--font-pixel);text-align:center;color:var(--gb-text);background:var(--gb-body-light);border:2px solid var(--gb-border);box-shadow:inset -2px -2px 0 0 var(--gb-body-dark), inset 2px 2px 0 0 #fff;padding:8px 16px;font-size:10px}.action-row{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.gif-settings{flex-direction:column;gap:12px;display:flex}.gif-settings h3{text-align:center}.setting-row{border-bottom:2px dashed var(--gb-border);grid-template-columns:190px 1fr 110px;align-items:center;gap:12px;padding:8px 0;display:grid}.setting-row:last-child{border-bottom:none}.setting-row label{font-family:var(--font-pixel);white-space:nowrap;color:var(--gb-text);align-items:center;gap:8px;font-size:10px;display:flex}.setting-row input[type=range]{width:100%;min-width:0}.setting-row>span{text-align:right;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-pixel);color:var(--gb-text);font-size:10px;overflow:hidden}.loop-row button{justify-self:start}.help-tooltip{outline:none;display:inline-flex;position:relative}.help-icon{border:2px solid var(--gb-border);background:var(--gb-bg);width:14px;height:14px;font-family:var(--font-pixel);color:var(--gb-text);cursor:help;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:8px;line-height:1;display:inline-flex}.tooltip-text{visibility:hidden;background:var(--gb-body-light);border:2px solid var(--gb-border);width:220px;font-family:var(--font-pixel);color:var(--gb-text);text-align:left;text-transform:none;white-space:normal;z-index:100;opacity:0;pointer-events:none;border-radius:4px;padding:8px 10px;font-size:9px;line-height:1.5;transition:opacity .2s;position:absolute;bottom:125%;left:50%;transform:translate(-50%);box-shadow:4px 4px #00000040}.help-tooltip:hover .tooltip-text,.help-tooltip:focus .tooltip-text{visibility:visible;opacity:1}.setting-row.disabled label{color:#2c2c2c99}.setting-row.disabled input[type=range]{cursor:not-allowed;opacity:.6}.setting-row.disabled>span{opacity:.6}.setting-row.disabled .help-icon{opacity:.45}.loop-row{justify-content:space-between}.loop-toggle{min-width:60px;font-family:var(--font-pixel);padding:6px 12px;font-size:10px}.loop-toggle.on{background:var(--btn-green)}.loop-toggle.off{background:var(--btn-red)}.diff-graph-panel{flex-direction:column;align-items:center;gap:32px;padding-bottom:48px;display:flex}.diff-graph-panel h3{text-align:center}.diff-graph-row{justify-content:center;align-items:flex-start;gap:48px;width:100%;display:flex}.diff-graph{aspect-ratio:4/3;width:300px;max-width:100%;height:auto;box-shadow:0 0 0 8px var(--screen-bezel), 0 0 0 12px var(--gb-border), 6px 6px 0 12px var(--gb-shadow);background:#8bac0f;border:none;border-radius:4px;padding:0;position:relative}.diff-graph canvas{width:100%;height:100%;display:block}.graph-loading{font-family:var(--font-pixel);color:#0f380f;background:#8bac0fd9;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;inset:0}.auto-align-panel{flex-direction:column;align-items:center;gap:12px;display:flex}.auto-align-panel h3{text-align:center;justify-content:center;align-items:center;gap:8px;display:flex}.auto-align-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.auto-align-button-wrapper{align-items:center;gap:8px;display:flex}.auto-align-button{min-width:160px;font-family:var(--font-pixel);padding:12px 16px;font-size:10px}.auto-align-button.diff-search{background:var(--btn-grey)}@keyframes rainbow-shift{0%{background-position:0%}to{background-position:200%}}.auto-align-button.ml{color:#fff;text-shadow:1px 1px #0006;background:linear-gradient(90deg,#e4000f 0%,#ff5a00 6%,#f8b800 12% 20%,#a4d000 26%,#00a800 32%,#00b4a8 38%,#00d4c4 44%,#004cff 50%,#3a20ff 56%,#8a2be2 62%,#a020c4 68%,#ff1493 74%,#e4000f 100%) 0 0/200% 100%;animation:3s linear infinite rainbow-shift}.auto-align-button:disabled{opacity:.6;cursor:not-allowed}.auto-align-message{background:var(--btn-green);border:2px solid var(--gb-border);font-family:var(--font-pixel);text-align:center;white-space:nowrap;color:#fff;margin-top:12px;padding:6px 12px;font-size:10px;display:inline-block}.ml-progress-bar{background:var(--gb-body-dark);border:2px solid var(--gb-border);width:100%;max-width:400px;height:12px;box-shadow:inset -2px -2px #0003,inset 2px 2px #fff}.ml-progress-fill{background:var(--btn-green);height:100%;transition:width .1s}.search-viz-panel{flex-direction:column;align-items:center;gap:12px;display:flex}.search-viz-panel h3{text-align:center}.search-viz-placeholder{font-family:var(--font-pixel);text-align:center;color:var(--gb-text-light);padding:24px 16px;font-size:10px}.search-viz-body{align-items:center;gap:48px;width:100%;padding-bottom:24px;display:flex}.search-viz-screen{flex:none;width:300px;margin-left:108px;position:relative}.subject-mask-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.search-viz-stats{flex-direction:column;flex:none;gap:8px;min-width:140px;display:flex}.stat-row{font-family:var(--font-pixel);color:var(--gb-text);border-bottom:1px dashed var(--gb-border);justify-content:space-between;gap:16px;padding-bottom:4px;font-size:10px;display:flex}.stat-row:last-child{border-bottom:none}.dropdown-panel{flex-direction:column;align-items:stretch;gap:16px;display:flex}.dropdown-toggle{width:100%;font-family:var(--font-pixel);text-transform:uppercase;background:var(--btn-grey);color:#fff;cursor:pointer;box-shadow:inset -4px -4px 0 0 var(--btn-grey-dark), inset 4px 4px 0 0 #ffffff40, 4px 4px 0 0 var(--gb-shadow);border:none;padding:12px 16px;font-size:10px;transition:transform 50ms,box-shadow 50ms}.dropdown-toggle:hover:not(:disabled){filter:brightness(1.1)}.dropdown-toggle:active:not(:disabled){box-shadow:inset -2px -2px 0 0 var(--btn-grey-dark), inset 2px 2px 0 0 #ffffff40, 2px 2px 0 0 var(--gb-shadow);transform:translate(2px,2px)}.dropdown-content{width:100%}.gif-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;width:100%;display:flex}.gif-preview{max-width:100%;overflow-x:auto}.gif-preview img{max-width:none}@media (width<=768px){.vertical-slider{flex-direction:row;align-items:center}.vertical-slider.compact{flex-direction:column}.vertical-slider-track{height:200px}.vertical-slider-track input[type=range]{width:200px}.fixed-screen{width:100%;max-width:320px}.cartridge{width:90px;height:58px}.cartridge-switcher{gap:10px;padding:12px 16px}.diff-graph-row{flex-wrap:wrap;gap:24px}.preview-panel>.horizontal-slider.compact{width:100%;max-width:320px}.preview-layout{flex-direction:column;gap:56px}.preview-layout>.vertical-slider{position:static;transform:none}.preview-images{flex-direction:column;align-items:center;width:100%;max-width:320px}.preview-item{width:100%;max-width:320px}.search-viz-body{flex-direction:column;align-items:center}.search-viz-screen{margin-left:0}}