*{box-sizing:border-box}html{font-size:18px}@media (max-width: 1200px){html{font-size:16px}}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:1rem 1.5rem;background:#141414;color:#d0d0d0;height:100vh;overflow:hidden;box-sizing:border-box}.main-layout{display:grid;grid-template-columns:1fr 280px;gap:1rem;align-items:stretch;height:calc(100vh - 6.5rem);overflow:hidden}.main-content{min-width:0;height:100%;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}.main-content>.view-toggle{flex:0 0 auto}.main-content>.image-container,.main-content>.tile-viz-container{flex:1 1 0;min-height:0}.main-content>.compare-container{flex:1 1 0;min-height:0}h1{color:#c9a227;margin:0 0 .75rem;font-size:2rem;text-align:center}.subtitle{display:none}footer{position:fixed;bottom:0;left:0;right:0;padding:.5rem;text-align:center;font-size:.75em;color:#666;background:#141414}button{background:#1a1a1a;border:1px solid #404040;color:#b0b0b0;padding:.5rem 1rem;border-radius:4px;cursor:pointer}button:hover{border-color:#c9a227;color:#c9a227}.demo-btn{padding:.35rem .75rem;font-size:.85em;transition:all .2s}.demo-btn:hover{border-color:#c9a227;color:#c9a227}.demo-btn.active{background:#2a2a2a;border-color:#c9a227;color:#c9a227}.view-btn{padding:.4rem 1rem;font-size:1rem}.view-btn.active{background:#2a2a2a;border-color:#c9a227;color:#c9a227}.view-toggle{display:flex;gap:.5rem;flex-shrink:0}.sidebar-stack{display:flex;flex-direction:column;gap:.75rem;overflow-y:auto;max-height:100%}.sidebar-box{background:#1a1a1a;border-radius:6px;font-family:monospace;font-size:.9rem;border:1px solid #2a2a2a;padding:.6rem .75rem}.sidebar-box h3{margin:0 0 .4rem;color:#c9a227;font-size:.85em}.sidebar-version{font-family:monospace;font-size:.75em;color:#505050;text-align:center}.sidebar-control{margin-top:0;padding-top:0;border-top:none}.sidebar-control label{color:#707070;font-size:.9em;display:block;margin-bottom:.25rem}.stats-grid{display:flex;flex-direction:column;gap:.25rem}.stat-row{display:flex;justify-content:space-between;gap:.5rem}.stat-label{color:#707070}.stat-value{color:#c9a227;text-align:right}.image-select{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.5rem}.image-select .demo-btn{width:100%;text-align:center}.drop-zone{border:1px dashed #404040;border-radius:4px;padding:.5rem;cursor:pointer;transition:all .2s;color:#606060;font-size:.8em;text-align:center}.drop-zone:hover,.drop-zone.dragover{border-color:#c9a227;color:#c9a227;background:#c9a2270d}.slider-row{display:flex;align-items:center;gap:.5rem}.slider-row input[type=range]{flex:1;accent-color:#c9a227}.slider-row span{color:#c9a227;min-width:20px;text-align:right}select{width:100%;background:#0f0f0f;border:1px solid #404040;color:#d0d0d0;padding:.4rem .5rem;border-radius:4px;font-family:monospace;font-size:.9em;cursor:pointer}select:hover{border-color:#c9a227}select:focus{outline:none;border-color:#c9a227}select option{background:#1a1a1a;color:#d0d0d0}.image-container{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;min-height:0}.panel{background:#1a1a1a;border-radius:6px;padding:0;border:1px solid #2a2a2a;min-height:0;min-width:0;overflow:hidden;position:relative}.panel h3{position:absolute;top:.25rem;left:.5rem;margin:0;color:#888;font-size:.75rem;font-weight:400;z-index:10;text-shadow:0 0 3px #000}canvas{border:1px solid #333;background:#000}.compare-container{background:#1a1a1a;border-radius:6px;padding:.75rem;border:1px solid #2a2a2a}.compare-wrapper{position:relative;display:inline-block;max-width:100%}.compare-wrapper canvas{display:block;max-width:100%}.compare-slider{position:absolute;top:0;bottom:0;left:50%;width:4px;cursor:ew-resize;z-index:10}.compare-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#c9a227;transform:translate(-50%)}.compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:#c9a227;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000080}.compare-handle:before{content:"◀▶";font-size:10px;color:#141414;letter-spacing:-2px}.compare-labels{position:absolute;top:.5rem;left:0;right:0;display:flex;justify-content:space-between;padding:0 1rem;pointer-events:none}.compare-label-left,.compare-label-right{background:#141414cc;padding:.25rem .5rem;border-radius:4px;font-size:.8em;color:#888}.bench-btn{margin-top:.5rem;width:100%;display:none}.bench-results{margin-top:.5rem;font-size:.8em}.error{color:#c66}.success{color:#8a6}input[type=file]{display:block;margin:1rem 0}.checkbox-group{display:flex;flex-direction:column;gap:.4rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#909090;font-size:.85em}.checkbox-label:hover{color:#c9a227}.checkbox-label input[type=checkbox]{accent-color:#c9a227;width:14px;height:14px;cursor:pointer}.checkbox-label input[type=checkbox]:checked+span{color:#c9a227}.radio-group{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #333}.radio-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#909090;font-size:.85em}.radio-label:hover{color:#c9a227}.radio-label input[type=radio]{accent-color:#c9a227;width:14px;height:14px;cursor:pointer}.radio-label input[type=radio]:checked+span{color:#c9a227}.hover-info{margin-top:.5rem;padding-top:.5rem;border-top:1px solid #333;font-size:.8em;font-family:monospace;color:#707070;min-height:3.5em}.hover-info .hover-label{color:#505050;font-style:italic}.hover-info .hover-coords{color:#909090;display:block;margin-bottom:.25rem}.hover-info .hover-values{display:flex;flex-direction:column;gap:.15rem}.hover-info .hover-row{display:flex;justify-content:space-between}.hover-info .hover-row span:first-child{color:#707070}.hover-info .hover-row span:last-child{color:#c9a227}.tile-viz-container{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;min-height:0}.tile-viz-container .panel h3{font-size:.95rem;color:#909090}.tile-viz-container canvas{image-rendering:pixelated}.panel canvas{transform-origin:top left;image-rendering:pixelated;display:block;width:100%;height:100%;object-fit:contain;object-position:top left}.panel{cursor:grab}.panel.panning{cursor:grabbing}.panel.zoom-mode{cursor:zoom-in}