.portfolio-decoder{border-radius:var(--radius-panel);corner-shape:squircle;background:var(--surface-illustration);overflow:hidden;container:portfolio-decoder/inline-size}.portfolio-decoder-body{gap:var(--spacing-dds-lg);padding:var(--spacing-dds-lg);display:grid}.portfolio-trellis{width:100%;max-width:var(--layout-copy-width);margin-inline:auto;display:block}.portfolio-decoder-legend{justify-content:center;gap:var(--spacing-dds-sm) var(--spacing-dds-lg);flex-wrap:wrap;display:flex}.portfolio-decoder-legend>span{align-items:center;gap:var(--spacing-dds-xs);color:var(--text-primary);display:inline-flex}.portfolio-decoder-legend>span:before{content:"";width:var(--spacing-dds-lg);border-top:2px solid}.portfolio-decoder-legend [data-constrained=true]{color:var(--diagram-accent)}.portfolio-decoder-comparison{gap:var(--spacing-dds-lg);padding:var(--spacing-dds-lg);border-top:1px solid var(--border-subtle);display:grid}.portfolio-decoder-comparison>div{gap:var(--spacing-dds-xs);display:grid}.portfolio-decoder-comparison h4{font-weight:500}.portfolio-decoder-comparison [data-constrained=true] h4{color:var(--diagram-accent)}@container portfolio-decoder (min-width:30rem){.portfolio-decoder-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.portfolio-trellis-path{opacity:1!important;stroke-dasharray:none!important;stroke-dashoffset:0!important}}