.svg-page .tool-head{text-align:center;padding:var(--space-5) 0 var(--space-7)}.svg-page .tool-head .crumbs{margin-bottom:var(--space-6);justify-content:center;padding-top:0}.svg-page .tool-head .pg-lede{max-width:52ch;margin-left:auto;margin-right:auto}.svg-page .tool{max-width:1180px;margin:0 auto}.svg-page .tool-empty{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.svg-page .tool-empty .drop{min-height:460px}.svg-page .example{border-radius:var(--radius-lg);outline:1px solid var(--color-border);outline-offset:-1px;background:#fff;min-height:460px;position:relative;overflow:hidden}.svg-page .example .ex-label{z-index:3;position:absolute;top:16px;left:16px}.svg-page .compare{width:100%;height:100%;min-height:inherit;-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:ew-resize;--pad:40px;position:relative;overflow:hidden}.svg-page .compare .layer{position:absolute;inset:0}.svg-page .compare .layer>img,.svg-page .compare .layer>svg{inset:var(--pad);width:calc(100% - 2 * var(--pad));height:calc(100% - 2 * var(--pad));object-fit:contain;display:block;position:absolute}.svg-page .compare .before img{image-rendering:pixelated}.svg-page .compare .after{clip-path:inset(0 0 0 var(--pos,50%));background:inherit}.svg-page .compare .handle{top:0;bottom:0;left:var(--pos,50%);background:var(--color-text);z-index:2;width:2px;margin-left:-1px;position:absolute}.svg-page .compare .handle:after,.svg-page .compare .handle:before{content:"";border-radius:50%;width:44px;height:44px;margin:-22px;position:absolute;top:50%;left:50%}.svg-page .compare .handle:after{background:var(--color-text);box-shadow:var(--shadow-md)}.svg-page .compare .handle:before{z-index:1;background:var(--color-bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4 2 8l4 4M10 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4 2 8l4 4M10 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/20px no-repeat}.svg-page .compare:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}.svg-page .compare .side{z-index:3;border-radius:var(--radius-full);color:#fff;background:#0f0f0ed1;padding:6px 12px;font-size:13px;font-weight:600;position:absolute;bottom:16px}.svg-page .compare .side.l{left:16px}.svg-page .compare .side.r{right:16px}.svg-page .tool-work{gap:var(--space-4);grid-template-columns:1fr 360px;display:none}.svg-page .tool[data-state=work] .tool-empty{display:none}.svg-page .tool[data-state=work] .tool-work{display:grid}.svg-page .stage{border-radius:var(--radius-lg);height:560px;position:relative;overflow:hidden}.svg-page .stage .compare{min-height:560px}.svg-page .stage-bar{z-index:var(--z-raised);pointer-events:none;justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;top:16px;left:16px;right:16px}.svg-page .stage-bar>*{pointer-events:auto}.svg-page .file-pill{background:var(--color-raised);box-shadow:var(--shadow-sm);border-radius:var(--radius-full);align-items:center;gap:8px;max-width:70%;height:40px;padding:0 6px 0 14px;font-size:14px;font-weight:500;display:inline-flex}.svg-page .file-pill span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.svg-page .file-pill button{background:var(--color-surface);border:0;border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.svg-page .progress{z-index:var(--z-raised);background:color-mix(in srgb, var(--color-bg) 70%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);place-items:center;display:none;position:absolute;inset:0}.svg-page .progress[data-on=true]{display:grid}.svg-page .progress-card{background:var(--color-raised);border-radius:var(--radius-md);box-shadow:var(--shadow-md);width:min(320px,80%);padding:22px 26px}.svg-page .bar{background:var(--color-surface-2);border-radius:3px;height:6px;margin-top:14px;overflow:hidden}.svg-page .bar i{background:var(--color-text);transform-origin:0;border-radius:3px;width:100%;height:100%;animation:1.4s ease-in-out infinite alternate svg-trace-bar;display:block}@keyframes svg-trace-bar{0%{transform:scaleX(.12)}to{transform:scaleX(.9)}}.svg-page .fail{text-align:center;padding:var(--space-8);display:none}.svg-page .stage[data-fail=true] .fail{z-index:6;background:var(--color-surface);place-items:center;display:grid;position:absolute;inset:0}.svg-page .fail .icon{color:var(--color-danger);font-size:28px}.svg-page .panel{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-6);flex-direction:column;display:flex}.svg-page .panel .seg{display:flex}.svg-page .panel .seg button{flex:1;padding:0 8px}.svg-page .range-row{justify-content:space-between;font-size:14px;font-weight:600;display:flex}.svg-page .range-row output{color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-weight:500}.svg-page input[type=range]{width:100%;accent-color:var(--color-text);height:28px}.svg-page .toggle{justify-content:space-between;align-items:center;font-size:15px;font-weight:600;display:flex}.svg-page .switch{appearance:none;background:var(--color-surface-2);cursor:pointer;border-radius:13px;width:44px;height:26px;margin:0;transition:all .2s;position:relative}.svg-page .switch:after{content:"";background:var(--switch-knob);width:20px;height:20px;box-shadow:var(--shadow-sm);border-radius:50%;transition:all .2s;position:absolute;top:3px;left:3px}.svg-page .switch:checked{background:var(--color-text)}.svg-page .switch:checked:after{background:var(--color-bg);left:21px}.svg-page .stats{grid-template-columns:1fr 1fr;gap:10px;display:grid}.svg-page .stat{background:var(--color-raised);border-radius:var(--radius-sm);padding:12px 14px}.svg-page .stat b{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:18px;display:block}.svg-page .stat span{color:var(--color-text-muted);font-size:13px}.svg-page .panel-actions{gap:10px;margin-top:auto;display:grid}.svg-page .panel-actions .btn{width:100%}.svg-page .upsell{gap:var(--space-7);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-4);grid-template-columns:200px 1fr auto;align-items:center;display:grid}.svg-page .upsell .thumbs{grid-template-columns:1fr 1fr;gap:6px;display:grid}.svg-page .upsell .thumbs img{aspect-ratio:1;object-fit:cover;border-radius:10px}.svg-page .upsell p{color:var(--color-text-muted);margin:6px 0 0}.svg-page .ex-grid{gap:var(--space-5);grid-template-columns:repeat(3,1fr);display:grid}.svg-page .ex-card{border-radius:var(--radius-md);aspect-ratio:1;outline:1px solid var(--color-border);outline-offset:-1px;background:#fff;position:relative;overflow:hidden}.svg-page .ex-card .compare{height:100%;min-height:0}.svg-page .example .compare,.svg-page .ex-card .compare{background:#fff}.svg-page .ex-cap{margin-top:14px;font-weight:600}.svg-page .ex-cap span{color:var(--color-text-muted);font-size:15px;font-weight:400;display:block}.svg-page .why{gap:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}.svg-page .why .icon{margin-bottom:var(--space-4);font-size:28px}.svg-page .why p{color:var(--color-text-muted);margin:8px 0 0}@media (width<=1000px){.svg-page .tool-empty,.svg-page .tool-work,.svg-page .ex-grid,.svg-page .why{grid-template-columns:1fr}.svg-page .upsell{grid-template-columns:120px 1fr}.svg-page .upsell .btn{grid-column:1/-1}}@media (width<=720px){.svg-page .tool-head{padding:var(--space-4) 0 var(--space-6)}.svg-page .tool-head .crumbs{margin-bottom:var(--space-5)}.svg-page .tool-empty .drop{min-height:300px;padding:var(--space-8) var(--space-5)}.svg-page .example{min-height:320px}.svg-page .stage{height:380px}.svg-page .stage .compare{min-height:380px}.svg-page .compare{--pad:20px}.svg-page .panel{padding:var(--space-5)}.svg-page .ex-grid{gap:var(--space-3);grid-template-columns:1fr 1fr}.svg-page .ex-grid>:last-child{display:none}.svg-page .ex-cap{font-size:15px}.svg-page .ex-cap span{font-size:13px}.svg-page .upsell{gap:var(--space-4);padding:var(--space-4)}.svg-page .why{gap:var(--space-7)}.svg-page .file-pill button{width:44px;height:44px;margin-right:-4px}.svg-page .file-pill{height:48px}}