.sp .cx__fields{align-items:start}.sp__out{display:flex;flex-direction:column;gap:16px;transition:opacity var(--dur-2)}.sp__out[data-stale],.sp__viz[data-stale]{opacity:.45}.sp__viz{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:start;transition:opacity var(--dur-2)}.sp__bars{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;min-width:0}.sp__row{display:grid;grid-template-columns:minmax(84px,112px) minmax(0,1fr) minmax(64px,96px);align-items:center;gap:14px;width:100%;min-height:38px;padding:6px 12px;border-radius:var(--radius-s);border:1px solid transparent;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1)}.sp__row:hover{background:var(--surface)}.sp__row[aria-pressed=true]{background:var(--accent-soft);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}.sp__name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp__row[aria-pressed=true] .sp__name{color:var(--accent-fg)}.sp__track{height:14px;background:var(--surface-2);overflow:hidden}.sp__bar,.sp__track{display:block;border-radius:999px}.sp__bar{width:100%;height:100%;background:var(--accent);transform-origin:0 50%;transition:transform var(--dur-3) var(--ease-out)}:dir(rtl) .sp__bar{transform-origin:100% 50%}.sp__val{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font-mono);font-variant-numeric:tabular-nums;line-height:1.25}.sp__val b{font-size:var(--text-sm);font-weight:600}.sp__val small{font-size:11px;color:var(--fg-faint)}.sp__demo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.sp__stage{width:100%;padding:16px;border-radius:var(--radius);border:1px dashed var(--line-strong);background:var(--surface)}.sp__card{max-width:100%;border-radius:12px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 50%,transparent);transition:padding var(--dur-3) var(--ease-out)}.sp__card-in{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:8px;background:var(--bg-elev);font-size:var(--text-sm);color:var(--fg-muted)}.sp__card-in strong{color:var(--fg)}.sp__chip{padding:3px 10px;border-radius:999px;font-style:normal;font-size:12px;font-weight:700;background:var(--accent);color:var(--accent-ink)}.sp__applied{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--text-sm);color:var(--fg-muted)}.sp__applied code{padding:.1em .45em;border-radius:6px;background:var(--surface-2);color:var(--fg);font-family:var(--font-mono)}@media (max-width:860px){.sp__viz{grid-template-columns:minmax(0,1fr)}}@media (max-width:520px){.sp__row{grid-template-columns:minmax(70px,92px) minmax(0,1fr) 64px;gap:10px;padding-inline:8px}}@media (pointer:coarse){.sp__row{min-height:44px}}@media (prefers-reduced-motion:reduce){.sp__bar,.sp__card,.sp__out,.sp__viz{transition:none}}