@layer components{.sf{--sf-ink:var(--primary);--sf-rail:2px}.article-body .sf :is(h3,h4){border-block-start:0;margin-block-start:0;padding-block-start:0}.sf-bar{gap:2px;block-size:.5rem;margin:1rem 1rem 0;display:flex}.sf-seg{flex:var(--n) 1 0;background-color:var(--line);min-inline-size:.375rem;&.is-new{background-color:var(--sf-ink)}&.is-changed{background-color:color-mix(in srgb, var(--sf-ink) 45%, var(--surface))}&.is-dropped{border:1px dashed var(--muted-foreground);background-color:#0000}}.sf-controls{border-block-end:1px solid var(--line);grid-template-columns:minmax(0,1fr);gap:.875rem;padding:1rem;display:grid}.sf-find{grid-template-columns:minmax(0,1fr);gap:.25rem;max-inline-size:28rem;display:grid}.sf-label{color:var(--heading);font-size:var(--text-sm);font-weight:500}.sf-input{border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--background);min-block-size:2.75rem;color:var(--foreground);font:inherit;padding:.375rem .75rem;&::placeholder{color:var(--muted-foreground)}&:focus-visible{outline:2px solid var(--sf-ink);outline-offset:2px}}.sf-filters{flex-wrap:wrap;gap:.375rem;display:flex;& .btn{font-size:var(--text-sm);gap:.375rem}}.sf-n{color:var(--muted-foreground);font-variant-numeric:tabular-nums}.sf .btn[aria-pressed=true] .sf-n{color:inherit}.sf-actions{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;display:flex}.sf-status{color:var(--heading);font-size:var(--text-sm);font-variant-numeric:tabular-nums;min-block-size:calc(2 * var(--text-sm--line-height) * 1em)}.sf-ref{color:var(--muted-foreground);font-size:var(--text-xs);font-variant-numeric:tabular-nums;line-height:var(--text-xs--line-height)}.sf-group{padding:1rem 1rem .25rem;&+.sf-group{border-block-start:1px solid var(--line)}}.sf-group-head{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.125rem .75rem;display:grid;&>.sf-ref{grid-column:1/-1}}.cm .sf-group-name{color:var(--heading);font-size:var(--text-base);overflow-wrap:anywhere;margin:0;font-weight:500;line-height:1.4}.sf-group-count{color:var(--sf-ink);font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:500}.cm .sf-rows{margin:.5rem 0 0;padding:0;list-style:none}.cm .sf-rows>.sf-row{border-block-start:1px solid var(--line);border-inline-start:var(--sf-rail) solid var(--line);overflow-wrap:anywhere;grid-template-columns:minmax(0,1fr);gap:.5rem;margin:0;padding:.75rem 0 .875rem .875rem;display:grid;&.is-new{border-inline-start-color:var(--sf-ink)}&.is-changed{border-inline-start-style:double;border-inline-start-width:4px;border-inline-start-color:var(--sf-ink)}&.is-dropped{border-inline-start-style:dashed;border-inline-start-color:var(--muted-foreground)}}.sf-name{color:var(--heading);flex-wrap:wrap;align-items:baseline;gap:.25rem .625rem;font-weight:500;line-height:1.4;display:flex}.sf-tag{border:1px solid var(--border);color:var(--muted-foreground);font-size:var(--text-xs);border-radius:2px;padding:0 .375rem;font-weight:500;line-height:1.5;&.is-new{border-color:var(--sf-ink);background-color:var(--sf-ink);color:var(--primary-foreground,#fff)}&.is-changed{border-color:var(--sf-ink);color:var(--sf-ink)}&.is-dropped{border-style:dashed;border-color:var(--muted-foreground)}}.sf-sides{grid-template-columns:minmax(0,1fr);gap:.625rem 1.5rem;display:grid}@container (width>=44rem){.sf-sides{grid-template-columns:repeat(2,minmax(0,1fr))}}.sf-side{grid-template-columns:minmax(0,1fr);align-content:start;gap:.125rem;display:grid}.sf-when{color:var(--muted-foreground);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:500}.sf-text{color:var(--foreground);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}.sf-none{color:var(--muted-foreground);font-size:var(--text-sm);font-style:italic;line-height:var(--text-sm--line-height)}.sf-note{border-inline-start:1px solid var(--sf-ink);color:var(--foreground);font-size:var(--text-sm);line-height:var(--text-sm--line-height);padding-inline-start:.75rem}.sf-empty{color:var(--foreground);padding:1rem}.sf[data-show=before] .sf-side.is-now,.sf[data-show=before] .sf-note{display:none}.sf[data-show=before] .sf-sides{grid-template-columns:minmax(0,1fr)}@media (prefers-reduced-motion:no-preference){.sf[data-moved] .sf-row.is-in{animation:.32s cubic-bezier(.4,0,.2,1) both sf-arrive;animation-delay:calc(var(--i,0) * 45ms)}}@keyframes sf-arrive{0%{opacity:0;translate:0 .375rem}}@media (forced-colors:active){.sf-seg.is-new,.sf-tag.is-new{color:highlighttext;forced-color-adjust:none;background-color:highlight}.cm .sf-rows>.sf-row:is(.is-new,.is-changed){border-inline-start-color:highlight}}@media (scripting:none){.sf-controls{display:none}}}