:root{color-scheme:light;--paper:#f5f3ec;--panel:#fcfbf6;--ink:#30382f;--muted:#73786b;--line:#d8ddcf;--green:#42654e;--pale:#e6eddf;font:12px/1.4 "Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit;color:inherit}button,.file-button{border:1px solid #c7d1be;background:var(--panel);border-radius:4px;min-height:29px;padding:5px 8px;line-height:1.3;font-size:11px;cursor:pointer;text-align:center}button:hover:not(:disabled),.file-button:hover{background:var(--pale)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,.file-button:focus-within{outline:2px solid var(--green);outline-offset:2px}button[aria-pressed=true]{background:#dce7d4;border-color:#8ca47a}a{color:var(--green)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.inspector-shell{height:100vh;height:100svh;display:flex;flex-direction:column;min-height:0}.app-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:55px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}.app-heading{display:flex;align-items:center;gap:8px;min-width:0}.app-heading img{flex:none}h1{margin:0;font:400 25px/1.1 Georgia,serif;letter-spacing:-.4px}.app-header a{font-size:10px;white-space:nowrap;text-decoration:none;color:var(--muted)}.is-embedded .app-header{display:none}.file-toolbar{display:flex;flex-wrap:wrap;gap:6px 12px;padding:7px 10px;flex:none;border-bottom:1px solid var(--line)}.action-group{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.save-actions{margin-left:auto}.file-button{position:relative;display:inline-flex;align-items:center;justify-content:center}.file-button input{margin:0}.image-details{display:flex;gap:4px 12px;flex-wrap:wrap;padding:5px 11px;background:#eeeee480;border-bottom:1px solid var(--line);font-size:10px;flex:none;color:var(--muted)}#image-name{font-weight:600;color:#4d6048;overflow-wrap:anywhere;min-width:0;max-width:100%}.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;flex:none}.zoom-controls{display:flex;align-items:center;gap:4px}.zoom-controls button{min-height:26px;padding:3px 7px}.small-button{width:27px;font-size:16px!important;line-height:1!important}#zoom-value{width:46px;text-align:center;font:11px Consolas,monospace;flex:none}.pan-hint{font-size:10px;color:var(--muted)}.viewport{position:relative;min-width:0;min-height:100px;flex:1;overflow:auto;overscroll-behavior:contain;background-color:#e9e9e5;background-image:linear-gradient(45deg,#d6d8d0 25%,transparent 25%),linear-gradient(-45deg,#d6d8d0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d8d0 75%),linear-gradient(-45deg,transparent 75%,#d6d8d0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.empty{min-height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px 12px;background:var(--panel);color:var(--muted);text-align:center}.empty img{opacity:.7;margin-bottom:12px}.empty h2{margin:0 0 7px;font:400 24px Georgia,serif;color:#50684b}.empty p{margin:0;font-size:11px}.stage{position:relative;display:grid;place-items:center;min-width:100%;min-height:100%;padding:16px}canvas{display:block;max-width:none;box-shadow:0 1px 7px #0003;cursor:crosshair;touch-action:pan-x pan-y}canvas.pixelated{image-rendering:pixelated}.viewport.panning,.viewport.panning canvas{cursor:grabbing}.viewport.pan-ready canvas{cursor:grab}.pixel-marker{position:absolute;border:1px solid #fff;outline:1px solid #151515;box-shadow:0 0 0 2px #fff7;pointer-events:none;z-index:1}.pixel-panel{display:flex;align-items:center;gap:9px;padding:8px 11px;border-top:1px solid var(--line);background:var(--panel);flex:none}.swatch{position:relative;width:43px;height:43px;flex:none;border:1px solid #c4cdb9;border-radius:4px;overflow:hidden;background:repeating-conic-gradient(#d4d6ce 0% 25%,#fafaf7 0% 50%) 50%/12px 12px}.swatch span{display:block;width:100%;height:100%}.pixel-values{display:grid;grid-template-columns:auto auto;gap:2px 12px;align-items:center;min-width:0;font:10px/1.45 Consolas,monospace}.pixel-values strong{font-size:12px;color:#355940}.pixel-values span{color:var(--muted)}.pixel-actions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;margin-left:auto;max-width:145px}.pixel-actions button{font-size:10px;min-height:25px;padding:3px 6px}#pixel-help{font-size:9px;color:var(--muted);line-height:1.4}footer{display:flex;justify-content:space-between;gap:8px;flex:none;min-height:25px;padding:5px 11px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer p{margin:0;overflow-wrap:anywhere;min-width:0}footer>span{white-space:nowrap}footer .error{color:#9b493b}
@media(max-width:600px){.save-actions{margin-left:0}.file-toolbar{gap:5px 12px}.pan-hint{font-size:9px}.pixel-values{gap:1px 8px}.pixel-actions{max-width:125px}.app-header{padding:10px 11px}h1{font-size:23px}}
@media(max-width:380px){.file-toolbar{padding:6px 8px}.file-toolbar button,.file-button{font-size:10px;padding:5px 6px}.pixel-panel{gap:7px;padding:7px 8px;flex-wrap:wrap}.swatch{width:35px;height:35px}.pixel-values{flex:1;grid-template-columns:auto auto;font-size:9px}.pixel-values strong{font-size:11px}.pixel-actions{max-width:none;flex-basis:100%;margin-left:42px}#pixel-help{margin-left:3px}.view-toolbar{padding:5px 8px;gap:4px}.pan-hint{max-width:65px;text-align:right}footer>span{display:none}.app-header a{font-size:9px}h1{font-size:21px}}
.viewport.drag-over::after{content:"Drop to load from Device";position:sticky;display:grid;place-items:center;inset:8px;height:calc(100% - 16px);border:2px dashed #7f9a6a;background:#e6eddfef;color:#35563e;z-index:2;font:21px Georgia,serif;pointer-events:none}

.inspection-workspace{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}
.inspection-image{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}
.inspection-image .pixel-panel{flex-wrap:wrap}
.recipe-panel{flex:0 0 300px;width:300px;min-width:0;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;border-left:1px solid var(--line);background:var(--panel);padding:11px 12px;font-size:11px}
.recipe-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.recipe-heading h2{margin:0;font:400 19px/1.2 Georgia,serif;color:#50684b}
.recipe-model{font-size:10px;color:var(--muted);white-space:nowrap}
.recipe-palette-label{display:block;margin-bottom:3px}
.recipe-panel select,.recipe-panel input{min-width:0;border:1px solid #c7d1be;border-radius:3px;background:#fff;color:var(--ink);font:11px "Segoe UI",sans-serif;min-height:26px;padding:3px 5px}
.recipe-panel select:focus-visible,.recipe-panel input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
#recipe-palette{display:block;width:100%}
.recipe-palette-colors{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 10px;min-height:0}
.recipe-palette-chip{flex:0 0 22px;width:22px;height:22px;min-height:22px;padding:0;border:1px solid #8b9583;border-radius:3px}
.recipe-palette-chip:hover:not(:disabled){filter:brightness(.92)}
.recipe-inputs{min-width:0;margin:0;padding:7px 8px 8px;border:1px solid var(--line);border-radius:3px}
.recipe-inputs legend{padding:0 4px}
.recipe-hex-row{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:5px;margin-bottom:5px}
#recipe-hex{font-family:Consolas,monospace}
.recipe-rgb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px}
.recipe-rgb-row input{width:100%;padding-right:2px;font-variant-numeric:tabular-nums}
.recipe-input-actions{display:flex;gap:5px;margin-top:7px}
.recipe-input-actions button{min-height:26px;padding:3px 8px}
#recipe-eyedropper{flex:1}
.recipe-source{margin:7px 0;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.recipe-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.recipe-color{display:flex;flex-direction:column;gap:3px;min-width:0}
.recipe-color>span{font-size:10px;color:var(--muted)}
.recipe-color-swatch{height:41px;border:1px solid #bac4af;border-radius:3px;background:repeating-conic-gradient(#d4d6ce 0% 25%,#fafaf7 0% 50%) 50%/12px 12px}
.recipe-color output{font:11px/1.4 Consolas,monospace;overflow-wrap:anywhere}
.recipe-color .recipe-zuv{font-size:9px;color:var(--muted)}
.recipe-match{margin:8px 0;font-size:11px;color:#355940;overflow-wrap:anywhere}
.recipe-match:empty{display:none}
.recipe-amounts-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:10px 0 4px}
.recipe-amounts-label{flex:1;margin:0;font-size:11px;font-weight:600}
#recipe-refit{min-height:24px;padding:2px 5px;font-size:10px;white-space:nowrap}
.recipe-show-all{display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px}
.recipe-show-all input{flex:0 0 13px;width:13px;height:13px;min-height:13px;margin:0;padding:0;accent-color:var(--green)}
.recipe-weights{list-style:none;padding:0;margin:0}
.recipe-weight-row{display:grid;grid-template-columns:14px minmax(0,1fr) 28px 94px;align-items:center;gap:4px;min-height:28px;border-bottom:1px solid #e8ebdf}
.recipe-weight-swatch{width:14px;height:14px;border:1px solid #9da790;border-radius:2px}
.recipe-weight-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px Consolas,monospace}
.recipe-weight-level{width:100%;min-width:0;height:10px;accent-color:var(--green)}
.recipe-weight-level::-webkit-meter-bar{border:0;border-radius:2px;background:#e5e9de}
.recipe-weight-level::-webkit-meter-optimum-value{border-radius:2px;background:var(--green)}
.recipe-weight-level::-moz-meter-bar{border-radius:2px;background:var(--green)}
.recipe-weight-value{text-align:right;font:10px Consolas,monospace;white-space:nowrap}
.recipe-weight-edit{display:flex;align-items:center;gap:3px;min-width:0;font:10px Consolas,monospace}
.recipe-weight-lock{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;min-width:22px;height:22px;min-height:22px;padding:0;border-radius:3px;font-size:12px;line-height:1}
.recipe-weight-lock svg{display:block;width:12px;height:12px;pointer-events:none}
.recipe-weight-lock[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:#fff}
.recipe-weight-lock[aria-pressed="true"]:hover:not(:disabled){border-color:#355940;background:#355940;color:#fff}
.recipe-panel .recipe-weight-input{width:100%;min-width:0;min-height:24px;height:24px;padding:2px 3px;font:10px Consolas,monospace;text-align:right;font-variant-numeric:tabular-nums}
.recipe-panel .recipe-weight-input:disabled{opacity:1;background:#f0f2ea;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.recipe-weight-edit>span{flex:none}
.recipe-total{display:block;margin-top:6px;text-align:right;font:10px Consolas,monospace;color:var(--muted)}
.recipe-note{margin:9px 0 0;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.recipe-note.error{color:#9b493b}
.recipe-panel.is-picking{box-shadow:inset 0 0 0 2px #8ca47a}
@media(max-width:760px){
  .inspection-workspace{flex-direction:column;overflow:auto;overscroll-behavior:contain}
  .inspection-image{flex:1 0 220px;min-height:220px}
  .recipe-panel{flex:0 0 auto;width:100%;max-height:40vh;max-height:40svh;min-height:150px;border-left:0;border-top:1px solid var(--line);padding:9px 11px}
  .recipe-heading{margin-bottom:7px}
  .recipe-palette-colors{margin:6px 0 8px}
  .recipe-comparison{gap:10px}
}