image-lab{border:1px solid var(--line);background:var(--sl-color-bg);border-radius:14px;min-width:0;margin:1.5rem 0;padding:1.25rem;display:block;container-type:inline-size}image-lab *{box-sizing:border-box}image-lab [hidden]{display:none!important}image-lab p,image-lab figure,image-lab label,image-lab div,image-lab details,image-lab summary{margin-top:0}image-lab .lab-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;display:flex}image-lab .lab-kicker{font:600 .65rem var(--sl-font-mono);letter-spacing:.12em;color:var(--mint)}image-lab .lab-title{margin:.3rem 0 0;font-size:1.1rem;font-weight:600}image-lab .standalone-link{white-space:nowrap;font-size:.75rem}image-lab label{font-size:.78rem;font-weight:500}image-lab select,image-lab input[type=number],image-lab textarea{font:400 .78rem var(--sl-font-mono);color:var(--sl-color-text);background:var(--panel);border:1px solid var(--line);border-radius:5px;min-width:0;max-width:100%;padding:.4rem .5rem}image-lab .algorithm-picker{display:block}image-lab .algorithm-picker select{width:100%;margin:.4rem 0 1rem;padding:.65rem;display:block}image-lab .operation-note{color:var(--muted);margin-bottom:1.1rem;font-size:.83rem;line-height:1.7}image-lab .lab-parameters{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.2rem;margin-bottom:1.1rem;display:grid}image-lab .parameter{min-width:0;display:block}image-lab .parameter>span{margin-bottom:.4rem;display:block}image-lab .parameter-values{align-items:center;gap:.7rem;display:flex}image-lab .parameter-values input[type=range]{width:100%;min-width:30px;accent-color:var(--mint);flex:1;margin:0}image-lab .parameter input[type=number]{width:5.2rem}image-lab .parameter select{width:100%}image-lab .parameter.json{grid-column:1/-1}image-lab textarea{resize:vertical;width:100%;min-height:4.5rem;line-height:1.5;display:block}image-lab button,image-lab .file-button{font:500 .75rem var(--sl-font);border:1px solid var(--line);color:var(--sl-color-text);background:var(--panel);cursor:pointer;border-radius:6px;padding:.55rem .7rem;line-height:1.3}image-lab button:disabled{opacity:.4;cursor:default}image-lab button:focus-visible,image-lab input:focus-visible,image-lab select:focus-visible,image-lab textarea:focus-visible,image-lab .pixel-viewport:focus-visible{outline:2px solid var(--mint);outline-offset:3px}image-lab .file-button{align-items:center;display:inline-flex;position:relative;overflow:hidden}image-lab .file-button input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}image-lab .file-button:focus-within{outline:2px solid var(--mint);outline-offset:3px}image-lab .lab-source-controls,image-lab .lab-actions{flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0 .5rem;display:flex}image-lab .size-control{align-items:center;gap:.5rem;margin-left:auto;display:flex}image-lab .source-note,image-lab .second-note{color:var(--muted);margin:.4rem 0 .8rem;font-size:.72rem}image-lab .second-input{border:1px dashed var(--line);border-radius:7px;padding:.8rem}image-lab .second-note{margin-bottom:0}image-lab .lab-assets:empty{display:none}image-lab .lab-assets{flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.75rem;display:flex}image-lab .asset-name{color:var(--muted);overflow-wrap:anywhere;font-size:.7rem}image-lab .lab-actions .load-runtime{background:var(--mint);color:#0e241c;border-color:var(--mint)}image-lab .auto-run{color:var(--muted);align-items:center;gap:.4rem;font-size:.72rem;display:flex}image-lab input[type=checkbox]{accent-color:var(--mint)}image-lab .download{margin-left:auto}image-lab .lab-status{font:400 .72rem/1.6 var(--sl-font-mono);color:var(--mint);margin:.7rem 0}image-lab[data-state=error] .lab-status{color:var(--orange)}image-lab .result-note{font:400 .74rem/1.7 var(--sl-font-mono);overflow-wrap:anywhere;white-space:pre-wrap;max-height:12rem;overflow:auto}image-lab .result-note:empty{display:none}image-lab .viewer-toolbar{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem 0;display:flex}image-lab .zoom-controls{align-items:center;gap:.4rem;display:flex}image-lab .zoom-controls button{padding:.2rem .65rem;font-size:1rem}image-lab .zoom-controls label{align-items:center;gap:.5rem;display:flex}image-lab .zoom-readout{font:400 .65rem var(--sl-font-mono);color:var(--muted)}image-lab .lab-canvases{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:.8rem;display:grid}image-lab figure{min-width:0;margin:0}image-lab figcaption{justify-content:space-between;align-items:center;margin:0 0 .5rem;font-size:.75rem;display:flex}image-lab .image-dimensions{font:400 .65rem var(--sl-font-mono);color:var(--muted)}image-lab .pixel-viewport{border:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:thin;background-color:#15171c;background-image:linear-gradient(45deg,#1e2127 25%,#0000 25%),linear-gradient(-45deg,#1e2127 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1e2127 75%),linear-gradient(-45deg,#0000 75%,#1e2127 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border-radius:6px;height:clamp(302px,36cqi,65vh);overflow:auto}image-lab .pixel-surface{width:max-content;min-width:0;margin:0;position:relative}image-lab .lab-main-canvas{image-rendering:pixelated;cursor:crosshair;border:0;margin:0;display:block;max-width:none!important}image-lab .selection-rectangle{pointer-events:none;border:1px dashed #55d8b2;outline:1px solid #0008;position:absolute}image-lab .pixel-crosshair{pointer-events:none;z-index:1;outline:1px solid #fff;position:absolute;box-shadow:0 0 0 2px #000}image-lab .inspect-source{align-items:center;gap:.5rem;margin-bottom:.4rem;display:flex}image-lab .inspect-source select{padding:.2rem .4rem;font-size:.7rem}image-lab .viewer-help{color:var(--muted);margin:.6rem 0 1rem;font-size:.69rem;line-height:1.6}image-lab .pixel-inspector{border-top:1px solid var(--line);padding-top:.75rem}image-lab .pixel-inspector summary{cursor:pointer;font-size:.8rem;font-weight:600}image-lab .pixel-inspector summary span{color:var(--muted);margin-left:.5rem;font-size:.65rem;font-weight:400}image-lab .pixel-navigation{flex-wrap:wrap;align-items:center;gap:.6rem;margin:.85rem 0;display:flex}image-lab .pixel-navigation input{width:4.5rem}image-lab .pixel-navigation label{align-items:center;gap:.3rem;display:flex}image-lab .pixel-state{color:var(--muted);font-size:.65rem}image-lab .pixel-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}image-lab .pixel-card{background:var(--panel);border:1px solid var(--line);border-radius:7px;gap:.75rem;min-width:0;padding:.7rem;display:flex}image-lab .pixel-card>canvas{width:99px;height:99px;image-rendering:pixelated;flex-shrink:0;margin:0}image-lab .pixel-card>div{min-width:0}image-lab .pixel-card strong{align-items:center;gap:.5rem;font-size:.72rem;display:flex}image-lab .pixel-swatch{border:1px solid var(--muted);border-radius:2px;width:.8rem;height:.8rem}image-lab .pixel-values{font:400 .65rem/1.65 var(--sl-font-mono);white-space:pre-wrap;overflow-wrap:anywhere;background:0 0;border:0;margin:.3rem 0;padding:0}image-lab .native-values{font:400 .63rem/1.6 var(--sl-font-mono);color:var(--muted);overflow-wrap:anywhere;margin:0}image-lab .asset-provenance{color:var(--muted);margin:.8rem 0 0;font-size:.65rem}image-lab .guide-link{font-size:.8rem}@media (width<=700px){image-lab{padding:.9rem}image-lab .lab-heading{align-items:start}image-lab .lab-title{font-size:.95rem}image-lab .standalone-link{font-size:.68rem}image-lab .lab-canvases,image-lab .pixel-cards{grid-template-columns:1fr}image-lab .pixel-viewport{height:262px}image-lab .size-control{margin-left:0}image-lab .lab-parameters{gap:.8rem}image-lab .zoom-readout{font-size:.6rem}image-lab .pixel-inspector summary span{margin:.2rem 0 .6rem;display:block}image-lab .download{margin-left:0}}image-lab .region-tools{align-items:center;gap:.7rem;margin:.8rem 0;display:flex}image-lab .region-tools span,image-lab .stage-note{color:var(--muted);font-size:.75rem}image-lab .select-region[aria-pressed=true],image-lab .lab-stages button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}image-lab[data-selecting=true] canvas.input{touch-action:none;cursor:crosshair}image-lab .lab-stages{flex-wrap:wrap;gap:.45rem;margin:.8rem 0;display:flex}image-lab .lab-stages:empty,image-lab .stage-note:empty{display:none}image-lab .stage-note{margin:.5rem 0}
