.png-trace{color:var(--svgbase-ink);scroll-margin-top:90px}.png-trace [hidden]{display:none!important}.png-trace button,.png-trace-actions a{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:8px 12px;font-size:13px;display:inline-flex}.png-trace button:disabled,.png-trace [aria-disabled=true]{opacity:.4;cursor:not-allowed}.png-trace button:hover:not(:disabled){background:var(--svgbase-soft)}.png-trace :is(button,select,a,summary):focus-visible{outline:2px solid var(--svgbase-accent);outline-offset:3px}.png-trace .png-trace-primary{background:var(--svgbase-ink);color:var(--svgbase-surface)}.png-trace .png-trace-primary:hover:not(:disabled){background:var(--svgbase-accent);color:#fff}.png-trace-toolbar,.png-trace-actions{justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.png-trace-toolbar{border-bottom:1px solid var(--svgbase-line)}.png-trace-toolbar>div,.png-trace-actions>div{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.png-trace-grid{--svg-editor-height:480px}.png-trace-original,.png-trace-result{flex-direction:column;min-width:0;min-height:0;display:flex}.png-trace-original{border-right:1px solid var(--svgbase-line)}.png-trace-original[data-dragging=true]{outline:2px dashed var(--svgbase-accent);outline-offset:-4px}.png-trace-heading{border-bottom:1px solid var(--svgbase-line);flex:none;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:6px 14px;font-size:12px;display:flex}.png-trace-heading>span,.png-trace-heading>div{align-items:center;gap:6px;display:flex}.png-trace-heading>span:last-child{color:var(--svgbase-muted)}.png-trace-heading button{min-height:32px;padding:5px 9px;font-size:12px}.png-trace-heading button[aria-pressed=true]{background:var(--svgbase-soft);font-weight:600}.png-trace-canvas{flex:1;justify-content:center;align-items:center;min-height:0;padding:30px 24px 58px;display:flex;position:relative;overflow:hidden}.png-trace-canvas>img{object-fit:contain;max-width:100%;max-height:100%;display:block}.png-trace-empty{text-align:center;max-width:330px;color:var(--svgbase-muted);flex-direction:column;align-items:center;gap:16px;font-size:13px;line-height:1.65;display:flex}.png-trace-empty h2{color:var(--svgbase-ink);letter-spacing:-.025em;font-size:clamp(19px,2vw,24px);font-weight:600}.png-trace-empty small{font-size:11px}.png-trace-output{flex:1;min-height:0;display:flex}.png-trace-preview,.png-trace-code{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.png-trace-code .png-trace-heading{border-color:var(--svg-code-line)}.png-trace-code .png-trace-heading>span{color:var(--svg-code-muted)}.png-trace-code-note{color:var(--svg-code-muted);border-top:1px solid var(--svg-code-line);flex:none;padding:9px 12px;font-size:11px}.png-trace-zoom{border-radius:9px;bottom:12px}.png-trace-zoom button{min-width:34px;padding:5px}.png-trace-info{border-top:1px solid var(--svgbase-line);min-height:38px;color:var(--svgbase-muted);overflow-wrap:anywhere;flex-wrap:wrap;flex:none;justify-content:space-between;gap:6px;padding:10px 14px;font-size:11px;display:flex}.png-trace-controls{border-top:1px solid var(--svgbase-line);flex-wrap:wrap;align-items:center;gap:12px;padding:10px 16px;display:flex}.png-trace-controls small{color:var(--svgbase-muted);margin-left:auto;font-size:11px}.png-trace-background{color:var(--svgbase-muted);align-items:center;gap:10px;font-size:12px;display:flex}.png-trace-background button{border:1px solid var(--svgbase-line);border-radius:7px;width:28px;height:28px;min-height:28px;padding:0}.png-trace-background button[aria-pressed=true]{outline:2px solid var(--svgbase-accent);outline-offset:2px}.png-trace-settings{border-top:1px solid var(--svgbase-line);padding:0 16px}.png-trace-settings summary{cursor:pointer;align-items:center;gap:8px;min-height:46px;font-size:12px;list-style:none;display:flex}.png-trace-settings summary::-webkit-details-marker{display:none}.png-trace-settings summary:after{content:"+";margin-left:auto}.png-trace-settings[open] summary:after{content:"−"}.png-trace-settings>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:8px 0;display:grid}.png-trace-settings label{color:var(--svgbase-muted);flex-direction:column;gap:7px;font-size:12px;display:flex}.png-trace-settings select{border:1px solid var(--svgbase-line);background:var(--svgbase-surface);color:var(--svgbase-ink);border-radius:7px;width:100%;padding:9px}.png-trace-settings>p{color:var(--svgbase-muted);padding:6px 0 16px;font-size:11px;line-height:1.65}.png-trace-error{border-top:1px solid var(--svgbase-line);color:#9b3c25;background:#fff4ee;padding:12px 16px;font-size:12px;line-height:1.65}.png-trace-actions{border-top:1px solid var(--svgbase-line)}.png-trace-actions a{color:var(--svgbase-accent);padding-inline:0;font-size:12px}.png-trace-trust{border-top:1px solid var(--svgbase-line);color:var(--svgbase-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 24px;padding:12px 16px;font-size:11px;display:flex}.png-trace-trust>span{align-items:center;gap:6px;display:inline-flex}.png-trace-fullscreen{z-index:60;border:0;border-radius:0;flex-direction:column;width:100%;height:100dvh;display:flex;position:fixed;inset:0;overflow:auto}.png-trace-fullscreen>.png-trace-grid{flex:1;height:auto;min-height:320px}.png-trace-fullscreen>:not(.png-trace-grid){flex-shrink:0}@media (width<=760px){.png-trace-grid{grid-template-columns:minmax(0,1fr);height:auto}.png-trace-original,.png-trace-result{height:420px}.png-trace-original{border-right:0;border-bottom:1px solid var(--svgbase-line)}.png-trace-controls small{margin-left:0}.png-trace-settings>div{grid-template-columns:repeat(2,minmax(0,1fr))}.png-trace-actions{flex-direction:column-reverse;align-items:stretch}.png-trace-actions>div{justify-content:space-between}.png-trace-actions>div:last-child>button{flex:1;padding-inline:6px;font-size:12px}.png-trace-actions>div:first-child:empty{display:none}.png-trace-toolbar{gap:4px;padding:10px}.png-trace-toolbar>div{gap:3px}.png-trace-toolbar button{padding-inline:7px;font-size:12px}.png-trace-fullscreen>.png-trace-grid{flex:none}}@media (prefers-reduced-motion:reduce){.png-trace .animate-spin{animation:none}}.png-trace-guide-links{flex-wrap:wrap;gap:8px 20px;display:flex}.png-trace-guide-links a{color:var(--svgbase-ink);text-underline-offset:4px;text-decoration:underline}