.png-trace{color:var(--svgbase-ink);scroll-margin-top:90px}.png-trace [hidden]{display:none!important}.png-trace :is(button,.svg-file-picker),.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;scroll-margin-top:90px;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 .png-trace-heading button{min-width:32px;color:var(--svg-code-text);padding-inline:7px}.png-trace-code .png-trace-heading button>svg{flex-shrink:0}.png-trace-code .svg-code-theme{border-color:var(--svg-code-line);background:var(--svg-code-status-background)}.png-trace .png-trace-code .png-trace-heading button:is(:hover,[aria-pressed=true]){color:var(--svg-code-text);background:var(--svg-code-line)}.png-trace-code .png-trace-heading button:focus-visible{outline-color:var(--svg-code-text)}.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 :is(button,.svg-file-picker){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}.trace-example-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.trace-example-grid figure{grid-template-rows:subgrid;border:1px solid var(--svgbase-line);border-radius:14px;grid-row:span 3;row-gap:0;min-width:0;margin:0;display:grid;overflow:hidden}.trace-example-grid figcaption{color:var(--svgbase-ink);border-bottom:1px solid var(--svgbase-line);align-content:start;gap:5px;padding:14px 16px;font-weight:600;display:grid}.trace-example-kind{color:var(--svgbase-muted);letter-spacing:.04em;text-transform:uppercase;font-size:11px;font-weight:500}.trace-example-grid figcaption strong{font-size:15px}.trace-example-grid figcaption p{color:var(--svgbase-muted);margin:0;font-size:12px;font-weight:400;line-height:1.5}.trace-example-image{background-color:#fff;background-image:linear-gradient(45deg,#f1f3f6 25%,#0000 25%),linear-gradient(-45deg,#f1f3f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f1f3f6 75%),linear-gradient(-45deg,#0000 75%,#f1f3f6 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:relative;overflow:hidden}.trace-example-image img{max-width:none;position:absolute}.trace-example-facts{border-top:1px solid var(--svgbase-line);color:var(--svgbase-muted);font-variant-numeric:tabular-nums;margin:0;padding:10px 16px;font-size:12px;line-height:1.5}.trace-example-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;font-size:13px;font-weight:600;display:flex}.trace-example-toolbar [role=group]{border:1px solid var(--svgbase-line);border-radius:10px;gap:4px;padding:4px;display:inline-flex}.trace-conversion-example button{cursor:pointer;border-radius:6px;min-height:38px;padding:8px 12px;font-size:13px}.trace-example-toolbar button[aria-pressed=true]{background:var(--svgbase-ink);color:var(--svgbase-surface)}.trace-conversion-example :is(button,summary,pre):focus-visible{outline:2px solid var(--svgbase-accent);outline-offset:3px}.trace-example-hint{color:var(--svgbase-muted);margin:10px 0 18px;font-size:13px;line-height:1.6}.trace-example-code{border:1px solid var(--svgbase-line);border-radius:10px;margin-top:18px}.trace-example-code summary{color:var(--svgbase-ink);cursor:pointer;padding:14px 16px;font-size:14px;font-weight:600}.trace-example-code>div{min-width:0;padding:0 16px 16px}.trace-example-code button{border:1px solid var(--svgbase-line)}.trace-example-code [role=status],.trace-example-code [role=alert]{color:var(--svgbase-muted);font-size:13px}.trace-example-code pre{background:var(--svgbase-soft);max-height:240px;color:var(--svgbase-ink);border-radius:6px;margin:12px 0 0;padding:12px;font-size:11px;overflow:auto}.trace-example-note{color:var(--svgbase-muted);margin-block:16px;line-height:1.7}@media (width<=760px){.trace-example-grid{gap:10px}.trace-example-grid figcaption{padding:10px}.trace-example-grid figcaption strong{font-size:13px}.trace-example-facts{padding:8px 10px;font-size:11px}}