*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#1a1a2e;color:#e0e0e0;min-height:100vh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:center;position:relative;padding:1rem;flex-shrink:0}#header-center{display:flex;flex-direction:column;align-items:center;gap:.15rem}#tagline{font-size:.72rem;color:#555;letter-spacing:.06em;text-transform:uppercase}#header-actions{position:absolute;right:1rem;display:flex;align-items:center;gap:.75rem}#gh-link{font-size:.8rem;color:#555;text-decoration:none;letter-spacing:.05em}#gh-link:hover{color:#00d4ff}#about-btn{position:relative;font-size:.85rem;color:#555;cursor:default;-webkit-user-select:none;user-select:none}#about-btn:hover{color:#00d4ff}#about-popover{display:none;position:absolute;top:calc(100% + .5rem);right:0;width:220px;background:#16162a;border:1px solid #333;border-radius:6px;padding:.75rem;font-size:.78rem;color:#bbb;line-height:1.5;z-index:100;pointer-events:none}#about-popover strong{display:block;color:#00d4ff;margin-bottom:.4rem;letter-spacing:.05em}#about-popover ul{padding-left:1rem}#about-btn:hover #about-popover{display:block}header h1{font-size:1.5rem;letter-spacing:.1em;color:#00d4ff}#app-layout{display:flex;height:calc(100vh - 5rem);overflow:hidden}#sidebar{width:260px;flex-shrink:0;overflow-y:auto;padding:1rem;border-right:1px solid #333;background:#16162a}#canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.sb-section{margin-bottom:1.5rem}.sb-section h2{font-size:.7rem;font-variant:small-caps;color:#888;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}#drop-zone{border:2px dashed #444;border-radius:8px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:border-color .2s;position:relative;font-size:.85rem;color:#888}#drop-zone:hover,#drop-zone.dragover{border-color:#00d4ff}#drop-zone input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.sb-section select{background:#2a2a3e;color:#e0e0e0;border:1px solid #444;padding:.25rem .4rem;border-radius:4px;width:100%;margin-bottom:.5rem;font-size:.85rem}.sb-section label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;margin-bottom:.4rem;flex-wrap:wrap}.sb-section label select{width:auto;margin-bottom:0}.sb-section input[type=range]{flex:1;min-width:60px}.download-group{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.download-group select{flex:1;width:auto;margin-bottom:0}.download-group button{background:#00d4ff;color:#1a1a2e;border:none;padding:.4rem .75rem;border-radius:4px;cursor:pointer;font-weight:700;font-size:.85rem}.download-group button:disabled{opacity:.5;cursor:not-allowed}#res-presets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:.5rem}#res-presets button{background:#2a2a3e;color:#e0e0e0;border:1px solid #444;padding:.2rem .5rem;border-radius:4px;cursor:pointer;font-size:.8rem}#res-presets button:hover{border-color:#00d4ff;color:#00d4ff}#palette-swatches{display:flex;flex-wrap:wrap;gap:3px;margin-top:.5rem}#palette-swatches span{width:14px;height:14px;border-radius:2px;cursor:default;border:1px solid rgba(255,255,255,.1)}#drop-hint{color:#555;font-size:.9rem}#canvas-wrap{display:flex;justify-content:center;width:100%;height:100%;overflow:hidden;align-items:center}#compare-container{position:relative;display:block;cursor:ew-resize;-webkit-user-select:none;user-select:none;border:1px solid #333;max-width:100%;width:100%}.compare-pane h3{display:none}#canvas-wrap canvas{display:block;image-rendering:pixelated;width:100%;height:auto;max-width:unset;border:none}#pane-output{position:absolute;top:0;right:0;bottom:0;left:0}#pane-output canvas{height:100%;clip-path:inset(0 0 0 50%)}#compare-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#00d4ff;transform:translate(-50%);pointer-events:none}#compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:#00d4ff;border-radius:50%}.compare-label{position:absolute;top:.5rem;font-size:.75rem;font-weight:700;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;pointer-events:none;background:#0006;padding:.15rem .4rem;border-radius:3px}.compare-label-left{left:.5rem}.compare-label-right{right:.5rem}#canvas-wrap.side-by-side #compare-container{display:flex;gap:2rem;flex-wrap:wrap;max-width:100%;border:none;cursor:default}#canvas-wrap.side-by-side .compare-pane{flex:1;min-width:180px}#canvas-wrap.side-by-side .compare-pane h3{display:block;text-align:center;margin-bottom:.5rem;color:#888;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}#canvas-wrap.side-by-side #pane-output{position:static}#canvas-wrap.side-by-side #pane-output canvas{height:auto;clip-path:none;border:1px solid #333}#canvas-wrap.side-by-side #pane-original canvas{border:1px solid #333}#canvas-wrap.side-by-side #compare-handle,#canvas-wrap.side-by-side .compare-label{display:none}#error{background:#3a1a1a;border:1px solid #c0392b;color:#e74c3c;border-radius:6px;padding:.6rem 1rem;margin-top:.5rem;font-size:.85rem}.hidden{display:none!important}#spinner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2ebf;z-index:10;gap:.75rem}.spinner-ring{width:40px;height:40px;border:3px solid #333;border-top-color:#00d4ff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#00d4ff;color:#1a1a2e;padding:.5rem 1rem;border-radius:6px;font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;z-index:100}#toast.visible{opacity:1}