body:has(.tracer) .container{max-width:1500px;padding:32px 28px 50px}.trace-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent);font-weight:600}.trace-heading h1{font-size:32px;letter-spacing:-1px;margin:6px 0}.trace-heading h1 span{color:var(--accent)}.trace-heading p{margin:0;color:#a6abb5}.trace-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px}.trace-settings{padding:20px;background:var(--panel);border:1px solid var(--border);border-radius:12px;align-self:start}.trace-upload{display:flex;align-items:center;flex-direction:column;gap:5px;border:1px dashed #505762;border-radius:8px;padding:22px 8px;cursor:pointer;text-align:center;font-size:14px}.trace-upload:hover,.trace-upload.over{border-color:var(--accent);background:#7dd56f0a}.upload-icon{color:var(--accent);font-size:32px}.trace-upload small{font-size:12px;color:#a6abb5;margin-top:6px}.muted{color:#a6abb5;font-size:14px}.trace-settings #fileInfo{overflow-wrap:anywhere;font-size:12px;margin:12px 0 26px}.tracer fieldset{border:0;padding:0;margin:0;min-width:0}.tracer legend{font-size:16px;font-weight:600;margin-bottom:16px}.tracer fieldset>label{display:block;font-size:14px;margin-bottom:20px}.tracer select{display:block;width:100%;margin-top:8px;background:var(--panel-2);border:1px solid #424751;border-radius:6px;padding:9px;color:var(--text);font:inherit}.tracer input[type=range]{width:100%;accent-color:var(--accent);display:block;margin:14px 0 0}.tracer output{float:right;background:var(--panel-2);padding:0 6px;border-radius:4px;font-variant-numeric:tabular-nums;color:var(--accent)}.range-notes{display:flex;justify-content:space-between;color:#a6abb5;font-size:12px;margin:-14px 0 22px}.tracer .check{display:flex;gap:8px;align-items:center}.tracer input[type=checkbox]{accent-color:var(--accent)}.trace-start{width:100%;margin-top:8px}.note{font-size:12px;line-height:1.6;margin-bottom:0}.view-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:10px 10px 0 0}.view-tabs{display:flex;gap:3px}.view-tabs button{border:0;background:transparent;color:#adb2bd;padding:9px 12px;border-radius:6px;font-size:14px;cursor:pointer}.view-tabs button[aria-pressed=true]{background:#303630;color:#b2efa8}.zoom-label{display:flex;align-items:center;gap:10px;font-size:12px;color:#a6abb5}.zoom-label select{width:auto;margin:0;font-size:12px}.trace-canvas{height:470px;overflow:auto;display:flex;align-items:center;justify-content:center;background-color:#111317;background-image:linear-gradient(45deg,#1b1e2380 25%,transparent 25%),linear-gradient(-45deg,#1b1e2380 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1b1e2380 75%),linear-gradient(-45deg,transparent 75%,#1b1e2380 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid var(--border);border-top:0}#empty{text-align:center;padding:25px}#empty .empty-mark{font-size:68px;color:#657467}#empty h2{font-size:22px;font-weight:500;margin:4px}#empty p{color:#abb1bc;font-size:16px}#empty>span{color:#858c99;font-size:12px}#preview{width:100%;height:100%;flex-shrink:0;display:flex;gap:12px;padding:24px}#preview[hidden],[hidden]{display:none!important}.preview-pane{position:relative;flex:1;min-width:0;display:flex;justify-content:center;align-items:center}.preview-pane>span{position:absolute;top:0;left:0;background:#171a20db;color:#c5cbd4;padding:4px 8px;font-size:12px;border-radius:4px;z-index:1}.preview-pane img{width:100%;height:100%;object-fit:contain}.preview-pane p{color:#a6abb5;text-align:center}.trace-status{padding:13px 16px;background:var(--panel);border:1px solid var(--border);border-top:0;border-radius:0 0 10px 10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-size:13px;min-height:48px}.trace-status #stats{color:#a6abb5}.trace-status progress{width:100%;height:5px;accent-color:var(--accent)}.palette-panel{margin-top:22px;border:1px solid var(--border);border-radius:10px;background:var(--panel);padding:20px}.palette-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.palette-heading h2{font-size:16px;margin:0}.palette-heading h2 span{color:var(--accent);font-size:13px}.palette-heading p{color:#a6abb5;font-size:14px;margin:5px 0 16px}#palette{display:flex;flex-wrap:wrap;gap:9px;margin:5px 0 20px}.swatch{width:46px;height:46px;border-radius:7px;border:2px solid #ffffff25;cursor:pointer;position:relative}.swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:3px}.swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:9px;background:#12151c;color:white;border-radius:50%;font-size:14px}.merge-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;border-top:1px solid var(--border);padding-top:16px}.merge-bar label{display:flex;gap:8px;align-items:center}.merge-bar input{width:34px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}.trace-footnote{color:#969daa;font-size:12px;margin:14px 0}.tracer button:disabled{opacity:.4;cursor:not-allowed}.tracer :focus-visible{outline:2px solid var(--accent);outline-offset:4px}.error{color:#ff9090!important}@media(min-width:1500px){.trace-canvas{height:530px}}@media(max-width:900px){.trace-layout{grid-template-columns:250px minmax(0,1fr)}.view-toolbar{flex-wrap:wrap}.trace-settings{padding:16px}}@media(max-width:700px){body:has(.tracer) .container{padding:22px 14px}.trace-heading{align-items:flex-start;flex-direction:column}.trace-heading h1{font-size:28px}.trace-layout{grid-template-columns:1fr}.trace-canvas{height:350px}.trace-upload{padding:15px}.trace-settings #fileInfo{margin-bottom:16px}.palette-panel{padding:15px}.view-tabs button{padding:9px}.trace-heading p{font-size:14px}}
/* Canvas navigation and explicit source → destination palette. */
.view-toolbar{flex-wrap:wrap}.zoom-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.zoom-controls .btn{padding:7px 10px}.zoom-controls label{display:flex;align-items:center;gap:3px;color:#a6abb5;font-size:14px}.zoom-controls input{width:68px;background:var(--panel-2);border:1px solid #424751;color:var(--text);padding:7px 4px;border-radius:5px;font:inherit}.canvas-help{margin:0;padding:8px 12px;background:var(--panel);font-size:12px;color:#a6abb5;border-inline:1px solid var(--border)}.trace-canvas{display:block;position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none}.trace-canvas.panning{cursor:grabbing}#preview{position:absolute;inset:0;transform-origin:0 0;will-change:transform}#empty{padding-top:70px;cursor:default}.preview-pane img{pointer-events:none}.color-direction{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.color-chip{width:28px;height:28px;border:1px solid #6b7380;border-radius:5px}.color-direction strong{color:var(--accent);font-size:22px}.swatch[aria-pressed=true]:after{content:attr(data-order)}.trace-settings .note{margin:0 0 16px}.trace-status #stats{font-size:12px}