*{box-sizing:border-box}body{margin:0;background:#111;color:#eee;font:15px system-ui,sans-serif}main{max-width:1100px;margin:0 auto;padding:18px}h1{margin:0 0 6px;font-size:24px}.note,.keys{color:#bbb}.controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:#202020;padding:12px;border-radius:8px}.controls label{display:flex;gap:7px;align-items:center}select,button{background:#303030;color:#fff;border:1px solid #666;border-radius:5px;padding:7px 10px}button{cursor:pointer}button:hover{background:#444}input[type=range]{accent-color:#55aaff}.meta{display:flex;flex-wrap:wrap;gap:18px;color:#b8d8ff;padding:10px 0}.viewer{display:flex;justify-content:center;background:#000;border-radius:8px;padding:10px;min-height:300px}.canvasWrap{position:relative;max-width:min(88vw,900px);line-height:0}.canvasWrap img{display:block;max-width:100%;height:auto;image-rendering:auto}.canvasWrap #overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.legend{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.legend strong{margin-right:5px}.legendItem{display:inline-flex;gap:5px;align-items:center;color:#ddd}.swatch{width:13px;height:13px;border-radius:2px;display:inline-block}.keys{font-size:13px}.controls output{min-width:60px;color:#ddd}