.fabric-fact {position:relative;min-width:0;overflow:hidden;text-align:left;display:block;border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.fact-spec {display:grid;align-content:start;gap:6px}
.fact-label {color:#55565a;font-size:12px;white-space:normal}
.fact-label span {display:inline-block;transition:transform .45s ease}
.fabric-fact[aria-expanded=true] .fact-label span {transform:rotate(180deg)}
.fact-value {font-size:14px;line-height:1.5}
.fabric-fact:nth-child(n+5) .fact-value{white-space:normal}
.fact-why {font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.fabric-fact:focus-visible {outline:2px solid currentColor;outline-offset:2px}

@media(min-width:750px){
 .d :is(#studio-fabric-dialog,.studio-fabric-section,.fabrics-wrap) .fabric-explainers:is(.fabric-dialog-facts,.material-facts){
   display:flex;gap:0;align-items:stretch
 }
 .fabric-fact {flex:1 1 0%;min-block-size:66px;display:flex;align-items:flex-start;transition:flex-grow .55s ease-in-out}
 .fabric-fact:first-child {flex-grow:1.4;min-inline-size:100px}
 .fabric-fact:nth-child(3) {min-inline-size:106px}
 .fabric-fact[aria-expanded=true] {flex-grow:5.7}
 .fact-value {white-space:nowrap;transition:opacity .32s ease}
 .fabric-explainers:has([aria-expanded=true]) .fabric-fact[aria-expanded=false] .fact-value {opacity:0}
 .fact-spec {flex:0 0 auto;max-inline-size:100%}
 .fact-label {white-space:normal;overflow-wrap:anywhere}
 .fact-why {display:none;min-inline-size:0;margin-inline:12px 6px;padding-inline-start:12px;border-inline-start:1px solid #ccc}
 .fabric-fact[aria-expanded=true] .fact-spec {flex:0 0 156px;max-inline-size:none}
 .fabric-fact:is(:nth-child(2),:nth-child(4))[aria-expanded=true] .fact-spec {flex-basis:120px}
 .fabric-fact[aria-expanded=true] .fact-value {white-space:normal;overflow-wrap:anywhere}
 .fabric-fact[aria-expanded=true] .fact-why {display:block;flex:1;min-inline-size:230px;animation:fact-reveal .45s ease .18s both}
 @keyframes fact-reveal {from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
}
@media(max-width:749px){
 .fabric-fact {align-self:start}
 .fact-why {display:none}
 .fabric-fact[aria-expanded=true] .fact-why {display:block;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.fabric-fact,.fact-why,.fact-value,.fact-label span{transition:none!important;animation:none!important}}