body[data-tool]{--bg:var(--paper);--panel:var(--paper-2);--panel-soft:color-mix(in oklch, var(--paper) 70%, var(--paper-2));--panel-deep:var(--paper);--border:var(--rule);--border-strong:var(--rule);--text:var(--ink);--text-strong:var(--ink);--muted:var(--ink-2);--dim:var(--ink-2);--blue:var(--ink);--blue-strong:var(--ink);--blue-text:var(--ink);--accent:var(--ink);--line:var(--rule);--soft-line:color-mix(in oklch, var(--rule) 55%, transparent);--soft:var(--paper-2);font-family:var(--sans)}body[data-tool] button,body[data-tool] input,body[data-tool] select,body[data-tool] textarea,body[data-tool] label{font-family:inherit}body[data-tool] button,body[data-tool] .upload-button,body[data-tool] .upload-label,body[data-tool] input,body[data-tool] select,body[data-tool] textarea{border-radius:0}body[data-tool] button,body[data-tool] .upload-button,body[data-tool] .upload-label,body[data-tool] select{border-color:var(--rule);background:var(--paper);color:var(--ink)}body[data-tool] button:hover,body[data-tool] .upload-button:hover,body[data-tool] .upload-label:hover,body[data-tool] select:hover{background:color-mix(in oklch, var(--ink) 8%, var(--paper))}body[data-tool] button.active{border-color:var(--ink);background:var(--ink);color:var(--paper)}body[data-tool] button.btn-primary,body[data-tool] button.action-button,body[data-tool] #btn-download,body[data-tool] #save-btn{border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:700}body[data-tool] button.btn-primary:hover:not(:disabled),body[data-tool] button.action-button:hover:not(:disabled),body[data-tool] #btn-download:hover:not(:disabled),body[data-tool] #save-btn:hover:not(:disabled){background:var(--paper-2)}body[data-tool] input[type=range],body[data-tool] input[type=checkbox]{accent-color:var(--ink)}body[data-tool] .value{color:var(--ink)}body:is([data-tool=trace],[data-tool=edit]){grid-template-rows:var(--nav-height) minmax(0, 1fr);background:var(--paper);width:100%;height:100dvh;color:var(--ink);margin:0;display:grid;overflow:hidden}body:is([data-tool=trace],[data-tool=edit]) #app{grid-row:2;width:100%;height:auto;min-height:0}body:is([data-tool=trace],[data-tool=edit]) .help,body:is([data-tool=trace],[data-tool=edit]) #expert-status,body:is([data-tool=trace],[data-tool=edit]) #expert-density-stats{color:var(--ink-2)}body[data-tool] .scope-note{border-left:2px solid var(--ink);color:var(--ink-2);margin:.7rem 0 0;padding-left:.65rem;font-size:.72rem;line-height:1.45}body:is([data-tool=trace],[data-tool=edit]) #actions{border-color:var(--rule)}body:is([data-tool=trace],[data-tool=edit]) #actions button{min-height:2.35rem}body:is([data-tool=trace],[data-tool=edit]) #workspace{background-color:#fff;background-image:linear-gradient(45deg,#ededed 25%,#0000 25%),linear-gradient(-45deg,#ededed 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ededed 75%),linear-gradient(-45deg,#0000 75%,#ededed 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;min-width:0}body:is([data-tool=trace],[data-tool=edit]) #workspace-placeholder{color:#343434}body:is([data-tool=trace],[data-tool=edit]) #workspace-placeholder .placeholder-note{color:#686868;max-width:22rem;font:600 .65rem/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase}body:is([data-tool=trace],[data-tool=edit]) #svg-container{color:#000}body:is([data-tool=trace],[data-tool=edit]) #zoom-controls{border-color:var(--rule);background:var(--paper);color:var(--ink)}body:is([data-tool=trace],[data-tool=edit]) #zoom-controls button{border-color:var(--rule)}body[data-tool=trace] .benchmark-control{display:none}body[data-tool=trace].show-benchmark .benchmark-control{display:block}body[data-tool=trace] #benchmark-results{border-color:var(--rule);background:var(--paper);color:var(--ink-2)}body[data-tool=edit] input[type=number]{border-color:var(--rule);background:var(--paper);color:var(--ink)}body:is([data-tool=trace],[data-tool=edit]) #loading-overlay{background:color-mix(in oklch, var(--paper) 88%, transparent);color:var(--ink)}body[data-tool=edit] .loading-spinner{aspect-ratio:1;border:2px solid var(--rule);border-top-color:var(--ink);border-radius:50%;width:2rem;animation:.8s linear infinite spin}body[data-tool=optimize]{background:var(--paper);color:var(--ink);--ui-font:var(--sans);--code-font:var(--mono);--text:var(--ink);--muted:var(--ink-2);--line:var(--rule);--soft-line:color-mix(in oklch, var(--rule) 58%, transparent);--panel:var(--paper-2);--accent:var(--ink);margin:0}body[data-tool=optimize] .tool-deck{max-width:50rem;color:var(--ink-2);margin:.55rem 0 0;font-size:.82rem;line-height:1.5}body[data-tool=optimize] .import-safety-note{color:var(--ink-2);margin:.55rem 0 0;font-size:.72rem}body[data-tool=optimize] .version{display:none}body[data-tool=optimize] textarea,body[data-tool=optimize] .console-box,body[data-tool=optimize] .empty-placeholder{border-color:var(--rule);background:var(--paper);color:var(--ink)}body[data-tool=optimize] textarea[readonly],body[data-tool=optimize] #diagnostics-json,body[data-tool=optimize] .output-settings-panel{background:var(--paper-2);color:var(--ink)}body[data-tool=optimize] .controls-bar{border-color:var(--rule)}body[data-tool=optimize] .scale-value,body[data-tool=optimize] #busy-indicator,body[data-tool=optimize] .savings-hero .savings-detail,body[data-tool=optimize] .savings-hero .savings-svgo,body[data-tool=optimize] details.diagnostics-panel>summary,body[data-tool=optimize] .cleanup-details>summary{color:var(--ink-2)}body[data-tool=optimize] .savings-hero.is-saving .savings-main{color:var(--success)}body[data-tool=optimize] .savings-hero.is-bigger .savings-main{color:var(--danger)}body[data-tool=minisvg]{background:var(--paper);color:var(--ink);--shadow:none;margin:0}body[data-tool=minisvg] .panel,body[data-tool=minisvg] input[type=number],body[data-tool=minisvg] input[type=text],body[data-tool=minisvg] textarea,body[data-tool=minisvg] select{background:var(--paper);border-color:var(--rule);color:var(--ink)}body[data-tool=minisvg] .secondary{background:var(--paper)}body[data-tool=icon-grid]{background:var(--paper);max-width:none;color:var(--ink);margin:0;padding:0}body[data-tool=icon-grid]>header,body[data-tool=icon-grid]>main{width:min(100%, var(--site-width));padding-inline:var(--site-pad);margin-inline:auto}body[data-tool=icon-grid]>header{top:var(--nav-height);background:color-mix(in oklch, var(--paper) 94%, transparent);padding-block:1.5rem}body[data-tool=icon-grid] .icon-card{background:var(--paper-2)}body[data-tool=icon-grid] .icon-card:hover{background:var(--ink);color:var(--paper)}@media (max-width:46rem){body:is([data-tool=trace],[data-tool=edit]){height:auto;min-height:100dvh;overflow:auto}body:is([data-tool=trace],[data-tool=edit]) #app{min-height:calc(100dvh - var(--nav-height));flex-direction:column;overflow:visible}body:is([data-tool=trace],[data-tool=edit]) #workspace{min-height:54dvh}}body:is([data-tool=edit],[data-tool=trace]) #workspace{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}body:is([data-tool=edit],[data-tool=trace]) #toolbar{z-index:20;align-items:center;gap:6px;display:flex;position:absolute;top:10px;right:10px}body:is([data-tool=edit],[data-tool=trace]) #zoom-controls button:first-child{border-left:0}body:is([data-tool=edit],[data-tool=trace]) #workspace.can-pan{cursor:grab}body:is([data-tool=edit],[data-tool=trace]) #workspace.panning{cursor:grabbing}body:is([data-tool=edit],[data-tool=trace]) #workspace-placeholder{z-index:10;text-align:center;color:#525252;flex-direction:column;align-items:center;gap:12px;display:flex}body:is([data-tool=edit],[data-tool=trace]) #workspace-placeholder .placeholder-title{font-size:15px;font-weight:600}body:is([data-tool=edit],[data-tool=trace]) #canvas-area{width:calc((100% - 48px) * var(--canvas-zoom,1));height:calc((100% - 48px) * var(--canvas-zoom,1));pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;top:24px;left:24px}body:is([data-tool=edit],[data-tool=trace]) #svg-container{pointer-events:auto;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}body:is([data-tool=edit],[data-tool=trace]) #svg-container svg{object-fit:contain;width:100%;height:100%;max-height:100%}body[data-tool=trace] :is(#bg-image,.f-expert-bg-image){image-rendering:pixelated}body:is([data-tool=edit],[data-tool=trace]) .f-density-ring{fill:none;pointer-events:none;vector-effect:non-scaling-stroke}body:is([data-tool=edit],[data-tool=trace]) .f-anchor:hover{fill:#dbeafe;transform:scale(1.3)}body:is([data-tool=edit],[data-tool=trace]) .f-stack-hit{fill:#0000;stroke:#0000;pointer-events:all;cursor:pointer}body:is([data-tool=edit],[data-tool=trace]) .f-inspector-row-bg{fill:#0000;pointer-events:all;cursor:pointer}body:is([data-tool=edit],[data-tool=trace]) .f-inspector-entry:hover .f-inspector-row-bg{fill:#2b0909}body:is([data-tool=edit],[data-tool=trace]) .f-inspector-entry:hover .f-inspector-label{fill:#fecaca}body:is([data-tool=edit],[data-tool=trace]) .f-handle.context-visible{pointer-events:visiblePainted;opacity:1}body:is([data-tool=edit],[data-tool=trace]) .f-handle:hover{fill:#d1fae5;transform:scale(1.3)}body:is([data-tool=edit],[data-tool=trace]) #svg-container.outline-mode svg path{fill:#0000!important;stroke:#3b82f6!important;stroke-width:1.5px!important;vector-effect:non-scaling-stroke!important}body:is([data-tool=edit],[data-tool=trace]) #expert-panel.enabled{display:block}body:is([data-tool=edit],[data-tool=trace]) #expert-density-stats .bad{color:#f87171}body:is([data-tool=edit],[data-tool=trace]) #expert-panel .help{line-height:1.4}body:is([data-tool=edit],[data-tool=trace]) #svg-container svg #expert-grid-layer line{pointer-events:none;vector-effect:non-scaling-stroke}body[data-tool=minisvg] .section>summary:before{content:"+";font:600 12px/1 var(--mono);color:var(--ink-2)}body[data-tool=minisvg] .section[open]>summary:before{content:"−"}