animation-range = 
  [ <'animation-range-start'> <'animation-range-end'>? ]#  

<animation-range-start> = 
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

<animation-range-end> = 
  [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>  

background = 
  <bg-layer>#? , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    

<final-bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <visual-box>                    ||
  <'background-color'>            

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<background-color> = 
  <color>  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<polygon()> = 
  polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>  

block-size = 
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

border-block-color = 
  <'border-top-color'>{1,2}  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

border-block-style = 
  <'border-top-style'>{1,2}  

<border-top-style> = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

border-block-width = 
  <'border-top-width'>{1,2}  

<border-top-width> = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

border-block = 
  <'border-block-start'>  

<border-block-start> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

border-inline-color = 
  <'border-top-color'>{1,2}  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

border-inline-style = 
  <'border-top-style'>{1,2}  

<border-top-style> = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

border-inline-width = 
  <'border-top-width'>{1,2}  

<border-top-width> = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

border-inline = 
  <'border-block-start'>  

<border-block-start> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?                            

<box-shadow-color> = 
  <color>#  

<box-shadow-offset> = 
  [ none | <length>{2} ]#  

<box-shadow-blur> = 
  <length [0,∞]>#  

<box-shadow-spread> = 
  <length>#  

<box-shadow-position> = 
  [ outset | inset ]#  

column-rule = 
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>  

<column-rule-width> = 
  <line-width>  

<column-rule-style> = 
  <line-style>  

<column-rule-color> = 
  <color>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

columns = 
  <'column-width'>  ||
  <'column-count'>  

<column-width> = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<column-count> = 
  auto             |
  <integer [1,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

container = 
  <'container-name'> [ / <'container-type'> ]?  

<container-name> = 
  none             |
  <custom-ident>+  

<container-type> = 
  normal       |
  size         |
  inline-size  

flex-basis = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse  

flex = 
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  

<flex-grow> = 
  <number [0,∞]>  

<flex-shrink> = 
  <number [0,∞]>  

<flex-basis> = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

font = 
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |
  <system-family-name>                                

<font-style> = 
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?  

<font-variant-css2> = 
  normal      |
  small-caps  

<font-weight> = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-width-css3> = 
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded   

<font-size> = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<line-height> = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<font-family> = 
  [ <family-name> | <generic-family> ]#  

<system-family-name> = 
  caption        |
  icon           |
  menu           |
  message-box    |
  small-caption  |
  status-bar     

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>  

<length-percentage> = 
  <length>      |
  <percentage>  

<family-name> = 
  <string>         |
  <custom-ident>+  

<generic-family> = 
  generic( <custom-ident>+ )  |
  <string>                    |
  <custom-ident>+             

gap = 
  <'row-gap'> <'column-gap'>?  

<row-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<column-gap> = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

grid-template = 
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?  

<grid-template-rows> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<grid-template-columns> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<explicit-track-list> = 
  [ <line-names>? <track-size> ]+ <line-names>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>  

<grid-template> = 
  none                                                |
  [ <'grid-template-rows'> / <'grid-template-columns'> ]  |
  [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?  

<grid-template-rows> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<grid-auto-columns> = 
  <track-size>+  

<grid-auto-rows> = 
  <track-size>+  

<grid-template-columns> = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<explicit-track-list> = 
  [ <line-names>? <track-size> ]+ <line-names>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

inline-size = 
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

inset-block = 
  <'top'>{1,2}  

<top> = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

inset-inline = 
  <'top'>{1,2}  

<top> = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

inset = 
  <'top'>{1,4}  

<top> = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>  

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>      

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>       |
  <gradient>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<url> = 
  <url()>  |
  <src()>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

margin-block-end = 
  <'margin-top'>  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin-block-start = 
  <'margin-top'>  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin-block = 
  <'margin-top'>{1,2}  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin-inline-end = 
  <'margin-top'>  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin-inline-start = 
  <'margin-top'>  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin-inline = 
  <'margin-top'>{1,2}  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

margin = 
  <'margin-top'>{1,4}  

<margin-top> = 
  <length-percentage>  |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

mask-border = 
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>                                

<mask-border-source> = 
  none     |
  <image>  

<mask-border-slice> = 
  [ <number> | <percentage> ]{1,4} fill?  

<mask-border-width> = 
  [ <length-percentage> | <number> | auto ]{1,4}  

<mask-border-outset> = 
  [ <length> | <number> ]{1,4}  

<mask-border-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<mask-border-mode> = 
  luminance  |
  alpha      

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

max-block-size = 
  <'max-width'>  

<max-width> = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

max-inline-size = 
  <'max-width'>  

<max-width> = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

min-block-size = 
  <'min-width'>  

<min-width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

min-inline-size = 
  <'min-width'>  

<min-width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>  

offset = 
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?  

<offset-position> = 
  normal      |
  auto        |
  <position>  

<offset-path> = 
  none                          |
  <offset-path> || <coord-box>  

<offset-distance> = 
  <length-percentage>  

<offset-rotate> = 
  [ auto | reverse ]  ||
  <angle>             

<offset-anchor> = 
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<offset-path> = 
  <ray()>        |
  <url>          |
  <basic-shape>  

<coord-box> = 
  <paint-box>  |
  view-box     

<length-percentage> = 
  <length>      |
  <percentage>  

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<url> = 
  <url()>  |
  <src()>  

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<ray-size> = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

outline = 
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>  

<outline-color> = 
  auto                      |
  [ <color> | <image-1D> ]  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-width> = 
  <line-width>  

<image-1D> = 
  <stripes()>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>  

overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto     

padding-block-end = 
  <'padding-top'>  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding-block-start = 
  <'padding-top'>  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding-block = 
  <'padding-top'>{1,2}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding-inline-end = 
  <'padding-top'>  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding-inline-start = 
  <'padding-top'>  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding-inline = 
  <'padding-top'>{1,2}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

padding = 
  <'padding-top'>{1,4}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>  

<path()> = 
  path( <'fill-rule'>? , <string> )  

<fill-rule> = 
  nonzero  |
  evenodd  

place-content = 
  <'align-content'> <'justify-content'>?  

<align-content> = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<justify-content> = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end    

place-items = 
  <'align-items'> <'justify-items'>?  

<align-items> = 
  normal                                    |
  stretch                                   |
  <baseline-position>                       |
  [ <overflow-position>? <self-position> ]  |
  anchor-center                             

<justify-items> = 
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

place-self = 
  <'align-self'> <'justify-self'>?  

<align-self> = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<justify-self> = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  anchor-center                                       

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end    

scroll-timeline = 
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#  

<scroll-timeline-name> = 
  [ none | <dashed-ident> ]#  

<scroll-timeline-axis> = 
  [ block | inline | x | y ]#  

text-decoration = 
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>  

<text-decoration-line> = 
  none                                                |
  [ underline || overline || line-through || blink ]  

<text-decoration-style> = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy    

<text-decoration-color> = 
  <color>  

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>  

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto     |
  balance  |
  stable   |
  pretty   

vertical-align = 
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>      

<alignment-baseline> = 
  baseline      |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  text-top      

<baseline-shift> = 
  <length-percentage>  |
  sub                  |
  super                |
  top                  |
  center               |
  bottom               

<length-percentage> = 
  <length>      |
  <percentage>  

view-timeline = 
  [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#  

<view-timeline-name> = 
  [ none | <dashed-ident> ]#  

<view-timeline-axis> = 
  [ block | inline | x | y ]#  

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>